Strategies for handling multiple screen resolutions and aspect ratios in web development

Question

That same day, 800 x 600 was the screen resolution for - and maybe 640 x 480. Then there were 1024 x 768, etc. etc. etc.

But then it gets worse: now we have not only different permissions, but also different proportions.

What strategies do people use to accommodate today's expanding range of screen sizes and proportions?

(BTW - I only thought about laptop / desktop equipment, but, of course, there are smartphones and tablets).

Answer 1

I know this would be a somewhat controversial opinion, but I still say: Not

Do not design for multiple screen sizes or proportions. Of course, there are a few exceptions: heavy web applications such as email clients can definitely work with larger screen real estate and are probably flexible enough to provide a wide range of screen sizes anyway. Mobile versions of the website with a more flexible design to accommodate an incredible range of sizes of mobile screens can also help for sites with high mobile volumes. However, if you stick to the so-called “desktop network”, then I think we can say that in 95% of cases there are more important things to take care of than screen size, resolution and aspect ratio.

First of all, let's look at a simple one. I really don’t understand why you care so much about the aspect ratio - isn’t it the way we care more about that, for “under folding” nonsense, right? The web is a vertical environment - scrolling will always take place on websites. Having everything above the 600px magic line is just plain stupid.

Next, screen resolution / size: again, I find it difficult to defend.

Users with large screens usually do not maximize their browser windows because they believe that most websites do not use them. While the web is configured for the user, the user is also configured for the Internet. Although you can argue that this is a chicken and egg problem, the fact remains: the website is usually designed for the lowest common denominator. I am not defending this position, but rather pointing to it as the current prevailing trend in the industry.

There are certain things that simply won’t work with too high or too low resolution. There is, for example, a small range of widths that allows people to read comfortably on the screen. Any longer and more eye movement on the next line will be annoying. Too little and the text will seem cramped. The fact that the network was designed to neutralize resolution means that, paradoxically, not many provisions have been made for those who want to make fluid plans. min-height and max-height might help, of course, but the wider the range, the more problems you will encounter. Things like orphaned elements, moved images, backgrounds that end, etc., are inevitable for truly flexible sites built with today's technology.

Therefore, I believe that the easiest way to resolve several resolutions is to ignore it altogether - with today's technology there aren’t so many options anyway - and design for the lowest common denominator.

Answer 2

Stay tuned for high DPI settings

I think that one of the most unresolved issues that we face today in web development is testing on high DPI systems. Everyone learned to test and test and test in different browsers, but developers / developers did not give in to testing on different DPI settings.

High (or even low, for that matter) DPI settings break the design when scaling fonts, but images cannot (what can happen), can distort images fuzzy / blurry, and absolutely positioned objects may not be displayed in the desired location (which was would be disruptive to CSS menus). If nothing else, check your images at high DPI and repeat them as necessary.

This was never a problem until recently with the release of Windows 7 and people buying computers with high-resolution monitors. First, Windows 7 uses 96DPI by default (which is different from the rest of the computing world using 72DPI as a standard. In addition, Windows 7 automatically adjusts DPI settings, and I saw people with DPIs equal to 150% of normal (96 DPI on Windows).

Here's a great link discussing this issue in more detail: http://webkit.org/blog/55/high-dpi-web-sites/

A great cross-browser website designed using web standards is the goal, but don't forget about DPI testing.

Answer 3

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

(A) Always start with the most likely relationship / resolution.

If your average Joe is on a modern laptop or desktop computer, he most likely has at least 1024x768 (refs: w3schools elykinnovation ), which gives you approximately 960px width (you can check the 960grid system - there are a hell of a lot of new framework since I first wrote this). If you, the users, are likely to start from a mobile device or tablet, first talk about them. If it is 50% -50%, it is usually best to start small and then grow, for example. Stone hammer or foundation

(B) layout: liquid or not?

If your site can benefit from greater width, choose a smooth design, starting with this resolution. Be careful that the human eye does not like to read text on long lines, so do not abuse the smooth design; it is often acceptable to stick to 960px with large margins. You might want to add (javascript) some additional side menus if you really have a lot of space. But make your site work without JS as much as possible.

(C) Other resolutions

Finally, it's time to check that with least used permissions is still acceptable.

(D) Other devices, ratios, etc.

There are not many options for different ratios; this often means that you are working on a mobile phone, iPad, AAA or similar device.

My advice ... specifically for these devices.

When writing HTML, remember what you need, and remember to make HTML semantic, not design. Use HTML5 semantic tags correctly if you can. Avoid <bold> or similar tags, and use the tags and classes that you want to style with CSS instead.

Use the framework!

But you can still make several different designs for a wide variety of devices. You do not need to do everything adaptively / in one design /.

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

1. on the server side, checking the browser in the HTTP header coming from the client, either from your web server or with your dynamic scripting environment - be it python / django, php or something else
2. JavaScript (you can easily get the window size)
3. HTML - particularly with some specific devices like iphone

You can easily create a general design for small (e.g. mobile) devices by following a few simple rules: 1. fluid structure that can fit on very small widths 2. compact headers and footers do not spend too much space 3. little, clean content per page 4. Avoid: excessive effects, as they will not work on touch devices !!!

If you want to go further, you must check the settings of individual devices; An example is the iphone browser, see the Apple Ref library .

This is just for starters. Experience and special needs will guide the rest!

Answer 4

Your site may not work perfectly for every display. Even if you had enough hours a day (or should I say a year / decade) to design for every possible display, you would have to do it every time a new device came out.

In my development, I am still religiously trying to avoid horizontal scrolling, and it is not too complicated with floating divs / div-width. But besides this, we really are in an “application for these” intersections where you need a specially designed display for certain devices.

One of my strategies is to reduce dependence on a single display - the client probably does not need to see your entire web page to do what they did. You can analyze functionality into smaller / simpler web pages that scale better on devices of various sizes.

At work, I have a little more “power”, since I can develop internal web applications that are “designed to run ... a specific browser, some display settings, etc. - use other configurations at your own risk” . This is only after the managers agreed that they spend an extra week on development (and even more on modernization / future maintenance) just to reassure that one vegetarian on the other side of the campus who refuses to use IE doesn’t really worth the cost. In this case, we need another Timmy, and not a more flexible web application that can look good in his favorite browser, other than IE.

Answer 5

This is a general, but difficult question, which, unfortunately, does not have a single best solution. It all depends on the type of content that you have. You can use the liquid layout or design of your site in different ways for different resolutions (see http://www.maxdesign.com.au/articles/resolution/ ). For an example of fluid construction check this out - http://hicksdesign.co.uk/journal/finally-a-fluid-hicksdesign

Answer 6

I think responsive web design is the answer to your question. Take a look at these examples and techniques ... Responsive web design