Mobilanpassad hemsida: Färger & Kontraster

När det gäller mobil webbdesign eller sökmotoroptimering för mobila hemsidor så skiljer sig inte reglerna helt från vanliga hemsidor men det finns definitivt några subtila skillnader som spelar in när man väljer färger för en mobil hemsida.

En smart idé är att återanvända färgschemat som du använder på din vanliga hemsida också på din mobila hemsida. Det upprätthåller en enhetlig färg i båda versionerna. 

Färgdjup – Detta är en av de viktigaste saker att tänka på när du designar en mobil hemsida. Trots teknikens framsteg när det gäller mobila enheter så släpar de fortfarande efter stationära och bärbara datorer i stor utsträckning. Mobila enheter på marknaden har ett jämförelsevis lågt färgdjup som gör att de kan visa 65000 + nyanser av färger som blått, rött och grönt. Det räcker säkert gott och väl för dina designkrav. 

Mindre färger betyder mer användarvänlighet – Ja. Använd endast ett fåtal färger och det är lämpligt att du avstår från att använda någon annan färg än dina huvudfärger. Eftersom mobila skärmar är små, har en mobil hemsida inte friheten att använda olika färger.

Ljusstyrka,  kontraster och ”white space” – Dessa tre spelar en viktig roll vid skapandet av din mobila hemsida. Du måste ta hänsyn till det faktum att användarna faktiskt använder sina mobiler för att surfa på nätet i starkt dagsljus. Du kan inte tvinga dem att besöka din hemsida bara på natten. Plus, många användare vill spara energi på sin mobil genom att hålla kontrast och ljusstyrka nere. För att tillgodose dessa användare, måste du använda mycket höga färgkontraster.

Mörka bakgrunder är en dålig upplevelse även på ett stationär dator, men på en mobil hemsida kan de vara förödande för konverteringar. Mobila användare är på språng och när de är utomhus i dagsljus är bakgrundsfärg mycket viktigt. Användarna kan öka ljusstyrkan på skärmen men det kommer att öka belastning på batteriet. 

White space, sk. tomrum behöver inte vara vit men den bör vara ljus så att texter och bilder med höga kontraster kan placeras mot den för att synas även i dåligt ljus. Att använda en bild som bakgrund rekommenderas inte heller (du kan läsa mer om bilder i del 5, mobilanpassad hemsida: Text & Bild) Återigen, kom ihåg att användarna ofta är på språng och läser på håll. 

Tomrum är bra när man bygger hemsidor för att passa flera enheter av varierande upplösningar. Ju mer tomrum, desto mindre troligt att din hemsida kommer se trång eller utdragen ut på olika enheter. Naturligtvis är det också en bra idé att designa din hemsida med flera upplösningar i åtanke.

                           ”Disclaimer: Best viewed in Netscape Navigator at 640×480”

Se upp när du använder färgövergångar – eftersom de kan bli ett hinder för på vilket sätt din sida visas på. Färgövergångar eller gradienter fungerar bra på stationära datorer men mobila användare kan se ränder i övergången även när det inte finns några. Använd så få som möjligt.

Att tänka på:
Färger kan inte leverera information. Färger gör mycket för din design men färger kan inte vara informativa. Mobilen används ofta i mindre idealiska ljusförhållanden. Så information som är markerad med en färg kanske inte syns för användaren. Om en färg används för att indikera en funktion bör den generellt också anges på ett sätt som inte är färgberoende.

Mobilanpassad hemsida: Guide till mobil hemsida
Det här är del fyra i Guide till mobil hemsida. I det här kapitlet har jag gått igenom vad du ska tänka på när det gäller färger och kontraster. Nästa del kommer att handla om text och bild. 

1. Mobilanpassad hemsida: Guide till mobil hemsida
2. Mobilanpassad hemsida: Strategi
3. Mobilanpassad hemsida: Content is king
4. ==> Mobilanpassad hemsida: Färger & Kontraster
5. Mobilanpassad hemsida: Text & Bild
6. Mobilanpassad hemsida: Struktur & Navigering
7. Mobilanpassad hemsida: Design & Layout
8. Mobilanpassad hemsida: Fat fingers & Tumvänlighet
9. Mobilanpassad hemsida: Laddningstid & 100% funktionalitet
10. Mobilanpassad hemsida: Think global, act local
11. Mobilanpassad hemsida: Testa, testa, testa
12. Mobilanpassad hemsida: Konvertera
13. Mobilanpassad hemsida: Analysera mera

6 svar till “Mobilanpassad hemsida: Färger & Kontraster”

  1. Bra serie om ett mycket aktuellt ämne.

    Det där med färgdjupet stämmer ju inte riktigt dock.
    I stort sett alla moderna telefoner(från 2010 och framåt) och alla smartphones, som i regel är de som används för surfning, kan visa 6,8 miljoner(6 777 216) färger. Av resterande telefoner har de flesta 262 144 färger och bara ett fåtal har 65 536, och dessa är oftast inte smartphones som användarna surfar på.

    Mvh,
    Peter

    • Tack! Absolut. Det går att förtydliga det stycket och vad jag menar. De är ju fler faktorer som spelar in och begränsar färgdjupet.
      Mvh, Arina

  2. Pingback: Mobilanpassad hemsida: Content is king « Arinas betraktelser | Med fokus på den digitala världen

  3. Pingback: Mobilanpassad hemsida: Strategi « Arinas betraktelser | Med fokus på den digitala världen

  4. Pingback: Mobilanpassad hemsida: Guide till mobil hemsida « Arinas betraktelser | Med fokus på den digitala världen

  5. Pingback: Mobil Webb – Färger & Kontraster | Digital - Online - Webb - Strateg och Stretegi - Magnus Attefall

Lämna ett svar

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

*