Projektplan – Lilla projektet

Idé och syfte

Syftet med projektet är att förbättra Paolos webbplats med det jag har lärt mig om webbutveckling i denna kursen. Jag vill visa att jag kan jobba med modern teknik och göra en webbplats som ser bättre ut, fungerar bättre och är lätt att använda. Webbplatsen är tänkt för Paolos kunder, som oftast är små företag eller föreningar. De behöver enkla men proffsiga hemsidor.

Mål

När projektet är klart ska webbplatsen:

Ha bättre struktur i koden
Ha modernare design
Ha god tillgänglighet
Vara optimerad för prestanda
Vara validerad (HTML och CSS ska inte ha fel)

Responsiv design fanns redan i den gamla versionen, men jag har förbättrat den med tydligare layout, bättre hantering av innehållet och mer genomtänkt utseende.

Kravspecifikation

Ska (måste finnas):

Responsiv design
Bildoptimering
Alt-texter på alla bilder
Validerad HTML och CSS

Bör (bra att ha):

Grundläggande SEO (t.ex. rätt rubriker, titel och beskrivning)
Enkel JavaScript-funktion

Kan (extra):

Animationer och andra visuella effekter

Planering

Jag började med att testa den gamla versionen av webbplatsen. Jag kollade mobilvänlighet, användarvänlighet, prestanda och tillgänglighet. Jag validerade också koden för att se om det fanns fel. Efter det började jag förbättra designen, ändra i HTML och CSS, och lägga till alt-taggar på bilder.

Tidsplan

Vecka 1:
Göra tester på gamla webbplatsen (mobilvänlighet, prestanda, tillgänglighet, validering)

Vecka 2:
Rätta fel i koden, lägga till alt-taggar, förbättra design och struktur i HTML och CSS

Vecka 3:
Lägga till JavaScript, göra sista justeringar, testa igen och skriva färdigt dokumentationen. Publicera på WordPress.

Tester

Kodvalidering

Jag använde W3C:s validator för att kolla HTML och CSS. Några små fel hittades, till exempel bilder utan alt-taggar, men de fixades enkelt.

Mobilvänlighet

Den gamla sidan var redan responsiv. Jag använde mig utav testen bing och amiresponsive. Sidan fungerade bra, men layouten blev ännu tydligare efter mina ändringar.

Prestanda

Jag testade sidan med PageSpeed Insights. Den gamla sidan fick 86 i betyg, vilket var ganska högt. Den nya versionen blev lite tyngre eftersom jag lagt till mer innehåll, men tack vare bildoptimering och bättre kodstruktur blev prestandan bra efteråt.

Tillgänglighet

Jag lade till alt-texter på alla bilder, såg till att rubrikerna kom i rätt ordning (h1, h2, h3), och att kontraster och läsbarhet var bra även för användare med t.ex. synnedsättning.

Problem och lösningar

Några bilder saknade alt-taggar. Det påverkade både tillgängligheten och valideringen, så jag lade till dem.
CSS:en var svår att jobba vidare med, så jag gjorde om vissa delar för att få bättre struktur.
Att hålla prestandan uppe trots mer innehåll var en utmaning. Jag löste det genom att optimera bilder och använda bara nödvändigt JavaScript.

Resultat

Webbplatsen är nu snyggare, tydligare och mer lättanvänd. Den gamla responsiva grunden finns kvar, men designen är lite modernare och fungerar ännu bättre på mobil. Jag är mest nöjd med att jag förbättrat en befintlig sida på ett smart sätt – något man ofta gör i verkligheten.

Utvärdering och reflektion

Det här projektet har jag lärt mig mer om tillgänglighet, SEO, prestanda, och hur viktig struktur i kod är. Det här projektet kommer hjälpa mig mycket när det är dags för gymnasiearbetet.