CSS Grid – Endelig et ordentlig layoutverktøy

Frem til nå har vi hacket oss rundt med HTML, CSS og noen ganger Javascript for å få til de designene vi har ønsket oss på nettsider. Tabeller, floats, position og Flexbox var aldri vært ment til å være noe layoutverktøy, men de har på sin måte fungert som det med sine begrensninger, og til tider noe mildt sagt rare oppførsel. Nå har vi endelig fått et ordentlig layoutverktøy som har god støtte i nettlesere og som fort vil endre måten vi tenker, designer og skriver kode for nettsider. Møt CSS Grid.

Etter hvert som responsive nettsider snarere ble ett krav enn et alternativ så har også rammeverk som Bootstrap og Foundation blitt veldig populære og uten tvil hjulpet mange med å responsive sider uten for mye problemer. Men den generelle utfordringen med nevnte rammeverk har ofte vært i form av mye ekstra HTML-kode som strengt tatt aldri var nødvendig for semantikken sin del og som potensielt kunne skape trøbbel med tanke på sidens tilgjengelighet.

Et ordentlig layoutverktøy

Med CSS Grid så har vi derimot fått den første spesifikasjonen som er laget for å være et layoutverktøy i CSS, og i løpet av første halvår i 2017 er det nå blitt tilgjengelig i alle nettlesere med unntak av Internet Explorer og Edge. Internet Explorer 10 og 11 har en eldre implementasjon som man kan benytte seg av om ønskelig. Edge får full støtte i løpet av andre kvartal 2017.

Under WordCamp Europe i Paris i juni så holdt Morten Rand-Hendriksen en presentasjon med gode eksempler på hva CSS Grid er, hvordan det fungerer og hva man kan gjøre for de nettleserne som ikke støtter det. Jeg anbefaler på det sterkeste å se denne presentasjonen på en halvtime.

Kode møter design på en ny måte

Med CSS Grid så er det etter min mening nå fullt mulig for designere å tilnærme seg design av nettsider på en helt annen måte enn før fordi det fungerer i mye større grad slik vi er vant til med å sette opp grid for print. Dette kan også være med på å gjøre terskelen noe lavere for de som ønsker å lære seg å lage enkle nettsider.

De tekniske begrensningene andre metoder har hatt vil i stor grad forsvinne og man kan nå designe sider som gjenspeiler for eksempel et magasindesign for print på nett, og dette med et system som er responsivt ut av boksen. Det gjør at kompetansen man i bunn og grunn trenger for å lage nettsider vil være HTML og CSS. Det er også nyttig å se på ting som semantikk og struktur i HTML, men prinsippielt sett så er det ikke dette som avgjør om du får til å lage en enkel nettside. På sikt så bør alle som vil jobbe seriøst med å lage nettsider uansett sette seg inn i regler for Universell utforming og Accessibility, men det er et annet tema.

Så ser jeg ikke bort fra at det vil komme flere forsøk på å lage rammeverk som benytter CSS Grid i tiden fremover, men det er som nevnt egentlig kun to ting man trenger å kunne for å få noe på plass; HTML og CSS. For de interesserte bør dette være fullt overkommelig selv uten en teknisk bakgrunn. Da gjenstår det bare å få snudd webdesignverden på hodet nok en gang også får vi se hvilke kule ting som blir laget med mulighetene CSS Grid gir.

Lær mer om CSS Grid

Det finnes en del gode ressurser på temaet og Grid by Example av Rachel Andrews er den absolutte goto. Dronningen av CSS Grid. Jen Simmons har en del eksempler på sin Intro to CSS GridMDN har en meget god oversikt på sin side over spesifikasjonen og CSS-tricks har en Complete Guide to Grid.

Jeg vil også på det sterketste anbefale å benytte Firefox eller aller helst Firefox Nightly til å utvikle sidene med. De har per dags dato det absolutt beste utviklerverktøyet for CSS Grid. Jen Simmons viser i videoen nedenfor hva som er tilgjengelig og hvorfor du bør benytte nevnte nettleser til utvikling.

Bruk av masterstiler i InDesign

Den som jobber smart får mer tid til andre ting. Derfor skal jeg å dele et lite InDesign-tips som jeg har brukt i mange ganger når jeg skal lage lange dokumenter. Første gangen jeg støtte på dette var i studentavisen i Tromsø, men jeg har også sett omfattende bruk av det i bokbransjen.

