Responsive Web Design

Day by day, the number of devices, platforms, and browsers that need to work with your site grows. Responsive web design represents a fundamental shift in how we’ll build websites for the future. From mobile browsers to netbooks and tablets, users are visiting your sites from an increasing array of devices and browsers.
Responsive Web

What is Responsive Web Design?

The use of mobile devices to surf the web is growing at an astronomical pace. But unfortunately much of the web isn’t optimized for those mobile devices. Mobile devices are often constrained by display size and require a different approach to how content is laid out on screen. Responsive Web design is the approach that suggests, design and development should respond to the user’s behavior and environment based on screen size, platform and orientation.

Responsive web design, originally defined by Ethan Marcotte in A List Apart responds to the needs of the users and the devices they’re using. The layout changes based on the size and capabilities of the device. For example, on a phone, users would see content shown in a single column view; a tablet might show the same content in two columns. Or on desktop, it may be three columns.

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.

The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries. The user may switch from their desktop/laptop to iPad/smartphones. Then 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.

Core Concepts of Responsive Web Design?

Three key technical features are the heart of responsive Web design:

a). Media queries and media query listeners
b). Flexible grid-based layout that uses relative sizing
c). Flexible images and media, through dynamic resizing or CSS

Guidelines for Responsive Web design

The following are the guidelines for Responsive Web design:

1. Set the viewport
2. Size content to the viewport
3. Use CSS media queries for responsiveness
4. How to choose breakpoints

* Size content to the view port. This is an important aspect when you develop a page for devices. Commonly, users are familiar with vertical scrolling but not with horizontal. So fit the content to the view port to avoid horizontal scroll.

* Create breakpoints based on the content . It should not be selected based on any devices, products, platforms or brands of devices.

* Start designing from the smallest device and progressively enhance for other devices.

* Usually, we hide certain content on devices, to fit it on device. This is not the right way. Hide content only which is not important for the user.

Media queries were built as an extension to media types. It is commonly found when targeting and including styles. Media queries provide the ability to specify different styles for individual browser and device circumstances. For example the width of the viewport or device orientation. Being able to apply uniquely targeted styles, opens up a world of opportunity and leverage to responsive web design.

In responsive design, page elements reshuffle as the viewport grows or shrinks. A three-column desktop design may reshuffle to two columns for a tablet and a single column for a smartphone. Responsive design relies on proportion-based grids to rearrange content and design elements.

Demo for responsive table

label, , , , , , , , , , , ,

About the author

Add a Comment