Responsive Web Design

Firstly introduced by Ethan Marcotte on his article “Responsive Web Design” for A List Apart, the initial concept behind responsive design was based on the emerging responsive architecture, in which rooms and spaces have the capacity of automatically adjusting according to the number and flow of people within it.

The concept of responsive web design makes reference to the process of designing and developing websites that are able to react to user’s actions and detect the medium where the site is currently being watched in order to provide the best experience possible to the user in terms of navigability and readability. The theory behind responsive design involves the utilization of several grid and layout systems, image optimization and CSS media queries, therefore, no matter how many devices are released on the future, responsive websites will always be able to provide a proper response.

Flexible grid

Weekly freebies in your inbox. Advertising Royalty Free Images Chicago Web Design Firms Design Your WebsiteDesign Your Websitea simple & elegant HTML site builder (and it's free). Click here to start! ads by BSA Friends Free Iphone icons Wordpress Theme Generator Free Android icons Free Social icons Psd Vault Six Revisions CSSReflex WebDesignerDepot Specky Boy CoolHomepages InstantShift IconShock Wordpress Themes Shock Designrfix Smashing Hub Feedgrids Design Resources Socialh SmashingApps PresidiaCreative DesignYourWay QualiThemes Web Design Burn UnderworldMagazines Artfan Design BlogPerfume Webanddesigners Vandelay Design Blog Designer-Daily Creativeoverflow Dzinepress Tutorial Lounge VectorDiary iBrandStudio Design Dazzling AEXT.NET Tutorial Chip Desizn Tech RedTeamDesign Stunningmesh Trendykit Graphic Design Business Weekly freebies in your inbox Responsive Web Design, most complete guide Sep 13th/2011 301 coding css tutorials useful ux web design 247Share

If you’ve been working in the web design field for the past couple of years you should know that designing a fixed interface for a widescreen computer is not enough. Most of the clients you’ll be dealing with from now are going to request that their site is not only desktop-compliant but is also optimized for smartphones and tablets. This issue presents the necessity of working with different screen resolutions in order to guarantee that a website looks good in all sorts of devices.

But if the devices’ production continues at the same speed that it has for the past couple of years, the amount of screen resolutions and formats that designers will have to deal with is going to become unbearable. On this article we’ll be discussing one of the most effective solutions to face this problem with a certain easiness, we’re of course talking about responsive web design.

So, what’s responsive web design? Firstly introduced by Ethan Marcotte on his article “Responsive Web Design” for A List Apart, the initial concept behind responsive design was based on the emerging responsive architecture, in which rooms and spaces have the capacity of automatically adjusting according to the number and flow of people within it.

The concept of responsive web design makes reference to the process of designing and developing websites that are able to react to user’s actions and detect the medium where the site is currently being watched in order to provide the best experience possible to the user in terms of navigability and readability. The theory behind responsive design involves the utilization of several grid and layout systems, image optimization and CSS media queries, therefore, no matter how many devices are released on the future, responsive websites will always be able to provide a proper response.

responsive01

But responsive web design is not simply reducing font sizes and shrinking a picture to make it fit the new format. This concept requires a thoughtful process where the designers and developers work together to determine how to redistribute the elements according to resolution, which elements may be eliminated and how to maintain the concept while simplifying the structure.

According to many internet gurus, the future of the internet will rely on mobile devices (tablets, smartphones, portable consoles) rather than desktops and laptops. More and more people are starting to acquire cutting edge technologies and the tablets’ battle is on, so it’s indispensable that you start seeing these devices as an important part of your audience. But this increment on the amount of mobile devices does not mean that desktops are doomed, in fact we can see how everyday larger monitors are released, and these are highly appreciated by designers, visual artists and producers, thus at least for them, a tablet will never be able to replace a desktop computer. Flexible grid.

The first element we have regarding responsive web design is dubbed flexible grid. Before this concept became popular, most websites were designed using a fixed width style and centered content, which was an effective method as most computers worked under the same screen resolution. Now that screen resolutions have changed so much, a fixed width design is not the best solution for your designs and therefore liquid layouts are the new answer.

But the concept of flexible grid goes beyond the liquid layout concept, where the elements are essentially resized and kind of rearranged. A flexible grid makes a complete overhaul in terms of proportions, making that all the elements in a layout are resized in relation to one another when stretched or contracted. The essence of flexible grids relies on stop thinking in fixed pixels and start considering percentage units. To recalculate an element’s proportions accordingly, you must take the element’s width and divide it by the full grid’s size e.g. 200 px / 960 px = 0.2083, then take this result and multiply it by 100 (0.2083 * 100 = 20.83 %), that we you get the percentage value that needs to be applied over the element in order to perform a correct resizing.