Fara beint í efnið
ÍslandsvefirValmynd

Eigið verkefni · Vefhýsing

Gagnaver: hýsing sem allir skilja

Gagnaver vildi hætta að tala bara við tæknifólk. Við hönnuðum og smíðuðum vef sem leiðir fólk að réttri hýsingu með fjórum spurningum á mannamáli, á íslensku eða ensku, þar sem efnissíður senda ekkert JavaScript.

Birt
Lengd
7 mín. lestur
Forsíða nýja Gagnaver-vefsins: fyrirsögnin „Vefurinn þinn í loftið, án tæknivesens“ og spjald sem spyr „Hvað ertu að búa til?“

Í stuttu máli

  1. Gamli vefurinn var lítið breytt WHMCS-sniðmát með lorem ipsum, umsögnum frá framleiðanda sniðmátsins og verðum sem stóðust ekki.
  2. Við byggðum nýja ásýnd, „öruggt heimili fyrir vefinn þinn“, og vef sem leiðir fólk að réttum pakka með fjórum spurningum á mannamáli.
  3. Efnissíður senda 0 KB af JavaScript; verðsíða og hjálpargrein fá 100 í öllum fjórum flokkum Lighthouse í farsímaprófun.
  4. Forsíðan fær 91 í afköstum vegna útlitshliðrunar í efsta hluta forsíðunnar. Við segjum frá því hér og hvernig hún verður löguð.

Staðreyndir

Viðskiptavinur
Gagnaver
Atvinnugrein
Vefhýsing
Ár
2026
Tækni
  • Astro
  • TypeScript
  • Tailwind CSS 4
  • Payload CMS
  • Pagefind
  • Vitest

01. Bakgrunnur

Gagnaver er vefhýsing fyrir íslenskan markað og sama fyrirtæki og Íslandsvefir: bæði eru vörumerki Gagnaver Datacenter AB. Langflestir viðskiptavinir eru íslenskir og reksturinn byggir á Plesk og WHMCS, kerfinu sem sér um pantanir og reikninga.

Vefurinn gagnaver.is var hins vegar lítið annað en uppsetning á WHMCS-sniðmátinu „Lagom 2“. Þar var lorem ipsum, umsagnir sem fylgdu sniðmátinu, verð sem stóðust ekki og vörusíður án efnis. Á honum voru líka boðnar viðbætur frá þriðju aðilum, eins og SiteLock og NordVPN, sem höfðu ekkert með kjarnastarfsemina að gera.

Um leið var ákveðið að breyta um stefnu: í stað hýsingar fyrir fólk sem kann á tæknina yrði Gagnaver hýsing fyrir alla — einstaklinga, lítil fyrirtæki, félög og fólk sem býr til efni. Í hönnunarskjalinu er bent á að markaðsefni hýsingarfyrirtækja hafi lengi höfðað mest til karla og tæknifólks, og það átti að breytast.

02. Áskorunin

Það er erfitt að selja hýsingu fólki sem veit ekki hvað hún er. Orð eins og VPS, SSL og DNS eru hindrun, ekki upplýsingar. Ef fyrsta síðan sem fólk sér er verðtafla með diskplássi í gígabætum hefur það þegar misst þráðinn.

Áskoranirnar voru því fjórar:

  • Orðaforði. Vefurinn þurfti að útskýra hvert tæknihugtak þar sem það birtist fyrst, án þess að hljóma eins og kennslubók.
  • Val. Fólk þarf að komast að réttum pakka án þess að lesa sig í gegnum samanburðartöflur.
  • Traust. Gamli vefurinn grafði undan trausti með fölskum umsögnum og röngum verðum. Nýi vefurinn mátti ekki fullyrða neitt sem ekki stenst. Til dæmis segir hann „hýst á Norðurlöndum“, ekki „hýst á Íslandi“, af því að gögnin eru hýst í Stokkhólmi.
  • Rekstur. Fólk sem ekki forritar þarf að geta breytt efni og verðum, og vefurinn þarf að ráða við þrjú tungumál.

