Talare nummer tio kallas
för den responsiva webbens fader.

Han har en inte så välkänd
blogg/webbplats-

-med det fantastiska namnet
unstoppablerobotninja.com.

Kolla in den,
den är riktigt kul och intressant.

Scenen är hans i 25-30 minuter.

Han har flugit hit från Boston.
Ethan Marcotte.

-Välkommen, Ethan.
-Tack för att jag fick komma.

Hejsan, Stockholm.
Tack för att jag fick komma.

Det är kul att vara här. Jag heter
Ethan Marcotte, @beep på Twitter.

Jag vill börja med en berättelse om
New York. Men inte dagens New York.

Vi måste färdas tillbaka
till de sista åren på 1700-talet.

På den tiden var New York
bara en bråkdel av dagens storlek.

Staden hade runt 125 000 invånare.

Det låter inte så mycket,
men större delen av de invånarna-

-var samlade på öns södra spets.

Norrut låg stora, privata egendomar
som bredde ut sig kilometervis.

Så det här är inte en berättelse som
ett New York, utan om två New York.

Två städer med olika
levnadsförhållanden, sida vid sida-

-men inte i samförstånd.

Samtidigt vällde immigranterna in,
så situationen på den södra spetsen-

-började bli otrygg och ohållbar.

Det blev allt svårare att hålla ordning
och ha nån sorts brandsäkerhet.

Det var till och med svårt
att hindra spridandet av sjukdomar.

1807 inrättade stadens styre
Kommissionen för gator och vägar-

-för att utforma
en ny gatuplan för Manhattan.

John Randel, Jr. utsågs
till förste ingenjör och lantmätare.

Tillsammans med begåvade kollegor
studerade han marken.

De vandrade igenom den, ibland två
gånger om dagen, och efter fyra år-

-skapade de nåt häpnadsväckande.

De tog fram tre exemplar av en karta.
Varje exemplar var tre meter långt-

-och fastställde New York Citys
berömda rutnät av gator.

Även om vi bortser från det estetiska-

-så är omfattningen av det
man hade skapat helt magnifikt.

De lyckades normalisera ett myller av
oregelbundna tomter och krokiga gator.

De skapade ett system med tolv gator
som löpte i nord-sydlig riktning.

Dessa korsades av 155 gator
som löpte i öst-västlig riktning.

De skapade
ett slags kartesiskt koordinatsystem-

-som gjordes åtkomligt
för både gamla och nya invånare.

Jag ska prata om webbdesign snart.

Jag gillar den här historien,
för det är nåt magiskt med kartor.

De visar vad vi har att spela med.
Vi kan utforska främmande territorier-

-försöka förstå landmärkenas inbördes
relationer, och anteckna vad vi vet.

Vi skapar en karta eller en jordglob-

-som vi kan ta med oss till detta
tidigare så främmande territorium-

-för att få det
att kännas lite mer hemtamt.

Och detta kan liknas vid arbetet
vi gör på webben nästan dagligen.

Varje projekt vi bygger är som
en liten karta som vi har skapat-

-för ett problem vi inte begrep.

Vi försökte utröna
dess problemområden-

-och vi försökte hitta en lösning
som skulle underlätta för våra företag-

-och för vår publik.

Om vi samlar dessa kartor så bygger
vi tillsammans en karta över webben-

-som den ser ut i dag.

Problemet är
att vår bild av webben är så trångsynt-

-eftersom vi har haft
en sån begränsad uppfattning om den.

Vi har bara designat
för en handfull webbläsare.

Sen kom den mobila revolutionen
och krossade alla förutsättningar.

Den krossade egentligen ingenting.

Den visade oss att kontrollen
som vi trodde oss ha över webben-

-bara bestod av en hallucination.
Vi ljög för oss själva, helt enkelt.

Enheternas zombiapokalyps
som Karen pratade om är nu här-

-och vi är medvetna om att denna
spridning utgör ett designinitiativ.

Vår publik vill ha tillgång till våra
tjänster var de än är, dygnet runt.

Vi har uppfyllt detta behov både med
enhetsspecifika och mer holistiska-

-enhetsagnostiska upplevelser.

Till exempel responsiv webbdesign. Jag
skrev en artikel för fem år sen-

-om att vi inte skulle se webbens
flexibilitet som en begränsning.

