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

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. Manhattan in the late 18th century:
125,000 PEOPLE

3. Most of the population
LIVED HERE

4. The island was covered with
PRIVATE ESTATES

5. UNSAFE & UNSUSTAINABLE

6. JOHN RANDEL, JR.
CHIEF ENGINEER & SURVEYOR
COMMISSION OF STREETS & ROADS
THE 1807

10. “
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.

11. RESEARCH DESIGN DEVELOP LAUNCH

14. “
Title » @bryanrieger
alistapart.com/articles/responsive-web-design
Text

15. RESPONSIVE
EVENTSITESE-COMMERCEMEDIA&PUBLISHING

16. EXPLORING A
RESPONSIVE
DESIGN

17. & 21 2 3
FLEXIBLEIMAGESFLUIDGRID MEDIA QUERIES

19. FOR MAJOR AND MINOR ADJUSTMENTS
2
MEDIAQUERIES
∞
THEBASELINE

20. @media screen and (min-width: 31em) { … }
BREAKPOINT
2-COLUMN+FULL MASTHEAD

21. @media screen and (min-width: 44em) { … }
BREAKPOINT
3-COLUMN

22. @media screen and (min-width: 80em) { … }
BREAKPOINT
4-COLUMN +SINGLE-ROWMAST

23. @media screen and (min-width: 112em) { … }
BREAKPOINT
5-COLUMN+TITLE INCREASE

24. @media screen and (min-width: 120em) { … }
BREAKPOINT
SIXCOLUMNS +MAX-WIDTH

25. S T A R T I N G F R O M
Small layout
systems

29. SORT TASKSINTOLOGICAL GROUPS
THE MAST
EDIT MENUVERSIONS MENUCONFIG MENU

30. 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) { … }

31. USEBREAKPOINTSTODEFEND YOURCONTENT
?
WHY 50 EMS?
50em

32. microsoft.com

33. (cc) Jeremy Keith — flic.kr/p/anLpJ5

34. TOWARD A
NEW MAP

35. THE RESPONSIVE BENEFITS
ONEILLCLOTHING.COMBOSTONGLOBE.COMSKINNYTIES.COM

36. “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.

37. “
“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.

38. » “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%

39. TROUBLE IN
RESPONSIVEPARADISE?
— TROUBLE IN —

40. MOTO.OAKLEY.COM
6MB

41. TEEHAN+LAX
3MBTO21MB

42. “
“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.

43. INTERNET.ORG
4.3MB

44. APPLE’S MAC PRO PROMO SITE
33.4MB

45. “
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.

46. in 2009
2.0MBIN 2015
320KB
Sources: developers.google.com/speed/articles/web-metrics; httparchive.org

47. Alfred Korzybski

48. (cc) Author — flic.kr/p/7nhMYE

49. “
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.

50. “
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.

52. ALWAYSON&ALWAYS ONLINE&
TRULY PERSONAL

54. BANGLADESH

55. 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

56. © Nele Van Doninck — flic.kr/p/aFsguF

58. Source: amandamakulec.com/2012/05/08/key-findings-from-the-mobile-africa-2012-report/
MOBILE
PENETRATION
700MMOBILE
USERS
60%

59. 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

60. “
“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

61. “
“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

62. “These aren’t
My Users!”

63. moneyweb.co.za/moneyweb-south-africa/asia-mobile-internets-tomorrow

64. “
» “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.

65. Estimates via Ericsson 2014 Mobility Report
mobile subscriptions in 2014
60PERCENTARE ON
EDGE / CDMA
7BILLION

66. 3.1MB
1.5MB
6MB
5MB
23MB

67. (cc) International Institute for Communication and Development — flic.kr/p/99EQTE
The New Normal

68. TO PROMOTE
THE HEALTH OF
THE CITY

70. PRIVATE ESTATES
FUTURE GROWTH

71. PRIVATE ESTATES FUTURE GROWTH

73. “
» “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.

74. ?promote the health
H O W C A N W E
Of The Web

75. 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

76. 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

77. clearleft.com/thinks/responsivedesignonabudget/
R E D U C E • R E V I S I T

78. 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.”

79. 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

80. BASIC ENHANCED

81. “CUTTING THE MUSTARD”
if ( "querySelector" in document
&& "localStorage" in window
&& "addEventListener" in window ) {
// bootstrap the javascript application
}

83. ROLLING UP
THE MAP

84. &Charles Ray
Eames

87. “
Ray Eames
What works is better than what looks
good. The ‘looks good’ can change, but
what works, works.”

88. a new definition of
“beautiful”

89. M.GUARDIAN.CO.UK— 300kGOV.UK— 480k2012.DCONSTRUCT.COM—195kPAULROBERTLLOYD.COM—400kFILAMENTGROUP.COM—215kTHEPAINTDROP.COM—350k
THE NEW BEAUTIFUL

90. Let us build roads
both wide and clear.

91. 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