Archive for 8. november 2018

tanker om nettsider, -design og -typografi…

08/11/2018

Da Apple kom med Mojave, og presenterte Dark Mode som en stor ting, — en ting som dessverre er fullstendig ubrukbar på f.eks. Mail og Kalender, gikk tankene til tidligere Internett-tiders svarte CRT-skjermer med hvit tekst. Retro webdesign?

I den forbindelse gikk tanken også til Steve Krugs bok: «Don’t Make Me Think» (2000), hans klassiske bok om webdesign. Stadig nye opplag, og nå i en oppdatert utgave, «Don’t Make Me Think, Revisited: A Common Sense Approach to Web Usability» (2013). Stadig aktuell.

Siden også stadig nye brukere skal ut i verden «på nett», er det fristende med en påminnelse om boken, den er lesbar ikke bare for web designere og utviklere, men også for andre som er på nett som brukere stort sett hver dag. Mer om boken på Amazon .

forhistorien.
Ett problem oppsto i starten, da det ble mulig «å legge ut» dette nye i form av nettsteder/ nettsider på Internett ved hjelp av HTML og andre spesialverktøy, og som så skulle navigeres mellom sider og lenker. Sider hvis indre struktur var krystallklare for designeren, men akk ikke så selvfølgelige for alle andre.

Som det er sagt et sted: verden forandrer seg i rasende fart, men menneskenes hoder forandrer seg ikke i samme tempo. Ting som var vanskelige før, er fortsatt vanskelige.

En klassiker i så måte, er norske «middelaldersk helpdesk», fra NRK, sendt 2001, og fortsatt tilgjengelig på YouTube (med engelske undertekster, opphavsrett, kun privat bruk).

HTML var ikke det enkleste å sette seg inn i, og etterhvert kom programmer (som det het den gang) som gjorde det enklere å produsere «for Internett», uten kjennskap til HTML*) og CSS*). Disse kom med ferdige maler, og med opplasting til Internett «med et klikk» (— husk at hvis du ikke umiddelbart finner frem på en nettside, så er det ikke din skyld, men web designets).


programvare for webdesign
.
I dag er nettet fullt av programvare for webdesign, i alle varianter av vanskelighetsgrad, noen «tyngre» enn andre, som f.eks. Dreamweaver. Noen av de gamle programmer lever videre, som hos Adobe, andre forsvant eller ble erstattet av andre, som hos Apple.

Adobe GoLive, opprinnelig et tysk program, utviklet av Macromedia (1997), og kjøpt opp av Adobe (2005), og lagt inn som del av deres Creative Suite som Dreamweaver (programmet brukes bl.a. her av: macbasics.no og macbasics.no/forusarkiv ). Programmet er en WYSIWYG editor, så all koding skjer i bakgrunnen mens du jobber med designet.

Apple kom senere med sitt eget, enklere WYSIWYG opplegg iWeb, (2006) som del av iLife ’06 ; en elegant løsning med opplasting også til en bilde/video presentasjonsside MobileMe. Alt ble avsluttet da Apple skiftet til iCloud i 2012, og en rekke brukere som ikke hadde funnet alternativer i tide, fikk en brå oppvåkning til livet i den digitale verden. Back up, backup

RapidWeaver, for Mac, er fortsatt i sving, nå oppdatert til RapidWeaver 8.

 

 

typografi for web.
macOS Mojaves Dark Mode minner om de første Internett nettsider, bevisst eller ikke, med hvit tekst på en sort CRT skjerm. Typografisk stenalder. Ting har skjedd siden, når det gjelder typografi på skjerm og nett.

For da Apple introduserte sin Macintosh i 1984 var det innledningen til en omveltning innenfor skriftdesign og typografi: DeskTop Publishing (DTP).

Mac-en var revolusjonerende på mange måter, men for skrifthistorien og typografi var det fontvisningen som var revolusjonerende nytt.
Macintosh var den første datamaskin med sorte, skalerbare fonter på hvit bakgrunn.

På den tiden brukte alle andre computere bokstavbasert tekst, dvs. teksten så ut som gjort på en skrivemaskin. Det var én standard størrelse, punktum, og skjermen var svart, med enten grønn eller orange tekst. De første allment tilgjengelige nettsider i HTML var knapt lesbare.
Nå med Macintosh var det plutselig ikke lenger bare grønn computerskrift på sort skjerm, men en ny verden, med sort tekst på hvit bunn, og mulighet for valg av forskjellige skriftsnitt. For alle som var opptatt av skrift og typografi, var dette en åpenbaring: Seriff eller SansSerif, Times eller Helvetica, Courier, Geneva (og verdens første tegneprogram: MacPaint).

Mac-en brukte noe helt nytt, bitmapped fonts, til å fremstille skrift på skjermen.
I en bitmapped font ble hver bokstav definert innenfor et rutenett av svarte og hvite pixler (a bitmap) for å beskrive hvordan den enkelte bokstav skulle gjengis på skjermen.

Bitmaps gjorde Mac-programmene mye mer elegante, fordi man kunne kontrollere bokstavenes utseende på skjermen. Det var for første gang i historien mulig å velge mellom forskjellige skriftsnitt på en computer.

