10 Basic Principles of Responsive Web Design

Responsive design is an approach to designing a websites in a way that it is accessible and functional no matter the screen size of the device that is used to access that website. Websites that are created using responsive design detect and smoothly adapt to variations in screen size and resolution. There are many benefits to this approach. It is more cost effective than attempting to develop multiple versions of the same website. It doesn't force the user to select the appropriate version of a website. It takes less storage. It also improves the conversion rate of your site. In order to create a website using responsive design, there are 10 principles that must be kept in mind.

1. Design With Mobile in Mind

There are many reasons that website design, responsive or otherwise, should focus on mobile. The first is sheer numbers. The use of mobile devices is increasing greatly and that trend will only continue. The second is functionality. To put it simply, mobile devices have much more than their desktop counterparts such as, GPS or touch screens. When designers concentrate on mobile, they can focus on exploiting these functions in order to create a richer user experience.

2. Replace Adaptive Grids with Fluid Grids

Non responsive web design uses adaptive grids to accommodate varying screen sizes. This is a pixel based grid where the resolution of a screen must be manually adapted (height and width) to the size of the screen. This is not practical any longer, because screen sizes vary so much that it is impossible to adapt to all of them. Fluid grids result in websites that adjust and resize seamlessly.

3. Images Must Also be Responsive

It is unhelpful to have a website that smoothly resizes itself based on the display screen if the images on that website are not responsive as well. One way to accomplish this is to use SVG technology.

4. Breakpoints Must be Used Judiciously

Breakpoints are set to allow the layout of a screen to change if certain conditions are met. One very common example of this is the use of columns. A website might be designed to display one column on a small screen, but display two or three columns on a wider screen. Readability of content should be the only influence behind the use of breakpoints.

5. Content is Still King

As with any other design methodology, the content that is being presented must be the priority. In other words, the best design decision on any web page should be based on which method results in content that is easiest to consume.

6. Media Queries can Help Designers Select the Right CSS

Different style sheets work better on different media. Using media queries, web designers can 'ask' the device what type of media it is (television, handheld, touchscreen, etc.), and then select the best style sheet for that device.

7. Keep User Experience in Mind

Next to content, user experience should take top priority. Responsive web design isn't successful if the web content simply displays properly on any given screen size. It is successful when the user has the best experience they can have regardless of screen size.

8. Take Advantage of Responsive Design by Consolidating Analytics

Web designers who use responsive design can and should take advantage of the time and cost savings of consolidating analytics. Google Analytics for one, has been optimized to provide data on adaptive websites. This means only dealing with one report for all device types accessing a website.

9. Get the Powers That Be Onboard Using the Cost Effectiveness Argument

Once a learning curve has been dealt with and the growing pains work themselves out, responsive design saves money. This is almost always the most effective argument to present to management that tends to blanch when change is suggested.

10. Use Google Guidelines for Optimization

Since Google is the premier internet search engine, it only makes sense to follow their advice for creating responsive design websites that are search engine optimized. Their guidelines are extremely valuable to website designers.

Marie Mills is a journalist from San Francisco who resides at Miami. She has been into writing since her teens and growing in the rural area has evolved into the love of photography and design.