SlideShare a Scribd company logo
1 of 41
Download to read offline
Jumping Into Tumblr Theme Development - November 9, 2012 – Geekend – Savannah, GA
Geekend 2012 - Jumping Into Tumblr Theme Development
Geekend 2012 - Jumping Into Tumblr Theme Development
Geekend 2012 - Jumping Into Tumblr Theme Development
Geekend 2012 - Jumping Into Tumblr Theme Development
Geekend 2012 - Jumping Into Tumblr Theme Development
Why use Tumblr?

“That big, empty text box”
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
Why use Tumblr?
                   Tumblr
                  Dashboard
Why use Tumblr?




    http://tumblr.com/spotlight
Why use Tumblr?




    http://iam.beyonce.com
Why use Tumblr?




  http://textsfromhillaryclinton.tumblr.com
Geekend 2012 - Jumping Into Tumblr Theme Development
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
Geekend 2012 - Jumping Into Tumblr Theme Development
Geekend 2012 - Jumping Into Tumblr Theme Development
Tumblr Theme Ingredients


HTML / CSS/ JavaScript
          +
Tumblr Theme Operators
Tumblr Theme Operators
Tumblr Theme Operators
• Blocks
  – Represent data sets
     • {block:Posts}…{/block:Posts}
  – Test conditions
     • {block:HasPages}…{/block:HasPages}


• Variables
  – Output dynamic data
     • {Description}
Default Operators
Custom Operators
Custom Operators
Services and APIs
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…
Services and APIs
Services and APIs
Mobile
Responsive Themes
Responsive Themes
Workflow and Tools
• Theme Editor
  – HTML editor
  – Appearance Options
• Static Assets CDN
  – Images, stylesheets, scripts
• Documentation
Workflow and Tools
Workflow and Tools
Workflow and Tools


Theme Editor is required, but
       not enough.
Workflow and Tools
•   Text Editor
•   SASS / Compass
•   AMD (requirejs)
•   Build (rjs)
•   Testing (xip.io)
Tools - What’s Missing


   Local Template Parser

Theme / Operator Linting Tool

       Editor Support
Theme Submissions
Theme Submissions
Tumblr Resources
• Custom Themes
   – 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/
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/
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
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

More Related Content

What's hot

Bootstrap Lab - ASNApalooza 2014
Bootstrap Lab - ASNApalooza 2014Bootstrap Lab - ASNApalooza 2014
Bootstrap Lab - ASNApalooza 2014John Nickell
 
WordPress Themes 101 - HighEdWeb New England 2013
WordPress Themes 101 - HighEdWeb New England 2013WordPress Themes 101 - HighEdWeb New England 2013
WordPress Themes 101 - HighEdWeb New England 2013Curtiss Grymala
 
Yahoo! Search monkey API - CEBIT 2008
Yahoo! Search monkey API - CEBIT 2008Yahoo! Search monkey API - CEBIT 2008
Yahoo! Search monkey API - CEBIT 2008Eric D.
 
WordPress Themes 101 - dotEduGuru Summit 2013
WordPress Themes 101 - dotEduGuru Summit 2013WordPress Themes 101 - dotEduGuru Summit 2013
WordPress Themes 101 - dotEduGuru Summit 2013Curtiss Grymala
 
WP 101 - Local Development - Themes and Plugins
WP 101 - Local Development - Themes and PluginsWP 101 - Local Development - Themes and Plugins
WP 101 - Local Development - Themes and PluginsJoe Querin
 
Rails camp '15 presentation - Bootstrap v. Foundation v. Bourbon
Rails camp '15 presentation - Bootstrap v. Foundation v. BourbonRails camp '15 presentation - Bootstrap v. Foundation v. Bourbon
Rails camp '15 presentation - Bootstrap v. Foundation v. Bourbonezytiger
 
Managing Multiple Authors with WordPress
Managing Multiple Authors with WordPressManaging Multiple Authors with WordPress
Managing Multiple Authors with WordPressAl Davis
 
WordPress Themes 101 - PSUWeb13 Workshop
WordPress Themes 101 - PSUWeb13 WorkshopWordPress Themes 101 - PSUWeb13 Workshop
WordPress Themes 101 - PSUWeb13 WorkshopCurtiss Grymala
 
Drupal case study: ABC Dig Music
Drupal case study: ABC Dig MusicDrupal case study: ABC Dig Music
Drupal case study: ABC Dig MusicDavid Peterson
 
flAWS Walkthrough - AWS Chicago Meetup 8/8/2017
flAWS Walkthrough - AWS Chicago Meetup 8/8/2017flAWS Walkthrough - AWS Chicago Meetup 8/8/2017
flAWS Walkthrough - AWS Chicago Meetup 8/8/2017Steve Hoffman
 
