Svájci HTML Sablonok

Könnyen használható svájci stílusú HTML-sablonok strukturált weboldalakhoz

A svájci elrendezés nyugalma könnyen elveszhet a kódban. Ami a képernyőn szigorú rácsnak tűnik, az már az első szerkesztési körben széteshet, hacsak a kódstruktúra nincs ugyanezen vonalak mentén felosztva. A jól felépített svájci stílusú HTML-sablonok már a kezdetektől jól kezelik ezt, a tartalmi zónákat oszlopokhoz és ismétlődő egységekhez igazítva mind a projektek, mind a cikkek esetében.

Oszlopok köré épített kódstruktúra

A svájci kompozícióban minden tartalmi elem meghatározott zónával rendelkezik a rácson, és a kód ad formát ezeknek a zónáknak. Az alábbi ismétlődő mintákat érdemes először ellenőrizni:

• Olyan projektindex, amelynek sorai azonos részekből állnak, mint például egy sorszám, egy cím és egy bélyegkép, mindegyik készen a saját oszlopára.
• Olyan portfólióbejegyzés, amely a széles képes területet elkülöníti a keskeny szöveges területtől, így az aszimmetrikus elrendezés egy új fénykép vagy hosszabb leírás esetén is megmarad.
• Olyan szerkesztőségi cikk, amelynek főcíme és alcímei rögzített címsorszinteket tartanak fenn, így a fontossági sorrend magában a kódstruktúrában él.
• Egy kompakt specifikációs blokk a helyszín, az év és az ügyfél számára, amely a főszöveg mellett helyezkedik el.

Ahol a térközöknek helyük van

A svájci tervezők a teret az információcsoportok elválasztására használják, és egy sablon csak akkor őrzi meg ezt a ritmust, ha a kódja ugyanazokat a határokat húzza meg. Amikor a stúdió bemutatkozása, a projektlista és az elérhetőségek különálló régiókban helyezkednek el, bármelyikük módosítható anélkül, hogy megzavarná a többiek körüli távolságokat. A szándékoltan aszimmetrikus elrendezések még inkább erre támaszkodnak. Egy mellette üres oszloppal rendelkező főcím vagy egy egészen jobbra tolt rövid megjegyzés megőrzi a helyét, ha a kódban minden elem külön egységet alkot.

Projektek vagy cikkek által formált kód

Két svájci sablon egy képernyőképen szinte azonosnak tűnhet, mégis eltérő célokat szolgálhat. Egy portfóliósablon az ismételhető projektegységek köré szerveződik, így egy új projekt hozzáadása leginkább egy meglévő blokk másolását és tartalmának kicserélését jelenti. Egy szerkesztőségi sablon nagyobb hangsúlyt fektet a hosszú szövegekre, mélyebb címsor-hierarchiával, kiemelt idézetekkel és olyan cikklistákkal, amelyek egy keskeny oszlopban is olvashatóak maradnak.

Ha a dizájnt a Nicepage-ben tervezi testreszabni, HTML-ként exportálni, és tovább dolgozni a kódon, ellenőrizze, hogy a sablon ismétlődő egységei illeszkednek-e a tartalmához. Amikor a kód már hűen tükrözi projektjeit vagy cikkeit, a fejlesztés egyszerű kitöltéssé és finomhangolássá válik, és a rács, amely meggyőzte Önt a sablonról, sértetlen marad.