Kolorowe szablony HTML oparte na przejrzystej kolejności treści

W wersji demonstracyjnej na komputerze trzy bloki usług na trzech różnych tłach wyglądają na celowe. Kolory są umieszczone obok siebie; kontrast jest częścią kompozycji, a cały wiersz jest czytelny na pierwszy rzut oka. Otwórz ten sam szablon na telefonie, a te bloki staną się pionowym ciągiem jasnych prostokątów. Nic się nie zmieniło poza kolejnością pojawiania się treści, która teraz obejmuje całą stronę.

Kiedy kolumny stają się pionowymi stosami

Kolorowe tło obok siebie dyskretnie sygnalizuje, że trzy elementy są ze sobą powiązane. Ułożone jeden na drugim, przekaz znika, ponieważ czytelnik nigdy nie widzi ich jednocześnie. Szablon kolorów HTML albo ma coś pod spodem, co utrzymuje grupowanie, albo paleta wykonuje całą pracę.

Warto wykonać trzy sprawdzenia przed podjęciem decyzji o pliku:

1. Wyobraź sobie, że tła zniknęły i sprawdź, czy sekcje nadal są od siebie oddzielone. Jeśli istnieją tylko jako kolory, to w ogóle ich nie ma. 2. Przeczytaj widok telefonu od góry do dołu i upewnij się, że sekwencja przedstawia pożądaną historię, z pominięciem kompozycji pulpitu.
2. Poszukaj elementów wyróżniających się samym kolorem: kategorii, dostępności, polecanych elementów. Odwiedzający powinien być w stanie odróżnić je również od słów.

Znaczniki, które przetrwają zmianę kolejności

Nagłówki zachowują grupowanie pomimo zmiany układu. Gdy każda usługa lub studium przypadku otwiera się z własnym nagłówkiem, a porównywalne elementy powtarzają tę samą strukturę, grupowanie jest zachowane. Czytelnik wie, gdzie kończy się jeden element, a zaczyna następny, nawet na jednolitym tle. Element siatki Nicepage umieszcza tekst, obrazy i przyciski w komórkach, które zmieniają układ na mniejszych ekranach, a tryby responsywne pozwalają sprawdzić widok telefonu oddzielnie od widoku pulpitu.

W tym węższym widoku warto zwrócić uwagę na trzy rzeczy:

1. Każdy kolorowy blok nadal otwiera się z nagłówkiem, w tym te znajdujące się daleko pod bohaterem. 2. Porównywalne karty zachowują tę samą strukturę wewnętrzną, zamiast przekształcać się w trzy niestandardowe warianty.
2. Tekst pozostaje czytelny na dowolnym akcencie, na którym się znajduje, po uformowaniu stosu.

Eksperyment myślowy w skali szarości

Oto najszybszy sposób oceny szablonu kolorów HTML. Wyobraź sobie stronę z każdym tłem ustawionym na białe, a każdym akcencie na szare. Czy nadal potrafisz określić, które sekcje się tam znajdują, które elementy do siebie pasują i co jest pierwsze? Jeśli odpowiedź brzmi tak, paleta barw może być tak jaskrawa, jak wymaga tego projekt. Jeśli strona się rozpada, kolor podtrzymywał strukturę, której nikt nie zbudował.