View
5.217
Download
0
Category
Tags:
Preview:
DESCRIPTION
Responsive web design allows you to create websites that provide an optimal user experience across devices. In this session, attendees learned why the process for designing a (good) responsive website can be very different than the traditional web design process—and how to change their workflow to create a great responsive site. Presented in 2015 at McFullStack (McGill University, Montreal). Presented in 2014 at HOW Interactive Design Conference in Washington, DC & HOW Interactive Design Conference in Chicago, IL.
Citation preview
Designing Responsive Websites
Clarissa Peterson
@clarissa
#content { width: 90%;}
http://www.unitedpixelworkers.com/
http://www.unitedpixelworkers.com/
http://www.unitedpixelworkers.com/
http://www.unitedpixelworkers.com/
http://www.unitedpixelworkers.com/
article { width: 92%; }
@media only screen and (min-width:40em) { article { width: 70%; float: left;}
Design Develop
Design
Develop
“It's not like our industry nailed web design before we started doing responsive design. It's still a work in progress.”
- Dan Willis@uxcrank
Wireframes
http://foundation.zurb.com/prototype-example2.php
http://foundation.zurb.com/prototype-example2.php
http://foundation.zurb.com/prototype-example2.php
http://foundation.zurb.com/prototype-example2.php
http://foundation.zurb.com/docs/forms.php
http://foundation.zurb.com/docs/typography.php
1em = default
2em = twice as big1em = default
2em = twice as big1em = default
.5em = half as big
h1 { font-size: 3em; }h2 { font-size: 2em; }h3 { font-size: 1.5em; }
h1 { font-size: 3em; }h2 { font-size: 2em; }h3 { font-size: 1.5em; }
body { font-size: 100%; }
Line Length (Measure)
http://en.wikipedia.org/wiki/File:Metal_movable_type.jpg
45-75 Characters
article { max-width: 28em; }
article { max-width: 28em; }
@media only screen and (min-width:48em) { article { font-size: 1.1em; } article p { line-height: 1.4; margin: 1.4em auto; }}
@media only screen and (min-width:48em) { article { font-size: 1.1em; } article p { line-height: 1.4; margin: 1.4em auto; }}
#intro { font-size: 1em; font-family: Helvetica, sans-serif;}
#intro { font-size: 1em; font-family: Helvetica, sans-serif;}
@media only screen and (min-width:30em) { #intro { font-size: 1.2em; font-family: Populaire, sans-serif; }}
<a href=”tel:202-123-4567”>202-123-4567</a>
Performance
“You can't mock up performance in Photoshop.”
- Brad Frost@brad_frost
Device Labs
https://flic.kr/p/cdVB9h
Clarissa PetersonPeterson/Kandy
clarissapeterson.com@clarissa
Recommended