Responsive Design Overview

What is Responsive Design?

• A way of making websites that can be easily viewed and used on any type of device and size of screen

Advantages of Responsive Design

• Developers only have to create one website, one design, one set of code, and one set of content

• Better optimized for search (SEO), no longer need to use m-dot websites

Examples of Responsive Design

• www.worldwildlife.org

• www.bostonglobe.com

Two Main Components of Responsive Design

• Media Queries

• Flexibility

Media Queries

• Allow you to use CSS to change the design of the website depending on the width of the device’s screen / viewport

Flexibility

• Concept means that our Horizontal measurements on our site need to respond to changes in the size of the screen

• This means:

  • Width of columns and other layout elements will be in percentages

  • Text will be measured in a relative unit (ems or percentages)

Implementing Responsive Desgin

• Add Viewport Meta Tag to your tag

• Use Media Queries

• Leverage EMs/REMs or Percentages instead of pixels