Din webbplats hinner göra ett intryck innan någon har läst en enda mening. Besökaren ser en layout, väntar på att något ska ladda och drar en slutsats om företaget bakom. Professionell webbdesign handlar om att styra den slutsatsen, och det är inte samma sak som att den ska vara snygg. En snygg webbplats som laddar långsamt, är rörig på mobilen eller gömmer kontaktuppgifterna tappar lika många kunder som en ful.
Design och teknik går inte att skilja åt i praktiken. Typsnitt, mellanrum och färgkontrast avgör om texten går att läsa. Kodkvalitet, bildformat och hur sidan renderas avgör om den hinner visas innan besökaren tröttnar. Vi bygger i Next.js just av den anledningen: rendering, bildhantering och routing är sådant som annars hamnar i glappet mellan designern och utvecklaren, och det är i det glappet webbplatser tappar fart.
Användarupplevelse och användargränssnitt
UX är vad besökaren upplever. UI är knapparna, menyerna och formulären som besökaren faktiskt klickar på. Skillnaden låter akademisk, men den syns direkt när något går fel. En webbplats kan ha ett vackert gränssnitt och ändå vara omöjlig att ta sig igenom.
Det mesta av arbetet ligger i navigationen. Den som landar på en undersida ska inom ett par sekunder förstå var på webbplatsen hon eller han hamnat, vad företaget gör och vart nästa klick leder. Uteblir svaret går besökaren tillbaka till sökresultatet. Det är den avvisningsfrekvensen som sedan dyker upp i analysverktyget, och den är oftast ett navigationsproblem snarare än ett trafikproblem.
Konsekvens bygger förtroende, och det är inget estetiskt argument. När knappar ser likadana ut på alla sidor, när rubriknivåerna följer samma mönster och när samma färg alltid betyder samma sak, slipper besökaren lära om vid varje klick. Slarv i de detaljerna läser folk som slarv i övrigt. Det är orättvist mot företag som gör ett bra jobb i verkligheten, men så fungerar det.
Sedan finns den delen av användarupplevelsen som ingen märker förrän den saknas: att sidan laddar snabbt och beter sig likadant i olika webbläsare. De flesta besök börjar i en mobil, och en mobil på dålig uppkoppling är den hårdaste testmiljö en webbplats har. Därför mäter vi prestanda innan vi mäter något annat. En design som bara fungerar på en snabb dator är inte färdig.
Sökmotoroptimering och synlighet
Ingen ser designen på en webbplats som aldrig dyker upp i sökresultatet. Sökmotoroptimering är därför inget man lägger till efteråt, utan en följd av hur sidan är byggd: vilken kod som skickas till webbläsaren, hur snabbt den visas och hur innehållet är strukturerat.
Det konkreta handlar om rubriknivåer som följer innehållets logik, adresser som går att läsa, bilder i rätt format och sidor som svarar snabbt. En del av det mäter Google direkt, genom Core Web Vitals. Resten märks indirekt: en sida som känns trög tappar besökare, och den signalen når sökmotorn ändå.
Det svåra är inte att veta det här. Det svåra är att bygga så att det håller. Många hemsidor tappar sin sökmotoroptimering i efterhand, när någon lägger till en bildkarusell eller ett tredjepartsskript som drar ner hela sidan. Ett ramverk som tar hand om bilder och sidladdning åt en gör den typen av tillägg mindre farliga, och det är en av anledningarna till att vi valde Next.js.
Lokal sökning är en egen sak. Ett företag i Malmö konkurrerar sällan med hela landet utan med de tio närmaste konkurrenterna. Där avgör detaljer: att adress och kontaktuppgifter står i text på sidan, att företaget är rätt registrerat hos Google och att sidan faktiskt nämner orten den vänder sig till. Enkelt arbete, som ändå gör mer skillnad än det mesta annat på en lokal marknad.
Säkerhet och drift
Två saker som sällan syns i en designpresentation avgör om webbplatsen går att lita på: att den är säker och att den är uppe.
Säkerhet
Kryptering med HTTPS är sedan länge ett minimikrav och inget att slå sig för bröstet över. Det som skiljer webbplatser åt är hur mycket som går att attackera över huvud taget. En hemsida byggd på ett CMS med tjugo tillägg har tjugo underhållsberoenden, och vart och ett av dem kan bli en väg in. En sida där innehållet hämtas vid bygget och serveras som färdiga filer har betydligt färre rörliga delar.
För en webbshop blir det extra tydligt, eftersom besökaren lämnar ifrån sig uppgifter som inte går att ta tillbaka om något går fel. Svaret är nästan alltid att inte hantera kortuppgifter själv utan låta en etablerad betalleverantör göra det, så att känslig data aldrig passerar den egna servern.
Upptid
Det spelar ingen roll hur bra webbplatsen ser ut de dagar den är nere. Upptid handlar mindre om design och mer om var sidan ligger och hur den levereras. Färdiga sidor från ett CDN har helt enkelt färre sätt att gå sönder än en databasdriven sida som räknar ut varje sidvisning på nytt.
Det märks i sökresultatet också. En webbplats som svarar långsamt eller är otillgänglig när sökmotorn tittar förbi tappar mark, och den positionen kommer inte tillbaka av sig själv den dagen driften är löst.
Det här är den tråkiga halvan av webbdesign. Den syns aldrig i en portfölj, och den är samtidigt det första en besökare märker när den inte fungerar.
Responsiv design och olika enheter
Responsiv design betyder att samma sida anpassar sig efter skärmen den visas på. Det låter självklart i dag, men skillnaden är fortfarande stor mellan en webbplats som är byggd för mobil från början och en som fått mobilanpassningen påklistrad i efterhand.
En hemsida som inte är gjord för mobil känns igen direkt. Texten är för liten, knapparna sitter för tätt, och något element sticker ut i sidled så att hela sidan går att dra fram och tillbaka. Besökaren zoomar, missar en knapp och lämnar.
Vi utgår från den minsta skärmen och bygger uppåt. Det är ingen smaksak utan en prioriteringsordning. Börjar man i mobilen tvingas man bestämma vad som faktiskt är viktigast på sidan, och den bedömningen förbättrar datorversionen också.
Olika typer av enheter
Utöver telefon, surfplatta och dator finns en lång svans av enheter: klockor, tv-apparater, spelkonsoler, uppläsare som återger sidan som ren text. Att optimera för alla är bortkastad tid. Att bygga med korrekt HTML och rimliga kontraster gör att de flesta av dem fungerar ändå, och samma arbete är det som gör sidan användbar för den som navigerar med tangentbord eller skärmläsare.
Google indexerar dessutom mobilversionen av en webbplats, inte datorversionen. Är mobilupplevelsen sämre är det den sämre versionen som bedöms.
Det är ytterligare ett argument för att börja i mobilen i stället för att sluta där.
Vad som avgör i praktiken
De fyra delarna hänger ihop, och de faller på varandra. En långsam sida tappar de besökare den får. En osynlig sida får inga att tappa. En som känns otrygg får besök men inga affärer. Det går inte att lösa delarna var för sig och sedan lägga ihop resultatet, eftersom besluten krockar: bildkarusellen som ser bra ut i presentationen är samma bildkarusell som gör sidan långsam.
Vad som ändras framåt
AI-verktyg har redan flyttat en del av arbetet. De skriver utkast och genererar gränssnitt snabbare än någon hinner rita dem för hand, vilket gör att mängden medioker webb ökar. Det gör inte design mindre värt. Det gör skillnaden mellan genomtänkt och genererat tydligare för den som tittar noga.
Vad vi inte tror på är att byta teknik för att något är nytt. VR och AR har utlovats i webbsammanhang i över tio år utan att bli relevant för ett vanligt företag som vill sälja en tjänst. Det som betalar sig är fortfarande tråkigt: snabbare sidor, tydligare struktur, färre saker som kan gå sönder.
Om du bara gör en sak
Mät var du står innan du bestämmer vad som ska byggas om. Kör sidan genom ett prestandatest, titta på hur den ser ut i en telefon på dålig uppkoppling, och sök på ditt eget företagsnamn plus orten du finns i. De tre sakerna tar en kvart och säger oftast mer om vad som behöver göras än en offert gör.
Så bygger vi professionella webbplatser
På Developly bygger vi webbplatser i Next.js där design, prestanda och SEO hänger ihop från början, i stället för att lösas var för sig i efterhand. Så här ser det ut:
Jag är en av Developlys grundare och jobbar som mjukvaruingenjör med fokus på JavaScript. Med 8 års erfarenhet inom både front-end och back-end utveckling brinner jag för att skapa smarta, moderna webblösningar. Jag är djupt involverad i våra projekt och kombinerar tekniskt hantverk med ett öga för vad som verkligen skapar värde för kunden.
