Redovisning av M06

Använda relativa enheter

Innan jag började arbeta med relativa enheter och dynamisk viewport så var Markdown sidan inte mobilvänlig.

Problemet är texten blir väldigt liten och att hela skärmytan (viewport) inte används. Det blir svårt att läsa på mindre enheter.

Efter att ha uppdaterat sidan till att använda en dynamisk viewport och relativa enheter (rem) på fonterna är sidan mobilvänlig.

Notera att jag fick ändra fontstorleken till 1 rem (16 px) för att den skulle räknas som mobilvänlig. Det som har ändrats är detta:

min-height: 100dvh;
font-size: 2rem;

Jag använder också en media query:

@media (max-width: 600px) {

    #mdimage {

        max-width: 30%;

        height: auto;

    }

Detta gör att bilden inte blir för stor.

Jag fick också justera tabellen då den blev för bred. Detta gjorde jag med word-break: break-word; i table description (td).

Här finns den validerade HTML och CSS koden:

Använda ramverk

Därefter valde jag att göra om skogssidan med ramverket Materialize från Google. Med Materialize finns det mycket färdigt för att använda komponenter som vanligtvis används på en websida såsom nav, hero, footer bland annat. Här används inline CSS, vilket betyder att vi inte använder en separat fil för CSS. Vi kan också få mycket hjälp genom att använda klasser tillsammans med div.

Först behöver man länka till stylesheet, exempelvis <link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css”>.

Inom <style> i HTML-filen har jag satt olika färger som passar bra med skogstemat. Navigeringsbar och footer har samma färg. Sen har hero, delen under nav en ljusare grön färg. När det gäller texten i navigeringsbar har jag använt funktionen clamp för att sätta en en minimistorlek, en optimal storlek och en maximal storlek. Detta förhindrar texten från att radbryta som det gjorde på min första version. Detta görs med font-size: clamp(1rem, 4vw, 1.5rem); Jag använder denna funktion på flera ställen.

När det gäller själva uppbyggnaden av sidan så använder man klasser, exempelvis <div class=”nav-wrapper container”> och <div class=”container” style=”margin-top: 2.5rem;”>. Varje rad är sedan indelad i kolumner. Det är 12 kolumner totalt och varje bild tar upp 4 kolumner.

Fördelen med Materialize tycker jag är att man får ganska mycket hjälp med att bygga upp strukturen på webbsidan och att det blir lättare att hantera var saker ska placeras på skärmen.

Här är den validerade HTML koden: