Największe grzechy szabloniarzy

CC0

Poniższa lista bazuje na moich prywatnych odczuciach, kiedy sama odwiedzam i czytam blogi, a z niektórych zwijam się szybciej niż na nie weszłam. I to wcale nie przesz wygląd, bo szablon jest piękny, ale sprawia, że z bloga nie da się normalnie korzystać.

1. Nieczytelna czcionka

Po zastanowieniu doszłam do wniosku, że jest to najpoważniejszy błąd. Szablon ma nie tylko wyglądać, ma przede wszystkim prezentować treść, jaka jest dostępna na blogu. Po pierwszym wrażeniu przychodzi czas na zapoznanie się z treścią bloga i jeżeli ta nie będzie zaprezentowana w sposób czytelny i przyjazny dla odbiorcy, odwiedzający prędzej czy później zwinie manatki i już na takiego bloga nie wróci, a przecież nie o to chodzi, prawda?

Dlatego starajmy się stosować w poście czytelne czcionki o rozsądnej wielkości i kolorze dobrze kontrastującym z tłem, ale również odpowiednio stonowanym. Unikajmy też stosowania dla całych postów polecenia text-transform: uppercase. Czytanie całych akapitów drukowanych liter równie szybko męczy oczy jak zbyt jasna czy zbyt mała czcionka.

Wiele osób projektujących szablony nie wie lub też zapomina o takim magicznym pojęciu jak interlinia, której wysokość można również ustalić za pomocą css. Interlinia to nic innego jak odległość pomiędzy kolejnymi wersami tekstu. Domyślna wartość dla postu w blogerze wynosi 1.4, kiedy ja dla postów używam co najmniej 1.6, a na tym blogu 1.7. line-height:1.7

Dlatego warto wrzucić do postu tekst nie będący odmianą Lorem ipsum i przeczytać jego dłuższy fragment. Jeżeli będziemy mieć z tym trudności, a nasze oczy po takiej dawce tekstu staną się zmęczone to znaczy, że najwyraźniej należy w szablonie coś zmienić.

2. Menu w widgecie HTML/JavaScript

Żeby tylko menu, ale także archiwum, etykiety, link i nie wiadomo co jeszcze, a jakby się dało, to najlepiej cały kod szablonu. Czemuś takiemu mówię stanowcze nie.

Robię szablony na blogspot od trzech lat. Od trzech lat też dostaję wiele wiadomości z prośbą o pomoc, czy to przez mail czy wioskowego facebooka. Uwierzcie mi na słowo, wstawienie odpowiedniego adresu do <a href="">Link</a> sprawia ludziom trudność, co dopiero jak do tego kodu dojdzie wartość klas i/lub id! Taka jest prawda. Jeżeli ktoś nie miał styczności z kodem html to nawet z instrukcją może coś spektakularnie popsuć. Html i css mają to do siebie, że brak nawet jednego elementu, jakiegoś średniak czy ukośnika sprawia, że coś przestaje działać. Oszczędźcie tego osobom pobierającym wasz szablon, zwłaszcza, że możecie im to oszczędzić. Kodujcie do widgetów oferowanych przez blogger. Listę selektorów możecie zobaczyć tutaj.

Owszem, może teraz jesteście pod mailem lub gg w każdej chwili gotowi pomóc przy wstawieniu takiego menu, ale czy tak będzie zawsze? A co jeżeli wasz szablon pobierze ktoś obcojęzyczny? Jak sobie wówczas poradzi z instrukcją w języku polskim?

3. Nawigacja, której nie można znaleźć

Minimalistyczna nawigacja bloga ma swój urok i idealnie pasuje do minimalistycznego szablonu. Jednak kiedy ten jest nawet odrobiną okazalszy, takie menu może po prostu zaginąć, a dla potencjalnego czytelnika okazać się niemożliwe do odnalezienia. Dlatego nawet minimalistyczne rozwiązania powinny wyraźnie wybijać się na tle reszty szablonu, aby osoba, która pierwszy raz spotyka się z 'ukrytym' menu, mogła intuicyjnie domyślić się, że tam znajdują się potrzebne dla niej linki.

Dlatego, jeżeli wasze menu skądś wyskakuje, pojawia się na hover i/lub ma nietypowy kształt, upewnij się, że zwykły czytelnik będzie w stanie je odkryć i nie będzie musiał uczyć się na pamieć, co gdzie się w nim znajduje.

4. Nieodznaczające się linki w poście

To jest błąd, który i mi zdarza się popełniać do tej pory. Wydaje się taki nieistotny, dopóki w ciągłym tekście autor nie umieści linku. Jeżeli linki zostały pozbawione podkreślenia, a kolor jest taki sam lub prawie taki sam jak tekstu, to jedyną informacją, że mamy do czynienia z linkiem jest zmiana wyglądu kursora. Link powinien być widoczny i odróżniać się zarówno od tekstu jak i tła bloga. Z dwojga złego, już wolę aby do mnie 'krzyczał' niż 'nie był w stanie powiedzieć słowa' przez co nieświadomie go pominę.

Unikajcie też dodawania do :hover margin, padding oraz letter-spacing, ponieważ po najechaniu kursorem tekst nieestetycznie zmienia swoje położenie.  

Podsumowanie

Te cztery błędy są według mnie najpoważniejsze, ale niestety lista na nich się nie kończy. Są jeszcze bardzo kontrastujące z tekstem tła, ignorowanie różnych rozdzielczości, pozycjonowanie absolutne, totalny chaos u zakładce Układ i wiele innych. Ale to te cztery opisane powyżej błędy sprawiają najwięcej trudności czytelnikom i osobom pobierającym szablon. W dodatku szabloniarz może ich stosunkowo łatwo uniknąć (zwłaszcza tych o numerach 1 i 4). Wystarczy po prostu o tym pamiętać.