Responsive Design Versus Mobile Sites – Why Responsive Design Wins?

 

Image xourtesy of Johny Does

Image courtesy of Johny Does

The advent of smartphones and tablets and their growing popularity as a device to browse websites has created fresh challenges for the developers. Whereas desktop monitors can be as wide as 2000 pixels mobile devices can be less than 400 pixels. The challenge doesn’t end here as tablets such as the Apple iPad have resolutions higher than even large desktop screens. There are many variations in pixel density, screen size and orientation completing things. In such a challenging environment how do you design websites that cater to users across all devices?

Mobile Websites
When mobile web browsing was in its infancy developers came out with the idea of creating a site dedicated to mobile devices. Thus we saw the advent of m.example.com or mobile.example.com etc. The aim was to reflect the same content as that of the desktop sites in a mobile friendly layout and design. Here the user would be offered the option to go to the mobile and desktop versions of the sites making it a pretty simple model to work with.  It offers the best of desktop and mobile browsing experience.

However this model has its own challenges – how do you detect the device the visitor uses? How do you maintain the same content on a small as well as a large screen? Creating two sites raises the issue of duplication that can hurt search engine results. The bigger challenge came when tablets and smartphones of different screen sizes and resolutions. Providing a compatible site for each and every device was next to impossible and would involve large cost. And this is where developers had to look for a more robust and scalable solution.

Responsive Design
The genesis of responsive design lies in most of the unanswered questions posed by the mobile site design. How do you build a single website and cater to all devices? How do you detect the user’s device and cater a compatible version of the website? All these answers lie in responsive design as a single website will offer great experience to the users irrespective of the devices that they use.

Let’s now first understand what responsive design is. In is a method of combining fluid layouts that shrink and grow as a browser is resized with media queries with flexible images that reach to a user’s environment and render a compatible version of the site. The media queries in this include CSS conditional statements that apply styles when certain conditions are met. These conditions basically relate to a user’s device and the browser such as the screen size, resolutions and orientation of the device. Each media query creates a breakpoint that guides the fluid layout towards new styles for that resolution. Here are some of the advantages of using responsive design for your site –

  • Responsive design is device independent and allows us to use one codebase across all devices. You will only need one stylesheet and HTML document to create a responsive layout.
  • Responsive design is future ready i.e. it can handle all devices that will come out with different resolutions and screen sizes.
  • It cuts down the development cost substantially as you will have to design only one site and not care about separate sites for tablets and smartphones.

You can clearly see there are many advantages associated with creating a responsive website instead of opting for a secondary mobile website. Though it calls for a completely new set of development method that might take time to grasp it is worth taking the extra effort. For a site that acts as your marketing tool responsive design is the way to go.

[author ]This post is shared by Mayank Kaushik, Business Manager from RiaEnjolie.com. RiaEnjolie offers high-impact small business Websites as well as eCommerce Websites to help grow your businesses. You may follow them on twitter @RiaEnjolie[/author]

Share on TwitterShare on FacebookShare on LinkedInPin it on PinterestSubmit to redditShare on Tumblr

Written by admin

Leave a Reply