Responsive Web Design

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

Summary

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%;
}
				

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

• Demo 1
• Demo 2
• Demo 3
• Demo 4

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/