Introduction to Responsive Web Design
Original photo courtesy of
infocux Technologies on Flickr
via the
Creative Commons Attribution-NonCommercial 2.0 Generic
license
Presented by David Myers and Zackary Lowery at Town Hack Columbus 2014
This presentation is available online at https://townhack.github.io/rwd-101/#/
Our Audience
Photo courtesy of
Robin Alasdair Frederick Hutton on Flickr
via the
Creative Commons Attribution-NonCommercial-NoDerivs 2.0 Generic
license
Developers Who...
- ...are new to responsive web design
- ...no longer want to build separate websites for different devices or screen sizes
- ...want to learn better practices
Wait... Responsive what?
Responsive Web Design: The practice of designing flexible layouts that are adaptable to any device, any viewport, or even to any environment.
* This example will only work in the Firefox Web Browser
What's the difference?
Fixed
Fluid
Adaptive
Responsive
Why is this important?
There are too many devices and screen sizes to predict every possible outcome
Some Statistics
What does this mean?
Desktop no longer dominates the realm of web browsers
So, how do you do it?
CSS Media Queries!
Media Queries allow you to test the device for certain properties...
- Viewport/Device Width & Height
- Viewport/Device Orientation
- Light Levels
- & More!
...and use the results to help change the layout or style with CSS.
Simple Example
body {
background-color: #ddd;
}
@media all and (min-width: 50rem) {
body {
background-color: #444;
}
}Screens less than 50rem wide will have a light background.
Screens 50rem or wider will have a dark background.
How to use Media Queries
Inside a CSS file or Style block
@media all and (min-width: 50rem) {
body {
background-color: #444;
}
}Inside the link tag
In combination with the @import statement
@import url('large.css') all and (min-width: 50rem);Don't forget the Meta!
Let's Do It!
Questions?
More Examples
- mediaqueri.es
- Indochino
- Town Hack
- davidmyers.us (yay self promotion!)