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

target / context = result
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
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%!


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