Responsive Web Apps
for the busy developer
Simon MacDonald
@macdonst
What makes me the expert on Responsive Web Design?
I read a book
What is responsive web design?
Responsive web design (RWD) or responsive design is an approach to web design that aims to make web pages render well on a variety of devices and window or screen sizes from minimum to maximum display size to ensure usability and satisfaction.
– Ethan Marcotte
Pillars of RWD
1
Flexible Layout
2
Media Queries
3
Flexible Images
Flexible Layout
Legacy Layouts - Tables
<html>
<body>
<table>
<tr>
<td colspan="3">Header</td>
</tr>
<tr>
<td rowspan="2"">Navigation</td>
<td>Content</td>
<td rowspan="2">Navigation</td>
</tr>
<tr>
<td>Footer</td>
</tr>
</table>
</body>
</html>
Legacy Layouts - Grid Systems
<div class="container">
<div class="row">
<div class="twelve columns">Header</div>
</div>
<div class="row">
<div class="two columns">Nav</div>
<div class="eight columns">
<div class="container">
<div class="row">
<div class="twelve columns">Content</div>
</div>
<div class="row">
<div class="twelve columns">Footer</div>
</div>
</div>
</div>
<div class="two columns">Aside</div>
</div>
</div>
Can I Use CSS Grid?
Photo by ThisisEngineering RAEng on Unsplash
If you are having code problems I feel bad for you son.
I got 99 problems but IE ain't one.
Let's build some layouts
Mobile
Laptop/Tablet
Desktop
body {
display: grid;
gap: 1em;
}Header
Navigation
Content
Footer
Block Layout
<html>
<body>
<header>Header</header>
<nav>Navigation</nav>
<main>Content</main>
<footer>Footer</footer>
</body>
</html>body {
display: grid;
gap: 1em;
grid-template-rows: auto auto 1fr auto;
min-height: 100vh;
}Header
Navigation
Content
Footer
Mobile Layout
<html>
<body>
<header>Header</header>
<nav>Navigation</nav>
<main>Content</main>
<footer>Footer</footer>
</body>
</html>body {
display: grid;
gap: 1em;
grid-template-columns: 12em auto;
grid-template-rows: auto 1fr auto;
}
header {
grid-column: span 3;
}
nav {
grid-row: span 2;
}Header
Nav
Content
Footer
Laptop Layout
<html>
<body>
<header>Header</header>
<nav>Navigation</nav>
<main>Content</main>
<footer>Footer</footer>
</body>
</html>body {
display: grid;
gap: 1em;
grid-template-columns: 12em auto 12em;
grid-template-rows: auto 1fr auto;
}
header {
grid-column: span 3;
}
nav, aside {
grid-row: span 2;
}Header
Nav
Content
Footer
Desktop Layout
Aside
<html>
<body>
<header>Header</header>
<nav>Navigation</nav>
<main>Content</main>
<aside>Aside</aside>
<footer>Footer</footer>
</body>
</html>body {
display: grid;
gap: 1em;
grid-template-columns: 12em auto 12em;
grid-template-rows: auto 1fr auto;
}
header {
grid-column: 1 / 4;
grid-row: 1;
}
nav {
grid-column: 1 / 2;
grid-row: 2 / 4;
}
main {
grid-column: 2 / 3;
grid-row: 2;
}
aside {
grid-column: 3 / 4;
grid-row: 2 / 4;
}
footer {
grid-column: 2 / 3;
grid-row: 3;
}Header
Nav
Content
Footer
Line Based
Aside
body {
display: grid;
gap: 1em;
grid-template-columns: 12em auto 12em;
grid-template-rows: auto 1fr auto;
grid-template-areas:
'header header header'
'nav main aside'
'nav footer aside';
}
header { grid-area: header; }
nav { grid-area: nav; }
main { grid-area: main; }
aside { grid-area: aside; }
footer { grid-area: footer; }
Header
Nav
Content
Footer
Grid Areas
Aside
Media Queries
What is a media query?
Media queries allow you to adapt your site or app depending on the presence of various device characteristics such as:
- Screen resolution
- Screen orientation
- User preferences like color scheme or reduced motion
- etc.
Can I Use Media Queries?
body {
display: grid;
gap: 1em;
grid-template-rows: auto auto 1fr auto;
grid-template-areas:
'header'
'nav'
'main'
'footer';
}
@media (min-width: 40em) {
body {
grid-template-columns: 12em auto;
grid-template-rows: auto 1fr auto;
grid-template-areas:
'header header'
'nav main'
'nav footer';
}
}
@media (min-width: 60em) {
body {
grid-template-columns: 12em auto 12em;
grid-template-rows: auto 1fr auto;
grid-template-areas:
'header header header'
'nav main aside'
'nav footer aside';
}
aside { display: block; }
}Three Layouts
- Small - up to 27.5em (approximately 440px)
- Medium - between 27.5 em and 60em (441-960px)
- Large - over 60em (961+ px)
A Note About Breakpoints
I don't have a magic formula for selecting breakpoints.
However, I find a good rule of thumb is to select two break points to give your site or app 3 distinct layouts.
You only need to consider them when your design breaks at different screen resolutions.
Flexible
Images
<img width="100%" />
Just send a large image down the wire and set it's width to 100%. Works everywhere! 👏
- Except it wastes bandwidth to send a large image when not required 👎
- But if you pick too small an image it will look grainy when blown up to larger sizes 👎👎
<img srcset & sizes />
Let the browser choose the right sized image for the device.
- Checks device width.
- Uses our old friend media query to determine the correct image to use.
- Requests the corresponding image from srcset.
<img
sizes="
(min-width: 960px) 600px,
(min-width: 640px) 300px,
150px
"
srcset="
css-grid-mobile.png 150w,
css-grid-laptop.png 300w,
css-grid.png 600w
"
src="css-grid.png"
/>
In our simple example downloading the image sized for mobile saves 230 kb.
<picture/>
Used when you want to change more than the resolution of the image you serve.
- Serve zoomed-in images to smaller screens
- Don't send animated gifs if the user prefers-reduced-motion.
- Use the latest image formats while providing a fallback for legacy browsers.
<picture>
<source srcset="css-grid-night.png"
media="(prefers-color-scheme: dark)">
<img src="css-grid.png">
</picture>Other options:
For example dark mode:
Can I Use <picture/>?
- Use CSS Grid to layout your app or site
- Use grid areas and skip the complicated line-based syntax.
- Lean towards using srcset and sizes for images
- Until you need to use non-size media-queries or nonstandard image formats
In Conclusion…
Thank You!
Questions?
Why didn't you talk about my favourite framework?
In recent years we've pivoted towards better developer experience at the expense of the user experience. None of the things we've talked about today require a byte of JavaScript in order to work.
Okay, I don't hate JS frameworks but…
Reducing the amount of JS downloaded/parsed/run will increase the performance of your site/app.
Bias towards web fundamentals before reaching for that JS framework.
What about laying out components?
Can I Use Flex Box?
Header
Home
Content
Footer
About
Contact
Header
Home
Content
Footer
About
Contact
Header
Home
Content
Footer
nav {
grid-area: nav;
display: flex;
justify-content: space-between;
}Mobile Nav
<html>
<body>
<header>Header</header>
<nav>
<p>Home</p>
<p>About</p>
<p>Contact</p>
</nav>
<main>Content</main>
<footer>Footer</footer>
</body>
</html>About
Contact
@media (min-width: 40em) {
nav {
flex-direction: column;
justify-content: flex-start;
}
}Header
Home
Content
Footer
Laptop Nav
<html>
<body>
<header>Header</header>
<nav>
<p>Home</p>
<p>About</p>
<p>Contact</p>
</nav>
<main>Content</main>
<footer>Footer</footer>
</body>
</html>About
Contact
- Layout in one dimension
- Content out
Flex Box
CSS Grid
- Two-dimensional layout
- Layout in
Thank You!
For real this time
Questions?
- Thoughtful process
- Dedicated team
- Pixel-perfect work
- 24/7 support
ACME
Competitors
- Fragmented workflow
- Too many clients
- Rushed deliveries
- 9-5 support
Responsive Web Apps
By Simon MacDonald
Responsive Web Apps
It’s Tuesday and another device came out with entirely different aspect ratio & resolution specs. Is your app going to work on this new device? If not, how much will you need to do in order to get your app to behave on this new platform? Responsive Web Apps (RWA) adapt to screen ratios so users can use the devices they like, without you having to specifically code for each. In this talk, I’ll teach you the principles of RWA & how to build them.
