Du använder en gammal webbläsare!

031-361 90 00

Göteborgsvägen 52, 431 37 Mölndal

Ny webbsida

20 februari 2018

Äntligen har vi en ny webbsida!

Jag har länge velat göra om vår webbsida, tyvärr har tiden inte riktigt funnits förrän nu när jag bestämde mig för att det fanns tid.

Vad var fel med den gamla sidan?

Vår tidigare webbsida gjordes när vi precis hade startat vårt företag och vi ville få upp en webbsida så fort som möjligt. Som så ofta är när man jobbar under tidspress, så fattar man beslut som man kanske inte skulle ha fattat med lite mer eftertanke och några fler iterationer i hjärnan.

Så här i efterhand, så är det några saker som sticker ut bland en mängd dåliga beslut.

  • Långsam inledande animation
    Det visade sig att ingen vill sitta och vänta i 10 sekunder medan det ritas streck på skärmen… jag tyckte själv att det var en otroligt fräck svg-animation när jag gjorde den 😄

  • Svår att uppdatera
    P.g.a. av val av teknik och en ganska dålig struktur av innehållet var det svårt för andra att uppdatera innehållet vilket i sin tur ledde till att innehållet inte uppdaterades alls.

  • Helsidesscroll
    En ihophackad variant av helsidesscroll som inte fungerade särskilt bra i många webbläsare visade sig inte heller vara det bästa beslutet.

Vad är så bra med den nya sidan?

Det finns en mängd olika sätt att skapa en enkel webbsida för att presentera ett företag. Alla med sina olika för- och nackdelar och att välja ett av sätten är svårare och mer jobb än man först kan tro, åtminstone om man vill få alla fördelar och helst inga nackdelar.

Jag hade i alla fall några lärdomar med mig när jag började att leta mig igenom djungeln av CMS:er, site builders m.m. Den nya sidan behövde vara snabb, någorlunda enkel att underhålla och uppdatera och hålla det enkelt utan en massa effekter som man snabbt tröttnar på.

Teknik

Jag har under några månader ägnat mig åt att surfa runt bland olika CMS-lösningar för att försöka få uppslag till hur vi skall göra när vi nu gör om vår webbsida.

CMS

Den första lösningen som jag tittade på var Wordpress, som är omåttligt populärt och otroligt omfattande med hundratals teman och över 50 000 olika plugins att välja på. Jag såg någonstans att 30% av alla webbsidor i världen är Wordpress-sidor.

Det som jag tyckte talade emot Wordpress, vilket kanske låter lite konstigt, var den oerhörda mängden teman och plugins. Förutom det även den åldrande bakomliggande tekniken.

Anledningen till att jag tyckte att mängden teman och plugin är ett problem är att jag såg mig själv sitta i timmar framför datorn läsande 50 bästa teman för Wordpress 2018 eller 25 st. plugins som du inte kan leva utan o.s.v. och sedan välja något som jag givetvis direkt skulle vara missnöjd med…

Jag tittade också på Joomla, Drupal och några olika site builders som t.ex. Squarespace och Wix utan att riktigt se att de hade någon riktig USP jämfört med Wordpress.

Static Site Generators

Istället valde jag att titta på Static Site Generators och JAMstack (Javascript, API:s & Markup). Jag ville inte ha en “gammaldags” serverbaserad webbsida, men jag ville inte heller ha en webbsida som behöver ladda ner flera Mb stora javascript-filer innan något visas på skärmen. Ju mer jag läste, desto mer verkade det vara en Static Site Generator som jag letade efter.

Även när det gäller den här typen av webbsidor, så finns det en mängd olika sätt att skapa dem på. De två största lösningarna för JAMstack verkade vara Jekyll och Hugo. Jekyll är Ruby-baserad medan Hugo är skriven i GO (Golang). De har bägge fördelar och verkar vara fullgoda alternativ, men jag var inte jättesugen att lära mig ett nytt språk bara för att göra en hemsida. Jag valde istället Gatsby som är en Static Site Generator som använder React/Redux och GraphQL, som vi redan använder i utvecklingen av vår produkt.

Innehåll

Ett av de stora problemen med den tidigare sidan var att det var komplicerat att uppdatera innehållet på sidan, man var tvungen att ändra texten, bygga om sidan manuellt och sedan publicera de byggda filerna till webbservern via ftp. Den omständliga uppdateringsproceduren fick till följd att innehållet inte blev uppdaterat.

Den här gången behövde det bli lättare att uppdatera olika typer av innehåll oavsett om det är nyheter om företaget eller om det uppdatering av produktbeskrivningen. Det behövde dessutom vara möjligt att uppdatera webbsidans innehåll utan att först behöva bli webbutvecklare.

Contentful

Av en händelse så råkade jag hitta Contentful, som är en tjänst för att hantera innehåll. Contentful är en s.k. headless CMS som innebär att det finns ett sätt att spara information och sedan exponera den informationen via ett api. Via webbgränssnittet kan man dels definiera hur innehållet skall se ut t.ex. det skall finnas en titel, ett datum och en nyhetstext om man lägger till en nyhet. När man definierat hur en innehållstyp skall se ut, så kan man börja att lägga upp innehåll med den strukturen.

Som tur var så hade någon annan redan fått samma idé som jag, därför fanns redan ett färdigt plugin till Gatsby för att hämta information från Contentful via GraphQL. Tre rader kod och en GraphQL-fråga senare, så hade jag tillgång till innehållet från Contentful i min webbsida.

Hosting

Helst av allt vill man att när man checkat in sina ändringar, så skall webbsidan byggas om och publicering av ändringarna ske automatiskt. Därför gällde det att hitta ett sätt att lösa det på. Det enklaste skulle så klart vara om det redan fanns en tjänst för det.

Netlify

Efter lite googling så hittade jag Netlify som har en grym tjänst som lät mig skapa en ny sida genom att koppla en website till mitt Bitbucket repository där källkoden för webbsidan ligger. Det innebar att Netlify automatiskt triggar ett bygge när jag pushar källkodsändringar till mitt repository.

Att Netlify kopplade den nya websiten till Bitbucket löste problemet att man vill att ett nytt bygge triggas när man gör ändringar i källkoden. Däremot triggades inte ett nytt bygge när jag gjorde ändringar i sidans innehåll. Jag behövde såklart även hitta en lösning för att när jag eller någon av mina kollegor publicerade nytt innehåll från Contentful, så skulle även då webbsidan byggas om.

Även här så fanns det färdiga lösningar för problemet. Netlify har något som kallas build hooks som gör det möjligt att trigga ett bygge via ett http-anrop och i Contentful har man via s.k. webhooks möjlighet att trigga saker beroende på händelser, som t.ex. när man sparar, publicerar eller avpublicerar innehåll i Contentful. Detta gjorde det möjligt att trigga en ny publicering varje gång som man ändrade innehållet.

Sammanfattning

Med hjälp av några grymma och dessutom helt gratis tjänster, så har vi lyckats få till en webbsida som är blixtsnabb och relativt lätt att uppdatera. Nu återstår bara att fylla den med bra innehåll.