Att illustrera mindfulness – responsiv design och den försvunna layouten

Gösta Lindwall 3 februari 2020

Responsiv design och den försvunna layouten - vad har framtiden att erbjuda?

I den här artikeln riktar jag mig till dig som är intresserad av responsiv design och webbdesign.

Under arbetet med att ta fram illustrationerna på TrueRealityNow har jag och Mikael bland annat diskuterat hur bilderna fungerar i ett litet format på mobiler.

Den här texten innehåller tankar om det grafiska uttrycket som konsekvens av responsiv design ur en tecknares personliga perspektiv.

Vår bakgrund

Jag och Mikael har olika bakgrunder, han är professionell programmerare, och jag är tecknare. I vårt samarbete har vi båda två fått nya insikter om kommunikation i webb-baserade format, och även i olika eboksformat. För mig har detta inneburit en djupare insikt i tekniska detaljer kring utförandet av en webbsajt och hur man bör anpassa bilder för olika bildskärmsformat.

Jag har en dotter som är yrkesverksam på DN:s grafikavdelning där hon varit delaktig i att utforma nyhetsgrafiken på deras webbtidning. Jag kan alltså väga hennes yngre perspektiv gentemot mina egna reflektioner kring mina fördjupade erfarenheter. Min dotter är utbildad på Mälardalens högskola och har arbetat på DN sedan flera år.

Små och stora bildskärmar

En given hemsida kan, som många av er säkert känner till, vara omvandlingsbar ("responsiv") beroende om betraktaren använder en smartphone eller besöker siten på en bredare skärm. Sidans kod känner av storleken för användarens olika enheter och anpassar sitens format efter detta.

I en layout anpassad för att ses på en iPad eller desktopskärm så kan tecknaren tänka mer traditionellt, som om det vore en en grafik för en papperstidning. Men om grafiken samtidigt skall kunna ses på en mobilskärm gäller helt andra krav, där grafiken behöver skala om för det mindre formatet.

Vi har på TrueRealityNow arbetat efter principen "mobile first", det vill säga vi har utgått från att innehållet ska fungera bra på en mobiltelefon. Som referensmobil använder vi iPhone 6/7/8, men vi vinlägger oss om att sajten även ska fungera bra på iPhone 4/5.

Responsivt exempel

Här är ett exempel på responsiv design för en illustration från en av våra mindfulness­kurser.

Om du använder en mobil just nu, fyller bilderna troligen hela skärmbredden, medan de på en datorskärm ungefär motsvarar en iPhone 6/7/8 som har en bredd på 375 css-pixlar.

Alternativ 1: Kvadratiskt format

Vi har främst använt oss av ett kvadratiskt bildformat, och här är ett exempel på en bild i detta format som har text inlagd. Bildstorleken är alltså tänkt att ungefär motsvara skärmstorleken på en iPhone.

Släpp tankar

Texten i bilden blir tämligen liten på en mobiltelefon, och kan vara svår att läsa.

På en datorskärm skulle denna bild skala upp och bli större om den inte hade varit fastlåst i mobilstorlek.

Alternativ 2: Responsivt format med uppdelad bild på höjden

Här är samma innehåll som i bilden ovan, men uppdelat i tre bilder. Texten blir större och lättare att läsa. Däremot får man inte samma översikt som när man använder en helhetsbild.

Släpp tankar 1 Släpp tankar 2 Släpp tankar 3

Tanken i ovanstående exempel är alltså att koden på webbsidan väljer vilket alternativ som ska visas, helhetsbilden eller det stående formatet med tre bilder. Detta beroende på skärmbredden.

Man kan också tänka sig ett tredje alternativ, ett liggande format anpassat till datorskärmar, laptopskärmar, och iPad som hålls med liggande orientering.

Flödande text kontra informationsgrafik

Det är lättare att arbeta med ren html-text som kan flöda om beroende på skärmstorlek, medan det kan vara betydligt svårare att göra ett responsivt format för en informationsgrafik som består av många grafiska element och textelement, som ska anpassas för att kunna ses både i ett mindre mobilformat och på större skärm.

