Your SlideShare is downloading. ×
Approaches to Responsive Wen Design & Development
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

Approaches to Responsive Wen Design & Development


Published on

Published in: Technology

  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. Approaches toResponsive Design &DevelopmentJanuary 21, 2013
  • 2. What is Responsive Design? • An approach to web design in which a site is crafted to provide an optimal viewing experience – easy reading and navigation with a minimum of resizing, panning, and scrolling – across a wide range of devices (Wikipedia) • Ethan Marcotte, A List Apart, Responsive Web Design (May 25, 2010) • No longer a ‘luxury’
  • 3. Elements of Responsive Design• Fluid Grids & Fluid Layouts• Media Queries• Flexible Images/Media• Responsive Menus• Flexible type
  • 4. Fluid Layouts• Benefits vs. fixed-width layout; drawbacks• Target / Context = Result Fixed-Width (based on pixels) Fluid Layout (based on %’s)
  • 5. Fluid Grids• Typically 12 or 16 columns with column width and gutters based on %’s• Example:
  • 6. Using Fluid Grids• 1140gs – (PSD template included)• Foundation by Zurb (framework)• Twitter Bootstrap (framework)• Use 12/16 column PSD template when creating mockup
  • 7. Media Queries• Placed in stylesheet (can also use Javascript detection)• Looks at the capability of the device and checks for: • Width & Height of browser window • Orientation • Resolution• standard-devices/•
  • 8. Media Query Example@media only screen and (min-device-width: 320px) and (max-device-width : 480px){ #primary-nav {display:none;} #responsive-nav {display:block;}}• Example: RoomTemp• Concept of ‘breakpoints’
  • 9. Media Query Breakpoints• Browser widths that have a media query declaration to change the layout once the browser is within the declared range• 320 px — Mobile portrait• 480 px — Mobile landscape• 600 px — Small tablet• 768 px — Tablet portrait• 1024 px — Tablet landscape/Netbook• 1280 px & greater — Desktop
  • 10. Flexible Images & Mediaimg, embed, iframe {Max-width:100%;Height:auto;}• - Different videos depending on screen size and device• - Retina Images
  • 11. Responsive Menus• Full Horizontal• Select Box (ex. RoomTemp)• Custom Dropdown (ex. Daystar)• Off Canvas•
  • 12. Flexible Typography• Set body to font-size:100% / 1em (16px)• Base all fonts relative to the base font size, so a 32px H1 would be 2em (32 / 16 = 2)• This makes it easy to adjust all typography with a single media query, changing the body font-size up or down•• CSS3 rems (based off HTML element, no nesting)
  • 13. Responsive Frameworks• Based around a fluid grid (except Skeleton); some contain user interface elements and additional features• Skeleton• Twitter Bootstrap• Zurb Foundation• 1140 CSS Grid
  • 14. Advantages of Frameworks• Basic media queries & responsiveness done for you• Cross-browser tested• Rapid protoyping; grid template provided for designing• Drawbacks: learning curve, lots of markup, can be tough to create highly custom designs
  • 15. Helpful Plugins• CSS3-Mediaqueries.js (support for media queries on IE8 and below)• Retina.js (serve up high res images)• Fittext.js (scalable headlines)• FlexSlider (responsive slider)• FitVids.js (fluid video embeds)
  • 16. Hacking Responsive WordpressThemes• Inspect the behavior of the site• Look at the media queries• Determine if they are using a framework…learn how to incorporate that• Example: