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
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
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
Order to form a more perfect Union, establish Justice, insure domestic Tranquility, provide for the common Flexible Content (Image) 100% Friday, November 8, 13
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
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
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
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
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
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=”screen and (max-width: 80em)” ... /* In your CSS */ @media (min-width: 30em) { ... } @media screen and (max-width: 80em) { ... } Media Queries Friday, November 8, 13
media=”screen and (max-width: 80em)” ... /* In your CSS */ @media (min-width: 30em) { ... } @media screen and (max-width: 80em) { ... } Media Types Friday, November 8, 13
media=”screen and (max-width: 80em)” ... /* In your CSS */ @media (orientation: portrait) { ... } @media screen and (color) { ... } Media Features Friday, November 8, 13
/* if the viewport width is 40em or greater */ @media (min-width: 40em) { aside { width: 50%; } } /* if the viewport width is 60em or greater */ @media (min-width: 60em) { aside { width: 30%; } } Single CSS File Friday, November 8, 13
width: 100%; } /* if the viewport width is 40em or greater */ @media (min-width: 40em) { aside { width: 50%; } } /* if the viewport width is 60em or greater */ @media (min-width: 60em) { aside { width: 30%; } } Small Viewport Width First Friday, November 8, 13
/* 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
‣ 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
than IE9... and it’s not IE Mobile... and viewport width is at least 40em... <link> global.css all styles linear layout layout.css only styles for layout http://adactio.com/journal/4494/ Friday, November 8, 13
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
than IE9... and it’s not IE Mobile... <link> 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
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
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
>= IE9 or IE Mobile or not IE <link> 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
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
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
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
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
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
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
content - Dynamic content ‣ Broad architecture - Lots of content types/categories ‣ Deep architecture - Lots of children and nesting Friday, November 8, 13
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
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
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
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
‣ 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
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
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
base
visional_engineering_and_design
nicholaspegu
0opacity_
ashapiro
tokimari
cyberagentdevelopers
takanorip
mosmos_noki
mixi_design
baasie
addyosmani
geeforr
eileencodes
morganepeng
tammyeverts
holman
mclloyd
jacobian
thoeni
marktimemedia
deanohume
brettharned
![[live examples] Friday, November 8, 13](https://files.speakerdeck.com/presentations/6eb6a8702ab40131a76c02d319a27da7/slide_43.jpg){kind=link}
![[code example] Friday, November 8, 13](https://files.speakerdeck.com/presentations/6eb6a8702ab40131a76c02d319a27da7/slide_45.jpg){kind=link}
![Module Based Partials index.html <!--[if (lt IE 9) & (!IEMobile)]>](https://files.speakerdeck.com/presentations/6eb6a8702ab40131a76c02d319a27da7/slide_224.jpg){kind=link}
![Module Based Partials index.html <!--[if (lt IE 9) & (!IEMobile)]>](https://files.speakerdeck.com/presentations/6eb6a8702ab40131a76c02d319a27da7/slide_225.jpg){kind=link}
![Module Based Partials index.html <!--[if (lt IE 9) & (!IEMobile)]>](https://files.speakerdeck.com/presentations/6eb6a8702ab40131a76c02d319a27da7/slide_226.jpg){kind=link}
![Module Based Partials index.html <!--[if (lt IE 9) & (!IEMobile)]>](https://files.speakerdeck.com/presentations/6eb6a8702ab40131a76c02d319a27da7/slide_227.jpg){kind=link}
![Module Based Partials index.html <!--[if (lt IE 9) & (!IEMobile)]>](https://files.speakerdeck.com/presentations/6eb6a8702ab40131a76c02d319a27da7/slide_228.jpg){kind=link}
![Module Based Partials index.html <!--[if (lt IE 9) & (!IEMobile)]>](https://files.speakerdeck.com/presentations/6eb6a8702ab40131a76c02d319a27da7/slide_229.jpg){kind=link}
![[AppendAround Demo] Friday, November 8, 13](https://files.speakerdeck.com/presentations/6eb6a8702ab40131a76c02d319a27da7/slide_283.jpg){kind=link}
![RWD Table Patterns [demo] Friday, November 8, 13](https://files.speakerdeck.com/presentations/6eb6a8702ab40131a76c02d319a27da7/slide_330.jpg){kind=link}
