Responsive Web Design: Why and How

November 8, 2013
admin

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.

Google trend of using responsive web design

The use of responsive web design raised 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.

Use of responsive web design in multiple screens

Use of responsive web design in multiple screens

Techniques

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.

Internet Explorer 8 or older version doesn’t support media query. One can use media-queries.js or respond.js to add media query support in IE.

Presentation on Responsive Web Design Tools & Technique

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!

Advantages

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.

6. SEO

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.

Disadvantages

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.

Examples

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.

Nascenia, Casino Verdiener, Casino Online Bonus, Bundesliga Spielplan, Bingo Byen, Triple Chance.

8 Comments. Leave new

[…] See more here: Responsive Web Design – Nascenia IT […]

Reply

Google prefers responsive design for SEO mainly because you’re seeing the same page across the board on all devices. You don’t run into the issue of duplicate content.

Reply

Nice article but I think it is better to look a bit over SEO question the webdesign does not matter so much.

Reply

[…] 1. Responsive web design: Why and How […]

Reply

A person who found a such website as easy and presentable one will always mark in her mind. Some of them would try to duplicate such way of design. Yes, there are advantages and disadvantages but yet it is still helpful.

Reply

[…] Responsive Web Design: Why and How […]

Reply

Very inspiring article for us Thanks for the great article. …. It’s definitely a good idea for me and my friends to learn
the things that’ll expand their skill set
Your ideas and presentation is very effactive and useful for all. I am loving all of the in turn you are sharing with each one!…

Being a user i really like your visible information on this page

Reply

Very inspiring and informative article! A person who found a such website as easy and presentable one will always mark in their mind. Some of them would try to duplicate such way of design. Yes, there are advantages and disadvantages but yet it is still helpful. Thanks for these!

Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.