Vi kan skapa
underbara, flexibla upplevelser-

-som kan användas på enheter
som inte ens har uppfunnits ännu.

Lite filosofiskt. Men det
har varit några konstiga år-

-för jag hade inte väntat mig det
mottagande som responsiv design fick.

Flera branscher, med designers,
märken och företag jag beundrade-

-plockade bitar från den artikeln
och skapade digitala upplevelser-

-som var helt häpnadsväckande.

De experimenterar med flexibiliteten
som utgör webbens hjärta.

De gör sina webbplatser och tjänster
tillgängliga-

-för fler skärmar, fler enheter
och fler människor än nånsin förr.

Om alla projekt är som en karta... Jag
ska gå igenom en responsiv layout-

-och prata om hur de kan användas
för att skapa mer flexibla upplevelser.

Jag skrev att en responsiv layout
har tre grundläggande komponenter.

Det börjar med ett flytande gridsystem-

-med media
som fungerar i en flexibel layout.

Och mediafrågor som får flexibiliteten
att kanaliseras på intressanta sätt.

Här ser vi ett bra exempel
på två av dessa nyckelingredienser.

Det börjar med layouten. Här finns
det inte en pixel så långt ögat kan nå.

Allt är proportionerligt. I takt med
att webbläsaren ändrar form-

-förändras
beståndsdelarnas pixelvärden.

Men den ursprungliga designens
proportioner förblir desamma.

Fast det här är fult. Det var därför
flexibla layouter fick dåligt rykte.

Ingen vill se det här
på en jättestor eller jätteliten skärm.

Men flexibiliteten kan bli vår grund -
sen kan vi göra designen responsiv.

All responsiv design jag har jobbat med
på sistone har börjat med nåt sånt här.

En mobilvänlig layout i en enda spalt.

Det är en väldigt enkel layout-

-men sen infogar vi mediafrågor för att
styra hur designen ska anpassa sig-

-så att den passar både oss och
våra användare och deras enheter.

Nu kan vi börja göra webbläsarfönstret
lite bredare och leta efter möjligheter-

-att förbättra designen, och infoga en
brytpunkt där en spalt blir två spalter.

Men vi kan även flytta innehåll
från sidfoten-

-till den övre delen,
när vi får mer plats där.

Sen upprepas processen. Vi gör sidan
bredare och letar efter möjligheter-

-att förbättra sidan ännu mer, med
tre spalter och en bredd på 44 em.

Min kollega Stephen Hay
kallar det för en utbyggbar skulptur.

I takt med att man utökar webbläsar-
fönstret görs layouten mer komplex.

Responsiv design handlar inte om
att förminska en desktop-design.

Men det blir en fin bieffekt.
Responsiv design handlar om att inse-

-att det inte finns en enda,
sann layout för ens gränssnitt.

Och med dagens front end-teknik
kan vi bygga-

-i stort sett oändliga
visuella system och gridlayouter.

Vi kan skapa fängslande upplevelser
för både små och stora skärmar.

Man begränsas bara av hur mycket tid
och pengar företaget vill lägga på det.

Och i takt med att ni börjar jobba med
responsiv design kommer ni att märka-

-att idén med en sida,
som vi lånade från grafisk design-

-och som vi tidigare designade för,
känns allt mer omodern-

-när man ägnar sig
åt responsiv design.

Man kan tänka på gränssnitten
som ett nätverk av små layoutsystem.

De enskilda komponenterna
i dessa byggen-

-har sina egna regler
för layout, design och anpassning.

De förändras i sin egen takt,
oberoende från andra komponenter.

Men sen kan vi löst binda samman
alla dessa layoutsystem-

-för att bygga mer invecklade layouter.

Ett exempel. Vi ska skapa ett rubrikfält
eller ett verktygsfält i en applikation.

Med en bredare skärm
ser det ganska normalt ut-

-med text i mitten och några knappar
till vänster och höger.

Men det är bara en version av
layoutsystemet, för under en viss nivå-

-förenklas layouten
till en lista med fem eller sex länkar.

Det ser enklare ut, men alla funktioner
är fortfarande desamma.

Det handlar inte om att ge
mobilanvändare mindre information-

-utan om att ge alla användare samma
funktionalitet, oavsett skärmstorlek.

