RESPONSIVE WEB DESIGN
@ piyushsinha
HI, I’M PIYUSH
@ piyushsinha

hello @ piyushsinha.com
I lead UX & Design efforts at

We just graduated from

We work at
At work, I’m involved in

UX 

VISUAL DESIGN 

HTML / CSS
A LITTLE BIT OF HISTORY
BEHIND RESPONSIVE

WEB DESIGN
Image Source: http://bradfrostweb.com/blog/web/responsive-web-design-missing-the-point/
Image Source: http://bradfrostweb.com/blog/web/responsive-web-design-missing-the-point/
Image Source: http://bradfrostweb.com/blog/web/responsive-web-design-missing-the-point/
SO WHAT IS RESPONSIVE
DESIGN ?
RESPONSIVE WEB DESIGN CONSISTS OF 3
COMPONENTS: FLEXIBLE GRID,
FLEXIBLE MEDIA AND MEDIA QUERIES
WHY SHOULD I USE IT ?
RESIZE.THATSH.IT
FOODSENSE.IS
STUFF & NONSENSE
MEDIAQUERI.ES
•

One website (Content created only once)	


•

No issues with sharing / search engines	


•

One design	


•

Layout ada...
HOW DO I IMPLEMENT IT?
•

Use percentages and em.	


•

Use floats for positioning, instead of absolute
positioning	


•

Use media queries	


•

...
ONE FORMULA TO RULE
THEM ALL
TARGET÷CONTEXT =RESULT
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
...
TARGET÷CONTEXT =RESULT
Let’s consider that your H1 font is 32 px and your
paragraph font is 16 px.


•



H1: 32÷16= 2, 

...
MEDIA QUERIES
•

Initializing a media query in HTML

<link href="styles.css" rel="stylesheet" media="all and (max-width: 1...
MEDIA QUERIES
•

Syntax

@media MediaType LogicalOperator (MediaQuery) {….}
all

screen

print

tv

braille


and

not

on...
MEDIA QUERIES
Example


•



@media all and (min-width: 800px) and (max-width: 1024px) {...}

@media all and (min-device-a...
FLEXIBLE MEDIA
img, video, canvas {max-width:100%; }
VIEWPORTS
<meta name="viewport" content="width=device-width">

Before

After

Image Source: https://developer.mozilla.org/...
VIEWPORTS
•

Viewport scale Properties

initial-scale

minimum-scale

maximum-scale

user-scalable	


•

Viewport Resoluti...
USEFUL TOOLS
RESPONSIVEPX.COM
PXTOEM.COM
GRIDPAK.COM
TWITTER BOOTSTRAP
ZURB FOUNDATION
Upcoming SlideShare
Loading in...5
×

Startup Institute Chicago: Responsive Web Design

492

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

×