På prestanda testet i PageSpeed Insights fick jag resultatet 94 mobilt på den nya versionen av Paolos webbtjänst. Sidan har en mer modernare look med en enkel font som gör att sidan ser mer professionellt ut. Jag har lagt till mer innehåll och ändrat på CSS så att kontrasten blir bättre vilket leder till bättre tillgänglighet. Har fixat några fel i HTML och CSS koden och lagt till en yttligare Java script funktion.
UTVÄRDERING OCH REFLEKTION
Denna uppgift har gått bra då det var baserat på projekt 01 och jag hade redan gjort saker i förväg såsom att komprimera bilder vilket hjälpte till att få högre prestanda. Eftersom jag redan hade gjort den gamla uppgiften responsiv så var det inte mycket ändringar mer än att jag ändrade CSS så att designen på sidan blev mer modern och såg bättre ut.
Den enda utmaning som fanns i detta projekt var att förbättra media quieries då jag inte är van vid det och hellre föredrar flexbox då jag upplever det som enklast.
Det jag framför allt tar med mig från denna uppgift är vikten av responsiv design och tillgänglighet. Jag har lärt mig hur detaljer som kontraster, typsnitt och kodstruktur påverkar både användarupplevelsen och hur en sida presterar på olika enheter.
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.
Jag har lagt använt flexbox för bild och text då det är enklare och ger bättre kontroll över layout. Har även lagt till lite media query för att göra designen mer responsiv och anpassad till olika skärmstorlekar. Denna uppgift var lättare till skillnad från ramverk och jag föredrar också flexbox då jag tyckte att det var lättare att lära sig flexbox än ramverk och det skulle vara onödigt att handskas med ett svårare verktyg om man redan kan ett annat.
