Book Review: Responsive Web Design

Responsive Web Design is a book published by the well-known website a list-apart and is written by Ethan Marcotte. It is considered as a top reference by many, so I bought it with great expectations. About responsive web design, the main fact is that today your web applications can be seen on every kind of device or screens. So your UI should adapt to any of these. The layout is mostly concerned by this but other interactions (double click, right click, dragging…) should be considered too.

This is short book that can be read very quickly. So you won’t learn a lot with it but you will learn it well. Responsive problematics are clearly exposed and solutions are fully described. The main concepts are the following :

  • Make fluid design
  • Use Media queries
  • Think responsive, take care of the context

By Fluid design, the author just means that you should avoid putting fixed size. Font should be described with em as unit instead of pixels and every width/margins/padding should be set with a percentage. You can eventually put a max width to your components if you don’t want them to become too wide. Then you should force your layout to fill the viewport.
By the way, you can have a small sample on Cozy Cloud blog. Try to resize it to a small window and you will notice changes.

Fortunately to deal with that, you are not alone, media queries will be your friends, to adapt easily your layout depending on device that see your page. These are just litlle elements that you put above your css entries. They will tell your browser to activate described styling depending on situation. It is very easy to use and lets you to write javascript only for complex cases.

A big part of the book is dedicated to the way of thinking responsive. The author gave us a nice table of common resolutions and situation you could met and. Then he tell us that a lot of people “think mobile first”. But the most interesting aspect is the concept of thinking responsive fully. When you write your responsive design, don’t think only “my website should be visible on small device”. Even if it’s a good starting point the problem is more profound than that : you don’t want to see the same content if you are on a mobile or on a desktop. For exemple, an event website will display location and informations first for small resolution (you check the page from a mobile) and will display pictures and place description first for big resolution (desktop).
As you understand I really enjoy reading this book, but there is one bad point: the price is quite expensive for such a small book. 23 dollars + shipping is a little bit high for 150 small pages.

Whatever, if you are interested in the responsive design and you require an initiation, this book will definitely do the job. If you need advanced informations about this problem, it would probably not be enough.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: