Johan Kohlin
Lecturer at School of engineering, Jönköping University.
Responsive Web design
- A design that adapts to any device or screen size
- One HTML source
- Multiple breakpoints in CSS (media queries)
Example: JU.se
The ideology
- Design for an optimal viewing experience
- Use standards-based technologies
- More flexible designs
- More adaptive to the media
Technically
- Force mobile devices to zoom in
- Use flexible units, like % or vw
- Scalable images/videos
- Media queries
#1 Force zoom-in
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
...
</head>
Pinch: Just a fallback solution
#2 Use flexible units
for a fluid layout
Units with relative sizes are:
50% = half of parent element width
50vw = half of browser window width
100vh = entire browser window height
#3 Scalable media
img, video {
max-width: 100%;
}It means:
Be as big as you can
but never bigger than your actual size.
To serve the optimal sized image, see responsive images
#4 Media queries
add screen size breakpoints in your layout
@media (min-width:640px) {
.page-content {
flex-direction: row;
}
.hero {
background-image:url(large.png);
}
}hides these rules until the browser is wider than 640px
Let's have a look
The media query block
groups/surrounds rules for a specific context
Usually, at the end of your CSS-file (where it overwrite previous rules)
@media type and (feature){ }
rules to apply when type and feature is true, go inside these curly brackets
media types
specifies a target medium
@media print { }
@media screen { }
@media speech { }
when viewed in a device's browser
when web page is printed
when web page is read by screen reader
screen
- remove ads
- hide navigation
- hide related content
- use a serif font face
- make it fit on an A4
- use cm for margins
speech
- remove images
- simplified navigation
- Focus on logical order
screen
speech
media features
specifies media properties
@media (feature: value) and (feature: value) { }
To combine multiple feature tests use and or , (comma means or). See here for more logic
| Feature | Value | Description |
|---|---|---|
| min-width | e.g. 480px | if the device is at least this big |
| max-width | e.g. 50em | if the device is no more than this value |
| orientation | portrait, landscape | If the browser is more wide than tall, or the device is upright or not |
| min-resolution | 192dpi | only for high resolution displays |
| max-resolution | 96dpi | for standard displays |
| -webkit-min-device-pixel-ratio | 2 | Safari on retina displays |
Put them together
@media screen and (min-width: 480px){ }
@media (min-width: 480px){ }
...or do this for ALL media types
Start from
desktop or mobile?
- Mobile first forces you to
-
- think "economically"
- scrutinize content
- rank importance
- think about UX
jonkoping.se / January 2012
jonkoping.se / July 2012
a little too extreme
Mobile first
Chrome
Mobile first
Firefox
Mobile first
Safari
1. Preferences / Advanced/ Show developer menu...
2. Develop / Enter responsive deign mode
Choosing breakpoints
Don't worry about device widths. Go for weird looks.
- Enlarge the browser, until it looks weird
- Don't just sit on a 13" laptop
- Find a big screen
- Run a local server:
- Try for real on a tablet
- Try for real on a mobile
How do you fit all that in a mobile view
Content parity
Don't leave it out, show it on demand
Content parity
Dropping portions of your site on small screens because you think mobile users won’t need it is false thinking.
-Jennifer Robbins
Layout
responsive strategies
Mostly fluid
Column drop
Off canvas
Navigation
Top navigation
Pros
- Easy to implement
- No complicated CSS
- No JavaScript needed
Cons
- Height issues
- Not scalable
- Fat Fingers
- cross device issues
Priority +top menu
Cons
- Fat Fingers
- Javascript needed*
Select menu
Pros
- Frees up space
- Keeps interactions in the header
- Easily recognizable
- Uses native controls
Cons
- Hard to style
- Potentially confusing
- No good way to deal with sub menus
- Javascript needed
Example:
Link to footer
Pros
- Easy to implement
- No Javascript
- Scales well
- Single button in header
Cons
- Fragment links can be disorienting
- Not elegant 😊
Example:
The flyout
Pros
- Lots of space
- Good looking
- App conventions
Cons
- Advanced
Example:
The toggle
Pros
- Keeps the user in place
- Elegant
- Easy to scale up
Cons
- Slightly advanced
Example:
Toggle sub navigation
Example:
Web7
By Johan Kohlin
Web7
Responsive design
