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:

<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!

31 Comments

  1. [...] This post was mentioned on Twitter by Webdesigner Depot, udhien.net, Anriëtte Combrink, David Cole, Steve Lemus and others. Steve Lemus said: Easy enough. RT @DesignerDepot Make Your Website Mobile Friendly in One Night: http://ow.ly/38rH7 [...]

  2. Nik
    November 12, 2010

    Thank you for the nice information. I think I am gonna apply your advices to my sites too.
    Are these techniques working on every mobile browser, like opera mini, safari etc ?

    • dc
      November 12, 2010

      Yep, media queries are platform-independent, and work in most modern browsers (including IE9 I believe?).

  3. Chris
    November 12, 2010

    Great post. The only thing I would add to whole mobile site thing is to add some padding around the body so content doesn’t go to the edge.

    • dc
      November 12, 2010

      Good input, thanks!

  4. Greg Babula
    November 12, 2010

    Great post – I had most of this in place but its nice to see someone else’s perspective

  5. [...] Make Your Website Mobile Friendly in One Night – David Cole [...]

  6. Heath Waller
    November 13, 2010

    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!

  7. paul
    November 13, 2010

    Hi, I created a layout for mobile with media queries for my site.
    if you find any errors, please let me know
    thanks!

    • dc
      November 13, 2010

      looks fantastic, well done!

      • Name *
        November 17, 2010

        cheers! :)

  8. Jason Rhodes
    November 13, 2010

    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.

    Great to be thinking about mobile, though!

    • dc
      November 13, 2010

      Thanks for the feedback, Jason! Can you help fill us in on which mobile browsers you’re aware of that don’t support media queries? Here’s a link I came across to a nice comptability chart over at Quirksmode. I like your idea of reversing the logic and setting the mobile stylesheet first, then adapting for larger screens. Have you tried this with any success?

      And to your final point, you’re absolutely right: optimizing layout is only one half of a true solution. To truly optimize a site for mobile, the content must be tailored as well!

  9. [...] Make Your Website Mobile Friendly in One Night – David Cole – trick is using css3 stylesheets media queries [...]

  10. bonn
    November 13, 2010

    Great tips for those looking to do it yourself. You can just use these guys mobile page builder… It’s amazingly simple to use and webbased.

    forget 1 night. Try 10 minutes: call these guys http://gomobileinnovations.com

    Adios!

  11. Carl
    November 15, 2010

    For those of us that run WordPress websites – there is a simple plugin out there – http://wordpress.org/extend/plugins/wordpress-mobile-pack/ although I am not sure how great it is.

  12. [...] [Mobile Site] [...]

  13. StudioDino
    November 15, 2010

    Thanks for the reminder, and providing some great information.

  14. ironius
    November 15, 2010

    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.

    • dc
      November 15, 2010

      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.

      • Robert
        November 20, 2010

        I have noticed that Opera Mini on the iPhone doesn’t always play ball and can throw up some unexpected layout issues not sure how it behaves on other devices mind.

  15. Steven Black
    November 15, 2010

    Missing one crucial point: engineer to allow the user to zoom-in to, say, increase text size, without truncating text.

    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.

  16. Rachit Dayal
    November 15, 2010

    Awesome article … But I’m reading this from my Windows Phone 7 device and the page renders pretty buggily :)

    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.

    • dc
      November 15, 2010

      Thanks for the feedback, Rachit. I’d love to see the site on your Windows 7 phone, any chance you can link a screenshot?

  17. Maicon
    November 15, 2010

    Concise and very useful tutorial. I was wondering how to begin make my websites to work well in mobile devices. With your text I have a reference.

  18. SamW
    November 16, 2010

    Hi David, very useful article. I’m struggling working out how to add a link to a desktop version that bypasses by .htaccess file (that redirects an iPhone to /mobile/ for example)…

    I basically need a link back to my site that ignores the .htaccess I guess…

    Any ideas? Much appreciated.

    Sam

    • dc
      November 16, 2010

      Hey Sam. While I understand some basics of .htaccess and what it does, I’m afraid that kind of back-end server stuff is outside my expertise! Sorry I can’t be of more help.

  19. [...] Adapter son site aux mobiles en une nuit : via @smashingmag [...]

  20. [...] 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 [...]

  21. Robert
    November 20, 2010

    A brilliant post Dave and something I will be working on over the next few weeks. Also thanks to Steve about the 100% container width again I will be testing this over the next few weeks

  22. [...] 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 [...]