Ansichtkaart HTML-sjablonen

Strakke HTML-sjablonen voor ansichtkaarten voor digitale berichten

Reismerken, fotografen en evenemententeams versturen ansichtkaarten met één sterke afbeelding en een paar regels tekst. HTML-sjablonen voor ansichtkaarten zetten deze combinatie om in herbruikbare onderdelen: een afbeeldingsgedeelte met alt-tekst, een inhoudsgedeelte voor de begroeting en een metadatablok voor de afzender en datum. Meestal volgt daar een linkgedeelte. De foto vertelt het verhaal, terwijl de omringende onderdelen context bieden.

HTML-blokken voor afbeelding, bericht en afzendergegevens

Een veelgebruikte aanpak is gebaseerd op de tweezijdige structuur van een gedrukte kaart: een visuele kant en een geschreven kant, elk gemarkeerd als een apart onderdeel. Een lay-out naast elkaar is een ander veelvoorkomend model, met de afbeelding in de ene kolom en de tekst in de volgende. De blokken blijven in beide modellen hetzelfde; alleen de indeling verschilt.

Deze onderdelen blijven meestal aparte blokken:

• een afbeeldingsgedeelte met alt-tekst die de bestemming of de gelegenheid aangeeft;

• een berichtgedeelte voor de begroeting en het korte verhaal erachter;

• een onderschrift of metadata-gebied met locatie, datum en afzender;

• een actiegebied voor een antwoord, een link naar een galerij of een RSVP.

Markeeropties voor verschillende ansichtkaartscenario's

Een reiskaart begint meestal met de afbeelding van de bestemming, en de notitie eronder vermeldt de plaats. Een evenementenkaart verschuift de nadruk vaak naar de datum en de link voor registratie, dus die elementen moeten hun eigen vakjes hebben in plaats van als een regel binnen een onderschrift te verschijnen. Een seizoensgroet, een fotoherinnering of een korte aankondiging hergebruikt dezelfde blokken met een andere nadruk. Sommige projecten markeren ook de achterkant wanneer een digitale versie een gedrukte versie nabootst, met het adresgebied naast de geschreven notitie.

Bronvolgorde die geschikt is voor een smal scherm

De markup zelf bepaalt de bronvolgorde. Deze moet de volgorde volgen die een lezer moet doorlopen, wat voor de meeste ansichtkaarten van de afbeelding naar de afzender en vervolgens naar de link loopt. Wanneer de kolommen samenvallen tot één, kan een hoge foto het eerste scherm vullen en de begroeting en het antwoord buiten beeld duwen. Daarom verdienen beide het om op die breedte goed zichtbaar te zijn. De markup definieert wat elk blok is en waar het vandaan komt; hoe het eruitziet, wordt door een andere laag bepaald.

Met Nicepage Responsive Modes kunt u die volgorde controleren op desktops, tablets en telefoons terwijl de lay-out nog in de editor staat. De HTML-exportworkflow zet het voltooide ontwerp vervolgens om in bestanden die u verder kunt bewerken of direct kunt publiceren.

Een goede template voldoet aan een paar eisen: de visuele hiërarchie blijft duidelijk, de boodschap blijft zichtbaar en de gegevens van de afzender blijven bruikbaar op elke breedte.