March 5, 2014 / IST / Web Development.

The first question you need to ask is the importance of having an efficiently/Responsive web design that represents your company’s profile. A study by Compuware has found that almost 57% of users will never recommend a company with a bad website. Considering that more and more people are using mobiles to access internet, companies that do not have a good mobile website will suffer. The same study also found 40% of the people will prefer to use a competitor’s website rather than using a poorly designed one.

A Brief Evolution of Web Design

Website design started in the early 1990’s. At the beginning all the websites were text based. The text was written in a single column using HTML. It was during these times, in 1994, that the World Wide Web consortium was formed. In the mid-1990’s table based website designing allowed for a website to contain multiple columns. The content could now be organized in a better manner.

Several new design improvements were made. Images could be added to the website. Flash was introduced in 1996. The late 1990’s saw an increased use of flash to make websites more attractive. Animation and navigational features based on flash started to appear in websites. It was during this time that PHP3 was released, in 1998.

The year of 2000 could also be called the year of CSS. It took website designing by storm. Now website content and website design could be separated from each other.  The early to late 2000’s saw the rise of JavaScript. JavaScript now replaced tables for designing of the layout. The mid 2000’s saw the introduction of the semantic web.

Semantic web is basically a web design movement whose aim is to increase the capacity of machines in understanding websites to human levels. The XML language is a step in the right direction towards realizing this goal.

Web 2.0 was introduced in the late 2000’s. Developers now made use of JavaScript, XML and Ajax to build more interactive websites. HTML5 was also introduced during this time.

responsive web design

Mobile Web

Mobile web is another aspect of web designing that has been growing very rapidly. So far, we’ve had to mostly make separate websites for each and every device type there is. Mobile phone screens are smaller and have lower resolution than computer screens.

The same website will not work on both in an optimum and presentable manner. That is why separate WAP sites are made for mobile phone screens. However, with the increasing number of devices with web access, and all with varying physical dimensions and specifications, it is becoming increasingly difficult to make multiple websites to serve all the customers.

Analysts at Morgan Stanley claim that the world is currently going through fifth technological revolution since the last 50 years. This one is based on the evolution of mobile internet. They also claim that the number of people using mobile devices to access internet will cross those using computers by 2015. Get these free useful cheatsheets in web design.

Need for Responsive Web Design

Besides mobile phones and computers, these days internet can also be accessed via e-readers, netbooks, tablets, televisions and gaming consoles. It is just not feasible to make websites for each and every one of them. Even now, according to Mongoose Metrics, only around 9% of the total numbers of required mobile websites are up and running.

Won’t it be simpler to have just a single website that could work everywhere? Responsive web design technology does exactly this.

What is Responsive Web Design?

A website that is designed to established standards laid down for responsive web designing will be able to adopt its design and layout to fit the specifications of the device calling it. It does this by dynamically adopting to different screen sizes and by reformatting the positioning and look of the constituent elements of the website.

So what may appear to be a website with large images spread through three columns on a computer screen, will appear to have smaller images in a single column on a mobile screen. All of this does not need multiple codes written for each type of device. A single set of code which accepts various specification parameters from the device will do the job. CSS3 is used to give the generated website the desired look and feel.

The Core Elements

Responsive web design is built around three main elements. They are:

  • Fluid grids,
  • Fluid images, and
  • Media Queries

Fluid Grids

The general practice in web design is to employ fixed width layouts. It means that the page and its constituent elements have a fixed size and width and positioned around the center. Liquid layouts offer us a greater advantage with the increasing number of devices with web access. A liquid layout expands with the page.

A better version of the same is the fluid grid layout. A fixed width layout is based on rigid pixel values while the liquid layout is concerned with percentage values. A fluid grid layout is based on proportions. When a particular layout is either squeezed or stretched then apart from altering their sizes, all the constituent elements of the page will alter their widths with respect to each other.

Fluid Images

No web page is complete without some images. However, introducing fixed width photos into a flexible grid layout may result in the photo overflowing from the container and spoiling the entire page if the container is not big enough. An image is made into a fluid image by putting some constraints on it, such as constraints prohibiting it from exceeding the size of its container.

Media Queries

Fluid grid layouts are very important for responsive web development, but there are other issues to consider. If the width of the device becomes too narrow, like in a small mobile phone, the website design can fall apart. This is where media queries come in. These media queries are based in CSS3 and allow us to not only target the particular device classes but physical characteristics of the device which is rendering the web site.

