Dags att bygga responsivt
•
0 likes•840 views
Frukostseminarium Dags att byggga responsivt 7 maj 2015
Recommended
More Related Content
Viewers also liked
Viewers also liked (20)
Similar to Dags att bygga responsivt
Similar to Dags att bygga responsivt (11)
More from Metamatrix
More from Metamatrix (20)
Dags att bygga responsivt
- 1. 2015-05-07 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
- 14. 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 E-POST & NYHETSBREV Bli inte raderad i mobilen! » Avsändare ~ 25 tecken » Ämnesrad ~ 35 tecken » Texten ~ 85 tecken
- 16. 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
- 17. 18 Google <3 mobilt » Ingen flash eller liknande » Läsbar text utan zoom » Sidan är anpassad i bredd » Tillräckligt utrymme mellan länkar Kriterier för en mobilanpassad webb
- 18. 19 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. 20 PLATT DESIGN » Avskalad design » Lättare att anpassa till olika skärmar » Innehållet i fokus
- 20. 21 Material design » Googles grafiska form » Bygger vidare på platt design, men med mer djup » Förstärka vad som kan användas och hur
- 21. 22 ONE PAGE DESIGN » Tydligt mål med sidan » Historieberättande » Passar bra för kampanjsiter
- 23. 24 AGENDA » Vad är responsiv design? » Användarnas mobila beteende » Trender » Navigering och interaktionsdesign » Responsivt = innehållsprojekt » Bygga nytt eller utveckla på befintlig lösning
- 24. 25 OFF CANVAS
- 25. 26 OFF CANVAS
- 28. 29 FET-FINGER-FELET » Mycket fungerar bra i en dator men inte på mobilen. » Testa design på olika plattformar.
- 29. 30 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
- 30. 31 RESPONSIVT PROJEKT = INNEHÅLLSPROJEKT r bra i en dator men inte på mobilen. » Testa design på olika plattformar.» Fokus - användarnas behov. » Prioritera - behåll bra innehåll. » Enkelt & tänk annorlunda. » Responsivt innehåll
- 31. 32 Ooooops innehållet är borta … » Ha samma innehåll på desktop som mobilsajt.
- 34. 35 TABELLER
- 35. 36 AGENDA » Vad är responsiv design? » Användarnas mobila beteende » Trender » Navigering och interaktionsdesign » Responsivt = innehållsprojekt » Bygga nytt eller utveckla på befintlig lösning
- 36. 37 DET BEROR PÅ …
- 37. 38 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
- 38. 39 Pia Flodquist @PiaFlodquist pia.flodquist@metamatrix.se 0700-90 86 03 Calle Törnquist calle.tornquist@metamatrix.se 073-640 43 30 Metamatrix @metamatrix facebook.com/metamatrix.ab
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
- Calle 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.
- Calle Det blir ohållbart eftersom att variationen är för stor.
- Calle
- 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.
- Calle 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.
- Calle 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.
- Calle Pengar i sjön? PRV – Bra information Alternativet till en responsiv webb är att ha en separat mobilwebb. Det betyder att innehållet och funktionaliteten på webbplatsen skiljer sig helt från den mobilanpassade versionen till den som inte är mobilanpassad. En sån webbplats ser ni till vänster, patent och registreringsverkets första mobilanpassade webb som vi byggde för några år sedan. 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. Konsekvenser av att vi har internet i fickan.
- Pia 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. Och användningen av mobil datatrafik bara ökar och ökar. Vad har det lett till …
- Pia Fler gör sina e-tjänster responsiva. Hur många deklarerade med telefonen HÄROMDAGEN? 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. Och när det händer tappar, i alla fall jag kraft. Och användarskulden växer. Naturvårdsverkets ansökningaportal. De har för övrigt en alldeles utmärkt resonsiv sajt.
- Pia Bilden visar vad många gör i sin mobil dagligen eller någon gång. 88 % hanterar någon gång e-post 87 % webbnyheter 75 % söker fakta. Vad gör ni i mobilen? Hanterar e-post - intressant … 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.
- Pia 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. Undvik att bli raderade i telefonen. Vi har inte så mycket plats för det. Avsändare ~25 tecken Ämnesrad ~35 tecken Snippet ~85 tecken
- Pia 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 eller att man får en länk. Kopplat till det här är det några saker som är viktiga att komma ihåg. 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.
- Pia Google har tagit fram ett mobilvänlighetstest för att avgöra om en site är mobilanpassad. Kriterna är: Siten undviker beroende av mjukvaror som inte är vanliga på mobila enheter, som flash Text är läsbar utan att zooma Sidan anpassar sig i bredd så att användaren inte behöver scrolla i sidled eller zooma Länkar är placerade med tillräckligt stora mellanrum så att det går att trycka på rätt länk med ett finger
- Single page design kanske fungerar för vissa siter men långt i från alla.
- Calle: Platt design. Man använder sig av enkla, rena färger utan skuggor eller annat som försöker efterlikna den fysiska världen. Den här typen av design har blivit väldigt vanlig i webbdesign och jag tror att till viss del hänger ihop med att vi gör fler responsiva webbar. Den här typen av grafik är lätt att anpassa till olika skärmstorlekar, man minskar behovet av att använda sig av bilder för att bygga upp de grafiska elementen på sidan vilket snabbar på laddningstiden. 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.
- Calle: Material design: Material design bygger vidare på det avsklade i platt design men lägger till djup. Förtydliga interaktiviteten på webbplatsen med den grafiska formen. Visa vad som är klickbart,
- Calle: 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. 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.
- Calle: 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. Här har vi vår kund stockholms tekniska institut som exempel, de har precis lanserat sin nya responsiva site. Eftersom att mobila besökare är så viktiga för dem så valde vi att ha en plattare struktur på sidan med längre sidor som är lätta att scrolla igenom på mobilen. Men vi kombinerar det med en traditionell meny, ett slags blandning mellan en hierarisk struktur och en one page design.
- Calle: Kopplat till responsiv design finns det också flera utmaningar när det gäller navigation och interaktionsdesign
- Calle 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.
- Calle: Innehåll utanför skärmen eller ”off canvas” Förtydliga att den sveper in.
- Pia: Olika navigationslösningar – FTF och sti, metalliska material. Vad man väljer beror på hur mycket innehåll man har, vilken typ av sajt det är. Berätta kort om alla-
- Calle 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.
- Calle 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.
- Pia: Ett responsivt projekt blir ofta ett innehållsprojekt. Och när ni rensar i ert innehåll så … 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. 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. Analysmetoder. Ju enklare du kan servera innehållet, desto bättre. Tvingas 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
- Pia 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. Dels hittade han inte jämförelsen över börsens uppgång eller fall – jämfört med hela året … 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.
- 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 ointressant för att kunna presentera ett så stort material och trycka in det i mobilen. Användarnas behov - ta bort väldigt mycket innehåll. Innehållsförteckning så att användarna snabbt ska kunna ta sig till det innehåll som lockar de mest.
- Pia 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.
- Pia 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. Annat sätta att presentera innehållet på. Innehåll 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…
- Calle: 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.
- Cirkeln är sluten och ni har fått en bra start på er innehållsstrategi. Jag tror att ni kan komma en bra bit på vägen nu med er innehållsstrategi. Jag är innehållsnörd så vill någon av er bolla något så hör gärna av er. Tack för mig!