stylesheet

Making your current Drupal theme responsive, simply

For a few of my smaller sites (like my portfolio website, www.jeffgeerling.com), I've had a little todo item on my list for the past year or so to make the them 'more responsive'—mostly meaning "make it legible on an iPhone or comparable Android phone". Most tablets I've used render traditional 960px layouts appreciably well, including the iPad, Kindle Fire, Samsung Galaxy Tab, etc., so I want to just focus on making the websites usable on smartphones.

What we had, and what we're going for (which one seems more readable and user-friendly on a small screen?):

Life is a Prayer.com - Responsive Design (Before)    Life is a Prayer.com - Responsive Design (After)

I'll show you how I quickly (in less than half an hour) added a <meta /> tag to the site's </code> tag to instruct mobile phones on the width of my site, and how I added a simple <code>@media query to my theme's stylesheet to apply a few layout rules to make the design of the site better for mobile phones.

Adapting Your Website for the iPhone

iPhone Safari Icon

In the past year, I have seen more and more mobile visitors to some of the websites I maintain, and the lion's share of those mobile visitors are using Safari on the iPhone or iPod Touch. A few of the sites receive more than 5% of their visits from such devices. For those sites, I thought it would be fitting to give them a little better mobile treatment, optimizing the layout for the iPhone.