Vad betyder alla termer? | Pigment Webbyrå

Vi har nog alla känt oss lite utlämnade när man ska beställa något inom ett område där man inte har full koll. Det levereras tekniska termer och resonemang i en rasande fart som låter helt självklara för den som pratar. Själv sitter man där och försöker förstå vad i hela friden allt detta egentligen betyder för mig och det jag vill göra.

Vi tänkte gå igenom lite vanliga termer och områden som normalt används när man sitter och diskuterar vad som behövs och kan göras när man ska bygga en webbplats. Sånt som är bra att känna till för att få en grundläggande förståelse för hur det påverkar mina beslut, min affär och besökarna.

Tydlig tanke om varför man vill ha en webbplats

Normalt när man startar upp jobbet med att skaffa en webbplats så har man i princip alltid en tydlig tanke om varför man vill ha en webbplats, vilka man vill ska besöka den och vad man vill att besökarna ska göra, och det är det absolut viktigaste att börja med.

Men för alla som inte är så djupt insatta i hur en webbplats byggs, vad som är svårt/enkelt, vilka tekniker man ska välja och varför/varför inte, hur man ska arbeta med utseende, menyer och liknande så besökaren gör det man vill. Det är nu det börjar bli knepigt att hänga med när ord som CMS, templates, plugins, UX, ramverk, CSS, JS, React, PHP, backend, frontend, headless, SEO, WCAG, Responsivt, Mobile First och mycket mer börjar flyga runt i rummet.

Vanliga områden i ett möte om en ny webbplats

För att göra livet lite enklare för er så har vi bland annat satt ihop en ordlista med vanliga termer, men kommer här att försöka gå igenom dom viktigaste sakerna som brukar komma på tal i ett möte med en leverantör.

Ett vanligt möte runt en ny webbplats brukar oftast beröra några olika områden som man går igenom för att få en samsyn i vad som behövs för att uppfylla dom behov just du har med din webb.

Typ av webbplats och kundgrupp

Oftast startar man med att prata om vad man tänkt sig för typ av webb, vilken vilken kundgrupp man siktar på i första hand och hur man ska nå dom på ett effektivt sätt. Termer som brukar dyka upp här är t ex:

E-handel/webb-shop – Det är helt enkelt funktionalitet som gör försäljning av produkter eller tjänster direkt via webben möjlig. Omfattar saker som lagerhållning, prishantering, rabatter, presentkort, olika beställningsbara varianter på produkter, t ex storlekar och färger av en t-shirt-modell, fraktalternativ, hantering av betalning och mycket mer. Kan handbyggas eller installeras som separat tjänst, eller som del i t ex WordPress. Exakt vad en shop behöver kunna för just er, kommer alltid att behöva diskuteras i detalj eftersom alla lösningar inte fungerar likadant.
Personas – Det är ett ord för en eller flera påhittade besökare med olika behov och önskemål som man sen använder som representanter för potentiella kunder för att avgöra vad som behöver byggas för att dom ska få vad dom behöver.
Målgruppsanalys – När man på gruppnivå väljer ut vilken typ av besökare man i första hand vill locka till webbplatsen. Det kan till exempel vara privatpersoner som behöver hantverkare i hemmet, kommunala upphandlare som ska köpa konsulttjänster, företag som söker olika typer av system och så vidare. Här ska man ta fram konkreta behov hos målgruppen som webbplatsen snabbt och enkelt ska kunna möta.
SEO – Betyder ”Search Engine Optimization”, eller sökmotoroptimering. Väldigt enkelt sett, ett samlingsbegrepp över allt man kan och bör göra för att få webbplatsen att hamna högt i resultaten när man söker på utvalda ord (keywords/nyckelord). Orden man väljer att arbeta med är dom man tror att ens primära målgrupp använder när dom söker efter det som webbplatsen erbjuder.

Tekniska diskussioner om plattformar och byggsätt

När man är överens om vad som ska byggas, och för vem, börjar man ofta komma in på vad som är lämpligt sätt att faktiskt bygga webbplatsen på, och det är här det tenderar att bli ganska tekniskt. Vad man vill landa i är om behov och önskemål visar att det är bäst att använda en färdig plattform för att skapa sidor, shop etc i, eller om det är så specifika behov att det är bättre att handbygga en lösning. Saker man garanterat lär höra är:

