2014 – året då webbdesign slutar imitera

Retrotrenden har inte tappat förmågan att locka och engagera både tidningsläsare och webbanvändare. Men vad kommer efter det?

I december 2012 pratade vi på en julkonferens om hur formgivning av digital kommunikation allt mer sällan handlade om en webbanpassad version av grafiska profiler som primärt är framtagen för print. Tidigare var det mer eller mindre legio att ta företagets profilfärg och göra gradients från den för att skapa navigationsbalkar eller knappar med läckra 3D-effekter. Alternativt kunde man lägga till skuggor eller rundade hörn, stekhett när CSS3 var nytt. För utan 3D förstod ju knappast användare att det skulle kunna gå att klicka på länken – eller hur?

Året som följde, det vi nu betat av, visade vägen mot en ny ordning. Beställare lät byråer skapa betydande delar av identiteten med det digitala uttrycket som original – kampanjer för TV och print med avstamp i webbformen. TV-reklam var ju webb-TV-budskap, inte sällan med det direkta målet att locka till klick. Även printkampanjer gick ut på att locka till webb-shoppen eller annan aktivitet online. Alla vägar bär tillbaka till konvertering – på webben.


Jag tycker att det, mot den bakgrunden är spännande att följa nästa våg av digitala gränssnitt. Det började på allvar runt halvårsskiftet, i somras. Nu när 2014 tickar vidare är det en massrörelse på webbyråer. Gränssnittsdesign som fullt ut är så att säga native. Form som står för att den är digital. Tillsammans med värdeord som varm, aktiv, inkluderande eller ung nämns clean och flat & thin.

platt-kalkylator
Före och efter. När Apple lanserande nya IOS 7 var alla 3D-effekter och flirtar med offlinevärlden borta. Som exempelvis i den nya kalkylatorn.

Vid en snabb anblick reflekterar man främst över att stilen känns nutida och frisk. Eftertanke leder in på intressantare tankebanor. Det här är antagligen banbrytande. Vi har slutat imitera den fysiska världens knappar i interaktionsdesign. Apparaters knappar med upphöjda former och nedtryckta läge behövs inte. Vi har slutat imitera ytstrukturer i profilbärande element. Sådana metaforer behövs inte längre.

Designtrenden flat & thin är en utveckling, men också ett mode, farligt så till vida att den riskerar göra väldigt många projekt både platta, tunna och väldigt likriktade. Det blir en stor utmaning att hitta nya sätt att använda de här nya referensramarna och fylla dem med personlighet och ett företags anda.

Flat & thin kalender
Platt och tunn kalender. Den omsorgsfullt valda typografin hjälper färgskalan att sätta en personlig känsla.

 

flipboard-flat
Flipboard aggregerar mina utvalda nyheter och sociala medier i en enhetlig form som absolut kan representera trenden.

 

Nokia-platt
Platt, tunt opperativsystem som inte skäms över att vara digitalt.

 

kitkat parallax design

Parallax är ett kul begrepp för ännu roligare och händelsefylld navigation och scroll. Det är ett grepp, främst utfört i frontend med javascript som ger nya möjligheter att berätta avsändarens historia trots att var och varannan sajts grundläggande interaktion stöps i samma bootstrap-mall. Kit Kat är ett exempel på hur det kan göras kommersiellt.  New York Times experiment med artikeln The Jockey är ett ypperligt exempel på hur väl det kan fungera redaktionellt.

 

handritatHandritat är den moderna webbdesignerns surdegsbröd och långkok. Lyx och finess är att ha råd, tid och kunskapen att mejsla in äkta handritade detaljer. Antingen som på bilden i en annars stram digital och platt stil – eller mer utstuderat, rakt igenom kladdat på papper, i stil med de som Smashing Magazine visade i det här inlägget.

pulse
Även i en redesign av en tidning känns det fullt rimligt att dra till med ett digitalt on-line-manér.  Hårtunna linjer med svagt rundade hörn.


Sydveds nya look

Det här var ett av mina roligaste uppdrag någonsin. Skogsnäring är svensk basnäring. Att få vara med att skapa den nya digitala kommunikationen för ett sådant företag är en stor ära, och svårt.

I projektet där jag är art director såg vi snabbt att Sydveds nya webb behöver driva trafik, ranka högt på sökmotorer och vara en bas för spridning av kunskap kring vård av skog och mark. Formen som startar i företagets grafiska profil är här utvecklad för att effektivt inspirera och driva besökare in i sajten.


Målgruppen är markägare med skog. Personer som inte nödvändigtvis är aktiva skogsbrukare eller experter på skogsbruk. Sajten har mycket mark (ursäkta) att vinna mot konkurrenter genom att vara bäst på innehåll.

Visst är det viktigt med företagsinformation och att många loggar in och använder alla tjänster som finns i inloggat läge. Men de som ska använda sajtens personaliserade tjänster hittar in ändå. Designen fokuserar i stället på innehållsflöde, inspiration och skoglig livsstil.

Företagets grafiska profil har på ett diskret sätt utvecklats i webbformen som är framtagen  för att fungera online. Jag tog också fram en ny färgskala för webbkommunikationen och en typografi som är mycket läsbar både på fullstor skärm och i mobiltelefoner.

Och det här projektet har jag arbetat tillsammans Martina Peterson som jag även utvecklade Tasteline tillsammans med mellan 2000 och 2008. Martina står för koncept och projektledning och har guidat företaget fram till lanseringen i mitten av december. CMS är Sharepoint 2013.

Utforska den nya webbplatsen här »

sydved_artikelsydved_minskog

sydved_loggin


Representativ start för nystartat företag

The MeetingCompany är en ny reseaktör som erbjuder ett unikt sätt att köpa och arrangera företagsresor. Här står beställarens förväntningar i centrum. Färdiga tjänster och hotellpaket som man är van att se på traditionella resewebbplatser har fått träda tillbaka till förmån för den personliga dialogen med en kunnig konsult.



Bakom satsningen står Tiziana Saraceno, som med över 25 år i branschen har ett unik kontaktnät som tar resenärer långt från de vanliga rutterna utan att någonsin göra avkall på kvalitet och komfort.

