Responsive Design?

Responsive Design is a strategy for website design, the top priority of which is to provide a consistent user experience across various devices with different screen resolution and size. The consistency of the user's experience is dependent upon the accessibility of content and the overall functionality of the site.

A responsive website 'responds' to its on-screen environment, that is, re-shapes its design and content to ensure usability of the site. The difference between screen sizes is emphasized because it is these differences that dictate the way in which the content of a webpage will re-shape itself. A responsive website is able to achieve this fluidity through the use of three web-design-based tools:

1. Media Queries--Media Queries acts as the basic technology that allows for Responsive Web Design. Media Queries, a CSS3 Module, allows for the adaptation of a web-page layout based upon certain conditions. Media Queries work on a true/false basis. If a Query is true that means that media type specified in the Query matches the device that the content is being displayed on. As such, a website's format will only respond if all the Media Queries embedded in that site's design are resolved to be true.
2. A Fluid Grid-- A Fluid Grid is also a necessity when designing a responsive site. Grids have long been in use in webpage design. However, as grids have been normally measured in pixels (i.e. screen size) the Fluid Grid, or responsive grid, is measured in the percentage of the browser space that it occupies. This is why the Fluid Grid is an absolute necessity; different screens have different amounts of pixels, different resolutions, etc. As such, the old method of measuring grids by pixels simply will not work; your site will not be viewable across different devices.
3. Fluid Images-- Fluid Images are equally important. Techniques for achieving 'fluidity' in images tend to vary slightly. But typically, like the Fluid Grid, Fluid Images work based upon percentages, rather than pixels. Fluid Images are resized in relative increments up to 100% of its original size. This ensures that the image will always appear at the correct size, within its containing element (edge of the browser page).

Even though many are turning to devices with smaller screens to access the Internet, many are still accessing web content the same way, that is, via browser services over the use of apps. A recent study, done by the Pew Research Center, evidently shows how important responsive design is in the current climate of increasing mobile Internet usage; sixty percent of mobile users claim to favor the use of browsers over apps. Therefore, it does not make sense for web developers to spend extra time designing a mobile app when they could achieve the same functionality with a single site.

Examples of sites that use responsive design aren't hard to find across the web. The Obama Administration, Starbucks, 2020 Lifestyles and Smashing Magazine each boast, slick, responsive sites that dazzle the eye and provide a stimulating user experience. Responsive sites are truly on the forefront of web-design and many large-scale interests have begun to implement responsive strategies. Here are some examples Smashing Magazine's and 2020Lifestyles' different site formats: 

RECENT POSTS