ethan marcotte – the map and the territory (from business to buttons 2015)
TRANSCRIPT
THE MAP
THE TERRITORY&
E T H A N M A R C O T T E • @ B E E P • F R O M B U S I N E S S T O B U T T O N S
Manhattan in the late 18th century:
125,000 PEOPLE
Most of the population
LIVED HERE
The island was covered with
PRIVATE ESTATES
UNSAFE & UNSUSTAINABLE
JOHN RANDEL, JR.CHIEF ENGINEER & SURVEYOR
COMMISSION OF STREETS & ROADSTHE 1807
“
Eccentric Spaces
Robert Harbison
To put a city in a book, to put the world on one sheet of paper—maps are the most condensed humanized spaces of all….
They make the landscape fit indoors, make us masters of sights we can’t see and spaces we can’t cover.
RESEARCH DESIGN DEVELOP LAUNCH
“Title » @bryanriegeralistapart.com/articles/responsive-web-design
Text
RESPONSIVE
EVENT SITESE-COMMERCEMEDIA & PUBLISHING
EXPLORING A
RESPONSIVE DESIGN
& 21 2 3
FLEXIBLE IMAGESFLUID GRID MEDIA QUERIES
FOR MAJOR AND MINOR ADJUSTMENTS
2
MEDIA QUERIES
∞THE BASELINE
@media screen and (min-width: 31em) { … }
BREAKPOINT
2-COLUMN + FULL MASTHEAD
@media screen and (min-width: 44em) { … }
BREAKPOINT
3-COLUMN
@media screen and (min-width: 80em) { … }
BREAKPOINT
4-COLUMN + SINGLE-ROW MAST
@media screen and (min-width: 112em) { … }
BREAKPOINT
5-COLUMN + TITLE INCREASE
@media screen and (min-width: 120em) { … }
BREAKPOINT
SIX COLUMNS + MAX-WIDTH
S T A R T I N G F R O M
Small layout systems
SORT TASKS INTO LOGICAL GROUPS
THE MAST
EDIT MENUVERSIONS MENUCONFIG MENU
REPOSITION ELEMENTS ONCE THERE’S ROOM
THE MAST
12 3
4 567
1 2 3 4 5
6
7
@media screen and (min-width: 50em) { … }
USE BREAKPOINTS TO DEFEND YOUR CONTENT
?WHY 50 EMS?
50em
(cc) Jeremy Keith — flic.kr/p/anLpJ5
TOWARD ANEW MAP
THE RESPONSIVE BENEFITS
ONEILLCLOTHING.COMBOSTONGLOBE.COMSKINNYTIES.COM
“Globe circulation rises on wave of digital subscriptions” » b.globe.com/18bJJvS
The Boston Globe
“Paid circulation at The Boston Globe continues to climb on the strength of digital subscriptions, which shot up by almost 50 percent in six months.
“
“You like apples?” » electricpulp.com/notes/you-like-apples/
Electric Pulp
…we’d recently redesigned and monitored conversions, transactions and revenue for three weeks. Then we quietly deployed the responsive [design] and monitored for another three weeks…. iPhone transactions more than doubled. Android transactions more than quadrupled.
» “Skinny Ties and responsive eCommerce”» gravitydept.com/blog/skinny-ties-and-responsive-ecommerce/
Brendan Falkowski, Gravity Department
revenue growth for all devices42.4%revenue growth for iPhone377.6%
conversion rate for all devices+13.6%increased visit duration44.6%
TROUBLE IN
RESPONSIVEPARADISE?
— TROUBLE IN —
MOTO.OAKLEY.COM
6MB
TEEHAN+LAX
3MB TO 21MB
“
“Responsive Web Design Makes It Hard To Be Fast” » guypo.com
Guy Podjarny
I think you have to face the music — [responsive design] makes it very hard to write a fast website.
INTERNET.ORG
4.3MB
APPLE’S MAC PRO PROMO SITE
33.4MB
“
Ethan Marcotte, who is not serious.
I think you have to face the music— fixed-width design makes it very hard to write a fast website.
in 2009
2.0MB IN 2015
320KB
Sources: developers.google.com/speed/articles/web-metrics; httparchive.org
Alfred Korzybski
“
Alfred Korzybski
The map is not the territory it represents, but, if correct, it has a similar structure to the territory, which accounts for its usefulness.
The map is not the territory.
“
American Gods
Neil Gaiman
The more accurate the map, the more it resembles the territory. The most accurate map possible would be the territory, and thus would be perfectly accurate and perfectly useless.
ALWAYS ON & ALWAYS ONLINE&
TRULY PERSONAL
BANGLADESH
900%MORE INTERNET USERS IN 2011
Data: internetworldstats.com/asia/bd.htmPhotos: © Adnan Wahid: flic.kr/p/yvc4u; © Uncornered Market: flic.kr/p/9EZHVD
Source: amandamakulec.com/2012/05/08/key-findings-from-the-mobile-africa-2012-report/
MOBILE PENETRATION
700M MOBILEUSERS
60%
MORE PEOPLE IN AFRICA HAVE ACCESS TO A MOBILE PHONE THAN ELECTRICITY.
Source: edition.cnn.com/2012/10/04/tech/mobile/africa-mobile-opinion/index.html
“
“Africa not just a mobile-first continent — it’s mobile only” » cnn.com
Tony Shepshak, CNN
Half of Kenya’s GDP now moves through mobile money, and [mobile micropayment system] M-Pesa reportedly handles $20 million a day in transactions.
(cc) Rachel Strohm — flic.kr/p/7tsJfN
“
“Mobile Africa” » designaw.me/mobileaf.html
Andrew Williams
Most remote villages [in Kenya] have a single, communal cell phone. When the battery runs out, they send a runner to the nearest village (which may be many miles away) with a diesel generator.
(cc) Carsten ten Brink — flic.kr/p/dfjExL
“These aren’t My Users!”
moneyweb.co.za/moneyweb-south-africa/asia-mobile-internets-tomorrow
“
» “Asia: mobile internet's tomorrow”
Reuters
This year, the number of mobile Internet users in the developing world will overtake those in the developed world for the first time — growing 27 times since 2007.
Estimates via Ericsson 2014 Mobility Report
mobile subscriptions in 2014
60 PERCENT ARE ON EDGE / CDMA
7 BILLION
3.1MB
1.5MB6MB
5MB
23MB
(cc) International Institute for Communication and Development — flic.kr/p/99EQTE
The New Normal
TO PROMOTETO PROMOTETHE HEALTH OF
THE CITY
PRIVATE ESTATES
FUTURE GROWTH
PRIVATE ESTATES FUTURE GROWTH
“
» “Map Of The City Of New York And Island Of Manhattan With Explanatory Remarks And References”» library.cornell.edu/Reps/DOCS/nyc1811.htm
William Bridges, 1811
[To lay] out Streets... in such a manner as to unite regularity and order with the public convenience and benefit and in particular to promote the health of the City….
[To lay] out Streets... in such a manner as to unite regularity and order with the public convenience and benefit and in particular to promote the health of the City.
? &promote the health
H O W C A N W E
Of The Web
sustainability
&?L E T ’ S B E G I N A C O N V E R S A T I O N A B O U T
I N
Web Design
sustainability
&?L E T ’ S B E G I N A C O N V E R S A T I O N A B O U T
R E D U C E • R E V I S I TR E D U C E • R E V I S I T
clearleft.com/thinks/responsivedesignonabudget/
R E D U C E • R E V I S I T
R E D U C E • R E V I S I T
Our pages should take no more than three seconds to load over an sub-3G connection.”
“
“Our pages should weigh no more than 300kb.”
T H I S O L D I D E A O F
ProgressiveEnhancement
R E D U C E • R E V I S I T
BASIC ENHANCED
“CUTTING THE MUSTARD”
if ( "querySelector" in document && "localStorage" in window && "addEventListener" in window ) { // bootstrap the javascript application }
ROLLING UPTHE MAP
&Charles Ray Eames
“
Ray Eames
What works is better than what looks good. The ‘looks good’ can change, but what works, works.”
&?a new definition of
“beautiful”
M.GUARDIAN.CO.UK — 300kGOV.UK — 480k2012.DCONSTRUCT.COM — 195kPAULROBERTLLOYD.COM — 400kFILAMENTGROUP.COM — 215kTHEPAINTDROP.COM — 350k
THE NEW BEAUTIFUL
Let us build roads both wide and clear.
THANK YOU.
@ B E E P • @ R W D • E T H A N M A R C O T T E . C O M