Responsive Web Design: Why and How
Contributor: Mehreen Chowdhury, Marketing Executive, Nascenia
Everyone likes to use Responsive Web Design (RWD) for developing their websites. Actually it’s becoming popular in recent times.
Google Trend (see screenshot below) shows that, search for the word ‘responsive design’ jumped up in recent years.
There were days when people used to design different layouts to suit different screen sizes or devices like smartphones, tablets, laptops, widescreen desktops etc. Designers had to face some difficulty of creating separate web page for mobile version. Now, with the help of advanced technique it is possible to maintain your site on different devices by using only one layout.
What is it?
Responsive web design is a web design approach to make it user friendly by re-sizing the sites for different screens. Content (text, image, menu bar etc.) gets re-sized depending on size of the screens. It becomes easy for reading and navigating for users.
Actually we don’t need to use any new technology for creating responsive design. Here, our usual HTML and CSS are used in a different way to make the design suit fit for different devices. Besides that responsive uses the CSS media query. Now what is CSS media query? Well, it helps to adapt the web page on different devices based on orientation, screen sizes, color capability, resolution etc. Media query consists of some rules and features. Then there is a Responsive Meta Element which helps to identify the user’s device.
We can use standard libraries like Twitter Bootstrap or Foundation. Responsive web design can be created quickly based on these frameworks. These are known as CSS framework. We can get code from there easily and use it for building our application. So we don’t need to put extra effort on writing code and web development can be done faster. These codes are written in a way that it makes the design automatically responsive. This is another benefit of using these frameworks.
During one of our brown-bag sessions, our Software Engineer Nazrul discussed about Responsive web design. You can have a look at it from the slide!
Let’s see how responsive design can benefit us!
1. One CSS file
In the older days, people have to write similar code in separate external CSS files for each size of browser or device such as mobile.css, tab.css file to provide support for different devices. It was pretty time consuming. Now it has become simple and easy by keeping responsive codes in a single file and all the basic codes in other CSS file. So there is no need to load external files for multiple screens. It helps designers to work faster than before.
2. Easy viewing
If you want to see a web page on your desktop or from the screen of your Android phone, the website’s layout re-fit to the new window’s size in real time.
3. Easy to maintain
It’s easy to maintain because the responsive web design has all the code for all the sites in one central area. Therefore, you can do adjustments easily for any devices. It’s one of the greatest advantages of responsive web design.
4. Easy to share link
If someone on a desktop computer share the links on the social networking site, another one cannot open that link from mobile device. Responsive web design solved this problem. Now you can easily open the link. Also, you can share the same link on the social networking sites from your mobile device.
5. No need of creating whole new site
Responsive web design adapts itself according to the screen size, so you need not to worry about creating a whole new site every time when a new screen sized device is introduced in the market by the manufacturer.
You will create only one URL for all kind of devices with a responsive web design. Due to that your Search engine optimization will not get diluted with different URLs. So, you can easily improve the SEO ranking for your website.
7. Web tracking
Because of using one URL in responsive web design, you do not need to analyze the data from each different websites. A single URL makes the tracking of website very easier.
Though it is a powerful strategy, it has some disadvantages too!
1. Sometime it becomes hard to explain the process of web design to clients.
2. It takes higher time to load on the mobile if it cannot be handled intelligently.
3. The initial development of responsive web design takes long time.
4. Sometimes it is difficult to identify and put the exact width-size of screens in the media query for developers. It creates hassle for making a perfect responsive web design.
5. As it is a new trend limited resources are available. Thus it becomes difficult to get proper solutions for many unknown problems.
You can visit some sites below from different screens. You will be able to see how the screen size fits according to the width or resolution of the screen.