Responsive Web Design

http://glauberramos.github.com/responsive-design-presentation Created by Glauber Ramos / @glauberamos

Summary

  1. What is RWD
  2. Code Techniques
  3. General Techniques
  4. Demos

1 - What is Responsive Web Design

Ethan Marcotte

It is not new

It is a set of techniques

2 - Code Techniques

Flexible Grid


.content {
  padding: 4%;
  width: 900px;
}

Flexible Images


.figure-container {
  float: right;
  margin-bottom: 0.5em;
  width: 48.7341772%; /* 231px / 474px */
}

img {
  max-width: 100%;
}
Fluid Image Tests

Media Types


@media screen and (min-width: 320px) {
  #navigation {
    display: none;
  }

  #sitemap-container ul {
    margin-left: 5%;
  }
}
  • Screen
  • Print
  • Tv
  • Projection
  • All

Media Queries


@media screen and (min-width: 320px) {
  #navigation {
    display: none;
  }

  #sitemap-container ul {
    margin-left: 5%;
  }
}
  • min-width min-height
  • max-width max-height
  • device-aspect-ratio
  • orientation

Meta Tag


 meta name="viewport" content="initial-scale=1.0, width=device-width"

3 - General Techniques

Design on the browser

Breakpoints

Mobile 320px

Tablet 768px

Notebook 1024px

Resizing the browser

Breakpoint when content breaks

More information

  • http://www.alistapart.com/articles/responsive-web-design/
  • http://www.alistapart.com/articles/dao/
  • http://www.abookapart.com/products/responsive-web-design
  • http://mediaqueri.es/
  • http://mattkersley.com/responsive/
  • https://github.com/scottjehl/Respond
  • http://socialdriver.com/2012/07/20-best-responsive-websites/
  • http://foundation.zurb.com/
  • http://www.netmagazine.com/features/top-responsive-web-design-problems-and-how-avoid-them
  • http://bradfrostweb.com/blog/web/responsive-nav-patterns/