Make Your Website Mobile Friendly in One Night

The Need for Mobile Sites

If you’re paying attention to the news, you’ve heard that mobile phone sales are exploding. According to this PC World article, sales last quarter doubled over the year before! And it’s not only the ultra tech-savvy buying these phones either: most of my 35-50 year old co-workers have Droids, iPhones, Blackberries—and they can barely use their work computers! (I love you guys, but let’s just be honest here, shall we?)

Increasingly, companies with non-mobile friendly websites are going to frustrate their clients & customers who are trying to visit their website on a mobile device. Ever try visiting Zappos.com on a mobile? Zappos, I love you guys too, but your website is an absolute nightmare on mobile!

The Need for a Single Site with Multiple Layouts

However, many companies don’t have the resources to create a second version of their site that’s fully customized with separate content, layout, & functionality. Nevermind development costs, it’d be too expensive from a sustainability perspective.

Fortunately, with CSS3 media queries, we can create a single website that fluidly changes layout depending on the screen resolution of the device used! See this in action: resize your browser window and watch the layout change as the screen width decreases. Fun!

Case Study: davidrcole.com

Before

As you can see, before making any adjustments to my own website, it was virtually unusable on a mobile device such as the iPhone (screenshot above). But using media queries, I was able in a single night to create a mobile-friendly version of my own website (this one here!) that works on any mobile device on any platform at any screen resolution! Here’s what the finished mobile version looks like:

Mobile-friendly homepage

Homepage, farther down

A very legible article

The Solution: Multiple Stylesheets with CSS3 Media Queries

Media queries work by passing specific code only when certain device attributes are met. I won’t go into every kind of media query, but if you’re interested in what’s available, check out the full W3C spec here. For creating our mobile site, we’re going to be primarily harnessing the power of the max-width property. Basically we’re going to tell our website to use different stylesheets depending on the width of the device’s screen. What’s great about this is that the mobile platform (iOS, Android, Windows Mobile) doesn’t matter, since the adjustments are made with screen size only! *phew!* How nice not to have to worry about that, hey?

Here’s our existing stylesheet, that will serve as the base for all versions of the site:

Next we tell the site that if the screen is a bit smaller, like the size of an iPad in portrait mode (768px), serve up an additional stylesheet. This stylesheet wil make modifications to the first stylesheet.

Here’s one other important piece to make this work. Some devices, like the iPhone, use zooming to display sites that aren’t optimized for mobile. This is a great feature unless you’re trying to create a mobile-friendly version! So we’re going to tell the iPhone to trust us and always display our site at 100% zoom level:

<meta content="width=device-width" />

This will ensure the iPhone plays nicely with your mobile site version!

That’s it for the HTML! Simple, right? Now the fun part, making adjustments for the various screen sizes.

Prepping Your Main Stylesheet

First things first, if you haven’t already, set all the font-sizes & line-heights in your main style.css in em’s. Why? We’re going to increase the font sizes to make the mobile devices more legible, and you don’t want to have to make a thousand adjustments in all three stylesheets. So in the main style.css, set body { font-size: x } to your base font-size (use percents not pixels, IMO). Then specify the font-size of every other element in em (calculate this as font-size of element / base font-size. Confused? read more here)

Optimizing for iPad

The desktop version of my site has a .wrapper div with a fixed width of 980px, and it actually looks pretty good on the iPad out of the box. So I made just a small adjustment to the overall font sizes so the text wasn’t quite so grande.

body { font-size: 75%; line-height: 1.5em }

Optimizing for Mobile Phones

Now for the mobile phones. The key to making this work is fluid sizing. If your website is built around lots of pixel-perfect images and backgrounds, this may not work too well for you. But if your site is like mine, with lots of CSS styling and not dependent on images for formatting, this should work like a gem.

The first thing I changed was my .wrapper div, something like what most of you probably use to center the content on the page. The original style.css specifies it as

.wrapper { width: 980px }

In my style-mobile.css I designate it

.wrapper { width: 100% }

By setting it to a percent instead of pixels, it now doesn’t matter the exact resolution of the device’s screen: the site will always fill the screen. Notice that because the mobile stylesheet is designated in our HTML after the main stylesheet, the new 100% declaration overrides the first. See below for a note on CSS Specificity.

Second, I made the body font size bigger, since mobile screens are small, and I really want people to be able to read my posts! I chose

body { font-size: 125% }

Now pull out your mobile device (or open your browser and make the window really narrow) and take a look. Ugh! What a mess, right? Now we clean it up.

Cleaning Up the Mess

