Titta

UR Samtiden - From Business to Buttons 2015

UR Samtiden - From Business to Buttons 2015

Om UR Samtiden - From Business to Buttons 2015

Telefonen som vi bär med oss överallt är nyckeln till en värld av digitala möjligheter, menar ux-designern Avi Itzkovitch som är en av många talare på detta seminarium om design, webb och framtid. Ux står för user experience, användbarhet, och handlar om att utveckla produkter och tjänster som gör vardagen enklare och roligare för människor. Inspelat den 21 april 2015 på Chinateatern, Stockholm. Arrangör: Inuse.

Till första programmet

UR Samtiden - From Business to Buttons 2015 : Att rita om webbkartanDela
  1. Talare nummer tio kallas
    för den responsiva webbens fader.

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

  3. -med det fantastiska namnet
    unstoppablerobotninja.com.

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

  5. Scenen är hans i 25-30 minuter.

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

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

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

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

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

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

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

  13. Staden hade runt 125 000 invånare.

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

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

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

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

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

  19. -men inte i samförstånd.

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

  21. -började bli otrygg och ohållbar.

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

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

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

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

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

  27. Tillsammans med begåvade kollegor
    studerade han marken.

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

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

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

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

  32. Även om vi bortser från det estetiska-

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

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

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

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

  37. De skapade
    ett slags kartesiskt koordinatsystem-

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

  39. Jag ska prata om webbdesign snart.

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

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

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

  43. Vi skapar en karta eller en jordglob-

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

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

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

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

  48. -för ett problem vi inte begrep.

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

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

  51. -och för vår publik.

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

  53. -som den ser ut i dag.

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

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

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

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

  58. Den krossade egentligen ingenting.

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

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

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

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

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

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

  65. -enhetsagnostiska upplevelser.

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

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

  68. Vi kan skapa
    underbara, flexibla upplevelser-

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

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

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

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

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

  74. -som var helt häpnadsväckande.

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

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

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

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

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

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

  81. Det börjar med ett flytande gridsystem-

  82. -med media
    som fungerar i en flexibel layout.

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

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

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

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

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

  88. Men den ursprungliga designens
    proportioner förblir desamma.

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

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

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

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

  93. En mobilvänlig layout i en enda spalt.

  94. Det är en väldigt enkel layout-

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

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

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

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

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

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

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

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

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

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

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

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

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

  108. Och med dagens front end-teknik
    kan vi bygga-

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

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

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

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

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

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

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

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

  117. De enskilda komponenterna
    i dessa byggen-

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

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

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

  121. -för att bygga mer invecklade layouter.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  145. -utan av behovet hos innehållet
    inuti layoutsystemen.

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

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

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

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

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

  151. -oavsett skärmstorlek.

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

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

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

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

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

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

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

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

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

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

  162. Vi bygger vidare på webbkartan-

  163. -med både enhetsspecifika
    och responsiva webbplatser-

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

  165. Men vårt arbete har bara börjat-

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

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

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

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

  170. -samt oneillclothing.com
    och skinnyties.com.

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

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

  173. O'Neills Iphone-handel fördubblades-

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

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

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

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

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

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

  180. Men det har inte bara
    varit glada tongångar.

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

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

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

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

  185. -till en helt flexibel
    och flytande kanvas.

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

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

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

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

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

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

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

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

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

  195. Guy Podjarny har gjort viktig forskning
    om de tekniska utmaningarna-

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

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

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

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

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

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

  202. Det är ett initiativ
    som startades av Facebook-

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  217. Datorbranschen har upplevt
    en fantastisk prestandaökning.

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

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

  220. Jag har läst verk av Alfred Korzybski-

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

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

  223. Han fascinerades
    av tanken på en retorisk klyfta-

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

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

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

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

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

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

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

  231. -och återgivningen av den - kartan.

  232. Okej, det verkar ju ganska uppenbart.

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

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

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

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

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

  238. -hos själva territoriet.

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

  240. Många av diskussionerna
    kring responsiv design-

  241. -sker på västerländska villkor.

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

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

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

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

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

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

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

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

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

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

  252. Men enheterna är ofta inte personliga.

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

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

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

  256. En tiondel av ytan har mobilt internet-

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

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

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

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

  261. -är mycket mer avancerade
    än hos oss.

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

  263. -eller så hyrs de ut
    till mindre bemedlade.

  264. Smartphones har blivit populärare-

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

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

  267. Eller webben i stort.

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

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

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

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

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

  273. -utan från
    mindre utvecklade ekonomier.

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

  275. Ericssons forskning visar
    att av alla mobila datauppkopplingar-

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

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

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

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

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

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

  282. -och mycket mindre pålitligt?

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

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

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

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

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

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

  289. Och är vi redo för dem?

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

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

  292. -och webben som den ser ut i dag.

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

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

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

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

  297. Man utforskar ett territorium
    och nedtecknar sina upptäckter.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  312. Prestanda betraktas ofta
    som ett tekniskt problem-

  313. -när det egentligen är allas ansvar.

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

  315. Begreppet myntades av Clearleft.

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

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

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

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

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

  321. -för att man
    ska kunna klara prestandabudgeten.

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

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

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

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

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

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

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

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

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

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

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

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

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

  335. -visas på de enheter
    som kan utnyttja den.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  354. -billiga kvalitetsmöbler
    för amerikanska konsumenter.

  355. De fyllde de amerikanska
    vardagsrummen med design.

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

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

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

  359. -plast och fiberglas.

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

  361. Det ramade in designen.
    Det var designen.

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

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

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

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

  366. En som inte bara definieras
    av estetik eller interaktion-

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

  368. En definition som även omfamnar
    webbens bräcklighet.

  369. Vi kan kombinera
    lätta material och responsiv design-

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

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

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

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

  374. -som vi som yrkesgrupp brinner för.

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

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

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

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

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

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

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

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

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

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

