Karl Shouler

Resist the Future

On Tuesday, I spent a good bit of time tweaking the layout here.. I was looking for something a little different, but still minimal (I think I’ll keep the gifs and flash on the shelf for now/ever). Anyway, once I was close to my vision for the design, which is just a modified version of the classic octopress theme, I fired it up on my iPhone’s retina display and was reminded that octopress is built to render differently on mobile devices. Mostly, it makes the content of your site easier to read, which is a good thing. However, it also adheres to some other world of rules when it comes to rendering the layout. Debugging was difficult, since I’m not familiar with any tools to inspect css from inside mobile safari, so I became frustrated. At this point, I turned to firing off a tweet to the author of octopress, figuring I’d save myself some time poking around:

So that didn’t go very well, and the conversation continued for a short while. My request was simple and absolutely legitimate. And later on, Mr. Octopress used my question as inspiration for some fodder:

A desire to see my site render without mobile optimization doesn’t necessarily mean I’m resistant to the future. The fact is, I have this highly dense mobile display that renders even smaller font sizes beautifully. Unfortunately, I’m not familiar with mobile design/layouts, so I was stuck in the mud for the time being.

Since I wasn’t going to get any help from the author, I decided to find a way to unplug the mobile optimization myself. So I futzed around for about an hour, and it turns out, this is pretty simple. I found these three lines were being inserted in <head>:

<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1">

These three tags, the most important of which is viewport, are all a part of my site telling the browser it’s optimized for mobile. There’s a comprehensive description of what viewport does over at the mozilla developer network, but in short, it’s overriding control of things like screen width and zoom, resulting in smaller content appearing larger. Commenting out these lines in <head> resulted in my octopress site rendering as it would in any desktop browser. I added a yaml config item, resist_the_future: true to my _config.yml, and wrapped those three lines in a conditional.

Finally, this whole thing wouldn’t be complete without submitting a pull request to the octopress repo and a follow-up response: