Proporcje

Gdy chodziłem do gimnazjum i liceum, na chemii poznałem bardzo ciekawą metodę obliczania tego, ile procent z danej liczby stanowi inna liczba: proporcję. Wyglądało to mniej więcej tak:

60 – 100%
20 – x

Pozwalało to w prosty sposób naocznie zobaczyć, co się tak naprawdę liczy. I być może jestem “wzrokowcem”, ale tę metodę liczenia procentów stosuję do dzisiaj. Łatwiej się mi przy jej pomocy myśli. I uzmysławia coś jeszcze innego: że procenty (proporcje) to nic innego jak relacje jednych liczb do drugich.

Ale dlaczego o tym wspominam? Nie ukrywam, że uważam, że przyszłością stylowania stron WWW jest deklaratywny design. U jego podstaw leży proste założenie: sugerujmy przeglądarce, nie nakazujmy. W dobie responsywności nie brzmi ono aż tak obrazoburczo, jak w czasach, gdy królował pixel perfect. Ale mimo wszystko wciąż bardzo często myśli się “sztywno”, w pikselach. Chyba najlepszym przykładem takiego myślenia jest ustawianie domyślnej wielkości fonta w pikselach, żeby mieć pełną kontrolę nad tym, jak strona będzie się skalować przy użyciu jednostek rem i em. Bardziej nieoczywistą odmianą tej techniki jest ustawianie wielkości fonta na 62.5%, co wynika z prostego (ale błędnego) założenia: domyślny rozmiar fonta to 16 pikseli. Zatem 62.5% da nam 10 pikseli i tym samym ułatwi obliczenia. Według mnie to złe podejście. Uważam, że stosowanie em i rem ma największy sens wtedy, gdy nie myśli się w ogóle sztywnymi rozmiarami, a zaczyna myśleć proporcjami i relacjami pomiędzy poszczególnymi elementami strony.

Najważniejszym elementem strony jest jej treść. Zatem to właśnie ona powinna być punktem odniesienia dla pozostałych elementów naszej strony. Na najbardziej atomowym poziomie treść to tekst. I tutaj dochodzimy do jednostek em i rem. Jeśli wykorzystamy je do nadania wymiarów poszczególnych elementów strony, to będą się one skalować razem z treścią. W zdecydowanej większości przypadków jest to pożądane zachowanie. Co więcej, najlepiej pominąć ustawianie wielkości fonta w pikselach. Ustawmy go w emach, remach, względnie procentach. A już idealnie byłoby nie ustawiać bazowej wielkości fonta w ogóle. I tutaj dochodzimy chyba do najbardziej kontrowersyjnego elementu podejścia, o którym piszę: nieustawienie bazowej wielkości fonta odbiera osobie webdeveloperskiej kontrolę (czy też jej poczucie) nad tym, jak strona się będzie zachowywać.

I tak, brak dokładnej znajomości bazowej wielkości fonta nie pozwala na precyzyjne zaplanowanie, co i jak będzie się na stronie skalować. A przynajmniej – nie  osobie webdeveloperskiej. Omijając to jedno font-size w kodzie, oddajemy sporą kontrolę osobie użytkowniczej. To ona może sobie dowolnie ustalić wielkość fonta w swojej przeglądarce, a nasza strona radośnie się dostosuje. I w pełni rozumiem opór, jaki może zrodzić się u wielu osób webdeveloperskich. Jakby nie patrzeć, jest to rewolucyjna zmiana sposobu myślenia. Dotąd było się osobą mistrzowską cukiernictwa, która dbała o każdy najdrobniejszy detal cukiernicznych arcydzieł. I nagle, po latach, oddaje się całą pracę w ręce osoby praktykanckiej, która dostaje jedynie przepisy na te arcydzieła. A my możemy się jedynie przyglądać z boku i patrzeć, jak sobie radzi. I zapewne ręce będą świerzbić, gdy tort będzie miał inne zdobienia, niż te, które zawsze robiliśmy, albo gdy idealnie okrągły ptyś nagle będzie bardziej eliptyczny. Ale co jeśli to właśnie ten niedoskonały ptyś będzie lepiej smakował osobie, która przyszła kupić u nas ciastko? Taką osobą praktykancką jest przeglądarka, a przepisami – style oparte na proporcjach. Natomiast osobą kupującą w naszym sklepie – każda osoba użytkownicza naszej strony. A to przecież ona jest tutaj najważniejsza.

Przekazując większą władzę przeglądarce (a zatem pośrednio także i samej osobie użytkowniczej), mamy w zasadzie do dyspozycji tylko proporcje. Nie wiemy, ile wyniesie wielkość fonta, ale wiemy, jak poszczególne elementy mają wyglądać względem tej wielkości. Ot, taki nagłówek pierwszego stopnia – powinien być dwa razy większy od standardowej wielkości tekstu:

h1 {
    font-size: 2em;
}

A ten moduł powinien być szeroki na jakieś 30 znaków:

.component {
    width: 30em;
}

Takie myślenie można też przenieść na poziom media queries czy – bardziej nowocześnie – container queries:

@media screen and ( min-width: 60rem ) {
    .figure {
        float: left
    }
}

Także współczesne systemy layoutu mają proporcje niejako wbudowane. Ba, grid oferuje nawet jednostkę fr, która jest właśnie tym – proporcją. A idąc jeszcze dalej: sam tekst też można skalować proporcjonalnie do viewportu czy kontenera.

Zdaję sobie sprawę, że brzmię jak fanatyk proporcji, ale naprawdę uważam, że to jest kwintesencja prawdziwej responsywności. Bo nie da się pełniej odpowiedzieć na preferencje osoby użytkowniczej, niż w sytuacji, gdy oddaje się jej kontrolę nad jednym z najbardziej podstawowych aspektów designu – wielkością fonta. A na tym przecież polega responsywność: odpowiadaniu na preferencje osoby użytkowniczej.

Przesiadka na takie myślenie może być trudna, mnie zajęła kilka lat. Na samym początku warto sobie zadawać pytanie: dlaczego dany element ma taki a nie inny rozmiar w em/rem? Np. nagłówek h1 ma wielkość fonta 2em – czemu? Jeśli odpowiedź brzmi “bo powinien mieć 32px, a domyślna wielkość fonta to 16px”, to znak, że wciąż myślimy pikselami. W takim wypadku można spokojnie nadać takiemu nagłówkowi wielkość fonta w tych pikselach. Przeglądarki i tak powinny ogarnąć powiększanie (w miarę) dobrze. Jeśli natomiast brzmi “bo powinien być dwukrotnie większy niż standardowy tekst”, to właśnie wkraczasz do magicznego świata proporcji…!

Ale nie wyrzucaj jeszcze pikselów! Są bowiem miejsca, w których zdecydowanie lepiej użyć właśnie ich. To wszelkiego rodzaju obramowania, ramki, ale też – co brzmi dość nieintuicyjnie – marginesy zewnętrzne i wewnętrzne. W tych przypadkach piksele mogą sprawdzić się lepiej. Natomiast w większości innych – proporcje!

Źródła

Dodatkowe materiały