Open Source – Det här är en licensieringsmodell som utvecklare av system och liknande kan använda för att ge andra rättighet att i princip fritt använda och ändra i koden i olika typer av projekt. T ex WordPress, Laravel, React och mycket mer är licensierat som Open Source, dvs du betalar inte för att ladda hem och använda det, till skillnad från t ex office paketet som du måste köpa en licens för. Vi som byrå tar t ex aldrig betalt för WordPress, vi tar betalt för det arbete vi gör för att anpassa det efter kundens behov.
CMS – Enkelt beskrivet, ett system som man installerar som ger en admin möjlighet att direkt skapa sidor, innehåll, lägga till bilder, länkar, filer och liknande på sidor direkt på webben efter en inloggning. Dvs utan att blanda in utvecklare. Det finns många olika CMS att välja på. Ett av de absolut vanligaste bland normala webbplatser är WordPress. I grunden ett ganska enkelt och flexibelt system, men enkelt och kostnadseffektivt att bygga ut till allt från en enkel presentationswebb till en stor och avancerad webbshop med kundinloggningar och liknande. Mycket funktion som ofta efterfrågas finns tillgänglig som ”plugins” vilket är små, färdiga tillägg som fungerar direkt inne i WordPress, oftast med ingen, eller väldigt lite teknisk anpassning.

De olika delarna i en webbplats

Backend – Den delen av webbplatsen som hanterar skapande och sparande av information. Oftast ett admin med tillhörande funktion och logik. Här finns även inställningar för olika integrationer, som att skicka orderdata till ekonomisystem, koppla till betalningar och liknande saker.
Serverside – Den osynliga delen av en webbplats en som alltid finns men aldrig märks. Här finns eventuell affärslogik som behövs för att hantera information, APIer för kommunikation mellan olika system, funktion för att lagra och söka data i databas, skapa fakturor, hantera bilder och liknande saker. Använder man t ex WordPress eller ett annat open source CMS så bygger serverside-delen väldigt ofta på ett programspråk som heter PHP och en lagring/databas som heter MySQL som ligger till grund för allt som sker under skalet.
Frontend/admin – Den delen av systemet som besökare och administratörer ser och arbetar med. Frontend byggs ofta med samma tekniker som backend och med HTML, CSS för själva ytan man ser och klickar i och JavaScript för saker som att validera formulär, visa popups och liknande för besökaren. Men det har dom senaste, säg 10 åren, blivit vanligt att använda React/NextJS och liknande för att bygga frontend. Vad man väljer är väldigt mycket beroende på vad frontend ska kunna göra och vilka specifika önskemål/krav som man har. Värt att veta är att i princip allt på en webb går att göra både med och utan dom teknikerna.
Begrepp som ofta dyker upp när man pratar frontend är saker som:

- HTML – Den kod som håller rätt på sidans struktur och vilka olika sorters element sidan består av, t ex taggar som H1, H2, H3 etc som talar om att det är rubriker av olika dignitet, DIV som är en hållare för olika sorters innehåll, P som är ett text-stycke, IMG som presenterar en bild och mycket mer.
- CSS – Cascading Style Sheets, kod som styr hur olika HTML-element ska se ut på sidan, från storlek, till färg, marginaler, position och mycket annat
- JS – JavaScript. Skapar interaktivitet på sidan, gömmer/visar menyer, ändrar färg på saker när musen passerar över, skapar gallerier, validerar formulär, hämtar information dynamiskt och mycket annat.
- Meta-taggar – Element i koden som inte syns för besökaren, men beskriver sidan på olika sätt för t ex sökmotorer, styr saker som sidans titel, beskrivning och mycket annat
- Teknisk SEO optimering – Principerna runt hur du ska använda bland annat HTML elementen för att en sökmotor lätt ska se vad som är vad, kunna förstå vad för bild sidan visar, kunna tolka produktlistor i en shop så dom kan visas annorlunda i ett sökresultat med mera.

Headless frontend

Headless – Ett sätt att bygga en webbplats på där administration av innehåll är helt separat från hur och var det visas för användaren. Principen är ofta använd när man vill kunna bygga både webbplats och mobilapp med helt olika utseende och funktion från samma innehåll som hämtas från admin via ett API. Förutom det så ger ofta en webbplats byggd i headless med t ex React/NextJS en väldigt mjuk och snabb upplevelse för besökaren. Detta eftersom det i princip aldrig laddas en ny sida när man klickar runt, informationen bara ändras allt eftersom du interagerar med sidan.

Tekniker relaterat till Headless

API / REST-API – Ett standardiserat sätt/språk för att hjälpa olika system att prata med varandra oavsett vilket programspråk systemen är byggda i.
JavaScript – Specifik kod som körs i webbläsaren hos besökaren, används oftast för att skapa interaktivitet i sidan utan att behöva ladda om den.
React – Ett stort bibliotek av JavaScript kod som man kan bygga hela interaktiva webbplatser i. Innehållet till sidan hämtas från ett CMS via ett API och sidorna skapas antingen i förväg, eller dynamiskt av JavaScript, eller en kombination av båda. Facebook är till exempel byggt i React.
NextJS – Ett mindre komplicerat bibliotek av JavaScript kod. Bygger på React, men är lite enklare och snabbare att bygga i. Ställer precis som React och Vue.js lite specifika krav på webbhosting.
Vue.js – Liknande som NextJS, men bygger inte på React.
Native app – När du bygger en specifik app som installeras på en mobil, Apple eller Android.

Custombygge/handbyggt och komplexa lösningar

Custombygge – Det här brukar komma upp när man ser att webbplatsen kommer att kräva så mycket speciallösningar att standardfunktionaliteten i ett CMS behöver byggas om rejält, eller om en färdig shop inte gör det man behöver, då kan man custombygga/handbygga funktionen specifikt efter kraven.
Eller, man kan till och med landa i att allt bör byggas helt från grunden. Väljer man det så kommer man att använda något av flera tillgängliga olika ramverk som stomme för det man vill bygga.

Ett ramverk kan ses som en verktygslåda med många färdiga små paket som löser dom vanliga saker man nästan alltid behöver i ett bygge, men vill slippa bygga om och om igen.

Värt att notera är att även om WordPress normalt refereras till som ett CMS, så är det utbyggbart på ett sätt att man kan handbygga förvånansvärt avancerade lösningar med WordPress som plattform/ramverk.

Ett annat stort och etablerat ramverk i dom här sammanhangen är Laravel, då gärna tillsammans med en teknik som kallas Livewire som ger den sömlösa användarupplevelsen av t ex React, men utan den extra komplexiteten för utvecklaren. Den här kombinationen används med fördel om man behöver bygga mer komplexa system med mycket specifik affärslogik, mycket data som behöver vara sökbart, avancerade administrationsgränssnitt och liknande.

Skillnaden att custombygga allt, mot att använda WordPress eller andra CMS, är enkelt sett att man får självklart bygga mer funktion själv, men man styr också helt hur t ex data ska lagras och hanteras snabbt och effektivt baserat på kraven. Det till skillnad mot ett färdigt CMS där man får leva med dom grundläggande lösningar dom utvecklarna valt och de kompromisser det innebär.

Design och användarupplevelse

När vi pratar om frontend så är det självklart att man kommer att beröra design, upplevelse och känslan man vill att webbplatsen ska leverera, det är ju trots allt det som ska representera företaget/tjänsten för alla besökare.

Andra viktiga delar som brukar komma upp här är uppföljning/statistik, samt olika typer av marknadsföring. Även om man i dom första mötena kanske inte går på djupet i diskussionerna så kommer ett antal ganska specifika begrepp att dyka upp som inte alltid är självklara.

Kundresan – Den väg och alla olika steg besökaren tar från en sökning till att dom gör det du vill att dom ska göra på webbplatsen, t ex ett köp, en offertförfrågan eller en kontakt med en säljare.
CTA – Call To Action. Är oftast en knapp, ett köp, ett formulär eller liknande, men representerar huvudsyftet med just den sidan besökaren är på. Den visuella och den strukturella designen ska tillsammans leda besökaren till klicket.
UX/UXD – User Experience/User Experience Design. Handlar om att skapa en positiv upplevelse för besökaren, t ex i form av ett naturligt och positivt flöde som leder besökaren fram till det vi vill ska hända.
Man kan se det som strukturell design, där man med hjälp av olika tekniker t ex wireframes (en representation av en sida bestående av odesignade rutor och streck), strukturerar alla olika delar av en sida så dom samverkar och leder besökaren fram till sidans syfte, att en navigation är logisk och användbar i alla lägen, att texter presenteras i läsbara block och liknande.
Massor av små pusselbitar som tillsammans är väldigt viktiga för helheten.

