Hoppa till innehåll

Projektbeskrivning, så byggde vi wimhallkel.com

Vi har byggt ny webb åt oss själva! I den här artikeln beskriver vi hur arbetet med vår nya webbplats wimhallkel.com gick till från allra första spadtaget till lanserad webbplats.

Kravställning och önskat läge

Att sätta mål med sin webbplats är en bra start för att ens kunna lyckas. För vår del är det lite speciellt i och med att vi inte bara använder webben som företag utan också måste tänka på att eftersom det är vårt yrke, måste vi få full pott på många delar.

Huvudsyftet och förväntningarna vi har på vår webb är främst:

  • Att generera förfrågningar från nya och befintliga kunder.

För att kunna göra det behöver webben:

  • Ha en tilltalande design för vår målgrupp
  • Ha ett relevant innehåll
  • Ha tydliga vägar in för kontakt eftersom kontakten är det enda sättet att sälja för oss
  • Visa på tydliga fördelar med oss som webbyrå, varför ska man anlita oss?
  • Uppfylla alla krav på lagar och regler, tillgänglighet, tekniska finesser, laddtider, prestanda osv bara för att vår webb är en del av beviset på vad vi kan göra för våra kunder.
  • Ha en god grund för fortsatt arbete med marknadsföring, i vårt fall främst sökmotoroptimering och att skriva artiklar.

Kundundersökning och medarbetarundersökning

Vi började redan i slutet av 2020 med att ta fram grunddata genom en kundundersökning och en medarbetarundersökning. För att kunna ge våra kunder det de vill ha behöver vi få in feedback på vissa saker, exempelvis:

  • Vad är intrycket av oss?
  • Vad gör vi bra idag?
  • Vad kan vi göra bättre?
  • Vad har kunderna för förväntningar på oss som webbyrå?

Undersökningen gjordes som en kvalitativ undersökning med samtal med några av våra viktigare kunder. Resultatet gav oss många insikter om vad vi är bra på, vad vi ska fokusera på och vad vi kan skruva mer på. Detta blir naturligtvis både ett internt arbete och inte bara ett kommunikativt arbete.

I samma veva gjorde vi en medarbetarundersökning bland våra kollegor, mest för att stämma av att det som kunderna uttrycker också stämmer överens med våra interna värderingar, vill vi samma sak som kunderna och är det kunderna uttrycker det som vi känner internt att vi erbjuder.

Statistik för att dra lärdomar från tidigare webbplats

I statistikverktyg som Google Analytics får vi in massvis av data som kan ligga till grund för viktiga strategiska beslut. Några exempel på saker som verktyget mäter är:

  • Hur många som besökt vår hemsida
  • Från vilken enhet de besökte hemsidan, exempelvis laptop eller smartphone
  • Vart våra besökare finns geografiskt
  • Vilket innehåll de tycker om att läsa
  • Och mycket mer.

Statistiken kan ge en fingervisning av vad man ska prioritera på den nya webbplatsen och också viktig information för lanseringen då vi behöver säkerställa att inget gammalt innehåll försvinner och om det ska försvinna, se till att det finns en omdirigering (301) till vart informationen finns på den nya webbplatsen.

Tycker du denna artikel var intressant och vill få löpande uppdateringar från oss?

Anmäl dig till vårt nyhetsbrev.

*” anger obligatoriska fält

Detta fält används för valideringsändamål och ska lämnas oförändrat.

Varumärkesarbete, vad vill vi säga?

Vi var inte ute efter en hel omdesign av nobox varumärke, vår logotyp gjordes om för något år sedan och håller ännu. Vi anlitade en reklambyrå får att hjälpa oss i arbetet med vårt varumärke. Till arbetet med varumärket var det mycket nyttigt att få med all relevant data som vi fått med oss från kundundersökning och medarbetarundersökning. I ett antal workshops hade vi givande samtal om vad vi som företag faktiskt vill säga. Resultatet blev bland annat:

  • Tonalitet på text
  • Förslag på bildspråk
  • Färgförslag
  • Enklare grafisk profil

Designarbete, webbdesign