I projektet som tog två veckor från startmöte till lanserad sajt har jag gjort webbplatsens innehållstrategi, i tätt samarbete med kunden. Jag gjorde själv all formgivning, systemytveckling och det responsiva gränssnittet.

Titta själv på Themeetingcompany


En webb kommunicerar för den internationella koncernen och lokalt i varje land

När Bisnode uppdaterade den digitala närvaron valde man att arbeta med Söderhavet och Nansen. Söderhavet tog fram koncept och form. Nansen skapade den nya webbplatsen som blir den växande företagsgruppens digitala representation och säljstöd.


På enskilda marknader kommunicerar webben produkter och lösningar.  Övergripande – och närvarande på alla europeiska marknader har koncernen fått en ny digital kanal att snabbt nå ut med börsinformation och karriärsmöjligheter.

Den nya sajten som är responsiv är byggs med Episerver 7. I projektet var jag projektledare och scrum master.


Jag är Gourmetpappan

Ny blogg

Sedan våren 2013 bloggar jag om kampen för att banka in lite matintresse i mina egna barn. Hur går det? Det är en utmaning. Att som förälder servera barnen mat som är bra, med kvalitativa råvaror samtidigt som det tilltalar smaklökar inställda på falukorv och makaroner.


Förmodligen gör man det bäst genom att engagera barnen i allt runt måltiden – den kan ju i sig gå lite väl fort när man har bråttom tillbaka ut i leken. Jag tror att det är i mataffärens delikatessdisk, på marknader och vid spisen man som förälder kan locka barn att testa nya smaker. Mat som man köpt själv, blockat själv eller varför inte, fångat själv är roligare att prova än när pappa gjort en sås med ett konstigt namn.

I bloggen Gourmetpappan.se antecknar jag recept och dokumenterar min egen kamp men att väcka ett intresse för mat som ska hålla och utvecklas under resten av mina barns liv.

 

Gourmetpappan.se är byggd under några kvällar våren 2013. Än en gång har jag expermenterat med att formge en webbupplevelse utan att använda Photoshop eller andra program för att skapa skisser som sedan ska göras om som webbkod i html och css.


Mobil nyhetswebb för Tandläkartidningen

En mobil version av
Tandläkartidningen.se. Med just det man behöver av den annars
omfattande och stora webben som tidningen erbjuder. Läsare som på
språng fiskar upp telefonen ur fickan är främst intresserade av
fyra saker från Tandläkartidingen. Nyheterna, har det hänt något
nytt? Reportagen och naturligtvis platsannonser och radannonser –
dvs skvaller i branschen. Jag gjorde formen efter att ha arbetat
fram den här strategin tillsammans med tidningens
redaktion.

Den vertikala rytmens magi

Några slides ur en föreläsning jag nyligen höll. Man ser många, otroligt snygga och välgjorda webbplatser. Med @fontface och CSS3 har vi i min mening tagit webbdesign till samma nivå som tryckt typografi. Något många helt missar och som jag gärna ser mer av är vertikal rytm.


Vertikal rytm tar vid där 960-grids kramats ur till sista droppen. I bok- och magasinformgivning är baslinjeraster en självklarhet. Samma sak går att göra på webben. Med en textrad på 12 och en radhöjd på 18 pixlar som bas kan man bygga ut ett system där alla marginaler och ytor, till och med bilder följer samma logik. Samma tal.

När man vet att text linjerar mellan spalter 2500 pixlar ner på en sajt. Då vet man att besökaren upplever sidan som harmonisk och lättläst. Matematik kan bli väldigt vackert.


Redesign av Accent

Accent fick en ny nyhetswebb. Tidningens chefredaktör Pierre Andersson hade inför projektet många bra idéer. Mitt inledande arbete var därför att hjälpa Pierre och redaktionen välja fokus och strategi, våga välja vad man ska satsa på och vilka idéer som ställs åt sidan.

Mitt jobb i den här typen av projekt är ofta att ta en serviceroll, att coacha kunder sortera redan bra idéer, tillföra nya baserat på min erfarenhet och kännedom om målgruppen/läsarna. Det här är kundens sajt och kundens visioner, vårt bidrag är att färdigställa och förhoppningsvis överträffa kundens mål samt hjälpa beställaren genom förändringsarbetet.

Jag ledde förstudien när vi under workshops tillsammans med redaktionen arbetade fram koncept och struktur. Just våra datorfria möten där alla, från redaktörer till webbutvecklare deltar och bollar idéer och lösningar på lika villkor är en viktig del i den metod vi utvecklade på W4.

Efter arbetet med Accentmagasin.se tycker jag att det är tydligt hur värdefulla de här samlingarna är för slutresultatet. För den nya webbtidningen har vi utvecklat just de
verktyg redaktionen behöver för nyhetsarbetet. För att varva snabba nyheter med eller utan bild med fördjupande reportage med många moment, bildspel, videoklipp och paket med flera sammanläkade artiklar.

Val av avdelningar, navigation och innehållsarkitektur är till stor del baserat på hur det bäst presenteras för sökmotorer och nytillkomna läsare. För att få nya besökare att stanna och upptäcka mer på webbplatsen. Den nya webbtidningen utvecklades av W4:s Henrik Sundberg. Adam Wihlke AD, stod för den grafiska formen.

Faceblogg

Design You Trust är en kollektiv blogg med det trevliga upplägget att alla är välkomna att öppna ett författarkonto och börja bidra med bilder på design som inspirerar. Medlemmarna, eller bloggarna rör sig obehindrat mellan Pinterest, FB-sidan och en traditionell webbadress.


De postar helt enkelt bilder i det forum som ligger närmast till hands för stunden. Allt syns så klart i tidslinjen på Facebook.com/designyoutrust. Sidan har 242 000 likes, dvs läsare och det säger väl allt. Det här är ett bra, men inte det enda exemplet på hur stort genomslag man kan få genom att flytta ut sin blogg till Facebook.

Till skillnad från den traditionella webbsidan så söker innehållet på Facebook upp läsaren – lite som en tidning, men ändå inte.


5 skäl att fixa en mobil webb – nu

