Posts Tagged ‘usability’

There is nothing like reading an article on the website and finding it one of the best you have ever read – you immediately want to show to it other people. You flick the switch on your printer to on, hit Control + P and prepare for it to emerge. But what do you get? A mess of DHTML, adverts or half the text missed off the edge of the page.

You could always hope the visitor turns their page to landscape but with the length web pages usually turn out like it is not very likely. Save them the trouble of having to print selection or copy and paste into a word processing package by making your pages printer friendly for them to print straight from.

Making them friendly in the first place
There are two main ways to allow visitors to print the pages easily. The first is to make the original web page with the article or content on, the right size to be able to print. For liquid width sites this is ok as long as they can condense down although for fixed width sites this is not as easy.

Generally you have a width of about 600 pixels, which the users printer will print. This is good if you have a navigation or sky scraper advert down the site taking the last 200 pixels of your page as the user does not need these printing. Although if your article goes all the way to the edge its time to rethink the design.

One way of getting round this would be to have a link, which chances the width of the page. The user clicks a link to say somepage.php?mode=printer. Then you could have something, which says if the mode is set to printer the page width is altered to 600 rather than 800 pixels using server side scripting. This could also be done to a certain extent using JavaScript so the page will not always have to be reloaded although in some browsers it may have to be and there is more chance of it going wrong.

The printer friendly page

This is a more common solution to the problem of visitors not being able to print. All you have to do is set up a separate page without all your adverts, logos and navigation, which is less wide or uses a liquid width so that the user can print this.

Generally you wont want to include adverts on this page, otherwise visitors may not use it at all as they can remove the ads themselves using print selection or copy and pasting the text. However you may want to include your logo and visitors won’t mind and it increases branding when the article is passed around.

If your articles are static then you may end up creating a separate page for each of these but if your articles are dynamic, most likely stored in a database you will simply be able to make a dynamic page just like your main article page for the printer friendly page and link them together.

Making it usable

Whatever solution you use you may want to include a print link to. This will encourage users to print the article simply by clicking the link, as their finger will already be on the mouse button, so users who would not normally print the article may give it a click.

Another good point about users printing the whole page rather than copy and pasting the text into a word processor is that the URL of the page will be at the bottom so other people who read it will see it and when the visitor looks at it later they will remember your website.

So you’ve designed your perfect homepage. The only problem is that it doesn’t fit on anyone’s screen but yours. Suddenly you are finding you have to redesign your site so it is more accessable to everyone and your amazing designs and idea’s are laid to waste.

When first building your website you need to decide how wide your going to make it. If its just formatted text going across the screen then you are ok, but for most of us, we need to set a width for our tables and layers which is bound to cause problems somewhere along the line.

100% width

The easier way to make a site fit is to set the width to 100%. It will stretch across any screen so no problems you say. However its not as simple. Designing a site with 100% width is not always that easy as you have to make sure everything will squash down – no point using 100% width if your images won’t let it go down futher than 900 pixels.

You still really need to pick a width as any images and menu’s that make your site wide will set the width for you. People on 640 X 480 screens with browsers in shrunk mode would probably like your site to squash down to about 400 pixels. Test if your site will do that (though don’t worry if it won’t).

100% width works good for sites such as Microsoft.com and Worfolk.biz who have a lot of product information and so use text with can go across the screen and still squash down easily.

700 pixels width

This is the site I use for most of my sites. I use it because I can fit a banner into it and still have room for a 200 pixels wide logo next to it. The only problem with doing this is that its slightly too big for people with 640 X 480 screens and slightly too small for 800 X 600 screens. I consider it a nice balance though.

A lot of sites go for a 800 pixels wide screen so that it wil fit on a 800 X 600 screen now as people using 640 X 480 are become rarer quickly – I’ve been using 1024 X 780 for years now. Ever Yahoo is now to big to fix on a 640 X 480 and has been for a while too.

A fixed width site works well for sites which have content in the right place, all neat and correctly laid out in sections such as Msn.com or Mworld.us.

Other options

MSN use javascript to show hide layers. If you read Java Junky (MXL Magazine column) then you will know what this is about. Bascially if the browsers screen is big enough, they add extra information dowen the left column – Full screen your browser on one of the channels and then shrink it to a fairly small size. Some content should disappear (probably the channels menu) from the right hand side.

They also have a script on their homepage so that it rearrages the content for people with 640 X 480 screens so it fits on them while using up the space nicely on a 800 X 640 screen.

Conclusion

If you site isn’t almost all text then go for a set width such as 700 or 800. If you don’t have any menu bars or extra content down the side then you might even want to go for 600 pixels like Worfolk Online uses (or used to use depending on whether it has changed since I wrote this). Test it out on different screen sizes and see what looks good. Check out what the competition does. When you’ve found something you like – stick with it.