Projekt Paolo 2.0

Idé och syfte

Jag ska hjälpa Paolo att förbättra hans hemsida på flera aspekter för att han ska kunna visa sina nya kunskaper han lärt sig under kursens gång. Mycket för att kunna få fler kunders uppmärksamhet.

Målgrupp

Målgruppen är små företag som behöver hjälp med enklare sidor.

Mål

När projektet är färdigt ska sidan vara mobilanpassad, hastighetsanpassad, och bättre tillgänglighet. Även SEO anpassning hade varit bra.

Kravspecifikation

  • Ska: Mobilanpassas, hastighetsanpassas, tillgänglighetsanpassas
  • Bör: SEO anpassas
  • Kan: Utveckla designen för en snyggare hemsida, till exempel; Färg och form, navbar som göms men syns när man scrollar upp, nya fräscha bilder, mm.

Planering

  1. Skissa wireframe (och mockup)
  2. Mobilanpassa
  3. Testa mobilanpassningen med hjälp av Bing, Am I Respinsive, och inspektionsverktyget
  4. Hastighetsanpassa
  5. Testa med hjälp av Pagespeed, WebPageTest, och Pingdom
  6. Tillgänglighetsanpassa
  7. Testa med hjälp av Wave, Eiii, och Pagespeed
  8. (SEO anpassa)
  9. (Utveckla designen)
  10. Testa allt igen för att säkerställa
  11. Skriva allt som behövs på denna sida

Utseende

Wireframe

https://wireframe.cc/zeEs8f

Mockup

När det gäller färger tänker jag fortsätta att använda samma som i original hemsidan:

Sidor

Sidorna jag tänkt bygga kommer att vara:

  • En ”hem” sida med lite information om vem Paolo är.
  • En ”tekniker” sida med information om alla tekniker Paolo behärskar.
  • En ”projekt” sida mod information om de tidigare projekt Paolo genömfört.
  • En ”om” sida med lite mer om Paolo och hans kontaktuppgifter.

Genomförande

Mobil – layout

När jag skapade sidan för första gången byggde jag den med de relativa enheterna em och rem så det gjorde mobilanpassningen mycket enklare.

Jag började med att bygga om sidan till en sida bara anpassad för mobil för att sedan kunna skala upp den. Jag gjorde om layouten på ”Hem” sidan för att bättre passa mobilen.

Jag gjorde också några små fix med margins och paddings för att bättre passa mobilen.

Navigation

Jag skapade en navbar som man kan klicka upp, scripten och lite css lånade jag från w3schools. Här lade jag också in en media query så att jag får två olika navbars berroende på storleken på skärmen.

(Jag valde att gå lite ifrån min wireframe eftersom att jag tyckte det blev snyggare när navbaren låg under rubriken. Speciellt med färgerna)

Lite snabba tester visar att mobilvänligheten verkar bra

Dator – layout

Jag gjorde om layouten för datorer enligt min wireframe

Design

Jag fixade lite med designen och tillgängligheten genom att lägga en transition på 0.3 sekunder när man hoverar över länkar, göra navbaren sticky för både mobil och dator.

Hastighet

Jag hade redan bra hastighet enligt testerna men för att förbättra det mer förminskade jag bilderna så att de matchar datorns layout. På datorn har jag nu 100 på prestanda men telefonen ligger fortfarande på 93 eftersom att bilderna egentligen är för stora för den layouten.

Tillgänglighet

Det ända jag fick upp som borde fixas med tillgänglihet på alla test sidor var min dåliga kontrast. Lekte runt ett tag med färger men bestämde mig tillslut för att byta färg på texten till en inte helt vit färg.

Jag fixade också ett till error jag hade med att min meny icon på mobil layouten inte hade någon text för screen readers. Jag löste det genom att lägga en aria-label på <a> elementet.

Jag lade också till en Main-content länk för de som tabbar genom hemsidan även fast den inte har super mycket nytta för tillfället så kommer den behövas om man fortsätter utveckla sidan.

Testning och kvalitetssäkring

Kodvalidering

Efter ett par fixar så har jag nu inga kodfel på några av sidorna eller i css filen.

Test av mobilvänlighet

Efter att ha lekt runt lite i Am I Responsive och inspektionsverktyget så verkar det inte finnas något problem vid någon storlek på skärm.

Prestandatest

Jag har bra prestanda över lag men det jag tappar på enligt alla tester är att jag laddar in typsnitt och ikoner via länk. Jag minns det som att vi inte skulle ha de sakerna nedladdade på servern för att spara på utrymme så jag låter det vara såhär för nu.

Tillgänglighetstest

PageSpeed visar 100 i tillgänglighet, Wave dock säger att jag har ett kontrast error men det är på en rubrik som är display: none; så jag väljer att ignorera det.

Problem och lösningar

Det största problemet jag stötte på var hur jag skulle fixa så att navigationen fanns som en synlig rad på dator och som en meny man klickar upp på mobil. Jag har gjort en liknande sak tidigare men det var med materialize så jag hade inte helt koll på hur jag skulle lösa det utan ett ramverk.

Lösningen på problemet blev att jag tog hjälp av kod, tips, och tricks på w3schools. De hade ingen lösning som var exakt så jag ville ha det så jag behövde modifiera en hel del själv men grunden i javascripten tog jag från dem.

Sedan uppstod det såklart lite småproblem på vägen men detta var det ända stora.

Resultat

Allt som skulle bli klart enligt kravspecifikationen blev klart, det som hade kunnat utvecklats mer är SEO och designen på hemsidan.

Det som gjordes är: Mobilanpassning, prestanda förbättringar, och tillgänglighetsanpassning.

Utvärdering och reflektion

Jag tycker att arbetet gick väldigt bra, jag är supernöjd med att jag lyckades få till sid navigationen till mobiltelefonen. Jag lärde mig också en hel del utav det.

Jag har också fått känna lite på hur det kan vara att skriva gymnasiearbete och det tror jag är en nyttig kunskap.

Det är alltid roligt med mobilanpassning så detta arbete tyckte jag var superkul. Jag ser också mycket fram emot projekt03.