Når du starter med et nytt dokument som du vet vil bli omfattende vil det være lurt å lage seg en eller flere mastere i avsnittsstilene først som sist. Når jeg sier en master så er det egentlig ingenting som heter for det i InDesign. Det du egentlig gjør er å lage en avsnittsstil som definerer noen utgangspunkt som i stor grad skal være mer regelen enn unntaket i dokumentet ditt.

Når jeg lager en master er alltid det første jeg gjør å velge at den er basert på «No Paragraph Style», så gir jeg den et navn – som oftest «MASTER». Deretter går jeg gjennom innstillingene som er i en avsnittsstil og justerer ofte språk, orddeling, tekstjustering, register og lignende som jeg vil ha de.

01-Master_InDesign

02-Master_velg-spraak_InDesign

03-Master_velg-spraak_InDesign

04-Master_velg-register_InDesign

05-Master_velg-tekstjustering_InDesign.png

Hovedinnstillingene for dokumentet

Når du har masteren på plass bruker jeg å lage en ny avsnittsstil som også skal være en master, men denne skal være utgangspunktet for det som blir de mest brukt innstillingene i dokumentet ditt. Jeg kaller den som oftest «Primær master» og her definerer jeg de innstillingene som jeg regner med å bruke oftest i dokumentet mitt. I tilfellet avis eller bok vil det oftest være de innstillingene som skal gjelde for brødteksten. Ofte er det kun skrifttypen jeg definerer i denne stilen, men tekstjustering kan være aktuelt spesielt om brødteksten skal stå i blokk mens andre elementer skal ha løs marg.

06-PrimaerMaster_opprett_InDesign.png

07-PrimaerMaster_basis_InDesign.png

Hvis det kun er behov for en master så kan primær masteren være master og dermed basert på nevnte «No Paragraph Style», men i de tilfellene du har flere skrifttyper anbefaler jeg å utvide systemet med en «Sekundær master» som da også bør være basert på «MASTER». I aviser og bøker vil det ofte være minst to skrifttyper som brukes sammen og da vil dette være en fornuftig løsning.

Prinsippet rundt dette er for de som kjenner til CSS i grunn veldig likt. Tenk på «MASTER» som forelder, mens «primær» og «sekundær» er barn av den som arver dens egenskaper. Primær- og sekundærmasterne brukes kun til å overstyrer de nedarvede egenskapene som du ikke vil at skal gjelde for den spesifikke stilen.

I mange tilfeller kan det også tenkes at det holder å definere primær- og sekundærmaster, og droppe steget med en altoverskyggende master på toppen, men dette er måten jeg foretrekker å gjøre det på. Det siste og viktigste steget er at de stilene som du skal jobbe direkte med nå skal baseres på enten primær- eller sekundærmaster. I en avis så vil du ha flere nivåer med teksthierarki og da er det viktig å lage stiler for de aktuelle typene tekst, så når jeg starter opp med et avisprosjekt bruker jeg alltid å lage stiler for «tittel», «ingress», «byline», «brødtekst uten innrykk», «brødtekst med innrykk», «mellomtittel», «bildetekst», «sitat» og lignende etter behov. Disse stilene baserer jeg på enten primær- eller sekundærmasteren min med utgangspunkt i hvilken skrifttype jeg ønsker.

08-Brodtekststil_InDesign

09-Tittelstil_InDesign

Fordelen med en slik fremgangsmåte er ikke bare at du får god oversikt, men du kan altså bygge et system hvor du raskt kan teste forskjellige skrifttyper kun ved å endre den i primær- og sekundærmasteren, og se endringene i de stilene du skal jobbe direkte med. Når jeg vil sjekke hvordan tittelen min ser ut med den andre skriften jeg har valgt så endrer jeg bare mellom hvilken master de er basert på. Så enkelt, så greit. Så får du tid til så mye annet.

10-Avsnittsstiler_InDesign

bonustips: trykker du eple+y (mac) eller ctrl+y (pc) når du har markert en tekstblokk så får du opp «storyeditoren» som viser den hvilken stil som er lagt på hvert enkelt avsnitt i teksten din. Veldig nyttig hvis du vil ha stålkontroll på at alle avsnittene dine har riktige stiler.

Skriftdesign, dag 6–8