Inside Look at Mura CMS Themeing
Inside Look at Mura CMS ThemeingInside Look at Mura CMS Themeing
Inside Look at Mura CMS ThemeingRonnie Duke
 

What's hot (14)

Drupal for rlace
Drupal for rlaceDrupal for rlace
Drupal for rlace
 
Bootstrap Lab - ASNApalooza 2014
Bootstrap Lab - ASNApalooza 2014Bootstrap Lab - ASNApalooza 2014
Bootstrap Lab - ASNApalooza 2014
 
WordPress Themes 101 - HighEdWeb New England 2013
WordPress Themes 101 - HighEdWeb New England 2013WordPress Themes 101 - HighEdWeb New England 2013
WordPress Themes 101 - HighEdWeb New England 2013
 
Yahoo! Search monkey API - CEBIT 2008
Yahoo! Search monkey API - CEBIT 2008Yahoo! Search monkey API - CEBIT 2008
Yahoo! Search monkey API - CEBIT 2008
 
WordPress Themes 101 - dotEduGuru Summit 2013
WordPress Themes 101 - dotEduGuru Summit 2013WordPress Themes 101 - dotEduGuru Summit 2013
WordPress Themes 101 - dotEduGuru Summit 2013
 
WP 101 - Local Development - Themes and Plugins
WP 101 - Local Development - Themes and PluginsWP 101 - Local Development - Themes and Plugins
WP 101 - Local Development - Themes and Plugins
 
Rails camp '15 presentation - Bootstrap v. Foundation v. Bourbon
Rails camp '15 presentation - Bootstrap v. Foundation v. BourbonRails camp '15 presentation - Bootstrap v. Foundation v. Bourbon
Rails camp '15 presentation - Bootstrap v. Foundation v. Bourbon
 
Managing Multiple Authors with WordPress
Managing Multiple Authors with WordPressManaging Multiple Authors with WordPress
Managing Multiple Authors with WordPress
 
WordPress Themes 101 - PSUWeb13 Workshop
WordPress Themes 101 - PSUWeb13 WorkshopWordPress Themes 101 - PSUWeb13 Workshop
WordPress Themes 101 - PSUWeb13 Workshop
 
Irb Tips and Tricks
Irb Tips and TricksIrb Tips and Tricks
Irb Tips and Tricks
 
Drupal case study: ABC Dig Music
Drupal case study: ABC Dig MusicDrupal case study: ABC Dig Music
Drupal case study: ABC Dig Music
 
Cities: Making Free Accessible WordPress Themes
Cities: Making Free Accessible WordPress ThemesCities: Making Free Accessible WordPress Themes
Cities: Making Free Accessible WordPress Themes
 
flAWS Walkthrough - AWS Chicago Meetup 8/8/2017
flAWS Walkthrough - AWS Chicago Meetup 8/8/2017flAWS Walkthrough - AWS Chicago Meetup 8/8/2017
flAWS Walkthrough - AWS Chicago Meetup 8/8/2017
 
Inside Look at Mura CMS Themeing
Inside Look at Mura CMS ThemeingInside Look at Mura CMS Themeing
Inside Look at Mura CMS Themeing
 

Viewers also liked

Content Management Systems (CMS) & Wordpress theme development
Content Management Systems (CMS) & Wordpress theme developmentContent Management Systems (CMS) & Wordpress theme development
Content Management Systems (CMS) & Wordpress theme developmentDave Wallace
 
Rapid WordPress Theme Development
Rapid WordPress Theme DevelopmentRapid WordPress Theme Development
Rapid WordPress Theme DevelopmentJosh Williams
 
DrupalEasy: Intro to Theme Development
DrupalEasy: Intro to Theme DevelopmentDrupalEasy: Intro to Theme Development
DrupalEasy: Intro to Theme Developmentultimike
 
Theme Development: From an idea to getting approved to wordpress.org
Theme Development: From an idea to getting approved to wordpress.orgTheme Development: From an idea to getting approved to wordpress.org
Theme Development: From an idea to getting approved to wordpress.orgThemeHorse
 
WordCamp TOR: Beyond The Guidelines - Theme Development Best Practices (Vol 1)
WordCamp TOR: Beyond The Guidelines - Theme Development Best Practices (Vol 1)WordCamp TOR: Beyond The Guidelines - Theme Development Best Practices (Vol 1)
WordCamp TOR: Beyond The Guidelines - Theme Development Best Practices (Vol 1)Chip Bennett
 
