Lysbro Elektro – konsept for elektrikernettside

Lysbro Elektro er et konsept: en oppdiktet elektrikerbedrift i Hardanger som jobber med gamle trehus, hytter og naust. Nettstedet er laget for å vise hvordan jeg bygger en nettside for en håndverksbedrift i WordPress.

Jeg valgte en elektriker fordi oppdraget er typisk for en liten bedrift: kundene skal raskt forstå hva bedriften gjør, se at den har gjort lignende jobber før, og ta kontakt. Bedriften skal selv kunne legge inn nye jobber uten å be om hjelp hver gang.

Utfordringen: en nettside som gir forespørsler

En håndverker har sjelden tid til å vedlikeholde nettsiden. Derfor må det være enkelt å gjøre det som faktisk skjer i hverdagen: legge inn en ferdig jobb med bilde, endre en tekst og følge opp en kunde som har spurt om befaring.

Samtidig skal nettsiden se ryddig ut etter flere år med endringer. I mange WordPress-nettsider kan redaktøren endre alt, også farger, skriftstørrelser og oppsett. Det gir frihet, men også sider som sakte sklir ut. Jeg ville gi redaktøren frihet over innholdet og ta bort valgene som bryter utformingen.

Løsningen

Et blokktema som styrer utformingen

Jeg laget et eget blokktema der fargene, skriftene og avstandene ligger fast i innstillingene, så redaktøren velger fra en kort liste i stedet for en fargevelger. Seksjonene på sidene er låst slik at teksten og bildene kan redigeres, mens rekkefølgen og oppsettet blir stående.

Egne blokker for innholdet

Seks egne blokker dekker innholdet: tjenestekort, kontaktstripe, referanseoversikt, ofte stilte spørsmål, forespørselsskjema og fakta om en jobb. Blokkene har et eget grensesnitt i redigeringen og tegnes på serveren. En senere endring i utformingen slår dermed gjennom på alle sider, uten at innholdet må lagres på nytt.

Blokken for ofte stilte spørsmål bruker vanlige åpne-og-lukke-elementer i HTML og legger til strukturerte data for søkemotorer.

Referanser med faste felt

Ferdige jobber er en egen innholdstype med jobbtype og faste felt for sted, år og omfang. Feltene fylles inn i et panel i redigeringen, og hver ny referanse får samme oppbygging. Oversikten kan filtreres på jobbtype med vanlige lenker, så filteret virker uten JavaScript.

Et skjema som ikke mister forespørsler

Skjemaet legger forespørslene i en egen innboks i WordPress-administrasjonen, i stedet for i en e-post som kan forsvinne blant alle de andre. Der får hver forespørsel status som ny, kontaktet eller ferdig, og et internt notat. Innboksen er en liten applikasjon i React og TypeScript som henter og oppdaterer data gjennom REST-API-et i WordPress.

Skjemaet fungerer også uten JavaScript. Feil vises ved hvert felt og i en oppsummering øverst, utfylte felt beholdes, og et skjult felt og en enkel begrensning på antall innsendinger stopper det meste av søppelpost.

Under panseret

Nettstedet består av et tema og en utvidelse. Temaet styrer utseendet. Utvidelsen inneholder innholdstypene, blokkene, skjemaet og administrasjonsappen, slik at innholdet ikke forsvinner om temaet byttes en gang.

• Tema: blokktema med theme.json, selvhostede skrifter og låste seksjonsmønstre.
• Blokker: block.json, redigeringsgrensesnitt i TypeScript og React, og visning i PHP.
• Innhold: egen innholdstype og taksonomi for referanser, med registrerte felt som er tilgjengelige i REST-API-et.
• Administrasjon: innboksen for forespørsler er bygget med komponentene fra WordPress, så den ser ut som resten av administrasjonen.
• Kvalitet: automatiske tester med axe ga ingen funn på elleve sider på mobil og PC, og alle sidene åpnes i redigeringen uten ugyldige blokker.

Resultat og avgrensning

Konseptet ligger ute som en demo på lysbro-elektro.utviklerlindberg.no. Demoen er en statisk kopi av WordPress-nettstedet uten innlogging, og skjemaet sender ingenting. Redigeringen og innboksen er ikke med i demoen, så skjermbildene på denne siden og opptaket er tatt fra den lokale versjonen, med oppdiktede forespørsler og referanser.

Lighthouse ga 99–100 for ytelse på PC og 89–96 på mobil, og 100 for tilgjengelighet, beste praksis og SEO. Målingene ble gjort mot en enkel utviklingsserver uten komprimering og hurtigbuffer, så de er ikke et resultat fra en publisert nettside.

Bildene er fra Unsplash og er kreditert i bunnen av konseptet. Alle navn, telefonnumre og adresser i konseptet er oppdiktet.

Relevant for dere hvis …

Dere driver en håndverksbedrift og vil ha en nettside som viser jobbene dere har gjort, og som gjør det enkelt for kundene å be om befaring. Les mer om hva en nettside for håndverkere bør inneholde, eller om et skreddersydd WordPress-tema med egne blokker.

Løsningen bygger på det samme som nettsider for bedrifter generelt: rask lasting, universell utforming og redigering som er enkel for dere. Teknisk bruker den PHP, React og TypeScript.

Ringeknappen øverst på mobil og et skjema som tar vare på det kunden har skrevet, er typiske grep i konverteringsoptimalisering. Innholdet ligger ferdig i HTML-koden, og referansefilteret er vanlige lenker som Google kan følge. Begge deler hører til teknisk søkemotoroptimalisering. Fortell hva slags jobber dere vil vise frem, så ser jeg på hva nettsiden deres trenger.