Interaction to Next Paint (INP) becomes a Core Web Vital on March 12. Start making your websites more responsive to user input today. Learn how.
A course exploring all aspects of responsive design. Learn how to make sites that look great and work well for everyone.
check_circle
Welcome to Learn Responsive Design!
subject Article
A course exploring all aspects of responsive design. Learn how to make sites that look great and work well for everyone.
check_circle
Media queries
subject Article
Adapt your designs to different screen sizes using CSS media queries.
check_circle
Internationalization
subject Article
Prepare your designs for different languages and writing modes.
check_circle
Macro layouts
subject Article
Design page layouts using a choice of CSS techniques.
check_circle
Micro layouts
subject Article
Build flexible components that can be placed anywhere.
check_circle
Typography
subject Article
Make your text legible and beautiful, no matter where it appears.
subject Article
Give your visitors the most appropriate images for their devices and screens.
check_circle
Theming
subject Article
Adapt your designs to match user preferences such as a dark mode.
check_circle
Accessibility
subject Article
Ensure that your website is available to everyone.
check_circle
Interaction
subject Article
Prepare your pages for different input mechanisms; mouse, keyboard, and touch.
check_circle
User interface patterns
subject Article
Consider some common UI elements that adapt to different screen sizes.
check_circle
Media features
subject Article
A round-up of all the ways that media features let you respond to devices and preferences.
check_circle
Screen configurations
subject Article
Prepare your content for devices with multiple screens.
check_circle
Conclusion and next steps
subject Article
Further resources to help you take your next steps.
[{ "type": "thumb-down", "id": "missingTheInformationINeed", "label":"Missing the information I need" },{ "type": "thumb-down", "id": "tooComplicatedTooManySteps", "label":"Too complicated / too many steps" },{ "type": "thumb-down", "id": "outOfDate", "label":"Out of date" },{ "type": "thumb-down", "id": "samplesCodeIssue", "label":"Samples / code issue" },{ "type": "thumb-down", "id": "otherDown", "label":"Other" }] [{ "type": "thumb-up", "id": "easyToUnderstand", "label":"Easy to understand" },{ "type": "thumb-up", "id": "solvedMyProblem", "label":"Solved my problem" },{ "type": "thumb-up", "id": "otherUp", "label":"Other" }]
