Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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 & ROADS
THE 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
conde...
RESEARCH DESIGN DEVELOP LAUNCH
“
Title » @bryanrieger
alistapart.com/articles/responsive-web-design
Text
RESPONSIVE
EVENTSITESE-COMMERCEMEDIA&PUBLISHING
EXPLORING A
RESPONSIVE
DESIGN
& 21 2 3
FLEXIBLEIMAGESFLUIDGRID MEDIA QUERIES
FOR MAJOR AND MINOR ADJUSTMENTS
2
MEDIAQUERIES
∞
THEBASELINE
@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-ROWMAST
@media screen and (min-width: 112em) { … }
BREAKPOINT
5-COLUMN+TITLE INCREASE
@media screen and (min-width: 120em) { … }
BREAKPOINT
SIXCOLUMNS +MAX-WIDTH
S T A R T I N G F R O M
Small layout
systems
SORT TASKSINTOLOGICAL GROUPS
THE MAST
EDIT MENUVERSIONS MENUCONFIG MENU
REPOSITION ELEMENTS ONCE THERE’S ROOM
THE MAST
1
2 3
4 5
6
7
1 2 3 4 5
6
7
@media screen and (min-width: 50em) { … }
USEBREAKPOINTSTODEFEND YOURCONTENT
?
WHY 50 EMS?
50em
microsoft.com
(cc) Jeremy Keith — flic.kr/p/anLpJ5
TOWARD A
NEW 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...
“
“You like apples?” » electricpulp.com/notes/you-like-apples/
Electric Pulp
…we’d recently redesigned and monitored
conve...
» “Skinny Ties and responsive eCommerce”
» gravitydept.com/blog/skinny-ties-and-responsive-ecommerce/
Brendan Falkowski, G...
TROUBLE IN
RESPONSIVEPARADISE?
— TROUBLE IN —
MOTO.OAKLEY.COM
6MB
TEEHAN+LAX
3MBTO21MB
“
“Responsive Web Design Makes It Hard To Be Fast” » guypo.com
Guy Podjarny
I think you have to face the music
— [responsi...
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...
in 2009
2.0MBIN 2015
320KB
Sources: developers.google.com/speed/articles/web-metrics; httparchive.org
Alfred Korzybski
(cc) Author — flic.kr/p/7nhMYE
“
Alfred Korzybski
The map is not the territory it
represents, but, if correct, it has a
similar structure to the territor...
“
American Gods
Neil Gaiman
The more accurate the map, the more
it resembles the territory. The most
accurate map possible...
ALWAYSON&ALWAYS ONLINE&
TRULY PERSONAL
BANGLADESH
900%MORE INTERNET USERS
IN 2011
Data: internetworldstats.com/asia/bd.htm
Photos: © Adnan Wahid: flic.kr/p/yvc4u; © Uncorne...
© Nele Van Doninck — flic.kr/p/aFsguF
Source: amandamakulec.com/2012/05/08/key-findings-from-the-mobile-africa-2012-report/
MOBILE
PENETRATION
700MMOBILE
USERS
...
MORE PEOPLE IN AFRICA
HAVE ACCESS TO A MOBILE
PHONE THAN ELECTRICITY.
Source: edition.cnn.com/2012/10/04/tech/mobile/afric...
“
“Africa not just a mobile-first continent — it’s mobile only”
» cnn.com
Tony Shepshak, CNN
Half of Kenya’s GDP now
moves...
“
“Mobile Africa” » designaw.me/mobileaf.html
Andrew Williams
Most remote villages [in Kenya] have a
single, communal cell...
“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...
Estimates via Ericsson 2014 Mobility Report
mobile subscriptions in 2014
60PERCENTARE ON
EDGE / CDMA
7BILLION
3.1MB
1.5MB
6MB
5MB
23MB
(cc) International Institute for Communication and Development — flic.kr/p/99EQTE
The New Normal
TO PROMOTE
THE 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/Re...
?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 ...
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 pa...
T H I S O L D I D E A O F
Progressive
Enhancement
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 ) {
// ...
ROLLING UP
THE 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—3...
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
Ethan Marcotte –  The map and the territory (From Business to Buttons 2015)
Ethan Marcotte –  The map and the territory (From Business to Buttons 2015)
Ethan Marcotte –  The map and the territory (From Business to Buttons 2015)
Ethan Marcotte –  The map and the territory (From Business to Buttons 2015)
Ethan Marcotte –  The map and the territory (From Business to Buttons 2015)
Ethan Marcotte –  The map and the territory (From Business to Buttons 2015)
Ethan Marcotte –  The map and the territory (From Business to Buttons 2015)
Ethan Marcotte –  The map and the territory (From Business to Buttons 2015)
Ethan Marcotte –  The map and the territory (From Business to Buttons 2015)
Ethan Marcotte –  The map and the territory (From Business to Buttons 2015)
Ethan Marcotte –  The map and the territory (From Business to Buttons 2015)
Ethan Marcotte –  The map and the territory (From Business to Buttons 2015)
Ethan Marcotte –  The map and the territory (From Business to Buttons 2015)
Ethan Marcotte –  The map and the territory (From Business to Buttons 2015)
Ethan Marcotte –  The map and the territory (From Business to Buttons 2015)
Ethan Marcotte –  The map and the territory (From Business to Buttons 2015)
Ethan Marcotte –  The map and the territory (From Business to Buttons 2015)
Upcoming SlideShare
Loading in …5
×

Ethan Marcotte – The map and the territory (From Business to Buttons 2015)

808 views

Published on

Talk at From business to Buttons 2015, at Berns in Stockholm.

Published in: Design
  • Be the first to comment

Ethan Marcotte – The map and the territory (From Business to Buttons 2015)

  1. 1. 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
  2. 2. Manhattan in the late 18th century: 125,000 PEOPLE
  3. 3. Most of the population LIVED HERE
  4. 4. The island was covered with PRIVATE ESTATES
  5. 5. UNSAFE & UNSUSTAINABLE
  6. 6. JOHN RANDEL, JR. CHIEF ENGINEER & SURVEYOR COMMISSION OF STREETS & ROADS THE 1807
  7. 7. “ 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.
  8. 8. RESEARCH DESIGN DEVELOP LAUNCH
  9. 9. “ Title » @bryanrieger alistapart.com/articles/responsive-web-design Text
  10. 10. RESPONSIVE EVENTSITESE-COMMERCEMEDIA&PUBLISHING
  11. 11. EXPLORING A RESPONSIVE DESIGN
  12. 12. & 21 2 3 FLEXIBLEIMAGESFLUIDGRID MEDIA QUERIES
  13. 13. FOR MAJOR AND MINOR ADJUSTMENTS 2 MEDIAQUERIES ∞ THEBASELINE
  14. 14. @media screen and (min-width: 31em) { … } BREAKPOINT 2-COLUMN+FULL MASTHEAD
  15. 15. @media screen and (min-width: 44em) { … } BREAKPOINT 3-COLUMN
  16. 16. @media screen and (min-width: 80em) { … } BREAKPOINT 4-COLUMN +SINGLE-ROWMAST
  17. 17. @media screen and (min-width: 112em) { … } BREAKPOINT 5-COLUMN+TITLE INCREASE
  18. 18. @media screen and (min-width: 120em) { … } BREAKPOINT SIXCOLUMNS +MAX-WIDTH
  19. 19. S T A R T I N G F R O M Small layout systems
  20. 20. SORT TASKSINTOLOGICAL GROUPS THE MAST EDIT MENUVERSIONS MENUCONFIG MENU
  21. 21. REPOSITION ELEMENTS ONCE THERE’S ROOM THE MAST 1 2 3 4 5 6 7 1 2 3 4 5 6 7 @media screen and (min-width: 50em) { … }
  22. 22. USEBREAKPOINTSTODEFEND YOURCONTENT ? WHY 50 EMS? 50em
  23. 23. microsoft.com
  24. 24. (cc) Jeremy Keith — flic.kr/p/anLpJ5
  25. 25. TOWARD A NEW MAP
  26. 26. THE RESPONSIVE BENEFITS ONEILLCLOTHING.COMBOSTONGLOBE.COMSKINNYTIES.COM
  27. 27. “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.
  28. 28. “ “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.
  29. 29. » “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%
  30. 30. TROUBLE IN RESPONSIVEPARADISE? — TROUBLE IN —
  31. 31. MOTO.OAKLEY.COM 6MB
  32. 32. TEEHAN+LAX 3MBTO21MB
  33. 33. “ “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.
  34. 34. INTERNET.ORG 4.3MB
  35. 35. APPLE’S MAC PRO PROMO SITE 33.4MB
  36. 36. “ 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.
  37. 37. in 2009 2.0MBIN 2015 320KB Sources: developers.google.com/speed/articles/web-metrics; httparchive.org
  38. 38. Alfred Korzybski
  39. 39. (cc) Author — flic.kr/p/7nhMYE
  40. 40. “ 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.
  41. 41. “ 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.
  42. 42. ALWAYSON&ALWAYS ONLINE& TRULY PERSONAL
  43. 43. BANGLADESH
  44. 44. 900%MORE INTERNET USERS IN 2011 Data: internetworldstats.com/asia/bd.htm Photos: © Adnan Wahid: flic.kr/p/yvc4u; © Uncornered Market: flic.kr/p/9EZHVD
  45. 45. © Nele Van Doninck — flic.kr/p/aFsguF
  46. 46. Source: amandamakulec.com/2012/05/08/key-findings-from-the-mobile-africa-2012-report/ MOBILE PENETRATION 700MMOBILE USERS 60%
  47. 47. 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
  48. 48. “ “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
  49. 49. “ “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
  50. 50. “These aren’t My Users!”
  51. 51. moneyweb.co.za/moneyweb-south-africa/asia-mobile-internets-tomorrow
  52. 52. “ » “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.
  53. 53. Estimates via Ericsson 2014 Mobility Report mobile subscriptions in 2014 60PERCENTARE ON EDGE / CDMA 7BILLION
  54. 54. 3.1MB 1.5MB 6MB 5MB 23MB
  55. 55. (cc) International Institute for Communication and Development — flic.kr/p/99EQTE The New Normal
  56. 56. TO PROMOTE THE HEALTH OF THE CITY
  57. 57. PRIVATE ESTATES FUTURE GROWTH
  58. 58. PRIVATE ESTATES FUTURE GROWTH
  59. 59. “ » “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.
  60. 60. ?promote the health H O W C A N W E Of The Web
  61. 61. 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
  62. 62. 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
  63. 63. clearleft.com/thinks/responsivedesignonabudget/ R E D U C E • R E V I S I T
  64. 64. 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.”
  65. 65. T H I S O L D I D E A O F Progressive Enhancement R E D U C E • R E V I S I T
  66. 66. BASIC ENHANCED
  67. 67. “CUTTING THE MUSTARD” if ( "querySelector" in document && "localStorage" in window && "addEventListener" in window ) { // bootstrap the javascript application }
  68. 68. ROLLING UP THE MAP
  69. 69. &Charles Ray Eames
  70. 70. “ Ray Eames What works is better than what looks good. The ‘looks good’ can change, but what works, works.”
  71. 71. a new definition of “beautiful”
  72. 72. M.GUARDIAN.CO.UK— 300kGOV.UK— 480k2012.DCONSTRUCT.COM—195kPAULROBERTLLOYD.COM—400kFILAMENTGROUP.COM—215kTHEPAINTDROP.COM—350k THE NEW BEAUTIFUL
  73. 73. Let us build roads both wide and clear.
  74. 74. 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

×