Efter att ha fått en del grundvärden på plats kom arbetet med webbdesign. Även här anlitade vi en reklambyrå som tog vid efter arbetet med vårt varumärke. Eftersom vi är en webbyrå är webbdesignen otroligt viktig för att det vi sedan ska utveckla ska bli bra. För att få till en bra webbdesign finns några saker som behöver belysas:

  • Struktur, sitemap, vilka sidor ska finnas?
  • Vilken typ av innehåll ska finnas på sidorna?
  • Vilka funktioner ska finnas med?

Arbetet med webbdesignen pågick under en månads tid ungefär med några korrektursvängar tills vi blev nöjda. Designen levererades sedan i ett format som är enkelt för oss att utveckla i. I det här fallet designprogrammet Figma.

Innehållsproduktion

Innehållet i form av text och bild behövde tas fram. Vi anlitade en duktig copywriter för att ta fram texter och bilder som passade till dem. Eftersom vi redan lagt grunden till tonalitet i texterna i varumärkesarbetet och vilket innehåll som behöver produceras i sitemapen under arbetet med webbdesignen var det egentligen bara att skriva på. Utan det förberedande arbetet skulle arbetet med innehållet kunnat bli en mycket mer utdragen process.

Viktigt för oss att tänka på är att vi har två målgrupper:

  • Våra besökare som ska bli kunder
  • Google och andra sökmotorer

I vårt fall är båda målgrupperna lika viktiga. Många av våra kunder hittar till oss via Googles organiska sökresultat, därför är det viktigt att vi är synliga på de sökbegrepp som vi har valt ut. När besökaren sedan kommer in på vår webbplats är det lika viktigt att innehållet tilltalar dem och uppmuntrar till kontakt. Detta ställer krav på förståelse från copywritern hur man skriver en bra SEO-anpassad text som också är tilltalande för våra kunder. Eftersom SEO är viktigt för oss hade vi faktiskt tagit fram en sökordsanalys i samarbete med vår SEO-byrå innan copywritern började skriva.

Utvecklingsarbete

Äntligen får vi börja med det roligaste, att knacka kod! När all design är på plats är det fritt fram för webbutvecklaren att börja bygga. För oss finns det en hel del punkter som är viktiga och som alltid ingår när vi bygger webb:

  • WordPress som publiceringsverktyg (CMS)
  • Responsivt byggt för att fungera på dator, surfplatta, mobil etc.
  • Egenutvecklat tema, vilket betyder att vi har fullständig kontroll över all kod
  • Säkerhet, noga utvalda plugins för bästa säkerhet och prestanda
  • God prestanda från början, optimering av kod, bilder etc.

Vi valde att bygga upp webbplatsen med Gutenberg blocks, vilket gör att många delar av sajten blir moduler som går att återanvända på andra delar. Då blir det enkelt för en redaktör att få friheten att skapa innehåll som man vill.

Inläggning av material

Redan under utvecklingen började vi lägga in det material som vi fått från copywritern. Det är enklare att utveckla om det finns riktigt material redan från start, då ser man hur stora textmängder som ska in direkt. Om man istället lägger in materialet sist får man ofta gå över webbplatsen igen för att finjustera utifrån det innehåll som är inlagt.

Viktigt när vi lägger in material är att inte enbart lägga in det som vi ser med blotta ögat. Vi behöver också se till att lägga in ex:

  • Metavärden för SEO
  • Alt-texter på bilder för de som inte kan se bilder
  • Länka mellan olika innehåll på webbplatsen

Testning och buggsökning

Vi har en intern process för testning och buggsökning. Internt kallar vi den ”Varggropen” där vi slänger in projekt för att få dem testade och granskade. Hur noga man än är under utvecklingsarbetet så blir man hemmablind och att ta in någon som varit utanför projektet för en sista koll är alltid bra.

När vi testar har en omfattande checklista att gå igenom som bland annat innehåller:

  • Kompabilitet med olika webbläsare, det är såklart viktigt att webbplatsen fungerar och ser bra ut i de vanligaste webbläsarna; Chrome, Safari, Edge, Firefox etc.
  • Responsivitet. Vi testar webbplatsen med de vanligaste mobiltelefonerna för att se att det ser bra ut överallt.
  • Prestanda kollar vi med olika verktyg, ex Google Pagespeed och Pingdom.