Den samtidige introduksjon av skriveren Laser-Writer ga støtet til DeskTop Publishing. LaserWriter brukte et program fra Adobe, PostScript©, til å definere formen på bokstavene. I stedet for et rutenett av sorte og hvite prikker (bitmap), brukte PostScript en matematisk formulert beskrivelse av omrisset (outline) til hver enkelt bokstav (såkalte Bezier kurver).

Prøvde du å forstørre en bitmap font, forstørret du bare hver pixel, og bokstaven så etterhvert ut som Hardangersøm, med hakkede kanter (jaggies).
PostScript fonter derimot kan justeres trinnløst opp eller ned, og vil fortsatt se like presise ut, fordi matematikken skalerer omrisset trinnløst opp eller ned, og PostScript fyller det nye omrisset med punkter.
Det var imidlertid fortsatt ikke fullt samsvar mellom det du så på skjermen, og hva som kom ut av printeren, selv om det nå så bedre ut enn matrise- eller skrivemaskinskrift.

Et nytt program fra Adobe, ATM (Adobe Type Manager) løste problemet: akkurat som en PostScript LaserWriter hadde en renderer som som tok PostScript omrissene og omgjorde disse til små prikker med toner, så omgjorde ATM PostScript fontene til pixler på skjermen.

Nå var det for første gang mulig å både få et eksakt og korrekt skjermbilde av skriftsnitt i alle størrelser, og som sort tekst på hvit skjerm, og i tillegg få en utskrift som samstemte eksakt med det du så på skjermen.
Et kvantesprang for typografi på nett.
Et nytt begrep var skapt: WYSIWYG: What You See Is What You Get.

fra «skrift & typografi en historikk» (2005) av Paal Ovrum

skjermfonter. Men alt var ennå ikke på plass: det som nå ble begrensningen var datidens skjermoppløsninger, som ikke ble bedre før CRT-skjermene ble avløst av LCD flatskjermer. Men det var fortsatt begrensninger med hensyn til lesbarhet ved bruk av mindre fontstørrelser, og tynnere skriftsnitt.
Nå er disse begrensningene så godt som borte, takket være Retinaskjermene på iPhone og Macer. Utrolig bra oppløsning, ikke bare for bilder, men også når det gjelder muligheter for fontvalg på skjerm og nett.

fontvalg for web. Krug skriver ikke om fontvalg for nettsider i sin bok, men dette er nå selvfølgelig et like viktig tema som fontvalg for papir. Det er ikke lenger nødvendig å måtte velge kun sans-serif fonter, men fritt frem for både seriffer og skrivesnitt, og i alle vekter.
Men med større muligheter, også større ansvar. En viss edruelighet er på sin plass!

  

(fra CSS Web Safe Fonts)

kompatibilitet. En annen ting er at seriøse webdesignere må tenke på at sidene må kunne fremtre som like uansett hvilket operativsystem og nettleser *) leserne der ute bruker. Ikke alle bruker siste utgave av Safari, på oppdatert Apple maskinvare, med gode skjermstørrelser. Nettstedets font-familie innstillinger bør derfor ha vurderte «fall-back» fonter lagt inn, for å sikre maksimum kompatibilitet mellom nettlesere/operativsystemer. Hvis nettleseren ikke støtter førstevalg av font, prøver den neste, og til slutt nærmeste generiske font hvis ingen andre er tilgjengelige. F.eks.; font-family: «TimesNew Roman», Times, serif;

Så mye er blitt bedre, men også vanskeligere, siden de samme typografiske regler gjelder, nå også for layout for nettsider som for trykk. For mens det du gjør for trykk er ferdig og gjort når det går i trykken, så er et nettsted en levende ting, stadig «klikkbar», og hvor i tillegg gjelder brukbarhetsvurderingene for navigasjon, som Krug behandler i sin bok.

En stadig god bok om fonter, og typografi generelt, er Erik Spiekermanns klassiker «Stop Stealing Sheep & find out how type works».
3. utgave (2013) er oppdatert i forhold til mobil bruk og webdesign.

 

 

 


definisjoner
: (fra Wikipedia)

HTML *) Hyper Text Markup Language: et hypertekstmarkeringssprog for formatering av nettsider med hypertekst og annen informasjon som kan vises i en nettleser.

CSS*) Cascading Style Sheet: (no: gjennomgående stilark) er et datasprog som brukes til å definere utseende på filer skrevet i HTML eller XML. Prinsippet er at HTML- eller XML-dokumentet utelukkende skal beskrive struktur og semantikk, mens oppsett, farger og annen stilinformasjon skal beskrives ved hjelp av CSS.

nettleser *) (eng: web browser) er et program som vanligvis brukes til å vise innhold fra Internett som oftest finnes i HTML-formatet. Nettleserens jobb er å «oversette» HTML-kodene som angir plassering av tekst og eventuelt bilder, filmer og lignende og vise dette i henhold til koden. Nettlesere opererer på den delen av Internett som kalles WWW (World Wide Web).
Mest brukte i dag: Internet Explorer 11 (bare for Windows), Firefox, Google Chrome, Opera, og for oss, selvfølgelig: the one-and-only Safari.