2 min read

Responsive Web Design: What It Is and Why We Use It


Responsive web design.One of the most important components to the CommonPlaces website is the use of responsive design. In this article, we will take a look at what responsive web design is and why it is essential to modern web design.

What is responsive web design?

Responsive web design is a style of web development where both the layout and the content responds to the device on which it is being rendered and the size of the screen it is presented on. If you're viewing this article on a desktop browser, for example, try making your browser window smaller. The content column will shrink and the placement of the text will adjust. On our homepage, you'll see the image sizes adjust and the layout shrink from three columns, to two columns, to a singular column of content.

Why is responsive design important?

Responsive web design is not only about adjustable screens and automatically resizable images, but rather about a whole new approach to web design. Given the rapid adoption of tablets and smartphones, web designers and developers want to eliminate the need for a different design and development phase for each new device. The solution is to build one site that has the ability to adapt to all devices.

We asked our Senior Web Designer and Developer Lemu Santos why responsive web design was important to CommonPlaces ' new website. Here is his insight:

    • It improves usability and readability on mobile devices. More and more people are using a mobile device to browse the web. Some sources say that by 2015 most people will access internet from their mobile device. (see bit.ly/14SwlwC)
    • The content providers don't need to feed two different sites because the mobile and desktop are the same.
    • It's recommended by Google in order to improve SEO. (see bit.ly/ZwUbNQ)

4 Tips To Keep in Mind When Using Responsive Design

If you are thinking of building a website using responsive web design, here are a few tips our developers think you should keep in mind:

1. Try to keep everything in a few standard layouts. 

The more sections of the site that have a completely custom look and feel, the more difficult it will be to fit them into a responsive design.

2. Make your layout flexible.

Flexible grids use columns to organize content, and relative instead of fixed width to adapt to viewport size. Fluid layout is the best way to be ready for any kind of screen size and/or orientation.

3. Avoid large amounts of tabular data.

It is difficult to make tables look good at small resolutions.

New call-to-action

4. begin with a starter framework.

If this is your first responsive design, you should download something like Twitter Bootstrap (http://twitter.github.io/bootstrap/) and get a feel for how they organize their code and the techniques they use to keep things looking good at all device widths. ; If you are creating a Drupal site then check out Omega (http://drupal.org/project/omega)

By utilizing the key pieces of responsive web design CommonPlaces developed our wonderful new website. We can do the same for you! Get in touch.


Related Posts

1 min read

The Power of Choice: Why the Web Font Revolution Matters

For the majority of the Web's history, Web designers were limited to "Web safe fonts," which was a short list of vanilla fonts such as Arial, Times New Roman, and Verdana. These were the fonts that...
4 min read

What Makes A Great Website? 10 Website Trends

  Your website is the first digital impression from your company and you want to make sure it’s a great one. It should reflect everything you want potential customers to know and remember about your...
5 min read

Why Are Core Web Vitals So Important?

What are the Core Web Vitals that Google is measuring? Core Web Vitals are a set of three main metrics that Google factors as important in your webpage’s overall user experience. These Core Web...
2 min read

Why is My Website Traffic Down?

You spent the time to plan and design your website. You monitor interactions, pay for ads, prioritize customer experience, but your website traffic is still down. Nothing is more frustrating! You may...