En snabb blick i Google analytics kan räcka för att argumenten ska presentera sig själva. Men om inte det är tillräckligt övertygande så drar drar vi igenom läget. Fem punkter, fem skäl att ge din sajt ett mobilt tema intill det stora för stationära datorer – eller att göra om gränsnittet med responsiv design direkt.


Nyhetswebb för New Yorks myror?

  1. Google är er främsta marknadsplats, vida mer välbesökt och sökvänlig än eller Appstore. Det är de enskilda artiklarna, inläggen eller produkterna som visas först i Googles skyltfönster. I vissa fall sajtens startsida, men hur som helst – det är webbplatsen kunderna först får tag på. De enskilda sidorna har rubriker som motsvarar vad folk söker efter.
  2. En snygg app ersätter inte det mer grundläggande behovet av att företaget måste fungera, synas och se bra ut på webben – oavsett vad besökaren har för apparat.
  3. Andelen läsare till er vanliga webbplats är snart lika stor från smartphones som från vanliga datorer. Vi på W4 har exempelvis sett att en av våra tidningskunder redan tidigare i vintras hade en tredjedel av sina besök från mobiler. En annan kund ser en rasande snabb förflyttning av användare till iphone. Från utgångspunkten under 10% av användarna från telefoner 2009 ökar mobilsurfandet nu stadigt med 350 till 400 % per år. Mobiltrafiken kommer för dem att växa förbi trafiken från fasta datorer under början av 2013. Pytteskärmen är den första skärmen – numero uno. Mediaförmedlarna vet redan detta och tar fram kampanjer som ser bra ut på mobiler i första hand, på gammelwebben i andra hand.
  4. För att från en telefon läsa text på en fullstor webb behöver användaren zooma in på textspalten vilket leder till att man tappar känslan för var man är på sajten. Det är allvarligt. Men inte lika allvarligt som nästa problem. Det leder även till att annonser som man sålt med löftet till annonsören att de visa för samtliga besökare, ja de annonserna levereras endast till en del av besökarna.
  5. En mobil webb är inte dyr. Det behöver inte kosta mer än 30 000 kronor om man utgår från det viktigasteste; kontaktuppgifterna, företagets kartposition och ett nyhetsflöde. Ett komplett mobiltema med mer komplext innehåll när det appliceras på en redan fungerande sajt blir sällan dyrare än 70-80 000. En bråkdel av priset för utvecklingen av en fullstor webbplats.

Det är bråttom för dem som inte börjat, men det här är lätt att fixa och man får mycket för pengarna om webbplatsen sedan tidigare är byggd med öppen källkod. Projekten tar inte mer kalendertid än 1-3 veckor. I WordPress och Drupal kan man utgå från den befintliga tekniken och låta en större betydligt större del av innehållet följa med till mobilwebben utan någon egentlig vidareutveckling – och därmed ge läsaren en komplett nyhetswebb.


Redesign på 5 timmar

Ny webbdesign och i det närmaste total make-over på 5 timmar. Jag har gjort om min blogg, den här sajten och passat på att testa nya grepp som gör processen effektiv:

  1. CSS3 och ett minimum av bilder för grafik och visuella effekter.
  2. Ta bort – snarare än att skapa och lägga till nytt.
  3. Utan Photoshop – frihet och direkt resultat utan mockups.

Det som är riktigt intressanta att jag helt hoppat över Photoshop. Många webbformgivare pratar om att göra det nu, men få gör det i praktiken.
Skipping Photoshop – you can’t click a mockup 
Designing in Photoshop vs designing in Browser
Should we design in the browser from the start?

Jag kommer ofta på mig själv med att formge stora delar av ett projekt direkt i webbläsaren. När man väl börjat strukturer designen med typografiska regler blir vägen över Photoshop eller Illustrator (inget av dem använder formatmallar) blir helt enkelt för lång och krånglig.

Så vad händer om man inte ens öppnar ett designprogram? Inte ens i början av processen. Det är värt att testa. Jag testar att göra det med min egen blogg för säkerhets skull, här är jag själv kund.

Längre ner i inlägget visar jag en logg över arbetet, timme för timme.

Och jag kan redan nu avslöja min slutsats.

Formgivning direkt i webbläsaren fungerar. Jag kan rekommendera det för en mindre företagssajt eller för en större sajt där formgivaren och kunden redan har en upparbetad relation, för det kräver ett nära samarbete. Kunden får större inblick i arbetet och behöver lägga mer tid än annars på att delta i redesignen.

En intressant fråga: Lägger man mer av kontrollen hos formgvaren om man hoppar över mockups? Ja, och nej. Momentet där formgivaren sätter ihop ett visuellt scenario, en ögonblicksbild ur användandet av sajten. Det momentet försvinner helt. En beslutspunkt och ett så kallat proof of concept uteblir. Men i gengäld medföra det att kundens input kan testas mer direkt än när den levereras som feedback vid en visning av en photoskopskiss.

Man sparar helt klart tid. Det finns en risk att man tappar greppet om helheten, visuellt. Men den risken är liten i och med att man kan hålla en högre takt. För med CSS och Firebug får man betydligt snabbare gensvar på skärmen än vad man får av ett Designprogram. Det vågar jag lova, jag arbetar helt obehindrat i både CSS och Photoshop. Faktum är att med enbart CSS går det går helt enkelt fortare att överföra bilden i huvudet till bildskärmen.

Från idé till färdig sajt på 5 timmar

Timme 1

Idén föddes ute i trädgården i går eftermiddags. Med en bild på husets altan. Nej, inte för att lägga plank som bakgrundsbild till hela sajten. Det får vara nog med tapeter bakom webbplatser ett tag nu. Bilden användes enbart för sin färgskala. Med iPhoneappen Color Stream plockar man blixtsnabbt ut en harmonisk färgskala ur ett foto. Färgerna kan sedan exporteras som CMYK, RGB eller HEX (webbfärgkoder).

OK, paus i arbetet. Barnkalas, middag med familjen och läggning med sagoläsning, Robin Hood. Timme nummer ett fortsätter:

