Zasady pomniejsze

Jeszcze wczoraj dostałem do pocięcia pewien layout. Prosta stronka, żadne wyzwanie, a przy okazji wyraźnie pokazująca, czego nie powinniśmy robić projektując strony.

Niestety samego layoutu pokazać wam nie pokażę, bo nie za bardzo mogę :) Pisać na szczęście nikt nie może mi zabronić, więc zapraszam do dalszej lektury, w której opiszę kilka punktów, które często spotykam podczas cięcia layoutów, które dostaję od różnych grafików.

Różny wygląd tych samych elementów na podstronach

Normalnie zmora frontendowców, którzy dostają layouty do pocięcia. Na jednej stronie tekst odsunięty jest od nagłówka o 30px, na następnej już o 45, a z kolei na kolejnej o 60. Jakby tego było mało, często gęsto nagle pojawiają się odstępy, które nie wynikają z niczego, pola w formularzach nagle stają się innych rozmiarów, wygląd się zmienia itp. We wczorajszym layoucie grafik poszedł jeszcze dalej tworząc na każdej podstronie różnych kolorów linki, różnych kolorów breadcrumby itp.
Błąd! Elementy strony to klocki, które powinny być używane na wszystkich podstronach w ten sam sposób. Jeżeli są odstępstwa od tego, wtedy używamy dodatkowych klas, ale powinny to być nieliczne wyjątki, a nie reguła dla całego serwisu. Tu nie chodzi o wygodę kodowania ujednoliconych elementów (raz napisany styl można użyć w wielu miejscach), a o to, że odwiedzający NIE projektuje serwisu. Od na niego wchodzi i nie może czuć się zagubiony. Istnieje zasada, mówiąca o tym, że użytkownik w przeciągu 3 sekund musi się odnaleźć na stronie. Każde udziwnienie to tylko kolejna przeszkoda dla niego. O kodowaniu takich niespójności już nie wspomnę, szczególnie gdy używamy jakiś pluginów np do stylowania suwaków przewijania czy wyglądu formularzy… Kto próbował za pomocą pluginów nadać dwa różne odmienne wyglądy formularzom na tej samej stronie wie o czym mówię.

Nie przemyślana konstrukcja strony

Bardzo często tworząc layouty używamy zapychacza „Lorem ipsum” (moje ulubione stworzyłem sobie sam). Niestety jest to często dość zgubne, bo zamiast skupiać się na sensowności danego rozwiązania, zwyczajnie tworzymy „zapchaj dziury”.
Wczorajszy layout zawierał moduł aktualności. Niestety przez jeden błąd (sztywnych rozmiarów zdjęcie z boku modułu) treść tych aktualności stała się mocno sztywna. Tytuł aktualności musiał być jedno liniowy (bo więcej się nie mieściło), a treść niusa mogła zawierać maksymalnie dwie linijki. Na zaprojektowanym layoucie wygląda to całkiem atrakcyjnie, bo wszystko jest ładnie wyrównane i zapełnione odpowiednimi wycinkami Lorem (zawierającymi oczywiście idealnie dobrane długości tekstu). W praktyce jednak ani treść ani tytuł newsów nie będzie tak idealnie dopasowana. Albo zaczniemy to przycinać, albo nasz layout się wykrzaczy.

To tylko jednej z wybranych przykładów, których można wymieniać w nieskończoność. Czy slider jest niezbędny na danej stronie? A jeżeli jest, to w jakiej formie? Czy wstawiony w danym miejscu na laoucie Lorem ipsum spełnia jakąś funkcję, czy jest kolejną zapchaj dziurą? Czy dany tekst na pewno będzie długi na 10 linijek tekstu, czy po prostu tworząc layout wstawiłeś taki wycinek Lorema, bo tak ci pasowało? Warto to przemyśleć, bo mimo tego, że samo tworzenie layoutu się nieco wydłuży, to potem nam to zaoszczędzi i nerwów i czasu.

Zbyt mała czcionka

Z tym już na szczęście nie jest tak źle ostatnimi latami, chociaż zdarzają się wyjątki. We wczorajszym layoucie większość tekstów była pisana 10px Helveticą. Szczerze? Nie lubię tej czcionki. W Adobe wygląda średnio, a na niektórych systemach jest nieczytelna. Jest wiele ładniejszych czcionek, które spokojnie można znaleźć na Google Fonts.
Wracając do rozmiaru. Używanie tak małych rozmiarów tekstu nadaje pewnego minimalistycznego wyglądu, ale staje się równocześnie zupełnie nieużyteczne. Osobiście nie narzekam na swój wzrok, ale i tak miałem problemy z sensownym rozczytaniem tego, co było tam napisane. A przecież świat nie kończy się na mnie. Poza mną jest wiele osób z wadą wzroku, osób starszych, z gorszymi monitorami, z gorszym oświetleniem w domu itp. W dzisiejszych czasach schodzenie z czcionką poniżej 12px-13px jest totalnym przeżytkiem (chyba, że mówimy o malutkich tooltipach i podobnych pierdułkach). Bardzo fajny mini tekst o tym znajdziecie tutaj: http://kaikkonendesign.fi/typography/section/10. Ogólnie nie bójcie się używać dużych czcionek.

