Att göra en hemsida - del 3

Design är en av de primära aspekterna för hur en hemsida uppfattas. Idag har det också blivit viktig att designen fungerar på en mobilskärm. Gällande design är ett rent och tydligt upplägg ett givet rättesnöre.

Design och mobilanpassning

Design

Designen är delvis en uppgift som får belasta din kreativitet, men inte desto mindre kan några allmänna tips ges.

  1. Dekorum – med detta menas rätt design för det aktuella innehållet i fråga. En stilren och formell design kan vara perfekt design i somliga fall men om din sida handlar om dataspel vill du inte lura din besökare att hon/han hamnat på en begravningsbyrå.
  2. Tydlighet – ett tydligt upplägg gäller text och bilder för sig samt deras förhållande med varandra på sidan. Välj en bra balans när det gäller text och färg. Det är tråkigt och blir lätt otydligt när all text har samma färg. Samtidigt blir det rörigt om du blandar för mycket. Se också till så att inte texten ligger klistrad vid bilderna.
  3. Orientering på sidan – använd en navigeringsmeny ovanför och/eller vid sidan av innehållet (gärna till vänster då det är mest naturligt för besökaren att överblicka sidan från vänster till höger). Försök vara tydlig med hur och var besökaren finner det innehåll som finns på andra sidor på hemsidan.   

Obs! Om du vill ta en genväg när det gäller uppbyggnad och design av din hemsida kan du använda färdiga designmallar. Allt du behöver göra är att mata in ditt eget text- och bildinnehåll. Du kan ladda ner dessa och använda gratis. Mer detaljer och villkor för användning finns på aktuell sida.

Mobilanpassning

Mobilens alltmer utbredda andväning för Internetsurfing är den mest dramatiska förändringen som skett på hemsidans område under lång tid. Detta har ställt nya krav på hemsidornas utseende och funktionalitet. Rent designmässigt fungerar det inte med flera kolumner i mobilen utan det handlar om att strukturera designelementen vertikalt.

Om vi tar denna sida kan vi titta på två screenshots, för vanlig datorskärm ...

screenshot av hemsida i datorskärm

och så i mobil ...

screenshot sida i mobil

På mobilskärmen har sidomenyn försvunnit, men kan tas fram genom att klicka på Meny-knappen längst upp till vänster (bilden är för övrigt hämtad från sidan Mobiletest.me som rekommenderas om du vill testa hur din hemsida ser ut i olika smartphone-modeller). Att omvandla menyn till en knapp är nödvändigt om du vill låta besökaren kunna läsa texten utan att behöva zooma. För att åstadkomma detta har en metod som kallas responsiv design använts. Ett annat vanligt sätt är att skapa en mobil-version av sidan i form av en app. Att bygga hemsidor som även är mobilanpassade kräver mer arbete och kunskaper. En genväg är att använda publiceringsverktyget Wordpress där du kan använda redan färdigbyggda designmallar inklusive sådana som ser bra ut i mobilen.

Del 4: Hur du får besökare till din hemsida >>>

annons