Senare på kvällen kollade jag lite på nya Typsnitt på Typekit.com. Se där! Acta har jag inte upptäkt tidigare. Ser mysigt ut. Eftersom jag visste att jag skulle få lite tid över dagen efter så sparade jag undan de två ingredienserna. Den nya paletten, altanen och den nya fonten Acta. De här två ska bli en design nästa förmiddag.

Timme 2

Jag började med att använda de nya HEX-koderna, kastade helt enkelt in dem rakt i sajtens CSS, utan att passera Photoshop. Den ljusaste nyansen fick bli bakgrund till sajten. Varför inte till allting, den är ju bra. Färgen får vara bakgrund till allt, inramning, innehåll, sidospalter. En färg.

Med en enda bakgrund är det viktigt att hålla isär saker och ting med linjer. Eller är det verkligen det? Eftersom sajten sedan tidigare redan har en väl uträknad rytm i alla avstånd, radhöjder och marginaler så borde det väl gå att läsa av dem med blicken utan hjälp av streck? Jag tog bort alla linjer.

Före: En Slab för rubriker och en lila/start bakgrund bakom en vit innehållsyta. Rätt snygg lila färg faktiskt, med tapetmönster franska lijlor. Lite synd att slänga, sajtens gamla bakgrundsfärg återanvänds som sidfot.

Tidig skärmdump efter ca 2 timmar. Nytt rubriksypsnitt Alwyn new rounded är ljust och har en unik rundning, titta på t ex tecknet ”W”. Nu har bakgrundsfärgen ersatt den tidigare strukturen med sajtinramning och en centrerad vit innehållsyta. Nästan alla linjer är borta. Men de svarta taggarna under artiklarna och upprepningen av bilden på samma twittrare drar blicken från viktigare saker på sajten.

Tidig skärmdump efter ca 2 timmar. Nytt rubriksypsnitt Alwyn new rounded är ljust och har en unik rundning, titta på t ex tecknet ”W”. Nu har bakgrundsfärgen ersatt den tidigare strukturen med sajtinramning och en centrerad vit innehållsyta. Nästan alla linjer är borta. Men de svarta taggarna under artiklarna och upprepningen av bilden på samma twittrare drar blicken från viktigare saker på sajten. 

Timme 3

Typsnittet som sent föregående kväll gav idén till en ny form får sin plats. Inte som rubrikstil för inlägg, det runda, ganska mjuka typsnittet skulle inte se tillräckligt ”klickigt” ut som rubrik till nyheter/inlägg. Men det sitter fin som stor fläskig vinjett – för exempelvis Portfolio till höger på sajten.

Bilderna för alla tidigare projekt flyttar in i en enhetlig inramning, valet blir en dator. I den nya sammanhållande inramningen gör det inget att de spretar i stil och format.

Timme 5

Avslutningsvis går jag över detaljer som inte störde intrycket speciellt mycket men som ändå kunde förbättras. Raden med datum för publicering, taggar, kategorier och kommentarer är inte bara en service för sitt innehåll. De ger även läsaren en grafisk markör som tydligt säger att något slutar och något annat börjar. Men raden kunde tidigare bli två rader när den fylldes med metadata. Nu är allt som rör kommentarer och kategorier borta. Kategoricering känns ganska förlegat på nätet och kommentarer sker inte under artiklar på sajter utan andra sajter, med en länk till artikeln. Bort med bruset.

Färdig, för den här gången.


Mötesplats för den silvriga generationen

När tidningen Veteranen och Sveriges pensionärsförbund SPF köpte communityt Silvergenerationen fick jag och W4 i uppdrag att ge det ny design, nytt namn, ny logotyp och en vässad, mer snabbladdad teknik.

Sajten som tidigare gick under namnet Silvergen.org vidgar Veteranens digitala räckvidd och kompletterar livstilssajten med en livlig medlemsaktivitet och ett potentiellt innehållsutbyte som blir spännande att följa.


Silvergenerationen.se är ett satellitvarumärke på egen adress och driver in ny trafik till Veteranen.se. Communityt hade tidigare namnet silvergen.org och hade under flera år vuxit ut till en livskraftig och aktiv mötesplats

W4 har gjort en försiktig redesign av mötesplatsen med ny logotyp, förenklad webbadress och snabbladdad teknik. Adam Wihlke gjorde den nya loggan. Jag gjorde resten av designen och kodade den i CSS. Redesignen är som sagt mycket försiktig. I stort har vi låtit medlemmarnas verktyg vara som de varit.

Få saker har lika stark negativ effekt i ett community som en redesign där man flyttar runt knappar och funktioner för publicering av inlägg, internmeddelanden och profilsidor. Den typen av redesign skulle sannolikt ha lett till en medlemsstorm. Fråga Facebook. Du kan titta på framsidan på nya Silvergenerationen.se här, för att se mer behöver du bli  medlem.


Webbtrender 2012

Det kommande året. Så som vi kommer att minnas det om ett år.


Responsive design

Det finns inte en standardstorlek på bildskärmar. Det har aldrig gjort det. Men aldrig har skillnaden varit större. Samma webbdesign kan beskådas på
en bildskärm som ryms i fickan – eller på en Thunderbolt med 2560 x 1440 pixlar, 27 tum! Men det är lugnt. Nu kan vi göra designen helt elastisk. Responsiv design är inte ett grafiskt uttryck, det är en en praktisk användning av den visuella designen.

Retro

När amerikanska formgivare (så väl som musiker och filmskapare) förra året svängde av på memory lane för att mysa i minnen från den tid då USA regerade över välden och dess populärkultur – då har tar vi efter och ger våra verk en lätt bakåtslickad anstrykning av 50-tal eller en pigg anspelning på något pastelligt från 80-talet. New York Times redesign av tidningen hämtade inspiration från det egna arkivet och ser i dag ut som samma tidning på sextiotalet.

Handritad grafik

Webbformgivarens surdegsbröd eller långkok om man vill. För den stressade småbarnsföräldern med höga sociala ambitioner är höjden av lyx att visa att man har fritid. På samma sätt är alla formgivare i smyg avundsjuka på dem som kan rita på riktigt, alltså inte i illustrator. Idag ser de mest exklusiva sajterna ut som en rätt tidig tuschskiss, eller ett punkigt skivomslag från 78.

