10 really useful responsive web design tutorials

Ensure your website has the optimal viewing experience with these helpful responsive web design tutorials.

Responsive web design can be daunting if you have limited or no experience. Thankfully, we've rounded up these really useful tutorials to help you from day one. And once you've done your learning, you can check out these RWD problems and how to solve them...

01. A crash course in technical responsive web design

responsive web design tutorials

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.

02. Create the perfect website layout system

responsive web design tutorials

Accomodate your site to a number of different devices

Learn about CSS columns, viewport-relative units, quantity selectors, container queries and much more in this tutorial on choosing the right technique for the job when putting your layouts together.

03. How to create flexible layouts with Susy and Breakpoint

responsive web design tutorials

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. 

04. How to create responsive guides in Adobe XD

responsive web design tutorials

Adobe Experience Design, a new UX and prototyping tool

If you're keen to try out Adobe Experience Design, Adobe's new UX and prototyping app, here's a good tutorial to get you started. It includes a video demonstration which takes you through every click of the process.

05. The web designer's guide to flexbox

responsive web design tutorials

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. CSS at BBC Sport

responsive web design tutorials

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, front end 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.

07. Sticky footer, five ways

responsive web design tutorials

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.

08. 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. 

09. When to use Flexbox

Make good decisions about using flexbox

Flexbox is a great tool for responsive sites, but sometimes other layout methods are a better fit. This article will help you make good decisions. 

10. 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. 


Tanya Combrinck is digital editor on net magazine.