Coding for Multiple Screen Resolutions

02.17.2008 | Screen resolution refers to the number of pixels in a given space, mapped horizontally and vertically across the screen, e.g., 800x600 and 1024x768 both being common screen resolutions. When coding your site, you want to utilize a screen resolution that enables the maximum number of viewers to access your site without issue.

In a perfect world, web design would be irrelevant to the browser employed however the various web browsers do tend to prefer one resolution over another. With this in mind, the web designer needs to focus on maximizing his or her design such that the final product can be readily accessed without issue by the vast majority of those to access the site.

Now, let’s take a look at some primary methods…

One easy way (the easiest method) to accomplish this is to simply utilize a resolution of 800x600. The screen resolution of 800x600 is, currently, the most utilized with 1024x768 following closely as a runner-up.

Another (highly functional) means to accomplish coding for multiple screen resolutions is to utilize the JavaScript Source. The JavaScript Source can be set up such that it will redirect views of your site to the page of appropriate resolution for their particular browser. The downside to using JavaScript Source? Designing and storing multiple copies of the same pages for the various screen resolutions.

As well, though more involved, one could utilize CSS to code “liquid layouts” or rely on Flash coding to achieve a more uniform web design. Both of these are somewhat more advanced techniques and are not without their drawbacks. For example, not all browsers handle Flash well (at least not without the various “plug-ins”) and, for the viewer, visiting a site that requires a plug-in can be somewhat irritating.

One could also center tables and set the page format to percentage width versus set width. This will have the effect a more visual aesthetic page display and ensure that the page parameters are adjusted based on the viewer’s own screen resolution.

Before initiating coding, one should research to determine the browser most often utilized on site visits by viewers potential and actual. Internet Explorer is no longer holds the browser monopoly and many other browsers are being utilized today. Adjust your coding to best suit the majority of visitors.

Once the site coding has been implemented, it is also important to test your site pages utilizing the base resolutions so that you can see beforehand what your visitors will be looking at and address any issues that may arise using any one or all of the methods discussed above.