Page 1

Responsive the


8 advic 22of pro

s ge pa

FREE! 3 hours of exclusive video tutorials

web design Handbook


volume II

Practical projects

Build brilliant sites that work on aNy device Featuring Design a prototype for a web app ● Create perfect flexible layouts ● Build a responsive WordPress portfolio ● Design sites with responsive images



The RWD Handbook 4



Big question: testing


Pro Guide  6

Big question: Prototyping 


The perfect site


Exchange  128

The perfect layout


Best practices and pitfalls


Top tools


Showcase 48

Focus on: Fully responsive 


Case study: NPR 


Case study: RNIB 


case study: LA Times


case study: RNIB 


Case study: Amnesty international


Case study: The Guardian


Focus on: Message vs Medium 


Voices Give sites back their soul 


Spacecraft, Data and humans 


Interview: Aaron Gustafson


Designing for future displays


Interview: Scott Jehl


HTTP/2  103 Responsive content modelling  104 Interview: Brad Frost 


Q&A: Timoni West




Susy and breakpoint  132 Flexbox


CSS Grid Layout 


Element queries  148 Webflow






Foundation for apps


Polymer  170 Head to head: Compass vs Bourbon 175 Responsive images  176 Forms and tables  180 Focus on: Responsive forms


Responsive typography


Third party content


REsponsive Charts  196 site Testing  198 Responsive email


Wordpress themes


Wordpress portfolio  212 Modular WP systems 

head to head: Angular 2 vs Aurelia 223 Site analysis  224

Style guides for the digital age  118 Responsive reorganisation


New ways to be flexible 



The RWD Handbook 5




Author Justin Avery By day, Justin (@justinavery) is a technical consultant, and by night he curates the RWD Weekly newsletter, hosts a responsive podcast and runs

Illustration Martina Flor Berlin-based Martina creates type, lettering and illustration work for clients all over the world

The RWD Handbook 6

The pro’s guide

