Your site may look great on screen, but have you thought about what it looks like when it's printed or what it looks like when a mobile device accesses it? Take a moment and print a page from your site - you might be surprised with what comes out of the printer.

If you have white or off-white text on a dark background chances are nothing will come out at all since many browsers don't print the background color - so you wind up printing white on white. If your design depends on things like background colors, chances are it won't look the way you want it to when it's printed. Going to a grayscale color palette may cause problems as well. Add to that that Flash areas probably won't print. And the biggest problem may be the width of your web page - not all web browsers shrink the page to fit on the piece of paper and if your page is wider than 675px you may have a serious problem.

When it comes to mobile devices there are a number of issues...

While the iPhone and some other devices can deal with full size web pages, many can't, an even for devices that can it requires a lot of zooming in and zooming out and can be a bad user experience for the customer.

Then there's the issue of the "weight" of a page. With broadband connections being pretty standard for computers these days web designers don't think about the weight of their pages, but for mobile devices it's critical - most are on super slow network connections and even ones with 3G capabilities may not be in a location that has 3G speeds.

And lastly, people on mobile devices are generally looking for different things than people who are on a computer. They're far more likely to be looking for an address or phone number than a person using a computer.

The reason why printing and mobile devices are connected is because the same two strategies are used to address both problems - 1) alternate stylesheets, and 2) alternate pages - which you use really depends on your situation and how good of a solution you want to implement for printing and mobile devices. If you can't imagine anyone ever printing a page from your web site, then you don't need to spend much time implementing a solution.

Alternate Stylesheets

When you specify a stylesheet in HTML you typically have a link tag that looks like this:

<link rel="stylesheet" href="/resources/main.css" type="text/css">

If you've done some reading you may know that there's a "media" attribute that can be added to the link tag which would change it to look something like this:

<link rel="stylesheet" href="/resources/main.css" type="text/css" media="all">
<link rel="stylesheet" href="/resources/screen.css" type="text/css" media="screen">
<link rel="stylesheet" href="/resources/print.css" type="text/css" media="print">
<link rel="stylesheet" href="/resources/mobile.css" type="text/css" media="handheld">

The media attribute is the key to what we're talking about here. In the example above styles that will be used in all circumstances are defined in main.css. Styles that will only be used on computers are defined in screen.css. Styles that are only used for printing in print.css. And lastly styles that are only used by mobile devices in mobile.css. So when displayed on a computer main.css and screen.css will be loaded and print.css and mobile.css will be ignored, and so on...

Now think about the things you might want to change depending on how it's being used... Since you can't click on a nav bar on a printed page, you may want to hide them completely with display:none when printing. Or you may want to change the width of the page from an absolute value to 100% for printing and mobile devices. Or you may eliminate things like background images for printing and mobile devices. There's a lot you can customize.

Alternate Content

While having an alternate stylesheet is a quick and easy way to customize the look and feel for printing or mobile devices and it's usually better than doing nothing at all, it's often inadequate. The issue is the HTML document you're working with. You may not be able to do everything you want to do with CSS, or the page may just be too heavy to do well on a mobile device.

Remember, the general rule is to shoot for a total page weight (including CSS and graphics) of less than 20Kb when making a page for mobile devices. Pages over that weight will be penalized by the mobile search engines.

In fact there are many factors you should take into consideration when designing a page for a mobile device. The nav bar is just one example - it should be kept simple and put at both the top and bottom of the page, and possibly interspersed in the middle of the page if the page is long. There's a lot to properly designing a page for a mobile device (including special doc types). I highly recommend you read up on the subject before you go and spend time doing it the wrong way.

To implement an alternate page for printing or for a mobile device once again you use a link tag, but this time it's not rel="stylesheet" it's rel="alternate" and will look something like this...

<link rel="alternate" media="print" type="text/html" href="/image/detail-print.htm?variantid=2983" />

To see that in action. The original page was a page on Netter Images showing an illustration of malignant tumors. The alternate page used for printing scales the image down, uses desaturated header graphics, and presents the data on the page in a less interactive manner that looks like a printed document.

One thing you should be concerned with is the issue of duplicate content. For alternate versions used for printing, you'll want to either specify nofollow in a robots meta tag, or block access to the file completely with robots.txt. With mobile versions it's more complicated because you want spiders to crawl, but want the search engine to understand which page is targeted to which audience. You can try to use robots.txt to only allow mobile spiders to see the mobile pages, but that may be more trouble than it's worth.

Other Uses

Alternate stylesheets and alternate pages are important to the visually handicapped. The same strategies we used here are used to create pages that are friendly to them - just use media="aural". CSS supports "voices" - so you can specify the type of voice you think is approrpriate for you content, etc.

Tags: CityTech ADV 4850
Categories: CSS, Mobile Browsers