Responsive Web Design in 24 Hours

Author: Jennifer Kyrnin
Publisher: Sams
Pages: 384
Audience: Experienced web devlopers
Rating: 4
Reviewer: Ian Elliot

Responsive web design is something we all want to know how to do.

One of the biggest problems in creating even the simplest web page is making sure it looks OK on the range of devices that might be used to view it. The problem is basically how to adapt a web page that shows as something complex on a desktop machine to something that is simple and can be viewed on a comparatively tiny screen.

This is a remarkably difficult problem and it is certainly true that to get a top quality experience on large and small screens the best option is to design two different websites. This is a truth that is usually overlooked, but it is still true.

If you want to serve a single website to a range of devices then you have no choice but to compromise and use responsive design and accept the fact that you have far less control over how the site looks as its layout will change according to the device and even how much screen real-estate the user gives the browser. It is a fun game to visit a responsive website and resize the browser continuously and watch elements change size and jump around. You can usually find a size that makes the site look terrible and difficult to use.

Responsive design is still an attractive idea, but how do you do it? The answer is with a great deal of difficulty. This is a book in the “24 hours” style but it isn’t 100% typical. It is divided into three sections Introduction to Responsive Design, Building a Responsive Website and Improving on Responsive Web Design. There isn’t much difference between the first two sections as the both present lots of different ideas in no particular order.




The initial section starts in Hour 1 with the usual introduction telling you what responsive design is and some of its history. In the subsequent hours, we look at alternatives to responsive design, the growth of mobile, progressive enhancement, HTML 5, CSS and unobtrusive JavaScript. This is a basic textbook look at the underlying technologies with a slightly dated feel. Progressive enhancement and unobtrusive JavaScript were important ideas in the early days when the web was primitive, but today there is an argument for as much obtrusive JavaScript as possible and progressive enhancement is a tough challenge that often brings in an audience you probably didn’t want. This is not to say that ARIA and access aren’t important, they are but this is not the focus of this account.

After covering the basic technologies, we move on to consider how to build a responsive website. Hour 8: Planning a Responsive Website is a short thinkpiece on whether it is worth it or not. Hour 9 is billed as “Mobile First” which is a fairly obvious look at the important of a mobile site. At Hour 10 we get to the subject that most would consider the key to responsive design CSS Media Queries then, in Hour 11 on to Breakpoints, size changes where the layout has to change. Hour 12 is about layout in very general terms and how to construct a column layout in particular. Hour 13 deals with navigation, 14 is about fonts, 15 images, 16 video, 17 tables and 18 covers responsive web forms. This section of the book was interesting and a good read but it raises as many questions as it answers. Its final two hours are spend on testing and problems with responsive design.

The final part of the book, hours 21 to 24 are more about using tools and other resources. Here we learn about web editors and scripts to detect the device that is trying to connect. The final hour is on best practices and really sums up the problem with this book – or is it this topic? The book is actually very good and you will learn a lot if you read it. The problem is that to solve the problem of responsive design you need some good tools that will help you. At the very least you need a framework like Boost, although this isn’t the only choice, and you need to master it. This book takes a lower level approach to the problem and as a result you really only need to read it if you too want to take a low level approach. Of course the advantage of this is that you can be truly innovative and creative with a low level approach.

Finally I need to pass on to you the secret of responsive web design. Divide your page up into columns and show the columns side by side when the screen is wide enough and one under the other when it isn’t.

To keep up with our coverage of books for programmers, follow @bookwatchiprog on Twitter or subscribe to I Programmer’s Books RSS feed for each day’s new addition to Book Watch and for new reviews.

[Source:-I Programmer]