In a nutshell, Responsive Web Design (RWD) intelligently adapts the size and layout of your website to provide the user with the optimal viewing experience for the device they are using. Therefore you can easily read and navigate around a website with minimal resizing, scrolling and panning. With RWD there’s no longer a need to have two separate websites for desktops and mobiles. This saves a lot of development time which will inevitably save you money.
Why you need a Responsive website
According to a report published by IDATE titled “World Internet Usages & Markets”, globally the number of mobile internet users should reach 2.1 billion in 2013 overtaking the number of users of fixed Internet (1.9 billion). With these figures in mind it is obvious why people are beginning to expect a responsive experience and why you need to provide one. Doing so will give you an advantage over your competitors and appreciation from your customers.
How does it work?
Someone who doesn’t have any or much experience in web design may find it a bit difficult to grasp exactly how RWD works but the following paragraphs should give a basic understanding on the subject.
The website is constructed using fluid, proportion-based grids, flexible images and CSS3 media queries. When designing dynamic websites the usual unit of measurement is pixels, but when designing responsive sites we do something a bit different. For typography size we use (em) and for content blocks we use percentages (%). Using these measurements allows everything to automatically scale in proportion to the screen size of the device. To make the images flexible we just simply set the max-width to 100%. This makes the image fill the surrounding container at whatever size it is scaled to.
That is the first step to Responsive web design and the second is creating the media queries which are the real power behind responsive design. The media queries basically set different rules for different devices to follow. If you set rules for devices that have a maximum screen width of 480 pixels (mobile) then only those devices will follow that style sheet resulting in an ideal layout. The most common rules put in place are for desktop, tablet and mobile which fundamentally covers all devices.
If you’d like some more information or help designing your Responsive website please email us or call on 01992 582 824.
