webbdesign

Centrum för arbete och studier i Värmdö har startat Sveriges första yrkeshögskola till Bygglovhandläggare. Jag fick uppdraget att skapa deras nya webbplats. Denna webbplats är tänkt att stå ut lite mer än vad man är van vid för utbildningswebbar.

En mörk bakgrund stöds upp av ett stort bakgrundsfoto tillsammans med starka accentfärger. Sidan är tänkt att vara det första den nye studenten möter och ska då få positiva känslor för utbildningen.

Webbplatsen finns på www.bygglovhandlaggare.se.

Idag är det vanligt förekommande att man pratar om konvertering inom webbranschen, speciellt när det gäller webbshopar och liknande sidor. Med konvertering menas att man tittar på hur man får besökaren att göra det man tänkt på den specifika webbplatsen. Det kan t.ex. vara att köpa en vara i en webbshop, ladda ner ett program eller liknande. Detta kan egentligen appliceras på alla webbplatser; det finns gott om forskning och studier som visar på hur besökare agerar på en webbplats och vad det är som får denne att genomför ett köp eller om denne inte gör det. Trots detta ser man allt som oftast väldigt dåliga exempel på hur man inte optimerat konverteringsgraden. Ofta är detta kritiska områden som hela företaget får sin inkomst genom.

Jag ska ge ett exempel på några som inte alls tänkt på hur man vill att besökaren ska agera på sidan och därför även gjort ett - hittills - dåligt resultat. Det jag tänker på är Handbolls-VM som har premiär imorgon, bland annat i Linköping, och de säljer dålig med biljetter.

En viktig del för arrangörerna är att sälja biljetter till matcherna, något som inte alls gått så bra i Linköping. Jag kan garantera att man skulle kunna sälja betydlig fler biljetter om man rättade till några stora missar på sin hemsida.

Går man idag in på Handbolls-VMs officiella webbplats och klickar sig fram till "Tickets" hamnar man på denna sida:

Här är information som är helt avgörande och som inte framkommer någon annanstans. Biljetten man köper är en dagbiljett, alltså inte som brukligt att man köper en biljett per match. Denna ytterst viktiga information döljer de alltså i en massiv text utan vidare förklaring. Läser man vidare på hemsidan under "Booking" kan man se att det är tre matcher per dag och ort, således verkar man enbart kunna köpa biljetter till tre matcher och inte bara en, men det är oklart hur det egentligen är. 

Jag går in på booking och väljer en match jag vill se.

Ganska naturligt. Jag väljer Island - Japan och klickar på Tickets i högerspalten.

Jag kommer då till denna Ticnet-sida:

Notera att jag klickade på den matchen jag ville se. Här är nästan all information borta om vilken match jag ska få se, nu står det istället tre matcher i liten text under evenemangsbeskrivning. Jag blir konfunderar. Jag klickade ju på Island - Japan. 600kr känns lite dyrt för en sådan match. Hur jag än vänder och vrider på det så kan jag inte hitta biljetten för min match. Jag väljer då att inte köpa någon biljett, alternativt att jag ringer biljettkassan istället.

Några enkla fel de gör:

• Gömmer viktig information i brödtext.
• Många klick för att komma fram till biljettköpet.
• Otydlig information som gör mig som köpare osäker.
• Under booking-sidan "lurar" de mig och tror att jag kan köpa en biljett till enbart en match.
• Man skickas till en Ticnet-sida som inte tydligt visar vad man ska köpa biljett till.

Hur de skulle kunna förbättrat konverteringen

Tydliggöra viktig information som att man köper till tre matcher, och eventuellt förklara varför man inte kan köpa till en match.

Lyfta fram biljettköpet tidigare på hemsidan. Jag borde få upp en tydlig ruta på startsidan som säger något i stil med: Nästa match i Linköping är Island - Japan - köp dagbiljett och få se tre matcher på en biljett. Köp biljett till en match.
Så här skulle det kunna se ut, se högerspalten och jämför med Handbolls-VMs startsida idag (klicka för större):

Ett annat bra exempel är Detroit Red Wings. När man går in på deras hemsida möts du genast av en möjlighet att köpa biljetter till nästa match.

På bara ganska enkla sätt kan man troligtvis öka konverteringen på biljetter och på så sätt få mer publik till sin matcher.

Idag fick jag ytterligare en bok som behandlar ämnet optimering av webben: Landing Page Optimization - The Definitive Guide to Testing and Optimizing for Conversions. Något man ser ganska återkommande är bristen på analys av den egna webbsidan. Ofta nöjer man sig med att man har en sida och man kopierar information direkt från en broschyr eller liknande helt utan att fundera på vad man ska ha sidan till.