Progressive enhancement

Man kan säga att det är som med ett par sköna polariserande solbrillor. Ju bättre webbläsare du skaffar dig, desto vackrare blir webben, för dig alltså. Vad andra ser beror på vad de har för browser. Nu kan vi formge webb med vilket typsnitt vi vill. Vi kan fixa snygga övertoningar, skuggor och effekter som runda, mjuka hörn. Det ser helt enkelt fantastiskt ut, i en bra webbläsare. I äldre webbläsare faller fernissan av, gradvis, tills sajten ser ut som webben gjorde runt 2004, dvs Internet Explorer 6. Jag pratade med en kund idag. Det han sa talar sitt tydliga språk. Förr ett år sedan då du designade vår webb hade vi typ 90 procent användare med Internet Explorer. Nu är det under 40 procent. Jeffrey Zeldman brukar säga något i stil med “the rise of mobile and the dominance of WebKit-powered smartphones over traditional desktop web browsing is convincing even die-hard skeptics to embrace progressive enhancement, HTML5, CSS3, and other tenets and aspects of standards-based design”. Och lägger till att även gamla Microsoft försöker hänga med och “rush to embrace the shiny new”.

Feta bilder

Nedladdningstid och optimerade bilder känns plötsligt väldigt mossigt. Bild är ju faktiskt bäst i RGB. Gör som de gör på Fotografiska museet i Stockholm, fyll skärmen med sköna foton.

Feta fötter

Sidfoten på en webbplats är inte längre en länkkyrkogård dit vi förpassar länkar vi är osäkra på om vi borde spara eller slänga. Foten början på fortsättningen av besöket på sajten. Foten är där besökare beslutar sig för att dra, eller stanna kvar. Radera genast metaforen sidfot som den används för att beskriva sista raden på ett brevpapper. 2012 kan sidfoten vara din viktigaste innehållsmeny.

TV + Sociala medier

TV-bolag har fortfarande mycket pengar. Sociala medier-företag börjar få finansiella muskler på allvar. De kommer att finan varandra. TV-serier och underhållningsprogram bakar in allt fler inslag från sociala medier, allt djupare in i programkonceptet. Till OS i sommar kommer med all säkerhet playkanalerna att ge Facebookkommenteringen och tittarnas munhuggande lika mycket kvadratyta på skärmen som tv-rutan med själva spjutkastaren.

Klistrad navigation

Det har aldrig varit lättare att scrolla. Dra till lite extra hårt med pekfingret och då swoschar iväg 2-3 meter längre ner på en sajt. Touch screen på luren, touch screen på paddan och till och med en inbyggd touch screen på datorn som nu helt har ersatt den konstiga scrollratten. Då kan det vara soft med en navigation som tryggt stannar kvar, gärna som ett halvtransparent lager över det snabbt förbiforsande innehållet.

Mobilsajt – inte app

Få saker i är mer irriterande för en internetanvändare än att bli utslängd ur telefonens webbläsare och intvingad i appstore för att ladda ner ett till program. Framför allt när det blir uppenbart att appen tycks vara en av alla de appar som pressats ut i vår gemensamma cyberrymd för ”alla andra har ju en”. De kommande åren kommer vi att lägga utvecklingsresurserna på en långsiktig lätt-tillgänglig, vettig version av hela innehållet i stället för att tävla om två tre dagar i rampljuset i appstore. Såvida inte app-idén inte är helt fantastiskt bra.

Klassisk typografi

Nu när det faktiskt går att använda tusentals typsnitt, och med ful precision sätta kerning och radavstånd osv. Ja, då kommer en lång rad formgivare att gå bananas. Kör hårt säger jag. Med risk för att användarens glöms bort någon gång ser vi fram mot nytt ögongodis och hoppas på att få häpna över vad som går att göra nu för tiden.


Ny mogen livstilswebb

Förutsättningarna på nätet ser olika ut för olika verksamheter. För Veteranen var den stora frågan om seniorer alls bryr sig om en webbtidning. När tidningen Veteranen stod inför att göra om tidningens webb tillsammans med W4 funderade vi mycket på hur vi bäst kunde nyttja digitala medier.

Veteranen rider på en framgångsvåg och papperstidningen var vid tiden då W4 arrangerade redaktionens första webbworkshop korad till årets tidskrift. Den nya utmaningen låg i att stärka tidningens affär på nätet och vi insåg snabbt hur stor roll webbtidningen kan spela för den bakomliggande pensionärsorganisationens nyrekrytering.


40-talister är generellt sett inte lika pigga på att gå med i organisationer och föreningar som sina äldre syskon och kusiner. En utmaning, men en sak är säker; det digitala livsstilsmagasinet Veteranen.se är en väldigt bra första kontakt med Sveriges pensionärsförbund. Och hur var det nu med internetanvändandet? Svenska seniorer är på nätet. Är man född 1945 så tillhör man a) en av de snabbast växande grupperna facebookanvändare. b) i Apples absoluta toppsegment för försäljning av nya iPads.

I projektet var jag Art director, webbstrategisk konsult, formgivare och jag kodade det mesta av sajtens CSS.

veteranen_spel

veteranen_merläsning


Dagens Samhälle vann pris för Årets innovation

Man kan vinna priser för många saker. En av de mer udda vinsterna måste vara när Dagens Samhälle lät bli att göra en webbtidning. Det kan låta märkligt‚ men det här var en bra idé från början till slut. Ett modigt beslut av tidningens ledning och en utmaning som fick oss på webbyrån att gå igång på alla cylindrar.


I samma stund som nyhetswebben stängdes påbörjades arbetet med Dagens Samhälle Debatt, en ny webbtjänst som på ett tydligt sätt kompletterar tidningens affär och fungerar som ett forum för samhällsdebatten. W4 gjorde formen och innehållsstrukturen. På tidskriftsgalan den 9 november vann Dagens Samhälle Debatt priset för Årets innovation. Så här löd juryns motivering:

”Konsten att hitta en ny vinkel på ett gammalt problem är den klassiska utmaningen för journalisten. Vinnaren i Årets Innovation har på samma sätt vänt och vridit för att hitta en ny vinkel på sig själva. Genom att ifrågasätta, våga och sluta gå i vältrampade hjulspår har årets vinnare brutit ny mark och hittat både nya läsare och ett nytt självförtroende. Årets vinnare är Dagens Samhälle.”

Mats Edman och Staffan Hällerfors tar emot priset från Lars Adaktusson på Tidskriftsgalan.


Annonssäljare / Annonssäljare: Samma namn – två olika yrken

Jag var på tidskriftgalan förra veckan och hörde gång på gång att nä, det inte går att tjäna pengar på bannerannonsering. Det finns inga pengar på nätet. Visst låter det märkligt? Vi skapar kvalitativt innehåll som älskas av miljoner. Men det har alltså inget värde? Naturligtvis har det ett värde.


Tongivade tidskriftchefer säger att de har försökt och bränt stora summor. Jag förstår dem och betvivlar inte att många har gått back i sina webbäventyr.

Men det låter ju rätt konstigt när man säger att det inte finns pengar i det som är Sveriges tredje största annonsmarknad, i tusenlappar räknat (Mediebarometern för September 2011).

Omsättningen för annonser på webben är inte uppe i nivå med TV och de rikstäckande dagstidningarnas volym. De är långt före. Men Internet är ungefär dubbelt så stort som Fackpress och Populärpress – tillsammans.

Jag vet av egen erfarenhet att det går att tjäna stora pengar på enbart annonsering, även på nätet. Man kan sedan tjäna ännu mer om man, som många gör just nu, utökar banneraffären och bygger fler intäktsmöjligheter kring sin webbtrafik. Tidskriftsförlag måste lära sig att tänka mer som andra företag.

Olle Lidbom sade på Tidskriftsgalan 2011 att tidningar som klarar sig bra är mindre myskopysko och mer McKinsey. Olle pratade om magasin. Men orden har bärkraft även på webben.

Det går att göra vinst med enbart banners. På Tasteline.com kunde vi på min tid, och de kan fortfarande sälja annonser, till ett bra pris. Nyckeln är att dels nå en trafiknivå som ger annonsören räckvidd 50 000 besökare i veckan. Dels satsa på annonssäljare som är fostrade i att sälja webb.

Annonsering på tidingswebbar är Sveriges tredje annonsmarknad efter dagstidningarna och TV. Men det är ett fåtal webbtidningar som tjänar de stora pengarna, de som investerat, lyft traffiksiffrorna och utbildat säljkåren.

På Tasteline gjorde vi den resan 2006. När de stora mediaköparna visade tecken på att på allvar ta med Internet i årsbudgeten för annonsering. Före hösten 2005 fick internetsäljare tävla med reklamradio om köparnas sista tjugor. Efter den vintern var allt förändrat.

I det läget var vi proaktiva och bytte strategi, från snyggt digitalt matmagasin med betalande besökare till räckviddsambitioner med daglig uppdatering. Mer kvälstidning, högre tempo och mindre myskopysko. Vi ökade trafiken med 400% och blev ett måste för livsmedelssveriges annonsköpare.

Fint – då lägger vi annonserna på webben i stället för i tidningen och fortsätter som vanligt. Någon enstaka svensk dagstidning har till och med planer för hur webbupplagans annonsintäkter inom några år ska bära båda editionernas totala omsättning – respekt!

Men, fullt så enkelt är det inte.

En säljarorganisation som är specialicerad på magasinannonser har i bästa fall en del av det kontaktnät som krävs (hos de större annonsörerna är det olika personer som köper print, TV och on-line). Men printsäljaren saknar troligen i avgörande kunskap om marknaden, formaten, prissättningen och mätmetoderna.

Att ta med sig affärsmodellen från papper till webb är lika svårt som att göra ett bra webbinnehåll av en återpublicerad artikel, skriven för en papperstidning.

Det handlar inte bara om annonser. Problemet med annonser är att de oftast placeras nära produkten, nyheten. Så gör man på webben och i papperstidningen. Medan läsaren väljer andra vägar till nyheten, rss-bevakningar och mobilversioner av sajten.

Man kan ge bort redaktionellt innehåll gratis, men då ska man ha klart för sig hur detta skapar mervärde och hur man då ska ta betalt för det mervärdet. Jag är övertygad om att varje medieverksamhet på nätet kan bli ekonomiskt självförsörjande.

För att öka omsättningen för en webbtidning krävs, bland annat tre nyckelingredienser:

1. Innehåll som är gjort för webben – av en redaktion med 2-3 journalister som arbetar heltid med ständig uppdatering, ständig förbättring och interaktion med läsare. Rubriker på en startsida är skrivna för att sälja klick, i princip som att sälja lösnummer. Bild, film och ljud är lätt att tugga i sig på en skakig buss. Text är också intressant, om det är lättläst med rätt typsnitt, radlängd och styckeindelning.

2. Trafik över 50 000 per vecka är räckvidd, då har man en marknadsplats för banners. Trafik under 50 000? Då gäller det att ha en riktigt vass nisch och att man kan argumentera för att hålla priserna uppe – helst över 60-70 CPM.

3. Annonssäljare som andas, äter och tänker digitalt. De är en mycket trevlig skara människor. Men då är väldigt få, i Sverige. De kan inte stava till EPS men de vet hur man sätter pris efter CPC, CPM, CPL och tar hem en miljon för sponsring av en underavdelning. En budget på 1,5 milj per säljare och år är ett möjligt mål. På det klarar sig 3 säljare och 3 journalister. Det blir lite över till andra omkostnader samt en blygsam vinst.


Kan tidskriftsförlag lära av musikbranschen och tjäna på webben?

Tidningar borde dra slutsatser för egen del när Spotify tar över musikdistributionen och skivaffärerna försvinner. Nyhetskonsumentens val är lika okomplicerat som musikkonsumentens.


Jag arbetar i en bransch där många duckar och avvaktar konkurrenternas nästa steg. Visst, det är inte ens en strategi men det är dyrt att vara först och göra misstag i affärer. Man vet helt enkelt inte hur den egna marknaden ser ut längre.