Ren text kan som sagt läggas in i webbdesignen som html-text så att den kan flöda om. Om det rör sig om en informations- eller nyhetsgrafik med integrerad text, som sparas om till jpg med pixelerad text, behöver man layouta minst två varianter av grafiken för olika format.

Storlekar på texter och bilder

Ett exempel på hur textstorleken påverkas är när jag provade mig fram i en illustration jag arbetade med. Texten i grafiken för det stora formatet höll 11 punkter i brödtexten och 14 till 18 punkter i rubriker. När samma text anpassades för mobilformatet kom jag fram till att brödtexten behövde vara 14-16 punkter och rubrikerna 24 punkter. Detta innebär som alla inser att textmängden begränsas i det mindre formatet.

De grafiska elementen behövde också anpassas för att ses i två format. I det större formatet för desktop bestämde jag en pixelbredd på 1200 pixlar för vektorillustrationer, och 1800 pixlar för grafik som innehöll text. För att anpassa samma grafik till en mobilskärm behövdes radikala justeringar för layouten ska kunna fungera.

Pixelbredd och format

En mobil har i typfallet en "logisk" pixelbredd på ca 350 pixlar (så kallade "css-pixlar"), medan antalet fysiska pixlar i regel är mycket högre. I mitt fall, valde jag att hålla ungefär dubbla bredden. För mig har ofta designen av en informationsgrafik inneburet ett liggande format, vilket kan fungera bra i en tidning, på en desktopskärm eller iPad.

Nu har jag förstått att på en mobil går grafiken fram bäst i ett kvadratiskt format. Om grafiken innehåller många element är det bättre att disponera layouten i en högsmal design. Detta eftersom de flesta håller mobilen i handen med skärmen i ett stående "porträttformat". En grafik för en tidning som är 16 cm bred och 10 cm hög, kan på en mobil gå fram bättre med 700 till 750 pixlar bred och 800 till 1000 pixlars höjd.

Flera av mina bilder och grafikinslag behöver fungera i båda formaten. Först komponerar jag i det större formatet. Sedan sparar jag om grafiken och anpassar layouten för en mobilformatet. När de två varianterna känns bra sparar jag ned mobil­varianten som jpg och storskärms­varianten som pdf.

Här uppstår problemet att det mindre formatet kanske behöver styra informationsmängden. Det ryms ju till exempel betydligt mindre brödtext i grafik anpassad för en mobiltelefon.

Hur påverkas informationsinnehållet?

Vad händer egentligen i ett mindre format som inte kan bära lika mycket information som ett större format?

Jag började reflektera mer kring hur möjligheterna till att kommunicera visuellt påverkas för grafik i en mobil. Bilder och grafik har ett mindre format och behöver förenklas och beskäras, och texter i grafiken måste kortas radikalt.

Användaren kan visserligen förstora grafiska element och navigera i en bild genom zooma och panorera. Avsaknaden av överblick som ett större format ger blir dock uppenbar. Upplevelsen på en mobilskärm blir helt enkelt "trängre".

Samtidigt har jag i vårt arbete med att utveckla mindfulnesskurser blivit allt mer medveten om att de flesta användare ser saker på nätet via sin mobil. Jag har fram till nu haft en något ogenomtänkt bild av människor som sitter vid sitt skrivbord och tittar in i en bred datorskärm, eftersom det är så jag själv arbetar.

Eftersom jag har jobbat med illustration och formgivning i flera årtionden, började aspekter på detta nu flyga runt i mitt huvud. Hur uppfattar folk arbetsproverna på min hemsida? Hur fungerar bilder och grafik jag har gjort till mina kunder och så vidare?

Ganska snart började jag också tänka på konsekvenser för bildernas funktion. Är det bara tidningar som måste tänka på detta? Hur drabbas läromedel? Hur ser det ut i skolor? Har alla elever en laptop eller iPad? Använder de sin mobil i undervisningen?

Jag vet att avhandlingar på universitet skrivs på A4 och sparas i pdf-format och att studenter ofta använder laptop-datorer. Eller håller dom också alltmer på att gå över till att läsa information via en mobiltelefon?