Nieznajomość cięcia stron

Jeden z najważniejszych punktów. Sporo grafików niestety nie posiada wiedzy odnośnie cięcia, przez co czasami dodają do layoutów małe dodatki, które totalnie niszczą porządne kodowanie, albo zmuszają do stosowania skryptów. Przykładem takim może być np poniższa ilustracja:

bledy-example

Na pierwszy rzut oka wszystko wygląda cacy. Niestety pan grafik dał ciała na całej linii. Na linii – to dobrze powiedziane. Po pierwsze wstawiając Lorem ipsum nie przewidział, czy tytuł będzie mógł mieć 1 czy 3 linijki długości. To samo z tekstem, który nie wiadomo ile będzie miał długości. To jednak nie jest najgorsze. Te mało widoczne linie oddzielające kończą się gradientami, które wcale nie tak łatwo osiągnąć. Dodatkowo layout zakłada, że środkowe „nowości” będą takiej samej wysokości, co jest błędnym założeniem. Gdyby były równe, wtedy środkową kreskę oddzielającą można by uzyskać przez zwykły lewy/prawy border. W praktyce teksty mogą być różnej długości, a przez to „boxy” mogą mieć różną wysokość. Czy lewy jest wyższy, czy prawy? Któremu ustawić border? Zwykła mała niewidoczna kreseczka, a przysporzyć może całkiem sporo problemów. Gdyby grafik ciął często layouty, mógł by kolejne aktualności dać w osobne obramowania, porzucić niemodne gradientowe kreski i przejść do dalszej pracy. Na sam koniec widać, że grafik nie używał żadnego grida i nie zwraca uwagi na odstępy, bo teksty ostatnich aktualności są różne od poprzednich. Jeżeli liczba aktualności może się zmieniać, będzie ciężko…

Innym przykładem może być zbytnie udziwnianie wyglądu pól formularza. Kto na co dzień koduje strony wie jak opornymi do stylowania są te elementy. Z polami tekstowymi nie ma zbytnich problemów, ale cała reszta poprzez selekty a na polach do wyboru plików kończąc praktycznie nie daje się stylować. Bez skryptów js właściwie się nie obejdzie.

Można by tak wymieniać godzinami. Ważne by grafik potrafił oddzielić złe rzeczy od dobrych, a bez kilku lekcji cięcia layoutów się nie obejdzie.

Zachłyśnięcie się CSS3

CSS3 to nie jest nic nadzwyczajnego. Kilka dodatkowych selektorów, kilka efektów i kilka sposobów na manipulację elementami. Pokazywanie w każdej części layoutu, że się zna CSS3 nie robi z nas wielkiego grafika. Robi amatora, który udaje wielkiego. CSS3 jest narzędziem, takim samym jak Photoshop czy Ilustrator. Nie jest produktem końcowym, a tylko czymś, co ma nam pomóc w uzyskaniu ciekawych wyników.

Dobre layouty wykorzystują CSS3 do subtelnych modyfikacji, zmian. Dobrzy graficy nie walą olbrzymimi efektami cienia itp na lewo i prawo by pokazać jakimi to zarąbistymi grafikami są.

Tutaj także pojawia się brak wiedzy w kodowaniu. Zobaczcie przykład:

menu-blad

Fajnie, że jako grafik wiem, że w css można używać cieni dla tekstu. Niestety nie przewidziałem, że w IE9 i wcześniejszych cień dla tekstu nie istnieje, więc po najechaniu pole zupełnie nie zmieni swojego wyglądu (a to spory błąd!). Ma to szczególne znaczenie przy tworzeniu boxów z cieniem:

box-blad

 

W kilku przeglądarkach (np IE8 i pomniejsze) nadanie cienia boxowi nie jest możliwe, dlatego biały box na białym tle nie będzie w żaden sposób oddzielony od reszty tła. Są przypadki, że to nie będzie przeszkadzać, ale są także takie, że będzie. Ktoś może powiedzieć, że przecież istnieją do tego pluginy takie jak CSS Pie, ale działanie ich pozostawia sporo do życzenia, a cienie itp wyglądają „średnio”. Można to oczywiście obchodzić poprzez alternatywne style dla IE, ale jako grafik powinienem zdawać sobie sprawę że powyższe, sytuacje w pełni poprawne nie są.

Poza tym z używaniem CSS3 trzeba uważać by nie wyszedł nam kicz zamiast porządnej grafiki.

Nie używanie CSS3

Dla odmiany bardzo często spotykam się z layoutami, w których dominuje grafika, której w żaden sposób nie jesteśmy w stanie tknąć za pomocą CSS3. Jeżeli jest to pojedynczy nagłówek strony to nie ma problemu. Ale co jeżeli każdy przyciski na stronie, każda „kontrolka” i element jest w formie grafiki?
Nie tylko dostaniemy cholery przy cięciu, ale i użytkownicy będą marudzili na zbędny content który musi być dodatkowo załadowany (przy internecie mobilnym ma to szczególne znaczenie), co mocno spowalnia czas wyświetlenia i działania strony (czas rysowania grafiki jest dłuższy niż czas rysowania efektów CSS3) .

guzik-blad

Powyżej mamy zwykły guzik. Żadne wyzwanie do uzyskania w CSS3. Żadne, gdyby nie udziwniony cień pod guzikiem, którego sensownie nie da się uzyskać w żaden sposób (sam gradient jak najbardziej, przechylenie także, ale wykrzywienie jest już problemem – można zastosować transformację skew, ale nie zmienia to idei, że niektórych rzeczy uzyskać się nie da). Jeżeli każdy guzik na stronie będzie miał taki dziwny cień, czekają nas i użytkowników męki.

Wystarczyło by jednak by grafik znał chociaż podstawowe możliwości CSS3, wtedy zastosowalibyśmy pojedynczy dynamiczny styl dla wszystkich guzików. Plusem tego było by o wiele szybsze załadowanie, szybsze działanie, ale także możliwość zmiany np kolorów guzika itp jego animacje za pomocą CSS3 (które w przypadku grafiki nie są sensownie możliwe).

Dobrym rozwiązaniem jest to, by takie dodatkowe bajery dodawać przez filtry warstw w Photoshopie. Wszystkie cienie, wewnętrzne oświetlenia, gradienty itp spokojnie można uzyskać za pomocą CSS3. Istnieją nawet pluginy (np css3Ps i cssHat), które konwersują takie filtry na kod CSS. I co ważne – takie efekty bez problemu można animować.

Nie trzymanie się standardów

Nie mam na myśli kodowania i podejścia do tworzenia użytecznego layoutu (co także jest bardzo ważne). Chodzi mi o używanie odpowiedniego oprogramowania i stosowania znanych wszystkim zasad, które najlepiej zapoznać w tym materiale. Już kilka razy zdarzało mi się ciąć layouty, które dostarczone mi były w postaci wektorowej dla Ilustratora. Gdyby były dobrze przygotowane, proste, to pół biedy. Ale jeżeli elementy nie są pozycjonowane „snap-to-pixel”, czcionki mają nie zaokrąglone miary, nie są mi dostarczone użyte w layoucie grafiki i czcionki (jeżeli AI ich nie dostanie, to zamieni na inne dostępne i tym samym popsuje layout), w layoucie panuje totalny bałagan, to człowiek zaczyna sobie wyrywać włosy, a sam proces cięcia mocno się wydłuża i nie jest „pewny”.

Powtarzać się tutaj nie ma sensu, najlepiej zapoznać się ze wspomnianym materiałem. Kto robi inaczej niż jest tam napisane, jest dupa nie grafik.

Podsumowanie

Tak jak ze wszystkim, tak i z tworzeniem layoutów trzeba mieć trochę wprawy by robić to poprawnie. Sporo adeptów rzuca się na tworzenie nowych dzieł i poprzez brak doświadczenia tworzy dziwactwa, które później albo ciężko jest uzyskać, albo uzyskać w ogóle się nie da. Osobiście nic do tego nie mam, bo każdy z nas się uczy. Drażni człowieka po prostu, że powyższe babole spotykam bardzo często w layoutach od sporych agencji. To już nie za bardzo wypada – prawda?

Z drugiej strony myślę, że nie wolno przeginać w drugą stronę. Standardy, dobre praktyki są ważne. Ale nie mogą stanowić całości podejścia do tworzenia layoutów. Ja sam u siebie i wielu kolegów webmasterów zauważam początki choroby „przesytu zasad nad formą”. Coś, co mniej więcej jest opisane w tym artykule.

Nic to. Myślę, że każdy z was może wymieniać podobnych punktów setkami. Ale to może po nowym roku? Serdecznie pozdrawiam i życzę miłego kodowania :)

Komentarze

  • Marcin Białasek

    „już kilka razy zdarzało mi się ciąć layouty, które dostarczone mi były w postaci wektorowej dla Ilustratora. ”

    Projektowanie layoutów w Illustratorze, to jak obieranie ziemniaków tasakiem. Da się, tylko po co?