Att planera utformningen
av små layoutsystem är ganska enkelt.

Oavsett om man bygger en innehålls-
styrd sida eller nåt mer interaktivt.

Man börjar inte med layout, utan med
innehållsprioritering och relationer.

Gällande verktygsfältet tittade vi
på alla funktioner vi skulle ha med-

-och försökte gruppera dem för
att skapa menyer i form av "hinkar"-

-som man kan flytta runt
i takt med att sidan blir större.

Från denna blygsamma början
kan vi infoga en brytpunkt-

-så att vi över en viss skärmbredd
flyttar de där menyhinkarna-

-till vänster eller höger sida
i layouten.

Men vi kan även hitta möjligheter att
utnyttja utrymmet på ett bättre sätt.

Vi lägga delar av undermenyn
i mitten av verktygsfältet-

-så att de blir mer lättillgängliga
när vi har lite mer utrymme.

En fråga som ofta dyker upp är
var man får dessa brytpunkter från.

Hur avgör man
när layoutsystemen måste anpassas?

Det avgörs inte
av en viss skärmstorlek-

-utan av behovet hos innehållet
inuti layoutsystemen.

Säg att det här viktiga verktygsfältet
under brytpunktsbredden-

-börjar bli lite hoptryckt, och kanske
skyms av knapparna på sidorna.

När man designar responsiva layouter
ska man se dessa brytpunkter-

-som ett sätt att skydda innehållet.

Det ska passa alla skärmstorlekar,
och alltid vara ett nöje att ta del av-

-oavsett skärmstorlek.

Det var det här Mark Boulton menade
med "design med innehållet utåt".

Microsofts responsiva webbsida
är ett underbart exempel på det.

Gridsystemet
är inte anpassat för en viss skärm.

Om man håller på lite med sidan
så kommer man att märka-

-att all information alltid tycks ha
den perfekta bredden och höjden.

Menyn "Discover" blir plötsligt
horisontell i stället för vertikal-

-och tillbaka igen. Deras brytpunkter
är anpassade för små layoutsystem-

-för att se till att de är läsliga
oavsett storleken på enheten.

Jag älskar den här innehållbaserade
synen på responsiv design-

-eftersom utvecklingen av nya typer
av enheter går allt snabbare.

Vi bygger vidare på webbkartan-

-med både enhetsspecifika
och responsiva webbplatser-

-och vi utvecklar våra visuella språk
för att göra det. Oerhört spännande.

Men vårt arbete har bara börjat-

-för som det ser ut nu
är webbkartan långt ifrån färdig.

Många företag är lyriska över hur
lönsam responsiv design kan vara-

-och vissa har gärna berättat om vad
de har lärt sig av den här utvecklingen.

Ett par exempel är The Boston Globe,
som jag jobbade med för ett par år sen-

-samt oneillclothing.com
och skinnyties.com.

Enligt The Boston Globe hade deras
nya, responsiva webbplats lett till-

-en kraftig ökning av digitala
prenumerationer på ett halvår.

O'Neills Iphone-handel fördubblades-

-och Android-handeln fyrdubblades
med den nya, responsiva designen.

Det handlar inte bara om ökad mobil
handel. Skinny Ties och många andra-

-såg att bland annat intäkter
och omvandlingsfrekvenser ökade-

-med alla enheter som kom i kontakt
med den nya, responsiva upplevelsen.

Jag älskar
att visa såna här imponerande siffror-

-för investerare vill gärna se tillväxt.
Så det här är toppen.

Men det har inte bara
varit glada tongångar.

Det viskas att responsiv design inte
är så bra som det verkar.

Vi kanske har lite trubbel i paradiset
som vi måste prata om.

Ett exempel. Det här moto.oakley.com,
en häpnadsväckande webbplats.

Både estetiskt och tekniskt sett. De har
översatt komplicerade animationer-

-till en helt flexibel
och flytande kanvas.

Men den här sidan är på 6 MB.

Många av er har säkert mp3-filer
som är mindre än den här webbsidan.

En gammal version av teehanlax.com,
en designstudio från Kanada.

Jag älskade den här webbplatsen,
för den var full av små detaljer-

-som berättade både om deras arbete
och om själva designprocessen.

Men webbplatsens sidor
varierade i storlek från 3 till 21 MB.