Hjälp

Stäng

Skapa klipp

Klippets starttid

Ange tiden som sekunder, mm:ss eller hh:mm:ss.

Klippets sluttid

Ange tiden som sekunder, mm:ss eller hh:mm:ss.Sluttiden behöver vara efter starttiden.

Bädda in ditt klipp:

Bädda in programmet

Du som arbetar som lärare får bädda in program från UR om programmet ska användas för utbildning. Godkänn användarvillkoren för att fortsätta din inbäddning.

tillbaka

Bädda in programmet

tillbaka

Att rita om webbkartan

Produktionsår:
Längd:
Tillgängligt till:

Håller vi på att bygga en digital avgrund mellan västvärlden och utvecklingsländerna? Ethan Marcotte, författare och visionär inom digital design, analyserar hur man bygger sajter som fungerar för såväl telefon som dator. Han menar att vi är så förtjusta i ny teknik att vi kanske glömmer bort den delen av världen som lever med skakiga uppkopplingar och gårdagens mobiltelefoner. Inspelat den 21 april 2015 på Chinateatern, Stockholm. Arrangör: Inuse.

Ämnen:
Teknik > Kommunikations- och informationsteknik
Ämnesord:
Industri, Kommunikationer, Teknik, Teknik och samhälle, U-länder
Utbildningsnivå:
Högskola

Alla program i UR Samtiden - From business to buttons 2019

2015
Spelbarhet:
UR Skola
Längd:
TittaUR Samtiden - From Business to Buttons 2015

Digitala tankar i en analog värld

En av vår tids stora utmaningar är hur vi ska kommunicera i den nära framtiden. Innehållsstrategen Karen McGrane berättar här om hur hon ser på informationsutbyte och den digitala revolution vi befinner oss i. Inspelat den 21 april 2015 på Chinateatern, Stockholm. Arrangör: Inuse.

Produktionsår:
2015
Utbildningsnivå:
Högskola
Beskrivning
Spelbarhet:
UR Skola
Längd:
TittaUR Samtiden - From Business to Buttons 2015

Ännu smartare telefoner

Med funktionerna i smarta telefoner kan snart en helt ny värld öppna sig, där telefonen vet om vi är på jobbet, hemma eller kör bil och kan anpassa sig efter det. Det säger ux-designern Avi Itzkovitch, som här beskriver en framtid där telefonen blir nyckeln till en mängd smarta lösningar. Men har möjligheterna ett moraliskt pris? Inspelat den 21 april 2015 på Chinateatern, Stockholm. Arrangör: Inuse.

Produktionsår:
2015
Utbildningsnivå:
Högskola
Beskrivning
Spelbarhet:
UR Skola
Längd:
TittaUR Samtiden - From Business to Buttons 2015

Välmående i en digital värld

Kan vi vara lyckliga i en teknologisk värld? Den frågan är central för Pamela Pavliscak, rådgivare inom digital design. I en värld där vi blir alltmer uppkopplade berättar Pamela Pavliscak om sina upptäcker när det gäller lycka i vår nya digitala värld och hur design kan skapa meningsfulla kontexter. Inspelat den 21 april 2015 på Chinateatern, Stockholm. Arrangör: Inuse.

Produktionsår:
2015
Utbildningsnivå:
Högskola
Beskrivning
Spelbarhet:
UR Skola
Längd:
TittaUR Samtiden - From Business to Buttons 2015

Hur du klantar dig i jobbet

Viljan att vara omtyckt är kanske människans främsta fiende. Det hävdar Mike Monteiro, grundare av byrån Mule Design i San Francisco. Mike Monteiro är författare och en designrebell som här trycker på det viktiga i att vara modig och att våga ha en tuff dialog med dem som betalar lönen. Inspelat den 21 april 2015 på Chinateatern, Stockholm. Arrangör: Inuse.

Produktionsår:
2015
Utbildningsnivå:
Högskola
Beskrivning
Spelbarhet:
UR Skola
Längd:
TittaUR Samtiden - From Business to Buttons 2015

Staten behöver inte vara krånglig

Leisa Reichelt, ux-chef i den brittiska regeringen, berättar om den digitala kommunikationen. En av hennes käpphästar är att den brittiska regeringens hemsidor ska designas så att de kan förstås av alla. Inspelat den 21 april 2015 på Chinateatern, Stockholm. Arrangör: Inuse.

Produktionsår:
2015
Utbildningsnivå:
Högskola
Beskrivning
Spelbarhet:
UR Skola
Längd:
TittaUR Samtiden - From Business to Buttons 2015

En hypotes kan förändra mycket

Att använda sig av hypoteser är ett bra sätt att arbeta mer kreativt. Det säger Cindy Alvarez, ux-chef på det sociala nätverket Yammer. Här berättar hon om sitt arbete med designen på Yammer och hur de praktiskt har arbetat med sökfunktioner. Inspelat den 21 april 2015 på Chinateatern, Stockholm. Arrangör: Inuse.

Produktionsår:
2015
Utbildningsnivå:
Högskola
Beskrivning
Spelbarhet:
UR Skola
Längd:
TittaUR Samtiden - From Business to Buttons 2015

Ett argument för skönhet

Det är lätt att glömma bort de mänskliga aspekterna när man arbetar med design. Det säger Iran Narges, användardesigner på byrån Adaptive Path i San Francisco. Här påtalar hon vikten av skönhet, att vi använder oss av alla våra sinnen när vi upplever och hanterar allt från kaffekoppar till appar. Inspelat den 21 april 2015 på Chinateatern, Stockholm. Arrangör: Inuse.

Produktionsår:
2015
Utbildningsnivå:
Högskola
Beskrivning
Spelbarhet:
UR Skola
Längd:
TittaUR Samtiden - From Business to Buttons 2015

Ett papper för alla idéer

Vasaskeppet är ett skräckexempel för alla designers. Det säger Greg Nudelman som skrivit flera böcker om design och arbetar åt några av världens största företag. Han menar att det enklaste och billigaste sättet att prova idéer är att använda post-it-lappar, som gör det billigt att misslyckas. Inspelat den 21 april 2015 på Chinateatern, Stockholm. Arrangör: Inuse.

