Skriva för responsiv webb

I dag pratar webb­ut­veck­larna och webb­form­givar­na mer och mer om re­spon­siv webb­de­sign. Lite för­enk­lat går det ut på att bygga webb­sidor som an­passar sig efter den skärm du använder. Det är ett nytt sätt att tänka eftersom det som tidigare har styrt vis­ning­arna hade sin ut­gångs­punkt i vilken typ av apparat som be­sökar­en an­vände. Men idag är det inte längre int­ressant om be­sökar­en knac­kar på dör­ren med en mo­bil, dator, surf­platta eller något annat. Det finns nämligen mo­bil­er som har re­jält stora skärmar, till exempel Sam­sungs Galaxy Note II, vars skärm är 5,5 tum. Och inom några veckor för­väntas Sam­sung komma med två nya mo­del­ler med ännu större skärmar, Mega med 5,8 respektive 6,3 tum. (Tele­foner som är större än 5 tum kallas ibland phablets på eng­elska, phone-tablets.) Det finns också små surf­plattor vars skärmar är 7 tum och stora surf­plattor vars skärmar är lika stora som en liten bär­bar dators. Det är alltså ganska ointres­sant vilken sorts apparat be­sökar­en har. Det som ska styra vad som visas för be­söka­ren är i­stäl­let skär­mens stor­lek. Det är det vi kallar res­pon­siv de­sign.

 

Liten be­grepps­ut­red­ning

Det engel­ska namnet för detta feno­men är responsive design. I Sverige har vi ju Data­term­gruppen som re­kommen­derar bra svenska termer för it-relaterade ord. I det här fallet har de re­kommen­derat den svenska termen följ­sam design. Men det finns flera prob­lem med den re­kommen­da­tion­en: dels är den svenska be­nämnin­gen responsiv design redan ganska etab­lerad, dels ger följ­sam istället kopp­ling­ar till det som kallas fluid design som egentligen inte har med mobil­an­pass­ning att göra. Fluid design är i­stäl­let en tek­nik som gör att inne­håll­et flyter ut med skärmen. I fluid design anger man inte fast bredd och man gör inte några så kallade media­för­fråg­ningar i stil­mallen. Tekniken fungerar dock inte så bra för mindre skärmar efter­som den bara jobbar med pro­cen­tuell upp­del­ning. Det är alltså ganska tro­ligt 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 be­skriva hur de­signen är an­passad till skärm­stor­leken på ett helt annat sätt, exem­pel­vis för­stora eller för­minska bilder, släcka och tända andra objekt och flytta om be­roende på svaret på media­för­fråg­ning­arna.

Det kan vara bra att känna till att det finns flera be­näm­ningar där ute, till exem­pel an­passnings­bar eller reak­tiv design. Men dessa lämnar vi där­hän nu.

 

Egen app eller res­ponsiv webb?

Den så kallade app­haj­pen har passer­at. För ett par år sedan hoppade många före­tag över den mo­bila webb­sidan och sat­sade sina ut­vecklings­pengar på en app i stället. För bara ett drygt år sedan domi­nerade appen som verk­tyg för att nå sin mål­grupp mobilt. Det fanns en bra tanke, men precis som de miss­lyckade för­söken att lista ut vil­ka be­sökare som ville ha vad på så kallade per­sonali­serade eller in­divid­an­passade webb­platser för 10 år sedan, så har approdu­cen­terna fått inse att be­sökar­na vill ha webb, inte app. Skälet är att de vill inte ha ett ban­tat inne­håll utan till­gång till hela webb­plat­sens ut­bud och in­forma­tion.

Det kan alltså finnas skäl till att strunta i att ut­veckla en app och istället göra en res­pon­siv webb­plats. Folk vill till exempel inte göra sig be­sväret att ladda ner en app för att kolla produkt­infor­mation hos en leve­rantör. Då går de till webb­läsaren i mobilen i­stäl­let. Men de flesta webb­platser är inte an­passade för mindre appara­ter och vi vet att tåla­modet hos mobil­sur­farna är ännu sämre än hos dator­sur­farna. Kunderna vänder på klacken och går.

 

Särskild mobilwebb eller responsiv webb?

I dag har över hälf­ten av svens­karna en smart­mo­bil och de allra flesta tele­fon­köpare väl­jer en smart­mobil med ope­ra­tiv­sys­tem från Google, Apple eller Microsoft. Efter­som mo­bil­skär­marna börjar bli så stora och lätta att sur­fa på bör­jar argu­men­ten för att byg­ga en all­deles spe­ciell webb­plats för mo­bil­be­sökarna bli färre. Det har också visat sig vara svårt att göra rätt ur­val när det gäller vad som ska visas för mo­bil­be­sö­karen. Vi citerar ett talande exem­pel från Jim Ramsdens blogg:

Be­sö­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önst­ret på smyckes­butiken Tiffany’s i går kväll.

Webb­plat­sen: Aha, du surfar från mo­bil! Du måste vara intres­serad av karta och väg­be­skriv­ning till vår när­maste butik.

 

Mobile first