Sidor som moto.oakley och teehanlax
har fått folk att säga sånt här:

"Inse fakta - responsiv design gör det
svårt att skriva en snabb webbplats."

Snacka om en utmaning. Kom igen,
plocka upp en högaffel och en fackla.

Guy Podjarny har gjort viktig forskning
om de tekniska utmaningarna-

-som möter designers
som bryr sig om prestanda-

-men som även är intresserade
av responsiv design.

Men det finns en uppfattning om
att responsiv design är inkompatibel-

-med snabba upplevelser
som går snabbt att ladda hem.

Så är inte fallet. Problemet
sträcker sig bortom responsiv design.

Det här är internet.org, en fast design.

Det är ett initiativ
som startades av Facebook-

-för att ge folk i utvecklingsländer
tillgång till Facebook. Nej, internet.

Den här sidan...
Jag kommer att vara här hela veckan.

Den här sidan är 4,3 MB stor.

Det här är Apples Mac Pro-sida.
Jag blir alldeles till mig av den.

En snudd på filmliknande upplevelse.
När man scrollar nedåt-

-dyker bilder upp och visas
så småningom i genomskärning.

Det är associationsrika,
visuellt häpnadsväckande grejer.

Den här fasta webbsidan
är 33.4 MB stor på en vanlig bildskärm.

Jag skulle kunna titta på internet.org
och Apples Mac Pro-sida och säga:

"Inse fakta - en fast design gör det
svårt att bygga en snabb webbplats."

Nu försöker jag bara mucka gräl.

Men storleken på vårt arbete är
ett övergripande problem för webben.

För knappt sex år sen var den
genomsittliga webbsidan 320 kB.

I år, just nu, är den genomsnittliga
webbsidan över 2 MB stor.

Datorbranschen har upplevt
en fantastisk prestandaökning.

Våra enheter, processorer och minnen
blir kraftfullare för varje år.

Men bandbredden hänger inte med,
och den trenden fortsätter.

Jag har läst verk av Alfred Korzybski-

-en filosof verksam i mitten av 1900-
talet som fascinerades av semantik.

Av språken, orden och bilderna vi
använder oss av för att kommunicera.

Han fascinerades
av tanken på en retorisk klyfta-

-det vill säga avståndet mellan ett
föremål och en återgivning av det.

Ett exempel. Låt oss säga att jag ber er
berätta om kaffet ni drack i morse.

Ni kan berätta hur det smakade, hur
det luktade, hur det värmde er hand.

Men hur länge ni än pratade om det
skulle ni utelämna nån detalj.

Den upplevelsen var bara er - språket
kan inte överbrygga den klyftan.

Det fick Korzybski att mynta frasen:
"Kartan är inte territoriet".

Det finns en fundamental klyfta
mellan en faktisk sak - territoriet-

-och återgivningen av den - kartan.

Okej, det verkar ju ganska uppenbart.

När man tittar på en karta så ser man
inte territoriet, utan en abstraktion.

Tre dimensioner har plattats till
rätt våldsamt och blivit två.

Men ibland har vi svårt att se det här,
vilket även Korzybski påpekade.

Han var orolig för att vi fokuserar
så mycket på kartan framför oss-

-att vi glömmer att titta upp för att se
komplexiteten och svårigheten-

-hos själva territoriet.

Jag tror att vi gör det på webben,
i viss mån.

Många av diskussionerna
kring responsiv design-

-sker på västerländska villkor.

Om vi tittar upp från kartan så kanske
vi märker att webbens territorium-

-är mer komplicerat
än vi tidigare hade trott.

Ett exempel. När man hör ordet "mobil"
så kanske man tänker på olika saker-

-men det man oftast hör
är att de är personliga enheter.

Den är alltid påslagen och uppkopplad.
Den är mitt fönster mot internet.

Men om vi blickar längre bort
så kompliceras bilden.

Som i Bangladesh -
en fascinerande del av världen.

En avreglering av mobilmarknaden har
lett till en enorm ökning av mobildata.

2011 ökade antalet mobila internet-
abonnenter med över 900 procent.

Mobilanvändandet är oerhört populärt
även bland landets fattigaste.

Men enheterna är ofta inte personliga.

Det finns massor med stånd där fattiga
människor kan hyra mobiltid och -data.

