Adding Simple CSS Rules For Printing And Mobile Browsing

We all know about cross browser compatibility. If you’ve ever tried your hand at blog design you know the headaches that Internet Explorer can cause. Everyone knows that getting your design right in each and every modern browser is crucial to the effectiveness of your design. However, most of us completely ignore two less-crucial-yet-still-significant aspects of design compatibility: print styles and handheld (mostly referring to mobile phones) styles.

The Importance of Print Styles

The importance of print styles will vary quite a bit. If you’re running a kitchen recipe blog, its absolutely crucial because every stay at home mom wants to print off those recipes. If you’re running a tech blog its not so crucial, but it doesn’t take long, and its certainly helpful because someone will want to print your website at some point in time.

print

The Importance of Handheld Styles

The importance of handheld styles will also vary quite a bit. As a general rule mobile web usage is increasing and the use of printers is decreasing. According to TechCrunch, mobile web usage more than doubled in 2009. It still only accounts for a little more than 1% of total web consumption, but its increasing quickly and should continue to skyrocket as the cost of mobile web service continues to drop, and wi-fi hot spots become more prevalent.

Again, it will depend quite a bit on your niche, but I promise you that if your site is getting any amount of reasonable traffic, someone is viewing it via handheld device.

Getting started

First of all, let me preface this by saying that this is by no means all encompassing. Different browsers will read print css differently, and there are about 5 million (slight exaggeration) different mobile browsers. Most of them process handheld CSS in their own way. For that matter, some of them don’t process handheld css at all and just work more or less like a normal browser (iPhone anyone?). Given those assumptions, I’m going to present you with a starting point that will allow your site to print well on most browser/printer combinations, and display well in most mobile browsers. If you want an all-encompassing approach, here are a couple great resources.

The most important thing to keep in mind with printing is that no one can click any of the hyperlinks when they’re on a sheet of computer paper. What does that mean? 99% of the time its a good idea to hide your sidebar and your navigation menu when printing. You’ll also want to hide any social media, sharing, and rss subscription links that occur outside of the sidebar – especially if they are images!

Also, its important to keep in mind that ink ain’t cheap! Anything you can do to reduce the use of ink – especially colored ink – is just common courtesy to your visitors. Things like using a white background and black text will really help here. Also if you have a large logo you might want to hide it and insert a smaller logo just for printing purposes.

Specifying Print Styles

So, how do you hide the sidebars and nav menu, and how do you make all of those other changes? Its actually very simple!

CSS has something media that we’ll use to specify styles only for printing. It looks like this:

@media print {
    .sidebar, .menu { display: none; }
    body { background: #fff; }
}

Obviously, those are just a couple of examples and you’ll need to use the proper selectors for your theme, but the basic idea is to wrap all of the print styles in the @media print {} brackets. Again, it won’t cover every single printer/browser setup, but it should be reasonably close.

Handheld Tips

If you’re using a solid code base with semantic markup you’re way ahead of the game here. Of course, that’s true with a lot of things, but errors/sloppy code will really show up when it comes to mobile browsing. With that in mind, I’d recommend a building your site on a solid framework like Thesis or Genesis.

The main thing to keep in mind is that the overwhelming majority of handheld screens are 480 pixels wide or less. This means a few things:

  • Its a good idea to reduce margins, padding, and other blank spaces to accommodate the smaller screen sizes.
  • Use one column in order to reduce horizontal scrolling. Get rid of the float on that sidebar, and place it below the main content column.
  • You need to use a color scheme that is sharply contrasting. Using 17 shades of grey on your site? It might look sweet on your laptop, but many of the popular mobile browsers have a limited color palette, so you might want to change some colors using handheld css.

Specifying Handheld Styles

There are a couple of ways to set up mobile styles. If you want to avoid getting your hands dirty, you can check out a site like Mobify. Its used by mega blogs like Boing Boing, and ReadWriteWeb. It also allows you to have all sorts of cool features, but it does cost a bit of dough if you want some of the premium features.

If you want to do things yourself, here’s a simple way to go about it. Again, this is not all inclusive, but will cover the majority of mobile browsers. Here’s how you do it:

@media handheld {
    .sidebar, .content { float: none; }
    body { background-image: none; }
    p { color: #111; }
    a { color: #dd0000; }
}

Again, you just wrap the handheld-specific styles in the @media handheld {} brackets and place that code at the bottom of your stylesheet.

Bonus iPhone Tips

As I stated earlier, the iPhone (along with the iPod Touch) ignores anything within @media handheld {}. Its still possible to target through a modified @media specification. Just use @media screen and (max-device-width: 480px) {} rather than @media handheld {}.

Finally, keep in mind that iPhones (and most other Mac based devices) have icons on the home menu that make it easy for the end user to find their favorites. Its a good idea to accommodate them should they wish to add your site to this list. You can add your own icon by adding this to your functions (custom_functions.php for Thesis users):

function iphone_icon() { ?>  
 

			    			

Sign Up Now for Free Updates and Exclusive Content:

Learn how to write killer content, get more traffic, make money, and more by entering your email below:

Written by Adam Baird

Adam is a Wordpress designer, Thesis specialist, and blogger from Indianapolis, Indiana. He writes web design tutorials and resources on Theme Big. Check out his custom work here.

Leave a Reply

Comments

  • Rakesh Kumar says:

    I have opened my blog into iPhone web browser and what i have seen, a incomplete page. I hope these coding will help me to make my blog compatible with Mobile devices. Thanks Adam

  • Chris says:

    Adam,

    Do you have a recommended way to preview the print styles?

    When using the @media print {} as you describe – the Print Preview (in my case, OSX preview) is not displaying the correct results.

  • Layfon says:

    Adam
    I am working on my blog but it looks really wierd in my Iphone.
    I hope I’ll be able to do something with this but as I don’t know too much about css so I think I have to read some more about it.

    Thanks

  • Roberto says:

    THANK YOUUUUU !!! this helped me out to start optimizing my mobile look . I had a footer-container giving me trouble in the mobile browsers and with just two css lines I have got rid of it . Now I have to improve it reather than deleting it. http://www.smallbranch.es ( check it out )