Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
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
jbrandon@mail.lib.msu.edu
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.
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.
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)
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