When I started working on the web, ten years ago, sites should be done to be visible with a resolution of 640×480px, otherwise a good part of visitors would be blocked out. As resolutions increased the minimum size increased to 800×600 and today it is believed that designing towards 1024×768 is safe.
Will this number increase in the future? Should we still concern about low resolutions? What is The ultimate answer to screen resolutions for web design?
I really don’t think the ultimate answer for screen resolutions is a number, no matter what the number is. I think the answer is a process by which websites are developed.
The solution for the screen resolutions on the web lies in a process, not in a number.
Smaller screens at sight in the future (and present)
First of all, as technology evolves not only computer monitors get higher resolutions, but also with a web enabled portable devices with much lower resolutions than normal computers. iPod and iPhone are a huge success and they are web enabled, but Apple is not pioneer on this nor will be the last to provides with this technology.
Mobile web is just starting and sites prepared for it would be on the heart of mobile web users, those who are not, will have to run after when they are already outdated, the mediocre middle, as Seth Godin says. People who are waiting mobile web to be a reality before they start to invest on it are really choosing poorly.
Not everyone maximizes
Just because monitors get bigger and bigger, and resolutions increase, it doesn’t mean users are willing to let sites they browse use their whole window. People may like to watch movies in full screen mode, but that doesn’t mean they’d like to surf the web like that.
In fact, many things done on the web require the user to interact with other programs or features that require monitor space, so even if a user has a high resolution, it doesn’t mean the browser will profit of that.
- A user following a computer tutorial or reading instructions, it would be nice to be able to put the browser window side by side with the window in which she will perform the described activities.
- Modern browsers often allow for a sidebar to display bookmarks or history, they also allow for extra toolbars to be added
And what if a visitor has a really high resolution
As designers we are always struggling with the lack of space, but there is the opposite situation, say a site works well on all sorts of standard resolutions and then comes someone with a maximized browser on a really high resolution display, what kind of response will your site have. Will it become just a little vertical strip with very tiny characters in the middle of the browser?
I think we could do better than that!
Thoughts towards an answer
I think that the ultimate answer to screen resolutions is that we will have to face diversity. Diversity of screen sizes, diversity of bandwidth, diversity of processing capacities, diversity of configurations.
Facing this diversity is the great challenge for web designers in the years to come. Allow your layout to use as much as possible of the user screen, but allow it to fit on small resolutions as well. Don’t try to decide everything to a pixel precision standard.
As resolutions increase, pixels shrink and so do characters.
By the way, why pixel precision? Why not turning to em-precision? Why not turning to elastic layouts to allow for text increase? As resolutions increase, the pixel size shrinks and in a pixel-precision site that means smaller characters. Why not let the em element rule your layout and allow the user to increase the font size and hence the character resolution, allowing for a more comfortable reading.
And why not use Javacript in our favor to allow for settings detection and switch layout accordigly.
11 Comments
Great points, Guilherme. This one small “extra mile” step is important, even though unless a user accesses the same site from two different resolutions, she will never realize what has been done. She will only know the site is clear and readable.
@Michael Martine –
Brilliant, Michael! This is a point I’ve been defending for a long time now. It is all about the accessibility.
It doesn’t matter what other users see, it matter that a specific user using a specific navigation paradigm (through the choice of browser, connection, device) has an adequate navigation experience for her choice.
Being a programmer and web designer, I fully understand what you are stating in this post. There is always the problem of setting the correct size to suit all resolution. A way to overcome this is to use CSS “div width;100%”, but that would cause the site to be elongated for some of the user with high resolution. Using javascript to detect browser resolution and capabilities would be a great idea.
Great advice, Zo’C. I’m not a designer myself, but the principles here are pretty basic (not sure if the code is basic, but the ideas are), and I’m surprised more designers don’t build websites with this in mind.
When I worked at an interactive web agency, it was amazing how many of our employees simply said, “If their computer has a lower resolution that the website, it’s their problem.” Many times, it was the graphic designers that had to have their site look the way they wanted it, and us coders would have to go along with their choice.
I agree that making a website flexible for platform changes is the way to having maximum usability in all web mediums.
@Landon: That is really pathetic. I can’t believe how many people call themselves web designers and don’t have the slightest clue about user interface design, business, or customer service. But their clients are so ignorant that they happily pay them.
@Damien Oh – I think javascript is a beautiful and great tool that is underused. Well, at least for nice things, because if used instead for all kinds of pop-ups and other nasty techniques.
While not quite advanced with javascript myself, I do know half a dozen pieces of JS code that do great things and are not longer than a dozen lines. It’s sad is not being used more often.
@Adam Snider, @Landon, @Michael Martine – Technically speaking nothing of this is hard to accomplish for a competent web designer, the actual problem, IMO, is the monkey see, monkey do attitude so often present with the so called web designers.
The big problem with this profession is that is a self-proclaimed profession. Many people say they are web designers before they actually understand what that is.
Not that is easy at all to define that. This blog is, in part, a quest for an answer to that, yet the problem is call oneself designer based in the ability to mimetize something that has been done, instead of creating, because the very spirit of a website can’t be copied by copying the visual.
Designers that “make up” philosophical reasoning to justify what they are doing and not otherwise are the ones to blame for the websites filled with web 2.0 crystal graphics and a 20th century concept.
Thank you for yet another interesting article G. I have to play devils advocate for a moment however and talk about the other side of the elastic layout card.
As an obsessive compulsive graphic designer I find myself driven by pixel perfection and although I’m not opposed to elastic layouts, I believe that creating a defined look and feel (in most instances) requires a reasonable degree of static control. Most sites just wouldn’t work visually if they were allowed to stretch the full width of my cinema display. The majority of content requires some amount of constraint to be visually appealing, even plain text.
I’ll be the first to agree that, there are certainly relevant uses for an em based design, but I think there will always be a solid place for pixel based design as long as designers are involved.
Just my 2 cents. I always enjoy what you have to say. Keep the great work coming.
Good points HERO, It’s handy to have a Devil’s advocate around.
I usually stick with 780 or 800 width. Usually gets the job done. I don’t like uber wide sites anyhow.
Nice Post . I agree that making a website flexible for platform changes is the way to having maximum usability in all web mediums . i usually use 1024×768 .
Trackbacks