Obligatorisk oppgave 06 Enkelt nettsted – forbedret versjon

I forbindelse med mappeinnlevering hvor alle de obligatoriske oppgavene fra 2. semester leveres på nytt for karaktersetting, ble vi bedt om å prøve å forbedre oppgavene.

I denne bloggposten skal jeg vise hva jeg har gjort med min Obligatoriske oppgave 06 Enkelt nettsted.

Farger og lesbarhet

Jeg er veldig glad i dyp lilla og skarp irrgrønn, men innser at fargene ikke hadde god kontrast eller lesbarhet i forhold til en svart bakgrunn. Jeg testet fargene med Colour contrast analyser (et gratis program man kan laste ned her: http://www.paciellogroup.com/resources/contrast-analyser.html ) og fikk dårlige resultat på begge fargene, både på kontrast og lysstyrke.

Lilla #A00051 fikk ”fail” både på kontrast (lesbarhet) og er håpløs for fargeblinde:

Grønn #00D498 fikk ”fail” på kontrast (lesbarhet), men ”pass” på lysstyrke:

Jeg valgte derfor to helt nye, mye lysere farger som gav bra score både på lesbarhet, lysstyrke og fargeblindhet.

Den nye grønne er #82D3AC:

Den lilla fargen er byttet ut med en rosa farge #

Meny

Jeg har endret navigasjonsmenyen som før var lilla til grønn. Jeg synes det gir en fin helhet og bedre lesbarhet. Har økt skriftstørrelsen på menyen ørlite (fra 1.2 em til 1.1 em).

Layout og tekst

Index-siden: Jeg syntes det var for mye luft på den gamle versjonen og ønsket meg en tettere layout. Jeg har fjernet padding mange steder på index-siden slik at den fremstår balansert, men ikke uten unødvendig store avstander mellom elementene.

Jeg har også redusert tekststørrelsen på brødteksten ved siden av bildet på index-siden, samt teksten i footer.

Før var menyen midtstilt i forhold til hovedinnholdet, jeg har nå valgt å venstrestille menyen mer slik at den er mer på linje med resten av innholdet.

De tre undersidene har fått samme størrelse på bilde og tekstbokser, mens index-siden fortsatt er litt annerledes. Men også denne har jeg gjort noe mer lik de andre; bildet er blitt mindre og tekstboksen og bildet har bedre balanse i forhold til hverandre.

Jeg jobbet en del med å lage templates (første gang jeg prøver dette) og jeg ser at det er smart for å få påfølgende sider like, uten å slite seg i hjel. Men siden Enkelt nettsted ikke var tenkt slik fra begynnelsen av, ble det lettere for meg å kopiere HTML og CSS over på de andre sidene. Heldigvis var det ikke så mange sider. Men en annen gang skal jeg definitivt prøve meg på templates.

Bilder

Jeg har laget nye versjoner av bildene, og blant annet fjerne ”feather” i kantene på bildet på siden ”om meg” slik at nå har alle bildene firkantede hjørner.

Rollover

Jeg har latt teksten på linker i menyen skifte fra grønn til rosa ed understreking ved mouseover og klikk, slik at det er lett å se at dette er linker. Jeg har også gjort det slik at linken i menyen til den siden man står på, alltid er rosa og med understreking.

Lenke til toppen

På de lange sidene har jeg laget et ”named anchor”, lenke til toppen av siden.

Gammel versjon av obligatorisk oppgave 06 Enkelt nettsted:

http://elevarbeid.webstudent.no/mmd_webstudent/gry_monica_hellevik/oldsite/index.html

Ny versjon av obligatorisk oppgave 06 Enkelt nettsted:

http://elevarbeid.webstudent.no/mmd_webstudent/gry_monica_hellevik/index.html 

Screenshots:

Gammelt nettsted:

 

Nytt nettsted: