Make it
Responsive
Web development fundamentals
2022
What is responsive
Named by Ethan Marcotte, May 25, 2010 on A List Apart
Rather than tailoring disconnected designs to each of an ever-increasing number of web devices, we can treat them as facets of the same experience. We can design for an optimal viewing experience, but embed standards-based technologies into our designs to make them not only more flexible, but more adaptive to the media that renders them.
The control which designers know in the print medium, and often desire in the web medium, is simply a function of the limitation of the printed page.
We should embrace the fact that the web doesn’t have the same constraints, and design for this flexibility. But first, we must 'accept the ebb and flow of things.
John Allsopp, “A Dao of Web Design”
Responsive vs Adaptive
Responsive
You put water into a cup, it becomes the cup. You put water into a bottle, it becomes the bottle. You put water into a teapot, it becomes the teapot.
Bruce Lee, Be Water, My Friend
Why responsive design is important
- Get your phones out - what is their resolution?
- Get your laptops out - what is their resolution?
- How many different laptops and phones do we have in this room now?
Why responsive design is important
Why responsive design is important
What do we need?
Surprise...
...we already know most of the things!
Viewport
- The meta viewport tag gives the browser instructions on how to control the dimensions and scaling
- Without this tag, all devices will render our page differently and scale like they want to
<meta name="viewport" content="width=device-width, initial-scale=1.0">Plan your Design
- Plan your Design for different screen sizes
- Think about content first
- Have a flexible layout in mind
- Different methods, for example mobile first...
Relative units
If you can, use relative units
Flow and wrap your elements
Use the flow that html provides you for free
Min/Max values
Use max- and min-sizes to make sure that your content stays readable
Vector images
If you can, use vectors
Media Queries
Media queries are useful when you want to modify your site or app depending on a device's general type (such as print vs. screen) or specific characteristics and parameters (such as screen resolution or browser viewport width).
MDN Web Docs: Using media queries
Media Queries
@media screen and (min-width: 320px) and (max-width: 768px)@ rule
media type
media feature
operator
media feature
- all (default)
- screen
- speech
operator
Media Queries
@media screen (max-width: 600px) {
.element {
/* Do something here */
}
}Media Queries
- any-hover
- any-pointer
- aspect-ratio
- color
- color-gamut
- color-index
- display-mode
- forced-colors
- grid
- height
- hover
- inverted-colors
- monochrome
- orientation
- overflow-block
- overflow-inline
- pointer
- prefers-color-scheme
- prefers-contrast
- prefers-reduced-motion
- resolution
- scripting
- update
- width
Media Queries
- You can also define the media rule in html to load a specific file
Think about Breakpoints
Think about Breakpoints
- Base your breakpoints on your design, not on specific devices
- At what size does your layout no longer work?
Grids
- Use flexible grid layouts to create modern responsive layouts
Hide things (sometimes)
- Only hide information for different sizes, if it is really necessary
- For example:
- On desktop show full navigation
- On mobile important + more
Loading images
<picture>
<source media="(max-width:1000px)" srcset="picture-lg.png">
<source media="(max-width:600px)" srcset="picture-mid.png">
<source media="(max-width:400px)" srcset="picture-sm.png">
<img src="picture.png" alt="picture">
</picture>Loading images
<img
srcset="
flower4x.png 4x,
flower3x.png 3x,
flower2x.png 2x,
flower1x.png 1x
"
src="flower-fallback.jpg"
>Tools for testing
- Safari: Develop → Enter Responsive Design Mode
- Firefox: Tools → Browser Tools → Responsive Design Mode
- Chrome: View → Developer → Developer Tools
More resources
Demo Time
