Zwitsers HTML-sjablonen

Gebruiksvriendelijke Zwitserse HTML-templates voor gestructureerde webpagina's

De rust van een Zwitserse lay-out gaat in de code snel verloren. Wat op het scherm een strak raster lijkt, kan bij de eerste bewerkingen uiteenvallen tenzij de markup langs dezelfde lijnen is verdeeld. Goed gemaakte Zwitserse HTML-templates doen dit vanaf het begin goed door contentzones af te stemmen op kolommen en herhalende eenheden voor projecten en artikelen.

Markup gebouwd rond kolommen

In Zwitserse compositie heeft elk stuk content een afgebakende zone op het raster, en de markup geeft die zones vorm. De patronen die het eerst de moeite waard zijn om te controleren, zijn degene die zich herhalen:

• Een projectindex waarvan de rijen dezelfde onderdelen delen, zoals een nummer, een titel en een thumbnail, elk gereed voor een eigen kolom.
• Een portfolio-item dat een breed beeldgebied gescheiden houdt van een smal tekstgebied, zodat de asymmetrische verdeling behouden blijft bij een nieuwe foto of een langere beschrijving.
• Een redactioneel artikel waarvan de kop en tussenkoppen vaste kopniveaus behouden, zodat de volgorde van belangrijkheid in de markup verankerd ligt.
• Een compact specificatieblok voor locatie, jaar en klant dat naast de hoofdtekst staat.

Waar witruimte thuishoort

Zwitserse ontwerpers gebruiken ruimte om groepen informatie te scheiden, en een template behoudt dat ritme alleen als de markup dezelfde grenzen trekt. Wanneer de studioprofilering, de projectenlijst en de contactgegevens in afzonderlijke gebieden leven, kan elk daarvan veranderen zonder de tussenruimte rond de andere te verstoren. Doordacht asymmetrische lay-outs leunen hier nog sterker op. Een kop met een lege kolom ernaast, of een korte notitie die ver naar rechts is geplaatst, behoudt zijn positie wanneer elk element een afzonderlijke eenheid in de code vormt.

Code gevormd door projecten of artikelen

Twee Zwitserse templates kunnen er in een screenshot bijna identiek uitzien en toch voor verschillende doeleinden dienen. Een portfoliotemplate is georganiseerd rond herhaalbare projecteenheden, zodat het toevoegen van een nieuw project vooral neerkomt op het kopiëren van een bestaand blok en het vervangen van de inhoud. Een redactionele template besteedt meer aandacht aan lange tekst, met een diepere schaal aan tussenkoppen, uitgelichte citaten en artikellijsten die leesbaar blijven in een smalle kolom.

Als u van plan bent het ontwerp in Nicepage aan te passen, te exporteren als HTML en verder te werken aan de code, controleer dan of de herhaalde eenheden van de template aansluiten bij uw inhoud. Wanneer de markup uw projecten of artikelen al weerspiegelt, bestaat de ontwikkeling enkel uit invullen en verfijnen, en blijft het raster dat u overtuigde behouden.