Tirsdag, onsdag og torsdag 12.–14. mars var Veronika Burian tilbake og vi hadde de tre dager til med skriftdesign. I tiden mellom hun var borte var det i stor grad frivillig å jobbe videre med skriften sin, men siden skriftdesign er veldig detaljorientert og tidkrevende arbeid ville det helt klart være lurt å prøve å få skviset inn litt arbeid med skriften. På den andre siden var det ekstremt hektiske uker som lå i mellom hennes besøk her på Gjøvik og det ble dessverre ikke gjort så veldig store fremskritt i mellomtiden.

Vi fortsatte der vi slapp og fikk litt prøvd oss på litt mer tekniske finurligheter i Fontlab i løpet av den siste uken. Multiple master, metric- og kerning classes samt components var noe av dette, ellers handlet det i størst grad om å klare å bli «ferdig» med alfabetet. Ferdig blir man derimot aldri med en skrifttype, og selv skjønte jeg fort at jeg ikke kom til å klare å ta igjen de resterende i klassen etter den tekniske katastrofen på dag 4. Likevel ble det etterhvert en god del tegn, og en del tilbakemeldinger på hvordan jeg bør angripe prosjektet videre nå når vi ikke har Veronika rundt oss som veileder. Selv om jeg har masse arbeid igjen før jeg har et fullt alfabet i minuskler og versaler ser jeg positivt på å få muligheten til å få dette ferdig og få laget min første ordentlige skrift.

Tekstprøve på skriften Port Arthur

Et utrolig morsomt prosjekt hvor hele klassen har fått muligheten til å prøve noe litt annerledes, og ikke minst har man kanskje tatt bort litt av skrekken for å designe bokstaver også. Hvem vet hva man kan bruke denne kunnskapen til i framtiden. Jeg er i hvertfall henrykt over hvor kult det egentlig er å kunne designe sine egne bokstaver!

Klassens arbeider hengt opp på veggen.

En mer fullstendig oversikt over klassens arbeider kan du finne på TypeTogether sin Flickr side.

Skriftdesign, dag 5

Erfaringsmessig så går det både raskere, og kan fort bli bedre når jeg må gjøre noe for andre gang. Noen litt dårlige designvalg som ble gjort i starten av første forsøk kunne enkelt løses ved å få orden på de detaljene i denne omgangen før de ble til «følgefeil» som krever mye arbeid for å rette over hele skriften.

Selv om jeg lærte om viktigheten av sikkerhetskopier dag 4, så ble dagen brukt til å få opp dampen og få lage en del av de tegnene som definerer ulike deler som kan gjenbrukes utover skrifttypen, og som gir den sitt særpreg. Vår veileder Veronika Burian var helt klar på at skriftdesign handler om tre ting. Konsistens, konsistens og konsistens. Dette er absolutt en reell utfordring når man har sett seg litt blind på arbeidet sitt etter å ha holdt på en stund med forskjellige tegn. I løpet av dagen hadde jeg færre enn de fleste hva tegn angår, men likevel nok til å begynne å få en liten følelse av hvordan skriften fungerer.

20130301-065105.jpg – Veronika gir hver enkelt en vurdering i plenum

Hele dagen gikk til arbeid før vi fikk en tilbakemelding på det vi hadde gjort i plenum. Alt i alt var det spennende å se hva alle andre hadde jobbet med de siste dagene, og til min lille overraskelse så jeg at jeg var en av få, om enn eneste, som hadde en skrift av den typen jeg holder på med. Den lave kontrasten med litt mekaniske seriffer gjør at min skrift bærer preg av sitt forbilde som nok er nærmere hundre år gammelt. Nå har vi noen uker til å jobbe litt videre på skriften før Veronika kommer tilbake og tar 3 dager til med oss i denne workshopen.

Skriftdesign, dag 4

Det er nå jeg skulle fortalt om den fantastiske skrifttypen jeg har fått på plass. Hurramegrundt og alt det der. Sannheten derimot er at jeg hadde glemt å fylle på karmakontoen. Fordi vi jobber på skolens maskiner som er tilgjengelige for veldig mange, og nettverkslagringen ikke er avsperret per student, så lar jeg aldri filer ligge igjen på disse maskinene. Så da skjer jo det som bare må skje. Den eneste kopien jeg hadde var på en USB minnepenn som på et eller annet vis har selvdestruert mellom dag 3 og dag 4. Mesteparten av dag 4 gikk dermed til å forsøke å få liv i den og få ut noen filer, men realiteten er at så viktig var ikke filene at de er verdt store summer penger som mange tjenestetilbydere helst vil ha for å redde data, men jeg gjorde et reellt forsøk på å få liv i minnepennen igjen.

