Här tittar vi hur vi kan göra din websida mer användarvänlig och snygg.

Har du optimerat din kod?

http://validator.w3.org Här kan du ladda upp din kod och se hur pass många fel du får. En del fel är inte så allvarliga så du kan strunta i dem.

 

Enkla regler

  • Håll det enkelt
  • Sträva efter kontrast
  • Skapa en färgkarta dvs vilka färger som du ska ha till menytexter och rubriker.
  • Få accentfärgerna som du använder i tex menyer att återkomma i bildmaterial
  • Människor kommer ihåg symboler bättre än text, så det kan vara en idé att använda symboler till länkar ibland.

Se till att få en stil på din websida som stämmer överens med innehållet. Se exemplet på de här websidorna.

 

Optimera dina bilder med flformat för webben

Minska storlek på dina bildfiler.
Minskning av filstorlekar, eller komprimering, kan ske på flera olika vis, genom olika matematiska algoritmer. I dag brukar man tala om två olika typer av komprimering: icke-förstörande (felfri) och förstörande (degraderande). Skillnaden mellan dessa är att man med den första, icke-förstörande komprimeringen kan arrangera om bildinformationens ettor och nollor så att dessa tar mindre plats.

Ett exempel på detta skulle kunna vara att göra om texten JAAAAA till J5A där de fem A:na ersätts med siffran 5 och endast en bokstav A efter – vilket tar mindre plats eftersom man använder färre bokstäver. På så vis kan man utan problem göra om J5A till vad det var innan, och det blir exakt likadant som det var då.
Den andra komprimeringstypen som är den som vi ser hos jpeg-formatet, är så kallad förstörande komprimering. Här arrangerar man också om bildinformationen så att ettor och nollor tar mindre plats, men med skillnaden att man inte kan få tillbaka exakt de data som bildfilen hade från början, utan bara ungefär.

I samma exempel som innan så skulle JAAAAA exempelvis kunna komprimeras till JA – vilket är rätt snarlikt originalet men ändå inte riktigt samma – men tar mindre plats än J5A. Problemet här är att man med JA har kastat bort alla möjligheter att hitta tillbaka till ursprunget: JAAAAA.

Kort sagt – information som bedöms vara onödig kastas bort.

Några vanliga filformat

PNG

.png     Portable Network Graphics. Använd det här fil-formatet om du vill ha en alfa-kanal, dvs du vill ha den genomskinlig på vissa delar. Används främst för ikoner. Png ersatte GIF.

GIF

.gif      Graphics Interchange Format. Stöder bara 256 färger varför .gif bilder ser mycket fult ut om du vill visa färgbilder. Gif används fortfarande mycket på webben men är ett föråldrat filformat. Gif bilden har fördelen att det går att skapa enklare animeringar, som är rätt fula.

JPG

.jpg    Joint Photographic Experts Group. Vanligaste formatet på webben. Förstörande komprimering. Använd jpg till foton. Jpg får bilderna att bli lätt suddiga vilket inte har någon större betydelse för foton. Fördlen med jpg är att det är mycket lätt att ställa in komprimeringsgraden i PhotoShop.

TIF

.tif    Tagged Image File Format. Format som används inom grafikindustrin, tex när man skapar spel. Fördelen är att du kan spara en alfakanal, TIF-fformatet är en förstörande komprimering. Jag kan inte komma på något vettigt användningsområde för TIF på webben dock. 

 

Vi tittar på hur du ska spara bilder för att det ska se bra ut och vara optimerat
för webben.

 

Läsbarhet

Den här övningen syftar till att lära dig hur du kan kombinera bokstäver och färger för att det ska bli läsbart på din websida.

Här står det mer om vad du kan tänka på

Läsbarhets övning Färgkarta