Responsive Web Design
what you need to know to get started
Jenny Brandon
Librarian / Web Designer
Michigan State Universit...
I am not an expert.
What I’ll Talk About Today
• What RWD is
• Why use it
• Basic Techniques
• Options
• What we did
• Who has done it
WHAT IS RWD?
(Responsive Web Design)
Responsive web design is a web design
approach aimed at crafting sites to provide an
optimal viewing experience—easy readi...
“Fluid grids, flexible images, and media queries
are the three technical ingredients for
responsive web design, but it als...
RWD is design that responds to the size of the
browser window or device.
More succinct: RWD is conditional CSS.
Goal:
Crea...
BRWD
(Before Responsive Web Design)
Fixed Width Layout
Fluid Layouts
Why do we need RWD?
Elements of RWD
• Media Queries
• Flexible Grids / Frameworks
• Flexible Images / Media
Media Queries
Add to head section of website:
<link rel=“stylesheet” href=“css/responsive.css” media=“screen and (max-
wid...
Default Media Queries in Omega 3
(Drupal Theme)
Narrow Layout:
@media all and (min-width: 740px) and (min-device-width: 74...
Other media types
http://www.w3schools.com/css/css_mediatypes.asp
Breakpoints
(width in media query)
“Every time you see 320px, 480px, 768px,
1024px used as breakpoint values, a kitten get...
Flexible Grids / Frameworks
• Define your own parameters (more control)
– Wrapper and column widths in % or ems
– Floats (...
Frameworks
• 960grid
• YAML
• The Golden Grid
• SimpleGrid
• Frameless
• Columnal
• 1140 CSS Grid
• Skeleton
http://www.aw...
960 Grid System
Flexible Images / Media
• Bandwidth: different images for devices
• Set max-width: 100% on the img
• Videos - Similar situ...
Images
img {
max-width: 100%;
height: auto;
}
Old Browsers / IE compatibility
• html5shiv
https://code.google.com/p/html5shiv/
• Modernizr
http://modernizr.com
• Respon...
LAYOUT PATTERNS
http://www.lukew.com/ff/entry.asp?1514
Mostly Fluid
Column Drop
Layout Shifter
Tiny Tweaks
Off Canvas
Ready to get started?
Do It Yourself (in house)
• Web designer / frontend
developer
• Web team
• Time to train/learn
• Tim...
What MSU Libraries Did
• Planned to migrate to CMS
• Decided on Drupal
• Chose to use Omega 3 base theme with 960gs
framew...
Truly Mobile First
University of Pittsburgh Library System
http://www.library.pitt.edu
Who has a responsive website?
Michigan Libraries
• Academic Libraries, 15%
– 23 out of 153
• Public Libraries, 10%
– 39 ou...
References
• http://www.smashingmagazine.com/2009/06
/02/fixed-vs-fluid-vs-elastic-layout-whats-the-
right-one-for-you/
• ...
QUESTIONS?
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
×

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

2,706
-1

Published on

Published in: Technology
1 Comment
1 Like
Statistics
Notes
No Downloads
Views
Total Views
2,706
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
20
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide

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

  1. 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. 2. I am not an expert.
  3. 3. What I’ll Talk About Today • What RWD is • Why use it • Basic Techniques • Options • What we did • Who has done it
  4. 4. WHAT IS RWD? (Responsive Web Design)
  5. 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. 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. 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. 8. BRWD (Before Responsive Web Design)
  9. 9. Fixed Width Layout
  10. 10. Fluid Layouts
  11. 11. Why do we need RWD?
  12. 12. Elements of RWD • Media Queries • Flexible Grids / Frameworks • Flexible Images / Media
  13. 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. 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. 15. Other media types http://www.w3schools.com/css/css_mediatypes.asp
  16. 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. 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. 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. 19. 960 Grid System
  20. 20. Flexible Images / Media • Bandwidth: different images for devices • Set max-width: 100% on the img • Videos - Similar situation as images.
  21. 21. Images img { max-width: 100%; height: auto; }
  22. 22. Old Browsers / IE compatibility • html5shiv https://code.google.com/p/html5shiv/ • Modernizr http://modernizr.com • Respond https://github.com/scottjehl/Respond
  23. 23. LAYOUT PATTERNS http://www.lukew.com/ff/entry.asp?1514
  24. 24. Mostly Fluid
  25. 25. Column Drop
  26. 26. Layout Shifter
  27. 27. Tiny Tweaks
  28. 28. Off Canvas
  29. 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. 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. 31. Truly Mobile First University of Pittsburgh Library System http://www.library.pitt.edu
  32. 32. Who has a responsive website? Michigan Libraries • Academic Libraries, 15% – 23 out of 153 • Public Libraries, 10% – 39 out of 391
  33. 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. 34. QUESTIONS?
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×