Jordbruksprodukter HTML-mall

Ett komplett processavsnitt för färska råvaror i statisk HTML

Rubriken ”Direkt från gården till dörren” och den inledande texten förmedlar ett tydligt budskap om råvaruleverans innan de återkommande stegen tar vid. Därunder förklarar tre rader processens moment: att välja lådtyp, anpassa produkterna och lägga till andra varor från gården. Varje rad är utformad som en sammanhållen innehållsenhet med en rund produktbild, rubrik, avgränsare, beskrivning och läs mer-länk. Tillsammans ger dessa enheter en statisk HTML-sida ett färdigt process- eller tjänsteavsnitt istället för en samling lösryckta element.

Den vertikala ordningen är avgörande för förståelsen av avsnittet. Den centrerade introduktionen sätter ramen för ämnet, varpå raderna leder besökaren från ett inledande val vidare till anpassning och tilläggsprodukter. Bilderna ligger genomgående till vänster vilket skapar en stabil läsordning, medan textgrupperna till höger förmedlar detaljerna. Röda linjer och länkar skapar visuell kontinuitet mot den vita bakgrunden utan att kräva någon mer avancerad interaktionsmodell.

Placerat på en statisk HTML-sida eller webbplats kan detta block bära sitt budskap om ekologiska råvaror på egen hand, medan angränsande avsnitt hanterar navigering, övergripande presentationer, köpinformation eller kontaktuppgifter. Det är därmed en färdig avsnittslayout för ett specifikt syfte, snarare än en hel sida eller webbplats. Text, bild, avstånd och länkar kan enkelt anpassas efter det omgivande statiska projektet med bibehållen struktur i tre steg.