Tidningar har problem i och med att de tvingas ge bort redaktionells innehåll utan att få betalt för det. Konsumenter, läsarna visar tydligt med nytt beteende hur man vill konsumera redaktionellt innehåll. Man uppskattar bra journalistik lika mycket som någonsin. Och man vill ha det i mobilen och när man är i rörelse, på väg till och från arbetet eller i motionsspåret. Som med musik och film. Men tidningsbranschens intäktsproblem kan inte skyllas på läsarna.

Problemet är att de traditionella affärsmodellerna blir allt svårare att förankra i läsarnas vanor. Det här problemet kommer att på sikt hota en del dagstidningars existens. Mest illa ute är lösnummerförsäjningen av kvällstidningar. Det finns idag  för många andra sätt att ta reda på vad som hänt.

Den skrivna nyheten är inte hotad, inte nischade magasin, inte TV, inte radio och kanske inte den väl förankrade lokala dagstidningen. Det måste understrykas: mediendustrin och tidningsförlagsbraschen har ännu inte sett sina bästa år, men vi kan skönja slutet på en av dess distributionsformer. Jag börjar misstänka att dagstidning till lösnummerförsäljning kan fortsätta att tappa, mycket.

Jag jämför det med musikindustrin. Visserligen kan man med nostalgi blicka tillbaka till vinylskivornas tid – det som framför allt var bättre med dem var känslan när man höll de stora omslagen i handen. Men det vore dåraktigt att hävda att konsumentens upplevelse av inspelad musik försämrats med ökad tillgänglighet och digital distribution. Jag skulle inte byta någon av mina spellistor mot blandatband. Still of the night ska ligga som startskott i ett up-tempo-block oavsett om nystarten ligger mitt i en Spotifylista eller inleder en B-sida på ett kasettband – Så uppfattar jag även nyheter.

Om några år kommer vi att blicka tillbaka på en begränsad 50-årsperiod då musik spreds genom plastskivor i speciella skivbutiker. Först stora skivor, sedan lite mindre. Före den perioden och efter den perioden är musik något som framförs av människor inför andra människor. Det är så musiker alltid tjänat sin blygsamma peng, historiskt sett. Naturligtvis används även massmedia för att marknadsföra och håva in en en extra slant på hantverket.

– Kanske är det likadant med nyheter?

Ett mindre brasilianskt skivbolag tog ett kaxigt eget initiativ för ca 6-7 år sedan. Mitt under brinnande krig – mellan Napster och iTunes. Skivbolaget gav bort lådor med nypressade CD-skivor till gatuförsäljare, varsågod, ta dem, sälj dem. Gatuförsäljare som upprymda av den oväntade ökningen i försäljningsmarginal lanserade nya artister med en anmärkningsvärd effektivitet. Artisternas bolag tog tillbaka förlusten och lite till i entrén till de utsålda konserterna. Förlaget tjänade pengar på att lansera en ny artist, men inte genom den invanda intäktsformen.

– Kan det vara något att lära av?

Jag ser flera paralleller mellan nyhetskonsumenter och musikkonsumenter – det är vi konsumenter som visar mediebranschen hur vi vill ha det – inte tvärt om.

Ulrika Saxon på Bonnier ser det på ett liknande sett. Hon säger att: Vi har tidskriftvarumärken och vi använder all tillgängliga media för att sprida våra varumärken och göra pengar av dem. Magasin, webb, läsplattor och möten med människor är alla en del av samma helhet.

Dagstidningarnas mobilsajter och RSS-flöden kan inte jämföras med en så komplett tjänst som Spotify, men de har för alltid iscensatt samma typ av förflyttning av makten – från tidningen till läsaren.

När jag plockar fram tre nyhetstidningars mobilsajter och ivrigt klickar på uppdatera, då tävlar de om min lojalitet. Publiceringstempo mätt i minuter är avgörande. Dagens sista uppdatering kommer med tandborsten klockan elva på kvällen – av morgontidningen väntar jag mig något helt annat än senaste nytt från TT, för det är gammalt.

Jag tror att tidskriftförlagen har mycket att lära av förlagen som i stället ger ut musik. De gick igenom en liknande turbulens några år tidigare och börjar lära känna sin nya marknad. Även titskriftförlag har stora intäkter att vänta.

Om de lär sig förstår den uppmärksamhetsekonomi som växer fram. Nya kommersiella tjänster för urval väntar på att se dagens ljus, deras råvara är webbsök, shopping, sociala-medier-alerts och nyheter. Jag tycker att det är skitkul. Men jag är orolig för en bransch som bygger sin ekonomi kring en allt mer osäker och daterad affärsmodell.


Intressanta stopp i webbens historia

Vi kommer aldrig att med säkerhet kunna säga att då – då startade internet. Men ganska snart efter det kom vi på betydelsefulla idéer och började fatta små och stora beslut som för evigt kommer att leva kvar som webbhistoriska ögonblick.


1984

Ungefär här börjar det

Monsters of rock på Råsunda fotbollsstadion. Jag var 13 år och hade just köpt mina två första LP. Mer om dem på Spotify. Samtidigt pratar datorer med datorer över en telefonledning i Cern, Schweiz. Men det har så klart inte 13-åringen en aning om.

1992

Hemsida eller tidning?

Ny banbrytande internetsida om rockband ser nästan ut som en tidskrift. Webbtidning, är det en gångbar metafor? Nej, det låter konstigt. 1992 konstaterade någon att nu fanns det 50 registrerade internetadresser att besöka.

1993

Hitta platsen själv

Glöm bulletin boards och listor – nu kommer ”Sökmotorn” som hittar adresser år dig! Web crawler var en av de första. Sedan kom 10 till och alla var de riktigt stora under några år.

1993

Virtuell dagstidning

New York Times med flera experimenterar med det nya mediet. Nu är vi där igen. Nättidning? Webbtidning? med ”sidor”? Kan man använda sådana metaforer när det så uppenbart inte är papper. Ja det kunde man tydligen och under tio år fick vi leva med att även webben hade tidningar, sidor och att webben till och med gick att vika. För om en annons visades under den yta man ser innan man scrollar, ja då är den under ”the fold” och ska kosta mindre för annonsören.

