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
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
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
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/
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
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
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
! 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 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
less 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/
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
less 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/
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
If >= 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
// 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" ..." }
// 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" ..." }
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/
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
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.
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.
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
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
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
takumasaito
cpineda57
thebogheart
okabemy
moshimoshiyuki
nicholaspegu
ashapiro
mct
takanorip
yasuhiroyokota
shihorishimazu
quramy
sstephenson
addyosmani
eileencodes
maggiecrowley
csswizardry
kneath
moore
aki_iinuma
mraible
jeffersonlam
irinanazarova
![Icon Font Markup /*.scss*/" [data-icon]:before {" content: attr(data-icon);" font-family: 'icon-font-family';"](https://files.speakerdeck.com/presentations/dc5065f0815501313e622ee0187f1261/slide_320.jpg){kind=link}
