Syfte

Syftet med detta projekt är att förbättra Paolos Webbtjänst. Syftet för Paolos sida är att locka in kunder som är mindre företag eller föreningar och behöver hjälp med enklare sidor. Jag ska hjälpa Paolo förbättra hans sida genom att använda de tekniker jag lärt mig under kursens gång. 

Krav

• Bildoptimering
• Responsiv design
• Validerad HTML och CSS (inga fel)
• Alt – texter

Mål

• Inte ha några valideringsfel (HTML och CSS)
• Bra prestanda
• Mer modern och tilltalande design
• Bättre struktur i koden
• Vara tillgänglig för alla användare

Alternativt (om det finns tid)

• Animeringar (javascript
• SEO

Tidsplan

Vecka 1:
Utföra tester på den befintliga webbplatsen, inklusive mobilanpassning, prestanda, tillgänglighet och kodvalidering.

Vecka 2:
Åtgärda identifierade fel i koden, lägga till alt-taggar för bilder samt förbättra designen och strukturen i HTML och CSS.

Vecka 3:
Implementera en enkel JavaScript-funktion, göra sista finjusteringar, genomföra nya tester och slutföra dokumentationen. Publicera webbplatsen på hemsidan och skriva reflektion på WordPress.

DOKUMENTATION

Det första jag gjorde var att validera alla koder på projekt01, både html och css. Jag fick inga fel och därefter testade jag prestanda, mobilvänlighet, användarvänlighet och tillgänglighet och redan då hade jag goda resultat. 

Även om jag hade goda resultat redan så har jag valt att ändra i koden så att den nya paolos webb skiljer sig från original sidan. Har också ändrat CSS så nya färger har förekommit och har också använt en ny font. 

Ändringar

• Ändrat färg och lagt till skuggor och ljus accentfärg för mer kontrast
• lagt till en ny java script funktion 
• Bytte ut fonten från permanent marker till montserrat
• Responsiv förbättring – Anpassat i layouten för mindre skärmar och gjort små förändringar i media queries för bättre anpassning till mobilskärm.
• Lagt till sociala medier ikoner på ompaolo.html sidan.

TESTER

Mobilvänlighet

Jag hade redan gjort projekt 01 mobilvänligt men testade även efter alla ändringar jag gjort i projekt 02 då jag lagt till små förbättringar i media queries och det blev bättre än projekt 01. Jag använde mig av bing testet och amiresponsive.

Prestanda

Jag testade prestanda testet på PageSpeed Insights och fick 95 mobilt och 99 dator vilket visar att sidan håller måttet även efter att jag ändrat och lagt till mer saken. Det kan bero på att jag redan hade exempelvis komprimerat och gjort om bildens format i projekt 01. Har även använt flexbox och media queries.

Validering:

Jag har använt mig av W3Cs validatorer för både HTML och CSS. Jag hittade några små fel. Hade inte alt texter på alla bilder så lade till det och fixade SEO fel. 

Tillgänglighet: 

Efter att ha validerat min kod upptäcke jag lite SEO fel och även att jag missat några alt texter så jag fixade det. Ändrade färgarna i css för bättre kontrast.