If you’re using a single-column fluid layout theme in Tumblr then adding responsive design is dead-easy. If you’re using a more complex theme, that is not fluid width and single-column, then you’ll have to put a lot more work in, but it is still well worth the effort.
By default Tumblr overrides your theme with a mobile-friendly theme when your blog is accessed by a phone. Here’s what my site looks like when Tumblr does this:
The override theme is incredibly basic and provides no extra functionality. You loose your custom design that sets you apart, you loose Disqus comments, etc.
The first step then is to disable Tumblr’s override mobile theme. To do this, go in to the “Customize appearance” tool for your theme. Once open, scroll down in the left-hand pane and open the “Advanced” section. Under here there is a checkbox titled “Use optimized mobile layout”. Uncheck this and click save at the top. Now your theme will always be used. Load up your site on your phone and have a look. Here’s mine at this step:
At this point this appears to be a step backwards - you’ve now made your site less usable. In order for people to use your site now they have to zoom in and scroll left to right for each line they want to read. If we left our site in this state it would be a miserable fail. You can fix this by adding this line just before the <head> tag in your theme’s HTML:
<meta name="viewport"
content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
This “viewport” meta tag is telling the browser to not zoom out. By default mobile browsers zoom out enough so that the site can have a display width comparable to a desktop. For fixed-width sites there is no better solution, but for fluid width sites (or sites that only have a max-width, but not a min-width) disabling this auto-zoom provides a much better experience.
So, with this meta tag added, the site now looks like this:
Now the site looks very close to Tumblr’s mobile override theme, but with all your customizations and custom design enabled. Not bad! There are still some issues, such as the body padding being too thick at this resolution. But, overral this is a great step forward.
Now we can make a few more adjustments by using CSS3 media queries. Media queries allow us to craft CSS that is applied only in certain situations. In this case we want the padding around the body to be reduced if the width of the site is below a certain level. Adding this line to the CSS does just that:
@media screen and (max-width: 480px) {
body { padding: 5px; }
}
Now, when accessed with a browser that reports a width of 480px or less (which in my testing is iPhone in both portrait and landscape mode) then the site looks like this:
Much better! Now when the site is accessed by a phone, the padding is reduced from 30px to 5px and we take better advantage of our screen real-estate.
Now you should have the tools to take your own Tumblr blog to the next level and make it friendlier for your visitors.
I’ve just moved my blog to Tumblr. One thing that most my posts have are code examples. Here’s how I added this to my Tumblr blog. Go in to the customization section of your blog where you can configure the theme. Once there, click the “Edit HTML” button and add this somewhere before the ending </head> tag:
<link rel="stylesheet" href="http://yandex.st/highlightjs/6.1/styles/solarized_light.min.css">
<script src="http://yandex.st/highlightjs/6.1/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
Adjust “solarized_light.min.css” to point to whatever highlight.js theme you’d like to use. The themes can be viewed on the highlight.js test page.
The only problem I’ve run in to is with tumblr’s infinite scrolling feature. Since highlight.js is applying syntax highlighting when the page first loads then any code blocks that are loaded as you scroll will not get highlighted. I’m sure there is a way around this, but for now I just disabled this feature in my blog’s preferences.
