What Screen Resolution Do You Design For? Using the Less Framework

By Michael Rohde

I belong to a design group on LinkedIN and a while back someone posted a question asking what size do you design your web sites? That discussion grew to hundreds of responses, each one of them saying something different. There was some consensus among the majority of designers who stated that they design their pages for 900 pixels wide. Others stated that their best practice is to use a fluid design while others still swear by the 960 grid system. Of course, there were those that simply stated to go with your client's preference and their audience.

Another approach, if you have an existing site with plenty of collected metrics, is to check your analytics software for your visitors screen resolutions. For one of my sites, the smallest, most-used screen resolution is 1024x768. That makes it an easy decision to comfortably design my site at least 900 px wide. But then I noticed another screen size nestled in at number 9 out of 10, and that was 320x480, which is undoubtedly smart phones.

What are you supposed to do now? Create one site intended for larger screens and a replica site designed for smart phones? No, you really don't have to, especially when Less Framework 3 is available.

The Less Framework

The Less Framework is really an amazing tool and the site is a perfect example of its resizing abilities. If you change the size of your browser window, you'll see the images resize to fit the screen, you'll even see the columns change to better accommodate the size of your window. So, what is it? Less Framework 3 is a, "a cross-device CSS grid system based on using inline media queries." Simply put, the framework recognizes the visitors screen resolution and sizes your web page accordingly.

This CSS3 styling option works on the majority of most browsers including all Android and iOS devices, except for, you guessed it: Microsoft's Internet Explorer (at least until IE9 is released). For visitors using IE, the 768 px layout is displayed.

The framework is based on four different layouts to accommodate the majority of screen resolutions:

3-column--For all iPhones, iPod Touches, and other 320 px mobile devices
5-column--For 480 px mobiles, narrow browsers, and landscape iPhones
8-column--For tablets at 768 px, netbooks, and old browsers
13-column--For laptops, desktops, and HDTVs at 1280 px and beyond

A 960 px layout is not included by default although the web designer, Joni Korpi, who created Less Framework 3 states that you can add a 984 px layout by using 11 columns and 42 px margins. In fact, he openly encourages web developers to, "take Less Framework apart and build their own tools out of it."

Here is some sample code to see what the CSS3 customization looks like:

/*    Less Framework 3
    by Joni Korpi
    http://lessframework.com    */
/*    Default 8-column layout
    60 px columns, 24 px gutters, 60 px margins, 768 px total
    ---------------------------------------------------------
    1 	2  	3  	4  	5  	6  	7  	8	 
    60px  144px  228px  312px  396px  480px  564px  648px    */
body {
    background: rgb(232,232,232);
    padding: 84px 60px 0;
    width: 648px;
    -webkit-tap-highlight-color: rgb(255,255,0);
}
::selection          {background: rgb(255,255,0);}
::-moz-selection     {background: rgb(255,255,0);}
img::selection    	 {background: transparent;}
img::-moz-selection {background: transparent;}
#example {
    height: 600px;
    background: rgb(60,97,158);
}

And here is the HTML5 portion of the code:

<!doctype html>
<html lang="en">
    <head>
   	 <meta charset="utf-8"/>
   	 <title></title>
      	 <!--[if lt IE 9]>
   		 <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
   	 <![endif]-->
      	 <link rel="stylesheet" media="all" href=""/>
   	 <meta name="viewport" content="width=device-width; initial-scale=1"/>
   	 <!-- Add "maximum-scale=1" to fix the Mobile Safari 
auto-zoom bug on orientation changes, but 
keep in mind that it will disable user-zooming completely. 
Bad for accessibility. -->
   	 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
    </head>
    <body>
   	 <div id="example"></div>
    </body>
</html>

For the complete CSS3 code, and to see the framework in action, visit the Less Framework 3 site.

Make a Comment

What Screen Resolution Do You Design For? Using the Less Framework

The Less Framework

Loading Comments...

Web Development Newsletter Signup

Related Articles