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 respond to the device on which it is being rendered and the size of the screen it is presented. 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 mobile devices to browse the web. Some sources say that by 2015 most people will access the 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.
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.