Cms & wordpress theme development 2011
Cms & wordpress theme development 2011Cms & wordpress theme development 2011
Cms & wordpress theme development 2011Dave Wallace
 
Introduction to WordPress Theme Development
Introduction to WordPress Theme DevelopmentIntroduction to WordPress Theme Development
Introduction to WordPress Theme DevelopmentSitdhibong Laokok
 
WordPress theme development from scratch : ICT MeetUp 2013 Nepal
WordPress theme development from scratch : ICT MeetUp 2013 NepalWordPress theme development from scratch : ICT MeetUp 2013 Nepal
WordPress theme development from scratch : ICT MeetUp 2013 NepalChandra Prakash Thapa
 
Better WordPress Theme Development Workflow
Better WordPress Theme Development WorkflowBetter WordPress Theme Development Workflow
Better WordPress Theme Development WorkflowRajeeb Banstola
 
Drupal Best Practices
Drupal Best PracticesDrupal Best Practices
Drupal Best Practicesmanugoel2003
 
Approaches To WordPress Theme Development
Approaches To WordPress Theme DevelopmentApproaches To WordPress Theme Development
Approaches To WordPress Theme DevelopmentCatch Themes
 
Drupal Theme Development - DrupalCon Chicago 2011
Drupal Theme Development - DrupalCon Chicago 2011Drupal Theme Development - DrupalCon Chicago 2011
Drupal Theme Development - DrupalCon Chicago 2011Ryan Price
 
Intro to WordPress theme development
Intro to WordPress theme developmentIntro to WordPress theme development
Intro to WordPress theme developmentThad Allender
 
MSP Development Theme
MSP Development ThemeMSP Development Theme
MSP Development ThemeTOPdesk
 
WordPress Theme Development Basics
WordPress Theme Development BasicsWordPress Theme Development Basics
WordPress Theme Development BasicsTech Liminal
 

Viewers also liked (18)

Content Management Systems (CMS) & Wordpress theme development
Content Management Systems (CMS) & Wordpress theme developmentContent Management Systems (CMS) & Wordpress theme development
Content Management Systems (CMS) & Wordpress theme development
 
Rapid WordPress Theme Development
Rapid WordPress Theme DevelopmentRapid WordPress Theme Development
Rapid WordPress Theme Development
 
DrupalEasy: Intro to Theme Development
DrupalEasy: Intro to Theme DevelopmentDrupalEasy: Intro to Theme Development
DrupalEasy: Intro to Theme Development
 
Theme development mac
Theme development macTheme development mac
Theme development mac
 
Theme Development: From an idea to getting approved to wordpress.org
Theme Development: From an idea to getting approved to wordpress.orgTheme Development: From an idea to getting approved to wordpress.org
Theme Development: From an idea to getting approved to wordpress.org
 
WordCamp TOR: Beyond The Guidelines - Theme Development Best Practices (Vol 1)
WordCamp TOR: Beyond The Guidelines - Theme Development Best Practices (Vol 1)WordCamp TOR: Beyond The Guidelines - Theme Development Best Practices (Vol 1)
WordCamp TOR: Beyond The Guidelines - Theme Development Best Practices (Vol 1)
 
Cms & wordpress theme development 2011
Cms & wordpress theme development 2011Cms & wordpress theme development 2011
Cms & wordpress theme development 2011
 
Introduction to WordPress Theme Development
Introduction to WordPress Theme DevelopmentIntroduction to WordPress Theme Development
Introduction to WordPress Theme Development
 
WordPress theme development from scratch : ICT MeetUp 2013 Nepal
WordPress theme development from scratch : ICT MeetUp 2013 NepalWordPress theme development from scratch : ICT MeetUp 2013 Nepal
WordPress theme development from scratch : ICT MeetUp 2013 Nepal
 
Theme Development
Theme DevelopmentTheme Development
Theme Development
 
Better WordPress Theme Development Workflow
Better WordPress Theme Development WorkflowBetter WordPress Theme Development Workflow
Better WordPress Theme Development Workflow
 
Drupal Best Practices
Drupal Best PracticesDrupal Best Practices
Drupal Best Practices
 
Best Practices in Theme Development - WordCamp Orlando 2012
Best Practices in Theme Development - WordCamp Orlando 2012Best Practices in Theme Development - WordCamp Orlando 2012
Best Practices in Theme Development - WordCamp Orlando 2012
 
Approaches To WordPress Theme Development
Approaches To WordPress Theme DevelopmentApproaches To WordPress Theme Development
Approaches To WordPress Theme Development
 
Drupal Theme Development - DrupalCon Chicago 2011
Drupal Theme Development - DrupalCon Chicago 2011Drupal Theme Development - DrupalCon Chicago 2011
Drupal Theme Development - DrupalCon Chicago 2011
 
Intro to WordPress theme development
Intro to WordPress theme developmentIntro to WordPress theme development
Intro to WordPress theme development
 
MSP Development Theme
MSP Development ThemeMSP Development Theme
MSP Development Theme
 
WordPress Theme Development Basics
WordPress Theme Development BasicsWordPress Theme Development Basics
WordPress Theme Development Basics
 

Similar to Geekend 2012 - Jumping Into Tumblr Theme Development

Demystifying WordPress
Demystifying WordPressDemystifying WordPress
Demystifying WordPressMykl Roventine
 
Diwd 2011-111011223430-phpapp01
Diwd 2011-111011223430-phpapp01Diwd 2011-111011223430-phpapp01
Diwd 2011-111011223430-phpapp01alexkirmse
 
Making Your Site Printable: CSS Summit 2014
Making Your Site Printable: CSS Summit 2014Making Your Site Printable: CSS Summit 2014
Making Your Site Printable: CSS Summit 2014Adrian Roselli
 
Open social & cmis oasistc-20100712
Open social & cmis   oasistc-20100712Open social & cmis   oasistc-20100712
Open social & cmis oasistc-20100712weitzelm
 
Introducing the New DSpace User Interface
Introducing the New DSpace User InterfaceIntroducing the New DSpace User Interface
Introducing the New DSpace User InterfaceTim Donohue
 
Introduction to Drupal
Introduction to DrupalIntroduction to Drupal
Introduction to DrupalTom Deryckere
 
Alfresco from an agile framework perspective
Alfresco from an agile framework perspectiveAlfresco from an agile framework perspective
Alfresco from an agile framework perspectiveJeff Potts
 
StoryCode Tech Immersion 1
StoryCode Tech Immersion 1StoryCode Tech Immersion 1
StoryCode Tech Immersion 1storycode
 
Customize it! Make IBM Connections look your way
Customize it! Make IBM Connections look your way Customize it! Make IBM Connections look your way
Customize it! Make IBM Connections look your way Klaus Bild
 
Drupal Training Topics
Drupal Training TopicsDrupal Training Topics
Drupal Training Topicsvibrantuser
 
Absolute Beginners Guide to Drupal
Absolute Beginners Guide to DrupalAbsolute Beginners Guide to Drupal
Absolute Beginners Guide to DrupalRod Martin
 
Rapi::Blog talk - TPC 2017
Rapi::Blog talk - TPC 2017Rapi::Blog talk - TPC 2017
Rapi::Blog talk - TPC 2017Henry Van Styn
 
Big(D)esign 2011: Portfolios for the Creative Professional
Big(D)esign 2011: Portfolios for the Creative ProfessionalBig(D)esign 2011: Portfolios for the Creative Professional
Big(D)esign 2011: Portfolios for the Creative ProfessionalLouellen Coker
 
Ready. Set. Drupal! An Intro to Drupal 8, Part 2
Ready. Set. Drupal! An Intro to Drupal 8, Part 2Ready. Set. Drupal! An Intro to Drupal 8, Part 2
Ready. Set. Drupal! An Intro to Drupal 8, Part 2Acquia
 
Freelancer Weapons of mass productivity
Freelancer Weapons of mass productivityFreelancer Weapons of mass productivity
Freelancer Weapons of mass productivityGregg Coppen
 
Arron daniels 1 pager researching the tech talent market
Arron daniels 1 pager   researching the tech talent marketArron daniels 1 pager   researching the tech talent market
Arron daniels 1 pager researching the tech talent marketTalent42
 
October 2014 - USG Rock Eagle - Drupal 101
October 2014 - USG Rock Eagle - Drupal 101October 2014 - USG Rock Eagle - Drupal 101
October 2014 - USG Rock Eagle - Drupal 101Eric Sembrat
 

Similar to Geekend 2012 - Jumping Into Tumblr Theme Development (20)

Demystifying WordPress
Demystifying WordPressDemystifying WordPress
Demystifying WordPress
 
Diwd 2011-111011223430-phpapp01
Diwd 2011-111011223430-phpapp01Diwd 2011-111011223430-phpapp01
Diwd 2011-111011223430-phpapp01
 
Making Your Site Printable: CSS Summit 2014
Making Your Site Printable: CSS Summit 2014Making Your Site Printable: CSS Summit 2014
Making Your Site Printable: CSS Summit 2014
 
Open social & cmis oasistc-20100712
Open social & cmis   oasistc-20100712Open social & cmis   oasistc-20100712
Open social & cmis oasistc-20100712
 
Introducing the New DSpace User Interface
Introducing the New DSpace User InterfaceIntroducing the New DSpace User Interface
Introducing the New DSpace User Interface
 
Introduction to Drupal
Introduction to DrupalIntroduction to Drupal
Introduction to Drupal
 
Alfresco from an agile framework perspective
Alfresco from an agile framework perspectiveAlfresco from an agile framework perspective
Alfresco from an agile framework perspective
 
StoryCode Tech Immersion 1
StoryCode Tech Immersion 1StoryCode Tech Immersion 1
StoryCode Tech Immersion 1
 
Recsys 2016
Recsys 2016Recsys 2016
Recsys 2016
 
Customize it! Make IBM Connections look your way
Customize it! Make IBM Connections look your way Customize it! Make IBM Connections look your way
Customize it! Make IBM Connections look your way
 
Drupal Training Topics
Drupal Training TopicsDrupal Training Topics
Drupal Training Topics
 
Absolute Beginners Guide to Drupal
Absolute Beginners Guide to DrupalAbsolute Beginners Guide to Drupal
Absolute Beginners Guide to Drupal
 
Rapi::Blog talk - TPC 2017
Rapi::Blog talk - TPC 2017Rapi::Blog talk - TPC 2017
Rapi::Blog talk - TPC 2017
 
Drupal101
Drupal101Drupal101
Drupal101
 
Wordpress as a CMS
Wordpress as a CMSWordpress as a CMS
Wordpress as a CMS
 
Big(D)esign 2011: Portfolios for the Creative Professional
Big(D)esign 2011: Portfolios for the Creative ProfessionalBig(D)esign 2011: Portfolios for the Creative Professional
Big(D)esign 2011: Portfolios for the Creative Professional
 
Ready. Set. Drupal! An Intro to Drupal 8, Part 2
Ready. Set. Drupal! An Intro to Drupal 8, Part 2Ready. Set. Drupal! An Intro to Drupal 8, Part 2
Ready. Set. Drupal! An Intro to Drupal 8, Part 2
 
Freelancer Weapons of mass productivity
Freelancer Weapons of mass productivityFreelancer Weapons of mass productivity
Freelancer Weapons of mass productivity
 
Arron daniels 1 pager researching the tech talent market
Arron daniels 1 pager   researching the tech talent marketArron daniels 1 pager   researching the tech talent market
Arron daniels 1 pager researching the tech talent market
 
October 2014 - USG Rock Eagle - Drupal 101
October 2014 - USG Rock Eagle - Drupal 101October 2014 - USG Rock Eagle - Drupal 101
October 2014 - USG Rock Eagle - Drupal 101
 

Geekend 2012 - Jumping Into Tumblr Theme Development

  • 1. Jumping Into Tumblr Theme Development - November 9, 2012 – Geekend – Savannah, GA
  • 7. Why use Tumblr? “That big, 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
  • 19. Tumblr Theme Operators • Blocks – Represent data sets • {block:Posts}…{/block:Posts} – Test conditions • {block:HasPages}…{/block:HasPages} • Variables – Output dynamic data • {Description}
  • 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…
  • 30. Workflow and Tools • Theme Editor – HTML editor – Appearance Options • Static Assets CDN – Images, stylesheets, scripts • Documentation
  • 33. Workflow and Tools Theme Editor is required, but not enough.
  • 34. Workflow and Tools • Text Editor • SASS / Compass • AMD (requirejs) • Build (rjs) • Testing (xip.io)
  • 35. Tools - What’s Missing Local Template Parser Theme / Operator Linting Tool Editor Support
  • 38. Tumblr Resources • Custom Themes – 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

  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. 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.
  6. 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.
  7. 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.
  8. 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.
  9. 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.
  10. 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.
  11. 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?
  12. Then there are always the blogs with the animated gifs of cats!
  13. 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.
  14. 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.
  15. 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.
  16. Minimum requirements to get started.HTML – StructureCSS – PresentationJavaScript – BehaviorTumblr Theme Operators – Data
  17. Defined by Tumblr.There are over 100 theme variables available for use.
  18. 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
  19. Example Posts Block
  20. Define appearance options by defining custom operators.
  21. Used to let users override or apply custom CSS
  22. 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.
  23. 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.
  24. Tumblr has a default mobile view for all blogs.However, developers can implement responsive approach to provide their own mobile experience.
  25. This is a screenshot of our first responsive theme.
  26. Putting it all together.Tumblr supplies …
  27. 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.
  28. 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!
  29. 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.
  30. 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.
  31. So that does it for our presentation. We will post the deck with links to all of the resources that we mentioned today.