What is the meaning of responsive design?

Question

I have heard of many websites using "responsive design".

What is this and why should somebody use it?

Answer 1

Responsive Design is a design philosophy where in the design of the system (the representation and the layout) responds/adapts depending upon the layout of the device. The primary reason to keep your design responsive is to increase the reach of your application to a larger user base using an array of devices.

Improving Usability and accessibility:

A responsive design improves the usability of the product. Few years back, before the advent of mobile Internet communication devices, Developers used to make their applications compatible with screens of various resolutions. This can also be called making the design responsive. In today's world, where more and more users are consuming information on your mobile devices, you need to handle the changing viewports and hardware.

Unlike popular belief, making design responsive does not necessarily mean fitting the entire application on the user's screen. It means:

1. intelligently pruning amount of information displayed and
2. making adjustments to the design to improve the users' experience while using the application.

For example, if you open a web application on desktop, you may consider going all guns blazing and displaying a lot of information in the available screen with each component occupying optimal space. But, when you switch to a mobile device, you should not try to squeeze all the information into the limited real estate on screen.

Instead you should choose to

1. drop out the less important chunks of information;
2. reduce the number of processor-heavy components (elements that need to be frequently updated/redrawn/re-calculated); and
3. reduce textual content to only highlight extremely important content

Like, a news app on desktop may show a snippet of the news article along with the headline and a thumbnail about the article. But, on mobile, it need only show the headline, timestamp and publisher, and so on.

Also, even though the mobile screens now-a-days sport desktop-like resolutions, you need to realize that the physical dimensions of these devices are still smaller. So, to make it easier for the user to consume the information, the developer should take steps like increasing the font-size, increasing the dimensions & placement of thumbnails, etc to make the information easily readable (accessible) even on a small screen.

Have a look at the examples listed on mediaqueri.es to get a better idea.

Answer 2

A responsive design means a type of design where the characteristics of the website(such as width, alignment of data, etc) will get adjusted according to the width of the screen. This means that you are serving different webpages to users with a smartphone, a tablet or a laptop. This is a characteristic implemented on the code. This has got nothing to do with a specific design pattern.

Irrespective of how your website look, you can make a responsive design. This is rather a functional aspect than a design aspect, even though the functionality is achieved by the designer.

Responsive design is needed because of two reasons :

1. Usability : With the spike in the number of smartphone users, it gets more and more necessary for websites to provide content in such a way that it is easier for them to use.
2. Speed Matters :Google announced mobile page load time as a factor for SEO. So with a design specific for mobile devices, you can get a better page load times for mobile devices and hence better rankings.

Answer 3

Responsive Web design (RWD) is a Web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from mobile phones to desktop computer monitors).

for more information: http://en.wikipedia.org/wiki/Responsive_web_design

Answer 4

To add a short-and-sweet definition:

A responsive web site responds to the particular device it's being viewed on by changing the layout, content and interactions to best accommodate that particular device.

Answer 5

RWD [Responsive Web Design] is the concept of developing a website in a way that allows the layout to adjust according to the user’s screen resolution (view port) using media queries.

Responsive Web design is not only about adjustable screen resolutions and automatically resizable images, but rather about a whole new way of thinking about design

Responsive Web design suggests that design and development should respond to the user’s behavior and environment which is based on three key technical features are the heart of responsive Web design:

• Media queries and media query listeners
• A flexible grid-based layout that uses relative sizing
• Flexible images and media, through dynamic resizing or CSS

There are three ways to implement media queries: Use the @import rule to import style rules from other style sheets:

@import url(style600min.css) screen and (min-width: 600px);

Put media queries directly in the style sheet. for eg:

#nav     {  float: right; }   #nav ul { list-style: none; }  

@media screen and (min-width: 400px) and (orientation: portrait)        
 {                 
    #nav li { float: right;   margin: 0 0 0 .5em; border:1px solid #000000 }         
 }

@media screen and (min-width: 800px)        
 {             
        #nav { width: 200px; }   #nav li   { float: left; margin: 0 0 0 .5em; border: none;  }     }

HTML5 Attribute for image resizing :

<img src="smallRes.jpg" data-fullsrc="largeRes.jpg">

The data-fullsrc is a custom HTML5 attribute used for any screen that is wider than 480 pixels

//This technique is fully supported in modern browsers, such as IE8+, Safari, Chrome and Opera, as well as mobile devices that use these same browsers (iPad, iPhone, etc.) //

the Viewport : [Testing media queries]

<meta name="viewport" content="width=device-width">

iPhone and iPod Touch is that Web designs automatically rescale to fit the tiny screen. Because this works only with Apple’s simulator, we can use an Apple-specific meta tag to fix the problem, placing it below the website’s  section

 <meta name="viewport" content="width=device-width; initial-scale=1.0">

This might be enough for the RWD. If we need full study, Flexible Grids and Flexible Images and Media will be added.

Flexible Images and Media

This is like the CSS overflow property

img, object { max-width: 100%; }

TIP : In IE this max-width will not support. So, we have to write as width as 100% in a separate IE stylesheet.

Answer 6

From a developer's perspective, a responsive site is slightly different than an adaptive site, which also changes its viewing experience based on viewport size. A responsive site / design flows and adapts it fluid grid based on the width of the viewport. An adaptive site / design, on the other hand, "snaps" to a predefined view to match its viewport. Just my 2 cents...

Answer 7

Responsive web design is the practice of building a website suitable to work on every device and every screen size, no matter how large or small, mobile or desktop. Responsive web design is focused around providing an intuitive and gratifying experience for everyone. Desktop computer and cell phone users alike all benefit from responsive websites.

More you can find on the link it's very useful.

http://learn.shayhowe.com/advanced-html-css/responsive-web-design