Startup Institute Chicago: Responsive Web Design

Startup Institute Chicago: Responsive Web Design

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

C2de752d5a220fa1295afdba0ef95ed2?s=128

Piyush Sinha

November 20, 2013
Tweet

Transcript

  1. RESPONSIVE WEB DESIGN @ piyushsinha

  2. HI, I’M PIYUSH @ piyushsinha hello @ piyushsinha.com

  3. I lead UX & Design efforts at We work at

    We just graduated from
  4. UX 
 VISUAL DESIGN 
 HTML / CSS At work,

    I’m involved in
  5. A LITTLE BIT OF HISTORY BEHIND RESPONSIVE
 WEB DESIGN

  6. Image Source: http://bradfrostweb.com/blog/web/responsive-web-design-missing-the-point/

  7. Image Source: http://bradfrostweb.com/blog/web/responsive-web-design-missing-the-point/

  8. Image Source: http://bradfrostweb.com/blog/web/responsive-web-design-missing-the-point/

  9. SO WHAT IS RESPONSIVE DESIGN ?

  10. RESPONSIVE WEB DESIGN CONSISTS OF 3 COMPONENTS: FLEXIBLE GRID, FLEXIBLE

    MEDIA AND MEDIA QUERIES
  11. WHY SHOULD I USE IT ?

  12. RESIZE.THATSH.IT

  13. FOODSENSE.IS

  14. STUFF & NONSENSE

  15. MEDIAQUERI.ES

  16. • One website (Content created only once) • No issues

    with sharing / search engines • One design • Layout adapts to any screen size
  17. HOW DO I IMPLEMENT IT?

  18. • Use percentages and em. • Use floats for positioning,

    instead of absolute positioning • Use media queries • Use flexible media widths
  19. ONE FORMULA TO RULE THEM ALL

  20. TARGET÷CONTEXT =RESULT

  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. 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. 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. 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. 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. FLEXIBLE MEDIA img, video, canvas {max-width:100%; }

  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. VIEWPORTS • Viewport scale Properties
 initial-scale
 minimum-scale
 maximum-scale
 user-scalable •

    Viewport Resolution
 target-densitydpi=device-dpi
  29. USEFUL TOOLS

  30. RESPONSIVEPX.COM

  31. PXTOEM.COM

  32. GRIDPAK.COM

  33. TWITTER BOOTSTRAP

  34. ZURB FOUNDATION