Responsive Web Design

Responsive  Web Design Style

Analysis & Showcase:


Responsive design style is based upon the concept that design and development should respond to the user’s behavior and environment on the basis of screen size, platform and orientation. So in Responsive web design, the layout’s structure and accompanying elements such as images and fonts are flexible and adapted to the user’s screen device. Responsive trend becomes more and more popular every day. The reason is obvious; regarding usability and adaptability, it is the latest design layout. It effectively addresses the issue of dealing with diverse user’s behavior and environment based on different devices, platforms and screen sizes. The advantages are apparent: Once you have created a responsive website, it is going to work consistently across many different devices.

The process of creating responsive websites has been associated with the Style Tiles approach. This concept presented by Samantha Warren for some years ago. According to her: “Style Tiles are a design deliverable consisting of fonts, colors and interface elements that communicate the essence of a visual brand for the web.” Since the concept is a practical approach to the construction of an adaptive layout (a layout independent of screen sizes), it has become the basis of any successful Responsive Design project. There are three basic elements involved in a Responsive web design: media queries, fluid grid and flexible images. A Responsive web design utilizes the CSS @media rule (called media queries) to find out what resolution of device is being served on. Based on this information, an appropriate value is assigned to an img tag with “max-width” in order to resize the image media accordingly. Consequently, a liquid layout (fluid grids) that expands with the page is proportionately applied.

Responsive web design is a function-oriented rather than a special appearance design style. In our earlier discussion of Parallax style, it was mentioned that it would be almost impossible to recognize Parallax features just by seeing a screen shot. You have got to visit the site and then interact with it to find out. The same goes for Responsive Design style. In order to see the effects, you have to visit the site in another screen media, or simply by making your browser window smaller. Then, you will observe that the images and content columns shrink according, or even some design elements do not appear any longer. This happens in order the layout be adaptable to a lower resolution, e.g. a mobile phone.



Trent Walton




Dr. Aslan Hair Clinic




Food Sense








Simon Collison




B. A. H. S.




Sleep Street








The Examiner
















Sylvain Toulouse












   :: Please Note

Each of our web design articles includes a showcase of those web sites which best represent the web design style under discussion. As we know, web sites are live documents and might be changed over a period of time in different regards. They may change their layout designs, contents, etc., or simply cease to exist (error codes: 404, 403, 401). We do our best to regularly update our materials regarding these eventual modifications.

However, it might happen that we could not keep up with these changes in time. So in case you are the first to notice these inconsistencies, please inform us. We really appreciate your feedback. You can easily contact us via our 'Contact Form' at the bottom of this page.









   :: link to us!

If you found some of these articles interesting and useful, please send them to a friend so they can benefit as well. You can easily send them via the email icon at the top of each article.

Furthermore, if you happen to have a site similar to ours, you can feel free to link to these editorials from your website.

Quick Contact