/CSS/ Cater for screen resolutions
26/03/2008 | Filed under Develop > CSS
Does your site look great on all monitors, from the small to the ridiculously big? Craig Grannell shows you how to create a layout for multiple screen resolutions
Back in the darkest depths of time (well, the 1990s), there was a common screen resolution: 640x480. For a while, it ruled the roost, and all websites were made to happily fit within it. Then 800x600 came along to spoil the party. Web designers had to decide whether to abandon the smaller size, create fixed-width sites that worked in both common resolutions, or fashion liquid sites that would stretch to fit any resolution. Back then, the liquid-design route was an eminently sensible one: with the difference in screen sizes being relatively small, and few users running resolutions higher than 800x600, it was fairly easy to create stretchy designs that worked well on the majority of set-ups.
Things have changed. Although 640x480 is but a dim and distant memory, up to a fifth of users are clinging on to 800x600. And although 1,024x768 has rapidly become the most popular screen resolution, plenty of users run larger resolutions, thanks to the affordability of massive monitors. The upshot of all this is a problem for web designers. Design for the lowest common denominator and you may end up with a layout that looks strange on a much larger screen. However, design a liquid layout and you could end up with something thatês unusable if someone surfs full-screen on a 24in display.
Of course, in some cases, youêll find that a fixed layout is the best choice to use anyway. Some designs only work well if you can position elements precisely where you want them, and if you’re working on something like a blog, you want to ensure that your text columns remain narrow, otherwise the wonderful advice you’re imparting to your readers will be hard to read. However, there’s a useful compromise in the liquid vs fixed war: a semi-liquid layout, which stretches to a maximum point and then stays put, no matter how much wider you make the browser window. This enables you to create a layout that works well at 800x600, stretches to fit nicely within 1,024x768, but then stops getting any wider, so it doesn’t end up looking bizarre on the monitors of people who clearly have far too much money.
This kind of design is made possible by the little-used max-width property, which has remained little-used due to IE’s lack of support for it. Version 7 deals with it correctly, and it’s possible to cater well for older versions of IE by way of a second style sheet attached using a conditional comment. Due to various other bugs that IE is afflicted with, the site in this tutorial will work rather differently in IE6 and below, often not resizing without a refresh when the browser window is narrowed. This, according to tests, is because of the margin settings applied to the wrapper. Removing these (resulting in a left-aligned site) removes this shortcoming, but as those users with small monitors will likely be surfing full-screen anyway, this minor problem isn’t really all that much of a concern.
About the author:
Name: Craig Grannell
Site: www.snubcommunications.com
Areas of expertise: Information architecture, site concepts, graphics, interface and front-end design
Clients: Swim~, Rebellion, IDG
Favourite holiday food: Decent, authentic Mexican
Click here to download the support files
Click here to download tutorial PDF
Comments
JJT / 26/03/2008 / 23:49 / http://getoutofdebt.org
Great article. Having designed a couple websites myself(in my case that involves a template and tons of cut,copy, and paste) I am always checking what the finished site looks like in Firefox and IE. I wish more real web designers would consider what their finished site looks like in multiple browsers and take the time to read your articles.
Manuel / 31/03/2008 / 02:31 / http://www.gossipcheck.com
Great article! I always optimized my sites for 1024x768 but I noticed that a lot of visitors have a smaller resolution again. I guess the main reason for that are mobile phone browsers and sub notbooks like the asus eee pc. That makes things more stressful again.
SubEffecc / 24/04/2008 / 15:45
What a refreshing article. Since I got a widescreen I've noticed issues with other peoples sites and some of my tried and trusted CSS templates.
cloud9ine / 29/04/2008 / 00:53 / http://drysatire.blogspot.com
I haven't done any sites recently, but I used to have an obsession with the <div> element, absolute positioning specified by pixel, and micromanaging every single element on the page. Yes, it was a pain to manage but the beauty of it showing up exactly how I'd like it to, irrespective of everything just gave me lots of pleasure.
Here's a personal page (couple of years old) that I did using that technique :
http://web.mst.edu/~arkvf/
ts / 29/04/2008 / 00:57
Nice article....except for the unnecessary statement about how people with large monitors "clearly have far too much money". I consider myself lower middle class, and I saved almost a year to buy a 42" 1080p LCD on black sunday. I use it as my primary computer monitor to get the most out of the money I spent. And BTW, this site looks good at 1920x1080. =)
Craig / 11/05/2008 / 17:41
"except for the unnecessary statement"
I was more referring to people who have hideously expensive 30" monitors stacked on their desk at home, with a kind of 'look at me!' thing going.