Och vi kan vända blicken västerut,
mot Afrika-

-som är ett exempel på ett ekosystem
som nästan uteslutande är mobilt.

En tiondel av ytan har mobilt internet-

-och marknaden är mättad på ett sätt
som vi bara kan drömma om här.

Fler människor har tillgång till
en mobiltelefon än till elektricitet.

De har faktiskt sprungit om oss
när det gäller vår syn på webben-

-på grund av vårt stationära datorbruk.
Mobila betalsystem i delar av Afrika-

-är mycket mer avancerade
än hos oss.

Ofta är enheterna inte personliga.
De kan delas av en hel by-

-eller så hyrs de ut
till mindre bemedlade.

Smartphones har blivit populärare-

-men ännu populärare är långsamma,
mindre kraftfulla enheter-

-som ger dessa människor
en ny bild av den mobila webben.

Eller webben i stort.

Jag vet vad ni tänker.
Många ser skeptiska ut.

Ni kanske tänker att ni inte designar
för den här typen av användare.

Det stämmer i dag, men inom en
snar framtid är de nog era användare.

Det har forskats mycket om hur den
mobila webben håller på att förflyttas-

-så att merparten av datakraven inte
kommer från industriländerna-

-utan från
mindre utvecklade ekonomier.

Men låt oss för stunden
lägga bort all geografi och demografi.

Ericssons forskning visar
att av alla mobila datauppkopplingar-

-så sker 60 procent av dem
på nät långsammare än 3G.

Så jag undrar om vi inte håller på
att bygga en digital klyfta.

Vi designar i dag,
denna månad, detta år-

-några av de vackraste verken
som nånsin synts på webben.

Men är de redo
för webben som håller på att bildas-

-som har fler användare än nånsin,
men som är mycket långsammare-

-och mycket mindre pålitligt?

Det är lätt att avskriva en del av det
här som unikt för utvecklingsvärlden.

Det löser sig väl med tiden? Ut-
vecklingen hinner väl ikapp även dem?

Eller är det ett nytt normaltillstånd
för webben som växer fram?

En webb för dåliga uppkopplingar
och lågpresterande enheter-

-men som används av folk som ändå
vill ha tillgång till våra tjänster.

Hur förändrar det sättet
vi tänker på digital design i dag?

Och är vi redo för dem?

Jag tror att Randels karta
har en sak till att lära oss.

Det finns många likheter
mellan 1700-talets New York-

-och webben som den ser ut i dag.

Man hade en stor befolkning som levde
under undermåliga förhållanden.

Jämfört med de stora,
privata egendomarna norrut.

Randels karta försökte skapa
en balans mellan dessa områden.

Kartor är ofta resultatet
av ett försök att dokumentera nånting.

Man utforskar ett territorium
och nedtecknar sina upptäckter.

Men Randels karta försökte skapa en
vision för en stad som inte existerade.

En vision av ett New York som skulle
göra livet bättre för sina invånare.

Så här vackert skrev de
innan de påbörjade sitt arbete.

Kartan skulle skapa regelbundenhet
och ordning till invånarnas förmån-

-och framför allt
främja stadens välmående.

Offentliga dokument brukar inte
vara poetiska, men det där är vackert.

Bör vi ställa oss den frågan när vi
designar våra produkter och tjänster?

Hur skapar vi design
som främjar webbens välmående?

Det är en läskig fråga, men vi kan inte
bara anpassa våra layouter-

-för att passa olika skärmar.
Vi måste börja designa ansvarsfullt-

-och hållbart för en framtida tillväxt-

-av den långsammare webben
som nu håller på att växa fram.

För mig består hållbarhet av två
koncept: att minska och återanvända.

Det första man tänker på
är att minska storleken på våra sidor.

Prestanda betraktas ofta
som ett tekniskt problem-

-när det egentligen är allas ansvar.

Ett bra sätt att tänka på bandbredd
är att använda en prestandabudget.

Begreppet myntades av Clearleft.

Det hjälper ert team att definiera
bra design ur ett prestandaperspektiv.

Det kan vara sidstorlek eller nåt som
har med användarupplevelsen att göra.

Det viktigaste är att alla kreativa
beslut betraktas genom det filtret.

Om nånting man gör orsakar
att man överskrider den gränsen-

