Denne nettsidens innhold og design tar utgangspunkt i Leifs kjærlighet til retro datamaskiner. Siden Leif fra før av, på eget initiativ, var i gang med en portfolio nettside som han allerede hadde fylt med masse innhold, ble utfordringen å presentere dette på en måte som virkelig smaker retro.
Hele nettsiden er designmessig bygd opp rundt et bilde av en gammel Sony Trinitron CRT monitor, et høyt aktet samlerobjekt blant retrofantaster. Med monitoren som utgangspunkt ønsket vi å mane fram følelsen av å virkelig sitte foran en gammel retro maskin fra 80-tallet.
Vår bruk av semantic tags har helt fra starten av vært bundet opp til vår opprinnelige visjon. Vi har først og fremst hatt designbriller på, og har derfor ikke alltid brukt semantice elementer. Enkelte steder på nettsiden har vi måttet bruke div elementer, da vi ikke har funnet bedre alternativer.
Vi vet at vi “bryter” regler når vi bruker en monospaced font som hovedfonttype for hele nettsiden, vi er også godt klar over at skyggeleggingen av teksten, og filteret som ligger på toppen av selve displayet gjør teksten mindre lesbar. Vi har likevel valgt å gjøre det slik for å gi en mest mulig tilnærming til hvordan informasjonen ville ha sett ut på en ordentlig retro monitor. Vi kompenserer ved å bruke en relativt stor font størrelse stort sett over alt på alle plattformer.
På grunn av designvalget møtte vi på noen utfordringer. Vi klarte ikke å få Sony monitoren til å rendre som et bakgrunnsbilde og samtidig ha den bakgrunnsfargen vi ønsket å bruke. Vår løsning ble å legge bildet av monitoren inn i sitt eget div-element og la det være parent-elementet til main elementet. Vi vet at dette ikke er optimalt, men etter ulike forsøk var dette den eneste løsningen som passet vårt design.
Ellers er nettsiden delt inn i ulike seksjoner dedikert til ulike deler av designet. Vi bruker et par div elementer her og der for å kontrollere plasseringen av disse seksjonene.
Det er flere av seksjonene på nettsiden som ikke har heading, da vi mener at disse ikke har behov for det. F.eks er sectionB dedikert til knappene og postit lappene på selve monitoren. Hvis vi skulle hatt en heading her ville dette kommet i veien for designet.
Vi har også valgt å ikke ha heading på seksjonC da vi synes at sitatene står godt for seg selv i <blockqote> elementet.
Vi har valgt å skjule <aside> innholdet for å gi nettsiden et renere look, men også for å skape interaktivitet ved at brukerne faktisk må trykke på knappene til monitoren for å vise dette innholdet. I <aside> innholdet har vi også brukt CSS innstillingen whitespace: pre; noen steder for å gi Leif mest mulig frihet til å formattere kode, eller annen tekst når han vil endre på slikt. Kommentarene i HTML koden beskriver her også hvor langt ut Leif kan skrive før han skriver utenfor parent-elementet.
Alt av grafiske bilder har vært gjennom komprimering på tinypng.com for å senke lastetiden, og for at en ikke skal bruke opp datamengden sin på å laste inn siden.
Vi vet såklart at automatisk avspilling av lyd er å regne som dårlig UX, men vi kunne ikke la være å forsøke å få dette til likevel. Det finnes vel ikke noe som oser mer nostalgi, og som smaker mer retro, en lyden av en gammel datamaskin som skrur seg på. Vi har satt volumet på veldig lavt, og dette er en effekt som bare skjer på index siden. Lydfilen har på samme måte som bildene vært gjennom komprimering for å senke lastetid, og for at en ikke skal bruke opp datamengen sin på å laste inn siden.
Avslutningsvis vil vi bare skrive at vi føler vi fikk til omtrent alt det vi ville med denne portfolio nettsiden. Den ligger ekstremt tett opp til vår visjon, og vi som gruppe er veldig fornøyd med resultatet.
