#8 Czego designerzy nie wiedzą o frontendzie? Mariusz Heyda i Michał Mazur

Więc kiedyś nie było potrzeby robienia aż tylu wersji responsywnych. Lub były, ale to też były powiedzmy robione prostsze rzeczy, które rzeczywiście przeskakiwały nam te layouty. Desktop. I te desktopy też się mniej różniły. Był po prostu ten 1024 i pod to się projektowało 768 pod tablet. O Jezu, tak, to jest ogólnie szumniałość 1024. I robiło się to wszystko na gridzie 960, więc cały content strony mieścił się w 960 pikselach i to wystarczyło, żeby pokryć wszystkie case'y wyświetlania tej strony na laptopach i monitorach. Nie oszukujmy się, kiedyś nie było tyle urządzeń różnych, tak? Teraz mamy Apple Watcha, mamy jakieś no też mniejsze, większe telefony, tablety, więc ta responsywność naprawdę musi być teraz kompleksowa, nie? To nie jest tak, że zrobimy sobie dwa layouty i jakość się złoży, bo to jakość się po prostu nie złoży, nie?

Wielkie dzięki i do zobaczenia! Ten schemat tylko odwrócony w innej linii, że to nie już jest X a Y, więc tak naprawdę Flexbox dużo namieszał, ale namieszał pozytywnie, ale też namieszał, bo oczywiście się potem zmieniło to, jak designerzy pracowali i to, jak rozumieli właśnie, jak się składa web, bo jeżeli ktoś pracował kiedyś, to też inaczej to rozumiał, więc przyszedł Flexbox, przyszedł też Grid, o czym też później wspomnimy, więc to tak naprawdę też dało nam dużo większe możliwości I to, co mówiliśmy na samym początku, właśnie mobilki, bo to też jest istotne, że jeżeli tworzymy taką stronę, no to jednak na mobilce chcielibyśmy mieć niektóre elementy wyżej bądź niżej, a na desktopie rzeczywiście, na przykład newslety, chcielibyśmy niżej.

Więc grid czy flexbox na takie rzeczy nam bardzo łatwo pozwala, gdzie kiedyś naprawdę to była katorga, żeby takie rzeczy robić. Trzeba albo tworzyć nową wersję M o net mobilną, albo w ogóle, nie wiem, kombinować i Robić, co to najgorsze się kiedyś robiło, co Google w ogóle zaczął to wyłapywać, czyli ukrywanie tego elementu całkowicie i montowanie go jeszcze raz na dole i ten element był tak naprawdę dwa razy, nie? Google takie rzeczy widzi, że są się sukryte, nie? Tak samo, jeżeli wrzucamy sobie w stopce jakieś teksty jednopikselowe, białe na białym tle, Google też to widzi, nie? Więc takie oszukiwanie, w sensie hakowanie, bym powiedział, nawet rzeczy, się później zemści, jakby nie patrzeć, nie? Więc bardzo się cieszę, że weszły te porządne technologie, które nam pozwalają porządnie pracować, nie? Tak, tak. No i jakby designerzy też powinni sobie z tych technologii zdawać sprawę.

Powinni je rozumieć i myślę, tak jak kiedyś, tak jak teraz, powinni sobie zdawać właśnie sprawę z ograniczeń, bo nawet jak mówimy o tym lejaucie na Flexbox czy Grid właśnie w CSS-ie, które umożliwiają nam bardzo elastyczne pozycjonowanie elementów na stronie, prawie wszystko, no to kiedyś, gdybyśmy mieli layout, gdzie mamy powiedzmy Kiedyś byłaby to katorga, żeby to ułożyć. Trzeba by naprawdę kombinować albo z jakimiś przezroczystymi PNGami, albo ręcznie ustawiać marginesy do wszystkich elementów. Natomiast teraz już jesteśmy w stanie to w bardzo łatwy sposób wypozycjonować i designerzy też powinni sobie zdawać z tego sprawę. Wydaje mi się, że to, co jest możliwe w sieci i to, co sprawia problem frontendowcom, trochę się przesunęło na inne rzeczy.

Kolumne contentowo ograniczone do takiego momentu właśnie, żeby dało się to składać. Poza tym mi się wydaje, że to też chyba nie dla nas, ale też właśnie projektując chociażby blogi, to też są jakieś zasady typografii, ile tekstu na linijkę, żeby to się przyjemnie czytało, nie? Więc to wydaje mi się, że to nawet nie trzeba myśleć stricte o deweloperze, tylko po prostu projektować... Definiować takie też ramy, w których ten layout będzie się mieścił. Ogólne ramy, ogólnego grida, czyli powiedzmy to ułożenie kolumn, które ma obowiązywać. I to też ty jako deweloper możesz podejrzeć w Figmie, możesz zreplikować u siebie w kodzie. I to rzeczywiście są takie rzeczy, o których warto pamiętać i trzymać się. Po pierwsze powoduje, że ten design będzie harmonijny i będzie łatwiej się projektował, po drugie chyba jednak łatwiej dla was do wdrażania tego potem.

Ok, to żeby też nie płynąć tutaj, nie wymieniać każdego propertisa CSS, to bardzo to upraszczając, myślę, że na pewno to, co mówiliśmy, floaty bym już w ogóle zerknął do lamusa, czyli wydaje mi się, że designer pewnie powinien się zainteresować flexboxem i gridem, zrobić sobie jakieś może ćwiczonko właśnie, żeby poznać, jak to działa. Myślę, że też a propos samych fontów, to też jest poniekąd CSS i to, jak się zachowuje font, tak jak mówiliśmy, ten ex-charakter, gdzie rzeczywiście line-hejty na webie będą troszkę inne, więc wydaje mi się, że też warto poznać to, jak się to zachowuje, jak się łamie, czym jest w ogóle na webie ten vertical rytm i jak to działa trochę inaczej jednak niż w Figma. I w sumie bym powiedział nawet, że to tyle z CSS-ów. Szczerze, nie wymagałbym wcale więcej niż to, jak się zachowuje layout, Ale na pewno bym zwrócił uwagę, jak designerzy robią, żeby zwracali szczególną uwagę na SVG, bo SVG lubią się mścić, szczególnie na Safari, lubią się mścić, jeżeli mają sobie clip-off niepotrzebny czy maski, więc to jest coś, co designerzy powinni na pewno zwrócić uwagę, jak taki SVG powinien wyglądać prawidłowy i starać się właśnie robić SVG