css-notes/5. Responsive Design and Advanced Selectors/2. RESPONSIVE_DESIGN.md

CSS - Responsive Design

Lesson Objectives

1. Explain responsiveness and why we need it
2. Describe fluid layout
3. Describe the "mobile first" development process
4. Explain min/max-height/width
5. Define media queries and why we need them

Explain responsiveness

The Backstory

The Phone/Tablet/Phablet wars. Apple, Google, Samsung and a bunch of other companies all released a bunch of devices, all with various dimensions.

Initially, we would test to determine which device was viewing the site, and then serve up different content based on that. This was called adaptive.

Now

Soon there were too many devices to examine and too much different code to write, so we decided to serve the same content to all devices, but modify it slightly so that it still looks good. This is called responsive.

In responsive, the content responds to device attributes

• width
• height
• orientation
• media

Methods to achieve this

• fluid layout
• mobile first
• min/max-height-width
• media queries

Describe Fluid Layout

Layout using percentages so that content shrinks and expands with window dimensions

Describe the "mobile first" development process

1. Term is mostly used for designers
2. Also applies to developers
   • start by developing mobile and move upward
   • don't go desktop to mobile

Explain min/max-height/width

1. max-width/height
2. min-width/height
   • EXAMPLE nav when squished
     • keep item text on one line
     • combine min-width with percentage

Define media queries and why we need them

media query possibilites

@media (min-width: 600px) {
    body {
        background-color: lightblue;
    }
}

• http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
• media types
  • screen
  • print
  • tv
• media features
  • min-width
  • max-width
  • min-height
  • max-height
  • orientation
  • resolution

Use mobile-first ideology with media queries

Start with mobile device design and then add media queries for larger screens

• mobile devices typically slower
• will read mobile css and discard larger device css
• larger devices will read mobile data and overwrite
  • this is okay since they're faster
• could also have media queries for small devices too
  • fine, but can get complex with lots of media queries
  • can scan and assume existing queries are only for large devices