16 Dec 2017

Responsive Design

RWD is incredibly simple. Flexible grids for the layout, flexible media (images, video, iframes), and apply @media queries to update these measurements to best arrange content on any viewport. One source, millions of viewports.

In practice, we’ve learned that it is not really that easy. Tiny issues that crop up during every project that keeps us scratching our heads and occasionally carving fingernail trenches on our desks.

Ever since I began curating the Responsive Design Weekly newsletter I’ve been fortunate to speak with many of you and feature your experiences each week. With a few hundred great tips in the bag I wanted to know what you what you wanted to learn, and through a survey circulated to the readers here were the top results.

- Responsive Images
- Improving Performance
- Responsive Typography
- Media queries in javascript
- Progressive Enhancement
- Layout

Responsive Images

Fluid media was a key part of RWD when first defined by Ethan Marcotte. width: 100%; max-width: 100%; still works today but the responsive images landscape has become a lot more complicated.

With increasing screen sizes, density, and devices to support we craved greater control over the image being sent to the user.

Performance

To get the fastest perceived performance on our pages we need all the HTML, CSS, and JS required to render the top part of our page within the first response from the server — that magic number is 14kb.

Patrick Hamann, Technical Front End lead at the Guardian, and team has managed to break the 1000ms barrier by introducing a mixture of front end and backend techniques. The Guardians approach is to ensure the content — the news article — is delivered to the user as quickly as possible and within the 14kb magic number.

Conditional & Lazy loading

Conditional loading is improving the users experience based on their device features. Tools like Moderizr allow you to test for these features, but beware that just because a browser says it offers support that it doesn’t always mean full support. Another approach might be to “Cut the Mustard”.

If the browser is deemed as enhanced after the check then you can provide them with a more immersive experience. To see a working example try disabling javascript on the bbc.co.uk and see the difference.

Another approach might be to hold off loading something until the users shows intent to use a feature. This would be considered conditional based upon the user context. You can hold off loading in social icons until the user hovers or touches the icons, or you could avoid loading an iframe google map on smaller viewports where the user is likely to prefer linking to a dedicated mapping application.

Lazy loading is defined as something that you always intend to load on the page — images that are a part of the article, comments, or other related articles — but that don’t need to be there for the user to start consuming the content.

Responsive Typography

Typography is about making your content easy to digest. Responsive typography extends this to ensure readability across a wide variety of devices and viewports.

Jordan Moore admits that type is one thing he isn’t willing to budge on. Drop an image or two if you need, but make sure you have great typography.

If you are supporting multiple languages with your design then line length may vary as well. Jordan suggests using :lang(de) article {max-width: 30em} to cover off any issues there.

The rhythm can be interrupted with the introduction of images so it’s good to incorporate baseline.js or baselineAlign.js

Layout

Flexible layout is simple to say, but it has many different approaches.

Wave goodbye to using position and floats for our layouts. While they have done us well to date their use for layout has been a necessary hack. We’ve now got two new kids on the block that will help fix all our layout woes — Flexbox and Grids.

Grid is more for the macro level layout. The page. The grid layout module gives you a great way to describe your layout within your CSS.

While it’s still in draft at the moment I recommend following Rachel Andrew because as Ethan Marcotte put it “Rachel has forgotten more about the Grid Spec then any of us hope to learn”.

Finally

These are just a few tips to extend your responsive practice. When approaching any new responsive work take a step back and ensure that you get the basics right, start with your content, HTML and layer improved experiences upon them and there won’t be any limit to where you can take your designs.