A Responsive Design – Why do you need it?
As more web-enabled devices are launched people are viewing the internet on a variety of different mobile devices with different screen sizes and screen resolution.
As a result responsive design is set to become more important as the range of connected devices increases.
New future-proofing technology for your web site
As smartphones, tablets and other mobile devices begin to catch up on traditional web platforms such as PCs and laptops there is increasing pressure to provide content suited to each platform.
Responsive design isn’t a passing phase as it can be used as future-proofing for your web site. It is fast becoming the standard way of building web sites.
Not only does it ensure sites are accessible on today’s mobile devices but will also help them work on next year’s devices too!
One approach for creating a website for all screen sizes & formats
Websites constructed using the principles of responsive design are structured to be flexible & scalable. Using css media queries, content can be formatted, presented and easily read regardless of the browser or device being used.
When the screen size or format is changed or reduced below a certain width the responsive design layout changes and the key elements re-arranged to best fit the new width.
Responsive design involves the use of a scalable, fluid & flexible grid design, css media queries and resizable images and elements. Responsive web designs use
to help build a website that responds to varying screen resolutions enabling website pages to be adjusted based on the width of the browser viewing area.
A responsive web design creates one layout using a flexible grid design (often referred to as a liquid or fluid grid).
The website is designed with a flexible grid with all the elements defined as percentages of the total screen width. By using css media queries, designers can create multiple layouts to display the same content.
Fluid/flexible grid
Each element of the grid can scale proportionally, maintaining the structure of the layout until a specified breakpoint is reached at which point specific css media queries load alternative css rules to reformat the layout.
CSS stylesheets
CSS style sheets can be structured to format content one way on a big screen and can automatically reformat it to fit smaller screen sizes including simple or as sophisticated features as necessary to properly display the information.
Media Queries
Media queries are essentially if statements that identify the size & screen resolution of the device and load style and formatting instructions from linked or separate stylesheets, or embedded within any stylesheet, targeting the specific device.
The same content – many formats!
Rather than designing multiple sites for different devices this approach uses a single design but specifies how it should be displayed on a variety of devices.
As an example a mobile device, with its limited screen resolution & size, demands simpler navigation with the important content easily found and quickly made available.
In addition, when the site is based on a responsive design the flow of content is more appropriate for a smaller screen and will require less pinch and zoom required with sites based on a fixed layout design.
But, why do you need a responsive web design?
Apart from making your content more easily accessible on the growing number of mobile and smaller format devices there is another that, from an SEO perspective, is also important!
Google have officially stated that they would prefer you to use responsive designs for your website.
On their Google Webmaster Central Blog, acknowledging that not all sites might be able to fully implement a responsive design, they say:-
Using responsive web design has multiple advantages, including:
- It keeps your desktop and mobile content on a single URL, which is easier for your users to interact with, share, and link to and for Google’s algorithms to assign the indexing properties to your content.
- Google can discover your content more efficiently as we wouldn’t need to crawl a page with the different Googlebot user agents to retrieve and index all the content.
Responsive web design, however, is not the answer or solution for every possible web development project.
But, where it can be relatively easily implemented, using a flexible grid, css media queries and cascading style sheets, it offers the opportunity to compete in the growing mobile marketplace and attract new visitors who might otherwise be lost!
It’s an important consideration particularly for smaller businesses and companies without major development budgets.
