PPTX, PDF2,059 views

Geekend 2012 - Jumping Into Tumblr Theme Development

This document discusses Tumblr themes and theme development. It explains that Tumblr combines a traditional blog format with a social dashboard. It also outlines the basic ingredients of Tumblr themes including HTML, CSS, JavaScript, and Tumblr-specific theme operators. Finally, it provides resources for developing custom themes, integrating other services, and submitting themes to Tumblr.

Geekend 2012 - Jumping Into Tumblr Theme Development

1.
Jumping Into TumblrTheme Development - November 9, 2012 – Geekend – Savannah, GA
7.
Why use Tumblr? “Thatbig, empty text box”
8.
Why use Tumblr? “[Tumblr is] the mullet theory of social software design. It’s all business in the front: you have your blog that looks like any other blog, although usually prettier. And then the real party is in the back, through the social interaction on the dashboard.” - Chris Muscarella, New York Times, 7/15/12
9.
Why use Tumblr? Tumblr Dashboard
10.
Why use Tumblr? http://tumblr.com/spotlight
11.
Why use Tumblr? http://iam.beyonce.com
12.
Why use Tumblr? http://textsfromhillaryclinton.tumblr.com
14.
Tumblr Themes “[Tumblr is] the mullet theory of social software design. It’s all business in the front: you have your blog that looks like any other blog, although usually prettier. And then the real party is in the back, through the social interaction on the dashboard.” - Chris Muscarella, New York Times, 7/15/12
17.
Tumblr Theme Ingredients HTML/ CSS/ JavaScript + Tumblr Theme Operators
18.
Tumblr Theme Operators
19.
Tumblr Theme Operators •Blocks – Represent data sets • {block:Posts}…{/block:Posts} – Test conditions • {block:HasPages}…{/block:HasPages} • Variables – Output dynamic data • {Description}
20.
Default Operators
21.
Custom Operators
22.
Custom Operators
23.
Services and APIs
24.
Services and APIs •Tumblr – Display featured tagged content • Instagram and Flickr – Create unique photo streams • Google – Integrate WebFonts, Analytics, Maps • Other – Twitter, Foursquare, Songkick, exfm, etc…
25.
Services and APIs
26.
Services and APIs
27.
Mobile
28.
Responsive Themes
29.
Responsive Themes
30.
Workflow and Tools •Theme Editor – HTML editor – Appearance Options • Static Assets CDN – Images, stylesheets, scripts • Documentation
31.
Workflow and Tools
32.
Workflow and Tools
33.
Workflow and Tools ThemeEditor is required, but not enough.
34.
Workflow and Tools • Text Editor • SASS / Compass • AMD (requirejs) • Build (rjs) • Testing (xip.io)
35.
Tools - What’sMissing Local Template Parser Theme / Operator Linting Tool Editor Support
36.
Theme Submissions
37.
Theme Submissions
38.
Tumblr Resources • CustomThemes – http://www.tumblr.com/docs/en/custom_themes • API – http://www.tumblr.com/docs/en/api/v2 • Static Assets – http://www.tumblr.com/themes/upload_static_file • Submissions – http://www.tumblr.com/themes/new • Developer Center – http://www.tumblr.com/developers • Theme Garden – http://www.tumblr.com/themes/
39.
Other Resources • http://instagram.com/developer/ • http://www.flickr.com/services/api/ • https://developers.google.com/webfonts/ • https://developers.google.com/analytics/ • https://dev.twitter.com/ • https://typekit.com/
40.
Sources • http://www.businessinsider.com/one-million-users-startups-2012-1 • http://mashable.com/2011/06/15/tumblr-surpasses-wordpress/ • http://mashable.com/2010/12/06/tumblr-still-down/ • http://mashable.com/2010/03/24/tumblr-premium-themes/ • http://mashable.com/2012/09/19/tumblr-more-popular-pinterest/ • http://staff.tumblr.com/post/58506428/likes • http://staff.tumblr.com/post/100679024/100-000-000th-post • http://mashable.com/2011/11/14/tumblr-infographic/ • http://www.nytimes.com/2012/07/15/magazine/can-tumblrs-david-karp-embrace-ads- without-selling-out.html
41.
Contact Info • businessbullpen.com •@BusinessBullpen – Todd Wickersty • tumblr: log.wick.me • twitter: @toddwickersty • email: todd@businessbullpen.com – Graham Blevins • tumblr: grahamblevins.com • twitter: @grahamblevins • email: graham@businessbullpen.com

Editor's Notes

