A Fluid Foundation Honor the proportions of the design by creating percentage-based layout instead of fixed-width, pixel-based layout. Friday, November 8, 13
Browser Window We the People of the United States, in Order to form a more perfect Union, establish Justice, insure domestic Tranquility, provide for the common defence, promote the general Welfare, and secure the Blessings of Liberty to ourselves and our Posterity, do ordain and establish this Constitution for the United States of America. Flexible Content Friday, November 8, 13
Browser Window We the People of the United States, in Order to form a more perfect Union, establish Justice, insure domestic Tranquility, provide for the common defence, promote the general Welfare, and secure the Blessings of Liberty to ourselves and Flexible Content Friday, November 8, 13
Browser Window We the People of the United States, in Order to form a more perfect Union, establish Justice, insure domestic Tranquility, provide for the common defence, promote the general Flexible Content (Image) 600px Friday, November 8, 13
Browser Window We the People of the United States, in Order to form a more perfect Union, establish Justice, insure domestic Tranquility, provide for the common Flexible Content (Image) 100% Friday, November 8, 13
CONTENT UX FRONT-END DESIGN BACK-END “Almost no one who makes websites works in their company or organization’s web division. That’s because almost no company or organization has a web division. And that void on the org chart is one reason we have so many bloated, unusable failures where we should be producing great user experiences.” @zeldman, 2007 Friday, November 8, 13
LAUNCH DESIGN FRONT END BACK END CONTENT DECISIONS MADE DECISIONS MADE DECISIONS MADE DECISIONS MADE CONTENT UX FRONT-END DESIGN BACK-END Friday, November 8, 13
LAUNCH DESIGN FRONT END BACK END CONTENT DECISIONS MADE DECISIONS MADE DECISIONS MADE DECISIONS MADE CONTENT UX FRONT-END DESIGN BACK-END UX FRONT-END DESIGN LAUNCH DESIGN FRONT END BACK END CONTENT DECISIONS MADE DECISIONS MADE DECISIONS MADE DECISIONS MADE Friday, November 8, 13
Style Comparisons ESTABLISH THE AESTHETIC “I could create an illustration or a 3D rendering of what I want my new office to look like, but that doesn’t take advantage of his great ideas. It’s dictation, not collaboration. Instead, I show him a Pinterest board my wife and I created.” @danielmall http://danielmall.com/articles/the-post-psd-era/ Friday, November 8, 13
Don’t Use Static Design Tools REFINE THE SOLUTION LAUNCH DESIGN FRONT END BACK END CONTENT DECISIONS MADE DECISIONS MADE DECISIONS MADE DECISIONS MADE Friday, November 8, 13
Group improvisation is a challenge. Aside from the weighty technical problem of collective coherent thinking, there is the very human, even social need for sympathy from all members to bend for the common result. Bill Evans Friday, November 8, 13
Group improvisation is a challenge. Aside from the weighty technical problem of collective coherent thinking, there is the very human, even social need for sympathy from all members to bend for the common result. Bill Evans Friday, November 8, 13
Group improvisation is a challenge. Aside from the weighty technical problem of collective coherent thinking, there is the very human, even social need for sympathy from all members to bend for the common result. Bill Evans Friday, November 8, 13
Media Types all braille, embossed, speech handheld, projection, screen, tv print tty http://www.w3.org/TR/CSS21/media.html#media-types Friday, November 8, 13
/* styles.css */ aside { color: #333; width: 30%; } /* if the viewport width is 60em or less */ @media (max-width: 60em) { aside { width: 50%; } } /* if the viewport width is 40em or less */ @media (max-width: 40em) { aside { width: 100%; } } Single CSS File Large Viewport Width First Friday, November 8, 13
SERVING RWD STYLES Single CSS File ‣ Simple to implement ‣ Single request ‣ Doesn’t require a preprocessor ‣ Requires JS to serve large layout to old IE if starting with small layouts ‣ Large sites can be difficult to maintain because of the size of the single file Friday, November 8, 13
SERVING RWD STYLES Multiple CSS Files ‣ Doesn’t require a preprocessor ‣ At least two requests ‣ Requires you to separate layout from other styles ‣ Allows you to start with small layouts and serve a single large layout to old IE without JS - Requests go up if you use multiple MQs Friday, November 8, 13
If this browser is less than IE9... and it’s not IE Mobile...
base.css all styles/MQ blocks no-mq.css MQ styles from base without the MQs http://nicolasgallagher.com/mobile-first-css-sass-and-ie/ Friday, November 8, 13
styles.scss styles.css We write SASS (or LESS, Stylus, etc.) Browser gets CSS (like it always has) PREPROCESSING What is CSS Preprocessing? Friday, November 8, 13
Stylus ‣ Runs on Node.js ‣ Has a flexible syntax - You can omit semi-colons, colons, and braces ‣ http://learnboost.github.com/ stylus/ Friday, November 8, 13
Mixins ‣ SASS and Stylus both support basic programming like loops, if/ else, etc. in mixins. ‣ LESS only offers “guarded mixins.” - I hear this is better with the *new* version... Friday, November 8, 13
Compass & Bourbon ‣ Compass and Bourbon are mixin libraries for SASS ‣ Takes care of vendor prefixes with mixins ‣ Compass has an ecosystem of plugins built on top of Compass ‣ With config.rb, Compass lets you check the preprocessor config into source control Friday, November 8, 13
Importing ‣ Allows you to break up your styles across files - variables, mixins, reset, all separated ‣ Better than a standard css import Friday, November 8, 13
Source Maps ‣ Using pre-processors does present some new challenges. ‣ Line-numbers are no longer representative of where the code is. Friday, November 8, 13
The last step is to turn on debug info in our CSS /* config.rb */ sass_options = { :debug_info => true } or /* command line */ sass --watch -g scss/:css/ Setup Chrome for SASS Source Maps Support Friday, November 8, 13
SERVING RWD STYLES Breakpoint Based Partials ‣ Allows you to start with small layouts and serve large layout to old IE without JS ‣ Only 1 or 2 requests ‣ Requires preprocessor ‣ Maintenance can be complex Friday, November 8, 13
Module Based Partials no-mq.css All styles with no MQs mq.css All styles with MQs http://seesparkbox.com/foundry/ structuring_and_serving_styles_for_older_browsers Friday, November 8, 13
SERVING RWD STYLES Module Based Partials ‣ Single Request ‣ Easy Maintenance ‣ Allows you to start with small layouts and serve large layout to old IE without JS ‣ Requires Preprocessor Friday, November 8, 13
There is no Breakpoint aside { // general styles // major shift at 40em // major shift at 60em ... } aside { // general styles // major shift at 40em // minor tweak at 42em // minor tweak at 53.5em // minor tweak at 56em // major shift at 60em // minor tweak at 72.2em // minor tweak at 74em ... } Friday, November 8, 13
There is no Breakpoint aside { // general styles // major shift at 40em // major shift at 60em ... } aside { // general styles // major shift at 40em // minor tweak at 42em // minor tweak at 53.5em // minor tweak at 56em // major shift at 60em // minor tweak at 72.2em // minor tweak at 74em ... } Friday, November 8, 13
http://seesparkbox.com/foundry/there_is_no_breakpoint There is no Breakpoint http://www.markboulton.co.uk/journal/theinbetween The In-Between http://www.jordanm.co.uk/post/43147197731/the-in-between The In-Between (2) Friday, November 8, 13
CREATING FLEXIBILITY RWD Grid Systems ‣ Foundation ‣ Bootstrap ‣ Skeleton ‣ Responsive.gs ‣ Columnal ‣ ...this list goes on, and on, and on Friday, November 8, 13
There are many, many combinations of these basic ideas http://bit.ly/U4N5qH (http://bradfrost.github.com/this-is-responsive/patterns.html) Friday, November 8, 13
CREATING FLEXIBILITY Responsive Typography ‣ Small screen != small font-size ‣ Consider contrast ‣ If text has links, give adequate room to touch them ‣ Viewport-based type sizing Friday, November 8, 13
CREATING FLEXIBILITY Responsive Typography ‣ Small screen != small font-size ‣ Consider contrast ‣ If text has links, give adequate room to touch them ‣ Viewport-based type sizing Friday, November 8, 13
CREATING FLEXIBILITY Responsive Typography ‣ Small screen != small font-size ‣ Consider contrast ‣ If text has links, give adequate room to touch them ‣ Viewport-based type sizing Friday, November 8, 13
CREATING FLEXIBILITY Responsive Typography ‣ Small screen != small font-size ‣ Consider contrast ‣ If text has links, give adequate room to touch them ‣ Viewport-based type sizing Friday, November 8, 13
CREATING FLEXIBILITY Responsive Typography ‣ Small screen != small font-size ‣ Consider contrast ‣ If text has links, give adequate room to touch them ‣ Viewport-based type sizing Friday, November 8, 13
CREATING FLEXIBILITY Image: Bandwidth As of March of 2012, 86% of the sites on mediaqueri.es demonstrated the same weight and load time at resolutions from 300ish to 1200ish. via @guypod http://www.guypo.com/mobile/performance-implications-of- responsive-design-book-contribution/ Friday, November 8, 13
CREATING FLEXIBILITY Image: Pixel Density Most new mobile devices have high pixel density displays: Apple iPhone 4+: 326 PPI Amazon Kindle Fire HD 8.9: 254 PPI Nokia Lumia 920: 332 PPI BlackBerry Z10: 356 PPI Samsung Galaxy Note: 285 PPI Friday, November 8, 13
SVG (Scalable Vector Graphics) ‣ Allows the image to be resolution independent. ‣ Support isn’t very good for older browsers. ‣ We can use Modernizr to detect if the browser supports SVG and provide a .png fallback for those that do not. Friday, November 8, 13
Icon Fonts ‣ Fonts by default are resolution independent, Icon fonts are no different. ‣ http://icomoon.io/app/ allows you to create your own icon fonts ‣ They do require a bit more markup, and JS for IE 7 and lower. Friday, November 8, 13
“Compressive” Images ‣ http://bit.ly/Sygdey ‣ Increase the image dimensions ‣ Add massive compression ‣ Scale the image in the browser Friday, November 8, 13
Pixel Density MQs ‣ Detect the pixel ratio of the device and serve a second, higher-res image. ‣ Retina devices now have to make an additional request for the retina asset. Friday, November 8, 13
/*.scss*/ @media only all and (-webkit-min-device-pixel-ratio: 1.5) { .logo { background-image: url(/i/logo-2x.png); background-size: 100%; } } Pixel Density MQs Also need other browser prefixes Friday, November 8, 13
Complex Nav Causes ‣ Large volume of content - Legacy content - Dynamic content ‣ Broad architecture - Lots of content types/categories ‣ Deep architecture - Lots of children and nesting Friday, November 8, 13
Complex Nav Causes ‣ Large volume of content - Legacy content - Dynamic content ‣ Broad architecture - Lots of content types/categories ‣ Deep architecture - Lots of children and nesting DON’T GIVE UP. Friday, November 8, 13
Complex Nav Causes ‣ Poor Information Architecture - Unnecessarily broad or deep due to inefficiency or poor planning ‣ Poor Content Strategy - Unnecessarily large due to a lack of governance, ownership, or intentionality POSSIBLE ROOT Friday, November 8, 13
@BENCALLAHAN What is a Retrofit? Finding the fastest and lowest-risk approach to creating a better experience on an existing site for users of any size screen. RESPONSIVE RETROFITTING Friday, November 8, 13
@BENCALLAHAN @klayon ...performance is important, but access is more important. Mobile later is better than mobile never. From “Responsive images for mobile: don’t sweat it” (http://tiny.cc/vr24gw) RESPONSIVE RETROFITTING Friday, November 8, 13
@BENCALLAHAN Retrofitting Techniques http://github.com/bencallahan/rwd-retrofitting If you like, you can clone this repository: RESPONSIVE RETROFITTING Friday, November 8, 13
@BENCALLAHAN Retrofitting Techniques: From Fixed to Fluid ➡ Demo of Twitter.com http://www.alistapart.com/articles/fluidgrids/ target
/
context
=
result RESPONSIVE RETROFITTING Friday, November 8, 13
@BENCALLAHAN Retrofitting Techniques: From Fixed to Fluid ➡ Demo of Twitter.com /*
some
css
*/ @media
(max-‐width:
500px)
{
/*
css
for
500px
and
lower
*/ } RESPONSIVE RETROFITTING Friday, November 8, 13
@BENCALLAHAN Retrofitting Techniques: Media Queries ➡ Large Resolution First ➡ Small Resolution First, Capped RESPONSIVE RETROFITTING Friday, November 8, 13
@BENCALLAHAN Retrofitting Techniques: Media Queries ➡ Large Resolution First /*
FILE:
main.css
*/ /*
all
your
original
styles
*/ @media
(max-‐width:
53em)
{
/*
styles
for
53em
and
lower
*/ } @media
(max-‐width:
37em)
{
/*
styles
for
37em
and
lower
*/ } RESPONSIVE RETROFITTING Friday, November 8, 13
@BENCALLAHAN Retrofitting Techniques: Media Queries ➡ Small Resolution First, Capped ‣ Serve the original CSS to large viewports ‣ Serve mobile-first CSS to small viewports ‣ No changes to original CSS RESPONSIVE RETROFITTING Friday, November 8, 13
@BENCALLAHAN Client Interaction: Great Need Big Companies + No Mobile Presence + Triple Digit Growth = Anxious Clients RESPONSIVE RETROFITTING Friday, November 8, 13
@BENCALLAHAN Client Interaction: Great Need Less than Half the Cost + Less than Half the Time + Increased Conversions = Desperate Clients RESPONSIVE RETROFITTING Friday, November 8, 13
@BENCALLAHAN Client Interaction: When It’s Right ➡ Evaluate the Project ‣ Solid UX at higher widths? ‣ Semantic markup? ‣ Immediate need? ‣ Real benefit for the user? RESPONSIVE RETROFITTING Friday, November 8, 13
@BENCALLAHAN When you’re done and they ask for more... Client Interaction: Proceed Carefully ...push for even better experiences! RESPONSIVE RETROFITTING Friday, November 8, 13
LESSONS LEARNED Testing ‣ You must test on real devices ‣ Do your development in a webkit browser ‣ Bulid libraries of your patterns Friday, November 8, 13
LESSONS LEARNED Pricing ‣ As much as 100% more, initially ‣ Likely to be 50% more, soon after ‣ Probably never less than 25% more Friday, November 8, 13
LESSONS LEARNED Pricing ‣ As much as 100% more, initially ‣ Likely to be 50% more, soon after ‣ Probably never less than 25% more COMPARED TO WHAT? Friday, November 8, 13
LESSONS LEARNED Performance ‣ Optimize or cut out images ‣ Decrease the number of requests ‣ Gzip if you can ‣ Concat and minify CSS/JS ‣ Load CSS at the top ‣ Load JS at the bottom ‣ Follow @souders on Twitter Friday, November 8, 13
LESSONS LEARNED Barriers ‣ Organization barriers block collaboration ‣ Must have buy in from upper management ‣ Must have buy in from those doing the work ‣ It’s not easy, we’re still figuring it out Friday, November 8, 13
Jakob Nielsen Says... ‣ Build a separate mobile site ‣ Cut features ‣ Cut content http://www.nngroup.com/articles/mobile-site-vs-full-site/ Friday, November 8, 13
Jakob Nielsen Says... ‣ Build a separate mobile site ‣ Cut features ‣ Cut content http://www.nngroup.com/articles/mobile-site-vs-full-site/ PLEASE, NO. Friday, November 8, 13
The Responsive Mindset “The truly responsive design web designer wasn’t born until after the launch of the iPhone. We haven’t seen his or her work yet.” Andy Clarke http://the-pastry-box-project.net/andy-clarke/2012-april-8/ Friday, November 8, 13
bencallahan
uxaustralia
bookslope
takumma
juliantruitt
edp2022_team4
rasagy
linewofficial
kento55
nabemasat
j5ik2o
tanoku
paulrobertlloyd
cassininazir
productmarketing
chrisshort
jponch
ammeep
mraible
lynnandtonic
deanohume
michaelherold
mojombo