Responsive Web Design

by admin

The term Responsive Web Design has been around for some time now. Some say it revolutionizes the way we think, plan and execute websites from now on, others say it makes you re-focus on the essentials again. Reason enough for me to take a closer look in order to understand what this means for us web-developers and designers alike.

The idea

Serving one flexbile website which automatically adapts its design to fit any screen size, platform and orientation of the user’s device. Applying this method should save time designing & developing a new version of the website anytime a new gadget hits the market.

The ingredients

  1. A fluid Grid
  2. Flexible images
  3. Media Queries

Fluid grid – With a bit of math we shift our 960px fixed grid to a fluid one:

container width: 900 : 960 = 0.9375 = 93.75%
(target : context = result)

Flexible images – Now that the content is resizing itself according to the size of the viewport, the images need to flex their muscles as well. The magic lies within this css declarion: max-width: 100%
This simple rule makes sure that the image always takes up the available space.

Media queries – Fun little helpers to dish out a different style sheet to different screen resolutions and or media types.
@media all and (min-width: 640px) {}

Examples

The Boston Globe

New Adventures In Web Design

Foodsense

Drawbacks

Media queries are part of the new CSS3 specification, which are supported by most modern browsers. However IE<8 and older versions of our favourite day-to-day browsers need some extra care. Here are 2 java script options to make it work:

  1. Respond.js by Scott Jehl
  2. css3-mediaqueries.js by Wouter van der Graaf

Conclusion

While its a good approach to start serving a highly flexible website to your users, it really depends on your project to see if its really worth to put in the extra work. There are cases where it makes sense to have a dedicated mobile version in order to give the user the right focus on things. Some developers vote for the ‘mobile first’ approach, which says that we shall plan and design our website for the mobile phone first and then adapt to higher resolutions. While this is an interesting approach, its clear that responsive design should not aim for a specific device or resolution, responsive design is about content-focus!

Focus on your websites content before you start designing & developing and you create a win-win situation right from the start.

Posted in Design and tagged , , . Bookmark the permalink.


Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Join Our Team in Shanghai

Now hiring PHP Developer in Shanghai