Schweizisk HTML-mallar

Lättanvända schweiziska HTML-mallar för strukturerade webbsidor

Lugnet i en schweizisk layout går lätt förlorat i koden. Det som ser ut som ett strikt rutnät på skärmen kan brytas upp vid första redigeringsrundan om inte koden är uppdelad längs samma linjer. Välkonstruerade schweiziska HTML-mallar gör detta rätt från början genom att matcha innehållszoner mot kolumner och upprepade enheter för projekt och artiklar.

Kodstruktur byggd kring kolumner

I schweizisk komposition äger varje del av innehållet en definierad zon i rutnätet, och koden ger dessa zoner form. De mönster som är värda att granska först är de som upprepar sig:

• Ett projektindex vars rader delar samma delar, såsom ett nummer, en titel och en miniatyrbild, var och en redo för sin egen kolumn.
• Ett portföljinlägg som håller ett brett bildområde åtskilt från ett smalt textområde, så att den asymmetriska uppdelningen överlever ett nytt foto eller en längre beskrivning.
• En redaktionell artikel vars rubrik och underrubriker behåller fasta rubriknivåer, så att prioritetsordningen finns bevarad i koden.
• Ett kompakt specifikationsblock för plats, år och kund som placeras bredvid huvudtexten.

Var tomrummet hör hemma

Schweiziska formgivare använder tomrum för att separera informationsgrupper, och en mall behåller den rytmen endast om dess kod drar samma gränser. När studiopresentationen, projektlistan och kontaktuppgifterna ligger i distinkta regioner kan vilken som helst av dem ändras utan att mellanrummen runt de andra störs. Medvetet asymmetriska layouter förlitar sig ännu mer på detta. En rubrik med en tom kolumn bredvid sig, eller en kort notis som skjutits långt till höger, behåller sin position när varje element är en separat enhet i koden.

Kod formad av projekt eller artiklar

Två schweiziska mallar kan se nästan identiska ut i en skärmdump och ändå tjäna helt olika syften. En portföljmall är organiserad kring repeterbara projektenheter, vilket innebär att det att lägga till ett nytt projekt mest handlar om att kopiera ett befintligt block och ersätta dess innehåll. En redaktionell mall lägger mer fokus på längre texter, med en djupare rubrikskala, citatblock och artikellistor som förblir lättlästa i en smal kolumn.

Om du planerar att anpassa designen i Nicepage, exportera den som HTML och fortsätta arbeta med koden, bör du kontrollera att mallens upprepade enheter matchar ditt innehåll. När koden redan speglar dina projekt eller artiklar blir utvecklingen en fråga om att fylla i och finjustera, och rutnätet som fick dig att välja mallen förblir intakt.