Dags att bygga responsivt
•
0 likes•721 views
Metamatrix frukostseminarium "Dags att bygga responsivt" den 6 november 2014
Recommended
Recommended
More Related Content
Similar to Dags att bygga responsivt
Similar to Dags att bygga responsivt (20)
More from Metamatrix
More from Metamatrix (20)
Dags att bygga responsivt
- 1. 2014-11-06 Dags att bygga responsivt
- 2. 2 AGENDA » Vad är responsiv design? » Användarnas mobila beteende » Trender » Navigering och interaktionsdesign » Responsivt = innehållsprojekt » Bygga nytt eller utveckla på befintlig lösning
- 3. 3 AGENDA » Vad är responsiv design? » Användarnas mobila beteende » Trender » Navigering och interaktionsdesign » Responsivt = innehållsprojekt » Bygga nytt eller utveckla på befintlig lösning
- 4. VAD ÄR RESPONSIV DESIGN?
- 5. VAD ÄR RESPONSIV DESIGN?
- 6. FRAMTIDEN?
- 7. 7
- 8. VAD ÄR RESPONSIV DESIGN? » Storlekar anges med relativa mått » Flexibla bilder » Media queries
- 9. VAD ÄR RESPONSIV DESIGN?
- 10. VAD ÄR RESPONSIV DESIGN?
- 11. AGENDA » Vad är responsiv design? » Användarnas mobila beteende » Trender » Navigering och interaktionsdesign » Responsivt = innehållsprojekt » Bygga nytt eller utveckla på befintlig lösning
- 12. 12 ANVÄNDARNAS MOBILA BETEENDE Andel i olika åldersgrupper som dagligen använder sig av mobilt internet. Källa: Svenskarna och internet 2013, Stiftelsen för internetinfrastruktur 2013 2012 2011 2010
- 13. 13 FLER RESPONSIVA E-TJÄNSTER
- 14. 14 FLER RESPONSIVA E-TJÄNSTER
- 15. Andel av de med smarta mobiler (12+ år) som någon gång eller dagligen utför olika aktiviteter på internet i sin mobil Källa: Svenskarna och internet 2013, Stiftelsen för internetinfrastruktur 15
- 16. 16 E-POST & NYHETSBREV Bli inte raderad i mobilen! » Avsändare ~ 25 tecken » Ämnesrad ~ 35 tecken » Texten ~ 85 tecken
- 17. 17 MULTI-KANAL-BETEENDE Kom ihåg! » SEO blir allt viktigare » Ge användarna en bra sökupplevelse. » Tänk mobilt & multi-kanal vid kampanjer.
- 18. 18 AGENDA » Vad är responsiv design? » Användarnas mobila beteende » Trender » Navigering och interaktionsdesign » Responsivt = innehållsprojekt » Bygga nytt eller utveckla på befintlig lösning
- 19. 19 PLATT DESIGN
- 20. 20 PLATT DESIGN
- 21. 21 PLATT DESIGN
- 22. 22 PLATT DESIGN » Avskalad design » Innehållet i fokus » Lättare att anpassa till olika skärmar
- 23. 23 ONE PAGE DESIGN
- 24. 24 ONE PAGE DESIGN » Tydligt mål med sidan » Historieberättande » Passar bra för kampanjsiter » Mindre navigation » Färre sidomladdningar
- 26. 26 AGENDA » Vad är responsiv design? » Användarnas mobila beteende » Trender » Navigering och interaktionsdesign » Responsivt = innehållsprojekt » Bygga nytt eller utveckla på befintlig lösning
- 27. 27 OFF CANVAS
- 28. 28 OFF CANVAS
- 29. 29 NAVIGATION & INTERAKTIONSDESIGN
- 30. 30 FET-FINGER-FELET » Mycket fungerar bra i en dator men inte på mobilen. » Testa design på olika plattformar.
- 31. 31 AGENDA » Vad är responsiv design? » Användarnas mobila beteende » Trender » Navigering och interaktionsdesign » Responsivt projekt = innehållsprojekt » Bygga nytt eller utveckla på befintlig lösning
- 32. 32 RESPONSIVT PROJEKT = INNEHÅLLSPROJEKT r bra i en dator men inte på mobilen. » TUetgståa frdåens iagnnv päån doalirknaa psl abtetfhoormv.ar. » Prioritera - behåll bra innehåll. » Enkelt & annorlunda. » Responsivt innehåll
- 33. 33 Ooooops innehållet är borta … » Ha samma innehåll på desktop som mobilsajt.
- 34. 34
- 35. 35 UNDERLÄTTA FÖR ANVÄNDARNA
- 37. 37 TABELLER
- 38. 38 AGENDA » Vad är responsiv design? » Användarnas mobila beteende » Trender » Navigering och interaktionsdesign » Responsivt = innehållsprojekt » Bygga nytt eller utveckla på befintlig lösning
- 39. 39 DET BEROR PÅ …
- 40. 40 BYGGA NYTT, ELLER … » Oftast snabbast att bygga om HTML och CSS från grunden. » Ramverk som “bootstrap” eller “foundation” » Går att göra om responsivt oberoende av CMS
- 41. 41 Calle Törnquist calle.tornquist@metamatrix.se Pia Flodquist @PiaFlodquist pia.flodquist@metamatrix.se
Editor's Notes
- Pia Användarcentrerade arbetssätt. Användarna har kunskap om det system som de vill använda i framtiden. Frågor vi får från våra kunder kring ämnet. Ni får gärna fråga oss under seminariets gång. Skickar ut slides
- Calle: Jag tänkte börja med att prata om vad responsiv design egentligen är, hur det uppstod och hur det fungerar
- Iphone Mobilwebbar Problem med andra skärmstorlekar Ny site för varje ny typ av apparat som har en webbläsare? I samma veva som den första iphone kom var det väldigt många som började göra mobilwebbar. Det var då vanligt att anpassa dem till just en iphone eftersom att det var den smartphone som de flesta använde. Men det började bli problem när fler började använda andra smartphones och surfplattor med andra skärmstorlekar. Ska man då göra en ny anpassad webbplats för varje typ av ny apparat som besökarna använder? Det blir ohållbart eftersom att variationen är för stor.
- Det blir ohållbart eftersom att variationen är för stor.
- Calle: Ethan Marcotte Responsiv design = följsam design Svaret blev istället responsiv, eller följsam design. Begreppet “responsive design” myntades av webdesignern Ethan Marcotte 2010 som menade att en mer flexibel design var nödvändig, en design som anpassade sig till användarnas förutsättningar. Inte bara för att webbsidor ska fungera på de telefoner som finns idag utan även de som kommer i framtiden. På svenska blev det “responsiv” design vilket ju egentligen är en svengelsk översättning, men den har fastnat ändå. Om man ska vara korrekt heter det följsam design på svenska.
- Storlekar anges med relativa mått Flexibla bilder ”Media queries” Det här är Ethans egen definition av vad responsiv design innebär. Storlekar som anges med relativa mått: För att en design ska vara följsam går det inte att förlita sig på fasta mått på element på sidan, istället använder man sig av relativa mått som procent. T.ex. kan man säga att en meny ska ta upp 50% av webbläsarens bredd. Flexibla bilder: Bilder måste också ha en flexibel storlek för att kunna fungera i olika skärmstorlekar. Media queries: Är en teknik för att ta reda på mer om hur hur apparaten som besökaren använder ser ut, är det en mobil eller en surfplatta t.ex.? På det sättet kan man sätta upp olika regler beroende på vilket svar man får.
- The Boston globe, en av de första Idag är det standard The Boston Globe var en av de första stora webbsidorna som gick över till en responsiv design, det var för två år sen. De ville vara “framtidens tidning” på nätet, Idag är responsiv design standarden när det gäller att göra mobilanpassningar.
- Pengar i sjön? PRV – Bra information Om responsiv webb är så bra, har man då slängt pengar i sjön och man har gjort en mobilanpassad site som inte är responsiv? Jag tror inte det – en av våra kunder, patent och registreringsverket gjorde en mobilanpassad site för ett par år sedan. Nu när vi gör En responsiv ny site åt dem är de mer redo eftersom att de har kunnat testa vilket innehåll som fungerar i mobilen och inte.
- Pia: Då .. Användarnas mobila beteende. Vad har det fått för konsekvenser av att vi har internet i fickan.
- Hur många procent i olika åldersgrupper som dagligen använder mobilt internet. 30 juni 2013 fanns 5,4 miljoner abonnemang till smarta mobiler. Ökningen har varit enorm. Vad har det lett till …
- Fler myndigheter även gör sina e-tjänster responsiva. Hur många deklarerade med telefonen förra året? Tidigare var det vanligt att man slussades över till den vanliga sajten när man kom till en e-tjänst. Det är fortfarande ganska vanligt men allt fler responsiva e-tjänster dyker upp. Det gör också att användare blir besvikna när de är på en resposiv sajt och kommer till en icke responsiv e-tjänst.
- Det är fortfarande ganska vanligt att man slussas över till en icke responsiv e-tjänst. Och när det händer tappar, i alla fall jag kraft. Man riskerar att göra användare besvikna när de är på en resposiv sajt och kommer till en icke responsiv e-tjänst. Och användarskulden växer.
- Bilden visar vad många gör i sin mobil dagligen eller någon gång. Här ser ni en del av vad många användare gör i sin mobil. 88 % hanterar någon gång e-post 87 % webbnyheter 75 % söker fakta. Vad gör ni i mobilen? Att så många hanterar e-post tycker jag är intressant … för då blir innehållet i våra nyhetsbrev driver ju trafik till våra webbar och om nyhetsbreven inte är anpassade för det riskerar vi att tappa besökare.
- 88 % hanterar e-post i mobilen. Inte konstigt. Mobilen har vi alltid med oss. Små tillfällena för att läsa e-post i mobilen (möten, mellan möten, på tunnelbanan) Beteendet: Många ögnar igenom mailkorgen i mobilen och raderar det ointressanta och agerar sedan vid desktop. Så vi måste undvika att bli raderade i telefonen. Vi har inte så mycket plats för det. Avsändare ~25 tecken Ämnesrad ~35 tecken Snippet ~85 tecken
- Lägg in ny skärmdump Användarna gör flera saker samtidigt. Jag tror ni känner igen er: Tittar på tv och surfar samtidigt. Googlar efter fakta när man läser tidningen. Söker i mobilen när man sitter vid datorn. Smarta telefoner och surfplattor inte har ersatt de traditionella datorerna, utan fungerar som komplement. Nästan alla med mobil utrustning kan också koppla upp sig via stationär eller bärbar dator. Vi har alltid mobilen med oss. Många börjar ett flöde i mobilen för att senare avsluta det på en dator. Och ofta börjar det med en sökning i mobilen. Kopplat till det här är det några saker som är viktiga att komma ihåg. Ge dina användare en bra sökupplevelse i mobilen. SEO viktigt. Tänk mobilt vid kampanjer i andra kanaler. Koppling till SEO: Using responsive web design has multiple advantages, including: It keeps your desktop and mobile content on a single URL, which is easier for your users to interact with, share, and link to and for Google’s algorithms to assign the indexing properties to your content. Google can discover your content more efficiently as we wouldn't need to crawl a page with the different Googlebot user agents to retrieve and index all the content.
- Single page design kanske fungerar för vissa siter men långt i från alla.
- Fråga: Hur många är det som känner igen det här begreppet platt design? Motreaktion mot Efterlikna den fysiska världen Anteckningsblock, bokhylla, knappar Användarna känner igen sig Platt design kan ses somen motreaktion mot hur webbsidor såg ut för ett par år sedan, där bl.a. apple var stor trendsättare. Apples designfilosofi handlade mycket om att saker skulle efterlikna den fysiska världen, man använde mycket skuggor, texturer som borstat stål och trä och rundade hörn. Ett anteckningsblock på en iphone har gula sidor och ränder för rader precis som ett riktigt, om man köper böcker på iTunes så samlas de på en bokhylla som ser ut att vara gjord av trä, knappar har skuggor under sig vilket gör att de ger illusionen av att sticka ut från skärmen. Tanken med det är att få användaren att känna igen sig från den fysiska världen och förhoppningsvis bli mer bekväm med att använda produkten. Man ska kunna se på en knapp att den går att trycka på.
- Länge var det trenden som gällde Problem: grafik kräver bilder, laddar långsamt Ny typ av grafisk design för responsiv Platt design är motsatsen till apples design Och länge var det den trenden som gällde, webdesigners fyllde sina sidor med texturer, gradienter och skuggor. Det finns dock en del problem med detta, allt det här kräver att man gör grafik till webbsidan i form av bilder, de tar lång tid att ladda och gör designen låst vid den upplösning som bilderna är gjorda för. När man istället började gå mot responsiv design så behövde man också en grafisk design som var anpassat för olika skärmstorlekar, som behövde ladda snabbt på en långsam mobiluppkoppling och som såg bra ut på de nya högupplösta skärmarna som moderna smartphones är utrustade med. Platt design är alltså raka motsatsen till hur apples produkter såg ut, rena färger, inga skuggor eller texturer. Mycket av inspirationen har hämtats från Apples största konkurrent Microsoft och deras Modern UI som används på windowstelefoner, xbox och windows 8.
- Nu använder sig även apple av platt design, så här ser iBooks ut idag.
- Bra: Man låter innehållet hamnar i fokus Det som jag tycker är bra med platt design är att man låter innehållet hamna i fokus. När den grafiska designen är mer avskalad lämnar man större plats åt bild och text att vara framträdande. Det kan man märka på sidor som använder sig av platt design är att man ofta låter fotografier få stort fokus och att texter lyfts fram med stor textstorlek och genomtänkt typografi. Lättare att anpassa till olika skärmar (storlek och upplösning)
- One page design En sida Ersättningskollen En annan trend som har kommit i samband med responsiv design är ONE PAGE eller SINGLE PAGE design. Det går helt utan på att webbplatsen bara har en sida där all information samlas. Ett exempel är den här sidan ”Ersättningskollen” där du kan se hur mycket du skulle få i ersättning om du blir sjuk.
- Byt mot ersättningskollen Det som kännetecknar en bra one page-design tycker jag är att är att sidan har ett tydligt mål för besökaren, en sak som man vill att besökaren ska tänka, känna eller göra. Det kan t.ex. vara att få spridning för en kampanj, något som TCO lyckades bra med med den här sidan ”Like a swede” där man berättar mer om den svenska partsmodellen. One page design passar också för responsiv design eftersom att en sida gör att navigationen kan ta mindre plats och mer skärmyta kan ägnas åt innehållet. En sida gör också att man slipper sidomladdningar.
- Kanske inte en trend ännu Konstmuseét the Whitney Alltid formen av ett W Det här är något som jag inte vet om man kan kalla trend ännu, men ett spännande exempel på hur man kan dra det responsiva designtänket till sin spets. När konstmuséet the Whitney i New York skulle göra en ny grafisk profil och en responsiv webbplats ville man också ha en logotyp som verkligen var skapad för en anpassningsbar design. Därför skapade deras reklambyrå den här logotypen, det responsiva w:et. Det har alltid formen av ett W men kan tryckas ihop och töjas och ändra form utifrån storlek och placering.
- Calle: Kopplat till responsiv design finns det också flera utmaningar när det gäller navigation och interaktionsdesign
- På en informationstung webbplats behövs sätt att navigera i innehållet Hierariska menyer, brödsmulor, sidkartor, sök Svårt att få plats med på en webbplats med begränsat utrymme Innehåll utanför skärmen eller ”off canvas” På en informationstung webbplats med hundratals eller tusentals sidor behöver användaren något sätt att navigera i innehållet. Vanliga varianter på navigation är hierariska menyer, brödsmulor, sidkartor och sök. I en responsiv design kan de vara svåra att överföra till en mobil, eftersom att man har mycket mindre skärmutrymme att röra sig med. Något som har börjat bli en standard är därför att dölja navigationen bakom en knapp. Det kallas ofta för “facebook-meny” eftersom att Facebook tidigt hade en sån variant i sin mobilapp. Inte lanserad än.
- Innehåll utanför skärmen eller ”off canvas” Förtydliga att den sveper in.
- Något som har börjat bli vanligare på senare tid är att dölja menyer även på en stor skärm Sveriges radio, bloggplattformen medium Fråga publiken: Tror ni att det finns några fördelar? Fördelar: gör designen renare, minskar kogntiv belastning, ökat fokus på innehållet Nackdelar: Minskar synligheten, är ännu inte standard Något som också har blivit vanligare på senare tid är att att dölja navigationen även när sidan visas på en stor skärm, Sveriges Radios responsiva site är ett exempel på det. Ett annat är bloggplattformen medium som också döljer navigationen bakom en knapp på sidan. Vad är då fördelen med det? Att dölja navigationen på sidan när den inte behövs kan minska den kognitiva belastningen på användaren. För exempelvis medium är ju det viktigaste att läsaren tar sig igenom texten i blogginlägget, och förhoppningsvis känner sig inspirerad och klickar sig vidare till nästa artikel. Att då ta bort allt som kan störa på sidan och låta texten, innehållet, stå i fokus är en bra idé. Vilka nackdelar kan det finnas då? Dels minskar det ju synligheten på menyn eftersom att den är dold, dels så är det ännu inte en standard som används på många stora siter och det i sig kan göra besökarna förvirrade, även om jag tror att den perioden skulle vara snabbt övergående om många gick över till den här modellen.
- Ett vanligt problem att man sätter länkar för tätt ihop på mobilen “Fat finger error” A-Ö listan funkar bra med mus på en dator men går inte med tummen på en smartphone Viktigt att testa designen När vi ändå är inne på Sveriges radio kan jag ta ett annat exempel från deras nya site som jag inte tycker funkar lika bra och som är ett exempel på ett vanligt problem - att man i en design som ska funka på mobilen lägger klickbara länkar för tätt ihop med varandra. På den här bilden ser ni en lista över program på SR, A-Ö. Listan blir väldigt lång så för att snabbt kunna hoppa till en viss bokstav finns en lista över alla bokstäver till höger med alla bokstäver klickbara. Det funkar bra med mus på en dator, inga problem, men om man ska klicka med en stor fet tumme på en liten skärm så går det inte att undvika att träffa fyra-fem bokstäver samtidigt. Det visar på hur viktigt det är att testa sin design för att se att den fungerar i det verkliga livet!
- Pia: Jag tänkte prata lite om vilka konsekvenser det här får för innehållet. Många av er som sitter här har sajter med mycket innehåll. Mycket innehåll som ingen tar del av. Jag tror att det som står i vägen för innehållet idag väldigt ofta är annat innehåll. Så för att ge användarna en bättre upplevelse så måste vi lära oss att ta bort det innehåll som inte ger någon nytta. Ta tillfället i akt och se över ert innehåll när ni ska bygga en responsiv sajt.
- Ett responsivt projekt blir ofta ett innehållsprojekt. Tänk på: Fokus på användarnas behov. Hittar jag inte det jag letar efter på en gång i mobilen finns risk att man överger sajten. Ha samma innehåll på mobilen som på desktop om det inte är motiverat av någon anledning .. Prioritera och behåll det bästa innehållet. Det finns analysmetoder som kan ge er svar på vad som ska vara kvar. Av det följer att ju enklare du kan servera innehållet, desto bättre. Och man kan tvingas att tänka annorlunda för att lyfta innehåll, till exempel genom infografik. Små funktioner i stället för text-jämförelser. Några konkreta exempel
- Det här är di.se. Dåligt exempel, tycker jag. En vän till mig följer börsens upp- och nedgång. Han brukar svära över Di.se mobilsajt. Två saker. Dels hittade han inte jämförelsen över börsens uppgång eller fall – jämfört med hela året … Och han hittade inte ingången Trader. Jag förklarade att det är vanligt att företag och organisationer bygger mobila webbplatser och det då händer att de strippar innehållet för att det är svårt att presentera i mobilen, svårt att få in allt innehåll (egentligen svårt att prioritera). Rätt som det var avbröt han mig och sa, ja ja, det kan jag väl förstå, men det är ju dumt att i så fall ta bort det allra bästa innehållet. Min rekommendation är att inte ha olika innehåll för mobila användare som för de som sitter vid en dator. Men det kan få konsekvenserna att vi måste prioritera i vårt innehåll och ta bort det som inte ger nytta.
- Byta ut mot nackademin
- Pia I ett projekt med Skatteverket gick vi från 10 000 sidor skriven text till ca 2500 webbsidor. Nödvändigt att skala bort det som var ointressat för att kunna presentera ett så stort material och trycka in det i mobilen. Vi löste användarnas behov dels genom att ta bort väldigt mycket innehåll, men gav också varje sida en egen innehållsförteckning så att användarna snabbt ska kunna ta sig till det innehåll som lockar de mest.
- Calle Grunden är samma innehåll Fungerar inte alltid bra TOuch screen, lång tid att ladda, prestandakrävande Byta innehåll Karta Grunden i responsiv design är ju att man delar samma innehåll i alla skärmstorlekar. Som princip fungerar det bra. Men ibland finns det innehåll som inte fungerar prestandamässigt i en mobil, inte fungear bra på touch screen eller tar lång tid att ladda på en mobil uppkoppling. Vid såna tillfällen finns det möjlighet att dynamiskt byta ut innehållet beroende på skärmstorlek. Exempelvis kan man på en stor skärm ladda in en karta med google maps som det går att zooma in och ut i osv I en mobil fungear kartan inte alls lika bra eftersom den är prestandakrävande och inte fungerar så bra med touch screen, då kan man istället byta ut kartan mot en bild.
- Calle Tabeller svåra att mobilanpassa Bäst att byta ut helt Men kan göra om layout Det fungerar så kolumnerna i tabellen lägger sig som rader och att tabellrubrikerna upprepas för varje rad i tabellen istället för att ligga överst. En typ av innehåll som är svårt att anpassa till mobilen är tabeller eftersom att de är breda och inte går att radbryta hur som helst. Det bästa är att se om det finns något annat sätta att presentera innehållet på. Kanske det går att göra om innehållet som text eller bygga en funktion som fungerar bättre i mobilen? Men det finns också sätt att ta tabellen och göra om layouten i mobilen, t.ex. det här: Det fungerar så kolumnerna i tabellen lägger sig som rader och att tabellrubrikerna upprepas för varje rad i tabellen istället för att ligga överst. Det fungerar ganska bra tycker jag, nackdelen är att en bred tabell istället blir väldigt lång i mobilen. Men det är lätt att scrolla upp och ned i mobilen för att se all information.
- Calle: En fråga vi får ofta är om man måste bygga om en webbplats helt för göra den responsiv…
- Det kan ofta vara komplicerat att anpassa en gammal design. Om det från början inte var någon som tänkte att den skulle användas i en mobil. Ofta kan det spara mycket tid att istället göra om designen från början eftersom att man då också kan använda något av de responsiva ramverk som finns. Ett ramverk är en uppsättning kod som man kan använda sig av och bygga vidare på. Två stycken som många använder sig av idag är Bootstrap och Foundation. De kostar ingenting att använda och sparar mycket tid i framtida utveckling, men de kräver att man bygger nytt. Åtminstone på framsidan, alltså HTML och CSS. Den bakomliggande logiken på webbplatsen behöver oftast inte genomgå några större förändringar om man inte också samtidigt vill lägga till ny funktioner. En annan fråga vi ofta får är om man också måste uppdatera version av CMS för att bygga en responsiv webbplats. Det behöver man inte. Responsiv design görs i HTML och CSS, det kan göras oberoende av vilket CMS man har. Det som kan skilja sig mellan CMS är hur bra stödet för redaktörer att jobba med innehållet i en responsiv webbplats är. Om man t.ex. använder sig av den senaste versionen av EpiServer så går det att direkt i redaktörsläget se hur en sida ser ut på en dator, en surfplatta och en mobiltelefon.
- Slutkläm: Detr här var det som vi tänkte presentera. Vi vet att ni som sitter här har en del frågor så passa på nu när.