Your SlideShare is downloading. ×
Startup Institute Chicago: Responsive Web Design
Startup Institute Chicago: Responsive Web Design
Startup Institute Chicago: Responsive Web Design
Startup Institute Chicago: Responsive Web Design
Startup Institute Chicago: Responsive Web Design
Startup Institute Chicago: Responsive Web Design
Startup Institute Chicago: Responsive Web Design
Startup Institute Chicago: Responsive Web Design
Startup Institute Chicago: Responsive Web Design
Startup Institute Chicago: Responsive Web Design
Startup Institute Chicago: Responsive Web Design
Startup Institute Chicago: Responsive Web Design
Startup Institute Chicago: Responsive Web Design
Startup Institute Chicago: Responsive Web Design
Startup Institute Chicago: Responsive Web Design
Startup Institute Chicago: Responsive Web Design
Startup Institute Chicago: Responsive Web Design
Startup Institute Chicago: Responsive Web Design
Startup Institute Chicago: Responsive Web Design
Startup Institute Chicago: Responsive Web Design
Startup Institute Chicago: Responsive Web Design
Startup Institute Chicago: Responsive Web Design
Startup Institute Chicago: Responsive Web Design
Startup Institute Chicago: Responsive Web Design
Startup Institute Chicago: Responsive Web Design
Startup Institute Chicago: Responsive Web Design
Startup Institute Chicago: Responsive Web Design
Startup Institute Chicago: Responsive Web Design
Startup Institute Chicago: Responsive Web Design
Startup Institute Chicago: Responsive Web Design
Startup Institute Chicago: Responsive Web Design
Startup Institute Chicago: Responsive Web Design
Startup Institute Chicago: Responsive Web Design
Startup Institute Chicago: Responsive Web Design
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Startup Institute Chicago: Responsive Web Design

463

Published 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

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
463
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
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

×