Have you ever looked at your website on other sized screens? It’s amazing how different screen resolutions can greatly affect your audience’s experience with your website.
Unfortunately, your website will never look perfect on everyone’s screen. However, there are a few things you should consider to ensure your website looks good on the majority of screens.
The first thing to remember is that currently 1024×768 is the most common screen resolution. This means you should optimise your design for 1024×768. However, note that I said optimise; you still need to consider how your website will look on other resolutions!
Secondly, think about how your information is being presented to your audience. Too much information on a page can blow the page out of proportion. You may want to consider splitting your information (be it products, blogs or something else) into categories and subcategories.
Thirdly, consider a liquid layout (or hybrid fixed-liquid layouts), which uses percentages to define containers, and will therefore stay in proportion on different sized screens. If you do choose a fixed-width layout, centre your table and use an appropriate width.
Finally, test your website in different browsers with different resolutions. Remember not to stress if it isn’t perfect in every resolution – it never will be!
Below are some examples of a hybrid layout (taken from John Almirante’s article on screen resolution) at different resolutions. As you can see, the header bar stays the same height, the side bar stays the same width, however the content section changes with the resolution.