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

Skriftdesign, dag 1

For andre året på rad har sisteårsstudentene ved mediedesign på Høgskolen i Gjøvik en åtte dager lang workshop med skriftdesign fordelt på en uke i februar, og tre dager i mars. Veileder og workshopholder er tsjekkiske Veronika Burian kjent fra TypeTogether
som i de siste årene sammen med argentinske José Scaglione har laget flere suksessfulle skrifttyper designet for mengdetekst i aviser, magasiner og bøker.

For oss som er studenter er ikke dette bare en unik mulighet til å forsøke å lage sin egen skrifttype, men også veldig inspirerende å ha en slik kapasitet innen faget som Burian er som veileder og mentor i disse forsåvidt korte og hektiske dagene.

20130218-233642.jpg

Vi studentene som deltar ble på forhånd bedt om å gjøre litt research for å finne litt inspirasjon og tegne noen utvalgte bokstaver som vi skulle ha med til første dag. Selv hadde jeg sett i bildedatabasen til Trondheim byarkiv og funnet et bilde av bryggene på sørsiden av Gamle bybro som er nærmere hundre år gammelt med noe tekst på. I samråd med Veronika ble vi enige om at jeg skulle ta utgangspunkt i en «n» jeg hadde tegnet på forhånd fra teksten på bildet.

Starten på et alfabet

Vi brukte ikke lang tid på å snakke om ting, men gikk derimot raskt til det praktiske arbeidet med tegne bokstaver. Det er i hvertfall ingen tvil om at dette tar tid, og det kreves mye prøving og feiling for å få til de riktige formene. Jeg klarte i dag å få til en «n» og delvis en «a». I utgangspunktet er det snakk om å tegne seks forskjellige bokstaver for å få definert en del gjentagende former. I morgen fortsetter arbeidet, og jeg må nok produsere litt mer enn i dag, men dette er virkelig morsomt arbeid og tiden flyr når jeg sitter konsentrert over papiret med blyanten min.

Gratis dokumentert starttema for WordPress

Før jul i fjor hadde ThemeShaper en serie artikler om hvordan det går an å gå fram for å skrive et starttema for WordPress. Produktet av serien er et tema som kan fungere som et utgangspunkt for utvikling av tema til andre sider. Det finnes forsåvidt mange temaer som er gratis tilgjengelie på nettet som fungerer utmerket til akkurat samme jobben som Shape, artikkelseriens tema, men om jeg skal trekke fram en ting jeg synes er en relativt kurant fordel så er det at all kode er dokumentert over hos ThemeShaper.

Interessant som jeg syntes denne artikkelserien var tok jeg meg bryet i tiden før jul med å skrive temaet etterhvert som serien skred framover. Såvidt jeg vet er ikke temaet tilgjengelig hos dem på noen annen måte enn som dokumenterte kodesnutter i sammenheng med artiklene i serien deres. Den gode nyheten er derimot at jeg fulgte serien og samlet sammen koden slik at temaet eksisterer i en form som kan brukes. Utover det artikkelserien tar for seg har jeg jeg oversatt temaet til norsk og inkludert fitvids som en responsiv løsning for videoinnhold. Lag noe kult med det som ThemeShaper sier. Shape er nå tilgjengelig via GitHub til å gjøre hva du vil med. Selv har jeg nylig brukt det med hell som utgangspunkt for siden til Tonje Karlsen.

Velbekomme!

Temautvikling i WordPress

WordPress som publiseringsløsning

De fleste nettsider i dag bruker et eller annet publiseringssystem (CMS) hvor brukere kan logge inn og administrere innholdet på siden. WordPress har blitt en stor aktør innen blant disse de siste årene. WordPress har et dedikert utviklingsteam som heter Automattic bak seg som har muliggjort den utviklingen systemet har hatt siden starten, og en av suksessfaktorene har nok vært at det hele tiden har vært gratis. Dette skiller i grunn ikke WordPress så veldig mye fra andre store publiseringssystemer som finnes der ute, men det har sikret dem en stor brukermasse hvor både komersielle og private aktører bidrar med utvikling temaer og utvidelser til systemet.

Det finnes to varianter av WordPress. En dot-com variant hvor du registrerer deg og siden er oppe på 1-2-3. Velger du denne varianten finnes det muligheter i grensesnittet for å kjøpe temaer og diverse andre tjenester som kan knyttes til siden din. Den andre varianten krever at du har tilgang til et webhotell med støtte for programmeringsspråket PHP og MySQL som databaseløsning. Heldigvis er dette mer som regelen å regne enn unntaket i dag når det gjelder webhotell. Velger du denne varianten får helt fritt spillerom til å tilpasse systemet til ditt eget bruk. Selv har jeg brukt denne siden versjon 1.5 tilbake i 2005, og mens noen sider jeg har laget har kommet og gått finnes det fortsatt noen som stadig lever i beste velgående, som denne.

Bygg ditt eget tema

For å kunne utvikle temaer til WordPress er det nødvendig med grunnleggende kjennskap til HTML og CSS, men også noe PHP er greit å kunne for å forstå hva som foregår i de forskjellige malene som utgjør et tema. WordPress har en veldig fin Codex på som gir nødvendig oversikt over hvilke funksjoner som kan gjøre hva, og hvordan de kan brukes. Finner du ikke svar på det du leter etter her så er Google ofte din venn. Dette fører oss dit jeg ville med dette innlegget. ThemeShaper som er nettsiden til temautvikler-teamet til Automattic har nå i November hatt en veiledning i 17 deler på hvordan et grunntema for WordPress kan bygges opp. Går du gjennom denne steg for steg så vil du ende opp med et brukbart tema som kan brukes til å bygge videre på. Jeg anbefaler alle som kan tenke seg å lære mer om hvordan temaer lages å se på denne steg for steg.