Benefits of using Responsive Web Design

You may or may not be familiar with the concept of responsive web design. But one thing is for certain – your website needs it to serve the growing number of customers who use devices other than the computer to access the internet.

Responsive web design allows for optimal viewing of your website across all devices. Here are the top advantages to be gained out of using responsive web design.

  • With responsive web design you’ll be making your website accessible to people 24/7. A lot of your customers will constantly be on the move. In fact, this is one reason why people are turning towards mobile devices to access the web. If your website is not accessible to this sizable chunk of customers or potential customers, then your business has a lot to lose and your competitors have a lot to gain. Don’t let that happen to your business.
  • Websites meant for mobile devices are usually very Spartan and do not have advanced navigational features, such as in websites for computers. Your customers do not want to waste time in looking for features in a poorly designed mobile website. They’d rather go over to competitor’s website. Responsive web design helps you to prevent such a scenario by making viewing a site from a mobile device almost as efficient a process as viewing the same site from a computer.
  • Search Engine Optimization (SEO) is another great reason to go for responsive web design. In any website, one needs links to help the visitors get to the right part of the website. However, if separate websites were made for each kind of device out there – one for computers and laptops, another for tablets, another for mobiles etc, we’d have a lot of links on our hands. Each such link has to be redirected via the server and will add unnecessary load on the server. Additionally, each such link also needs to be specific to the user agent in order to get the visitors to the right part of the website. This will adversely affect the website speed and increase maintenance hassles. Responsive web design helps us to eliminate this issue by having just one website and just one set of links to handle.

Pros of Responsive Web Design:

1. Less Maintenance:

The responsive web design needs only one set of content. Due to that; you no need to create a separate website for every kind of devices like smartphones, iphones, blackberry phones, tablets etc.

In responsive web design the web designers using the CSS (Cascading Style Sheet) code. This code helps to swap out from the current view and can change into the viewers screen dimensions.

Once loaded, the CSS re-size the browser window (it drag the corners so it becomes either smaller or larger) and you will notice the content on the screen adjusts itself accordingly.

Since, the responsive web design has all the code for all the sites in one central area, adjustments can be done easily for any devices. It saves the money, time, manpower etc. It is one of the greatest advantage of Responsive web design.

Advantages of responsive web design Advantages And Disadvantages Of Responsive Web Design

2. Gives better user experience:

One of the main advantage of responsive web design is; it maximize the user experience on different devices. The users find it much easier to go and use the websites they are customized for the device they are using.

3. Social Sharing:

In case, if someone on a desktop computer share the links on the social networking site but the other person who browse the website cannot open that in mobile device; normally.

But in the responsive web design you never face this problem; you can easily open the link in your mobile and can share the same on the social networking sites.

4. New devices:

Since, responsive web design can easily adapt themselves according to the screen size, you need not to worry about creating a whole new site; every time a new screen sized device is introduced in the market by the manufacturer.

5. Gives good SEO:

With a responsive web design you will create only one URL for all kind of devices. 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.

6. Web tracking/analytics:

As I have already mentioned, the responsive web design uses a single URL. Due to that, instead of analyzing the data from each different websites, a single URL makes the tracking of website very easier.

7. Google endorsed the Responsive Web Design:

Recently, Google encourages the responsive web design for their mobile sites. By using responsive web design; it is easy for the Google to rank the websites in it’s search results.

Cons of Responsive Web Design:

1. Loading time:

Due to the unnecessary HTML/CSS code downloads in the mobile device the loading time is higher on the mobile. It is one of the major drawback of responsive web design.

Disadvantages to Responsive Web Designing Advantages And Disadvantages Of Responsive Web Design

2. Development of responsive design:

The initial development of responsive web design will takes longer time. Generally, it is much easier to create RWD from scratch than to convert an existing site.

3. Implementation problem:

The implementation of responsive web design takes a longer time than the expected time. Since it is a new concept; still some unfamiliar problems are there that we cannot fix.

4. Limited Resources:

As it is a new concept only limited resources are available. Due to that you cannot get proper solutions for unknown problems.

5. Design:

It is essential to design several layouts via wire frames with the graphic designer. Atleast, you will need minimum of two layouts, full site and smartphones.