Risky Rocks At Any Resolution! (www.RiskyRocks.com)

I recently created the Risky Rocks website for my brother’s band “Risky On The Rocks”. The website takes a bold step by pushing past the 960 pixel width that has become the industry standard for website design. Why is 960 pixels the current standard you ask? Well, the answer is quite simple… Screen Resolution. While most newer laptops are sporting recommended screen resolutions of 1600 x 900 or greater, many internet users are still surfing around the web at resolutions as low as 800 x 600. So what does this mean exactly in terms of web site design?

Although you will find many offenders out there, one of the golden rules of web design is “No Horizontal Scrollbars”. What this means in simple terms is that at any resolution, a website should not be too wide for the screen it is displayed on. For most websites and in most cases this is usually true. However, if you change your screen resolution to 800 x 600, you will quickly notice that many sites begin to stretch off the side of the screen. Even Facebook… In their defense however, Facebook would tell you that all of the user’s critical content stays within view (i.e. the add bar is what gets pushed off the right side). Most users have a scroll wheel on their mouse for vertical scrolling. Unfortunately, horizontal scrolling is much more cumbersome and content that extends past the right side of a user’s screen can be easily missed.

Even when web sites are designed at the industry standard of 960 pixels wide, a screen resolution of 800 x 600 pixels would leave approximately 960 – 800 = 160 pixels of the website hiding off the right side of screen. To further complicate matters, a 960 pixel width on a screen resolution of 1600 x 900 barely uses up 60% of the available screen width. Successful companies like Google recommend using a hybrid strategy of media queries and liquid design where the horizontal scrollbar is always eliminated and site content is continually pushed in a downward vertical direction as needed to dynamically accommodate for limited screen widths.

Here is an example of how different screen resolutions can impact a website:

The Grass.ag website was designed for optimal display at a resolution of 1600 x 900 and is 1228 pixels wide.

Without the additions of media queries for a more responsive design, this is what the grass site currently looks like at a screen resolution of 800 x 600 pixels.

Luckily for me, I was not required to support older browsers with Risky Rocks. This gave the flexibility of developing a strategy for responsive design that did not require the use of a liquid design (pushing site content to lower vertical positions to accommodate for lower screen resolutions / widths). The following approach appears to work well for all of the latest browsers. I was on IE9, Chrome 19.0.1084.52, and Safari 5.1.4 when I designed the Risky Rocks site.

At some point in the future I think the CSS Zoom feature will be mature enough to accomplish this more easily, but until then I have used a combination of media queries and CSS transform and transform-origin to identify various screen resolutions and scale the Risky Rocks site to the maximum size which still eliminates horizontal scrolling. For those experts who may be suddenly worried about the visually impaired who might be using an 800 x 600 pixel resolution to increase text sizes, all newer browsers which have the ability to utilize this feature also have the standard “View / Zoom” settings that will allow the site to be viewed at most any size specified by the user.

As for the users out there who choose not to update their browsers to the latest verions… Well, they will continue to experience the horizontal scroll as always. The following CSS3 commands can be used to scale a website both up and down in size in all of the newer browsers:

-ms-transform: scale(.75); /* IE9 + */
-ms-transform-origin:0 0 0;
-webkit-transform: scale(.75); /* Chrome and Safari */
-webkit-transform-origin:0 0 0;
-moz-transform: scale(.75); /* Firefox */
-moz-transform-origin:0 0 0;
-o-transform: scale(.75); /* Opera */
-o-transform-origin:0 0 0;

I originally thought that the CSS3 Zoom command would accomplish this task just fine. However, IE9 did not seem to support the command without the ms-zoom prefix although other browsers did. Using transform gives you access to the additional transform-origin command and arguments such as translate(x , y) which allow for greater flexibility in positioning your site’s content. However, browser specific Zoom commands might also suit your needs for a simple reduction in the size of your website.

I used the following media queries (see below) within my css to target numerous screen resolutions including both iPhone and iPad as well. The order of the these media queries is critical. Cascading style sheets execute in a sequential order. In the case where multiple media queries match a given device, the last one always wins. In the following set up, I have intentionally placed the largest resolutions first to ensure that the smallest qualifying media query always wins. This approach seems to work nicely on the Risky Rocks site displaying with no horizontal scroll bars at all tested resolutions. This approach targets smaller screen resolutions and then makes adjustments accordingly.

Another, possibly superior, approach might be to design your website at the smallest screen resolution you would like to support, excluding mobile devices. While I am mentioning mobile devices, I would be remiss not to mention that the following html works very nicely for scaling down sites on apple’s devices as well: <meta name=”viewport” content=”width=device-width; initial-scale=.8;”/>… Once you have a site designed optimally at a resolution of say 800 x 600, then you could use the following media queries (in a different order perhaps) to scale sites up in size instead of scaling them down. The benefits of this alternative approach would be that even older browsers which do not support the new CSS3 commands would never display a horizontal scrollbar. However, larger screen resolutions using older browsers would display your website using only half of the available screen space. Hopefully though, devices with larger screen resolutions would be more likely to use the latest browsers. In this case, the CSS3 commands would work, and then the website could be scaled up in size accordingly. I have not tested this alternative approach. If anyone does, please comment and let us know how it turned out!

Media Query Examples Below:

The examples below target various screen resolutions, and in some cases they also target multiple screen resolutions at the same time. For instance, the iPhone / iPad media queries at the bottom use a single style for both devices based on orientation (portrait vs. landscape).

/* Lower Screen Resolution Adjustments */
@media only screen and (max-width: 1440px) and (max-height: 900px)
{