HTML5 og CSS

Siden jeg er så utrolig produktiv, slår jeg sammen to oppgaver i et blogginlegg! Først kommer jeg til å snakke litt om hva formålet med HTML er og hva som skiller HTML5 fra tidligere versjoner. Her har jeg også et eksempel fra en forside jeg har laget helt selv! Deretter skal jeg snakke litt om noen fantastiske sider jeg har lagt og hva jeg har gjort for å komme frem til resultatet.

Formålet med HTML er å bygge opp siden. Selv om man også kan bruke HTML til å endre litt på font, størrelser osv., er det i hovedsak en slags grunnmur for nettsiden. Det som skiller HTML5 fra tidligere versjoner er at man har tilgang på enda flere tagger og at det er enklere å bruke disse. Eksempel på et par av de nye taggene finner du her. Her har jeg blant annet brukt taggene til progress-bar, tidspunkt og måling, men det var ikke nødvendigvis like vellykket som det burde vært.

Hvis du ble imponert av denne nettsiden, har du mye bra i vente. Jeg har nemlig lagt hele TRE sider om hvodan man kan knytte ulike stildefinisjoner til HTML på.

Den første siden som du finner her, er bygd opp ved bruk av en attributt. Det betyr at man legger til en beskjed om hvordan hvert element skal se ut.

Den andre siden som du finner her, er bygd opp ved at man legger regelen inn i dokumentet. Det betyr at man legger inn en beskjed i hvert dokument som gjelder alt innen det man har kodet for, for eksempel tekst.

Den tredje siden finner du her, og her er stildefinisjonen lagt inn ved bruk av et stylesheet. Det betyr at man lager designkommandoene i en egen fil, som man da kan binde opp til flere sider i etterkant uten å gjøre alt på nytt igjen. Det er dette man bruker når man lager nettsted der designet på alle sidene skal være like.

Disse tre forskjellige metodene blir brukt til forskjellige ting, og det er derfor viktig at man tenker seg godt om hvordan de skal brukes før man bygger opp en nettside.

Arbeidskrav – Accessibility

Nå som vi lever i 2014, skulle man kanskje tro at det skulle være som en drøm og surfe rundt på nettet. Men sannheten er nok heller at det finnes uendelig med nettsider som for mange er nærmest umulig å manøvrere seg rundt på. Heldigvis er det noen som vil gjøre noe med dette, og har satt ekstra fokus på web accessibility, altså tilgjengelighet på web.

Det accessibility går ut på er at alle skal ha samme tilgjengelighet til en nettside, uansett om de er svaksynte, har hørselsproblemer eller lesevansker. Kravet med accessibility betyr altså at det ikke skal finnes noe på en nettside som hindrer de besøkende informasjon. Men det finnes selvfølgelig nettsider som ikke innfrir disse kravene.

For å vise hvordan man ikke fulfører kravene fra DIFI og UU, skal jeg ta utgangspunkt i nettsiden www.rorleggern.no. Denne nettsiden er egentlig en ganske fin og enkel side, men det er flere elementer som kan gjøre det vanskelig for noen å hente informasjon.

Hvis vi ser på fargene som er brukt i tekst og bakgrunn, er det ikke de største kontrastene. Det meste av teksten er i lysegrått, noe som gjør at det er vanskeligere å skille den fra bakgrunnen. Og selv om man har godt syn, krever den en smule ekstra å lese – noe som kan gjøre det vanskeligere for noen med lesevansker å holde konsentrasjonen opp. I tillegg har de valgt å bruke blått for å vise hvor man er i menyen, noe som heller ikke skiller seg særlig ut fra resten.

Selve fonten som er brukt er ganske klar og tydelig, men mangelen på utheving og forskjellige skriftstørrelser gjør at det er vanskelig å skille teksten fra hverandre.

Med tanke på navigasjonen, ser det ved første øyekast helt greit ut, men den er nok ikke like grei med å gjøre for alle. Som sagt er fargevalget veldig forvirrende og skriftstørrelsen litt for liten, men drop down-effekten gjør det også vanskelig. Det gjør det vanskelig å se hvor man er, og hvor man kan gå videre. I tillegg har ikke alle ”kategoriene” en drop down, og det kan skape mye forvirring, for noen som i utgangspunktet ikke ser så godt.

Bildene på siden mangler alt-tekst og flere av illustrasjonene er pikslete både før og etter man forstørrer siden. I tillegg er flere av bildene markert med en blå ramme, noe som vil gi assosiasjoner til en bildelink, men den er bare dekor og er derfor ganske misvisende. Til og med jeg, som ikke har dårlig syn, trykket flere ganger på bildene før jeg forsto at det var en ramme.

Man har heller ikke muligheten til å forstørre teksten på denne siden, noe som desverre er en skjelden mulighet man helst finner på statlige nettsider. Man kan selvfølgelig forstørre hele nettsiden gjennom nettleseren, men som oftest er det bare teksten man trenger forstørrelse av.