03. Markmið

Markmiðin koma úr hönnunarskjali verkefnisins (kaflar 1, 4, 9 og 10). Hér fá þau auðkenni svo niðurstöðurnar í kafla 6 geti vísað í þau.

  1. M1Fólk án tækniþekkingar finnur réttan hýsingarpakka án þess að kunna hugtökin fyrir fram.
  2. M2Vefurinn stenst WCAG 2.2 AA og talar til allra, ekki bara tæknifólks.
  3. M3Lighthouse ≥ 95, LCP ≤ 2,0 s, CLS ≤ 0,05 og ≤ 100 KB af JavaScript á efnissíðum.
  4. M4Íslenska og enska frá fyrsta degi og sænska innbyggð, með staðfærðum slóðum og hreflang.
  5. M5Hönnunarkerfi með sjálfvirkt prófuðum birtuskilum sem næstu verkefni byggja á.

04. Nálgun

Við unnum verkið í lögum, þar sem hvert lag byggir á því sem á undan kom.

Ásýnd og rödd. Grunnhugmyndin varð „öruggt heimili fyrir vefinn þinn“. Úr henni komu fimm loforð sem eru notuð um allan vefinn: hýst á Norðurlöndum, sama verð við endurnýjun, fólk svarar á íslensku, frír flutningur og öryggi sjálfkrafa. Raddleiðbeiningarnar segja að ávarpa lesandann með „þú“, skrifa stuttar setningar og útskýra hvert hugtak við fyrstu notkun, til dæmis „SSL-skilríki (lásinn í vafranum)“. Þar sem íslenskan kyngreinir orð umorðum við í stað þess að nota skástrik: „Til í að byrja?“ frekar en „Tilbúin/n?“.

Hönnunarkerfi. Litir, letur og bil eru skilgreind sem tákn (design tokens) í sameiginlegum pakka. Hvert skilgreint par af texta- og bakgrunnslit er prófað sjálfvirkt: að minnsta kosti 4,5:1 fyrir texta og 3:1 fyrir ramma innsláttarreita. Ef einhver breytir lit þannig að hann standist ekki lengur, fellur prófið áður en breytingin kemst á vefinn.

Myndmál. Hönnunarskjalið gerir ráð fyrir teiknuðum persónum í SVG í stað ljósmynda af netþjónum: fólki á ólíkum aldri og af ólíkum uppruna, þar á meðal manneskju í hjólastól, og bannar beinlínis myndir af netþjónaskápum og hettupeysuklæddum hökkurum. Persónurnar eru ekki komnar á vefinn; í þessari útgáfu eru myndskreytingarnar bráðabirgðaútgáfur.

Tækni. Vefurinn er smíðaður í Astro sem kyrrstæður vefur (static site): hver síða er tilbúin HTML-skrá þegar hún fer út. Efni síðnanna er geymt í kóðanum, en vefstillingar eins og fyrirtækjaupplýsingar og tungumál koma úr Payload-vefumsjónarkerfi við smíði. Gagnvirkir hlutar fá sína eigin litlu skriftu og aðeins á þeim síðum sem þurfa hana.

05. Lausnin

Lausnaleit á mannamáli

Hjarta vefsins er lausnaleitin. Hún spyr í mesta lagi fjögurra spurninga: hvað viltu gera, ertu með lén, hversu stórt er þetta og viltu að við sjáum um tæknina? Svörin eru á mannamáli („Rétt að byrja“, „Mikil umferð“) og hægt er að sleppa hverju skrefi og fara beint í verðin. Engum persónuupplýsingum er safnað og staðan er geymd í slóðinni, svo hægt er að deila niðurstöðunni og nota til baka-hnappinn eins og venjulega.

Niðurstaðan er einn pakki með skýringunni „Af hverju þessi?“, einn valkostur og setningin „Þú getur alltaf skipt um pakka síðar“. Reglurnar á bak við tillögurnar eru enn sem komið er í kóðanum, með prófunum. Samkvæmt hönnunarskjalinu eiga þær að færast í vefumsjónarkerfið svo markaðsfólk geti stillt þær án forritunar.

