Ad
More Related Content
Similar to Responsive Web Design - What You Need to Know to Get Started (20)
Recently uploaded (20)
Ad
Responsive Web Design - What You Need to Know to Get Started
- 1. Responsive Web Design what you need to know to get started Jenny Brandon Librarian / Web Designer Michigan State University Libraries [email protected]
- 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/
- 8. 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.
- 10. BRWD (Before Responsive Web Design)
- 12. Fluid Layouts
- 13. Why do we need RWD?
- 15. Elements of RWD • Media Queries • Flexible Grids / Frameworks • Flexible Images / Media
- 16. 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; } }
- 17. 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)
- 19. 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)
- 20. 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)
- 21. Frameworks • 960grid • YAML • The Golden Grid • SimpleGrid • Frameless • Columnal • 1140 CSS Grid • Skeleton http://www.awwwards.com/grid-based-web-design-resources.html
- 22. 960 Grid System
- 23. Flexible Images / Media • Bandwidth: different images for devices • Set max-width: 100% on the img • Videos - Similar situation as images.
- 24. Images img { max-width: 100%; height: auto; }
- 25. Old Browsers / IE compatibility • html5shiv https://code.google.com/p/html5shiv/ • Modernizr http://modernizr.com • Respond https://github.com/scottjehl/Respond
- 27. Mostly Fluid
- 28. Column Drop
- 29. Layout Shifter
- 30. Tiny Tweaks
- 31. Off Canvas
- 32. 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
- 33. 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
- 39. Truly Mobile First University of Pittsburgh Library System http://www.library.pitt.edu
- 40. Who has a responsive website? Michigan Libraries • Academic Libraries, 15% – 23 out of 153 • Public Libraries, 10% – 39 out of 391
- 41. 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
- 42. QUESTIONS?