• Like
Approaches to Responsive Wen Design & Development
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Approaches to Responsive Wen Design & Development

  • 584 views
Published

 

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

Views

Total Views
584
On SlideShare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
14
Comments
0
Likes
3

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. 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 – cssgrid.net (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• http://css-tricks.com/snippets/css/media-queries-for- standard-devices/• http://nmsdvid.com/snippets/
  • 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;}• http://css-tricks.com/video-source-by-screen-size/ - Different videos depending on screen size and device• http://retinajs.com/ - Retina Images
  • 11. Responsive Menus• Full Horizontal• Select Box (ex. RoomTemp)• Custom Dropdown (ex. Daystar)• Off Canvas• http://css-tricks.com/responsive-menu-concepts/
  • 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• PxtoEm.com• 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: Teamate.us