Real-Life Responsive Web Design

“Real-Life Responsive Web Design” is the fifth book from Smashing Magazine. It looks at many areas of modern responsive web-development and how to implement these into your own projects.

Overview

Writing a book about fast-moving technology is a tricky prospect. If you discuss topics that are well established, the book can be outdated before it’s even published. Conversely, discussing technologies that aren’t yet ratified can result in a book that’s a pointless doorstop.

Thankfully, Real-Life Responsive Web Design avoids both scenarios by taking a pragmatic approach to the current state of RWD. The topics discussed are just slightly beyond what you might normally consider in your day-to-day job building websites. New technologies are discussed in great detail by some of the industry’s brightest names, some familiar and some fresh.

Production

I opted to buy both the eBook and physical book bundle. I still prefer reading real books: it’s far more enjoyable than reading on a kindle or tablet, and research has suggested that the tactile experience of a real book may contribute to better understanding.

The book itself is a monster, a beautiful monster. At nearly 600 pages, printed in hardback with glorious typography and beautiful illustrations, it’s one of the most eye-catching web-dev books I’ve ever read. The cover has a simple colour illustration of the Smashing Mag “S”, replicated 5 times in shrinking scale, a clever ident signifying Book Five. The original blog post about the book says that the cover would be embossed, but it isn’t, so I imagine this was dropped to keep the price down.

The stitched binding is robust and there seems to be no risk of this book falling apart: it feels very solid. The tradition of including a fabric bookmark is maintained—in bright orange—and it’s always a gorgeous touch. I wish more large books would do this: it prevents you scrabbling around for a crappy bit of paper as a bookmark, and there’s no temptation to fold the page corners.

When you compare the production quality of this book against the flimsy efforts from O’Reilly or Sitepoint (and at similar prices too!), you’ll wonder why so few web-dev books are produced so beautifully. It’s clear that the production quality of this book is a labour of love for Smashing Magazine and I applaud them for it.

Content

The chapters are arranged in an order that roughly suggests increasing complexity (or possibly the decreasing likelihood of you using the tech on a project!). Each chapter is written by an industry expert, and is technically reviewed by another expert. This is a great approach as it means that the content has been sanity checked and there’s much less room for inaccuracies.

1. The Modern Responsive Designer’s Workflow

Dan Mall shares great insights into his workflow for projects such as TechCrunch and Entertainment Weekly. The key learning here is about getting “the highest fidelity in the shortest amount of time” and a plethora of great tips are shared. I’m a very experienced designer/dev and some of Dan’s ideas opened my eyes to better ways of working that can yield results much more quickly.

2. Responsive Design Patterns and Components

Vitaly Friedman discusses design patters for RWD: common techniques for tackling common issues. Everything from navigation patterns, flexible content, lightboxes, forms, carousels, responsive tables and graphs & charts are discussed in overview with some detailed examples. This chapter is a great summary of the sorts of problems we experience on a daily basis and provides a good selection of patterns that can help solve them.

3. Content Choreography in RWD

In this chapter, Eileen Webb discusses the importance of structured content and how to go about establishing a content model for your site. From content audits to choosing a CMS, from working with authors and stakeholders to documenting the content model, this chaper will help you get to grips with the content for your sites and how to make it a priority, rather than an afterthought.

4. Mastering SVG for RWD

This chapter by Sara Soueidan is full of great insights about SVG, with numerous tips and tricks that you can use in any project. From establishing a workflow for SVG to spriting, optimisation, animation and responding to viewport size, the subjects are dealt with swiftly and in detail.

There are also other techniques discussed, including ways to use SVG to deliver other image types and how to provide fall-backs. If you apply everything you learn here, you’ll have all the tools you need to master SVG on the web.

5. Building Advanced Responsive Modules with Flexbox

Zoe Gillenwater provides a comprehensive look at Flexbox, the new hotness in laying out flexible, responsive designs with CSS. This chapter is probably one of the best resources I’ve come across discussing Flexbox, and it’s almost worth the price of the book alone.

Flexbox takes a bit of getting used to with a slightly unintuitive syntax, yet Zoe shows how every parameter and attribute should be used, with sensible fall-backs for older browsers. This chapter also has great illustrations showing the visual outcomes of various Flexbox rules. These are some of the clearest pictures I’ve seen that visually explain these parameters and they finally helped me have my “Aha!” moment.

6. Web Fonts Performance

