Becoming Responsibly
Responsive
Or, How We Learned to Love the Browser
May 10, 2012
Thursday, May 10, 12
Slide 2
Slide 2 text
Ryan Merrill
Bobby Uhlenbrock,
Partner/Developer
http://uhlenbrock.us/
Bobby Uhlenbrock
Who We Are
Ryan Merrill, Developer
http://ryanmerrill.net/
Ample is a small-batch digital agency in Cincinnati and
an organizer of QC Merge.
http://helloample.com/
Taylor MacDonald, Developer
http://tcmacdonald.com/
Taylor MacDonald
Thursday, May 10, 12
Slide 3
Slide 3 text
The Rise of Mobile
Thursday, May 10, 12
Slide 4
Slide 4 text
What does this mean for us?
‣ A range of devices and new ones coming out weekly
‣ A ton of different mobile web browsers.
‣ Each device has a different screen size
‣ New browser wars? We don't want to go back to 1999, please.
Thursday, May 10, 12
Slide 5
Slide 5 text
What’s a
designer
to do?
Thursday, May 10, 12
Slide 6
Slide 6 text
Thursday, May 10, 12
Slide 7
Slide 7 text
A separate mobile site? Maybe.
Thursday, May 10, 12
Slide 8
Slide 8 text
Mobile Template?
Thursday, May 10, 12
Slide 9
Slide 9 text
How about the same HTML?
Thursday, May 10, 12
Slide 10
Slide 10 text
CSS Zen Garden
Thursday, May 10, 12
Slide 11
Slide 11 text
A new approach
Thursday, May 10, 12
Slide 12
Slide 12 text
Enter Responsive
Design
Thursday, May 10, 12
Slide 13
Slide 13 text
Fluid Grids
‣ Been around for years
‣ Resizable browser windows
‣ Math!
Thursday, May 10, 12
Slide 14
Slide 14 text
Target / Context = Result
Or, how to turn pixels into percentages and ems
h1 {
font-family: Georgia, serif;
width: 25%; /* 100px / 25px */
font-size: 1.5em; /* 24px / 16px = 1.5em */
}
Thursday, May 10, 12
Media Queries
The secret sauce
Thursday, May 10, 12
Slide 17
Slide 17 text
This may look familiar
Thursday, May 10, 12
Slide 18
Slide 18 text
But they come in a lot more flavors, too
@media screen and (min-width: 600px) {}
@media handheld and (min-width: 320px) {}
@media projection and (min-width: 600px) {}
@media screen and (max-width: 600px) {}
@media handheld and (orientation: portrait) {}
and on, and on, and on, and on...
Thursday, May 10, 12
Slide 19
Slide 19 text
Are we supposed to
learn all of this?!
Thursday, May 10, 12
Slide 20
Slide 20 text
Frameworks and other helpers
‣ Twitter Bootstrap (http://twitter.github.com/bootstrap/)
‣ Zurb Foundation (http://foundation.zurb.com/)
‣ Compass (http://compass-style.org/)
‣ Susy Grid (http://susy.oddbird.net/)
‣ FitText & FitVid: (http://fittextjs.com/ & http://fitvidsjs.com/)
‣ Adobe Shadow (http://labs.adobe.com/technologies/shadow/)
‣ Retina.js (http://retinajs.com/)
Thursday, May 10, 12
Slide 21
Slide 21 text
Zurb Foundation
Thursday, May 10, 12
Slide 22
Slide 22 text
Twitter Bootstrap
Thursday, May 10, 12
Slide 23
Slide 23 text
But what about
the design!?
Thursday, May 10, 12
Slide 24
Slide 24 text
The Design & Process
So has Responsive Design totally screwed up our
whole process? In short: yes.
Thursday, May 10, 12
Slide 25
Slide 25 text
This doesn’t work any more
‣ Too resource intensive to create multiple static comps at
different widths in Photoshop
‣ Literally throwing away these hours spent. No tangible product
produced.
‣ Miscommunication between the client, designer and
development team
Thursday, May 10, 12
Slide 26
Slide 26 text
A new way of doing things
‣ The designer is the developer
‣ More collaboration between developers and designers
‣ Developers are integrated in the entire process
Thursday, May 10, 12
Slide 27
Slide 27 text
Mobile first web design
‣ Popularized by Luke Wroblewski
‣ Let’s the designer focus on the
most important areas of the site
‣ A mobile-first mindset is something
everyone needs to practice
Thursday, May 10, 12
Slide 28
Slide 28 text
Advanced
Responsive Design
Southwest.com
‣ Too cluttered, not focused
‣ Why is the mobile site better than
the desktop?!
‣ Rip out needless stuff
‣ Better user experience overall
Source: http://chicago2011.drupal.org/sessions/designing-mobile
Thursday, May 10, 12
Slide 29
Slide 29 text
Let’s do this for reals
Thursday, May 10, 12
Slide 30
Slide 30 text
Phase One - IA and Introductions
Good news? Been here before.
Thursday, May 10, 12
Slide 31
Slide 31 text
RefreshCincy, our client, wants:
‣ A clean site
‣ Relevant information
‣ Wants to attract local technologists, writers, hackers, designers
‣ Should be easily accessible on any device
Thursday, May 10, 12
Slide 32
Slide 32 text
Phase Two - Wireframing and UX
This is familiar, too. I thought you said things were new?!
Thursday, May 10, 12
Slide 33
Slide 33 text
Wireframing in the browser
Twitter Bootstrap works great for this
Thursday, May 10, 12
Slide 34
Slide 34 text
Phase Three - Design
‣ But wait... how do we design for a fluid grid and layout
capabilities?
‣ Tons and tons of mockups?!
Thursday, May 10, 12
Slide 35
Slide 35 text
No!
Thursday, May 10, 12
Slide 36
Slide 36 text
Forget your old way of working, for now.
‣ Practically impossible for a designer to work this way
‣ Need the ability to present multiple ideas to a client
‣ Need to set the look and feel of a site, though
Thursday, May 10, 12
Slide 37
Slide 37 text
Hrm....
Thursday, May 10, 12
Slide 38
Slide 38 text
Enter Style Tiles
‣ Popularized by Samantha Warren
‣ Style tiles allow the client to focus on
the look and feel of the site
‣ More detailed than mood boards
‣ Help reinforce a visual identity without
focusing on layout
Thursday, May 10, 12
Slide 39
Slide 39 text
Thursday, May 10, 12
Slide 40
Slide 40 text
Thursday, May 10, 12
Slide 41
Slide 41 text
Tough client? Style tiles not for you?
‣ Style tiles take an extremely forward-thinking client
‣ It’s OK to create a full-page mockup in Photoshop
‣ Emphasize that things are going to change along the way
Thursday, May 10, 12
Slide 42
Slide 42 text
Thursday, May 10, 12
Slide 43
Slide 43 text
Designvelopment?!
The most radical change to the process
Thursday, May 10, 12
Slide 44
Slide 44 text
A mix between designer and developer
Thursday, May 10, 12
Slide 45
Slide 45 text
Why the client loves this, too
‣ Allows the client to interact with something and see how their
content flows on a page
‣ More hands-on than static PDFs
Thursday, May 10, 12
Slide 46
Slide 46 text
Less is more. Start with mobile.
‣ Start with a mobile-first stylesheet
‣ Base styles should be for the smallest screen
‣ Starting with mobile-first allows older browsers to degrade
gracefully
‣ Mobile and small screen devices do not load large images
‣ Build up from there
Thursday, May 10, 12
Slide 47
Slide 47 text
‣ All of these styles and images will be
carried out through the rest of the design
‣ No superfluous images
‣ Only display the relevant information
‣ Clean and simple
‣ Direct
Thursday, May 10, 12
Slide 48
Slide 48 text
Enter media queries
What device size to target next?
Thursday, May 10, 12
Slide 49
Slide 49 text
Middle of the road devices? Why not.
‣ Larger than most mobile phones
‣ Allows us to float content left and right
‣ Allows more images to be loaded to enhance design
‣ Larger text and images
Thursday, May 10, 12
‣ Added more images, such as the
computer background image
‣ A more pleasing layout to larger
screens
‣ Larger images
Thursday, May 10, 12
Slide 52
Slide 52 text
Let’s go a little bit bigger, shall we?
1.@media screen and (min-width: 940px) {
h1 {
font-size: 2.5em;
}
.event-description {
float: left;
width: 63.6123% /* target / context = result! */
}
...
}
Thursday, May 10, 12
Slide 53
Slide 53 text
Thursday, May 10, 12
Slide 54
Slide 54 text
Final changes and browser test
‣ There shouldn’t be a ton of changes from the client
‣ Been involved in the whole process
‣ Browser testing should be minimal if a mobile-first mindset was
maintained throughout the project
Thursday, May 10, 12
Slide 55
Slide 55 text
Launch!
...and drink.
Thursday, May 10, 12
Slide 56
Slide 56 text
A few caveats...
Nothing is perfect...
Thursday, May 10, 12
Slide 57
Slide 57 text
Advanced
Responsive Design
This stuff is getting easier by the day
!!!
Thursday, May 10, 12
Slide 58
Slide 58 text
CSS Pre-Processors
‣ SASS & LESS has greatly improved the way we’re doing things
as front-end developers
‣ Nestable declarations
‣ Ability to create mixins, or functions to speed up development
‣ Reusable code and variables help maintain readability
Thursday, May 10, 12
Slide 59
Slide 59 text
Code Examples
$breakSmall: 320px;
$breakMedium: 560px;
$breakLarge: 940px;
@mixin respond-to($media) {
@if $media == tiny-screens {
@media only screen and (max-width: $breakSmall) { @content; }
}
@else if $media == small-screens {
@media only screen and (min-width: $breakSmall + 1) { @content; }
}
@else if $media == medium-screens {
@media only screen and (min-width: $breakMedium + 1) { @content; }
}
@else if $media == wide-screens {
@media only screen and (min-width: $breakLarge) { @content; }
}
}
Thursday, May 10, 12
Slide 60
Slide 60 text
Whoa, this is easy
.event-details {
width: 100%;
float: none;
/* Media Queries */
@include respond-to(medium-screens) {
float: left;
width: 63%;
} //medium-screen
@include respond-to(wide-screens) {
width: 83%;
} //wide-screens
} //event-details
Thursday, May 10, 12
Slide 61
Slide 61 text
Let’s go even further with Retina images
@mixin retina-image($width, $height) {
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
@content;
-webkit-background-size: $width $height;
}
}
Thursday, May 10, 12
Slide 62
Slide 62 text
Which in practice, looks like:
.event-time {
background: url('parts/ico-time.png') no-repeat top left;
@include retina-image(41px, 48px) {
background: url('parts/[email protected]') no-repeat top left;
}
}
Thursday, May 10, 12
Slide 63
Slide 63 text
Going forward
‣ RefreshCincy’s first meetup will be announced for June
‣ Checkout the RefreshCincy site as a start on Github:
https://github.com/ample/qc-merge
Thursday, May 10, 12