15 really useful responsive web design tutorials

[Rss Bot 1]

Responsive web design is now easier than ever to implement, as there are so many great tools to help you create and test your designs. Here's our roundup of some of the best resources that will guide you in making your websites work well and look great on any device.

01. The pro's guide to responsive web design

Build better sites for any device with this guide

Written by Justin Avery, curator of the Responsive Design Weekly newsletter, this guide from net magazine takes web pros through the basics up to the more advanced responsive web design techniques.

02. How to design responsive and device-agnostic forms

Make sure your forms work, whatever the device

Forms are one of the most important elements in any digital product design, and whether you need a signup flow or a multi-view stepper, you need to design it so that'll work effectively on mobile devices just as well as on the desktop. Here's how to do it, complete with helpful tips on how to use Flexbox.

03. Create a responsive layout with CSS Grid

Build a great-looking portfolio site suitable for all the viewports

CSS Grid Layout is growing in browser support every day, and while it's not a replacement for Flexbox or even for floats, when used in combination with them it's a great way to create new and exciting responsive layouts. Follow this step-by-step guide to building a responsive portfolio site using Grid.

04. How to do responsive web design in the real world

Time for a video tutorial, and this one is from a talk by Matt D Smith at our Generate New York event from April 2016. In it, Smith discusses what it takes to handle both the pixels and the people really well when creating a responsive build as part of a team. He walks through a systematic, designer-focused process that will make your next responsive project a success.

05. The web designer's guide to Flexbox

Get started with Flexbox

Have you started using Flexbox yet? In this tutorial Wes Bos provides a comprehensive guide to the core concepts that will give you a solid understanding of everything you need to get to grips with this powerful tool.

06. Codrops Flexbox reference

A complete guide by Sara Soueidan

This complete guide to Flexbox is written by Sara Soueidan, an author who is renowned for her ability to explain concepts in a way that's easy to follow without scrimping on detail. The Codrops guide is regularly updated so it's a great resource to return to when you need it. 

07. Stacks: Flexbox for Sketch

Get Flexbox capabilities within Sketch

Stacks, part of the Auto Layout plugin, provide a way for you to use Flexbox technology within Sketch, without using CSS. This article explains how you can make use of this powerful technique for easy responsive design. 

08. A crash course in technical RWD

Get the grips with the basics of responsive web design

Writing on the Treehouse blog, Jerry Cao has condensed a lot of useful information into a relatively short, readable article.

09. Create flexible layouts with Susy and Breakpoint

Sass extensions to take care of responsive maths

If you don’t want to use a framework to build your responsive site, these Sass extensions are a nice alternative, each with their own strengths. They’ll take care of the responsive maths for you so you can focus on design. 

10. How to create responsive guides in Adobe XD

Adobe Experience Design, a new UX and prototyping tool

If you're keen to try out Adobe Experience Design (XD), here's a good tutorial to get you started. It includes a video demonstration that takes you through every click of the process.

11. CSS at BBC Sport

Lightweight CSS for a large responsive site

This isn't a tutorial per se, but there's a lot of learning here. In this post, the first of a two-part series, frontend developer Shaun Bent takes us on a detailed tour of how CSS is done at BBC Sport. They've managed to keep the CSS foundation of this massive site under 9kb, and it's fascinating to see how that's been done.

12. Sticky footer, five ways

Chris Coyier's sticky footer ways

Sticky footer... that should be simple enough, right? Unfortunately not. It can be trickier than you might expect to get that footer in the right place on every device. Luckily Chris Coyier has put together five tricks that will help you to make it happen using calc(), Flexbox, negative margins and Grid.

13. Adapting to input

Make sure your responsive site can accept input from any kind of device

Responsive design isn’t just about making your page display properly on any device, you also have to make it function well – and that means it has to be good at accepting input in a world where desktops have touchscreens and phones have keyboards. This article by Jason Grigsby of Cloud Four has some sound advice. 

14. Our best practices are killing mobile web performance

Performance considerations need to work for mobile, too

Applied without consideration, certain best practices that were conceived during the desktop era may have a detrimental effect on mobile web performance. This article will make you think more deeply about how you get your site to work well on mobile. 

15. How to make responsive web apps with container queries

Learn how to make your media scale, using container queries

Learn how to transform a beautiful, complex web app – with components, states and interactions – across different dimensions and resolutions, using container queries.

Related articles: 

• 9 responsive typography tips
• 7 great tools for testing your responsive web designs
• 7 game-changing web design tools for 2018

View the full article