Kort version. Research först, sedan innehållsmodell, sedan design, sedan bygge, sedan granskning. Det som avgör vad sajten kostar att äga bestäms i de två första stegen, långt innan något syns. Den här sidan är hela arbetssättet i sammandrag, med en längre text bakom varje del.
Det svåra med att köpa en hemsida är att du ska bedöma något du inte kan se förrän det är för sent att ändra.
Därför byggde jag ett referensprojekt: Yèshì, en påhittad restaurang. Ingen kund, ingen sekretess, ingenting jag behöver linda in. Där kan jag visa varje beslut, varje mätning och varje gång jag hade fel.
Det här är hela arbetssättet, i den ordning det görs. Riktiga kunduppdrag finns under Arbeten.
Innan något byggs
1. Titta på vad som faktiskt fungerar. Inför restaurangbygget gick jag igenom femton riktiga restaurangsajter, fem av dem under huven. Tretton av femton skriver öppettiderna dag för dag. Ingen av femton har en inbäddad karta. Det tog en dag och gjorde varje senare beslut snabbare.
Femton sajter, varav fem med huven uppfälld
2. Bestäm vad som ska hållas isär. Nästan varje verksamhet har två påståenden som ligger nära varandra och betyder olika saker: det ni gör själva mot det ni ordnar via någon annan, det som finns i lager mot det som beställs hem. Blandas de börjar sajten lova för mycket.
”Vi gör det” och ”vi kan ordna det” är två olika saker
3. Lägg innehållet som data, inte som text i ett verktyg. Det är det här beslutet som avgör vad en framtida flytt kostar, och det tas innan den första sidan finns.
Sitter du fast?
När det byggs
4. Ett ställe för alla designvärden. Färger, avstånd och typsnitt definieras en gång och hämtas av alla sidor. Det är därför ”gör knapparna lite mörkare” ska ta fem minuter och inte en halv dag.
Varför ”gör knapparna lite mörkare” ska ta fem minuter
5. Två signaturer, sedan förvaltning. Sajten får två saker som är dess formspråk, och varje ny sida förvaltar dem i stället för att lägga till en tredje. Det är därför sidan nummer tolv ser ut att höra ihop med sidan nummer ett.
Två signaturer räcker
6. Säg nej till det du inte kommer att underhålla. Bloggen, nyhetssektionen, Instagramflödet. Allt som byggs ska också hållas vid liv, och den kostnaden betalas i din tid.
Det jag inte byggde
Innan det räknas som klart
7. Tillgänglighet som grind. Automatiska tester hittar ungefär en tredjedel. Resten är fyra kontroller för hand: tabba igenom, slå på reducera rörelse, stäng av JavaScript, zooma till 200 procent.
Vad ”noll fel” faktiskt betyder och Rörelse som går att stänga av
8. Väg sidan. Bilderna är åttio till nittio procent av vikten. På referensbygget vägde ett kort 281 kilobyte i stället för 58, och ingen kunde se skillnad.
Bilden ingen såg men alla laddade ner och Vad väger en hemsida?
9. Kontrollera vad sökmotorn ser. Utöver texten skickar sidan osynliga sammanfattningar om öppettider, adress och frågor. En del verktyg skriver dem åt dig, andra inte.
Vad sökmotorn ser
10. Läs igenom med ögonen. Stämmer priserna överallt. Går knappen att trycka på. Det är den delen inget test klarar.
Där människan fångade maskinen
Och beviset
Jag byggde hela sajten två gånger, i två olika system, med samma innehåll och samma tillägg, och mätte skillnaden. En besökare kan inte se vilken som är vilken.
Det är hela argumentet för varför du inte behöver ha en åsikt om vilket verktyg jag använder.
Menysidan i de två byggena, fotograferade samma dag vid samma bredd och samma scrollposition. Överst Bricks, under Etch. Samma rätter, samma priser, samma märkningar.
Hur vet du att jag kan det här?
Vill du prata om din egen sajt får du gärna höra av dig.
Yèshì är en fiktiv demorestaurang, byggd som referensprojekt just för att jag ska kunna visa hela arbetssättet öppet, inklusive misstagen, utan att bryta sekretess mot en riktig kund. Alla siffror i serien bär sitt datum. Riktiga kunduppdrag finns under Arbeten.
Johan Beijer, Hemsideproffset