-så måste man diskutera vad
som måste optimeras eller tas bort-

-för att man
ska kunna klara prestandabudgeten.

Men en sak vi bör ta en titt på igen
är det här med progressiv förbättring.

Att ge tillgång till innehållet
oberoende av kringupplevelsen.

Det har varit kännetecknande för alla
moderna, responsiva webbplatser.

BBC:s nygamla, responsiva
nyhetsprojekt är ett bra exempel.

På en hyfsat modern enhet
får man tillgång till alla små finesser-

-som flikar och utvidgade menyer,
men det är bara en av versionerna.

För om man har en omodern enhet
eller en dålig uppkoppling-

-så får man fortfarande en responsiv
upplevelse, men den är annorlunda.

Flikarna är bara länkar
till sidorna där innehållet finns.

På mindre kapabla enheter förs man av
de utvidgade menyerna till sidfoten.

Vi har alltså två olika ansikten
av en responsiva design-

-och en snabb grundupplevelse som
fungerar på alla världens webbläsare.

En något förbättrad version
av samma innehåll-

-visas på de enheter
som kan utnyttja den.

Det som avgör om en enhet får
finversionen är om den håller måttet.

"Håller er webbläsare måttet, sir?"

Det fina är att de bara laddar
tillräckligt med kod på sina sidor-

-för att se om webbläsaren klarar av
mer kod. De ställer en enkel fråga.

"Är du modern nog för att kunna
utnyttja en förbättrad version?"

Om så är fallet laddas fler filer in.
I övriga fall-

-har man fortfarande kvar en otroligt
snabb och otroligt tillgänglig sida.

Progressiv förbättring
låter era organisationer-

-hantera komplexiteten på marknaden
för webbläsare och enheter.

BBC måste inte
hålla reda på enskilda enheter.

Deras responsiva design existerar
i ett av två olika upplevelseskikt.

Man släpper behovet av att behöva
kontrollera upplevelsen i detalj-

-och det låter
som en strålande utveckling.

Progressiv förbättring är inte den enda
lösningen på kommande utmaningar.

Men det är ett värdefullt verktyg
i verktygslådan.

Jag tänkte nyligen på om en sak
jag läste om Charles och Ray Eames-

-som var två av USA:s
främsta formgivare på 1900-talet.

De var kända för många saker.
Bland annat formgav de-

-billiga kvalitetsmöbler
för amerikanska konsumenter.

De fyllde de amerikanska
vardagsrummen med design.

Deras verk präglades av funktionalism.
Det var vackert, men även användbart.

De kunde sänka kostnaderna
genom att använda billigare material-

-som förlöjligades av andra formgivare.
Material som aluminium-

-plast och fiberglas.

Men de dolde inte dessa billiga material
under ett fint tyg.

Det ramade in designen.
Det var designen.

Ray Eames sa: "Det som fungerar
är bättre än det som ser bra ut."

"Utseendet kan förändras,
men funkar det så funkar det."

Det gillar jag, för i det här stadiet av
den responsiva designens utveckling-

-behöver vi kanske
en ny definition av "vackert".

En som inte bara definieras
av estetik eller interaktion-

-utan även
av vårt arbetes tillgänglighet.

En definition som även omfamnar
webbens bräcklighet.

Vi kan kombinera
lätta material och responsiv design-

-för att skapa fängslande
och tillgängliga, flexibla upplevelser.

De här webbplatserna
utgör inte normen ännu-

-men de visar att vi kan designa sidor
med en grund i hög tillgänglighet-

-men ändå lägga ut en kurs
mot den där större upplevelsen-

-som vi som yrkesgrupp brinner för.

För vi är byggare, designers,
utvecklare, produktchefer-

-men vi är även kartografer.
Vi är kartritare.

Vi kan skissera ett territorium,
men även omforma det-

-med de projekt och tjänster
vi producerar dagligen.

Det är ett stort ansvar,
men även en gåva.

När vi nu närmar oss slutet av dagen,
och snart ska lämna denna vackra sal-

-kanske vi kan påbörja
en ny karta tillsammans.

En som är skapad för tillgänglighet,
och som kan brukas av alla.

Oavsett var i territoriet de bor.
Då tackar jag så mycket för er tid.

Översättning: Mattias R. Andersson
www.btistudios.com