Denne siden er fullt brukelig for flere mennesker, men på grunn av fargevalget spesielt, kan den bli nærmest umulig å bruke for mennesker som sliter med synet eller lesevansker. Selv om akkurat denne siden passer dårlig for synshemmede, finnes det også sider som skaper problemet for mennesker med andre handikap. Jeg synes kravene til accessibility burde blitt tatt mer serriøst av web-utviklere enn det de gjør i dag, for selv om jeg bare har tatt opp et eksempel finnes det så utrolig mange flere.

Under ligger det en link der jeg har laget et forslag til hvordan nettsiden kunne sett ut for å gjøre tilgjengeligheten bedre. Programmet jeg brukte ville ikke samarbeide helt, og derfor ligger skissen på den tredje siden i PDF-filen.

Wireframe_rørleggern

Det jeg ville gjort for å forbedre denne siden, forklares ikke bare av denne skissen. Mye av det jeg ville endret har med fargevalget å gjøre, og det burde vært større kontraster slik at det er mulig å skille tekst, bakgrunn og design fra hverandre. Noe som jeg har prøvd å få frem i denne skissen er at det er mulig å bruke forskjellige størrelser på teksten, for å vise hva som er viktigst osv.

Noe annet jeg har gjort er å legge til tekst ved ikonene, slik at det er lettere å finne ut hvor det hører til. Jeg har valgt å ta vekk unødvendige animasjoner og slides, slik at den viktige informasjonen er lettere å finne.

Jeg har også prøvd å gjøre menyen større og tydeligere. Tanken er også at dropdown-funksjonen skal fungere på alle ”kategoriene” og være i en farge som skiller seg ut slik at den er lett å legge merke til. Det som også er et alternativ er at ”kategori”-linken fører videre til en underside, som igjen fører videre til flere sider, men dette kan bli litt i overkant.

Jeg ville også lagt til muligheten til å endre på tekststørrelsen, lydspor osv., men jeg visste ikke helt hvordan jeg skulle legge inn dette i skissen.

Selv om jeg har nevnt flere ting som kan endres her, er det sikkert enda flere ting som kunne blitt gjort om på sett fra en annen persons ståsted. Det er utrolig vanskelig for en som har perfekt syn og bevegelighet i hele kroppen, å forstå hvordan en så liten ting som en font kan hindre dem i å få informasjon.

Arbeidskrav – God og dårlig design

Denne posten kommer litt (veldig) å overtid, men bedre sent enn aldri sier nå jeg!

Oppgaven vi fikk var å finne to nettsider, en med god design og en med dårlig design. Jeg tenkte jeg skulle se på nettsider som handler om noenlunde det sammen, men med veldig ulikt design. Jeg gikk for nettsidene til Big Red Beard Comb og All About Beards, som da handler om min favoritt-ting i hele verden, nemlig SKJEGG! Jeg begynner med det værste og sparer det beste til slutt.

Siden til All About Beards er helt fantastisk rotete. Bilder, video og tekst ligger rundt om kring på hele siden, og balansen er ikke-eksisterende. Jeg vet ikke helt om designet er ironisk eller seriøst, men jeg kommer til å jobbe ut i fra at denne siden er laget helt uten humor. Fargepaletten de har valgt å bruke er en miks av grå, svart og forskjellig blåtoner som ikke passer sammen. Utover det jeg ser har de brukt den samme fonten over alt og det er lite variasjon i tekststørrelsen. De har også valgt å legge på et stroke for å fremheve noen av overskriftene, men det ser desverre ikke noe særlig pent ut. De skal alikevell få pluss i boka for god bildebruk av menn med skjegg, selv om redigeringen ikke er noe særlig god her heller.

Siden til Big Red Beard Comb er derimot et syn! Den har en enkel oppbygging og balansen er strålende. Selv om de bare bruker svart og hvitt i designet, ser det likevell utrolig bra ut på grunn av fargene i bildene som blir brukt. De har en kul kombinasjon av fonter, der de bruker old school-inspirerte fonter sammen med mer moderne og nøytrale fonter. Menyløsningen er også veldig bra, og man har den tilgjengelig uansett hvor langt man scroller ned. Denne typen design hadde nok ikke passet for fleste leverandører, men det er tydelig at de vil fremheve designet på produktene sine, som forresten ser kjempebra ut. Fant bare 2 bilder av skjegg, men de får alikevell full pott fra meg!

Synes disse to eksemplene viser at det ofte kan være lurest å gjøre ting så enkelt som mulig om man vil fremheve det man ønsker å formidle. Det første eksempelet trekker oppmerksomheten bort fra budskapet ved å bruke for mye tekst og sterk farge, mens det andre eksempelet setter det meste av fokus på produktene de prøver å selge.

Dagens visdomsord fra Frøken Trøen, over og ut!