A Detailed Guide for Web Designers on Dealing with Different Screen Resolutions
UPDATE: If you saw the screenshots messed up in this post, it is now fixed.
1. Table of Contents
2. Introduction
Handling screen resolutions is a difficulty for web designers simply because there are so many screen resolutions. There are small screens on mobile devices and freakishly large and expensive screens now finding their way into the desktop market.
This post will give some guidelines which may make it easier for a web designer to deal with the vast differences in screen resolutions.
3. Mobile screen resolutions
It’s common to browse the Internet on a cell phone, especially now that the Apple iPhone (and other devices) make(s) it so easy. Many normal websites work fine or almost fine on iPhones, but for some mobile devices with different web browsers, web browsing can be a difficult task.
How can one web page be designed in such a way that it elegantly displays the content on mobile and large screens? It is possible for mobile and large screens to view the same webpage, but it is rather difficult for the content to be displayed elegantly.
3.1. Creating and designing mobile web pages
To solve this problem, a separate version of the webpage with the design tailored specifically for small screens can be created. Usually, the same content is displayed, unless the content is something that is currently problematic to display on mobile devices.
I believe that mobile web pages work best if they are fluid width, and do not strictly specify a font size. Towards the end of this post, you will see why I recommend this.
You might want to check out the W3C’s draft Mobile Web Application Best Practices“.
3.2. Redirection to mobile webpages
A problem with creating another webpage, or having server side scripting (such as PHP or Python) generate the mobile web page on the go, is that the user has to be aware of the mobile web page.
Redirection can help reduce the awareness problem. User agent and screen resolution detection can be used to redirect the users to the proper page for the user’s screen resolution.
3.2.1. User agent detection
This can be done either with client side scripting (Javascript) or server side scripting. The user agent of a mobile web browser is detected and is either redirected, or the same page is filled with different content.
3.2.2. Screen resolution detection
With screen resolution detection, only client side scripting can be used because the screen resolution is not passed to the server. Either the mobile users can be redirected, or the users with desktop screen resolutions.
I find it less reliable to rely on a mobile web browser’s Javascript capabilities, so I think it would be smarter to redirect the users with larger screen resolutions.
4. Desktop screen resolutions
Assuming that the mobile screen resolution problem has been solved, there still are a good variety of screen resolutions on the desktop market. The problem is that larger screens are being created and bought while some people can’t or don’t upgrade.
This results in screen resolutions from 800×600 (though 640×480 might still be seen) up to… Oh, I can’t give a top number. Somebody will point me to a place where larger screens are available.
Below are the various solutions for handling the differences in desktop screen resolutions.
4.1. Creating more webpages for different screen resolutions
Basically, use the techniques for mobile screen resolutions and use them again for desktop screen resolutions. This is not a very good solution, and is only used in the mobile situation because of the extremely small mobile screens.
4.2. Using fluid width designs
Because the size of desktop screens are pretty big, compared to mobile screens, a fluid-width layout might work. But if a fluid-width layout is not designed properly, problems can occur.
If the fluid with layout isn’t built with smaller screens in mind, the layout can look scrunched in smaller screens. Conversely, if the fluid with layout isn’t built with larger screens in mind, the layout can look overly spaced out (for the lack of a better term). Long lines of text, which can happen with fluid-width layouts on large screens, are hard to skim through.
Another problem with fluid width designs is that the content may contain fixed width elements, such as images. Should the fluid width container shrink to a size that is smaller than the fixed width container, the layout can get severely messed up.
4.3. Using limited fluid width designs
Cascading style sheets are quite powerful, and have the capability to limit the stretching and shrinking of fluid width designs.
The CSS properties min-width: and max-width: can be used to restrict the flexibility of a fluid width layout. But how can these properties be used in order to make webpages look good for large and small webpages?
Well, the use of max-width: can be used to prevent those long lines of text that was described earlier. The property min-width: can be used to force horizontal scrolling in the smaller screen resolutions. While horizontal scrolling is typically not a good thing, there is more below about how to intelligently use horizontal scrolling (not the style of scrolling seen at http://www.thehorizontalway.com/).
4.4. Using narrow fixed width designs
This is the solution that is, at the time of this writing, used by this blog’s template. This blog is neither scrunched up 800×600 nor does it have overly long lines. The major problem that this solution has is that fixed width content can mess up the layout. The fixed width content issue can be observed by looking at posts on this website that contain images that are wider than about 500 pixels will cause horizontal scrolling.
Also, due to the problem with fixed width content, the more columns that a design has, the narrower the fixed width content has to be in order for it to fit with the layout.
4.5. Intelligently using horizontal scrolling
This section is an extension of section 4.4, but modified slightly to allow for three or more columns with a decent width. Basically, use horizontal scrolling. As I said in section 4.3, I am not referring to the horizontal scrolling demonstrated at http://www.thehorizontalway.com/.
In my opinion, horizontal scrolling is a thing that should be avoided, but here I say that minimal horizontal scrolling should be okay for screens with small resolutions.
Basically, create a fixed width design for… perhaps 1024×768. The goal is to get all of the main content (like the content of a blog post) visible on 800×600. Use somewhere from 700 to 750 pixels for the content. Don’t get too close to 800 pixels, because some space will be taken up by the scrollbar and you also want a portion of a sidebar or something displayed to show the user that horizontal scrolling is needed in case the user does not see the scrollbar at the bottom.
For more reading on horizontal scrolling, check out Jakob Nielsen’s alertbox on scrolling.
4.6. Having small desktop screens view the mobile pages
Section 4.1 talks about creating more pages for different screen resolutions, which is not optimal in most cases. But assuming a mobile page is already created, why not have users with small screen resolutions go to the mobile page?
To some of you, that might sound crazy, but look at my below demonstration.
Below is my FriendFeed page at 800×600 in Firefox 3.0.1.
Click on the above screenshot to view it full size.
The sidebar completely messes up the design. I would not want to use FriendFeed at such a low resolution.
Now, let’s see what Benjamin Golub’s FFToGo (a FriendFeed API app for mobile devices) looks like at 800×600 in Firefox 3.0.1.
Click on the above screenshot to view it full size.
Hey… not too shabby. It’s a clean and simple design that looks a whole lot better than the FriendFeed website.
Assuming that the mobile web page
- does not force a tiny font size,
- does not force a width,
- is not uglier than the main page,
it might be a good alternative for folks at 800×600. Of course, user agent detection will not work because there are very few people out there that are using a desktop browser with a mobile browser’s user agent. Screen resolution detection, or in the case of FFToGo, simple advertising will have to do.
5. Conclusion
None of these designs are for everybody. Designers creating a website for a very small audience might know what sort of hardware users would be using to access the webpage. The larger the audience, the more likely that the screen resolutions visiting the webpage will be more varied.
No related posts, but you might find these interesting
Posted in Best Practices, Web Development |
On FriendFeed, this post was liked by 2 people and commented on 0 times 
Add New Comment
Thanks. Your comment is awaiting approval by a moderator.
Do you already have an account? Log in and claim this comment.
Add New Comment
Trackbacks
(Trackback URL)