Copy, Paste and Tweak Your Way to Mobile

First off, create an empty your mobile stylesheet and link it up:

<link href="/css/mobile.css" media="handheld" rel="stylesheet" type="text/css" />

Grab your print styles and paste them into your mobile stylesheet. You’ll need to take a few of the items you hid (such as navigation), bring them back and give them some style. As with print, focus on what’s important to this user experience and hide what’s not.

Branding is Still Important

We’re going to use the same in-line images we included in our print stylesheet to brand our mobile site. How you have them set up in your print style may be all you need. If not, feel free to use "width" on them to make them fit. I typically recommend against using css to change the height/width of images, but I make an exception in this case.

Images

Since most of your content images are going to be wider than the screens of most phones, you should add max-width:100% to images in your content.

Text

One of the first things a basic mobile user should see on your page (either immediately preceding or following the header) is skip links. This is a list of anchor tags to key elements on your page. At a minimum, it should include links to navigation and content. As an added bonus, these links are helpful to screen readers as well. Be sure to hide this list in your print and screen stylesheets.

When it comes to body copy on the web, there has been a long-standing serif vs sans-serif debate. As a personal preference, I usually go with sans-serif for screen body copy (serif for titles), and serif for print. If you look at my print stylesheet, you’ll see the following font stack:

Georgia, Times, "Times New Roman", serif

For screen and basic mobile, I’m using:

"Lucida Grande", Lucida, Helvetica, Arial, sans-serif

And Off We Go

If recent trends tell us anything, it’s that an increasing percentage of web users are going to be accessing our sites on small screens. As developers, it’s our responsibility to to give at least a passing nod to these users and give them a pleasant experience. Offering basic mobile styles is the first step.

A Basic Print Style

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

There are several things to keep in mind when creating a print stylesheet:

Background images and colors will not be seen *

Yes, you’ve spent a lot of time making your site beautiful. When someone prints your page for future reading/reference, they don’t need the glamour-shot version. They need something simple that’s not going to cost them a hundred dollars worth of ink to print.

Hide the junk

If you’re a typical site, you’ll have a bunch of navigation, maybe some ads, thumbnails from Flickr, etc. That’s the junk. Users that are printing a page don’t care about it at that moment in time. Right now, content really is king. This is a great time to use “display:none” on anything and everything that’s not related to the content at hand.

Keep it simple, readability is the key

So by now you’ve accepted that your print stylesheet does not have to look the same as the site itself. However, you do need to take some steps to keep some branding. This is going to require some inline images if you want your logo and such to show up. If this print-friendly image is different from what you want to show in your screen style, you can include it in the same element and simply hide it. Then you’ll have it available for the print style.

Next up are links. Links in your content are part of the story. Be sure to include a little css to show the user where the links would go should they actually be able to click them:

#content a:link:after {content:" [" attr(href) "] "; font-size:90%;}

Setting up a print stylesheet is not a difficult undertaking and should be part of every design. It’s a great way to help your users. If you’re curious, you can view the print stylesheet for this site to see how little css it takes to achieve a basic print style.

Other Resources

• Printing Web documents and CSS
• CSS-Tricks Finally Gets A Print Stylesheet | CSS-Tricks
• printFancy

If you’re a higher-ed developer, you can find some higher-ed specifics:

• Don’t lose your identity – Create an effective print style sheet
• Print Stylesheets – University Web Developers

* By default, browsers don’t print background colors or images. Here’s a section of the print dialog in Firefox. Note that these check boxes are off by default.

1. A separate “m.” address is not an option
2. Creating and testing mobile styles is rarely part of the project budget

This has led to some commonly used shortcuts that have allowed us to, at the very least, provide a serviceable mobile experience with very little effort.

The basic mobile stylesheet

At the very least, you should set up a ‘handheld’ stylesheet.

<link href="/stylesheets/mobile.css" media="handheld" rel="stylesheet" type="text/css" />

A number of things to keep in mind.

• Keep your images under control by using width/max-width.
• Use display:none liberally for content that is of little or no use to your mobile visitors.
• Your mobile site doesn’t need all the pretty of the non-mobile version. If you include a lot of images, you’re going to end up with frustrated users.

Now, how do you test this? If you have a WAP enabled phone, you’re all set. I don’t. I have, however, found that Opera’s small screen view will give you a fairly accurate reading on your sites mobile friendliness. All you need to do is select “View > Small Screen”. MobiForge also has a guide to mobile emulators that you may find handy.

Targeting the iPhone/iPod Touch (or Webkit)

Here’s where the fun starts.

<link rel="apple-touch-icon" href="/images/iphone.png" />
<meta name="viewport" content="width=device-width" />
<link href="/stylesheets/iphone.css" media="only screen and (max-device-width: 480px)" rel="stylesheet" type="text/css" />

At this point, you can go one of two routes:

1. Over-ride your existing screen stylesheet to make everything look nice on the iPhone, or
2. Use javascript to eliminate your screen stylesheets and start fresh.

I highly advise you go with the latter. Here’s why.

For any sizable site that has a lot of complex css, you’ll find you’re spending way too much time tracking down which element in your screen stylesheet is blowing-out the width of your iPhone display. It’s much easier to start from scratch, and simply borrow from main css. Remember, we’re going for speed here. This isn’t in the budget.

Here’s how:

if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
  for (var i=0; i<document.styleSheets.length; i++) {
    if (document.styleSheets[i].href != null && document.styleSheets[i].href.lastIndexOf("iphone") == -1) {
      document.styleSheets[i].disabled = true;
    }
  }
  window.scrollTo(0,1);
}

This simply loops through your stylesheets and disables all but your iphone.css. If you want to target additional webkit browsers, then you need to add them to the if statement:

if(
  (navigator.userAgent.match(/iPhone/i)) ||
  (navigator.userAgent.match(/iPod/i)) ||
  (navigator.userAgent.match(/Android/i)) ||
  (navigator.userAgent.match(/webOS/i))
) {

One of recent side project sites, on which I was able to spend time with the iPhone css was Game Day. Currently the iPhone/iPod account for 4% of the sites total traffic. The next mobile platform is Blackberry coming in at 0.26%. So yes, spend some time on your iphone.css. If you don’t have an iPhone or iPod to test on, download the latest iPhone SDK from Apple (membership to the developer connection is free). It includes an iPhone emulator that will work just as well for testing.

One of the great things about playing with custom styles for the iPhone is you get to play with all those fancy new Webkit and CSS3 features you can’t use in your day-to-day sites. So go ahead, you now have permission to experiment with gradients, drop shadows, RGBA, etc. Now if only we could serve up these sites as html5.