Review: Real-Life Responsive Web Design by Smashing Magazine

February 6th, 2017

Responsive design is rapidly becoming the de-facto standard for websites and Smashing Magazine's new book called Real-Life Responsive Web Design is a cut above the rest.

With mobile moving at an accelerated rate, it's always good to understand what's required for a more responsive, web-based approach when building web sites.

So when I saw Smashing Magazine had a book on real-life responsive web design, I had to have it in my library for reference.

I know I've been talking about mobile pages, responsive web sites, and progressive web applications, but for most web developers, this book should the first thing to grab when designing a website.

While you can get it as an eBook, I wanted to get both. The physical book is not for the faint of heart and it's what I would consider a textbook.

Why?

Real-Life Responsive Web Design is 584 pages thick.

Even though it's chock full of great chapters written by multiple authors, each one focuses strictly on a particular responsive technique.

What Chapters are Included?

Introduction - A Responsive Way Forward by Vitaly Friedman

Vitaly mentioned this book was built to explore the following aspects of Responsive Web Design which include:

They are meant to provide great reference material of what works in real-life when dealing with responsive designs.

Chapter 1 - The Modern Responsive Designer's Workflow by Dan Mall

According to Dan, he has a design framework he uses when building content.

  1. Writing-First Design
  2. Inventory
  3. Sketch
  4. Prototyping
  5. Assemble

I would tend to agree with all of these approaches, especially the Writing-First Design.

There are a number of simple text editors out there like OmmWriter to assist with removing the distractions and noise.

Chapter 2 - Responsive Design Patterns and Components by Vitaly Friedman

In this section, Vitaly addresses a number of patterns and components you can have on a site.

For example, navigation can use multiple patterns like a horizontal or vertical navigation. Vitaly also mentions hamburger navigation and providing slide-out menus can be helpful.

The hard part with these patterns and components are optimizing them for larger screens. Some components are not made for big screens as Vitaly mentions in this section whereas some components are not made for smaller screens (like tables).

Using Micro-Components to break down complexity is one way to handle a UI usng:

Or you can use custom responsive elements for your design.

As Vitaly said, use "The Right Input Element for the Right Input."

Chapter 3 - Content Choreography in RWD by Eileen Webb

This was one of my favorite sections in the book.

Eileen talks about the types of content used throughout your site with a CMS (Content Management System).

Your CMS should block these particular content types into chunks or blobs, but it has to be structured in a way where they are reused or composed later in the system.

Her approach is to use a content audit to confirm each section is where it should be as you build your page and your content model.

For example, you want to confirm that the title is in a larger font than the abstract and the abstract is in a larger font than the body of the post.

Chapter 4 - Mastering SVG in Responsive Web Design by Sara Soueidan

Why use SVG for Responsive Web Design?

Because it's in the name: Scalable Vector Graphics (SVG).

This is a great technology to use when going from large screen content to smaller content because it scales tremendously without any loss of quality.

A majority of this section provides tips and techniques on how to optimize your site with SVG and integrate it with content.

Chapter 5 - Building Advanced Responsive Modules with Flexbox by Zoe Gillenwater

Flexbox (CSS Flexible Box Layout) is a new concept for most new designers.

A lot of old school designers are used to writing a display: table or display: inline-block to adjust formatting and layout. Flexbox was meant to solve these issues.

The good news is that 92% of every browser uses flexbox and you can use it on mobile devices for page layout.

Zoe discusses every aspect of flexbox development complete with code examples and techniques.

Zoe also covers the Responsive Web Design aspect with plenty of flexbox examples and CSS code.

Chapter 6 - Web Fonts Performance by Bram Stein

When I was designing DanylkoWeb, some of the default fonts just didn't look right so I reverted to Google for my font needs.

Bram starts off the chapter by saying it's best to treat web fonts as a progressive enhancement on your web site and not use it exclusively when first building your site since it can take a little more time to load.

The type of web fonts formats are:

Bram also covers and explains the acronyms when a web font appears on a page:

Other techniques covered in this chapter include fallback fonts, caching, compression, asynchronous loading and caching, and prioritized loading of fonts.

Chapter 7 - Responsive Images by Yoav Weiss

Images are always the bane of everybody's existence when optimizing for web pages, am I right?

Think about it.

Nowadays, everyone wants the full image background on their main page, but how do you optimize it for mobile.

Yoav starts off by asking what is the responsive images problem. The problem is what resource do you load based on the browser's screen device pixel ratio (DPR). Do you load all of them or one of them?

In this chapter, I learned something new about the IMG tag. A new attribute called the srcset.

The srcset attribute allows the browser to load an image based on specs defined in the attribute.

Look at the following example:

<img src="sketch_500px.jpg"
     srcset="sketch_750px.jpg 1.5x,
             sketch_1000px.jpg 2x,
             sketch_1500px.jpg 3x"
     width="500"
     alt="Sketch with Material Design" />

On loading, the browser looks over the comma-delimited sizes and determines the best image to load based on the current screen's DPR.

This was strictly for fixed-width images. For variable-width images, it's similar, but instead of scaling by multiples, images can be defined by widths as well.

<img src="panda_fallback.jpg" srcset="panda_360.jpg 360w,
          panda_540.jpg 540w, 
          panda_720.jpg 720w,
          panda_1080.jpg 1080w, 
          panda_2160.jpg 2160w,
          panda_3240.jpg 3240w" alt="Panda eating Bamboo" />

