Digital innovation som ställer om ditt företags marknadsföring.

Checklista ✓

• Webbplatsen skall bestå av minst två HTML-filer som är ihoplänkade via en meny, och en primär CSS-fil som styr allt utseende. ✓
  • Se sida: Bonus i fotnot.
• En av HTML-sidorna skall innehålla rapporten med din processanalys och de andra kan innehålla vad du vill. Rapporten skall alltså vara text som är en del av webbplatsen, ej länk till något externt dokument. ✓
• Sidorna skall vara responsiva. Du skall använda “media queries” för att få sidan anpassad för minst två upplösningar. ✓
• Bilden på mobilsidan, i den tilldelade mockupen, kan tolkas på två sätt – dels att enbart mittenkolumnen från desktopsidan visas, alternativt att alla tre visas i en kolumn, med mittenkolumnen först. Den första varianten är mycket lättare än den andra. Pluspoäng för den som löser variant två, eller ger ett bra resonemang kring hur man kan tänka kring lösning av den. ✓
• Någonstans på sidorna skall du använda något typsnitt från Google fonts eller liknande tjänster, exempelvis på rubriker eller brödtexten. ✓
• Innehållsdelens höjd skall anpassas automatiskt efter mängden innehåll på sidan, det vill säga att ni inte skall koda in fasta höjder på innehållscontainers. ✓
  • Se sida: Processanalys i sidhuvud.
• Sidornas titel skall vara ditt namn. ✓
• Sidornas skall validera som minst xhtml 1.0 transitional. Pluspoäng för xhtml strict-validering eller korrekt använd HTML5. ✓
• Sidornas struktur skall vara uppbyggd av div-taggar, ej tabeller. ✓
• Vid utskrift av sidan skall stora bildelement på sidan döljas. Däremot skall inte alla bilder döljas. Även andra element som är irrelevanta att ha kvar vid utskrift, som till exempel en meny, skall döljas. ✓
• Koden skall vara kommenterad, dvs ni förklarar med egna ord vad som händer på olika ställen i koden. Dessa kommentarer används i bedömningen av er uppgift, så beskriv på ett bra men kortfattat sätt hur ni tänkt er koden. Detta gäller html såväl som css. ✓
• Startsidan skall heta “index.html” ✓
• Koden skall över lag vara av god kvalitet och följa modern standard. ✓

Problem på vägen

Kursen läser jag för att få en refresher i korrekt webbdesign. Därför stötte jag på en hel del fel jag gjort förr i tiden och som inte längre är godkända metoder. Ett exempel är att jag alltid har arbetat med relative, absolute och inline-block när jag skapat min design men nu behövde jag lära mig att jobba med elementens standardinställningar.

Flexbox var till stor hjälp för att få struktur på hemsidan och faktiskt inte så krångligt när man väl börjat lära sig men ett problem jag stötte på med flexbox var att det inte gick att ändra bredden på sektionen utan att använda width, så om ni vet en bättre lösning tar jag gärna emot den, testade med flex-basis men det funkade inte med '%' då. Det kanske är korrekt att använda width ändå? Referens.

Några större problem hade jag inte eftersom jag alltid har jobbat i HTML5 och därför lärt mig det mesta från grunden, hur man jobbar med em, procent och gör hemsidan användarvänglig och responsiv. Jag skrev hemsidan i anteckningar så det blev problem med strukturen men det fixade jag genom att importera filerna till dreamweaver på datorn hemma. Så mottar gärna så mycket feedback som möjligt om ni upptäcker något jag gjort tokigt.

Filstruktur och källkod

Index.html och Bonus.html ligger i root mappen, sedan har jag planerat upplägget med en mapp för bilder, en för css kodning och hade även använt en till mapp för javascript om det var tillåtet. Stylingen på hemsidan är uppdelad i fyra olika filer, main.css, fonts.css, color.css och responsive.css — main innehåller uppbygnaden av alla element, fonts all styling på text(pesudo-klasser ingår även här) men inte färger, dem ligger i colors.css och motivationen till det är när stylingen blir väldigt stor så får man leta länge om man bara vill ändra något litet(Detta lärde jag mig när jag testade på Bootstrap. Enda anledningen att det användes för det här projektet var struktur och för att skapa en rutin, jag valde att inte döpa om bilderna ifall att ni ville kolla upp om de verkligen var tillåtna att använda.

I källkoden kommer ni hitta diverse kommentarer som förklarar varför jag gjort vissa val och även där jag suddat ut koden utan att radera den, då ser ni att jag testat olika lösningar också.

Mitt designupplägg

Mitt mål var att skapa en hemsida som är enkel att nagivera då vi människor är lata och inte vill läsa en massa text utan att något händer. Första intrycket är en stor och välkomnande landbana som inte innehåller för mycket information. Här valde jag en bakgrundsbild som är trevlig för ögonen med färger som passar bra ihop på startsidan: sidhuvud med skog i bakgrunden och när man skrollar ned så lägger sig den bruna startsidan en snygg kontrast till sidans huvud. Alla bilder och fonter är godkända för kommersiellt syfte och hämtade från google.com, pixabay.com och uxwing.com.

Sidan följer HTML5 standard med en header för sidhuvudet, där i har jag placerat min "hemknapp" eller logga och en navigeringbar. För att få elementen på plats använde jag flexbox som gör att strukturen på hemsidan är lätt att styra utan att oroa sig för spaghetti-kod. Länkarna är uppbyggda i en lista för att ge stöd åt skärmläsare och för att skapa struktur. Alla länkar är designade för att följa färgschemat och ge kontrast mot den tjocka texten i landbanan. Istället för att länka till flera olika html sidor så la jag huvudinnehållet under index men gjorde hemsidan i flera olika 'lager' och med hjälp av smooth scrolling och ankare är det möjligt utan Javascript, fast hade javascript varit tillåtet hade jag använt det utöver.

Den här sidan du läser nu är tänkt att skapa kontrast till ladning page, samtidigt som sista sidan ger dig känslan av att ha skrollat genom jorden ner till australien. Ett undantag jag gjode från mallen var att jag la sista sektionen som en stor under dem tre övre för att det blev finare än att ha fyra smala bredvid varandra. Motivet på den här sidan var natur,

För att underlätta för mig själv så gjorde jag hemsidan användarvänlig från början genom att arbeta med procent och em. Jag undvek nästan helt och hållet bestämda enheter så som px, pt för att göra så lite ändringar som möjligt i den mobilvänliga layouten.