[digdog dig];

I'm Ching-Lan HUANG (黃 青嵐), and this is my tumblr.

• A Tumblr Template Experience

  For the past few weeks, I spent most of time designing and creating a Tumblr template for my friends’ website, called “CLEAN education.” It’s a NPO in Irvine that teaches kids and youths about the science behind climate change. Please follow them!

  

  A Blog Not Like a Blog

  During the design stage, we decided to use Tumblr as new official website, but we don’t want it to look like a blog, or a microblog. We want it to look like a NPO website, which means we might need to a front page, a welcome page.

  So I came up with few idea:

  1. Don’t make it look like an ordinary Tumblr website with ceaseless different posts listed in same page.
  2. Create a welcome page, contains feature links, recent updates and some pictures for people to know what we’re doing. Pretty much like what Apple did on the front page.
  3. For posts, one post at a time, even in Index page. This will make each post look like a feature page.
  4. A previous/next button to easily switch between posts.

  Below is one of the few sketches I made:

  

  Turn Pinocchio Into a Real Boy

  With the basic idea came out, I tried to make a mockup HTML5 page, added every detail we want, like Facebook/Twitter bubbles, Facebook comments, keyboard hotkeys for previous/next buttons, etc.

  After few meetings, final version decided, I converted the mockup page to Tumblr template manually, along with other resources like CSS and JavaScript files.

  I have to admit, this is the most painful part.

  1. You can’t predict the template result unless you upload to Tumblr, and Tumblr goes nuts.
  2. You need to reload Tumblr to see the updated result, and Tumblr goes nuts again.
  3. Tumblr template contains Index, Permalink, Search, Tag and Date page blocks, and you have to put them into single template, which originally comes from your mockup. In the end, you will find out it’s really hard to identify your mockup logic from template.
  4. Due the design of Tumblr template, it’s hard to make a welcome page. Some blocks only available in Permalink page block, not in the Index page block. So you have to use JavaScript to generate content dynamically.

  There are many other annoying problems when using Tumblr template, but I think I will leave them alone. Don’t want to be an asshole here.

  For general cases, I recommend “Thimble,” it’s a tumblr theme development tool that saves your life. Very cool.

  I Love This Theme, Will You Release It?

  I know, I love this theme too.

  However, it’s far from complete, and most specifically designed for CLEAN education, lots of hardcode stuffs and workarounds, so I can’t release it to public.

  • #Tumblr
  • #clean education
  • #npo
  • #template
  • #tumblr api
  • #thimble
  1 year ago