41
Jumping Into Tumblr Theme Development - November 9, 2012 – Geekend – Savannah, GA

Geekend 2012 - Jumping Into Tumblr Theme Development

  • View
    3.091

  • Download
    0

Embed Size (px)

DESCRIPTION

An overview of Tumblr and Tumblr theme development by Business Bullpen.

Citation preview

Page 1: Geekend 2012 - Jumping Into Tumblr Theme Development

Jumping Into Tumblr Theme Development - November 9, 2012 – Geekend – Savannah, GA

Page 2: Geekend 2012 - Jumping Into Tumblr Theme Development
Page 3: Geekend 2012 - Jumping Into Tumblr Theme Development
Page 4: Geekend 2012 - Jumping Into Tumblr Theme Development
Page 5: Geekend 2012 - Jumping Into Tumblr Theme Development
Page 6: Geekend 2012 - Jumping Into Tumblr Theme Development
Page 7: Geekend 2012 - Jumping Into Tumblr Theme Development

“That big, empty text box”

Why use Tumblr?

Page 8: Geekend 2012 - Jumping Into Tumblr Theme Development

“[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.”

Why use Tumblr?

- Chris Muscarella, New York Times, 7/15/12

Page 9: Geekend 2012 - Jumping Into Tumblr Theme Development

Why use Tumblr?Tumblr

Dashboard

Page 10: Geekend 2012 - Jumping Into Tumblr Theme Development

Why use Tumblr?

http://tumblr.com/spotlight

Page 11: Geekend 2012 - Jumping Into Tumblr Theme Development

Why use Tumblr?

http://iam.beyonce.com

Page 12: Geekend 2012 - Jumping Into Tumblr Theme Development

Why use Tumblr?

http://textsfromhillaryclinton.tumblr.com

Page 13: Geekend 2012 - Jumping Into Tumblr Theme Development

Why use Tumblr?

http://iheartcatgifs.tumblr.com/

Page 14: Geekend 2012 - Jumping Into Tumblr Theme Development

“[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.”

Tumblr Themes

- Chris Muscarella, New York Times, 7/15/12

Page 15: Geekend 2012 - Jumping Into Tumblr Theme Development

http://www.tumblr.com/themes

Page 16: Geekend 2012 - Jumping Into Tumblr Theme Development
Page 17: Geekend 2012 - Jumping Into Tumblr Theme Development

Tumblr Theme Ingredients

HTML / CSS / JavaScript+

Tumblr Theme Operators

Page 18: Geekend 2012 - Jumping Into Tumblr Theme Development

Tumblr Theme Operators

Page 19: Geekend 2012 - Jumping Into Tumblr Theme Development

Tumblr Theme Operators• Blocks– Represent data sets• {block:Posts}…{/block:Posts}

– Test conditions• {block:HasPages}…{/block:HasPages}

• Variables– Output dynamic data• {Description}

Page 20: Geekend 2012 - Jumping Into Tumblr Theme Development

Default Operators

Page 21: Geekend 2012 - Jumping Into Tumblr Theme Development

Custom Operators

Page 22: Geekend 2012 - Jumping Into Tumblr Theme Development

Custom Operators

Page 23: Geekend 2012 - Jumping Into Tumblr Theme Development

Services and APIs

Page 24: Geekend 2012 - Jumping Into Tumblr Theme Development

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…

Page 25: Geekend 2012 - Jumping Into Tumblr Theme Development

Services and APIs

Page 26: Geekend 2012 - Jumping Into Tumblr Theme Development

Services and APIs

Page 27: Geekend 2012 - Jumping Into Tumblr Theme Development

Mobile

Page 28: Geekend 2012 - Jumping Into Tumblr Theme Development

Responsive Themes

http://ballardtheme.tumblr.com/

Page 29: Geekend 2012 - Jumping Into Tumblr Theme Development

Responsive Themes

http://ballardtheme.tumblr.com/

Page 30: Geekend 2012 - Jumping Into Tumblr Theme Development

Workflow and Tools• Theme Editor– HTML editor– Appearance Options

• Static Assets CDN– Images, stylesheets, scripts

• Documentation

Page 31: Geekend 2012 - Jumping Into Tumblr Theme Development

Workflow and Tools

Page 32: Geekend 2012 - Jumping Into Tumblr Theme Development

Workflow and Tools

Page 33: Geekend 2012 - Jumping Into Tumblr Theme Development

Workflow and Tools

Theme Editor is required, but not enough.

Page 34: Geekend 2012 - Jumping Into Tumblr Theme Development

Workflow and Tools• Text Editor• SASS / Compass• AMD (requirejs)• Build (rjs)• Testing (xip.io)

Page 35: Geekend 2012 - Jumping Into Tumblr Theme Development

Tools - What’s Missing

Local Template Parser

Theme / Operator Linting Tool

Editor Support

Page 36: Geekend 2012 - Jumping Into Tumblr Theme Development

Theme Submissions

Page 37: Geekend 2012 - Jumping Into Tumblr Theme Development

Theme Submissions

http://www.tumblr.com/themes/by/businessbullpen

Page 38: Geekend 2012 - Jumping Into Tumblr Theme Development

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/

Page 40: Geekend 2012 - Jumping Into Tumblr Theme Development

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-em

brace-ads-without-selling-out.html

Page 41: Geekend 2012 - Jumping Into Tumblr Theme Development

Contact Info• businessbullpen.com• @BusinessBullpen– Todd Wickersty• tumblr: todd.wick.me• twitter: @toddwickersty• email: [email protected]

– Graham Blevins• tumblr: grahamblevins.com• twitter: @grahamblevins• email: [email protected]