Spårning, konvertering

Ofta vill man samla in viss data om sina användare, vilket man ofta gör med olika spårningskoder. Ofta vill man spåra för olika sociala kanaler som Facebook eller Linkedin men också för statistik som eller Matomo. Det som är viktigt att tänka på är att endast spåra det som behöver spåras och att man följer lagar och regler. GDPR och hantering av personuppgifter har aldrig varit mer aktuellt, vilket ex ställer krav på medgivande från besökarna för vissa typer av cookies. Vi har valt att använda:

  • Google Analytics. Vi använder en version av Google Analytics som inte sparar personuppgifter och heller inte cookies. Vi tappar lite av den personliga datan eftersom en viss del av IP-adressen maskas för att vi inte ska kunna identifiera vilken person som är en viss besökare.
  • Konverteringsspårning. I vårt fall är det en del av Google Analytics, så kallade ”Mål” som vi sätter upp för att spåra konverteringar på webbplatsen. I vårt fall är konverteringar:
    • Ifyllda formulär
    • Klick på mailadress eller telefonnummer

Prestanda och laddtider

För oss är prestandan på webbplatsen väldigt viktig, främst av tre skäl:

  • Laddtiden påverkar upplevelsen för besökaren av vår webbplats, en snabb webbplats är betydligt trevligare att besöka och leder därför till nöjdare besökare som har större sannolikhet att konvertera.
  • Laddtiden påverkar vår SEO. Google gillar snabba webbplatser, just för att de vill premiera det som gör besökarna nöjda.
  • Vi säljer tjänsten med prestanda och laddtider till våra kunder, då behöver vi leva som vi lär!

För att se hur vi presterar använder vi olika verktyg, exempelvis: Google Pagespeed och Pingdom .

Laddtiden vid lansering var precis under 1 sekund och med Google pagespeed fick vi 94/100. Klart godkänt!

Tillgänglighet

Tillgänglighet har blivit mer i ropet de senaste åren främst på grund av ökade krav för offentligt finansierade aktörer att följa de uppsatta riktlinjer som finns i standarden WCAG 2.1 i nivå AA. Vi har som privat företag inget krav att arbeta med tillgänglighet, men för oss är tillgänglighet en bredare fråga än vad som krävs av oss. Många av våra besökare kan mycket väl ha olika former av funktionsnedsättningar som gör att tillgänglighetsanpassning är viktigt, det kan handla om färgblindhet, eller att man behöver använda en skärmuppläsare för att ta del av innehållet, då är det viktigt med god tillgänglighet, sedan får man ofta med sig många fördelar som alla besökare har nytta av om man tänker tillgänglighet från början. Arbetet med tillgänglighet startar ofta i webbdesignen och följer sedan med i webbutvecklingen. Vi använder ett externt verktyg som heter Siteimprove, som är ett verktyg för att scanna av webbplatser för att identifiera brister i tillgängligheten. Sen säljer vi också tjänsten med tillgänglighet, då blir det också viktigt för oss att visa oss som en god förebild.

Lansering

När allt är på plats, testat och genomgått är det dags för lansering. I vårt fall fanns inga speciella krav på lanseringen utan vi lanserade på dagtid mitt i veckan utan något nedtid på webbplatsen. Vi valde att lägga vår nya webb på en egen VPS (virtuell server) för att få bästa möjliga prestanda.

I vanlig ordning glömde vi det sista steget, att fira lanseringen! Men när vi lanserar hundra webbplatser på ett år blir det inte riktigt så speciellt som det borde 🙂 Vi är i alla fall nöjda med vår nya webb och hoppas den ska hålla två-tre år framåt och ge oss mycket stöttning i vår marknadsföring.

Vill du veta mer?

Hör av dig om du vill veta mer om projektet med vår nya webb!

Christian

Vill du få uppdateringar från oss?

Anmäl dig till vårt nyhetsbrev

*” anger obligatoriska fält

Detta fält används för valideringsändamål och ska lämnas oförändrat.