Your SlideShare is downloading. ×
0
Responsive Web Design - What You Need to Know to Get Started
Responsive Web Design - What You Need to Know to Get Started
Responsive Web Design - What You Need to Know to Get Started
Responsive Web Design - What You Need to Know to Get Started
Responsive Web Design - What You Need to Know to Get Started
Responsive Web Design - What You Need to Know to Get Started
Responsive Web Design - What You Need to Know to Get Started
Responsive Web Design - What You Need to Know to Get Started
Responsive Web Design - What You Need to Know to Get Started
Responsive Web Design - What You Need to Know to Get Started
Responsive Web Design - What You Need to Know to Get Started
Responsive Web Design - What You Need to Know to Get Started
Responsive Web Design - What You Need to Know to Get Started
Responsive Web Design - What You Need to Know to Get Started
Responsive Web Design - What You Need to Know to Get Started
Responsive Web Design - What You Need to Know to Get Started
Responsive Web Design - What You Need to Know to Get Started
Responsive Web Design - What You Need to Know to Get Started
Responsive Web Design - What You Need to Know to Get Started
Responsive Web Design - What You Need to Know to Get Started
Responsive Web Design - What You Need to Know to Get Started
Responsive Web Design - What You Need to Know to Get Started
Responsive Web Design - What You Need to Know to Get Started
Responsive Web Design - What You Need to Know to Get Started
Responsive Web Design - What You Need to Know to Get Started
Responsive Web Design - What You Need to Know to Get Started
Responsive Web Design - What You Need to Know to Get Started
Responsive Web Design - What You Need to Know to Get Started
Responsive Web Design - What You Need to Know to Get Started
Responsive Web Design - What You Need to Know to Get Started
Responsive Web Design - What You Need to Know to Get Started
Responsive Web Design - What You Need to Know to Get Started
Responsive Web Design - What You Need to Know to Get Started
Responsive Web Design - What You Need to Know to Get Started
Responsive Web Design - What You Need to Know to Get Started
Responsive Web Design - What You Need to Know to Get Started
Responsive Web Design - What You Need to Know to Get Started
Responsive Web Design - What You Need to Know to Get Started
Responsive Web Design - What You Need to Know to Get Started
Responsive Web Design - What You Need to Know to Get Started
Responsive Web Design - What You Need to Know to Get Started
Responsive Web Design - What You Need to Know to Get Started
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

Responsive Web Design - What You Need to Know to Get Started

1,798

Published on

Published in: Technology
1 Comment
1 Like
Statistics
Notes
No Downloads
Views
Total Views
1,798
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
19
Comments
1
Likes
1
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 what you need to know to get started Jenny Brandon Librarian / Web Designer Michigan State University Libraries jbrandon@mail.lib.msu.edu
  • 2. I am not an expert.
  • 3. What I’ll Talk About Today • What RWD is • Why use it • Basic Techniques • Options • What we did • Who has done it
  • 4. WHAT IS RWD? (Responsive Web Design)
  • 5. Responsive web design is a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices. http://en.wikipedia.org/wiki/Responsive_web_design
  • 6. “Fluid grids, flexible images, and media queries are the three technical ingredients for responsive web design, but it also requires a different way of thinking. Rather than quarantining our content into disparate, device- specific experiences, we can use media queries to progressively enhance our work within different viewing contexts.” -- Ethan Marcotte, 2010 http://alistapart.com/article/responsive-web-design/
  • 7. RWD is design that responds to the size of the browser window or device. More succinct: RWD is conditional CSS. Goal: Create one website that looks good on large monitors, small mobile devices, and everything in between.
  • 8. BRWD (Before Responsive Web Design)
  • 9. Fixed Width Layout
  • 10. Fluid Layouts
  • 11. Why do we need RWD?
  • 12. Elements of RWD • Media Queries • Flexible Grids / Frameworks • Flexible Images / Media
  • 13. Media Queries Add to head section of website: <link rel=“stylesheet” href=“css/responsive.css” media=“screen and (max- width: 900px)”> and/or Add to stylesheet/CSS: @media screen and (max-width: 500px) { div.mobile { width: auto; float: none; margin-right: 0; } }
  • 14. Default Media Queries in Omega 3 (Drupal Theme) Narrow Layout: @media all and (min-width: 740px) and (min-device-width: 740px), (max-device-width: 800px) and (min-width: 740px) and (orientation:landscape) Normal Layout: @media all and (min-width: 980px) and (min-device-width: 980px), all and (max-device-width: 1024px) and (min-width: 1024px) and (orientation:landscape) Wide Layout: @media all and (min-width: 1220px)
  • 15. Other media types http://www.w3schools.com/css/css_mediatypes.asp
  • 16. Breakpoints (width in media query) “Every time you see 320px, 480px, 768px, 1024px used as breakpoint values, a kitten gets its head bitten off by an angel…or something like that.” -- Brad Frost http://bradfrostweb.com/blog/post/7-habits-of-highly-effective-media-queries/ (Let content determine breakpoints)
  • 17. Flexible Grids / Frameworks • Define your own parameters (more control) – Wrapper and column widths in % or ems – Floats (drop content down) • Premade Grid / Framework (save time)
  • 18. Frameworks • 960grid • YAML • The Golden Grid • SimpleGrid • Frameless • Columnal • 1140 CSS Grid • Skeleton http://www.awwwards.com/grid-based-web-design-resources.html
  • 19. 960 Grid System
  • 20. Flexible Images / Media • Bandwidth: different images for devices • Set max-width: 100% on the img • Videos - Similar situation as images.
  • 21. Images img { max-width: 100%; height: auto; }
  • 22. Old Browsers / IE compatibility • html5shiv https://code.google.com/p/html5shiv/ • Modernizr http://modernizr.com • Respond https://github.com/scottjehl/Respond
  • 23. LAYOUT PATTERNS http://www.lukew.com/ff/entry.asp?1514
  • 24. Mostly Fluid
  • 25. Column Drop
  • 26. Layout Shifter
  • 27. Tiny Tweaks
  • 28. Off Canvas
  • 29. Ready to get started? Do It Yourself (in house) • Web designer / frontend developer • Web team • Time to train/learn • Time to implement Use a Vendor • No web designer / frontend developer • No web team • No time to train/learn • Time to implement
  • 30. What MSU Libraries Did • Planned to migrate to CMS • Decided on Drupal • Chose to use Omega 3 base theme with 960gs framework (responsive & save time) • Several months of training, investigating, learning, testing, implementing • Launched August 2013
  • 31. Truly Mobile First University of Pittsburgh Library System http://www.library.pitt.edu
  • 32. Who has a responsive website? Michigan Libraries • Academic Libraries, 15% – 23 out of 153 • Public Libraries, 10% – 39 out of 391
  • 33. References • http://www.smashingmagazine.com/2009/06 /02/fixed-vs-fluid-vs-elastic-layout-whats-the- right-one-for-you/ • http://www.lukew.com/ff/entry.asp?1514 • https://www.youtube.com/watch?v=BIz02qY5 BRA
  • 34. QUESTIONS?

×