Startup Institute Chicago: Responsive Web Design

750 views

Published on

Slides from my class at the Startup Institute on Responsive Web Design

Published in: Education, Business, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
750
On SlideShare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Startup Institute Chicago: Responsive Web Design

  1. 1. RESPONSIVE WEB DESIGN @ piyushsinha
  2. 2. HI, I’M PIYUSH @ piyushsinha hello @ piyushsinha.com
  3. 3. I lead UX & Design efforts at We just graduated from We work at
  4. 4. At work, I’m involved in UX 
 VISUAL DESIGN 
 HTML / CSS
  5. 5. A LITTLE BIT OF HISTORY BEHIND RESPONSIVE
 WEB DESIGN
  6. 6. Image Source: http://bradfrostweb.com/blog/web/responsive-web-design-missing-the-point/
  7. 7. Image Source: http://bradfrostweb.com/blog/web/responsive-web-design-missing-the-point/
  8. 8. Image Source: http://bradfrostweb.com/blog/web/responsive-web-design-missing-the-point/
  9. 9. SO WHAT IS RESPONSIVE DESIGN ?
  10. 10. RESPONSIVE WEB DESIGN CONSISTS OF 3 COMPONENTS: FLEXIBLE GRID, FLEXIBLE MEDIA AND MEDIA QUERIES
  11. 11. WHY SHOULD I USE IT ?
  12. 12. RESIZE.THATSH.IT
  13. 13. FOODSENSE.IS
  14. 14. STUFF & NONSENSE
  15. 15. MEDIAQUERI.ES
  16. 16. • One website (Content created only once) • No issues with sharing / search engines • One design • Layout adapts to any screen size
  17. 17. HOW DO I IMPLEMENT IT?
  18. 18. • Use percentages and em. • Use floats for positioning, instead of absolute positioning • Use media queries • Use flexible media widths
  19. 19. ONE FORMULA TO RULE THEM ALL
  20. 20. TARGET÷CONTEXT =RESULT
  21. 21. TARGET÷CONTEXT =RESULT For a container that’s 1200 px wide, and has a sidebar 300 px wide, and the content area is 900 px
 • 
 Sidebar: 300÷1200= 0.25, 
 so we can set sidebar width to 25%
 
 Content area: 900÷1200= 0.75, 
 so we can set content area width to 75%

  22. 22. TARGET÷CONTEXT =RESULT Let’s consider that your H1 font is 32 px and your paragraph font is 16 px.
 • 
 H1: 32÷16= 2, 
 so we can set H1 font size to 2 em

  23. 23. MEDIA QUERIES • Initializing a media query in HTML
 <link href="styles.css" rel="stylesheet" media="all and (max-width: 1024px)”> • Initializing a media query in CSS
 Using @media
 @media all and (max-width: 1024px) {...}
 Using @import
 @import url(styles.css) all and (max-width: 1024px) {...}
  24. 24. MEDIA QUERIES • Syntax
 @media MediaType LogicalOperator (MediaQuery) {….} all
 screen
 print
 tv
 braille
 and
 not
 only width
 height
 device-width
 device-height
 orientation
 aspect-ratio
 device-aspect-ratio
 color
 color-index
 monochrome
 resolution
 scan
 grid
  25. 25. MEDIA QUERIES Example
 • 
 @media all and (min-width: 800px) and (max-width: 1024px) {...}
 @media all and (min-device-aspect-ratio: 16/9)
 @media all and (orientation: landscape) {...}
  26. 26. FLEXIBLE MEDIA img, video, canvas {max-width:100%; }
  27. 27. VIEWPORTS <meta name="viewport" content="width=device-width"> Before After Image Source: https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
  28. 28. VIEWPORTS • Viewport scale Properties
 initial-scale
 minimum-scale
 maximum-scale
 user-scalable • Viewport Resolution
 target-densitydpi=device-dpi
  29. 29. USEFUL TOOLS
  30. 30. RESPONSIVEPX.COM
  31. 31. PXTOEM.COM
  32. 32. GRIDPAK.COM
  33. 33. TWITTER BOOTSTRAP
  34. 34. ZURB FOUNDATION

×