Learn Responsive Design

A course exploring all aspects of responsive design. Learn how to make sites that look great and work well for everyone.

 

Welcome to Learn Responsive Design!

Article

A course exploring all aspects of responsive design. Learn how to make sites that look great and work well for everyone.

Introduction

Article

Find out where responsive design came from.

Media queries

Article

Adapt your designs to different screen sizes using CSS media queries.

Internationalization

Prepare your designs for different languages and writing modes.

Macro layouts

Article

Design page layouts using a choice of CSS techniques.

Micro layouts

Article

Build flexible components that can be placed anywhere.

Typography

Article

Make your text legible and beautiful, no matter where it appears.

Responsive images

Article

Give your visitors the most appropriate images for their devices and screens.

The picture element

Article

Exercise more creative control over your images.

Icons

Article

Use SVG for scalable responsive iconography.

Theming

Article

Adapt your designs to match user preferences such as a dark mode.

Accessibility

Article

Ensure that your website is available to everyone.

Interaction

Article

Prepare your pages for different input mechanisms; mouse, keyboard, and touch.

User interface patterns

Article

Consider some common UI elements that adapt to different screen sizes.

Media features

Article

A round-up of all the ways that media features let you respond to devices and preferences.

Screen configurations

Article

Prepare your content for devices with multiple screens.

Conclusion and next steps

Article

Further resources to help you take your next steps.