Responsive Web Design
Tools and Techniques
Matias Figueroa
UI Developer
Software Designer @ Globant
Likes to make stuff...
What's Responsive Web Design?
Responsive Web Design (RWD) is a Design Strategy that aims to provide a deeply contextualized experience for the user regardless of the consumption device that is currently being used to access our site.
Mobile Design is centered on devices.
≠
Responsive Design is centered on context.
This talk is about
The Web.
Responsive Design is also applicable to Native Mobile Apps.
(That's another talk.)
Some Basics:
- You don't know which device the user is going to use, you aim to cover them all.
- Make your html Semantic, allow for fallbacks.
- If is not going to be displayed, don't even download it.
- Horizontal scrolling is the enemy.
- It's a lot of work, decide wisely...
RWD is for:
Simple Web Sites.
Complicated applications with customized workflows are better designed as a separate mobile app.
Modern Web Sites.
Responsive on IE6, Symbian? Are you kidding me?
Ubiquitous Web Sites.
If no one is going to access your site on a phone or tablet or tv... why bother?
The pillars of RWD:
Feature Detection.
Media Queries.
Fluid Grids.
Responsive Images.
Feature Detection
Browser Sniffing
Are you using Chrome v32.0 on Mac?
vs.
Feature Detection
Does your browser support html5 video?
Modernizr is a feature detection library thats runs tests against the context of your application and tells you what features are available for you to use.
It also helps you to load fallbacks for features that are not present.
Set it up...
Profit!
Detect, Use/Degrade:
Detect, Polyfill, Use:
Check it out:
Contribute:
So much more... check:
Media queries
@media
@media screen
@media print
@media screen and
(min-width: 800px)
Breakpoints:
| @media print | |
| @media screen and (min-width: 1024px) | |
| @media screen and (min-width: 960px) | |
| @media screen and (min-width: 800px) | |
| base styles (no @media) |
This is not carved in stone... research your target breakpoints.
Careful...
| @media print | |
| @media screen and (min-device-width: 1024px) | |
| @media screen and (min-device-width: 960px) | |
| @media screen and (min-device-width: 800px) | |
| base styles (no @media) |
...devices lie... sometimes twice.
... or just
and forget about it.
Actually...
| @media print | |
| @media screen and (min-width: 1024px) | |
| @media screen and (min-width: 960px) | |
| @media screen and (min-width: 800px) | |
| base styles (no @media) |
We care about context, not devices.
Even Better:
Much more:
| width | height | |
| device-width | device-height | |
| aspect-ratio | device-aspect-ratio | |
| color | monochrome | color-index |
| resolution | orientation | |
| scan | grid |
... and more coming...
Mozilla Developer Network
W3C Reference Docs
Mediaqueri.es
Fluid Grids
Remember when we used tables for layout?
Enter the grid:
A grid-based layout lets us distribute content in columns and rows, just like with a table.
But:
- Grids grow or shrink following screen size.
- Grids fallback nicely on small screens.
- Grids are semantically neutral (Tables should be used for tabular data).
- Grids are easily extensible and customizable.
So many options:
... etc ...
See it in action:
Demo Time!
See it in action:
Demo Time!Responsive Images
img { width:100%; }
Booya! Responsive, bitch...
Ok... not so easy...
Heaven:
We're not in heaven...
Picturefill
srcset-polyfill
Background Images
Retina Displays
This might be the greatest slide on Responsive Design Out there: pic.twitter.com/nBZdSJDP2V
— Matias Figueroa (@matixfigueroa) June 17, 2013Background Images (HiDPI)
Icon Fonts!
Libraries:
For Retina display support:
Icon Font:
Server-side solution:
So Basically:
-
Use the features available in the current context.
Adapt to the user's consumption device, wichever it is.
Distribute your content acordingly, don't let it overflow the screen width.
Save your user's some bandwith. Show them beautiful images when the can spare it.
Thanks!
Now go make some awesome websites.
These slides:
