Repeat Penguin » web accessibility http://www.repeatpenguin.com website design : xhtml : css : mobile web ~ Delivered Repeatedly by Jeremy Anderson Fri, 07 Oct 2011 04:54:50 +0000 en hourly 1 http://wordpress.org/?v=3.1 Cover Your Pixels http://www.repeatpenguin.com/2009/01/27/cover-your-pixels/ http://www.repeatpenguin.com/2009/01/27/cover-your-pixels/#comments Tue, 27 Jan 2009 23:20:31 +0000 Jeremy Anderson http://www.repeatpenguin.com/?p=213

With the increase in standard, out of the factory screen resolution for computer displays from 800px by 600px to 1024px by 768px, web designers across the internets were freed to make use of a wider canvas on which to design beautiful websites. And we loved it. This is anything but news.

A tiny oversight

Most web designers have been designing for 1024px by 768px for quite some time now. But around the time this became standard, some other wonderful things were happening. In particular, web browser support for CSS and web standards had made a small jump. This too, was wonderful.

However, along with these improvements in the industry, one tiny little layout consideration has been commonly overlooked by web designers, when building out websites. This layout consideration has to do with both the increased standard in screen resolution and the newly supported min-width CSS attribute.

New websites were being designed for 1024px by 768px screen resolution. With the lower resolution of 800px by 600px no longer being considered a priority for a majority of sites, many developers failed to notice a minor oversight in coding practices, that was being exploited by the inclusion of min-width support.

This oversight relates to how browsers set the default for the <html> element. By default, <html> is given a width of 100%. When a web page with a canvas area greater than the width of the browser window is viewed, the content of that page is forced to go outside of this 100% width. This can cause some unsightly and unpredictable behavior in how the page is rendered. The result of this oversight will vary by layout, but under certain situations this can cause some usability problems. For example, if you have white text on a dark background and that background color does not cover the full width of the canvas, the text in that area would then be illegible.

Refer to the examples below. And please note, I am in no way trying to criticize the developer of this site or the company. I merely needed an example to demonstrate what I am referring to. I have seen this problem on many sites, by many very talented web developers, developers who I admire and and inspired by.

Website (Rendered Correctly)Website (Rendered Correctly)

Website (at 800px by 600px) showing html width issueWebsite (at 800px by 600px) showing <html> issue

A simple solution

If you haven’t already guessed, the solution is extremely simple. All you need to do is define a min-width for your <html> element, presumably at the width of your canvas.

html {min-width: 960px;}
]]> http://www.repeatpenguin.com/2009/01/27/cover-your-pixels/feed/ 0