Szín HTML Sablonok

Egyértelmű tartalmi sorrendre épülő színes HTML-sablonok

Egy asztali demóban három szolgáltatásblokk három különböző háttéren kifejezetten tudatos tervezés benyomását kelti. A színek egymás mellett helyezkednek el, a kontraszt a kompozíció része, és a teljes sor egyetlen pillantással áttekinthető. Nyissa meg ugyanezt a sablont egy telefonon, és a blokkok élénk téglalapok függőleges sorává válnak. Semmi sem változott, csupán a tartalom megjelenési sorrendje, és most ez a sorrend hordozza a teljes oldalt.

Amikor az oszlopok függőleges halmokká válnak

Egymás mellett a színes háttér finoman jelzi, hogy három elem összetartozik. Egymásra halmozva azonban ez az üzenet elvész, mivel a látogató nem látja őket egyszerre. Egy színes HTML-sablon vagy rendelkezik egy alatta lévő struktúrával, amely összetartja a csoportosítást, vagy a palettára hárul az összes feladat.

Három dolgot érdemes ellenőrizni, mielőtt véglegesítene egy fájlt:

1. Képzelje el, hogy a hátterek eltűntek, és nézze meg, hogy a szakaszok továbbra is elkülönülnek-e. Ha csak színként léteznek, valójában egyáltalán nem léteznek.
2. Olvassa végig a telefonos nézetet fentről lefelé, és bizonyosodjon meg róla, hogy a sorrend az asztali kompozíció nélkül is a kívánt történetet meséli el.
3. Figyeljen minden olyan elemre, amelyet kizárólag szín különböztet meg: kategóriákra, elérhetőségre vagy kiemelt elemekre. A látogatónak a szavak alapján is fel kell ismernie a különbséget.

Átrendeződést túlélő forráskód

A címsorok még az elrendezés megváltozása esetén is fenntartják a csoportosítást. Amikor minden szolgáltatás vagy esettanulmány saját címsorral indul, és a hasonló elemek ugyanazt a struktúrát ismétlik, a csoportosítás megmarad. Az olvasó még egy egyszerű, sima háttéren is tudja, hol ér véget az egyik elem, és hol kezdődik a következő. A Nicepage Grid Element a szövegeket, képeket és gombokat olyan cellákba helyezi, amelyek kisebb képernyőkön átrendeződnek, a Responsive Modes pedig lehetővé teszik a telefonos nézet különálló ellenőrzését az asztali változattól függetlenül.

Három dolgot érdemes megvizsgálni a keskenyebb nézetben:

1. Minden színes blokk továbbra is címsorral nyit, beleértve a hero szekció alatt jóval mélyebben elhelyezkedőket is.
2. Az összehasonlítható kártyák megőrzik ugyanazt a belső struktúrát ahelyett, hogy három eltérő, egyedi változattá alakulnának.
3. A szöveg könnyen olvasható marad bármelyik kiemelőszínen, amelyre az elemek halmozódása során kerül.

Egy szürkeárnyalatos gondolatkísérlet

Ez a leggyorsabb módszer egy színes HTML-sablon megítélésére: képzelje el az oldalt teljesen fehér hátterekkel és szürke kiemelésekkel. Még mindig meg tudja állapítani, milyen szakaszok léteznek, mely elemek tartoznak össze, és mi élvez prioritást? Ha a válasz igen, a paletta olyan merész lehet, amilyennek a projekt megkívánja. Ha az oldal szétesik, akkor a szín pusztán egy olyan struktúrát tartott fenn, amelyet valójában senki sem épített fel.