H14 – MID 131 – Arbeidskravoppgave – Web

https://minerva.hivolda.no/~runarba/CSS/tekstbasen/

Oppgavetekst:

Du skal lage et redesign av nettsiden http://tekstbasen.nynorsksenteret.no

Du skal redesigne minimum tre (3) ulike delsider av nettsiden, atså en fremside og minimum to (2) undersider, men fullfør helst alle de ulike typene sider på nettsiden, slik at du kan vise frem ditt design til Nynorsksenteret om du skulle selge til de.

Min ide når jeg fikk høre om denne arbeidskravoppgaven var at jeg ville gjøre siden mer minimalistisk og at den ble lettere å navigere rundt i. Etter å ha tenkt ut en viss form for utseende på nettsiden, så tegnet jeg en enkel skisse over tankene mine rundt dette redesignet.

Jeg har ikke helt fulgt skissen som jeg laget, mye på grunn av at jeg har begrensede kunnskaper i CSS og til dels på grunn av at jeg så mens jeg drev på med redesignet at det kanskje var en enklere og bedre måte å endre nettsiden på.

Først tenkte jeg å gjøre hele redesignet med hjelp av flexbox, som vi har vært borti tidligere når vi redesignet nettsiden til høgskolen i Volda. Jeg fant fort ut at dette ville bli feil, med tanke på at det står i oppgaveteksten at redesignet helst skal være fleksibelt i forhold til bruk på mobile enheter. Derfor gikk jeg for en annerledes måte å bygge opp en side på, nemlig med å bruke noe man kaller for “Fluid Grid Layout”.

Fluid Grid Layout er et genialt verktøy når det kommer til å tilpasse en nettsiden både store og små skjermer, enten det er i form av en stor eller liten pc-skjerm eller en mobiltelefon. I stedet for å åpne en blank side når man oppretter et nytt HTML-ark, så velger man heller å åpne et nytt dokument, der man huker av for at det skal være et “fluid grid-ark”. Det man da kan endre er hvor stor del av nettsiden man skal se på ulike enheter og skjermstørrelser. I det man trykker på “create”, så blir man bedt om å linke til eller lage et nytt CSS-ark. Det at man blir bedt om dette er rett og slett fabelaktig. Dersom man følger den “vanlige” måten å bygge opp en side på, med å legge til en header, navigasjoner, sidebar, footer etc. så vil man kunne slippe å gjøre noen store endringer i CSS-arket, det meste ligger lett tilgjengelig i den høyremargen under “CSS Designer”.

Mitt design ble veldig enkelt og mer oversiktlig, mener i alle fall jeg. Fremsiden har fått mer informasjon, og jeg har lagt til en navigasjonsbar øverst på siden, slik at man lett kan bla rundt i arkivene til nettsiden. “Informasjon” fører deg til en enklere versjon av fremsiden, slik at også de som sitter på mobile enheter kan få litt informasjon om selve nettsiden. Grunnen til at jeg har lagt til denne er på grunn av at slik nettsiden er bygget opp nå, så står det ikke noe informasjon på fremsiden når man bruker mobile enheter, der er kun avbildet de ulike trinnene og to knapper øverst på siden, hvor man kan få mer informasjon. “For elever” og “For lærere” er opprettet slik at det skal være lettere å finne frem til gode ideer til oppgaveløsning for barn, samt arbeidsoppgaver. “For lærere” er tenkt å være lett beskrivende om hvordan nettsiden fungerer, samt at man lett skal kunne finne mange og gode arbeidsoppgaver til elevene ved å trykke på linken. “Kontakt oss” sier seg nok selv, her skal man kunne finne mer informasjon om skaperen av nettsiden samt eieren av nettsiden. Og man skulle kunne få kontakt med ulik ekspertise dersom man måtte trenge det.

Når man trykker seg videre til undersidene på nettsiden, så er det hele bygget opp på en enkel og oversiktig mal, slik at alt ser “likt” ut og det er lett å navigere rundt på siden. I stedet for fargerike knapper med et motiv som ikke var særlig forklarende, så har jeg gått over til en navigasjonsbar på toppen av siden, der man får det hvitt på svart hvor de ulike linkene bringer deg. Under navigasjonsbaren, så kommer det innhold, alt ettersom hvor du er på nettstedet.

Hovedfokuset mitt har hele veien vært å gjøre nettstedet så minimalistisk og oversiktlig som overhode mulig og det syns jeg at jeg har lykkes med. Siden er kanskje litt “kjedeligere” enn den andre, spesielt for de som går på barneskolen, men for de eldre, så er siden mye lettere å navigere seg rundt i. Alt i alt er jeg fornøyd med redesignet mitt, men jeg innrømmer at det kunne blitt langt bedre om jeg hadde hatt mer kunnskap innenfor html og css.

Posted in Web CSS, Web HTML

Leave a Reply

Your email address will not be published. Required fields are marked *

*