Hey Guys I've just been writting up some stuff on screen size today - thought it might be worth bouncing it off you...
The issue of which screen resolution to design for is a complex one without a single, clear answer. The range of screen resolutions used to access web sites is diverging as both mobile devices and LCD screens become more popular. While there is no single, silver bullet, best-practice method of dealing with this issue at this time, there are a number of techniques which can be implemented to help address it. Which techniques are most appropriate on a particular site depends on a range of issues including: • Purpose and content (text heavy vs. graphical/experiential) • Site design • Target audience • Existing user base With the proliferation of laptops and flat screens in Australia, the percentage of users in Australia using 800 X 600 has declined significantly over the last 2 years, however, as of mid 2005, approximately one third of Australian Internet users are still using an 800 X 600 resolution. Increased usage of handheld and mobile devices to access the Internet introduces a growing audience with much smaller screens that must be catered for. Techniques: Min/max width: Two CSS properties; min-width and max-width are useful in dealing with the issue of variable screen resolution as they allow you to achieve a "liquid" effect within the constraints of a minimum and maximum width. The downside of this approach is that it is not supported by all browsers, particularly Internet Explorer. Various javascript based approaches have been created to work-around this issue. Media=handheld: The CSS Specification outlines a specific media type for handheld devices. In theory this allows developers to write a style sheet for normal screens and an alternate style sheet for handheld devices. Unfortunately this approach is also hamstrung by poor browser support. Dual width layouts: Dual width layouts use Javascript to detect the user's screen resolution when the page loads. A different CSS file will be loaded in depending on the users' screen resolution. The disadvantage of this solution is that the developer must spend the time creating the required CSS code for each of the target screen resolutions. Example: http://www.smh.com.au/ Zoom layouts: The term Zoom Layouts was coined by accessibility expert Joe Clark. This technique also involves offering users an alternative style sheet, but rather than targeting a different screen resolution it targets low vision users. The alternate style sheet strips out the bulk of the design elements and present the users with a high contrast version of the core content. Examples: http://www.themaninblue.com/writing/ http://www.themaninblue.com/writing/?styles=contrast http://overcaffeinated.net/ http://overcaffeinated.net/indexhc.html Obviously a pragmatic approach must be taken. Specifically targeting a large number of different configurations is time consuming and often impractical. When addressing these issues focus should remain on audience and purpose. Additional information: • CSS 2.1 Specification • Minimum and maximum widths: 'min-width' and 'max-width': http://www.w3.org/TR/2005/WD-CSS21-20050613/visudet.html#min-max-widthsb • Recognized media types http://www.w3.org/TR/2005/WD-CSS21-20050613/media.html#media-types • max-width in Internet Explorer http://www.svendtofte.com/code/max_width_in_ie/ • Let Users Control Font Size http://www.useit.com/alertbox/20020819.html • The Effects of Line Length on Children and Adults' Online Reading Performance http://psychology.wichita.edu/surl/usabilitynews/42/text_length.htm • Ideal line length for content http://www.maxdesign.com.au/presentation/em/ • Stylesheets for handheld devices http://css-discuss.incutio.com/?page=HandheldStylesheets • Zoom the Web http://www.joeclark.org/atmedia/atmedia-NOTES-2.html • Big, Stark & Chunky http://www.alistapart.com/articles/lowvision/ -- Mark Stanton Gruden Pty Ltd http://www.gruden.com
