Responsive Design

Introduction

Responsive design is creating websites that respond to the user’s context. In other words, the website should be fully functional in different devices and screen sizes. Furthermore responsive design means creating a website that also covers the user’s accessibility needs.

There are a lot of good tools that help web developers to make responsive websites. Although it isn’t a rocket science to do a pretty good job at a responsive site, it takes a lot more work to do in order to nail it.

Duration: 2 minutes

Learning Objectives

  • What responsive design is
  • Why responsive design is important to our users
  • How to make a "fluid" layout
  • What Media Queries are
  • How to use media queries to make our website responsive

Study

  1. Read A List Apart’s comprehensive introduction to responsive design

  2. Watch the next short video and get a quick overview of the very important CSS media queries:

Duration: 7 minutes

  1. Read over the Responsive Web Tutorial from freecodecamp.

Tools

Here is a list of tools that you might want to bookmark, as they will help you in your journey through the world of responsive design:

  • Viewport Dimensions. Find your phone screen dimensions in a handy list of viewport sizes by device.

Additional Resources

In this section you can find a lot of helpful links to other content. This is a supplemental material for you if you want to dive deeper into some concepts.

Leave a Reply