An Event Apart Notes: Ethan Marcotte, Responsive Web Design

Ethan MarcotteEthan Marcotte has become the father of Responsive Web Design and spent this whole day focused on principles, techniques, gotchas, examples, … all about building and how to build responsive sites. With a sprinkle of mobile first.

For Ethan, it all started with this article: http://www.alistapart.com/articles/dao/

Think of architecture, the whole design phase is established on constraints.

A truly interactive system is a multiple-loop in which one enters into a conversation; a continual and constructive information exchange.

Examples of responsive design:
designingmonsters.com
http://jessicahische.is/
designmadeingermany.de
crush and lovely
us.illyissimo.com
unitedpixelworkers.com – very big and touch friendly navigation
nd.edu – notre dame
university of tennessee
the boston globe
http://responsivenews.co.uk/news

Why go responsive?
http://blog.responsivenews.co.uk/
http://digital.cabinetoffice.gov.uk/2012/01/26/mobile-and-gov-uk/
“offer high quality with lower maintenance”
http://simplebits.com/notebook/2011/08/19/adapted/
24ways.org
http://couchable.co/blog/post/a-responsive-design-workflow – don’t
http://upstatement.com/blog/2012/01/how-to-approach-a-responsive-design/
http://upstatement.com/blog/2012/01/finding-the-look-feel-of-bostonglobe-com/

Compare process to print with a press – linear process has been co-opted for the web
discover, design, develop, deliver
Break down the one way process from design to develop. The workflow should cycle between design and develop.
Text:
How well does the layout adapt?
Do individual modules still feel usable?

Think Disposably

Natalie Down video on Vimeo vimeo.com/33747932

Device Access: Working with devices is part of our design process
bradfrostweb.com/blog/mobile/test-on-real-mobile-devices-without-breaking-the-bank/

Our content. Wherever you are. Universal Access

Mobile First! – Luke Wroblewski
The argument: Mobile traffic has explided, new capabilities (touch, geo, voice, ubiquity), narrower screens force us to focus.
Think about these things earlier in the process gives a better end product
What value does each content have for our mobile users?

Mobile First and Design for Content First (really Content always)

Flexible Grids – responsive sites have a flexible foundation
http://mediaqueri.es
http://www.informationarchitects.jp/en/
mikedidthis-focus.tumblr.com/

500 Android – snapshot from google analytics: http://stephanierieger.com/the-trouble-with-android/
Will screen resolutions standardize over time? Who knows, we need to be thinking flexible, it is even the more future proof solution.

Grids
The History of Grids – Every movement in art can be seen as a response to another
Start design with a network of modules
…methods and rules upon which it is impossible to improve have been developed for centuries… -Jan Tschichold
Mark Boulton introduces “The New Canon” for web design
-Content out, not canvas in.
-Create connectedness
-Bind the content to the device

aworkinglibrary.com – change – Mandy Brown “rich designs can emerge from flexible roots… the web is not print…

Formula: target / context = result

contentsmagazine.com

Elliot Jay Stocks suggests using a 1000px width page for easier calculations: http://elliotjaystocks.com/blog/a-better-photoshop-grid-for-responsive-web-design/

TextMate has intrenal tools for doing calculations. Let the software calculate the formula, then put the the reference numbers in a comment.

SASS – Getting started with SASS – http://www.alistapart.com/articles/getting-started-with-sass/

Use the formula for margins and padding as well. We get proportional results! Using fixed values would be unproportional.

Learning to love (survive) rounding
.last-child { display:table-cell }

Frameworks:
Golden Grid system.com
Foundation.zurb.com
know limitations of a framework

it’s all about balancing the ease of dev vs ease of maintenance

Frameworks are very valuable for prototyping

Design your source code order. think about linear and layout at the same time.