Om vi nu är överens om att en mobil kan vara hur stor eller liten som helst och att stor­leks­grän­sen mellan mobil, surf­platta och dator är ganska fly­tande skulle vi ändå vilja an­vända ut­trycket mobile first. Mobile first står van­ligt­vis för ett för­håll­nings­sätt i design­pro­cessen där man tänker i steg: Låt det vik­ti­gaste visas först och ju större skärm be­sökaren har desto mer kan vi lägga fram. Här ser du ett exem­pel från Blogger med full­skärms­ver­sionen och sedan mo­bil­ver­sionen. I mo­bil­ver­sionen visas ett be­gränsat inne­håll.

pratbubblor_skarm

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.

pratbubblor_mobil

Bloggen Pratbubblor i en mobil. Istället för att visa hela blogg­in­lägg får be­sö­karna korta puffar från flera in­lägg. Men var­för ska mo­bil­be­sö­karna gå miste om pre­sen­ta­tionen och eti­ketts­molnet om det inte är nöd­vän­digt?

Det är van­ligt­vis svårt att kon­text­an­passa inne­hållet och att till­godo­se en hetero­gen mål­grupp genom att välja bort inne­håll. Och tren­den går där­för alltmer mot att bygga webb­platser som an­passar sig till olika format och platt­formar i stället för att bygga flera olika webb­platser.

 

Anpassa texterna för res­ponsiv design

Allt detta ställer lite nya krav på den som pro­du­cerar inne­hållet. Det hjälper fak­tiskt inte att form­givare och inter­aktions­designer an­stränger sig för att få alla sid­element att visas snyggt och peda­go­giskt om den text som webb­redak­tören publi­cerar fort­farande inte an­passat sig var­ken efter de nya design­tan­karna eller efter läsar­nas nya läs­mönster. När du ska skriva webb­texter i dag kan du alltså inte längre utgå ifrån att be­sö­karen sitter vid en 20-tums­skärm vid sitt skriv­bord utan för många webb­plat­ser är det till och med troligt att be­sö­karen an­vän­der en smart­mobil på bus­sen eller i kön till ham­burger­restau­rangen.

För att få de skrift­liga bud­ska­pen att fun­gera i den res­ponsiva miljön kan du tillämpa lite av det för­hållnings­sätt som finns i mobile first, men utan att be­höva skära bort inne­håll. Det är egent­ligen samma prin­ciper som för tradi­tionellt webb­skrivande, men med betyd­ligt strik­tare tillämpning. Vi har delat in dem i tre viktiga rekom­men­da­tioner.

  1. Det vik­ti­gaste först
  2. Spärra inte ut i onödan
  3. Korta ord och mjuka binde­streck

 

Det vik­ti­gaste först

Skriv alltid det vik­ti­gaste först. All­tid, all­tid, all­tid! I synner­het om du kan ut­gå ifrån att många av dina be­sö­kare har en liten appa­rat. I värsta fall är bara rub­riken och de två för­sta menin­garna syn­liga på deras skär­mar. I Klar­språk på nätet skri­ver vi på sidan 43 om att ute­sluta in­led­ningar och för­söka tillämpa tek­niken front­last­ning. Front­last­ning inne­bär att du samman­fattar av­snit­tets huvud­tanke i en enda kärn­mening. Det gäller i ännu större ut­sträck­ning i den res­pon­siva desig­nen. Vi rekom­men­derar rakt-på-sak utan in­led­ning när det är lätt att iden­ti­fiera vad som är det vik­ti­gaste på en sida. Front­last­ning med kärn­mening är bät­tre att an­vän­da när det är svårt att iden­ti­fiera något en­skilt som är vik­ti­gast. Då får det i­stället bli det samman­fattade huvud­bud­skapet som blir vik­ti­gast.

Så här skulle du kunna skriva rakt-på-sak:

Före:

Hjälp att byta bank

När livet föränd­ras på grund av exem­pel­vis flytt, bostads­byte eller föränd­rad in­komst kan det finnas skäl att byta bank. På Stor­banken hjäl­per vi till med det prak­tiska, som att av­sluta konton och tjäns­ter hos din nu­varande bank. Det är också viktigt att du själv gör en genom­gång av dina kon­ton och tjäns­ter.

Efter:

Hjälp att byta bank

Vill du byta bank? På Stor­banken hjäl­per vi till med det prak­tiska, som att av­sluta kon­ton och tjäns­ter hos din nu­varande bank. Gör en genom­gång av dina kon­ton och tjänster och kon­tak­ta vår kund­tjänst.

Front­last­ning är lite svå­rare att illust­rera med före- och efter­exempel. Men tänk dig till exem­pel före­ta­gets sida Om oss. Den inne­hål­ler oftast flera olika inne­hålls­delar som till exempel verk­sam­het, or­gani­sa­tion, affär­sidé, his­toria, kanske sif­fror med om­sätt­ning, antal an­ställda etc. Att säga vad som är vik­ti­gast för be­sö­karna kan vara o­möj­ligt efter­som vi inte vet varför de kommit till sidan. Då kommer kärn­meningen till an­vänd­ning:

