FrameWorks – Flexible Design for a Mobile World

A good strategy in today’s web space is to make sure your sites are accessible on as many devices as possible, with the least amount of effort and cost effectively developed. This is critical to meeting your company’s business goals … and frameworks are a great tool for implementing this strategy.

In essence: Frameworks are pre-built, intelligent CSS implementations created with flexible sizes in mind. Making your content accessible across various device resolutions quickly and easily. One design can be created that flexes to the platform, be it desktop, tablet or smartphone.

FrameWork Components

CSS and HTML are the key components in a framework. So any particular framework is a pre-built and pre-defined collection of CSS files that can be used in your website creations.

The Grid pattern

Frameworks are an excellent design aid and can quickly help apply a fuild design. The flexibe advantage comes from the way the framework is created … the use of a grid pattern(think of line graph paper). Which helps the design maintain it’s proportions as it scales. Conceptually this is simply taking a graphical display and overlaying it with an evenly spaced matrix of dots (i.e. pixels) … creating a grid.

The 960 Grid

The most common type of framework is built on the 960 grid pattern. Why? It has to do with matching the most common browser display, 1024×768. 960 is the nearest common size, easily divisible by many common resolutions.

All modern stand alone monitors support at least 1024 x 768 pixel resolution and 960 is the nearest number that is easily divisible by many different variations. Try it for yourself. Get a calculator and try dividing the following common sizes into 960: 480, 320, 240, 192, 160, 120. You’ll see that they all produce whole number results. That means size changes will be in whole amounts, no stragglers.

This feature makes 960 a great base choice for grid systems that can handle desktop layouts and then cleanly scale down as needed.

Exploring the 960 Grid

The 960 grid system consists of a main container which as you can guess is always 960 pixels in width. The main container is then divided into multiple columns of equal width. There are two commonly seen variations on this theme … 12 and 16 column grids. But depending on the need, 10 or 20 column grid layouts are also feasible.

Adding Responsiveness

To know when to apply the various sizes, we need to apply a CSS feature called “media query”. Here is a quick code example:

@media only screen and (max-width: 960px) and (min-width: 640px) {

put your classes and IDs here …

}

This coding applies the different sizes depending on the broadcast from the device to the browser.

Putting it all together

Now that you understand the concept, putting it to work involves using the created CSS that mirrors the grid(with the media queries), and applying it to your design. I almost forgot an important feature of frameworks … clearing all styles (setting the base style to zero, so to speak). This critical feature ensures that your styles, and only your styles are the driving force.

Putting the Grid to Work

Luckily there are many smart people out there who have created excellent frameworks. Below you’ll find links to get you started.

On Your Own – Learning more about the Grid System:

• The 960 Grid system : Great site for the original, including printable sketch sheets and design layouts

Other Grid Patterns

• Mobile Boilerplate: Focusing on the mobile platform? Then you’ll like this site!
• Tiny Fluid Grid: A fun site that is easy to use to build a custom grid
• Variable Grid System: Looking to create a framework for sizes larger than 960? You’ll find this site very useful!

Media Queries

Are you new to media queries? If so, you’ll find this article a great start:

• Introduction to CSS Media Queries – HTML Goodies

Testing Support (help in testing your designs on multiple platforms)

• ProtoFluid: A useful tool to test across many different mobile configurations