Responsive Web Design

- January 27, 2014

What it is

A web application developed based on the responsive web design concept will adopt the layout of the application based on the screen size and orientation. As the user switches from their laptop to iPad, the website should automatically switch to accommodate for resolution, image size and scripting abilities. In other words, the website should have the technology to automatically respond to the user’s preferences. This would eliminate the need for a different design and development phase for each new gadget on the market.

When designing a web in responsive manner same HTML content will be maintained, but it will be viewed in different layouts when user switches among different browser sizes. In that way website can server the users by changing the layout of the content so user can view it in more user friendly manner, without too many scrolling.

How the layout changes will be discussed under topic Design patterns

Pros

Increasing your reach to tablet and mobile audiences

Rather than alienating users on a mobile or tablet device by only offering a desktop solution, a responsive website is flexible and will adapt its layout based upon the size of a user’s screen. This will ensure that your website will always provide your user-base with the richest possible experience. So this will increase your mobile audience which leads to increase your sales.

Increase sales and conversion rates

Another benefit of responsive design is that the user has an improved site experience as there is no need for redirection, use of standardized Style Sheets (CSS) across devices and unified design approach will also create a consistent look and feel. Consistent user experience will have a positive impact on your conversion rates as people are familiar with navigation and site or system use across devices. Responsive design removes some of the barriers that having multiple sites can present.

I.e. in functionality, performance and consistent look and feel.

Consolidate your analytics and reporting

A single responsive site means that you no longer have to track user journeys, conversion paths, funnels and redirections between your sites. Site analytics tools like Google Analytics are now optimized to handle multiple devices and responsive reporting. All of your tracking and analytics will continue to function and be condensed into a single report, allowing for easier monitoring and analysis.

Increase your visibility in search engines

By creating one website that adjusts to multiple devices, responsive web design is a must to help optimize your website for search engines. This is because responsive design sites have one URL and the same HTML, regardless of device, which makes it easier and more efficient for Google to crawl, index, and organize content. Contrast this with a separate mobile site which has a different URL and different HTML than its desktop counterpart, requiring Google to crawl and index multiple versions of the same site.

Additionally, Google prefers responsive web design because content that lives on one website and one URL is much easier for users to share, interact with, and link to than content that lives on a separate mobile site.

Save time and cost on site management

A primary benefit of adopting a responsive design is that it takes less time than creating an additional stand-alone mobile site, which has been the traditional approach. Testing across a number of websites also increases your development, support and maintenance overhead. As styles are re-used and optimized by device standardized testing methodologies can also be used.

Stay Ahead of the Competition

Less than 5% of websites are currently optimized to take full advantage of the mobile web through responsive web design. Your business has the opportunity to gain a significant edge over the competition by becoming an early adopter.

Cons

High Design Time

When designing a single website for all the screen sizes it takes high design time and cost as there are too many things to consider as it must be cater all the user preferences in one HTML content. So this will take time & cost at initial stage even it reduces the cost of maintaining several websites and mobile applications.

Loose Mobile Focus

As this is designed to cater both desktop and mobile user the mobile focus of the site might get loose when compared with a separate mobile site or mobile application. Mobile users might not see the content they focus on when they visit the site using their mobile.

Loose advantages of mobile specific features

Mobile device has many features exclusive to itself like two cameras; front and back, touch and multi-touch, GPS, etc. A web built especially for a mobile device is able to utilize these and other features thus resulting in a very robust web site, something which is not quite possible using the responsive web design.

Design Patterns

When designing a website in responsive manner there are some patterns used to make the site responsive in user preferred manner.

Content Area

Normally is a desktop site there are 2-3 content areas. When it is responsive when the site is browsed in a small screen those must be reduced to one content area. Most common ways of doing it are

· Provide UI Elements to change main content area to additional content

· Animate content area

Ex:-

Navigation

When making the navigation it is important to give user easy access to navigate for his need. Also those navigation patterns should be patterns which users are already familiar with. Common patterns of navigation on responsive web are:-