Produktionsår:
2015
Utbildningsnivå:
Högskola
Beskrivning
Spelbarhet:
UR Skola
Längd:
TittaUR Samtiden - From Business to Buttons 2015

Design är en resa

Förändring är ofta förknippat med smärta. Men vi kan bli bättre på att hantera förändring. Det säger Kim Goodwin, som arbetar som rådgivare inom digital design. Här talar hon om hur företag ska bli bättre på design för sina kunder. Inspelat den 21 april 2015 på Chinateatern, Stockholm. Arrangör: Inuse.

Produktionsår:
2015
Utbildningsnivå:
Högskola
Beskrivning
Spelbarhet:
UR Skola
Längd:
TittaUR Samtiden - From Business to Buttons 2015

Att rita om webbkartan

Håller vi på att bygga en digital avgrund mellan västvärlden och utvecklingsländerna? Ethan Marcotte, författare och visionär inom digital design, menar att vi är så förtjusta i ny teknik att vi kanske glömmer bort den delen av världen som lever med skakiga uppkopplingar och gårdagens mobiltelefoner. Inspelat den 21 april 2015 på Chinateatern, Stockholm. Arrangör: Inuse.

Produktionsår:
2015
Utbildningsnivå:
Högskola
Beskrivning
Spelbarhet:
UR Access
Längd:
TittaUR Samtiden - From Business to Buttons 2015

Enkelhet som främsta mål

Mitt mål har alltid varit att göra enkel design, säger Steve Wozniak, en av grundarna till Apple. Med sin innovativa syn på datorer, musikspelare och telefoner har företaget förändrat hur vi använder ny teknik. Här pratar han med moderatorn Jan Wifstrand. Inspelat den 21 april 2015 på Chinateatern, Stockholm. Arrangör: Inuse.

Produktionsår:
2015
Utbildningsnivå:
Högskola
Beskrivning
Visa fler
2016
Spelbarhet:
UR Skola
Längd:
TittaUR Samtiden - From Business to Buttons 2016

Robotkärlek

Jag är redo för min förarlösa bil nu, är du? Det frågar beteendevetaren Susan Weinschenk när hon föreläser om robotar och vårt förhållande till smarta telefoner, appar och maskiner. Hon menar att det är hög tid att förbereda sig, för i framtiden kommer vi ha relationer till robotar och lita på att de fattar bättre beslut än människor. Inspelat den 15 april 2016 på Münchenbryggeriet, Stockholm. Arrangör: Inuse.

Produktionsår:
2016
Utbildningsnivå:
Högskola
Beskrivning
Spelbarhet:
UR Skola
Längd:
TittaUR Samtiden - From Business to Buttons 2016

App-trött blir skärmlös

Skärmarna har tagit över våra liv. Den genomsnittlige användaren kollar sin mobiltelefon 200 gånger om dagen. Vi är beroende, säger Googles designstrateg Golden Krishna. Han menar att vi nu nått en "app fatigue", en apptrötthet, och måste gå mot en skärmlös framtid. Inspelat den 15 april 2016 på Münchenbryggeriet, Stockholm. Arrangör: Inuse.

Produktionsår:
2016
Utbildningsnivå:
Högskola
Beskrivning
Spelbarhet:
UR Skola
Längd:
TittaUR Samtiden - From Business to Buttons 2016

Förstå kaoset

Vi upplever alla en informationsöverbelastning i dagens samhälle, säger informationsarkitekten Abby Covert. Hon älskar att reda ut komplexa informationsmönster åt andra. Hör hennes bästa tips på hur du genom enkla principer kan få ordning och reda på det allra mesta. Inspelat den 15 april 2016 på Münchenbryggeriet, Stockholm. Arrangör: Inuse.

Produktionsår:
2016
Utbildningsnivå:
Högskola
Beskrivning
Spelbarhet:
UR Skola
Längd:
TittaUR Samtiden - From Business to Buttons 2016

