In the last article, we made our print stylesheet. Now we’re going to take that stylesheet and turn it into a basic mobile stylesheet. Now when I say basic, I’m talking VERY basic. This is not what you’re displaying to your iPhone and Android users.

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.

In my last article, I made mention that you should at least include a basic mobile stylesheet for your site. The easiest way to accomplish this is to piggy-back your print style. What? You say you don’t have a print stylesheet? Bad developer. In this article, we’re going to run through the very basics of a print style, and move on to basic mobile in the next.

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.