WasteNoWaste

Idé och syfte

Jag ska bygga en hemsida för företaget WasteNoWaste. De säljer produkter men det är ingen webbshop jag ska bygga.

Mål

Det viktigaste med sidan är att den är användarvänlig och funktionell. Men design är också mycket viktigt.

Kravspecifikation

Gör en enkel kravlista utifrån vad din lösning:

  • Ska:
    • Fungera i mobilen.
    • Vara användarvänlig.
    • Ha kort laddtid
    • Presentera företaget på ett snyggt sätt.
    • Visa produkterna företaget säljer.
  • Bör:
    • Vara snyggt designad utifrån färgkombinationer och bildanvändning.
  • Kan:
    • Ha kontaktformulär om jag hinner sätta mig in i hur det fungerar.

Planering

  • Ta reda på vad kunden har för material och lite hur kunden vill ha sidan
  • Skissa wireframe med kunden under första mötet eller inför möter nummer två.
  • Lära mig Bootstrap
  • Börja skapa en första prototyp av hemsidan
  • Prata med kunden
  • Färdigställa hemsidan
  • Testa mobilanpassningen med hjälp av Bing, Am I Respinsive, och inspektionsverktyget
  • Testa hastigheten med hjälp av Pagespeed, WebPageTest, och Pingdom
  • Testa tillgängligheten med hjälp av Wave och Pagespeed
  • Testa SEO
  • Gör ändringar beroende på resultaten av testerna
  • Testa allt igen
  • Visa den slutgiltiga hemsidan för kunden för att sedan ladda upp den

Utseende

Wireframe

Mockup

Jag visade de färger som bootstrap har och planen är att bygga med dem. (Success-subtle, warning-subtle, info-subtle, danger-subtle)

Sidor

Sidorna jag tänkt bygga kommer att vara:

  • En ”hem” sida som presenterar företaget på ett snyggt sätt.
  • En ”produkter” sida som visar de produkter företaget säljer.
  • En ”hållbarhet (eller något liknande)” sida som berättar om hur företaget jobbar för en bättre miljö.
  • En ”om” sida med information om teamet bakom företaget och med kontaktinformation.

Genomförande

Jag använder mig av ramverket bootstrap för att bygga denna sida.

Sidbygget går bra, bootstrap är ett fantastiskt verktyg som underlättar något enormt när jag bygger. Det hjälper också med mobilanpassningen som jag nu gör undertiden jag bygger.

Jag började med att bygga en navbar som vid under storlek lg på skärmen blir en gömd meny. Jag lade även in dropdown menyer för att kunna länka till delar av vissa sidor.

Sedan fortsätter jag att bygga ”hem”sidan.

Jag går sedan över till att bygga produktsidan. Jag tänker att jag ska ha någon formav bildväxlare för att visa alla olika färger på väskorna.

Bootstrap har en karusell funktion som jag lånade.

Att bygga ”Hållbarhet” och ”Om oss” var relativt lätt, var mesta att kopiera och klistra in text.

Det ända jag behövde fundera lite på var hur man skulle länka en viss bit av en sida man inte befinner sig på. Men det var hur enkelt som helst.

Det sista jag byggde var footern, jag väntade med den med mening eftersom att jag inte var 100% säker på alla sidor jag skulle ta med.

Jag lade även in alla logotyper precis på slutet eftersom att jag inte hade tillgång till dem förrän nu.

Testning och kvalitetssäkring

Här redovisar du hur du testat att webbplatsen fungerar som den ska. Gör varje testmoment, visa testresultat med bilder och skriv en kort kommentar om resultatet.

Kodvalidering

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 gjort om alla bilder till avif och gjort dem till rätt storlek för att snabba upp laddtiden. Det jag tappar på är stora layoutförskutningar. Bilderna som skapar dem är väldigt responsiva med hjälp av bootstrap. Jag hittar inte hur jag skulle kunna förbätra det utan att förstöra respinsiviteten. Det stör i alla fall inte användaren mer än att det tar lite längre tid att ladda.

Tillgänglighetstest

Jag hade ett par länkar med bara iconer i. Det tyckte testaren inte var bra så jag lade till aria-labels och aria-hidden för alla länkar så att skärmläsare kan förstå vad dem gör.

SEO

Jag tycker att det är väldigt snyggt med en ”Läs mer” länk. De sidorna som man tas till går även att gå till via navbaren och footern.

Olika webbläsare

Jag har testat flera olika webbläsare och alla verkar fungera i olika storlekar.

Problem och lösningar

De svåraste svårigheterna skulle jag säga var att förstå sig på bootstrap. Men när jag väl gjorde det flöt sidbygget på som smort.

Men det svåraste var nog att få alla bilder där jag ville ha dem. Att få koll på alla .img-fluid och sånt.

Jag satt också ett tag med att få till bildspelet med de olika färgerna på väskor. Men det var till stor del för att jag aldrig gjort något liknande tidigare

Resultat

Allt som skulle bli klart enligt kravspecifikationen blev klart, det som hade kunnat göras är ett kontakt formulär.

Jag är väldigt nöjd med det som gjordes, speciellt designen.

Utvärdering och reflektion

Arbetet gick bra i det stora hela. Det är mycket erfarenhet jag tar med mig. Kul att ha fått lära sig bootstrap som verkar va ett superbra verktyg. Kul att ha fått testa på att jobba åt en riktig kund.