Screen sizes & resolutions

On a similar note to my last post about W3C's validation standards on the Web, I decided to talk a little bit about different screen sizes and resolutions. Designing layouts for the Web is always tricky because of the many different screen sizes and resolutions people use out there today. I'm sure Professor Drake and I aren't the only ones who would love to have their 42+ inch flat-panel TV double as a huge computer screen! Many people would enjoy this, and some people have already found ways to do it, including DVI, VGA, AV, and Component cables. The point is, even though the majority of people don't browse the Internet on their TV screen, the vast amount of different sized screens with different resolution possibilities is still very large throughout the number of possibilities today. Multiple screens, resolutions, and even different browsers all play a factor into how users are presented with Websites.

While I don't have the ultimate solution to these issues, hopefully I can explain a little bit of how to plan some of your design work so that it looks the same on as many different browsers and screens as possible. As Professor Drake has already emphasized in this class, making projects work with Internet Explorer as well as Firefox is rather crucial. Unfortunately, just because your code may work on both of these browsers, doesn't mean other browsers will display it as you'd expect or want it to. One of the best and easiest ways to ensure clients will see your Website as you want it to be displayed is by testing it thoroughly once you have gotten it to a point where you're satisfied with it. An excellent tool for testing sites in many different browsers is http://browsershots.org/. This site also allows you to specify common settings that an end-user who is browsing your site might have. Options for different screen sizes and color depth, as well as whether or not JavaScript, Java, or Flash are enabled by the user can all be adjusted to test your project. The site contacts multiple virtual machines based on the parameters and browsers you specify then returns screenshots of what your Website looks like within each of those environments. The process can take quite a while sometimes, but it is an excellent tool for testing your work.

Beyond simply relying on that site, there are some things that you should know when coding Websites that will allow you to get results you want on most users' screens. I remember Colin posting something a while ago about a fluid layout, using percentages to position your divs throughout the HTML rather than static measurements. This can be very useful, but can still be a little unpredictable sometimes depending on the browser and operating system being used by the user. Percentages can also be hard to use when displaying a background image as part of your layout. I used to always code with percentages, until I came across these types of problems in positioning my content over my background images and keeping the same look once the screen got resized on or viewed on different sized monitors. An example of this can be seen on Terry's individual project. His layout looks really neat on a standard resolution and non-widescreen monitor, but when you view it on a widescreen, and maximize the browser, you notice that the content adjusts to the size of the browser due to the percentages he has set to them, but the background image remains the same size. Terry, please realize that I'm not criticizing your work in any way, I'm simply trying to show the differences in different screen sizes and the occasional issues that percentages can cause. While the site still works perfectly when the screen is resized, the layout of it doesn't quite line up as neatly as it did when it was the original size. One common approach used by most professionals is the process of wrapping content within other divs in order to position things as needed using CSS, and ensure they display the same way despite user preferences and screen sizes. A simple example showing some text wrapped in a div, within a larger div can be seen throughout EMU's web pages:



The use of, what I'd describe as, "parent divs" or "div wrappers" are really the key to properly positioning elements throughout your HTML. Not only do these processes ensure much more accurate results for the user, but they also ensure proper validation among the W3C standards. One more crucial point to mention regarding sizes and positioning is the use of background images. I've seen a few projects using a background image within the HTML and while it looks great in the native resolution of a certain computer, it doesn't look right when viewed on some other screens that are larger or smaller or have a different resolution. To get the best results with background images, try to find/create images that are big enough to fill a larger monitor, but not too big, that a user with a smaller monitor won't see any of the details of the image. I could go on about this in greater detail, but I'm sure most of you have already stopped reading at this point anyway, so I'll leave it at that! :) I hope this post is somewhat informative and makes sense to those who read it. The idea of different resolutions and screen sizes is an important issue to be aware of when creating Websites, and the more you test your work on different environments, the less likely you will be to have dissatisfied visitors to your sites.