Tillkännagivande HTML-mallar

Färdiga HTML-mallar för meddelanden och aviseringar

Ge brådskande uppdateringar, kampanjnotiser och driftlarm en tydlig plats i koden. HTML-mallar för meddelanden ger återanvändbara sektioner för aviseringar som visas direkt på webbplatsen i stället för via e-postutskick, så att ett nytt meddelande aldrig kräver ny kod.

Ren kod bakom korta webbplatsaviseringar

Hela meddelandet hör hemma i en och samma behållare markerad som ett separat område, helst med en etikett som skärmläsare kan läsa upp. Ett underhållslarm behöver sällan mer än en rubrik, beräknad tid för slutförande och en statuslänk. En evenemangsuppdatering innehåller i stället datum, plats och en anmälningslänk.

En funktionell HTML-struktur för ett meddelande kan följa denna ordning:

1. en kort rubrik som namnger meddelandet;
2. ett stycke som förklarar förändringen, erbjudandet eller evenemanget;
3. ett separat element för datum, status eller tidsfrist, så att det kan uppdateras utan att hela meningen behöver skrivas om;
4. en enda uppmaning till handling (CTA), som endast inkluderas när besökaren behöver agera.

Sekundära uppgifter som villkor eller berörda områden placeras i egna små element, enkla att redigera eller ta bort.

Stängknappar och uppmaningar till handling

Ett meddelande som kan stängas kräver en riktig stängknapp med en etikett som "Stäng meddelande", eftersom en ren ikon inte ger hjälpmedelsteknik något användbart att läsa upp. En klickbar ikon i en enkel behållare är ännu sämre, då den inte kan nås av tangentbordsanvändare. Innan du bestämmer dig för en mall bör du kontrollera koden för några ytterligare detaljer:

1. en CTA är en länk när den öppnar en annan sida och en knapp när åtgärden sker direkt på platsen;
2. rollen "alert" används enbart för aviseringar som är tillräckligt brådskande för att avbryta en skärmläsare, som ett fel i kassan, och aldrig för en helgrabatt;
3. rubriknivån smälter in i den omgivande sidan i stället för att introducera en andra huvudrubrik.

Återanvändbara HTML-sektioner när innehållet ändras

Innehållet i meddelanden ändras ofta oftare än resten av sidan. När en butik byter ut en notis om avvikande öppettider mot en kampanj ser stabil kod till att detta bara kräver ny text och en ny länk.

Mobila layouter visar snabbt om ordningen i koden är logisk: när elementen staplas på varandra möter besökarna dem i precis den ordning som koden anger. En CTA ska följa den text den beror på, oavsett var den placeras på en bred skärm. Nicepage erbjuder Responsive Modes för att granska layouter från stora skärmar ner till mobiltelefoner – ett snabbt sätt att kontrollera ordningen i alla vyer.

Block kan utgöra en återanvändbar startsektion, samtidigt som meddelandet förblir vanlig text i stället för en bild.

En bra HTML-mall för meddelanden gör det möjligt att byta ut rubrik, statusinformation och CTA utan att bygga om sektionen. Om ett byte från underhållsmeddelande till rea kräver mer arbete än så, är koden onödigt komplicerad.