Responsive Web Design

Mobile, Place

I joined a very impressive and interesting webinar recently held by UIE . It was a virtual seminar by Ethan Marcotte and the topic was ‘The How and Why of Responsive Web Design’.

Couple very interesting takes, starting with my favorite;

Mobile first.

The topic was designing responsive websites based on the devices users consume your page. The explosion in mobile web usage is no secret. It is also certain that the mobile usage will even surpass the desktop usage soon, just a matter of time – 2 maybe 3 years from now… So the author is saying that it is almost a crime not to design the websites for the mobile first and then apply the rich interface for the bigger screens. It is not just for design purposes, it also gives the designer and developer a very strict discipline to focus on what matters on the page first – considering you can only put maybe 10-20% of your all content to a mobile page. The idea is to start designing your website for mobile first, to show what’s most important and then add the additional ‘secondary’ information to the page and expand it for desktops.

Three concepts. Fluid grids, flexible images and media queries are the key elements in responsive design

Ethan is very experienced designer and shows the best practices on when to use the fluid grids and the design vs when to design a complete separate experience for mobile (especially if the goal of both medium are not the same, it is unnecessary work to make it fluid). In all other cases, designing your page to fit properly on all different lay-outs, screen sizes and devices is a not just a smart way to design websites, but also a very efficient one due to time and resource savings.

The simple way to start your design is to use proportions (Ethan uses ‘target/context = results’ formula) instead of fixed width and use the css properties for images  to make the size adjustable based on the browser screen. Furthermore, the media queries also help you use different css styles for different devices (depending on the size and/or resolution). Of course not all the browsers are supporting media queries yet, but with simple jquery scripts you can cover majority of the browsers to be compatible… sweet.

Comments on this entry are closed.