More and more people are using mobile phones and tablets for everyday web browsing without ever touching their desktop PC. If it hasn’t already happened, it won’t be long before mobile phones and tablets will be in use in greater numbers than desktops and laptops, in fact the mobile world will very likely replace the personal computer and the average user will no longer have computer besides the smartphone in the palm of their hands. That shift has completely changed the way we design and build websites. It seems that each time a new device is released we are stuck with a new screen resolution and our websites are broken. It is impractical to design a new website for the hundreds of different screen resolutions that are on the market. Go ahead and go to your website and resize the screen, what happened?

The web was never meant to be “fixed width”.

Responsive design does not refer to increasing website conversion as some people think, it refers to how well the website responds at various screen widths; and believe it or not, responsive design is as old as the web. If you ever come across an old website from the early 90′s resize the browser window, you will find that the content is flexible and readjusts to the browser window. Now, I am not saying that the media queries and CSS techniques that responsive design employs were around in the early 90′s, just that the web was never meant to have a fixed width. If you are building websites and you are not using responsive design, you are behind the times.

So, how do you make a responsive website? This post is not meant as a tutorial on how to implement a responsive design but I will go over some if the main points to know.

First: The Fluid Grid

The first key to building responsive websites is fluid grids. A fluid grid is built on proportions and as you resize the browser the various elements will resize in proportions one to another. There are many great grids available to download such as twitter bootstrap, a simple google search can reveal many different grids you could use, or create your own. Now this technique can only get you so far, throw a fluid grid design on a 320px wide iPhone and your 3 column layout is broken. We need to look to CSS3 for the answer with media queries.

Second: CSS Media Queries

A media query is a piece of CSS that allows you to see what kind of browser te user is coming from whether it be a mobile browser, tablet browser, or desktop browser. You set rules for various sizes and the website will readjust for the sizes you set called “breakpoints”. While there are hundreds of different screen resolutions you could design for, chances are you don’t have the time regardless of whether or not you freelance or work or an agency. The following are some suggested screen resolutions to design for:

• 320
• 480
• 600
• 768
• 900
• 1200

One last note, when you begin designing start with the smallest resolution and work your way up. There are a number of reasons for this, but the main reason is that it helps you to organize your content. Ever hear the phrase “content is king”? My passion is design, but even the most beautiful design will not make up for a lack of content. Once the euphoria if the design wears off the content is what is left, if it doesn’t speak to the website viewer he/she will leave. Content comes first, when you design at the smallest resolution you have very little space to work with and it will force you to think about your content and what is truly important, the most important content will be at the top.

Is your website responsive? Have you started using this technique? Comment below with how it worked out for you.