I have a love-hate relationship with web fonts. On the one hand, they can help pages become more readable, or add a sense of atmosphere that you can’t get with system fonts. On the other hand, they are often badly made and bloat our web pages to the point of making them unusable.

This chapter by Bram Stein looks in detail at differences between good and bad web fonts, and how to optimise them for the best possible user experience. Subjects include: caching, compression, subsetting, selective loading and how to overcome issues such as FOUT or FOIT. This is one of the shorter chapters but contains everything you need to improve your delivery of web fonts.

7. Responsive Images

Yoav Weiss delves deep into the dark heart of RWD: responsive images. I don’t think there’s any other aspect of RWD that fills web developers with quite as much dread. Responsive Images are a pain in the arse, and this chapter aims to take some of that arse-pain away. Quite.

Yoav discusses why we need responsive images, all the way up to practical code examples of how to solve some of the trickier problems. Along with the RWD solutions for images provided, there’s discussion of image optimisation and fall-backs and enough working code for you to use in your projects today.

8. Testing and Debugging RWD

Tom Maslen gives us a detailed look at the complexities of testing RWD and some solutions on how to do it.

Tom expertly guides us through all the ways we can test: from basic use of Developer Tools device emulation, through to automated testing: every base is covered. In particular I found the examples from the BBC website very enlightening. It’s often much easier to understand a technical problem and solution when it’s presented with a real-world example, and these example are easy to understand.

9. Responsive Email Design

I must state right away that I only skimmed this chapter. I’ve not designed or built an HTML email for several years now, and I have absolutely zero interest in returning to that dark pit of hell. Fabio Carneiro (Mailchimp) recognises that many web-designers have this view of email design, that it’s somehow a poor cousin to designing for the web, and he starts the chapter trying to undo this negative impression.

The rest of the chapter is an extensive guide on how to make responsive emails using the latest techniques. Fabio looks at email clients on desktop and mobile and how much HTML/CSS they support. He discusses issues such as whether you can use webfonts, image fallbacks, animation and—most importantly—the best ways to write HTML for emails.

10. Beyond Responsive: Optimizing for Offline

John Allsop and Matt Gaunt co-wrote this chapter, bringing together their expertise to show us how to make our sites and apps work offline. Like the previous chapter on responsive emails, this subject does not interest me much and isn’t currently relevant to anything I produce, so I did not read this chapter in detail.

However, a quick scan of the subjects show that there is a lot of usable code in this chapter with clear examples of how to test for online/offline and change the experience accordingly. Of course I am not doing this chapter justice, but if you need offline support in your projects, this would seem to have you covered.

11. Counting Stars: Creativity over Predictability

Andrew Clarke (formerly Andy) is well known in the web-industry as a high profile designer, speaker and writer. In this last chapter of the book, he makes a plea to the web-industry at large: bring some soul back into your work.

This chapter is a bit of a departure from the rest of the book, but it’s a subject close to my heart. Having started on the web nearly 20 years ago, I’ve seen all the same trends and techniques that Andrew has, and I too share a lament for what seems to be the death of a certain kind of creativity in web design.

Perhaps we are both just grumpy old men who are nostalgic for the early web, but I honestly think it’s more than that. The normalisation of web-design into repeatable patterns and simple aesthetics has certainly removed some of that indefinable soul from our work, and we’re now often hard-pressed to distinguish one site from another.

Andrew makes the case that web-design has become stifled and that we need to re-embrace the true nature of unfettered creativity. We should not be constrained by the mature processes we’ve developed, but instead need to re-think what it means to be creative and how to inject the chaotic spirit of exploration back into our work. He shows how we might do this in conjunction with our clients so that everyone in the design process is involved and can contribute to creating something that’s more than just boxes and grids on a screen.

This is a fantastic chapter. It’s a call to arms to really place our chaotic creativity at the heart of the web-design process, and it’s a great way to finish up this fabulous book.

Summary

This is an exceptional book. It covers a wide variety of subjects at various levels, and most web designers and developers should find some real value here. I have a couple of small criticisms:

The writing style of contributors varies widely. As a result, some chapters are more focused than others. It’s unavoidable in a book of this nature, but I would have preferred chapters to be edited a little more consistently.

There’s a level of assumed knowledge in many chapters, so if you’re completely inexperienced at RWD or web-design, you may find some of the content confusing or overwhelming. If you’re expecting hand-holding beginner tutorials, you won’t find those here.

But these are minor quibbles. Overall this book is an incredible achievement and should absolutely be in your “must-have” web-development books this year.