Startup Institute Chicago: Responsive Web Design

  • 400 views
Uploaded on

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

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

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
400
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
0
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. RESPONSIVE WEB DESIGN @ piyushsinha
  • 2. HI, I’M PIYUSH @ piyushsinha hello @ piyushsinha.com
  • 3. I lead UX & Design efforts at We just graduated from We work at
  • 4. At work, I’m involved in UX 
 VISUAL DESIGN 
 HTML / CSS
  • 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