We the People of the United States, in Order to form a more perfect Union, establish Justice, insure domestic Tranquility, provide for the common defense, 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
We the People of the United States, in Order to form a more perfect Union, establish Justice, insure domestic Tranquility, provide for the common defense, promote the general Welfare, and secure the Blessings of Liberty to ourselves and our Posterity, do ordain Flexible Content
We the People of the United States, in Order to form a more perfect Union, establish Justice, insure domestic Tranquility, provide for the common (Image) 600px Flexible Content
We the People of the United States, in Order to form a more perfect Union, establish Justice, insure domestic Tranquility, provide for the common defense, promote (Image) 100% Flexible Content
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
“I’ve been amazed at how often those outside the discipline of design assume that what designers do is decoration. Good design is problem solving.” ! @veen
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/
DISSECTING DESIGN Don’t Use Static Design Tools to Refine LAUNCH DESIGN FRONT END BACK END CONTENT DECISIONS MADE DECISIONS MADE DECISIONS MADE DECISIONS MADE
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
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 The Problem of the Team
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 The Problem of the Individual
Single CSS File Large Viewport Width First /* 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%; }" }
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
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
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...
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
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
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
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
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" ..." }
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" ..." }
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)
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
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
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
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
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
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/
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
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.
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.
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.
Pixel Density MQs Also need other browser prefixes /*.scss*/" @media only all and (-webkit-min-device-pixel-ratio: 1.5) {" .logo {" background-image: url(/i/logo-2x.png);" background-size: 100%;" }" }
Congratulations! In celebration of all your hard work and discipline, as a reward for all the risk you’ve taken to reach this point, we’re quite pleased to present you with…YOUR CONTENT! ! Keep up the good work! ! ~ The Management
Trigger Indicators ‣ Words ‣ menu, main menu ‣ nav, navigation ‣ sections, site sections, topics, products ‣ products, see products ‣ Icons ‣ plus ‣ hamburger ‣ arrows
Trigger Indicators ‣ Words ‣ menu, main menu ‣ nav, navigation ‣ sections, site sections, topics, products ‣ products, see products ‣ Icons ‣ plus ‣ hamburger ‣ arrows
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
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
Jakob Nielsen Says... ‣ Build a separate mobile site ‣ Cut features ‣ Cut content http://www.nngroup.com/articles/mobile-site-vs-full-site/ PLEASE, NO.
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/
brworkshop
hansolo21
romanshamin
sms_tech
hirokazu_oda
recruitengineers
uxaustralia
visional_engineering_and_design
uxevents
hjmkth
siteengine
morganepeng
holman
gr2m
tammyeverts
akmur
swwweet
matthewcrist
jnunemaker
brad_frost
jasonvnalue
philhawksworth
cassininazir