Denna bok belyser detta problem och visar på vikten av att själv göra analyser av sin webb och hela tiden fråga varför man ska göra si eller så. Detta är något som går återkommer på alla olika typer av webbplatser, alltifrån e-handelwebbplatser till offentliga webbplatser. Ett intressant område som dock får alldeles för lite utrymme när det byggs nya webbplatser. Boken rekommenderas för alla som vill få ut lite extra av sin webbplats och inte nöjer sig med hur den är idag.

Ett ständigt problem för webbutvecklare är att de måste anpassa sina webbsidor för Internet Explorer. CSS3 har betydligt förenklat utvecklandet och det hjälper till att få sidorna att ladda snabbare och utvecklarna slipper lägga till massa onödigt kod. Tyvärr så har Microsoft valt att inte följa denna  utveckling och stödja CSS3.

Det finns två alternativ för utvecklaren i detta läge: antingen anpassa för IE eller låta vissa element inte visas som designern hade tänkt (tex runda hörn eller skygga på vissa element). Det finns nu en lösning på det. Det är en javascript-lösning som fungerar riktigt bra. CSS3 PIE är en riktigt bra lösning på detta och kan gott och väl användas för att få IE att uppträda som en modern browser. Väl värt att titta på om man håller på med webbutveckling.

Internetworld skrev i senaste tidningen om hur man lätt kan öka affärsnyttan med Goolge Analytics. Artikeln ger oss en inblick i hur viktigt det är att analysera sin statistik på webbplatsen och hur man med ganska enkla medel kan få ett bättre resultat (eller affärsnytta som de kallar det). Jag har tidigare skrivit om webbanalys och vikten av detta här i bloggen.

Även om det finns andra mer avancerade analysverktyg än Google Analytics så är detta ett väldigt bra verktyg för dig som inte behöver specialisera din statistik allt för mycket. Jag har vid flera tillfällen varit med om många som har statistikverktyg men att de mest använder det till att se unika besökare och inte fundera på de besökare som verkligen står för affärsnyttan använder webbplatsen.

Att anpassa rapporter i Google Analytics gör att man kan få fram det lilla extra från statistiken och man slipper ofta få igenom massa olika data som man egentligen inte är ute efter. Således är det bara för er som är webbansvariga att sätta sig ner och lära sig detta, om ni använder Google Analytics vill säga.

Att webbanalys börjar bli en allt viktigare del i själva webbarbetet känns ganska tydligt. Dock verkar många företag fortfarande ligga ett par steg efter i denna utveckling.

Jag har de senaste dagarna jobbat om några saker på denna hemsida. Skillnaden på undersidorna är inte så stor; det som har hänt är att menyn har flyttats längre till höger och att sökrutan ändrat färg och blivit lite större, i övrigt är det mesta intakt på undersidorna.

Den stora förändringen, som är ganska radikal, är den helt omgjorda startsidan. Jag har länge funderat på och studerat startsidor på olika webbplatser. Det som är klart är att startsidan ofta är den sidan som får sticka ut och vara lite annorlunda än de andra. Ofta innefattar detta en stor banner eller liknande som visar på att det är en startsida. Jag har dock kommit över några webbplatser där man tydligt har försökt hitta startsidans syfte och mål, och därefter gjort något helt radikalt - man vill att den ska sticka, vara speciell mer än bara en banner.

Min tanke med min nya startsida är att lyfta fram portfolion ett steg till men ändå ha ett ganska stort fokus på mig. Bloggen däremot ligger i botten på sidan och har inte alls en lika framträdande roll. Min tanke är att förstagångsbesökaren tydligt ska se vem sida de kommit till och vad den innehåller. Den andra radikala saken på sidan är att hela bakgrunden är blå istället för den ljusgrå som det är på de övriga sidorna. Tanken med det är att sidan ska vara unik och fokusera på innehållet mer i en hierarkisk ordning: mig, portfolion och sist bloggen.

Gamla utseendet på startsidan

Jakob Nielsen skulle säkert slita sitt hår med en sådan här manöver, men jag tror ändå att detta är trender vi kommer få se mer av: att låta vissa sidor sticka ut från den generella strukturen och designen på sidan.

Sist så har även portfolion uppdaterats med en webbplats till: Ingmarsspelen.se.

Man ser att allt fler som bygger nya webbplatser inte bryr sig om dem som använder Internet Explorer. Alla som jobbar med webbplatser vet vilken pina det är att hela tiden anpassa så att det funkar okej även i den webbläsaren. Förra året var det flera av de stora aktörerna som började ta avstånd från Internet Explorer 6 genom att lägga till varningar som visas för den som surfar på webbplatsen med just den webbläsaren.

I och med intåget av CSS3 och andra nya tekniker så har webbutvecklandet blivit markant enklare, dock så verkar Microsoft inte vilja vara med på det tåget och deras webbläsare stödjer inte detta. Det trevliga är, tycker jag, att allt fler struntar i Internet Explorer-användare och använder sig av CSS3 utan att göra någon anpassning till IE. Några exempel är Sverigesradio.se som har runda hörn på innehållsfältet, en mycket trevlig funktion i CCS3, som dock inte IE stödjer, och alla som inte använder en modern webbläsare får således kantiga hörn.