What comes next is a series of small changes, adjusting widths from fixed px to %, and adjusting floats, if your site uses them. The goal is to get your various div, ul, p, tables, etc to fit well next to one another in their newer, more cramped space (“phenomenal cosmic powers! itty-bitty living space!”—Aladdin reference anyone?). A couple points to help:

Adjust floats and clears

Sometimes divs or other elements that are sitting side by side in your desktop version will need to slip underneath each other in your mobile version. Use judicious floats and clears to position elments around each other.

Dealing with images

For images, the max-width and max-height properties are your friend. These CSS properties are touchy on desktops, but they’re widely supported on modern smartphones & devices, so go for it! In my individual posts, I set

#single img { max-width: 100% }

This way the images always scale down to fit in their designated area.

Shrink your Margins & Padding

If you’re like me, you love lots of negative space to give the on-screen elements room to breathe. On mobile, however, we’ve got precious screen space, so shrink those margins & pads! Try using percentages for these as well, so the negative space scales with the screen sizes.

Understand CSS Specificity

Understanding the cascading nature of cascading stylesheets is crucial when working with multiple stylesheets. Do you understand the difference between .container a#menu-link and .container .menu a and which will overwrite the other? If not, read this quick page on CSS Specificity. Make use of the !important declaration only when absolutely necessary.

Test it out!

There are online mobile simulators like the iPhone 4 Simulator that can help in development, but there’s nothing like the real thing. There were several errors on my site that I caught on my iPod Touch that the simulators didn’t show. If you don’t have a mobile device, borrow one!

Conclusion

I hope this is helpful. As I’ve said, using this simple but powerful technique I was able to make my own website mobile friendly in a single night! If you give it a whirl, let me know how it goes! See if you can spin yours even faster than I did. Send me a link when you’re done!

Thanks for this tutorial. You make it sound so easy – whereas I’ve been avoiding it out of fear. And the fact I don’t have a fancy phone, or really understand them (embarrassing)… But now I really have no excuse not to do this for all my sites!

My understanding is that many mobile browsers don’t recognize media queries at all, which makes relying on them for mobile layout problematic.

One solution is to build the default stylesheet for mobile (ie small screen resolution) and then use @media queries to tailor the larger resolutions, which are typically found on modern browsers that understand media queries (there’s even a JS script that fakes @media query support for IE).

Lastly, @media queries only solve half of the mobile problem. They get can really optimize layout, but they don’t do anything about optimizing *content*. For that, you have to really think about how to serve smaller images, use geolocation, and provide mobile-specific content.

Ironic that I found this article using a blackberry curve 8330 and the site looks a total mess on it. Why force content to a mobile user as though he’s on a desktop? Perhaps in a decade when phone developers can catch up to the already lagging developers of todays full browers you can worry about forcing your content out of laziness and have it rendered properly. Meanwhile its just another website I will skip for not being usable.

Sounds like you had a bad experience! I’m curious, are you using the Blackberry’s built-in browser, or another like Opera mini? The 8330 is a couple years old, and apparently even at the time of its release its browser got some pretty sub-par reviews.

But you raise an important point for us to remember: this approach using CSS3 Media Queries only works on modern phones with modern mobile browsers. It will not work on older phones with partial HTML/CSS support. If you get a significant amount of your site traffic from these types of devices, you’ll want to look into an additional method for serving them your content. When we design for the desktop, we have to decide how far back we’ll support old browser versions (IE 5? not me!); the same is true when designing for mobile devices.

THEREFORE, under no circumstances should one layout text containers to 100% of device width. Generous use of outside columns for menus and sidebars allows users to focus-in on either text, menu, or sidebar.

This has the additional benefit of also making tap-targets bigger when zoomed-in.

Relatively few if any designers talk about this aspect of usability. Anything close to 100% width, say more than 75% of device width, is just dumb.

The older you get, and the dodgier your eyesight, or the smaller the device, the more sense zooming-in makes.

There’s no mobile version detected, and for some strange reason I can’t zoom out to see the complete width of the page (no pinch & zoom, no double tap) … The page width seems to be stuck at half the supposed width so I have to constantly pan from side to side to read the complete article.

And I’ve seen this bug plenty of times on the iPhone browser as well … Wonder if there’s some programming technique that’s actually backfiring.

[...] important part about this is that sales of smart phones are going through the roof. David Cole explains that this trend combined with the fact that many organizations and companies have no mobile [...]

[...] smartphone market is blowing up, and your business should stay ahead of this trend. Here’s something you can take a look at if you want to create a mobile friendly version of your company’s [...]