Nylig lanserte jeg nettsiden til Bærum events. En side som gikk fra skisse og konsept til ferdig og tilgjengelig på en arbeidsdag.

Men først, hva er Bærum events?

Som Bærum events skriver på www.baerumevents.no, så lager de eventer som tiltrekker, gir ekstra boost og oppmerk­somhet rundt din virk­somhet.

En-siders landingsside

Bærum events leverte fra seg en grundig skisse som de selv hadde laget i Canva. I tillegg til et sett med fargekoder, skrifttyper og bildefiler.

Domenet www.baerumevents.no hadde kunde selv kjøpt.

Tailwind til webdesignet

Tailwind CSS (tailwindcss.com) ble valgt til å utforme nettsiden. Med CSS i fingrene gikk det bare et par timer å sette opp førsteutkastet til nettsiden. Med riktige farger, former, skrifttyper og innhold.

Kombinasjonen Tailwind CSS og skrifttyper fra Google Fonts (google.com) gikk så raskt som bare det. På denne måten:

Kopiere inn noe linjer med HTML-kode på siden.

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
    href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700;800&display=swap"
    rel="stylesheet"
/>

Justere på en konfigurasjonsfil for Tailwind CSS.

extend: {
    fontFamily: {
        inter: ['"Inter"', "sans-serif"],
    },
},

Og så ta i bruk skrifttypen med CSS, enten for et element i HTML-koden eller på et høyere nivå i arbeidsfilen tailwind.css.

<p class="font-inter">Noe tekst her</p>

GitHub til lagring

Kunden etablerte sin egen GitHub (github.com)-konto og et repository. Derifra jobbet jeg og kunden sammen. Jeg gjorde HTML- og CSS-kodingen. Mens Bærum events selv redigerte tekstinnholdet.

Noe publiseringsløsning var det ikke behov for. Så løsningen ble en statisk landingsside.

Bruk av GitHub Pages ble satt opp, og domenet ble koblet opp med DNS-innstillinger og innstillinger hos GitHub. Så på lanseringstidspunktet var både domenet og HTTPS oppe å gå på få minutter.

Ikoner fra Ionicons

Med et JavaScript i bunnen av nettsidekoden, så er det lett som en plett å ta i bruk gratis ikoner fra Ionicons (ionic.io). 🎈 Slik ser det ut å sette inn et ballongikon:

<ion-icon name="balloon-outline"></ion-icon>

Statistikk hos Swetrix 📊

Det er mange bra statistikktjenester å velge mellom der ute. Som ikke koster noe opp til et visst antall besøkere i måneden, ikke bruker informasjonskapsler og lagrer dataene sine i nærheten.

Valget falt på Swetrix (swetrix.com), som har et enkelt grensesnitt, kan håndtere opp til 5000 besøkere i måneden og er lett å bruke til egendefinert sporing av noen utvalgte handlinger.

Kontaktskjema

En ting GitHub Pages ikke tilbyr er skjemaløsning, som for eksempel det å ha nettstedet hos en annen gratistjeneste som heter Netlify (netlify.com) kunne ha løst.

Men det løser man lett med FormKeep (formkeep.com). Da er det bare å designet skjemaet som man ønsker med Tailwind, og la FormKeep håndtere det som skjer når man trykker på innsendingsknappen. Hurra 👏

Metadata

Metadata må på plass 🤓. Open Graph (ogp.me) og Twitter Cards (twitter.com) er godt nok til at siden blir delt pent og riktig i de fleste sosiale medier. Social Share Preview (socialsharepreview.com) fungerer godt til å teste ut dette i.

Fortest mulig i Google

Et område i Google Search Console (google.com), verifisert med DNS-innstillinger, ble ordnet. Det gjør at siden fortere blir fanget opp i Googles søkemotor. 🚀

Eneste faste utgift

Domene er kundens eneste faste utgift 🫢

Med en liten nettside som består av en HTML-fil, en CSS-fil og noen bilder, så var det ingenting i veien for å bruke et gratis og offentlig tilgjenglig repo i GitHub.

Og med lite trafikk som et nyoppstarte nettsted, så er det ingen ting i veien for å bruke gratisversjonene av Swetrix og FormKeep.

Dette kan du få

Om du har en god skisse til en en-siders nettside, en ide om hva du vil med den, og legger med gode tilleggsopplysninger i bestillingen. Da trenger det ikke ta mer enn en arbeidsdag for meg å gjøre jobben for deg.

Ingen kunder og behov er like. Men med min erfaring som både webredaktør og utvikler i mange år, kan jeg hjelpe deg med å ta en del velbegrunnede valg underveis i utviklingen. Dette sparer både deg og meg for tid og penger. 💰