Lausnaleit Gagnavers: fyrirsögnin „Nokkrar stuttar spurningar, ein tillaga sem hentar þér“ og spjald sem segir að þú þurfir ekki að skrá þig og getir alltaf talað við manneskju.
Lausnaleitin lofar því sem skiptir máli fyrir óvana: engin skráning, hægt að skipta síðar og alltaf hægt að tala við manneskju.Skjámynd af staðbundinni útgáfusmíð, 6. október 2026.

Verð sem standast

Verðsíðan byrjar á loforðunum, ekki töflunni: sama verð við endurnýjun, engin binding, engin stofngjöld og endurgreiðsla innan 30 daga. Öll verð eru birt með virðisaukaskatti. Gamli vefurinn seldi viðbætur þriðju aðila; þær eru farnar.

Verðsíða Gagnavers: fyrirsögnin „Skýr verð sem hækka ekki við endurnýjun“ og spjaldið „Loforðin okkar“.
Loforðin standa efst á verðsíðunni. Verð á vefnum eru drög sem verða staðfest fyrir opnun.Skjámynd af staðbundinni útgáfusmíð, 6. október 2026.

Hjálp sem svarar

Hjálparmiðstöðin er hluti af sama vef, með leit sem keyrir í vafranum (Pagefind) og er aðeins sótt þegar einhver leitar. Greinarnar fylgja sömu raddreglum: ábendingar í ramma, skref í númeraðri röð og ekkert gert ráð fyrir fyrri þekkingu.

Hjálpargrein Gagnavers um að setja upp netfang í síma og tölvu, með ábendingum í ljósbláum römmum.
Hjálpargrein: 100 í öllum flokkum Lighthouse og ekkert JavaScript.Skjámynd af staðbundinni útgáfusmíð, 6. október 2026.

Hratt þar sem það skiptir máli

Efnissíður eins og forsíða, verðsíða og hjálpargreinar senda ekkert JavaScript. Valmyndin í farsíma er <details>-eining sem vafrinn sér sjálfur um. Lausnaleitin notar 5,9 KB skriftu. Stærsta skriftan er ruslpóstvörnin á samskiptaforminu, og hún er aðeins sótt á þeirri einu síðu.

  • Forsíða Gagnavers í farsíma: fyrirsögn, tveir hnappar og þrjú loforð með hakmerkjum.
  • Verðsíða Gagnavers í farsíma: fyrirsögnin „Skýr verð sem hækka ekki við endurnýjun“ og hnappar fyrir vefhýsingu og VPS.
Forsíða og verðsíða á 390 pixla breiðum skjá. Loforðin þrjú sjást án þess að skruna.Skjámyndir af staðbundinni útgáfusmíð, 6. október 2026.

Tungumál og leitarvélar

Íslenska er sjálfgefin og án forskeytis, enska er undir /en/ og sænska er innbyggð en birtist ekki fyrr en þýðingin er tilbúin. Hver síða hefur staðfærða slóð, til dæmis /vefhysing og /en/web-hosting, og vísar á hinar útgáfurnar með hreflang. Tungumálahnappurinn heldur þér á sömu síðu þegar þú skiptir um mál.

06. Niðurstöður

Mælingarnar voru gerðar 6. október 2026 á staðbundinni útgáfusmíð, áður en vefurinn fór í loftið. Þær sýna hvað HTML, CSS, letur og myndir kosta, en ekki netið, þjöppun eða dreifikerfi (CDN). Þegar vefurinn er kominn í loftið mælum við aftur á gagnaver.is.

Svarar markmiði M2

Vefurinn stenst WCAG 2.2 AA og talar til allra, ekki bara tæknifólks.

  • Lighthouse-aðgengi, forsíða, verðsíða og hjálpargrein100 / 100Heimild: Lighthouse 12.8.2, farsími, staðbundin útgáfusmíðMælt