1994

Ny organisation ska
trassla ut nätet.

The World Wide Web Consortium bildas av Tim Berners-Lee.

1995

Netscape tar plats i finrummet

Från den 10 augusti 1995 kunde vi handla med virtuella värden på börsen.

.

1996

Svenska nyheter på nätet

Aftonbladet.se tar de första stegen och testar vad man kan tänkas använda den nys distributionsformen till, i början med en bild på dagens löpsedel på webbens startsida. Ganska snart inser man att att det inte alls är en ny distributionsform det är fråga om. Internet verkar bli någon sorts förlängning av hela samhället, webbtidningen anpassas efter detta.

1997

Microsoft köper Hotmail och Babel Fish gör alla språk begripliga

AltaVista lanserar en automatisk översättare på Internet samtidigt som dot.com börjar omsätta – förvänade – miljarder.

1998

För första gången är en blogg först med ett scoop

och avslöjar den pinsamma affären med presidenten och Monica Lewinsky.

2000

23 mars: Livsstilsmagasin lanseras endast på nätet

Lanseringen av Tasteline.com är gav vare sig en trafikboom eller intäkter till en början. Men det troligen den enda gång jag personligen kommer att göra ett betyndande intryck i internets historia. I dag låter det inte det minsta märkligt med en tidningstitel utan tidning, men då var det rena vilda västern-fassonerna.

2000

18 augusti: IT-bubblan spricker

Två månader efter Tastelines lansering läste vi krigsrubrikerna om bolagen som tappade 300 miljarder. Mörka tider väntar, skulle vi överleva, skulle vi få någon lön?

2001

Webbens genombrott som främsta nyhetskälla

Vietnamkriget gjorde TV till främsta media för snabb rapportering. Gulfkriget var ett genombrott för satelitbevakning dygnet runt. 11 september 2001 var Internets genombrott som vårt främsta medieval, Fler strömmade till nyhetswebbar än till TV-apparaterna och tidningsstånden.

2001

Fildelningssajt stäms av 17 skivbolag – samtidigt

Japp, det stog så på löpet, en av de bästa svenska rubrikerna det året. Napster hade inte en chans i rätten. Apple gnuggar händerna och serverar iTunes.

2002

Ökar med 175%

Vad ökar? Jo, matchmaking-sajterna blir folkliga communityn och plötsligt är alla kontaktsökande singlar, ängsliga att hamna utanför.

2004

Kampanja på nätet #1

Han finansierar och driver presidentvalskampanjen från webben. Låter ju inte så konstigt, men det var det då. 2004 var länge sedan.

2006

Internet vinnare på annonsmarknad

Reklamkakan fortsätter att växa under 2006. Mest jäser internetannonseringen, som ökar med närmare 50 procent. Och det är inte säkert att toppen för annonsmarknaden är nådd, enligt E24 Näringsliv www.e24.se

2008

Alla skriver om Facebook

Få svenska tidningar vågar låta bli att berätta om det sociala nätverket som får stå som symbol för den pågående web 2.0-vågen. Just i Sverige glömde vi Twitter den hösten, men nu 2012 börjar ojämnheterna plana ut och Twitter tar sin rättmätiga plats som det mer inflytelserika sociala nätverket.

2008

Microsoft får nobben

Ett ganska generöst bud på Yahoo! möts med kalla handen och så här i efterhand känns det ju faktiskt som att Microsofts magi bröts där och då – för gott?

2008

Kampanja på nätet#2

Obamas kampanjarbetare var aldrig längre från varandra än en tweet på 140 tecken. Sjukt effektivt att använda Twitter som kampanjens intranät eller om man vill, rörpost för direktiv och strategi från kust till kust.

2010

Satsar 200 miljoner – på tidning för läsplattor

Rupert Murdoch tror på läsplattorna. Så mycket att mediemogulen nu satsar 200 miljoner kronor på en tidning som endast går att läsa via ”paddorna”. Tidningen kommer till att börja att ha 100 anställda sade man. Men det blev ingen tidning. Däremot satte tilltaget faet på alla andra och nu har vi massor av bra läsning unikt för paddan.

2011

Här är det

Kartnålar och geotaggning penetrerar i stort sett var enda marknad. Det är rätt självklart, det mesta är lättare att hitta med en karta än från en länklista.

2011

Hopkok

Vi tar din databas och deras klartgränssnitt, ruskar om det och petar ut nått nytt. Det som innehållsägaren inte kom på själv gör någon annan i stället. Allt från joggingspårfinnare till vädertjänster och nyhetssamlare byggs ut, ovan på hopkok av data. Störta hopkopet? Spotify + Facebook.


Från X till 5

När vi på W4 gjorde om Tandlakartidningen.se så använde vi på många punkter ny webbteknik. Förutom att vi utvecklade ett radannonssystem (med kortbetalning) för annonsering i både tidningen och på webben så bytte vi inför projektet ut kodstandarden XHTML mot nya HTML5. I efterhand könns det inte troligt att vi återvänder till XHTML, åtminstone inte när vi ger kunder WordPress-sajter.

Den nya HTML-standarden är ung och det kommer att ta ett par år innan vi användare märker någon skillnad. Men den finns och det är ganska omfattande. Vi kommer garanterat att uppskatta nyheterna, inte minst den fastställda markupen för <video>, <header> och <nav>.

Dessa är inte bara smidiga markörer för att formge inrmningen av filmklipp, sidhuvuden eller navigationen. Många av de nya koderna är faktiskt startknappar för smarta funktioner som exempelvis uppspelning av olika videoformat, helt utan besvärliga plugin-krav.

Nya Tandläkartidningen.se. Läs mer om projektet på W4.se

Med Tim Murtaugh’s smidiga HTML5-tema och de nya funktioner som Henrik på W4 utvecklade för WordPress fick Tandlakartidningen helt klart en teknikplattform för framtiden.

Tips: Kolla upp Tims nya projekt ediblecity.com, som med hjälp av fiffig kartpositionering av Manhattanbornas tweets om sina kära ambulerande lunchbussar faktiskt lyckas fastställa och visa på en karta var bussarna finns just nu.