• Save
Startup Institute Chicago: Responsive Web Design
Upcoming SlideShare
Loading in...5
×
 

Startup Institute Chicago: Responsive Web Design

on

  • 614 views

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

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

Statistics

Views

Total Views
614
Views on SlideShare
610
Embed Views
4

Actions

Likes
0
Downloads
0
Comments
0

3 Embeds 4

http://www.linkedin.com 2
https://twitter.com 1
https://www.linkedin.com 1

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Startup Institute Chicago: Responsive Web Design Startup Institute Chicago: Responsive Web Design Presentation Transcript

  • 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 adapts to any screen size
  • HOW DO I IMPLEMENT IT?
  • • Use percentages and em. • Use floats for positioning, instead of absolute positioning • Use media queries • Use flexible media widths
  • 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
 • 
 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%

  • 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

  • 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) {...}
  • 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
  • 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) {...}
  • FLEXIBLE MEDIA img, video, canvas {max-width:100%; }
  • VIEWPORTS <meta name="viewport" content="width=device-width"> Before After Image Source: https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
  • VIEWPORTS • Viewport scale Properties
 initial-scale
 minimum-scale
 maximum-scale
 user-scalable • Viewport Resolution
 target-densitydpi=device-dpi
  • USEFUL TOOLS
  • RESPONSIVEPX.COM
  • PXTOEM.COM
  • GRIDPAK.COM
  • TWITTER BOOTSTRAP
  • ZURB FOUNDATION