Svarar markmiði M3

Lighthouse ≥ 95, LCP ≤ 2,0 s, CLS ≤ 0,05 og ≤ 100 KB af JavaScript á efnissíðum.

  • Lighthouse-afköst, verðsíða og hjálpargrein100 / 100Heimild: Lighthouse 12.8.2, farsími, staðbundin útgáfusmíðMælt
  • Lighthouse-afköst, forsíða91 / 100Heimild: Lighthouse 12.8.2, farsími, þrjár keyrslur; CLS 0,194Mælt
  • Largest Contentful Paint (LCP), allar þrjár síður1,1 sHeimild: Lighthouse 12.8.2, farsími, staðbundin útgáfusmíðMælt
  • JavaScript á efnissíðum · heildarstærð síðu0 KB · 43–50 KBHeimild: Lighthouse 12.8.2, netbeiðnir (óþjappað, 4 beiðnir á síðu)Mælt

Svarar markmiði M4

Íslenska og enska frá fyrsta degi og sænska innbyggð, með staðfærðum slóðum og hreflang.

  • Síður í smíðaútgáfu85 síður · 2 tungumálHeimild: Astro-smíði: 43 á íslensku (með 404), 42 á enskuMælt

Svarar markmiði M5

Hönnunarkerfi með sjálfvirkt prófuðum birtuskilum sem næstu verkefni byggja á.

  • Skilgreind litapör prófuð sjálfvirkt15Heimild: packages/ui/src/contrast.ts, Vitest-prófMælt

Tvö atriði skera sig úr. Verðsíða og hjálpargrein ná 100 í öllum fjórum flokkum. Forsíðan nær hins vegar ekki eigin markmiði um afköst: hún fær 91 vegna þess að textinn í efsta hluta forsíðunnar hliðrast um leið og síðan teiknast (CLS 0,194, markmiðið er 0,05). Hliðrunin endurtók sig í þremur keyrslum.

Markmiðið um lausnaleitina (M1) verður mælt eftir opnun, með vafrakökulausum mælingum á því hve margir ljúka leitinni og hvar fólk hættir.

07. Lærdómur og næstu skref

Mældu það sem þú lofar. Við settum okkur mörk um afköst áður en smíðin hófst og það var mælingin, ekki tilfinningin, sem fann hliðrunina á forsíðunni. Það er auðvelt að prófa bara bestu síðurnar. Þess vegna birtum við forsíðutöluna hér.

Orðalag er hönnun. Í lausnaleit skiptir orðalagið meira máli en kóðinn. Hvernig spyrðu um umferð án þess að nota orðið „umferð“? Hvert svar þarf að vera þannig að sá sem veit ekkert um hýsingu geti valið rétt.

Kerfi nýtast aftur. Hönnunarkerfið var smíðað til að endast lengur en eitt verkefni. Vefur Íslandsvefja byggir á sama grunni, með eigin aðallit og ritstjórnarlegra útliti.

Næstu skref eru að laga hliðrunina á forsíðunni og ljúka útgáfuskilyrðunum átta. Meðal þeirra eru staðfest verð, lögfræðilega yfirfarnir skilmálar og að fólk sem ekki forritar hafi sjálft birt síðu, verðbreytingu og hjálpargrein. Eftir opnun mælum við aftur á lifandi vef og uppfærum þessa síðu.

Næsta verkefni

Lausn · Almenn lausn, enginn tiltekinn viðskiptavinur

Pantanir sem verða sjálfkrafa að reikningum

Netverslun sem talar ekki við bókhaldið býr til handavinnu og villur. Hér lýsum við hvernig við byggjum tengingu milli WooCommerce og DK, Reglu eða Payday sem býr til hvern reikning einu sinni, heldur birgðum réttum og lætur vita þegar eitthvað bregst.

Ertu með svipað verkefni?

Segðu okkur frá stöðunni og markmiðunum. Við svörum með hugmynd að nálgun og næstu skrefum.