Bia Rask Webbkurs

WEBBPROJEKT

WEBBPROJEKT

 


En bra webbplats ...

... har ett bra innehåll

Texterna är välskrivna och innehållet relevant.

 

... är välstrukturerad och följer standard

Det är viktigt av många skäl: webbplatsen ska fungera bra, det ska vara lätt att uppdatera och vid behov felsöka filerna, och utan gemensam standard är det svårt att vidare utveckla programvaror som webbläsare och hjälpmedel för funktions- hindrade. Teknik utvecklas och standard förändras. Idag rekommenderas HTML5 för innehållet och separata CSS-filer för utseendet (kommenterade så det är lätt att hitta i dem). Lämplig teckenkodning anges och används. H1 används som huvudrubrik, H2 som nästa nivå etc. Gillar du inte storleken, ändra i stilmallen istället för att välja fel rubriknivå.

 

... är validerad

Validera dina filer i samband med att de publiceras!

... har en relevant titel

Titelns huvudfunktion är att beskriva innehållet på sidan. Det är den som syns i sökmotorernas lista över träffar. Den syns också på webbläsarfönstets övre kant och när besökare bokmärker sidan. Titeln ska vara kort och beskrivande. ”Kapitel 1” är en dålig titel, ”Bind din egen brudbukett” säger betydligt mer.

 

... är användarvänlig

Siten är välstrukturerad, snyggt designad och lättatt navigera i. Bilder har alternativtexter så att även den som inte kan se bilderna (pga av funktionshinder eller att de inte visas av någon anledning) förstår vad de innehåller. Särskilt viktigt är detta om bilder används för navigering. Färgkombinationer och teckensnitt är lättlästa även för dem som inte ser så bra. Teckenstorlekar är relativa istället för att ha fasta mått.

 

är säker

... är sökmotoroptimerad

Sidorna innehåller ord och fraser som är relevanta för målgruppen. Fundera över vilka sökord de skulla använda och se till att få med dem. Även rubrikerna och interna länktexter innehåller viktiga nyckelord, liksom bildtexterna. Texten i title-taggen är informativ och relevant för sidan.

 

... fungerar såväl med mobiler, surfplattor och datorskärmar som med olika webbläsare

 

... går snabbt att ladda

Koden är utformad för att fungera smidigt. Bilderna och annan media är optimerade för webben (lämpligt filformat, storlek och komprimering). Siten innehåller inte tungladdade häftiga effekter utan allt som ska laddas ner fyller ett syfte och är optimerat för webbpublicering.

 

 


Arbetsprocessen

Förberedelserna är A och O för en bra site!

 

1 Research

Gör en ordentlig research om företaget, ämnet eller det du ska göra webbplatsen om. Surfa också runt och skaffa inspiration - både från företag inom samma bransch och övriga. Jag brukar göra skärmdumpar när jag ser något jag gillar och samla det i en mapp. När jag tittar igenom mappen växer det ofta fram en bild av vad jag vill göra.

 

2 Analys av behov och insamling av material

Vad är syftet med webbplatsen? Vilken är målgruppen? Vilken information förväntar de sig att hitta på webbplatsen? Vilket material finns att tillgå (texter, bilder, logotyper etc.)? Vilket material behöver skaffas fram?

 

3 Strukturera

Gör tankekartor eller liknande för att få fram vilka sidor och rubriker som bör finnas med. Är siten lite större gör du ett flödesschema för att se vilka filer som ska finnas med och hur man ska kunna navigera mellan dessa (vart olika menyer, undermenyer och andra länkar ska leda).

 

4 Designfas 1

Jobba med enkla snabba skisser för att prova olika idéer. Moodboards kan också vara bra (samla färgprover, bilder och annat med den "känsla" du vill få fram). När du har en tanke om hur webbplatsen ska se ut gör du en mer ordentlig skiss, eller ännu hellre två: en som visar hur sidan ska se ut och en som visar hur den ska byggas upp med divar, mått etc. Det underlättar kodningen enormt!

planeringsskiss
planeringsskiss med divar med mera
Bygg upp en provsida (alternativt skapa den som en bild i datorn om du föredrar det) så man ser färger, teckensnitt, storlekar etc.

 

5 Granskning

Diskutera förslaget med uppdragsgivaren och gör eventuella ändringar.

 

6 Designfas 2

Nu är det dags att bygga webbsiten på riktigt med allt vad det innebär. Kom ihåg att kommentera koden där det är lämpligt så det blir lättare att underhålla webbplatsen i framtiden. Du, eller den som uppdaterar sidan i framtiden, kommer att tacka dig!

 

7 Granskning & testning

Korrekturläs alla texter (brödtexter, rubriker, bildtexter, menyer, sidtitlar med mera). Kontrollera också att bilderna har alternativtexter. Du kan få stor hjälp om du går till Fönster > Resultat > Platsrapporter och sedan klickar på pilen till vänster. Välj Hela den lokala platsen och välj önskade alternativ.

Kontrollera att allting fungerar (länkar fungerar, bilder visas och har alternativtexter etc.). Hjälp att kontrollera länkar finns inbyggt: Fönster > Resultat > Länkkontroll och klicka sedan på pilen till vänster och välj önskat alternativ.

Kontrollera att webbplatsen fungerar som den ska i olika webbläsare och på olika skärmar (mobiler, "plattor", datorer).

 

8 Publicera webbplatsen och kontrollera igen

Gör en extra kontroll att allting fortfarande fungerar efter publiceringen och att det gör det oavsett plattform (mac, pc, surfplatta, mobiltelefon) och webbläsare. Validera filerna med hjälp av valideringstjänst, t.ex. https://validator.w3.org/ och http://jigsaw.w3.org/css-validator/. Åtgärda eventuella problem.

Du kan också validera direkt från Dreamweaver:

  1. Fönster > Resultat > Validering. Nu öppnas panelen Validering.
  2. Arkiv > Validera > Validera aktuellt dokument. (Läs mer.)

Dreamweaver har fler verktyg som kan vara till hjälp. Läs mer i Adobes hjälptexter.

 

9 Framtiden?

Vem ska sköta uppdateringen i framtiden? Vilka inloggningsuppgifter och vilken annan information behöver denna få tillgång till? Ordna med detta nu, medan du minns vad som gäller.