Strategies for Handling Multiple Screen Resolutions and Aspect Ratios in Web Development

Question

Back in the day, 800 x 600 was the screen resolution to design for - and maybe 640 x 480. Then along came 1024 x 768, etc, etc, etc.

But then it gets worse: now we have

Answer 1

Well, trying to keep the answer not-too-long, this is what I do.

(A) Always start from the most likely used ratio/resolution

If your average joe is going to be on a modern laptop or a desktop machine he likely has AT LEAST 1024x768 (refs: w3schools elykinnovation), that gives you roughly a usable 960px width (you might want to check the 960grid system - there are a hell lot of new framework since I first wrote this). If you users are more likely to start with a mobile device or a tablet, thing about them first. If it's 50%-50%, it's usually better to start from small and then grow up, eg. Rock Hammer or Foundation

(B) Layout: fluid or not?

If your website could benefit from a larger width, pick a fluid design starting from this resolution. Be careful that the human eye does not like to read text over long lines, so do not abuse of fluid design; often sticking to 960px with large margins is acceptable. You might want to add (javascript) some additional side-menus if you really have a lot more space. But design your website to work without JS as much as possible.

(C) Other resolutions

Finally it's time to check that with least used resolutions things are still acceptable.

(D) Other devices, ratios and stuff

There are not many options for different ratios; it often means you are running on a mobile, ipad, AAA or similar device.

My advice is to ... design for those devices specifically.

While writing your HTML keep in mind what you are going to need and remember to do HTML by semantic and not for design. Use properly HTML5 semantic tags if you can. Avoid < bold > or similar tags, and properly use tags and classes that you are going to style with CSS instead.

Use a framework!

But you still can make a few different designs for very different devices. You don't have to do everything responsive /in the same design/.

There are several ways to serve a different CSS depending on the client; you can do it:

1. server side, checking the browser in the HTTP heading coming from the client, either with your web server or your dynamic scripting environment - be it python/django, php, or whatever else
2. javascript (you can easily get the window size)
3. html - in particular with some specific devices such as iphone

You can easily produce a generic design for small (eg. mobile) devices by following some simple rules: 1. fluid layout capable of fitting in very small widths 2. compact header/footers not too waste too much space 3. few, clear contents per 'page' 4. avoid :over effects as they won't work on touch devices!!!

If you want to go further, you have to check individual devices customizations; an example is the iphone viewport, see the apple ref library.

This is just to get you started. Experience and specific needs will drive the rest!