Forsøkene på å få ut dataene fra minnepennen førte ingensted, noe jeg egentlig visste. Flashminne er ikke noe som du uten videre får tak på når partisjonen feiler. Min vegring for å lagre på skolens maskiner ender dermed med at jeg møter meg selv i døren. Enden på visen per nå er at jeg måtte starte på nytt. Forhåpentligvis blir skrifttypen bedre denne gangen. Jeg så allerede på dag 3 småfeil som tilslutt ble gjentakende feil i tegnene. Minuset er såklart at workshopansvarlig Veronika Burian reiser til varmere strøk etter dag 5, men som tidligere nevnt vil hun komme tilbake i tre dager i midten av Mars. Per nå ligger jeg i praksis vil jeg tro nærmere 10–11 timer bak resten i arbeid, men jeg lar meg ikke vippe av pinnen av den grunn.

Skriftdesign, dag 3

Dag 3 av workshopen og vi tok steget fra blyantskisser til den digitale verden. Vi startet med å skanne skissene våre av såkalte nøkkeltegn, det vil si tegn som definerer en del karakteristikker i selve skrifttypen. Dette kan i mange tilfeller være bokstaver som «n», «a», «p», «o», «h» og «H», men kan såklart også inkludere andre.

Vi fikk dels beskjed om å forsøke å ha ordet «videospan» klart på skisser før vi startet digitalt. Selv hadde jeg brukt så lang tid på å få til en fornuftig «a» at jeg hang et godt stykke etter når vi plutselig var klare for å gjøre ting digitalt.

Etter å ha skannet kjørte vi opp kontrasten på den i Photoshop og importerte bokstavene som bakgrunn i Fontlab Studio som er programmet vi bruker til å tegne opp skriften. Fontlab krever litt tilvenning, men for de som er kjent med Illustrator og bezierkurver er det en relativt smal sak å komme i gang. Alt det du derimot kan gjøre i programmet krever derimot mye mer kunnskap.

Erfaringen med workshopen hittil har vært at tiden går fort, og det er mye detaljarbeid. Heldigvis er det veldig tilgivende å jobbe digitalt siden man kan prøve ut nye løsninger omtrent på løpende bånd raskt og enkelt. Mot slutten av dagen hadde jeg fått på plass en 8-10 tegn kun ved å ta utgangspunkt og «n» og «a».

Skriftdesign, dag 2

Andre dag av workshopen gikk i sin helhet med til å jobbe videre med de skissene jeg allerede hadde startet på. aldri hadde jeg trodd at det skulle være så vanskelig å tegne en liten «a». Etterhvert så ble det i hvertfall noe som lignet noe, og forsøk på «p» og «o» ble også gjort.

Bokstavskisser – Eksempel på bokstavskisser

Det vanskeligste hittil synes jeg er å være konsistent i formene med tanke på størrelsesforhold og kontrast. Skrifttypen min går i retning av en litt eldre type antikva med noe middels kontrast i utgangspunktet, men vi får se hvor det ender.

En del av de andre har kommet såpass langt at de har startet med å skanne skisser for å digitalisere dem. Jeg har også skanner, hjemme, så jeg skannet de tegnene jeg hadde skisser av og tegnet de opp i Illustrator. Ganske kjapt fant jeg avvik i både bredde og kontrast blant de få tegnene jeg hadde. Det er godt mulig jeg foregrep workshopens planlagte frramdrift noe ved å gjøre dette, men fra Illustrator fikk jeg importert tegnene i Fontographer hvor jeg har justert en god del på noen av dem.

Arbeidsbord – Christine konsentrerer seg intenst om skissene sine

Det morsomme når man får tegnet opp bokstavene digitalt er jo blant annet hvor enkelt det er å justere på tegn, men også at det å lage andre tegn av de du allerede har uten å skisse de går stort sett som en lek. Bare ved å ha en «n» fikk jeg «m» og «u» ganske kjapt sammen. «p» kan bli til både «b», «d» og «q» med justeringer.

"n" tenget som vektor i Fontographer – lillebroren til Fontlab