Skriva för responsiv webb
I dag pratar webbutvecklarna och webbformgivarna mer och mer om responsiv webbdesign. Lite förenklat går det ut på att bygga webbsidor som anpassar sig efter den skärm du använder. Det är ett nytt sätt att tänka eftersom det som tidigare har styrt visningarna hade sin utgångspunkt i vilken typ av apparat som besökaren använde. Men idag är det inte längre intressant om besökaren knackar på dörren med en mobil, dator, surfplatta eller något annat. Det finns nämligen mobiler som har rejält stora skärmar, till exempel Samsungs Galaxy Note II, vars skärm är 5,5 tum. Och inom några veckor förväntas Samsung komma med två nya modeller med ännu större skärmar, Mega med 5,8 respektive 6,3 tum. (Telefoner som är större än 5 tum kallas ibland phablets på engelska, phone-tablets.) Det finns också små surfplattor vars skärmar är 7 tum och stora surfplattor vars skärmar är lika stora som en liten bärbar dators. Det är alltså ganska ointressant vilken sorts apparat besökaren har. Det som ska styra vad som visas för besökaren är istället skärmens storlek. Det är det vi kallar responsiv design.
Liten begreppsutredning
Det engelska namnet för detta fenomen är responsive design. I Sverige har vi ju Datatermgruppen som rekommenderar bra svenska termer för it-relaterade ord. I det här fallet har de rekommenderat den svenska termen följsam design. Men det finns flera problem med den rekommendationen: dels är den svenska benämningen responsiv design redan ganska etablerad, dels ger följsam istället kopplingar till det som kallas fluid design som egentligen inte har med mobilanpassning att göra. Fluid design är istället en teknik som gör att innehållet flyter ut med skärmen. I fluid design anger man inte fast bredd och man gör inte några så kallade mediaförfrågningar i stilmallen. Tekniken fungerar dock inte så bra för mindre skärmar eftersom den bara jobbar med procentuell uppdelning. Det är alltså ganska troligt att vi framöver kommer att behöva två svenska benämningar och för att inte trassla till det mer än nödvändigt tycker vi att det är bättre att hålla sig till responsiv design för att beskriva hur designen är anpassad till skärmstorleken på ett helt annat sätt, exempelvis förstora eller förminska bilder, släcka och tända andra objekt och flytta om beroende på svaret på mediaförfrågningarna.
Det kan vara bra att känna till att det finns flera benämningar där ute, till exempel anpassningsbar eller reaktiv design. Men dessa lämnar vi därhän nu.
Egen app eller responsiv webb?
Den så kallade apphajpen har passerat. För ett par år sedan hoppade många företag över den mobila webbsidan och satsade sina utvecklingspengar på en app i stället. För bara ett drygt år sedan dominerade appen som verktyg för att nå sin målgrupp mobilt. Det fanns en bra tanke, men precis som de misslyckade försöken att lista ut vilka besökare som ville ha vad på så kallade personaliserade eller individanpassade webbplatser för 10 år sedan, så har approducenterna fått inse att besökarna vill ha webb, inte app. Skälet är att de vill inte ha ett bantat innehåll utan tillgång till hela webbplatsens utbud och information.
Det kan alltså finnas skäl till att strunta i att utveckla en app och istället göra en responsiv webbplats. Folk vill till exempel inte göra sig besväret att ladda ner en app för att kolla produktinformation hos en leverantör. Då går de till webbläsaren i mobilen istället. Men de flesta webbplatser är inte anpassade för mindre apparater och vi vet att tålamodet hos mobilsurfarna är ännu sämre än hos datorsurfarna. Kunderna vänder på klacken och går.
Särskild mobilwebb eller responsiv webb?
I dag har över hälften av svenskarna en smartmobil och de allra flesta telefonköpare väljer en smartmobil med operativsystem från Google, Apple eller Microsoft. Eftersom mobilskärmarna börjar bli så stora och lätta att surfa på börjar argumenten för att bygga en alldeles speciell webbplats för mobilbesökarna bli färre. Det har också visat sig vara svårt att göra rätt urval när det gäller vad som ska visas för mobilbesökaren. Vi citerar ett talande exempel från Jim Ramsdens blogg:
Besökaren: Medan jag väntar på tåget tror jag att jag ska ta och titta på den där ringen som jag såg i fönstret på smyckesbutiken Tiffany’s i går kväll.
Webbplatsen: Aha, du surfar från mobil! Du måste vara intresserad av karta och vägbeskrivning till vår närmaste butik.
Mobile first
Om vi nu är överens om att en mobil kan vara hur stor eller liten som helst och att storleksgränsen mellan mobil, surfplatta och dator är ganska flytande skulle vi ändå vilja använda uttrycket mobile first. Mobile first står vanligtvis för ett förhållningssätt i designprocessen där man tänker i steg: Låt det viktigaste visas först och ju större skärm besökaren har desto mer kan vi lägga fram. Här ser du ett exempel från Blogger med fullskärmsversionen och sedan mobilversionen. I mobilversionen visas ett begränsat innehåll.
Det här är Pratbubblors fullskärmsvisning. Det senaste blogginlägget visas i sin helhet och besökarna får dessutom en presentation och ett etikettsmoln på skärmen.
Bloggen Pratbubblor i en mobil. Istället för att visa hela blogginlägg får besökarna korta puffar från flera inlägg. Men varför ska mobilbesökarna gå miste om presentationen och etikettsmolnet om det inte är nödvändigt?
Det är vanligtvis svårt att kontextanpassa innehållet och att tillgodose en heterogen målgrupp genom att välja bort innehåll. Och trenden går därför alltmer mot att bygga webbplatser som anpassar sig till olika format och plattformar i stället för att bygga flera olika webbplatser.
Anpassa texterna för responsiv design
Allt detta ställer lite nya krav på den som producerar innehållet. Det hjälper faktiskt inte att formgivare och interaktionsdesigner anstränger sig för att få alla sidelement att visas snyggt och pedagogiskt om den text som webbredaktören publicerar fortfarande inte anpassat sig varken efter de nya designtankarna eller efter läsarnas nya läsmönster. När du ska skriva webbtexter i dag kan du alltså inte längre utgå ifrån att besökaren sitter vid en 20-tumsskärm vid sitt skrivbord utan för många webbplatser är det till och med troligt att besökaren använder en smartmobil på bussen eller i kön till hamburgerrestaurangen.
För att få de skriftliga budskapen att fungera i den responsiva miljön kan du tillämpa lite av det förhållningssätt som finns i mobile first, men utan att behöva skära bort innehåll. Det är egentligen samma principer som för traditionellt webbskrivande, men med betydligt striktare tillämpning. Vi har delat in dem i tre viktiga rekommendationer.
- Det viktigaste först
- Spärra inte ut i onödan
- Korta ord och mjuka bindestreck
Det viktigaste först
Skriv alltid det viktigaste först. Alltid, alltid, alltid! I synnerhet om du kan utgå ifrån att många av dina besökare har en liten apparat. I värsta fall är bara rubriken och de två första meningarna synliga på deras skärmar. I Klarspråk på nätet skriver vi på sidan 43 om att utesluta inledningar och försöka tillämpa tekniken frontlastning. Frontlastning innebär att du sammanfattar avsnittets huvudtanke i en enda kärnmening. Det gäller i ännu större utsträckning i den responsiva designen. Vi rekommenderar rakt-på-sak utan inledning när det är lätt att identifiera vad som är det viktigaste på en sida. Frontlastning med kärnmening är bättre att använda när det är svårt att identifiera något enskilt som är viktigast. Då får det istället bli det sammanfattade huvudbudskapet som blir viktigast.
Så här skulle du kunna skriva rakt-på-sak:
Före:
Hjälp att byta bank
När livet förändras på grund av exempelvis flytt, bostadsbyte eller förändrad inkomst kan det finnas skäl att byta bank. På Storbanken hjälper vi till med det praktiska, som att avsluta konton och tjänster hos din nuvarande bank. Det är också viktigt att du själv gör en genomgång av dina konton och tjänster.
Efter:
Hjälp att byta bank
Vill du byta bank? På Storbanken hjälper vi till med det praktiska, som att avsluta konton och tjänster hos din nuvarande bank. Gör en genomgång av dina konton och tjänster och kontakta vår kundtjänst.
Frontlastning är lite svårare att illustrera med före- och efterexempel. Men tänk dig till exempel företagets sida Om oss. Den innehåller oftast flera olika innehållsdelar som till exempel verksamhet, organisation, affärsidé, historia, kanske siffror med omsättning, antal anställda etc. Att säga vad som är viktigast för besökarna kan vara omöjligt eftersom vi inte vet varför de kommit till sidan. Då kommer kärnmeningen till användning:
Prodicta är ett ungt förlag som ger ut tryckta böcker och e-böcker, huvudsakligen med språklig anknytning.
Därefter kan man dela in informationen i stycken med tydliga underrubriker så att besökarna lätt kan rulla sidan ner till den information de söker.
Spärra inte ut i onödan
Att dela in en text i stycken är en självklarhet. Läsarna behöver styckeindelningen, både för att förstå hur skribenten har resonerat och för att få naturliga avbräck i läsningen. På våra skrivkurser brukar vi förmana skribenter att inte göra för långa eller för få stycken eftersom läsningen blir mödosam då. Men detta är sällan ett problem i vanliga webbtexter egentligen. De allra flesta webbskribenter delar in sin text i vad de anser vara lagom långa stycken. Så nu när vi talar responsiv design skulle vi istället vilja höja ett varningens finger för alltför korta stycken. När styckena blir för korta slösar du bort mycket utrymme för den som har en liten skärm. Och för den som har en stor skärm känns texten fragmentarisk, spretig och osammanhängande.
Text i fullskärmsvisning. Styckena är bara en rad eller drygt en rad lång och texten känns utspärrad och osammanhängande.
Samma text på en liten skärm. Texten tar upp onödigt mycket plats på sidan. Det hade varit bättre att kunna få in lite mer i blickfånget, i alla fall i längre artiklar. De två första styckena hör dessutom nära samman rent innehållsmässigt.
Här är artikeln är lite mer platseffektiv när det gäller styckeindelningen. Dessutom håller vi ihop information som hör ihop.
Korta ord och mjuka bindestreck
En annan sak som blivit uppenbart sedan vi började läsa artiklar på små apparater är det elände som långa ord ställer till med. Det syns tydligt i exemplen om hållbarhetsredovisning ovan. Ord som redovisning, kommunikationsmål och hållbarhetsfrågor lämnar fula gluggar och stjäl dyrbart utrymme. Det är dock svårt att ge ett generellt råd om att skriva korta ord. En text som handlar om hållbarhetsredovisning måste ju innehålla det ordet, annars blir den troligen obegriplig eller i alla fall onödigt omständlig. Däremot kan man vara lite listig genom att skriva frågor om hållbarhet istället för hållbarhetsfrågor och mål för kommunikationen istället för kommunikationsmål. I en text som handlar om flerbostadshus kan man skriva det långa ordet först i texten men fortsättningsvis tala om hus, kort och gott.
Men många gånger behöver man använda ett exakt begrepp och det går inte alltid att hitta korta synonymer eller att lösa upp en sammansättning. Då kommer tekniken med mjuka bindestreck till användning. De mjuka bindestrecken gör att orden i digital text avstavas där bindestrecket finns om det behövs. Det är helt osynligt om ordet inte behöver avstavas vid en radbrytning, men ersätts av ett synligt bindestreck så snart det behövs.
Här har vi infogat mjuka bindestreck i alla långa ord. De avstavas automatiskt och texten blir platseffektiv.
De mjuka bindestrecken är alltså mycket användbara i responsivt skrivande. Html-koden för det mjuka bindestrecket är ­ eller ­. Lite irriterande är det dock att vissa populära webbaserade bloggverktyg, till exempel Blogger och Wordpress, inte kan ta emot dessa koder. Visserligen har de ett läge för html men där kan man bara göra enklare html-kodning, till exempel <b> och <br />. Men i flera webbaserade verktyg kan man faktiskt använda Windows kortkommando för mjuka bindestreck i designläget, det vill säga ctrl+bindestreck. Prova i alla fall. Och när du kravställer för din nästa stora webbsatsning – se till att det finns möjlighet att göra mjuka bindestreck.
Sammanfattning
I valet mellan att ta fram en app eller en mobilanpassad version av webbplatsen eller att göra en responsiv webbplats som anpassar sig efter storleken på besökarens skärm är det antagligen mest ekonomiskt och och mest effektivt att satsa på responsiv design.
Som redaktör för en responsiv webbplats är det bäst att hålla sig till de gängse rekommendationerna för webbskrivande, men att tillämpa dem ännu mer strikt än tidigare. Framför allt är det tre rekommendationer som du bör hålla stenhårt på:
- Det viktigaste först. Använd frontlastningstekniken med rakt-på-sak alternativt kärnmeningar. Inledningar är i princip överflödiga.
- Gör inte för korta stycken. Då spärrar du ut texten i onödan. Lagom är bäst!
- Använd korta ord om det går, och om det inte går använd mjuka bindestreck.