Responsive Design (v1)

Introduction

Responsive design is creating websites that respond to the user’s context, whether that is the device they are viewing on, the size of their browser, or their accessibility needs. Lucky for you, there are lots of good tools that help you easily start making websites responsive. It’s not rocket science to do a pretty good job at a responsive site, though it’s a lot more work to get one that really nails it.

Duration: 2 minutes

Learning Objectives

  • What is responsive design?
  • Why is responsive design important to your users?
  • How do you make a "fluid" layout?
  • What are Media Queries?
  • How do you use media queries to make your 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 Lingulo, though you don’t have to build it.

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

LOOKING FOR HELP?

When looking for help, try doing so in the following order:

  • Did you try everything you could?
  • Did you read the documentation?
  • Did you Google for it?
  • Did you post your question on Slack/Forum?
  • Did you ask your fellow students for help?
  • Did you ask your Mentors for help?
  • Did you leave a comment on the comments section of this page?
  • Did you ask your Instructor for help?
    • Did you arrange and appointment with your instructor using Calendly? Visit this URL and set up an appointment: https://calendly.com/kostasx
    • Is it urgent? Did you try reaching him on Slack

UPDATED: 03.01.2021

  • Added Tools section
  • Added short video on Media Queries

CONTRIBUTORS