Syfte: Paolos webbplats ska marknadsföra hans webbtjänst – visa vilka webbtekniker han behärskar och locka nya kunder (särskilt småföretag och föreningar) som behöver en modern och prisvärd hemsida.
Mål: I Projekt 02 (V2) vidareutveckla den befintliga sidan för att:
Presentera Paolos aktuella kunskaper på ett professionellt sätt
Förbättra användarupplevelsen genom mobilanpassning och snabbare laddning
Höja tillgängligheten så att alla kan använda sidan
Införa interaktivitet med JavaScript som engagerar besökaren
2. Målgrupp
Målgruppen är småföretag och föreningar som behöver en enkel, modern och lättadministrerad webbplats. Jag har därför prioriterat:
Tydlig layout och navigering
God läsbarhet genom kontrast och val av typsnitt
Snabba laddtider, även på långsamma uppkopplingar
3. Skiss (P02)
Här finns länkar för både dator och mobildesign (draw.io) samt länkar till P01 och P02: och P02 jag har designat om sidan och har gjort flera ändringer.
Hem – Hero-bild, välkomsttext och uppmaning till kontakt
Tekniker – Presentation av HTML5, CSS3, JavaScript och WordPress med klickbara bildkort
Projekt – Galleri där korten highlightas vid klick
Om – Kontaktuppgifter i tabellform, där man kan markera en rad för visuell feedback
Jag har testat alla funktioner både manuellt och automatiskt med Lighthouse.
5. Genomförande
Min arbetsprocess följde en iterativ modell:
Semantisk HTML för förbättrad struktur och SEO
CSS enligt mobile-first, med flexbox och media queries för responsivitet
Bildoptimering: komprimering, WebP-konvertering, explicita width/height på bilder samt preload av LCP-bild
JavaScript laddas med defer, med små DOM-skript som ger highlight-effekter
6. Dokumentation och validering
Dokumentation
Översiktliga kommentarer i koden
Rapporter från Lighthouse (Performance ≥ 98, Accessibility ≥ 98, SEO = 100) för både mobil och dator
Validering
HTML och CSS validerade utan fel via W3C
Inga JavaScript-fel i konsolen
7. Versionshistorik
Här du kan se hur har jag utvecklat/förbättrat från Projekt 01 till Projekt 02.
V1 – Paolos webb (projekt 01) – 12/09/2024
Struktur: Index-, teknik-, projekt- och om-sidor med grundläggande layout.
CSS: Enkla flexbox-regler, ingen mobilanpassning.
Bilder: Endast JPEG utan preload, inga explicit (bstämda) dimensioner.
JavaScript: Jag har inte implementerad Js i V1
V2 – Paolos webb (Projekt 02) – 05/14/2025
Mobilanpassning: Mobile-first, media queries och fullbreddsgallerikort.
Bildoptimering: WebP-versioner, preload av LCP och explicit width/height.
Semantisk HTML: , , , ARIA-etiketter.
JavaScript: DOM-skript för highlight på projekt, teknik och kontakt.
Prestanda: Lighthouse >96/100, AAA-kontrast, preload bilder och defer Js
8. Testresultat och förbättringar
För att verifiera att Projekt 02 verkligen uppfyller både responsivitet och tillgänglighet har jag kört flera verktyg och jämfört med ursprungliga sidan (P01). Nedan är en sammanfattning av vad testerna visade och vilka justeringar som gjordes.
8.1
P01 – Gamla V
P02 – Nya V
P01 – Layouten bröts i smala vyer, hero-texten överlappar bilden och navigeringsknapparna flyttades inte till en kolumn.
P02 – Fullständig responsivitet: alla element omordnas snyggt i en kolumn på mobiler, bild och text skalar utan överlappning.
Åtgärder:
– Mobile-first CSS med flex-layout och media queries för alla brytpunkter
– Explicita max-bredder och automatiska marginaler för centering
8.2 Mobilvänlighet (Bing Webmaster Tools)
Resultat: “Den här sidan är mobilvänlig” med samtliga gröna bockar för:
korrekta viewport
Innehåll anpassat efter enhetens bredd
Läsbar textstorlek
Tillräckligt stora touch-mål
Åtgärder: – Lazy-loading och explicit width/height minimerar horisontell scroll – Tillräcklig padding runt länkar i navigeringen
8.3 Tillgänglighet (WAVE – WebAIM)
Sammanfattning för alla sidor:
0 fel
0 kontrastfel (förutom captions som är dolda för användare)
Några varningar för redundanta ARIA-landmarks (kan ignoreras)
Strukturella element (heading, listor, figcaption) korrekt märkta
ARIA-etiketter på navigation (aria-label= “Huvudnavigering”)
Åtgärder: – Alla bilder inneslutna i med – Navigationslista i
9 Slutsats:
– Efter förbättringarna i Projekt 02 visar både Ami, Bing och WAVE att webbplatsen är:
Fullt responsiv – anpassar sig sömlöst från mobil till desktop
Mobilvänlig – uppfyller samtliga krav på viewport, läsbarhet och touch-vänlighet
Tillgänglig – inga automatiska fel, alla element korrekt semantiska och ARIA-märkta
Dokumentationen visar hur jag tagit en befintlig webbplats vidare med moderna tekniker, förbättrad prestanda och hög tillgänglighet – helt i linje med kraven för högsta betyg. Jag använde Lighthouse-feedback för att optimera både prestanda och tillgänglighet, och lärde mig nya saker om ARIA (Accessible Rich Internet Applications) och LCP (Largest Contentful Paint) under arbetets gång.w3