Prodicta är ett ungt för­lag som ger ut tryck­ta böcker och e-böcker, huvud­sak­ligen med språk­lig an­knyt­ning.

Där­efter kan man dela in in­formationen i styc­ken med tyd­liga under­rub­riker så att be­sö­karna lätt kan rulla sidan ner till den in­for­ma­tion de söker.

 

Spärra inte ut i o­nödan

Att dela in en text i styc­ken är en själv­klar­het. Läsarna behöver stycke­in­del­ningen, både för att för­stå hur skri­ben­ten har re­so­nerat och för att få natur­liga av­bräck i läs­ningen. På våra skriv­kurser brukar vi för­mana skri­benter att inte göra för långa eller för få stycken efter­som läs­nin­gen blir mödo­sam då. Men detta är sällan ett prob­lem i vanliga webb­texter egent­ligen. De allra flesta webb­skri­ben­ter delar in sin text i vad de anser vara lagom långa stycken. Så nu när vi talar re­spon­siv design skulle vi i­stället vilja höja ett var­ningens finger för allt­för korta stycken. När styckena blir för korta slösar du bort mycket ut­rymme för den som har en liten skärm. Och för den som har en stor skärm känns texten frag­men­tarisk, spretig och o­samman­hängande.

hallbarhet_skarm

 

Text i fullskärmsvisning. Styckena är bara en rad eller drygt en rad lång och texten känns utspärrad och osammanhängande.

hallbarhet_mobil1

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.

hallbarhet_mobil2

Här är artikeln är lite mer plat­seffektiv när det gäller stycke­indel­ningen. Dessutom håller vi ihop infor­mation som hör ihop.

 

Korta ord och mjuka binde­streck

En annan sak som blivit uppen­bart sedan vi började läsa artik­lar på små apparater är det elände som långa ord ställer till med. Det syns tydligt i exemplen om håll­bar­hets­redo­vis­ning ovan. Ord som redo­visning, kommunika­tions­mål och håll­bar­hets­frågor lämnar fula gluggar och stjäl dyr­bart utrymme. Det är dock svårt att ge ett gene­rellt råd om att skriva korta ord. En text som handlar om håll­bar­hets­redo­vis­ning måste ju innehålla det ordet, annars blir den troligen obegrip­lig eller i alla fall onödigt omständ­lig. Däremot kan man vara lite listig genom att skriva frågor om hållbarhet istället för håll­bar­hets­frågor och mål för kommuni­ka­tionen istället för kommuni­kations­mål. I en text som handlar om fler­bostads­hus kan man skriva det långa ordet först i texten men fort­sätt­nings­vis tala om hus, kort och gott.

Men många gånger be­höver man an­vända ett exakt be­grepp och det går inte alltid att hitta korta syno­nymer eller att lösa upp en samman­sätt­ning. Då kommer tek­niken med mjuka binde­streck till an­vänd­ning. De mjuka binde­strecken gör att orden i digi­tal text av­stavas där binde­strecket finns om det behövs. Det är helt osynligt om ordet inte behöver av­stavas vid en rad­bryt­ning, men ersätts av ett syn­ligt binde­streck så snart det behövs.

hallbarhet_mobil3

Här har vi in­fogat mjuka binde­streck i alla långa ord. De av­stavas auto­matiskt och texten blir plats­effek­tiv.

De mjuka binde­strecken är alltså mycket an­vänd­bara i respon­sivt skrivande. Html-koden för det mjuka binde­strecket är &shy; eller &#173;. Lite irri­terande är det dock att vissa populära webbaserade blogg­verktyg, till exempel Blogger och Word­press, inte kan ta emot dessa koder. Visser­ligen 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 verk­tyg kan man faktiskt använda Windows kort­kommando för mjuka bindestreck i designläget, det vill säga ctrl+bindestreck. Prova i alla fall. Och när du krav­ställer för din nästa stora webb­sats­ning – se till att det finns möjlig­het att göra mjuka binde­streck.

 

Sammanfattning

I valet mellan att ta fram en app eller en mobil­anpassad version av webb­platsen eller att göra en responsiv webb­plats som an­passar sig efter stor­leken på besö­karens skärm är det antagligen mest eko­no­miskt och och mest effek­tivt att satsa på respon­siv design.

Som redak­tör för en res­ponsiv webb­plats är det bäst att hålla sig till de gängse re­kommen­dation­erna för webb­skrivande, men att tillämpa dem ännu mer strikt än tidigare. Framför allt är det tre rekommen­da­tioner som du bör hålla sten­hårt på:

  1. Det viktigaste först. Använd front­last­nings­tekni­ken med rakt-på-sak alter­na­tivt kärn­meningar. Inled­ningar är i prin­cip över­flödiga.
  2. Gör inte för korta stycken. Då spärrar du ut texten i onödan. Lagom är bäst!
  3. An­vänd korta ord om det går, och om det inte går an­vänd mjuka binde­streck.

 

Publicerad i Okategoriserade, Text och form Taggar: , , ,

Kommentera

E-postadressen publiceras inte. Obligatoriska fält är märkta *

*