Yoav Weiss, with help from Indiegogo (, has done the majority of the work on the Blink implementation – Google’s fork of WebKit, and by the time you’re reading this it will be shipped in Chrome and Firefox. Safari 8 will ship srcset , however the sizes attribute is only in nightly builds and <picture> is not yet implemented. With the arrival of anything new to our web development process, it can be difficult to get started. Let’s run through an example step by step.

Responsive images Fluid media was a key part of RWD when it was first defined by Ethan Marcotte. width: 100%; , max-width: 100%; still works today, but the responsive image landscape has become a lot more complicated. With increasing numbers of screen sizes, pixel density and devices to support we crave greater control.

The RWD Handbook 7

From a performance point of view it doesn’t matter if you use min-width or max-width in the sizes attribute – but the source order does matter. The browser will always use the first matching size. Also, remember we are hard-coding the sizes attribute to be directly defined against our design.


<img <!-- Declare the fallback image for all non picture supporting browsers --> src="horse-350.jpg" <!-- Declare all of the image sizes in srcset. Include the image width using the w descriptor to inform the browser of the width of each image.--> srcset="horse-350.jpg 350w, horse-500.jpg 500w, horse-1024.jpg 1024w, horse.jpg 2000w" <!-- Sizes inform the browser of our site layout. Here we're saying for any viewport that is 64ems and bigger, use an image that will occupy 70% of the viewport --> sizes="(min-width: 64em) 70vw, <!-- If the viewport isn't that big, then for any viewport that is 37.5ems and bigger, use an image that occupies 95% of the viewport --> (min-width: 37.5em) 95vw, <!-- and if the viewport is smaller than that, then use an image that occupies 100% of the viewport--> 100vw" <!-- always have alt text.--> alt="A horse" />


With those topics in mind, I ran a series of podcasts ( asking some of our industry leaders for their thoughts. In their responses, one point was unanimous: focus upon getting the basics right before you start worrying about exciting and advanced techniques. By taking things back to the basics, we are able to build a robust interface for everyone, layering on features when the device or user’s context allows. “So ... what about these advanced techniques?” I hear you ask. I think Stephen Hay summed it up best when he said: “The ultimate RWD technique is to start off by not using any advanced RWD techniques. Start with structured content and build your way up. Only add a breakpoint when the design breaks and the content dictates it and ... that’s it.” In this article, I’ll begin with the basics and add layers of complexity as the situation allows, to build up to those advanced techniques. Let’s get started.

1. T  he kilobyte size of the image we are sending over the wire 2.The physical size of the image we are sending to high DPI devices 3.The image crop in the form of art direction for the particular size of the viewport


1. Responsive images 2. Improving performance 3. Responsive typography 4. Media queries in JavaScript 5. Progressive Enhancement 6. Layout

The three main concerns were defined by the Responsive Images Community Group (RICG):


esponsive web design sounds incredibly simple. Opt for flexible grids for the layout, use flexible media (images, video, iframes ), and apply media queries to update these measurements to best arrange content on any viewport. In practice we’ve learnt it is not really that easy. Tiny issues that crop up during every project keep us scratching our heads, and occasionally even carving fingernail trenches on our desks. Since I began curating the Responsive Design Weekly newsletter ( I’ve been fortunate enough to speak with many members of the web community and hear their experiences. I wanted to find out exactly what the community really wanted to learn, so I circulated a survey to readers. Here are the top results:








The RWD Handbook 23


Bobby Evans Bobby is an illustrator based in north London, who has worked with clients as varied as Penguin, Habitat and Vodafone. He also runs the award-winning Telegramme Paper Co with Kate Brighouse


hanks to media queries, we can create websites that work on any device. Without them the current web simply couldn’t work. But there are other options as well. In certain situations, a different technique can solve our responsive design problems in a more systematic, algorithmic way. If you are, like me, a lazy person, you might be interested in designing these kinds of layout systems whenever possible. Systems like these are self-governing – they have to be able to make decisions for themselves and for us, based on the constraints we give them. We’ve always been able to create flexible layout systems on the web. Even with ancient CSS properties like  float you could create layouts that adapted to different screen sizes. Recent implementations of new CSS features, like flexbox and viewportrelative units, have enabled us to take CSS layout to a level of flexibility we could only dream of before.


Vasilis van Gemert Vasilis (@vasilis) is a lecturer at the Amsterdam University of Applied Sciences. When he’s not teaching web design, he’s probably in his hammock, creating art for the web


There are a number of ways to create responsive layouts without media queries. Vasilis van Gemert shares some useful techniques, ranging from primitive to highly powerful

Features Voices


Sensational design and superb development

Animation, JavaScript


Anton & Irene

Designer Karim Rashid is as prolific as he is celebrated. With over 3,000 designs in production and work in 20 permanent collections worldwide, it is perhaps no surprise that his own website had taken a back seat for the past 10 years. Until he commissioned Anton & Irene, that is. With its trademark embrace of engaging interactions, emotive typography and truly deviceagnostic layouts, the duo has delivered a site that invites vigorous exploration. Which was, of course, the point: “Our main goal was to showcase the plethora of products and projects in a visually enticing way,” say the pair on their blog.

This plethora of products also presented a challenge. How does one deliver 5,000-plus images of varying shapes and sizes in a responsive environment? The solution: a re-imagining of conventional layouts and a lo-fi approach to structuring to give a precise, flexible grid. Perhaps the most impressive thing about Rashid’s new site is the seamless transitions between viewports. “We always design all screens simultaneously ... The moment we have an idea for a component or a layout we try it on all screens and see if it makes sense across the board.” Words by Espen Brunborg

The RWD Handbook 48

“OK, OK, admit it. Karim Rashid’s new site rocks” Gary Pikovsky (@DesignTimes)

Una K rave ts

Lyz a Danger Gardner

Justin Avery

Espen is a creative director and co-founder of Primate, a small web agency that creates innovative online products in Edinburgh w: t: @ebrunborg

Una is a frontend developer, architecting design systems and building software prototypes at IBM Design in Austin w: t: @Una

Lyza is co-founder and CTO of Portland-based Cloud Four, where she works with a phenomenal team to take the web into the future w: t: @lyzadanger

Justin is a digital consultant by day, and by night creates the RWD Newsletter, hosts a RWD podcast and runs a RWD knowledge hub w: t: @justinavery


Espen Brunborg

Showcase Voices

CSS transforms, Canvas animation, SVG Clearleft

markup has the serenity of a Rothko painting – not surprising, coming from Clearleft, where semantics and HTML craft are forefront. “The hardest part was getting the diagonals working,” says Budd. “Once we’d nailed that, the rest was just tweaking the designs and animations.” It’s so solid and comfortable in various viewports that, from the receiving end, it doesn’t feel pinned to a particular platform, but is at home on a whole lot of them. Words by Lyza Danger Gardner

The RWD Handbook 49

“The site is responsive, fast, and sports an aesthetic that’s at once striking and welcoming. And those subtle CSS skew transforms are just stunning” Ethan Marcotte (@beep)


The site for 2015’s dConstruct conference in Brighton is a happy place to explore: “part 1920s Metropolis and part 1950s Jetsons,” according to Andy Budd at Clearleft. It’s sparkly. It animates gently. It’s awash with jaunty angles. The colours phase hot, then cool, then hot again as you tour through the content. Yet it’s less than one kilobyte on a primed cache. It scrolls like butter. Web fonts keep the look spunky and stylised, but they’re loaded asynchronously for better performance. Under the covers the site’s






The RWD Handbook 94


Designing for displays that don’t exist yet



Illustration by Ben Mounsey

What if you could decorate the walls of your home with electronic wallpaper, and change the content at will? This might sound like science fiction, but with a trend towards larger, more flexible, lower-power displays, we believe some form of ‘smart wallpaper’ could plausibly be with us in the not-too-distant future. Smart wallpaper is just one example of how our screens might evolve. Not long ago, almost all our web browsing took place on a desktop monitor. Now, many of us own numerous electronic rectangles of all shapes and sizes, and we’re increasingly adopting novel technology like wearable tech, flexible displays, virtual reality headsets and more. As developers and designers, one of the challenges we face is how to create compelling content for such a variety of unconventional devices. How can we anticipate how they will be used? And how can we create beautiful, intuitive content on such unfamiliar platforms? Additionally, at the BBC we need to understand how we can use these devices to enhance media experiences for our audience.

Recently, we built a browser-based smart wallpaper prototype. I’d like to share some insights we gathered during the project, in the hope that it might help guide

The fact that these devices are so experimental (some of them don’t even exist yet) can make creating new experiences for them seem like a very daunting task, but it is the only way we can test ideas and find out what does and doesn’t work. We believe that by anticipating emerging technologies and creating prototypes for user testing, we can refine our ideas so when they do eventually get manufactured, we will be ready for it.

anticipation for a technology through how it could be used, the market appetite could drive manufacturers into developing the technology sooner. And if you can somehow prototype your ideas and obtain user feedback, you could provide insights that ensure the technology will genuinely suit its audience. In practice, this means having an ‘ideas amnesty’: an open discussion to tease out all of your thinking (no


Devices are changing all the time. But what if the device you were designing for wasn’t flat? Or rigid? What if it hadn’t even been invented yet? Rosie Campbell did just that …

other developers and designers facing similarly unconventional tasks.

Let UX drive design


The RWD Handbook 95


The idea is to let the user experience, rather than the technology itself, drive the design. This concept is sometimes known as ‘design fiction’: taking inspiration from science fiction to create real-world prototypes in order to envision future technology and test out ideas. Think big about the experience you want to create for the user, and then let the technology catch up with you. This is pretty much the opposite of the approach traditionally taken: invest a lot of time and money inventing cool new technology, leaving the intended user experience as an afterthought. Inevitably, the result is underwhelming, the use cases feel contrived and the product struggles to make an impact. Instead, if you can create a sense of excitement and

Masterclass Series 116 (Sampler)  

You can subscribe to this magazine @

Read more
Read more
Similar to
Popular now
Just for you