#2 Welcome to Jumping Into Tumblr Theme Development by Graham Blevins and Todd Wickersty.We are the co-owners of Business Bullpen out of Charlottesville, Virginia. Business Bullpen has been around since 2005 and we create well-crafted digital experiences. In recent years, we have been developing more and more on the Tumblr platform using their API and Theme Operators. We have created several premium themes for Tumblr that are available for sale in the Tumblr theme garden and are now working with brands to develop custom Tumblr themes.
#3 Tumblr was launched on February 19th, 2007 by David Karp in New York. The initial lead developer for Tumblr was Marco Arment, who some of you might be familiar with his current work – Instapaper.Tumblr was designed to make blogging easier because so many blogs are abandoned after a few days, weeks, or months. In quick time, Tumblr introduced reblogs and likes, which enabled the service to build a community-driven blogging platform.
#4 The reblog is the act of taking someone else’s post and re-publishing it to your own blog. It is one of the most significant features of TumblrReblogging:1. Makes it easier to produce content2. Enables bloggers to converse with one another because you can add your own commentary when you reblog a post3. Lets other bloggers know about your own blog because the original poster will be notified when their post is reblogged… all while crediting the original source of the contentIn addition to the reblog, Tumblr introduced likes in 2008, two years before Facebook, as a another way to build community and connect with other bloggers on Tumblr.
#5 In 2009, Tumblr reached a couple significant milestones. 1 million blogs, 100 million posts.Compare those numbers with the numbers in the screenshot above, which was taken on November 9th, 2012.
#6 But that rapid growth did cause some problems. Like almost every other platform that experiences rapid growth like Tumblr, the platform had its fair amount of technical issues. Late in 2010, Tumblr experienced one of, if not, it’s most extreme unplanned outage. The service and all of the blogs that were powered by Tumblr went down for approximately 24 hours. But in the end, Tumblr came out stronger than ever before. They improved their systems and infrastructure over the course of 2011 and continue to do so to make the platform extremely stable and reliable.And the growth continued in 2011.Tumblr passed WordPress.com in number of blogs hosted. From a financial perspective, Tumblr’s valuation was upped to $800 million in 2011.
#7 2012 has been another banner year for Tumblr. “Tumblr” as a search term overtakes “Blog” in Google searchesIn a continuing effort to realize revenue, Tumblr introduced advertising in a few different ways.Tumblr’s focus on mobile has increased as Tumblr released a brand new iPhone and Android app. In the meantime, Tumblr’s popularity continues to grow.Mashable reported that Tumblr experienced over 6 million mobile visitors in the month of July.Back in 2009 and 2010, Posterous had been neck and neck with Tumblr as a competitive service in the microblogging space, but early this year Twitter bought Posterous. Since it was reported that the Posterous team would be deployed on other projects, the acquisition signaled the end of the competition between the two services. Now Pinterest is often compared to Tumblr as a competitive service. Whether you agree with that or not, it’s worth noting that Tumblr passed Pinterest in unique visitors during the period of July 2011 – June 2012.
#8 So why do so many people use Tumblr? And if you aren’t using Tumblr now, why should you start?There are many reasons.As I mentioned earlier, David Karp wanted to create a blogging service that made it easier for people to publish. He has been quoted in many articles that older blogging platforms, like WordPress or Blogger, would give him pause because of “that big, empty text box”.So instead Tumblr gives you a nudge by presenting seven different options for posting content.While these options make it easier to blog, this isn’t the primary reason why so many people love Tumblr. It’s the social component, the community behind Tumblr.
#10 Here is a screenshot of the Tumblr dashboard. Below your posting options is a stream of all the posts from the blogs you follow. You can reblog, like, and reply to posts all within the dashboard. So not only does the dashboard enable you to consume all of the blogs you like, it also enables you to interact with your favorite blogs.I don’t know how many people view my blog posts from within the Tumblr dashboard. I know how many followers I have, but that doesn’t tell me how many of those followers are consuming content. Even so, I’m willing to bet that more people consume my content from within the dashboard than through my blog’s web address. This might not be the case for blogs with greater traffic, but I’m betting it is true for most blogs on Tumblr.While the dashboard provides the mechanism to consume all of your favorite Tumblr blogs in one place, if it wasn’t for the content created by the Tumblr community, Tumblr would not be successful.
#11 I consume a wide variety of content on Tumblr from business blogs to design to sports to humor to politics to personal blogs to food blogs to a blog just about huskies.Here is a screenshot of the Tumblr spotlight section that helps you find other blogs by category. This is a shot of the business category, which is spotlighting blogs from a couple venture capitalists, the Stanford Graduate School of Business, and Nasdaq among others. I choose this category because a lot of people associate Tumblr with animated gifs of cats, but there are plenty of blogs that focus on serious topics.Another example is news organizations.Many news organizations adopted Tumblr in 2009-2010 with Newsweek leading the pack. Newsweek showed other news organizations how to use Tumblr effectively by publishing a fresh mix of content instead of just regurgitating the latest edition of their magazine. Other news organizations that do a great job on Tumblr are NPR, The Atlantic, and the Washington Post.
#12 So maybe serious topics like news and business aren’t what you want to use Tumblr for. I don’t think you are alone.Many entertainers have turned to Tumblr over the past couple of years with Beyonce being one of them. She confirmed her Super Bowl appearance by posting this photo on her Tumblr blog earlier this year.
#13 If celebrities aren’t your thing, then I’m sure the humor that is generated from Tumblr blogs is a good enough reason to use it. Texts from Hillary Clinton was launched earlier this year, which started as a joke at a bar between two friends. Within one week of launching the blog, the 32 posts generated 83,000 shares on Facebook, 8400 Twitter followers, and over 45,000 Tumblr followers. The meme ended with Secretary Clinton submitting her own text to the site.Ok, so what if news blogs, blogs about your career or profession, celebrity blogs, or even political humor blogs aren’t your interest?
#14 Then there are always the blogs with the animated gifs of cats!
#15 So let me bring this quote back and focus on the text in white. This prettier blog is the Tumblr theme. Like WordPress, Tumblr has encouraged designers and developers to create themes.
#16 In 2009, Tumblr introduced the Theme Garden. This gave users the ability to install a theme with one click. At first, all Tumblr themes were free.A year later, Tumblr introduced one of its first initiatives to generate revenue – premium themes. Tumblr has always placed the highest emphasis on design. Therefore, they hand-picked a short list of designers and developers across the world to produce premium themes that sell for $9, $19, and $49.Today the theme garden is a curated list of themes that have been submitted to Tumblr.
#17 While our presentation is focused on development, the design of a Tumblr theme is just as important as the development. If you are designing a Tumblr theme or want to partner with a designer, the designer should really become familiar with the Tumblr theme operators, which is one of the cornerstones of Tumblr development.
#18 Minimum requirements to get started.HTML – StructureCSS – PresentationJavaScript – BehaviorTumblr Theme Operators – Data
#19 Defined by Tumblr.There are over 100 theme variables available for use.
#20 Two types of operators – Blocks and VariablesRenders:1) Default Operators - Posts, Navigation, Group Blogs, Tag Pages, Localization, Search, Following, Likes, Metadata2) Custom Operators - Colors, images, fonts, text, booleans,Custom CSS
#21 Example Posts Block
#22 Define appearance options by defining custom operators.
#23 Used to let users override or apply custom CSS
#24 Use theme appearance options and third-party services for richer experiences.In addition to displaying all of the post types and the core Tumblr features, such as notes, likes, and blogs that you follow, you can create your own features using the Tumblr API or third-party services.
#25 Examples: Featured posts, Instagram photo feedSome features we’ve included in our themes are an Instagram photo stream, Flickr photo stream, Disqus comments, recent tweets, the ability to share posts to Facebook, Twitter, Pinterest, Google+, and Instapaper, endless scrolling, Google analytics, Google web fonts, Typekit, a music player powered by exfm, featured posts and the sticky post.Other themes have integrated Facebook comments, Google Maps, and Foursquare check-ins.As a theme developer, you have the opportunity to introduce a feature in your own theme that no other theme offers. We did with our first free theme by introducing the sticky post and featured posts. A year and a half later, over 97,000 blogs have installed it.
#28 Tumblr has a default mobile view for all blogs.However, developers can implement responsive approach to provide their own mobile experience.
#29 This is a screenshot of our first responsive theme.
#31 Putting it all together.Tumblr supplies …
#33 Once you come up with a concept and design for a theme, you also need to decide on customization options. With each theme, you can provide the user with options to customize the styles, layout, and features. Here is a screenshot of the theme customization interface within Tumblr. Over on the left are the options available to the user for customization. On the right is a preview version of the theme that changes when customizations are made. All of these customizations are built into the theme. While they aren’t required for custom themes, options are expected for free themes.In this theme, there are almost ten color options, options to position content in different areas, background image, positioning and repeat options, options to add social media icons and links, feature options such as Instagram, Flickr, Recent Tweets, Disqus Comments, a Custom Text block, Featured Posts, and much more.
#35 Set a Local Development EnvironmentText Editor:Your choice / where you are comfortableSASS / Compass:CSS preprocessingAMD: Modular JavaScript- Provides a framework for better feature developmentxip.io:- Developed by the good folks at 37Signals- Special domain name that provides wildcard DNS for any IP addressYou can use these domains to access virtual hosts on your development web server from devices on your local network, like iPads, iPhones, and other computers. No configuration required!
#37 You don't have to submit your theme to Tumblr, but if you would like your theme to be available for others to use, I recommend submitting it. To submit a theme, you need a Tumblr account. Tumblr will review your theme and once it is approved, you will have your own page on Tumblr that presents all of your themes. As I mentioned earlier, some themes are added to the Tumblr theme garden, which is curated by the Tumblr design team.
#38 Tumblr will review your theme and once it is approved, you will have your own page on Tumblr that presents all of your themes. As I mentioned earlier, some themes are added to the Tumblr theme garden, which is determined by the Tumblr design team.
#39 So that does it for our presentation. We will post the deck with links to all of the resources that we mentioned today.

Geekend 2012 - Jumping Into Tumblr Theme Development

More Related Content

What's hot

Viewers also liked

Similar to Geekend 2012 - Jumping Into Tumblr Theme Development

Geekend 2012 - Jumping Into Tumblr Theme Development

Editor's Notes