Vykort HTML-mallar

Rena HTML-mallar för vykort för digitala meddelanden

Resemärken, fotografer och eventteam skickar vykort byggda kring en enda stark bild och några rader text. HTML-mallar för vykort förvandlar den kombinationen till återanvändbara sektioner: en bildbehållare med alt-text, ett innehållsavsnitt för hälsningen och ett metadatablock för avsändare och datum. Ett länkområde följer vanligtvis. Fotografiet berättar historien, medan de omgivande avsnitten ger sammanhang.

HTML-block för bild-, meddelande- och avsändarinformation

En vanlig metod speglar den tvåsidiga logiken hos ett tryckt kort: ett visuellt ansikte och ett skriftligt ansikte, vart och ett markerat som ett separat avsnitt. En sida-vid-sida-layout är en annan vanlig modell, med bilden i en kolumn och anteckningen i nästa. Blocken förblir desamma i båda modellerna; bara deras arrangemang ändras.

Dessa områden förblir vanligtvis som separata block:

• ett bildområde med alt-text som namnger destinationen eller tillfället;
• ett meddelandeområde för hälsningen och den korta historien bakom den;
• ett bildtext- eller metadataområde med plats, datum och avsändare;
• ett åtgärdsområde för ett svar, en gallerilänk eller en OSA.

Markeringsalternativ bakom olika vykortsscenarier

Ett resekort börjar vanligtvis med destinationsbilden, och meddelandet under det namnger platsen. Ett händelsekort kan förskjuta balansen mot datum- och registreringslänken, så dessa element bör ha sina egna behållare snarare än att visas som en rad i en bildtext. En säsongshälsning, ett fotominne eller ett kort meddelande återanvänder samma block med olika betoning. Vissa projekt markerar också en baksida när en digital version återskapar en tryckt version, med adresszonen bredvid den skrivna meddelandet.

Källordning som överlever en smal skärm

Själva markeringen avgör källordningen. Den bör följa den sekvens som en läsare är tänkt att gå igenom, vilket för de flesta vykort går från bilden till avsändaren och sedan till länken. När kolumnerna kollapsar till en kan ett långt foto fylla den första skärmen och skjuta hälsningen och svaret ur sikte, så båda förtjänar att ses med den bredden. Markeringen definierar vad varje block är och var det kommer ifrån; hur det ser ut hanteras av ett annat lager.

Med Nicepage Responsive Modes kan du kontrollera den ordningen på stationära datorer, surfplattor och telefoner medan layouten fortfarande finns i redigeraren. HTML-exportarbetsflödet omvandlar sedan den färdiga designen till filer som du kan redigera vidare eller publicera som den är.

En bra mall handlar om några få kontroller: den visuella hierarkin förblir tydlig, budskapet lever vidare och avsändarinformationen förblir användbar oavsett bredd.