Planering:
Syfte och målgrupp:
Jag vill göra en hemsida för klättrare i göteborgsregionen. Du ska kunna hitta information om de olika klättergymmen i göteborg och även om sporten i helhet.
Innehåll/Mål:
Hemsidan ska förmodligen ha fyra olika delsidor beroende på vad som funkar bäst.
- Homepage – Introduktions sida, ska se bäst ut för att fånga uppmärksamhet, bild + “slogan”. Lätt att navgera från.
- Klättergym – En sida där du kan läsa om de olika klättergymmen i göteborg, plats, utseende (bild), pros & cons.
- Teniker (kan ändras) – En samling av massor med olika tekniker att lära sig, namn, beskrivning, exempel etc.
- Övrigt – En sida att samla allt som är lite mer nisch men som ändå kan vara viktigt att ta med. Uteklättring, klättring terminology, information om sidan (alt. ha det på homepagen).
Funktioner:
- Navbar – en navbar som fungerar för alla enheter, kanske en “toggle:able” sidebar för mindre skärmar.
- Diskret återanvändbart domskript för att lätt kunna dölja och visa information. Förmodligen på “klättergym” och/eller “tekniker” sidorna.
- Mobilanpassa hela sidan med hjälp av media queries, responsiva enheter, flexbox, grid etc.
Arbetsplanering:
- Gör en Mock-up av layout + färgschema på stor och liten skärm.
- Gör en strukturerar arbetsplats, skapa relevanta filer och mappar för en organiserad miljö.
- Gör standard utseendet först, färger ser bra ut, navbar fungerar och är mobilanpassad etc.
- Gå in och skapa varje sida specifik, kanske göra en mock-up för individuella sidor, mobilanpassa kontinuerligt.
- Efter jag är nöjd med produkten: genomför tester på SEO, prestanda, mobilanpassning etc. och dokumentera före och efter.
Utförande:
Genomförande och dokumentation:
Mock-up av hur layouten ska se ut:
Den gröna bollen i hörnet ska vara en logotyp. Navbaren ska bli en toggleable sidebar på mobilenheter.
Det här är första varianten av homepagen. Jag har i nuläget inte gjort någon logotyp och jag har inte helt bestämt mig än om jag skall göra det.
Här är första varianten av “Gym” sidan. Jag har använt javascript så att med musklick få en text att bli synlig där det står om klättergymmen.
Jag återanvände strukturen och koden från Gym sidan till tekniker sidan för att spara tid, men anpassar såklart innehållet till sidan.
Jag bestämde mig för att inte göra en logotyp då jag inte är den skickligaste på design och jag kände inte att det var nödvändigt.
Jag har använt språken html, CSS och javascript och har gjort det i programmet VS studio Code.
Testning och kvalitetssäkring:
Här kommer prestanda tester från Page Speed Insights före och efter eventuella åtgärder.
Jag kan säga direkt att prestanda resultatet på dator på alla delsidor för näst intill 100% för allt, eventuella åtgärder gjordes för att förbättra mobilprestanda.
Här är prestanda test från Home Page:en på mobil. Anledningen till resultatet är för det mesta fontawesome som jag använder för att få mina ikoner. Det är något som jag vill använda och har svårt att undkomma nackdelarna, därför är det något jag valt att ignorera. Jag vill notera att det är endast på första delsidan som prestandan sjönk så här mycket.
Resultat innan åtgärder på gym delsidan. Resultatet beror primärt på bildleveransen – bildstorleken och bildformatet var suboptimalt.
Här är resultatet efter att jag ändrat bildformatet till WebP på samtliga bilder och även minskat storleken så bilderna inte har en högre upplösning än vad som visas. Resultatet är betydligt bättre efter åtgärderna.
Resultat på första delsidan utan några åtgärder på dator:
Här är även en bild från “Am I responsive?” som demonstrerar hemsidan på olika enheter. Det finns en litet glapp mellan den turkosa “skuggan” och sektionen nedanför som inte dyker upp vanligtvis. När jag testar hemsidan på tre olika webbläsare och i mobilen så dyker det inte upp, där med bedömer jag det inte som ett allvarligt problem.
Som jag nämnde ovan har jag även testat hemsidan i tre olika webbläsare – Chrome, FireFox och Edge både i helskärm och med en mindre skärm. Inga konstigheter eller fel hittades.
Jag använde verktyget Wave för att evaluera tillgängligheten på sidan. Det enda problemet som vekrtyget tar upp är kontrast fel, men jag tror det beror på att vektyget inte känner av att jag har använt ett “::after” element för att få en mörk backgrund till texten.
Jag har såklart verifierat HTML och CSS kod och allt är grönt.
Problem och lösningar:
Jag vill inte påstå att jag stötte på några större problem. Det svåraste var mobilanpassningen med en valbar sidebar meny när skärmen blir smalare och sedan de valbara menyerna på varje klättergym/teknik. Jag gjorde om min Landing Page ganska nyligen där jag implementerade samma funktioner därför återanvände jag scriptet jag skrev då (med hjälp av ChatGPT och google) för att smidigt och enkelt få det på Gbg Bouldering.
Utvärdering och Resultat:
Jag har nöjd över resultat. Jag skapade hemsidan som jag planerat, jag är nöjd med designen, funktionaliteten och mobilanpassningarna. Om jag ska vara petig så hade jag gärna tagit bättre bilder på högre upplösning på Tekniker delsidan och även lägga till någon funktionalitet på första delsidan mer än bara introduktion. Men jag är fortfarande nöjd med produkten.
Jag tycker att arbetet har gått bra i helhet. Jag har jobbat på smidigt och följaktligen gjort framsteg i god tid. Arbetet är såklart inte perfekt och det finns väl lite småsaker jag kunde gjort bättre men som sagt är jag nöjd och ångrar inget. Just under detta arbetet vet jag inte om jag lärt mig något speciellt men när jag gjorde om min Landing Page så lärde jag mig lite om javascript som hjälp mig här.
När det gäller gymnasiearbete så kan detta definitivt hjälpa mig. Antingen så kan jag utöka sidan jag redan har byggt med mer avancerade funktioner och system eller så tar jag det jag lärt mig för at bygga en annan produkt. I nu läget så tror jag att min gymnasiearbete kommer involvera webbuteckling/webbserverprogrammering så all träning på att göra större hemsidor är bra träning.