1
check_circle
Welcome to Learn Responsive Design!
keyboard_arrow_down
keyboard_arrow_up
subject
Article
A course exploring all aspects of responsive design. Learn how to make sites that look great and work well for everyone.
2
check_circle
Introduction
keyboard_arrow_down
keyboard_arrow_up
subject
Article
Find out where responsive design came from.
3
check_circle
Media queries
keyboard_arrow_down
keyboard_arrow_up
subject
Article
Adapt your designs to different screen sizes using CSS media queries.
4
check_circle
Internationalization
keyboard_arrow_down
keyboard_arrow_up
subject
Article
Prepare your designs for different languages and writing modes.
5
check_circle
Macro layouts
keyboard_arrow_down
keyboard_arrow_up
subject
Article
Design page layouts using a choice of CSS techniques.
6
check_circle
Micro layouts
keyboard_arrow_down
keyboard_arrow_up
subject
Article
Build flexible components that can be placed anywhere.
7
check_circle
Typography
keyboard_arrow_down
keyboard_arrow_up
subject
Article
Make your text legible and beautiful, no matter where it appears.
8
check_circle
Responsive images
keyboard_arrow_down
keyboard_arrow_up
subject
Article
Give your visitors the most appropriate images for their devices and screens.
9
check_circle
The picture element
keyboard_arrow_down
keyboard_arrow_up
subject
Article
Exercise more creative control over your images.
10
check_circle
Icons
keyboard_arrow_down
keyboard_arrow_up
subject
Article
Use SVG for scalable responsive iconography.
11
check_circle
Theming
keyboard_arrow_down
keyboard_arrow_up
subject
Article
Adapt your designs to match user preferences such as a dark mode.
12
check_circle
Accessibility
keyboard_arrow_down
keyboard_arrow_up
subject
Article
Ensure that your website is available to everyone.
13
check_circle
Interaction
keyboard_arrow_down
keyboard_arrow_up
subject
Article
Prepare your pages for different input mechanisms; mouse, keyboard, and touch.
14
check_circle
User interface patterns
keyboard_arrow_down
keyboard_arrow_up
subject
Article
Consider some common UI elements that adapt to different screen sizes.
15
check_circle
Media features
keyboard_arrow_down
keyboard_arrow_up
subject
Article
A round-up of all the ways that media features let you respond to devices and preferences.
16
check_circle
Screen configurations
keyboard_arrow_down
keyboard_arrow_up
subject
Article
Prepare your content for devices with multiple screens.
17
check_circle
Conclusion and next steps
keyboard_arrow_down
keyboard_arrow_up
subject
Article
Further resources to help you take your next steps.
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],[],[],[]]