Bandwidth
no correlation between screensize and connection speed (or price even)
a matter of serving appropriate images
a hack really: preloaders, cookies and race conditions (http://blog.yoav.ws/2011/09/Preloaders-cookies-and-race-conditions)
Each browser does this differently though and it’s not standardized.

Other options for responsive images
adaptive-images.com
headlondon.com/our-thoughts/technology/posts/creating-responsive-images-using-the-noscript-tag/
monolitti.com/images
sencha.io – route your images through this url to get appropriately sized images. still uses browser detection to determine size, pus it’s 3rd party
categorizr – a modern device detection script – brettjankord.com

Can we solve this with new markup? A new html element? Like th evideo or audio elements?
Video element can have media query attached and multiple source files referenced.

Backgrounds
stuntbox.com
background-position: 0 0; – x y; left top; 50px 0; 0 50px;
it’s a bit different for percentages: 50% 50% (centered). percentage for packground position is proportional to the image itself and the container. t places that point in the background image in that position in the container.
Resizing background images: background-size css property. Set in pixel based terms or in proportions/percentages. (not 100% supported, but can be used as progressive enhancement).

Video:
madebyhand
dolectures.co.uk
http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/
Create an aspect-ratio aware box (container): height / width = aspect ratio
set the video width and height to 100% and give the container a padding-top of the aspect ration value (in percentage)

Is the answer to the images/bandwidth question more code?
http://www.alistapart.com/articles/a-simpler-page/
craigmod.com/bibliotype/demo/ filamentgroup.com/examples/rwd-table-patterns
Let the user opt-in to the content that they are most interested in to construct the page.
User selected video settings in youtube, for example.

Media Queries
Descendant from media type style sheets: scree, print, handheld, projector…
display area and rendering surface
Think of the browser’s viewport as the display area and the display as the rendering surface.
Specify ranges with min- and max- prefixes for browsers above or below a certain threshold or breakpoint.
Long list of media query features: width, height, device-width, device-height, orientation, aspect-ratio, device-aspect-ratio, color, color-index, monochrome, resolution, scan, grid. These can be combined in statements.
Can combine media types as well.
Also keywords for mixing the statements: only, not, and

Viewport
http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html
There is a difference between “device pixels” and “css pixels”
ios bug for orientation: filamentgroup.com/lab/a_fix_for_the_ios_orientationchange_zoom_bug/
device-adaptation
module in css iin progress.
Recommend:

Put it into practice:
Looking at the weather module on the boston globe as an example. http://bostonglobe.com/
Don’t suppress things before discussing simplifying it.

How do you choose breakpoints?
(The only way I’ve ever learned anything, is by doing it wrong first)
Initial breakpoints: 320, 480, 768, 1024, 1200px
Set up the queries to support Mobile First
Mobile first workflow overview, start with one layout and additively add more.

Polyfills
css3-mediaqueries-js: slower, first on the scene.
respond.js: very fast, only tests for min-width and max-width, only ~3kb

There’s no real set of IDEAL breakpoints
We’ve been very focused on columns, let’s refocus on content!
http://www.designbyfront.com/workinprogress/article/the-goldilocks-approach-to-responsive-design
Set major increments and have the smallest breakpoint totally fluid and then find breakpoints dependent on the design (content and typography) rather than devices. Let’s not choose our breakpoints based on devices, but let our designs dictate what looks best.
paulrobertlloyd.com

Start with the smallest part

Advanced Layouts
Negative margins to break out of the grid

Box-sizing

CSS3 – the waiting game
Multiple background images

Flexbox
display: -webkit-flexbox or -webkit-inline-flexbox
flex-flow: row, row-reverse, column, column-reverse;
flex-order: 1;

flex-order places flexbox items into ordered groups
By default, elements have a flex-order of 0, and remain in the same order they are in the source.

Could be used for template layouts with a layout policy!

! (oh the waiting game, it would be awesome to be able to use this now)

http://www.lukew.com/ff/entry.asp?1392
Bagcheck app, links to footer navigation in the header.
Content before navigation for mobile.

http://contentsmagazine.com/ Setting the top margin and absolute position to 5em/-5em, and the navigation is part of the main content. Smaller sizes the navigation is at the bottom and larger it is set to position absolute and fits inside the margin.

Responsive Enhancements
fittext.js
trentwalton.com/ – “Some people’s brains I wish I had” – Ethan talking about Trent Walton
http://github.com/Wilto/Dynamic-Carousel
http://www.barackobama.com/

Progressive Enhancements are backwards thinking to graceful degradation, start simple and build up with enhancements.
stephanierieger.com/a-plea-for-progressive-enhancement/
rakaz.nl/code/combine

Use IE conditionals to load specific stylesheets for them. And use media=”only all” for the enhanced styles

Minify and combine/concatenate javascript files

Conditionally load assets (progressive enhancement – if a browser can’t be enhanced, let’s not load the files that would enhance it). Test for capabilities of device and not test for the device itself
labjs.com
yepnopejs.com

Constantly ask yourself: is this element content or an enhancement.
Fonts: sasquatchmusicfestival.com (fonts for web are usually pretty heavy)

Thinking about process and patterns
1. Width
2. Hierarchy
3. Density
4. Interaction

More Examples:
tattly.com
vivelohoy.com
tinynav.viljamis.com
forefathersgroup.com
ediblevineyard.com
staffanstorp.se

WOW, what a day! On to implementation…

An Event Apart Notes: Ethan Marcotte, Rolling Up Our Responsive Sleeves

Henry Adams (Descendant of 2 presidents: great-grandson to John Adams and grandson to John Quincy Adams). He lived between the civil war and world war 1. He witnessed the industrial revolution.

Chaos was the law of nature, Order was the dream of man

Samuel Johnson – funniest man in the 17th Century…

Responsive Design:
1. Flexible of fluid grid
2. Flexible images and media
3. Media Queries

“Solve the parts, not the whole problem.” – Mr Kaizer

1. Layout
2. Staring Small
3. Advertising
4. Media Queries

Formula:
target / context = result

thegreatdiscontent.com
Bootstrap and dribbble and great discontent star big and go small.

We should start small and go big – Yiibu

Site > Structure > Skin > Services > Space Plan > Stuff

Slow constants quick, slow controls quick – Stewart Brad – How Buildings Learn.

Trent Walton – “trade control in photoshop for a network of context” in Responsive designs

Layout is most susceptible to change

Width, hierarchy, density, interaction.

Don’t just hide content on mobile – simplify before you suppress.

Move nav into footer? Link to it in the header

We’ve been too focused on layout and columns and grids.

paul robert lloyd.com
Ads: Keep relative position but have it adapt it’s position. document.write is not friendly. Responsive Advertising: Mark Boulton and Roger Black.

Images and Media:
Images with width: 100%
Media set via javascript? No we don’t need to, let’s use css only, it’s more fluid! Althoug it does require a bit of un-semantic mark-up.
Width x Height = Aspect Ratio
Wrap media in div. Give container a padding-top matching the aspect ratio percentage, position rellative. Give media inside position absolute and width and height both 100%!

BBC – responsivenews.com

Bandwidth is a blind spot. and now extra complicated with image prefetching.

categorizr and craig mod – bibliotype
– Give users choice/options to view content they aer interested in.

Art is Messy – Andrew Stanton, Pixar

Many hands make light work

Link: Responsive Images: How they Almost Worked and What We Need

Mat discusses the options for getting responsive images along with responsive designs. We can use various means (server-side, client-side, mobile-first, html5 data attributes, cookies…), but none are fully satisfactory, especially with new browsers prefetching images before cookies can be set or html is even fully read and parsed. He states that bandwidth sniffing is…

a lot like setting something on fire to see exactly how flammable it is

Great analogy, since the only real way to know a bandwidth speed is to download something and time it… so we can’t effectively rely on that for determining which image file to deliver. A proposal for a new html element to handle multiple image source files, much like the new video and audio elements:

<picture>
<source src="high-res.jpg" media="min-width: 800px" />
<source src="mobile.jpg" />
<!-- Fallback content: -->
<img src="mobile.jpg" />
</picture>

via A List Apart: Articles: Responsive Images: How they Almost Worked and What We Need.