Syfte
Jag ska återskapa VED houses hemsida och göra den mer visuellt tilltalande, samt se till att sidan är tillgänglig, responsiv och mer optimerad för prestanda. Sidan ska även ha ett bokningssystem som fungerar lokalt i webbläsaren med hjälp av JavaScript.
Målgrupp
VED house är en pizzeria som har en väldigt bred målgrupp, allt från unga barn, till äldre seniorer. Därför är det viktigt att sidan är tillgänglig för alla.
Prototyp/Mockup
Funktioner
- Startsida: Ska kort presentera sidan, samt sammanfatta olika delar information, som öppettider, veckans lunch och lite information deras vedugn.
- Meny: Denna sidan ska visa vad som går att köpa, samt mer information om veckans lunch.
- Bordsbokning: Med för tillfället ett relativt enkelt JavaScript ska man kunna boka bord lokalt.
- Administration: En sida där man kan se alla bokningar som har lagds. Denna ska för tillfället inte vara synlig på huvudsidan och man måste gå in på den via URL.
Dokumentation
Responsivitet
Jag har använt Am I Responsive, och jag hade tänkt använda Bings mobilvänlighetstest, men det krånglade en del när jag skulle använda den, så det blev inget.
I sig visar dessa verktyg endast en liten bild, så därför har jag själv testat på min mobil, samt med Google Chromes inbyggda skärmstorlektsemulerare. Där har jag testat flertal olika skärmbreddar och fixat eventuella fel. Jag har även testat alla funktioner i Firefox och de fungerar lika bra där.
Tillgänglighet
Med hjälp av WAVE accessibility test har jag testat alla sidor för att se hur tillgängliga de är. På min första sida/landing page fick jag inga errors, men tre contrast errors. Dessa contrast errors verkar vara en bugg i deras system, eftersom deras kontrastmätare visar en contrast ratio på 1:1, dvs exakt samma färg, vilket inte stämmer. Med hjälp av manuell inspektion kan jag dra slutsatsen att de har ganska hög kontrast. Se bild:
Jag får även en del varningar om Possible Heading, dvs sidan tycker att ett <p> element borde vara ett <hX>. Vi får diskutera dessa resultat…
På menysidan får jag inga errors eller kontrastvarningar. Jag får däremot en del av samma possible heading varningar som förut. Allt är bra förutom det.
Bordsbokningssidan hade däremot lite problem. Eftersom man skriver in namn och mobilnummer använder jag mig av <input>, vilket man ska ha <label> till. Jag får även errors om att kalenderns pilar(fram/bak i månaderna) inte har text i sig. Jag hade velat fixa detta, men det förstör utseendet, så jag är inte helt säker på vad jag borde göra…
Jag har kollat runt på olika riktlinjer för tillgänglighet och kollat ifall min hemsida följer dessa. Majoriteten följs redan, eller angår inte min sida(t.ex. kunna pausa videor). Jag har kollat ifall man kan navigera helt och hållet med tangentbord, vilket är möjligt. Ifall man går in i inställningar på datorn kan man stänga av animationer, vilket med hjälp av en media query, gör så att min hemsida minskar sina animationer.
Prestanda
I Google PageSpeed Insight får jag följande resultat:
Därför tog jag och gjorde om nästan alla bilder till WebP-format, samt ändrade storleken till lämpliga mått. Några bilder ville jag ha kvar som png, som bilden på ugnen, eftersom komprimeringen av WebP förstörde de svarta områderna av bilden. Jag har kvar följande varningar kvar:
Den första vet jag inte riktigt hur jag ska bli av med. Den andra varningen varnar om mina typsnitt, som jag gärna vill ha kvar och därför ignorerar jag denna varning. Den tredje säger att jag kan minska storleken på bilden på pizzan, vilket jag redan har gjort en hel del, men jag bestämde mig att ha bildens storlek lite över den storleken bilden kommer visas, eftersom jag märkte en ganska stor skillnad i bildkvalitet.
Validering
Utvärdering
Detta projekt har varit mycket utmanande och har tvingat mig att tänkta till vid flera tillfällen. Jag har lärt mig svårheterna att jobba på ett större projekt, men även hur man kan göra jobbet mer effektivt.
Tidigt i projektets gång bestämde jag mig för att använda Adobe XD, vilket jag har tillgång till eftersom jag går i kursen Digitalt Skapande, för att enkelt skapa prototyper till hemsidan. XD är smidigt eftersom det är mycket enkelt att flytta runt och redigera saker utan att behöva koda, vilket gör designfasen av projektet en hel del snabbare. Om jag hade jobbat på ett projekt till en riktig kund hade jag först skapat en prototyp/design, skickat den till dem och låtit dem svara, men eftersom jag kunde jobba mer fritt så gick jag lite fram och tillbaka mellan prototypandet och utvecklingen.
I nuläget är inte sidans bokningssystem fullständigt. Eftersom vi inte har gått igenom webbserverprogrammering än så har min sida ingen möjlighet att spara bokningarna på en databas. I stället lagrar jag alla bokningar lokalt i en cookie, vilket endast fungerar på din dator. Det har varit intressant att jobba med JavaScript i en riktig webbsida. Om man jämför med det vi gjorde i Cisco-kurserna så lärde vi oss endast själva språket, men för att knyta ihop det med en hemsida krävs lite mer kunskap. Jag hade redan lite kunskap om hur man integrerade JavaScript med HTML, men detta är det största projektet jag har gjort.
Själv känner jag att jag har en del att jobba på angående responsivitet/mobilanpassning. Denna gången gjorde jag en desktop-first design, och i början fungerade det väl. Eftersom jag använde mig av relativa enheter(em, rem) kunde jag anpassa sidan för mindre enheter endast genom att minska font size av html. I början fungerade det bra, men när jag kom ner till de smala enheterna blev det problematiskt. Jag behövde tänka om designen en hel del, vilket jag inte hade planerat i förväg. Detta ledde till att jag inte hade en konkret idé för hur jag skulle göra mobilversionen av sidan, och i stället fick det bara bli som det blev.
Ifall jag skulle gjort ett till projekt hade jag först velat lära mig hur man jobbar med ramverk. Ett specifikt ramverk jag har kikat lite på är React, vilket låter en spara allt i form av JavaScript moduler som senare kan användas i HTML-filen. Detta känner jag kan spara en del tid på utvecklingen eftersom det är ett sätt att hålla koden mer organiserad och då slipper man skriva om saker hela tiden. Det är klart att detta går att göra med CSS, men som jag fattar det ska det vara enklare med ett ramverk.
Lämna ett svar