Responsive Design

Responsive Design
LVL Studio UX Soirée at Station C
November 21, 2012 in Montreal, Quebec

Clarissa Peterson
@clarissa

Photo credit: Brad Frost via Creative Commons http://ﬂic.kr/p/cfQwL7

Responsive Web Design http://www.abookapart.com/products/responsive-web-design/

Responsive web design offers us a way
forward, ﬁnally allowing us to “design for
the ebb and ﬂow of things.”

- Ethan Marcotte

1. Flexible Grid
2. Flexible Images/Media
3. Media Queries

http://www.unitedpixelworkers.com/

@media screen and (min-width: 640px) {
.section1, .section2 {
float: left;
width: 50%;
}
}

@media screen and (min-width: 40em) {
.section1, .section2 {
float: left;
width: 50%;
}
}

45%
of American adults
own a smartphone

http://pewinternet.org/Reports/2012/Smartphone-Update-Sept-2012.aspx

40%
have a cell phone that’s
not a smartphone


17%
do most of their online browsing
on their phone


The beauty of the web is its openness.
Don’t arbitrarily lock people out because
of browser, device or conﬁguration.
- Brad Frost
@brad_frost

Illustration credit: Anna Debenham via Creative Commons http://ﬂic.kr/p/dtMQTL

Photo Credit: Rafel Miro via Creative Commons http://ﬂic.kr/p/8KSGt7

Sony PSP-1000, Photo credit: Anna Debenham via Creative Commons http://ﬂic.kr/p/dpGnUj

Nokia 95-3, Photo credit: Jonathan Greene via Creative Commons http://ﬂic.kr/p/4nGFUd

Photo credit: Mith Huang via Creative Commons http://ﬂic.kr/p/9B7A4c

Photo credit: Kai Chan Vong via Creative Commons http://ﬂic.kr/p/5c4Sfv

Photo credit: Carlos Smith via Creative Commons http://ﬂic.kr/p/8tLb4P

Photo credit: Pete Markham via Creative Commons http://ﬂic.kr/p/2zvrrJ

Photo credit: Wendi Dunlap via Creative Commons http://ﬂic.kr/p/vMJM6

Photo credit: Channy Yun via Creative Commons http://ﬂic.kr/p/51QJr6

Photo credit: Matt Hamm via Creative Commons http://ﬂic.kr/p/EyrLG

Mobile use case: I just transferred money
at my desk using my phone because
logging into my banking app requires
fewer steps.
- Stephanie Rieger
@stephanierieger

Make it work better for everybody.

http://www.gravitatedesign.com

<div id="site-nav">
<form> ... </form>
! <nav>
! ! <ul class="nav nav-primary">
! ! ! <li><a href="#">Archive</a></li>
! ! ! <li><a href="#">About</a></li>
! ! ! <li><a href="#">Write For Us</a></li>
! ! ! <li><a href="#">Subscribe</a></li>! ! !
! ! </ul>
! </nav>
</div>

@media screen and (min-width: 48em) {
! #site-nav {
! ! position: absolute;
! ! top: -5em;
! ! width: 100%;
! ! z-index: 5;
! }
}

Responsive Design

More Related Content

What's hot

Viewers also liked

Similar to Responsive Design

Recently uploaded

Responsive Design