There are countless device on the web today. Be it a simple legacy mobile phones or the latest smart phones, tablet or desktops, these devices are utilising web browsers to view information on the internet. Each device has its own screen size and rendering your website on each device can be challenging. This is where Responsive Web Design comes to the rescue. You can now display all the information and content correctly without any formatting, scrolling or loading issues.
What is a Responsive Website Design?
The Responsive Website Design (RWD) was first introduced in an article by Ethan Marcotte where he proposed different techniques to cater for the changing screen sizes and resolutions of computers and hand held devices. Responsive web design takes into account certain key elements while designing a website which enable it to adjust the content according to the size of the screen it is being viewed on. This allows the user to easily view and navigate the website without needless scrolling or resizing.
Need for a Responsive Website
Earlier, website creators would usually make two versions of their websites: one for the desktop and the other for a mobile. The problem with this approach was that the mobile version would just work for one or a few mobiles while fail to work properly on others. Similarly, with new tablets and netbooks coming in the market, it posed a dilemma to website creators since they could not make separate versions of their website for each and every device. Thus, responsive web design allowed them to design the website using some key elements and concepts so that the website would adjust automatically to any device it was being viewed on. Thus, they would just have to design one website which will be able to work on almost all devices.
Key Elements of a Responsive Web Design
The key elements of a responsive web design are:
- Media Queries
This is the key element of the responsive web design that uses CSS3 media queries to gather the information about the device on which the website is being viewed. Based on the data, which is usually size and resolution of the device, the media queries allow you to apply different layouts of the main content.
- Fluid/Flexible Grids
The need for a fluid grid emerged because earlier layouts would be designed with fixed width in terms of pixels. However, this approach is not viable for changing screen sizes. Thus, fluid grid concept was developed which uses proportions and percentages in contrast to fixed pixels. The proportion that a certain element will take on a screen is calculated by dividing it with the context width in which it will appear. This allows the container widths to adjust automatically according to the screen size.
- Flexible Images
This key element of a responsive website design allows the images to be dynamically resized according to the size of user’s screen or display. Alternatively, images can also be cropped at run time by utilising the CSS overflow property.
Responsive Web Design Tools
There are some useful tools which can be used to implement RWD in a website. Some of them are as follows:
- Responsive Web Design Sketch Sheets
- Responsive Design Sketchbook
- Responsive Wireframes
- Multi-Device Layout Patterns
- Style Tiles
- Golden Grid System
- Responsive Images
- Adaptive Images
- Sencha.io Src (formerly Tinysrc)
Problems in Designing a Responsive Web Design and Solutions
|One of the main problems in RWD is converting non responsive websites to RWD. The design architecture is completely different in both cases which makes the process of conversion a bit difficult.||The solution could be either to reverse engineer by applying a top down approach and changing the already built design and layouts, or a better approach is to rebuild from bottom up.|
|When websites have large spreadsheets with complex data and a large number of columns, it becomes difficult to squeeze everything in a small width screen dynamically.||The solution to this problem is to take the table out of its container when the width becomes too small or to hide some of the less relevant columns of the data.|
|The problem of properly displaying images in a responsive design is also there since there are different sized screens, resolutions, and high pixel density devices.||The problem of responsive images can be solved by using SVG graphics, CSS sprites, icon fonts and scripts.|
|Another problem with RWD is increased testing time and costs since the website has to be properly tested on different kinds of devices and resolutions.||The solution to this problem to some extent is to use responsive design testing tools which will reduce time as well as cost.|
|Another problem associated with RWD is to map the new design to older browsers which do not support CSS media files and will not display the content properly.||The solution is to use polyfillers in your design layout so that they are interpreted properly by the older version of browsers.|
Benefits of Having a Responsive Web Design
There are several benefits of having a Responsive Web Design. Some of them are mentioned below:
- One of the main benefits of having a RWD is that your website will be automatically adjusted according to the screen size of your user’s device. This means users from all kinds of devices e.g from laptops to smart phones will be able to visit your website. This will increase traffic to your website.
- RWD enables you to have one website for all devices as compared to the alternate of having multiple websites to cater for different devices. It, thus, involves designing, managing and maintenance to be done for only one website.
- By using RWD, your users will be able to get the same kind of experience when visiting your website whether they do it on a computer, tablet or a mobile phone.
- RWD enables you to put complete content of the website even for mobile users since you do not have to cut back on the content when you have to display on small screen.
- You would be able to do better marketing since you could focus solely on one website.
- With the advancement in the field of technology, people are becoming used to with mobile phones and smart phones. You can easily get such visitors if your competitors do not have a RWD.
- There is no need to place canonical tags on different pages to prevent duplicate content penalties as it makes different websites a single website.