Notice the sizes after the filenames? These are the w descriptors for the widths of each image in pixels.

Along with the srcset, there is also a sizes attribute.

<img src="thumb.jpg"
     sizes="(min-width: 1200px) 235px,
            (min-width: 641px) 24vw,
            (min-width: 470px) 235px,
            50vw"
     srcset="thumb100.jpg 100w,
             thumb200.jpg 200w,
             thumb235.jpg 235w,
             thumb300.jpg 300w,
             thumb470.jpg 470w"
     alt="A rad animal" />

Along with these techniques, accessibility, CSS, background images, and mentioned with best practices included.

Finally, he mentions whether you can use these attributes in your HTML today. Chrome has full support, Firefox has support implemented in Firefox 38, and it's implemented in Safari 8.

Unfortunately, IE is working on the srcset x with <picture> under construction.

Even veterans to the web will have some eye-opening ideas in this chapter for a more responsive web. Great stuff!

Chapter 8 - Testing and Debugging Responsive Web Design by Tom Maslen

With responsive web design, it's hard to debug and figure out the problem without the proper tools.

I always used alert() and Firefox to debug issues, but those days are gone.

Tom shows web developers a 3-Phase approach to testing and debugging.

  1. How you shouldn't do it - Don't create "debugging CSS"
  2. Getting Better at Making, Testing, and Debugging Responsive Websites - Create VERY simple CSS using the BEM technique.
  3. Expertly Applying Testing To Your Development Workflow - Start building a testing approach into your responsive website development process.

In regards to number 2, Tom introduces web developers to use BEM (Block-Element-Modifier) for simple CSS syntax to debug your responsive web designs.

His whole philosophy to build predictable, simple CSS which includes the following:

  1. Class Names should describe the content semantically
  2. Purely semantic HTML without class names shoule be used
  3. Class names are for describing the semantics of presentation

Once you simplify your classes down to simple CSS names, it's easier to debug in the long run.

Along with simplifying your CSS, there are also various ways of defining your testing through web design.

Once you get down to automated testing, this is where you integrate testing into your development process as mentioned in number 3 (Expertly Applying Testing to Your Development Workflow).

His entire point through the whole chapter is simplicity. The simpler it is, the easier it is to locate and correct.

Chapter 9 - Responsive Email Design by Fabio Carneiro

For those new to my blog, I've experimented with some emails through a new newsletter and wanted it to be as responsive as possible.

I even went as far as to create a simple web page to display the newsletter in a browser if it didn't look acceptable.

But as Fabio explains, the email landscape is just the same as it was back in the 2000s. Email has not evolved, but it's still considered the "killer app."

if you are interested in creating responsive emails, he talks about the differences between Microsoft Outlook, Windows Live Mail, Apple Mail, Mozilla Thunderbird, and various Webmail Clients and how they differ from one another when you send an email.

The discussion of content types are mentioned throughout the chapter and the best practices of each in an email. Such content types like images, web fonts, code-based buttons, navigation in email, and animated GIFs.

There are a lot of code examples with a simple foundation markup to get you started on building your own responsive email design along with building fluid structures for mobile devices, multi-column layouts, semantic ordering, "spongy" patterns, and media queries.

Loved this chapter.

Chapter 10 - Beyond Responsive: Optimizing for Offline by John Allsopp and Matt Gaunt

Progressive Web Apps have always had the intention of taking an offline approach to mobile responsive web design where native apps require you to be connected all the time. Ouch.

While everyone is building applications with speed in mind, we don't take into consideration what happens when they cut the power. Can we still use the app? More than likely, probably not.

John and Matt cover in detail some techniques on how to view the web in a responsive way offline.

They cover navigator.online, navigator.connection, XMLHTTPRequest, Service Workers, and local storage.

If I didn't know better, they could've called this chapter "Optimizing for Offline using Progressive Web Applications" since everything touched in this chapter refers to a PWA (Progressive Web Application).

Chapter 11 - Counting Stars: Creativity Over Predictability by Andrew Clarke

Finally, Andrew Clarke's perspective on using creativity over predictability should be a welcome approach for responsive web design.

One heading in the chapter is called "Our Responsive Designs Lack Soul."

How did he know what I was thinking? ;-)

Responsive websites need fresh, creative designs and updates every month, quarter, six months, or year to become something truly amazing.

One quote he mentions in the chapter that hit me like a ton of bricks was the following:

"They [visual designers] understand that visual adornment is meant to support the experience, and not be the experience."

This was a quote from Irene Au who is the Former Head of Design at Google and Yahoo.

There are a number of other quotes in the chapter that have this same impact.

Always keep the creativity moving and as Andrew said at the end of this chapter, "Improvement is a matter of steady, ongoing iteration."

Conclusion

With mobile becoming a defacto standard for web development and desktops becoming secondary objectives, I could see each of these chapters expanding into their own book.

After reviewing all of the chapters, the content is solid and packed with great examples. I could even see this book becoming standard reading for students in schools. Heck, it's thick enough to be considered a textbook.

Overall, I loved this book. I feel the Real-Life Responsive Web Design book is essential for every type of web developer whether you are a beginner or an advanced webmaster for building responsive web applications.

Looking to buy the book? Head over to Smashing Magazine to get the ebook AND print book of Real-Life Responsive Web Design.