Leda fram kreativitet

Misstag ska inte straffas eller hyllas, det ska bara förväntas, säger föreläsaren Jeff Veen om ledarskap. Här förklarar han hur man leder en kreativ grupp människor till framgångar och lär oss vad modeordet "equanimity" innebär: att behålla mental stabilitet under press. Inspelat den 15 april 2016 på Münchenbryggeriet, Stockholm. Arrangör: Inuse.

Produktionsår:
2016
Utbildningsnivå:
Högskola
Beskrivning
Spelbarhet:
UR Skola
Längd:
TittaUR Samtiden - From Business to Buttons 2016

Hantera att ha fel

Hur känns det att ha fel? Det frågar sig Simon Bennett, ledarskapsexpert. Han lär ut hur man ska förhålla sig till misstag och makt i grupper. Makten definieras av vilken information som kan anses vara kunskap. Bennett menar att vi måste tillåta oss att vara hela människor med alla känsloregister även som professionella. Inspelat den 15 april 2016 på Münchenbryggeriet, Stockholm. Arrangör: Inuse.

Produktionsår:
2016
Utbildningsnivå:
Högskola
Beskrivning
Spelbarhet:
UR Skola
Längd:
TittaUR Samtiden - From Business to Buttons 2016

Exakt och förutsägbar

Facebooks marknadsdesigner Margaret Gould Stewart berättar hur design fungerar ur ett företagarperspektiv. Här ger hon fyra konkreta råd baserat på storföretagets erfarenheter. Hon presenterar också sina visioner om hur hållbar design kan medverka till att förbättra världen. Inspelat den 15 april 2016 på Münchenbryggeriet, Stockholm. Arrangör: Inuse.

Produktionsår:
2016
Utbildningsnivå:
Högskola
Beskrivning
Spelbarhet:
UR Skola
Längd:
TittaUR Samtiden - From Business to Buttons 2016

Designa för äldre

Vi måste inkludera de äldre i vårt designande för framtiden. Webbkommunikationen är inte längre ett val det är ett måste. Det innebär att vi också måste skapa ett gränssnitt som inkludera alla människor, äldre som funktionsnedsatta. Det säger författaren och designern Patricia Moore. Här förklarar hon hur funktionell design ger makt och kontroll över vardagen. Inspelat den 15 april 2016 på Münchenbryggeriet, Stockholm. Arrangör: Inuse.

Produktionsår:
2016
Utbildningsnivå:
Högskola
Beskrivning
Visa fler

Mer högskola & teknik

Spelbarhet:
UR Skola
Längd
Titta UR Samtiden - Robotdagen 2015

Bortom robotfronten

Var befinner sig utvecklingen på robotfronten idag och var kommer den att vara imorgon? Vad är spekulationer och vad är faktisk vetenskap? Danica Kragic Jensfelt, professor i datalogi vid KTH och ledamot i Sveriges unga akademi, berättar om hur det har sett ut och i vilken riktning utvecklingen går framåt. Inspelat den 9 oktober 2015 på Clarion Sign Hotell i Stockholm. Arrangörer: Institutet för framtidsstudier, Dagens Arbete och Forskning och framsteg.

Spelbarhet:
UR Skola
Längd
Titta UR Samtiden - Unga vuxna-dagarna 2016

Unga vuxna och unga vuxnas identitetsutveckling

Björn Wrangsjö, docent i barn- och ungdomspsykiatri, konstaterar att psykisk ohälsa är ett folkhälsoproblem. Han har studerat två grupper med stora likheter och skillnader. Unga som tillbringar nästan all tid vid datorn och på nätet och unga som ansluter sig till islamistiska rörelser. Här försöker Björn ge en beskrivning av deras livsläge och vad deras sökande går ut på. Föreläsningen avslutas med en frågestund tillsammans med Folkhälsominister Gabriel Wikström och moderator Maria Edlund. Inspelat den 29 januari 2016 på Norra Latin, Stockholm. Arrangör: Andreas Murray & Maria Edlund, Krica och Sapu.