Ett annat exempel är YouTube som använder en snygg toning och skuggad bakgrund på knapparna man väljer sida med längst ned. IE-användare får en tråkig fyrkant till knapp i stället.

Det känns ändå bra att allt fler börjar gå ifrån att utgå från IE-användaren och i vissa fall inte göra någon speciallösning för denne. Naturligtvis kan man inte alltid strunta i IE-användaren då många trots allt använder sig av den, men förhoppningsvis kan detta göra att fler väljer bra och moderna webbläsare istället.

En trend som inte riktigt slagit igenom än inom webbdesignen är väldigt breda sidor. Det har tidigare diskuterats en del om att ha webbplatserna i flexibel bredd, utan att det slagit igenom riktig. Genom att enbart använda procent kan sidan lätt te sig konstigt i många upplösningar. Nu börjar det dock komma en del varianter där javascript används för att anpassa innehållet efter besökarens upplösning. Detta gör att allt mer av skärmens yta kan användas och att användarupplevelsen ofta blir bättre.

Schibstedt har på både SvD.se och Aftonbladet.se gått ifrån att bygga webben för upplösningar på 1024px och breddat sidorna till att vara anpassade för 1280px istället. De har dock valt att inte göra sidorna flexibla vilket gör att högerspalten försvinner för dem som har en upplösning på lägre än 1280px i bredden. Personligen tycker jag det är helt rätt då de allra flesta har högre varianter av upplösningar.

I A List Apart läste jag en väldigt intressant artikel om "responsive web design". I artikeln visar de hur man kan arbeta med bilder i en flexibel design på ett snyggt sätt. Detta är något som jag tycker fler webbyråer borde ta fasta på. Tänk en magasinwebb eller liknande där du får artiklar och artikelbilder mycket större än vad som ofta ges i dagens läge, vilket större intryck sidan skulle kunna ge.

Ett väldigt bra exempel på en sida som utnyttjar sidans bredd är den nyligen lanserade Sjoraddning.se som Forsman & Bodefors skapat på ett föredömligt sätt (som så ofta när de gör saker). Sidans högerspalter lägger sig olika beroende på hur hög upplösning du har och de ger ett väldigt mäktigt intryck. Ericsson, som också lanserade sin nya webb nyligen, har gjort någon mitt emellan och breddar sidan någon när man har en högre upplösning, vilket är ett steg i rätt riktning.

Jag tror och hoppas att detta är något som vi kommer få se allt mer av framöver.

Ingmarsspelen är ett av tre dalaspel av Rune Lindström. Handlingen är baserad på Selma Lagerlöfs mycket läsvärda bok Jerusalem I Dalarne från 1901, som i sin tur bygger på en sann händelse där 37 Nåsbor lämnade landet för att söka lyckan i det heliga landet.

Den nya webben är tänkt att visa en bild av det drama som spelet är och besökaren ska kunna se spelets stämning redan här.

Stort på startsidan ser man även Selma Lagerlöfs introduktion till boken:

“Det var en lång, ganska bred dal, som var rutad av en massa gula och gulgröna sädesfält och dessutom av slagna klövervallar, av blommande potatisland och av små, blåblommiga linåkrar, som översållades av en ofantlig mängd vita fjärilar.”

Webbplatsen bygger på publiceringsverktyget Drupal som i det här fallet är implementerad av duktige Mikael Wiberg.

Sidan finner du på www.ingmasspelen.se

Internetworld har idag en genomgång av några olika stadsteatrars webbplatser. Med bestört förvåning ser jag att Östgötateatern får hela 7 av 10 i betyg. Jag dissade deras webb i ett inlägg för cirka ett år sedan.

Så här ser Östgötateaterns webb ut idag - liksom för ett år sedan.

Östgötateaterns webbplats är som en skymf mot besökaren. En enormt spretig webbplats med en design som knapp hade varit godkänd 1999. Östgötateatern har kanske en av Sveriges finaste teaterbyggnader och salongen är magnifik. Av denna känsla visas inget på webbsidan. Grått och konstiga toningar är nästan det enda man ser; de snygga detaljerna som en sådan här sida är förtjänt av lyser med sin frånvaro.

Det enda. lilla, pluset jag kan ge till denna texterna på sidan är helt ok - dock inte så säljande och bra som Internetworld menar (har de verkligen läst?).

Ett obligatoriskt moment för dem som skapar webbplatser av detta slag är att se hur GöteborgsOperan gjort. Mer genomtänkt och välgjort är det nog få som ens kommer i närheten av.

Internetworld ger Uppsalas stadsteater - mycket välförtjänt - bäst betyg.