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 Wednesday, October 16, 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 Wednesday, October 16, 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 Wednesday, October 16, 13
Order to form a more perfect Union, establish Justice, insure domestic Tranquility, provide for the common Flexible Content (Image) 100% Wednesday, October 16, 13
into the process regularly so that “deliverables” become “progress updates.” Time is not wasted on perfecting the parts, but advancing the whole. Wednesday, October 16, 13
- Takes the place of a traditional wireframe. - As much real content as you can. - Linear in nature, priority implied. - Possibly created in HTML, viewed in a browser. - Generated by content/UX people. Wednesday, October 16, 13
Like Style Tiles, but in the browser (styletil.es). - Very fast to build. - Accurate web typography. - Easy to show web interaction. - Client reviews in their browser of preference. Wednesday, October 16, 13
media=”screen and (max-width: 80em)” ... /* In your CSS */ @media (min-width: 30em) { ... } @media screen and (max-width: 80em) { ... } Media Queries Wednesday, October 16, 13
media=”screen and (max-width: 80em)” ... /* In your CSS */ @media (min-width: 30em) { ... } @media screen and (max-width: 80em) { ... } Media Types Wednesday, October 16, 13
media=”screen and (max-width: 80em)” ... /* In your CSS */ @media (orientation: portrait) { ... } @media screen and (color) { ... } Media Features Wednesday, October 16, 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 Wednesday, October 16, 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 Wednesday, October 16, 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 Wednesday, October 16, 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 Wednesday, October 16, 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/ Wednesday, October 16, 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 Wednesday, October 16, 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/ Wednesday, October 16, 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 Wednesday, October 16, 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 Wednesday, October 16, 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 Wednesday, October 16, 13
Easy Maintenance ‣ Allows you to start with small layouts and serve large layout to old IE without JS ‣ Requires Preprocessor Wednesday, October 16, 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 ... } Wednesday, October 16, 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 ... } Wednesday, October 16, 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/ Wednesday, October 16, 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 Wednesday, October 16, 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. Wednesday, October 16, 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. Wednesday, October 16, 13
content - Dynamic content ‣ Broad architecture - Lots of content types/categories ‣ Deep architecture - Lots of children and nesting Wednesday, October 16, 13
content - Dynamic content ‣ Broad architecture - Lots of content types/categories ‣ Deep architecture - Lots of children and nesting DON’T GIVE UP. Wednesday, October 16, 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 Wednesday, October 16, 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 Wednesday, October 16, 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/ Wednesday, October 16, 13