Resolution independent designs and standards

Making resolution independent designs becomes the focus of web designers when they start to become serious about the pages they work on. Making sure they look near about the same everywhere is a big issue today, and till web standards are followed properly, there is really no proper way to make sure your beautiful custom made template or layout will render perfectly at different resolutions. What do exist are however little loopholes that you can climb through to create the effect of a resolution independent design.

The situation at hand stands that out of the three main browsers being used in the market today, Opera is the only one which has passed the Acid2 test satisfactorilyFirefox Gran Paradiso (Fx 3.0 alpha 2) passes the Acid2 with the help of a new rendering engine.. So you'd think the ideal thing to do would be to make your pages look the best in Opera. But there is a catch! Opera only holds about 3-4% of the browser market. Which means that about 96% of the people using the Internet out there have probably never seen a perfect CSS standards compliant site. Macs have Safari, which is also an Acid2 test graduate, but we all know how many Macs are out there! :( So, who rule the roost here?

Firefox (18-19%) and Internet Explorer (doh! 70-75%) are what most of the people use. They follow CSS standards pretty closely, but not perfectly. Which is why something suited for Firefox will most probably be off in Opera, and definitely in Internet Explorer. IE has been the failure story of Microsoft since day one, with security problems and non-standard compliance. Don't even think of making your pages look good in Internet Explorer. They'll get messed up beyond recognition in the remaining two browsers.I talk from experience of designing over 6 different templates. It might not break in IE, however, but designing for IE is trying to run through a wall. It's hard and fruitless. However, with IE7, Microsoft has been able to rectify the problem quite bitThis template doesn't show up in IE at all. It begins to load, and then just gives up and stop. I have no inclination to find out what the problem is. I'd really suggest people to get a 'real' browser (hint: Firefox).. But these two browsers still have a distance to go.

Where do we go now?

To reach independence from design, there are two basic methods that I know of. One of them is followed here. But before we get into that, a small primer on the two basic layout methods used by designers today. The first one is using Tables. This has been there since web pages have existed I believe. Everything used to be arranged in Table rows, and the width and height attributes tweaked to give you the look you desired. Quite a few sites still use this, and this is probably the only method that works perfectly for IE, Firefox and Opera. The problem? The coding itself. If you look at the source code, you'll see nothing but Table tags. Rows and rows of them. Debugging them can really become a pain, and unless you're a whiz, they're usually one shot templates.

The second way, and the modern (smarter?) way of doing it is using DIVs. DIV elements can be (using proper CSS) made to do your bidding perfectly, and they show up with littleWhatever difference is there will be most visible only in IE. IE handles dimensions and positioning values quite differently. For example it doesn't handle em values well at all. This template uses mostly that and %. You can see the result in IE yourself difference in the three browsers. DIVs contain all three attributes of 'height', 'width', 'position' (left/right/bottom/top) that you'll ever need to position something. Now, onto the two methods themselves. Though I have been guilty of not following them in the past, I am trying to improve visibility and resolution independency of my templates everyday! :)

The first method is following a fixed width design. There is no real trick to doing this. Just use fixed positioning units, usually pixels (px) when setting position and dimension attributes. What you'll actually do is fix everything, which means in different resolutions, everything will show up with whatever pixels you provide, in accordance with whatever pixel spacings the resolution offers. Which means if you use an 8px font size in 800x600, it'll become 4px or lower in 1600x1800, making it virtually unreadable. But a resolution that high is seldom come across, hence if you can ignore the few setbacks, it's a good thing to follow.

The second method is to make dimensions and positions relative. This is done by generally using 'em''em' dimensions are decided by the current font size set in the browser, not the pixels themselves directly. and '%' when defining them. This will scale almost perfectly across different resolutions, however, you'll have to check them up to make nagging little changes here and there. I don't recommend this, because positioning might be fine, but dimensions can really go for a toss, sometimes reducing containers to sizes that can't hold their content. Hence, everything seems to be spilling out.

What I do

What I follow here is a little loophole that I spoke earlier about. I use a part of fixed width, and the rest relative. I have made my BODY tags fluid, so that the page can expand with the window size, but the content is all stuffed in a fixed width DIV at 1007pxThat's the width of the visible part of a page in a browser at 1024x768., since that's the resolution my screen is on, and according to W3schools, is the resolution of choice for almost 60% browsers out there. Then I use 'em', which depend on the font width, to make everything scalable. So if you use your zoom in and out key combinations, you'll see everything scale in and out, with more or less looking the same, just zoomed in.

So you see, there is no real perfect way of making sites degrade gracefully across different resolutions. You just have to find a compromise that suites you better than the others. I hope this will help you make your designs better for those who are still left behind, or who have advanced in resolutions beyond you! :P