What is Responsive Design and Why Does My Site need it?

What is Responsive Design and Why Does My Site need it?

" A designer knows he has achieved perfection not when there is nothing left to add, but when there is nothing left to take away.” (Antoine de Saint-Exupery)

For all the website holders out there, many of you have heard the term Responsive web design but not really everyone has an idea of what it is. In 2013, Mashery declared the year as a Year of Responsive Web Design.

 

WHAT IS RESPONSIVE DESIGN?

Responsive design mainly means that the elements on the page are configured in such a way that if the page will be resized the entire layout of the page would be modified to better accommodate the content according to the screen size on which it is viewed. No matter what the screen size is the website will always be adjusted to suit the device’s display panel.

In slightly technical terms, responsive web design is mainly client-side rendering of the website. In this case, the website holds the same URL for all devices and the website then adjusts itself according to the screen size it is catering. The content is downloaded in whole and is then rearranged to better suit the screen size.

 

Examples

There are many examples out there, one of the most common responsive design patterns is the three column layout. The original site will be presented in a three page layout. Once you zoom in, the layout will get narrowed down to two columns, if you zoom in further, the layout will squeeze down to one column. This way the website ensures that it remains easy to use, whether it is being read on a large desktop screen or a small mobile screen.

 

PRINCIPLES OF RESPONSIVE DESIGN

Many people wonder about the basic fundamentals behind a responsive web design. It should be reminded that it isn’t rocket science to execute a responsive web design. There are three basics behind a responsive web design:

Fluid Grids: The different elements on a webpage are laid out in a grid. The size is usually based on relative units like percentages, instead of absolute units like number of pixels.

Flexible Images:

The Images are also sized relatively because that prevents the images from overlapping with other parts of the grid on a different screen size.

 

Media Queries: This is just a way of saying that your site can detect the screen size of the device that it’s being displayed on. Once the site evaluates the screen size, it automatically adjusts and scales (down or up) the layout and size accordingly.

Many people wonder whether responsive design is the next big thing or just a fad. We’ll share some of the research results that were conducted by independent research firms. According to Pew Internet, 63% of adult mobile phone owners, use their mobile phones to conduct internet browsing and satisfy their internet needs. Whereas 34% of the mobile phone owners who access internet from their mobile prefer to do internet browsing through their phones only without resorting to a desktop or a computer for internetaccess. Another research indicates that in the future more people will utilize their mobile phones rather than a desktop or a computer for internet access.

“A shoe is not only a design, but it's a part of your body language, the way you walk. The way you're going to move is quite dictated by your shoes.” (Christian Louboutin)

Contact us for more information and blogging tips.