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:

<link rel="stylesheet" type="text/css" media="screen" href="style.css" />

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.

<link rel="stylesheet" href=”style-smaller-screen.css" media="only screen and (max-width: 1023px)" />

Note that this additional stylesheet doesn’t erase our base style sheet, it adds to it and modifies it.

Finally we’ll create a third stylesheet for everything smaller than the iPad, which would include (duh) all mobile phones:

<link rel="stylesheet" type="text/css" href="style-mobile.css" media="only screen and (max-width: 767px)" />

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.

Forget :hover

Mobile devices don’t have a :hover state because the input device is the finger not a mouse! If you’re using :hover for things like menus or other content, make sure everything will still work without :hover. And consider never using :hover for important functionality again. Tsk tsk.

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!