.
Praktisk e-publisering for alle Nr. 1/2015
10 webtrender i 2015 Side 4
Windows 95 på smartklokken Side 9
Bokser er fortsatt «in» Side 9
Webinar: 8 visuelle designtrender Side 10
Responsivt WordPress-tema
Webinar: Wonderlust – bildetrender Side 11
Typografi- og fonttrender Side 12
Responsive WordPress-temaer Side 13
Mest brukte nettleser og plattform Side 14
Vis produktkvaliteten i språket Side 15
90-tallet: Starten på noe stort Side 17 Siste side: Oogachaka-babyen
290-talls
bakgrunn
kreativweb nr. 1 Nr. 1/2015
Tegn og fortell. En fordel med å tenke «mobil først» i designprosessen, er at du må kutte i innholdet og bare ta med det som er vesentlig. Det er en god anledning til å kvitte seg med utlegninger om misjon og visjon og andre klisjeer. De som besøker nettsidene dine, ønsker å vite hva produktene eller tjenestene dine kan gjøre for dem. Vis og fortell dem det. Webtrender forandrer seg, men målet er alltid det samme: å presentere tekst, bilder, design og typografi på en helhetlig, brukervennlig og engasjerende måte. Dagens trendstikkord er minimalistisk og flatt. Store bilder og fullskjermvideoer er populært, og introsidene er tilbake. Tankene går til 90-tallets åpningssider. Den typografiske friheten er oppfriskende. Vi er ikke lenger bundet til systemfontene, men kan boltre oss i skrifttyper og -størrelser. Og gjett om vi gjør! Aldri har bokstavene vært så store som nå. Store bilder med stor tekst er i skuddet. Det ser vi ikke bare på nettsider, men også på Twitter. Google Fonts har per i dag nærmere 700 skriftfamilier å velge mellom. Det er bare å tegne og fortelle i vei. God lesning!
Solveig Hansen redaktør
Trenger du faglig inspirasjon i stikkordform? Se presentasjonene fra Yggdrasilkonferansen 2015. Foredragsholderne der kan det med digitale brukeropplevelser og interaksjonsdesign.
#kreativweb er en del av TransOnlines språk- og e-publiseringsblogg Redaktør: Solveig Hansen: solveig.hansen@transonline.no Forsidebilde: Salvatore Vuono, FreeDigitalPhotos.net Artiklene må ikke viderepubliseres uten tillatelse.
3
Trenden med store bilder og fullskjermvideo i bakgrunnen fortsetter i 2015. Pü funksjonalitetssiden videreføres responsiv design og evigrullende nettsider. Og vi ser smü nikk til 90-tallet. Ikke flash-flash, men datidens elementer i oppgradert versjon. 4
01 Responsiv design Stasjonære eller bærbare PC-er, smarttelefoner, nettbrett. Store skjermer, små skjermer. Innhold skal kunne vises på mange forskjellige enheter. Responsiv design vil si at innholdet automatisk tilpasses skjermstørrelsen, og du trenger bare ett designrammeverk for alle typer enheter.
fortsatt populært
Responsiv design er ikke et nytt konsept, og er for lengst etablert som en standard. I 2015 vil ytelsen vektlegges i enda større grad. Ytelse blir en designfunksjon, der det handler om å ta med bare de viktigste elementene og gjøre disse så smidige som mulig.
02 Én lang nettside Trenden med én lang nettside ser ut til å holde seg, og vi har vent oss til den lange rullingen. Det er flere fordeler med å ha alt innholdet på én side. På mobiltelefoner og nettbrett er det lettere å sveipe nedover enn å klikke på lenker. Hvis det er langt til bunnen av siden, bør du feste navigasjonsfunksjoner til kanten av skjermen og legge til lenker underveis som tar brukeren raskt til toppen av siden.
03 Fortsatt minimalistisk og flatt Er nettstedet ditt tilpasset mobiltelefon? Over 80 % bruker smarttelefon eller nettbrett fremfor nettleseren på PC-en. Den anbefalte designstrategien er «mobil først», det vil si designe først for mobil, for deretter å skalere designen opp for PC-skjerm. Den mindre skjermplassen på mobiltelefoner betyr at du må stramme opp innholdet og bare ta med det vesentligste. Flate ikoner og knapper. Flate ikoner: atibodyphoto, FreeDigitalPhotos.net5
04 Store bakgrunnsbilder Store bilder med stor tekst dominerer. Denne trenden ser vi også på Twitter. Bruk mørk tekst på et lyst bilde, og omvendt. Prøv en tynn skrift på et «tungt» bilde. Teksten trenger ikke å være midtstilt. Ram inn teksten. Dette er noen av iStocks tips for tekst på bilder. Foto: iStock.
05 Fullskjermvideo Vi liker bilder, og det er lettere å fortelle en historie med levende bilder. Videoer kan erstatte de tradisjonelle brosjyrene og fortelle din historie på en mer engasjerende måte, nesten som åpningssekvensen i en film. Tenk imidlertid på at automatisk lyd kan være irriterende. Et par eksempler: Rengjøringsfirmaet Eagleclean (øverst) bruker et videoklipp som varer bare noen sekunder. Når du åpner nettsiden, ser du en flekk på siden. Den blir raskt fjernet av en behansket hånd. Designfimaet Matter bruker en serie med tilsynelatende tilfeldig valgte videoer som viser ansiktet til ulike personer. 6
06 SVG-animasjon SVG (Scalable Vector Graphic) støttes av alle nye nettlesere, både for PC-er og mobilenheter, og øker raskt i popularitet. SVG-grafikk er vektorbasert og kan dermed skaleres opp eller ned uten at det går utover oppløsningen. SVG-grafikk gir dessuten mindre filstørrelse enn JPEG og PNG. SVG er lett å animere og brukes blant annet i logoer, ikoner, lenker og titler. Det finnes flere biblioteker for å komme i gang med SVG-animasjon, blant annet Raphaël, Velocity.js og Snap.svg. JavaScript-biblioteker for SVG-animasjon Veiledning i SVG-animasjon (SMIL) Introduksjon til SVG-animasjon SVG-animasjon i webdesign
@SaraSoueidan: Praktiske eksempler
07 Mindre koding
08 Webfonter, selvsagt
Webdesignverktøyene blir stadig smartere og mer funksjonelle. I dag kan du lage nettsider uten å skrive en eneste linje med kode. Se denne listen over utviklingsverktøy.
Google Fonts har i underkant av 700 skriftfamilier. Se disse eksemplene på bruk av Googles gratisskrifter.
09 Interaktiv webgrafikk erstatter infografikk Infografikk er praktisk til visualisering av informasjon. Tall og fakta kan gjøres forståelig med et øyekast. Nå er etterfølgeren her: interaktiv webgrafikk. Eksemplet til høyre viser hvor mye vann hver av oss forbruker hver dag. Pent og nyttig på samme tid. 7
10 Flørt med 90-tallet Nostalgi eller en ny retrotrend? Vi skal ikke se bort fra at det kommer en retrobølge der 90tallets estetikk får en ny vår i modernisert utgave. Mange av designelementene fra den gang er fortsatt i bruk, oppgradert til dagens flate og minimalistiske stil. Introsidene, for eksempel, som var så populære, er tilbake. Riktignok uten datidens Flash, men med store bilder og videoer. Infografikken fra WhoIsHostingThis.com nedenfor viser hvilke moderne alternativer som finnes til 90-tallets kitchy blundere.
Illustrasjon: twobeeat, FreeDigitalPhotos.net
Gå 90-talls, men styr unna klisjeene: Håndtrykket og sååå vellykkede og lykkelige mennesker. Bruk realistiske bilder. Det er mer troverdig og tillitsskapende. 8
Hvorfor? Fordi man kan. Hva gjør du hvis 90-tallet ringer og vil ha tilbake Windows 95? Corbin Davenport (16) installerte det 20 år gamle operativsystemet på en smartklokke. Det er mulig med en emulator for Android. Han viser hvordan på YouTube. Den praktiske betydningen er minimal. Win95-menyen fungerer, og du kan flytte musepekeren med fingeren. Det er omtrent alt du kan gjøre, men det er jo litt kult, da.
Grid, ruter, fliser ... la oss bare kalle dem bokser. Bokser er ikke noe nytt, og vi vil fortsatt se dem. Bokskolonnene kan lett organiseres og tilpasses alle skjermstørrelser. Bokser kan for eksempel brukes til generell informasjon på startsiden, med lenker til mer detaljerte sider. Designinspiration og Pinterest bruker bokser.
9
WEBINAR 10
❶ Dynamiske kvinner
iStock: 8 visuelle designtrender for 2015
❷ Letterbox-format ❸ Monokrome farger ❹ Menneskelig mangfold ❺ Førstepersonperspektiv ❻ Sanselig ❼ Superstillbilder ❽ Tekstbokser på bilder
Inspirerende webinar fra Getty Images Wonderlust handler om å oppleve naturen og verden, grandiost avbildet. Getty Images deler denne trenden i fire undertrender: Journeyman – en som reiser for å utforske verden og seg selv. Slike «ferdamenn» vil ikke være turister, men blande seg med lokalbefolkningen. De reiser gjerne alene. Natural majesty – majestetisk natur foreviget i vidstrakte landskapsbilder som gjør menneskene i bildet små. Bildene har ofte et malerisk preg, og fargepalettene er subtile. The sky's the limit – når det ikke finnes noen grenser oppover, er et dronekamera tingen. Det kan fange enorme panoramaer, omtrent som fra et helikopter. La det fotografere deg i skibakken eller mens du rafter, som vist i denne videopresentasjonen av dronekameraet Lily. Curiouser and curiouser – et raritetskabinett hører hjemme i denne kategorien for det unike, rare og spesielle. Alice i Eventyrland, også, som i år feirer 150-årsjubileum, noe som ikke går upåaktet hen i designkretser. Søk etter bilder med nøkkelordet «alice in wonderland» på iStock, for eksempel.
11
Designer Corrine Swartz i design- og utviklingsfirmaet Web Ascender har laget en liste over typografitrender, og gir gode tips om Googlefonter. En lett skrift gir et rent og moderne uttrykk. Skriften må være så stor at den er leselig, og passer for overskrifter og bildetitler. Swartz anbefaler lette Google-fonter som Roboto Slab, Open Sans og Wire One.
Foto: iStock.
På dette bildet brukes Alegreya Sans Light, strukket i høyden og med to punkts sperring.
Open Sans er en av de mest nedlastede fontene hos FontSquirrel.
Proxima Nova er blant de kommersielle favorittene. 12
13
Nettlesere: Tidlig i 2012 tok Google Chrome igjen Firefox som mest brukte nettleser. Chromes popularitet fortsetter å stige, og nettleseren brukes i dag av nesten 70 %. Tallene for Firefox går sakte nedover og ligger nå på ca. 21 %. Internet Explorer har falt fort de siste årene, og andelen er nå ca. 8 %, et tall som ser ut til å ha stabilisert seg. Safari og Opera har trofaste brukere, med ca. 4 og 1,5 %, tall som har holdt seg relativt i ro de siste årene.
Windows 7-andelen flater ut i takt med at andelen for Windows 8 øker, men fortsatt bruker over 50 % Win7. Win8 ligger på ca. 23 %. Tallene er hentet fra w3schools.com og Bilde: iStock per april 2015. gjelder 14
Plattform: Windows 7 benyttes av over halvparten av alle nettleserbrukere, og det er liten forskjell i tallene for de siste månedene. Windows 8 passerte 20 % på slutten av 2014 og er på stigende kurs. Andelen per i dag er ca. 23 %. Mac og Linux har lojale brukere og ligger på henholdsvis 10 og 5 %. Mobilplattformen nådde 5 % i januar 2015 og har holdt seg uendret siden da, men vil være interessant å følge med på. Skjermoppløsning: Praktisk talt alle, 97 %, bruker i dag en skjermoppløsning høyere enn 1024 x 768.
God tekst handler om innhold og presentasjon. Glem de tradisjonelle misjons-/visjonsutredningene, og fortell i stedet hva du kan gjøre for meg. Pirr meg.
språket
Best i tekst-prisene for 2014 ble utdelt på Best i tekst-konferansen i januar. Vinnerne var Kreftforeningen for Beste informative tekst, Min Butler for Beste egenbeskrivelse, og TrioVing for Beste selgende tekst.
Best i tekst er en pris som løfter frem gode webtekster i tre kategorier: Beste egenbeskrivelse («Om oss»), Beste selgende tekst og Beste informative tekst.
TrioVings åpningstekst er engasjerende og trekker raskt brukeren inn, sa juryen. «Når vi leser, føler vi både på behovet og på løsningen, og vi får lyst til å kjøpe tjenestene som beskrives.» God historiefortelling, med andre ord.
«Vi hjelper deg med å ekspandere din virksomhets online tilstedeværelse.» Det finnes flust med formuleringer av denne typen på nettet – oversatt fra engelsk, ord for ord, maskinoversatt uten etterredigering, eller kanskje skrevet av noen som behersker sitt fagfelt, men ikke har språklige kvalifikasjoner.
TrioVings vinnertekst starter slik:
Det er ikke så nøye, sier noen. Nei vel, men (potensielle) kunder er kanskje av en annen oppfatning. I verste fall sier de bare takk for seg og går til andre sider. Jo, det er nøye. God tekst er viktig både for kommunikasjonen og bedriftens image utad. Se på det som en investering i kvalitet og omdømme.
«Har du nøkkelskap i gangen? Nøkkelknippe i lommen? Ekstra nøkkel gjemt under en stein i busken eller hos naboen? Eller enda verre; kan en nøkkel ha havnet i uvedkommendes hender, kanskje fordi noen har mistet den – eller fordi du glemte å bytte lås etter forrige beboer. Tiden er inne for å gi nøkkelen fri ...» Veldig bra, TrioVing. Dette liker vi.
Vet du om en særdeles velskrevet nettside? Nominer den til Best i tekst 2015.
15
Dear Mr. Abbas,
Home
Brick in the Wall
TO KNIT OR NOT TO KNIT...
16
Courier-skrift. På murveggen «tagget» jeg menylenker i grafittiskrift og laget Hjemlenker i form av gateskilt. Heldigvis har jeg tatt vare på noen av bakgrunnene, alle fotografert med en tidlig utgave av et digitalt kamera og mekket i Photoshop. På forrige side ser du tre av dem: et palestinaskjerf, en murvegg ved Akerselva og en strikkesokk. Slik ser bakgrunnsflisene ut:
Noe av det mest krevende i webens tidlige dager var å få nettsidene til å se like ut i alle nettlesere, og vi brukte tabeller som formateringsverktøy. Så kom CSS, og det var på tide å bytte ut tabellene med «floating DIVs», men fortsatt måtte det en del flikking til før resultatet ble bra både i Internet Explorer, Firefox og Opera. Nå er det responsiv design som gjelder. Tekst: Solveig Hansen Jeg er ikke spesielt tilbakeskuende, men arbeidet med denne utgaven av #kreativweb brakte 90-tallet frem i lyset igjen. «Sære bakgrunner, introskjermbilder med overforbruk av Flash, ukritisk bruk av innebygde MIDI-musikkfiler.» Slik pleier jeg å oppsummere 90-tallets webdesign. Var det virkelig så ille? Vel, det var mye blinkende lys og mange effekter. Gjerne alt på én gang. Jeg hadde dilla på bakgrunner. Alt kunne brukes: blondegardiner, duker og grytekluter, klær, gulv og tapeter. Den norske ambassaden i Washington brukte et tradisjonelt lusekoftemønster. Selv tok jeg raskt i bruk murbakgrunner, gjerne kombinert med
Jeg er fortsatt imponert over at skjøtene mellom flisene ikke vises på skjermen. Når julen nærmet seg og jeg pyntet opp hjemmesiden med kristtorn, lys og snøfnugg, klasket jeg opp juleevangeliet på murveggen – i Courier, selvsagt. På 90-tallet var det populært å bygge inn MIDI-musikkfiler på nettsider. Jeg brukte «Obladi Oblada» og 60-tallets sjefsklinelåt «A Whiter Shade of Pale». Etter hvert ble det vanlig å bruke et introskjermbilde, forløperen til de senere Flash-baserte åpningssidene. Min forside var svart. Musikken var ragtime. En animert danser kom inn fra nedre høyre hjørne, danset en liten stund, forsvant ut og kom inn igjen. Så mye for nostalgien. Jeg er glad for at utviklingen har gått i retning av designmessig rene og funksjonelle løsninger som fungerer på alle plattformer, men det var gøy før også. Ikke alltid like pent, men artig, frustrerende og lærerikt. Si hva du vil om 90-tallet, men det var da det startet. 17
Et gufs fra 90-tallet.
Oogachaka-babyen, som danser til tonene av «Hooked on a Feeling», den med Ooga-Chaka, Ooga-Ooga Ooga-Chaka, Ooga-Ooga Ooga-Chaka. Les historien på Wikipedia.
kreativweb
TransOnlines språk- og e-publiseringsblogg 18