Responsiv design

Uttrycket "responsive design" (och "adaptive design") myntades runt år 2010, i samband med att antalet iPhone och Android-mobiler började växa och bli mer allmänt använda.

Bilden jag fick av hur responsiv design används, och av den diskussion som förs internationellt inom webbdesign, var att fokus är på huvudlayouten av webbsajten, främst layouten av menysystemet och innehållet som helhet. När jag diskuterade detta med Mikael kom vi fram till att reflektioner kring responsiv informationsgrafik inte alls är lika vanligt förekommande.

En olustkänsla började sprida sig kring konsekvenserna av att anpassa designen för mindre skärmar.

En webbdesigners perspektiv

Jag råkade i detta skede ha ett besök inbokat hos min dotter som arbetar på DN. Nu fick jag en möjlighet att vädra mina funderingar och jag ställa frågor av typen:

Blir inte nyhetsgrafiken begränsad som verktyg i en webbtidning?

Vad händer med de detaljerade illustrationerna?

Hur får man in textinformationen i det lilla formatet?

Innebär det här döden för övergripande layout?

Min dotter har även arbetat mycket med illustrationer i större format, och jag trodde nog att hon skulle dela mina farhågor. Men hon hade, i alla fall när jag frågade henne, en helt motsatt uppfattning.

Nya möjligheter

Hon menade att möjligheterna för en webbgrafik avsedd för mobilformatet gav större möjligheter att uttrycka sig.

För det första finns den vanliga möjligheten att scrolla ned så att man kan bygga i höjdled. Sedan kan man svepa ("svajpa") i sidled och lägga in grafikelement i en lång vågrät rad. För vana användare så räcker det att se en bild som flankeras av kanter från två bilder för att förstå att de kan svajpa.

Dessutom kan animeringar och filmer integreras och startas av läsaren. Ljudet ger dessutom i sig en utökad möjlighet.

Sedan gick hon in på arbetet med symboler och pictogram som behövde utföras med tydlig grafik. Kort sagt så blev hon rent lyrisk över det lilla formatets möjligheter.

Historiskt perspektiv

Naturligtvis insåg jag att hon hade poänger i sin argumentation. Men jag har minnen från tiden när jag arbetade på Expressen, där illustratörerna kunde formge hela uppslag, och använda ett stort antal grafiska element som samverkade, i ett format som flödade över sidorna. Jag tänker också på många faktaböcker och magasin med fantastiska grafiklösningar. Är det slut på den typen av mer konstnärliga utsvävningar?

Serieformatet

Jag har även arbetat med tecknade serier och haft glädjen av att få publicera serierna "De Utvalda" och "Skärskådaren" i tidningen Fantomen.

Serielayouten utnyttjar ofta flera rutor och hela sidor. Några av mina stora idoler har gjort fantastiska layouter över hela sidor. Jag vet att seriemediet utvecklas för mobilformat, men är har inte serien något unikt för större format där olika rutformat samverkar med olika bildvinklar och ger en visuell helhet?

Vad kan framtiden komma att erbjuda?

När jag tagit upp det här med Mikael, har han talat om tekniska innovationer som är på väg in i branschen. Nya mjuka skärmar som kan rullas ut i större format, olika former av projektioner i storformat, VR-glasögon, och så vidare. Han menar att kanske kan det lilla begränsade formatet som mobilen innebär, vara en kortare period av begränsningar som är övergående.

Historiskt sett har smartphones funnits i cirka 10 år, datorskärmar med högupplöst grafik kom i mer allmänt bruk på 80-talet, för 30-40 år sedan, och boktryckarkonsten är många hundra år gammal.

Kanske får vi se en renässans för informationsgrafiken? Och för serieformatet?

Det skulle vara intressant att höra andras synpunkter på detta. Du som läser detta är varmt välkommen att höra av dig till mig på epost gosta@truerealitynow.com

Med mindfulness kan du titta ut ur din tankebubbla och bli medveten om nuet

Med mindfulness kan du titta ut ur din tankebubbla

Blogg Följ oss på Facebook Hem
Copyright © 2019-2020 TrueRealityNow
English