Viktigt att hålla i minnet är att den här fasen av design bygger på vetenskap, observation av mänskligt beteende och psykologi. Det är alltså inte en fråga om snyggt eller ej, utan att man faktiskt vet hur och varför vissa saker fungerar.
Grafisk Design – När man inom de ramar som t ex en brandbook satt upp, och den UX-design man arbetat fram, skapar en visuellt tilltalande webbplats där bilder, färger, fonter, texter samverkar för att skapa den känsla man vill besökaren ska uppleva, samtidigt som designen förstärker syftet med den strukturella designen man tagit fram.
Väldigt ofta är detta den delen av processen där många inblandade ger mycket input, ibland objektivt, ibland subjektivt. Här behöver man alltid en erfaren grafisk designer med solid erfarenhet från UX/UXD i det media man bygger för för att helheten ska bli så bra som möjligt.
WCAG – Detta handlar om tillgänglighetsdesign och är en standard som tagits fram för att kunna bygga webbtjänster på ett sätt som säkerställer att besökare med olika funktionsvariationer faktiskt kan använda webbplatsen.
Vad man konkret gör är att se till att det är tillräcklig kontrast mellan olika element, att textstorlekar har rimlig storlek, att bilder har beskrivningar, att du kan ta dig runt utan att behöva använda en mus, att en skärmläsare kan läsa upp innehåll, och liknande saker. För vissa typer av webbplatser finns det krav på att man uppfyller en viss nivå av WCAG, för andra är det frivilligt. Men principiellt är det ju alltid dumt att i onödan göra det svårt för en med synnedsättning att köpa saker på din webbplats.
Branding/Brandbook – Företagsspecifika regelverk som styr allt från tillåtna färger, typsnitt, hantering av logotyper mm, kan även hantera önskad tonalitet i kommunikation och liknande. Målet är att ha verktyg för att företaget ska kunna presenteras på rätt sätt oavsett media.
Det betyder att om man har en existerande brandbook för trycksaker, så kommer den med stor sannolikhet att behöva ses över så den passar även för digitala media.
A/B-tester – En princip för att testa olika versioner av en sida/funktion, t ex ett köpflöde, eller en registrera dig knapp. Tanken är att automatiserat kunna skicka en bestämd del av besökarna till en sida med knapp till höger och en annan del till en sida med knapp till vänster och mäta vilken version som gav flest klick på knappen.
Statistik/Analytics – Handlar om att faktiskt kunna mäta om dom flöden man skapat på webbplatsen gör det som var tänkt, resulterar i ett köp eller vad syftet nu är. Det absolut vanligaste verktyget som används är Google Analytics/GA4 som mäter alla typer av interaktioner besökare gör på webbplatsen.
Man spårar inte identifierbara individuella användare, men olika typer av besökare och dess beteenden.Det gör att man t ex kan se om en funktion använd på en mobil ger fler eller färre klick jämfört med samma funktion på desktop. Man kan se hur långt besökare av viss typ kommer i ett köpflöde innan dom lämnar sidan och mycket mycket mer.

Informationen man får ut från dessa verktyg används dels för att vidareutveckla och förbättra webbplatsen, men också som input till olika typer av marknadsföring och sökmotoroptimering tillsammans med de specialiserade verktyg som finns för den typen av arbete.

Sammanfattning

Det finns som synes enormt mycket att tänka på när man börjar diskutera en ny webbplats, hur mycket obekanta termer och standards som helst, helt omöjligt att täcka allt i ens en lång bloggpost.

Självklart är det så att ju mer man vet innan man börjar, dess enklare är det så klart att snabbt hänga med, men det viktigaste att komma ihåg är att klichén ”det finns inga dumma frågor utom den som inte ställdes” är 100% sann. Oavsett vem du pratar med i ett sånt här sammanhang så vill dom att du ska förstå, det gör allt så mycket enklare för alla sidor att få det rätt.

För mer information runt tekniska termer har vi satt ihop en ordlista du kan utforska.

Hoppas detta gav dig lite mer kött på benen inför nästa möte.

Hälsningar, Pigment

Hjälp! Vad betyder alla termer?