Okazuje się, że „złota zasada” podziału 1:1.62 świetnie się sprawdza w tym przypadku. Zachowanie określonych proporcji w projekcie jest jednym z najistotniejszych czyniników decydującym o całokształcie projektu. Głupi uczy się na błedach własnych, a mądry na cudzych tak więc przyjżyjmy się najczęściej odwiedzanym portalom w Polsce (… na podstawie www.alexa.com), żeby się czegoś nowego nauczyć.

Przykładowy tekst  z onet’u, który przy przeanalizowaniu CSS’ów w FireBug’u ujawnia, że nie ma nigdzie nic na temat wysokości lini -  wygląda tak:

Film realizuje telewizja NHK, jedyny publiczny nadawca w Japonii. Pierwszą część dokumentu o polskiej emigracji Japończycy nakręcili w 2007 roku. Film pokazujący przygotowania Polaków do wyjazdu na Wyspy oraz oczekującą na nich rzeczywistość okazał się hitem w Kraju Kwitnącej Wiśni. W samym Tokio obejrzało go ponad 3 miliony widzów, a producentom od razu zamarzyła się kontynuacja projektu. „To był dokument, który miał pokazać przeciętnemu Japończykowi, dlaczego Polacy decydują się opuścić swój kraj i często bez znajomości języka wyjechać za granicę” – opowiada Kucaj. „Dla Japończyków sama idea emigracji jest egzotyczna. Chcieli zrozumieć, jak po rozszerzeniu Unii Europejskiej zmienił się kontynent oraz w jaki sposób ludzie zaczęli się przemieszczać, zostawiając za sobą rodziny i przyjaciół”.

A teraz ten sam tekst, w którym odstęp pomiędzy liniami jest uzależniony od wielkości użytej (w tym wypadku 12px) czcionki – czyli pomnożony razy 1.62. Liczyłem na wszelkie dostępne pod ręką sposoby no i coż …

zawsze wychodziło mi 19.44 – zaokrąglając daje nam line-heigt: 19

Tak więc, zwróćcie uwagę, że ten sam tekst czyta się łatwiej i dochodząc wzrokiem do końa linii nie musimy rozpoczynając nową szukać jej początku:

Film realizuje telewizja NHK, jedyny publiczny nadawca w Japonii. Pierwszą część dokumentu o polskiej emigracji Japończycy nakręcili w 2007 roku. Film pokazujący przygotowania Polaków do wyjazdu na Wyspy oraz oczekującą na nich rzeczywistość okazał się hitem w Kraju Kwitnącej Wiśni. W samym Tokio obejrzało go ponad 3 miliony widzów, a producentom od razu zamarzyła się kontynuacja projektu. „To był dokument, który miał pokazać przeciętnemu Japończykowi, dlaczego Polacy decydują się opuścić swój kraj i często bez znajomości języka wyjechać za granicę” – opowiada Kucaj. „Dla Japończyków sama idea emigracji jest egzotyczna. Chcieli zrozumieć, jak po rozszerzeniu Unii Europejskiej zmienił się kontynent oraz w jaki sposób ludzie zaczęli się przemieszczać, zostawiając za sobą rodziny i przyjaciół”.

Oczywiście możecie powiedzieć, że czepiam się jakiegoś tam szczegółu, ale jeżeli czytujecie całe artykuły w ilościach powiedzmy … 90% pojawiających się danego dnia, to nie sposób nie zauważyć, że coś jest nie tak. A tymbardziej, jeżeli jedna linika kodu może coś poprawić to dlaczego tego nie zrobić. Zrzuty w 4′ech kolorach przed i po:

Podobnie ma się sprawa z Wirtualną Polską … aczkolwiek informacje tam zamieszczane są tak krótkie, że zanim się zorientujemy, że można trochę poprawić odstępy między liniami artykuł się kończy. No cóż.

W przypadku Gazety i Interii doszukałem się tego (oczywiście w CSS’ach),  że chłopaki sprwujący pieczę nad wyglądem strony coś w tej sprawie zrobili. W Interii szybkie przestawienie z 17px na 19px w przypadku odstępu między liniami ORAZ odstępów między paragrafami na 19px (z 9′ciu … nie wiem z kąd wytrzasnęli taki numer …) znacznie poprawia „czytalność”. Proszę:

Pomijam (chwilowo) kwestię użytych fontów w nagłówkach – przydały by się jednak jakieś sans-serif, ale jest to oddzielny temat.

Reasumując tą pobieżną analizę – trzymajcie się zasady:

Odstęp między liniami = wielkość czcionki tekstu * 1.62

a napewno artykuły na waszych stronach / blogach będzie się łatwiej czytało. Pamiętając oczywiście o tym, żeby treść była wartościowa.

Krótkie spostrzeżenie na temat jednego z moich ulubionych blogów – antyweb – wartościowy merytorycznie i pisany w ciekawy sposób – aczkolwiek: Grzesiek – zmień odstępy między liniami na większy  – jeżeli oczywiście chcesz się trzymać tej trochę przywielgaśnej czcionki 15px  – na 24px. Od razu przyjemniej.

Wracając do tematu. Liczba 1.62 nie wzięła się w sumie z nikąd. Zapoznajcie się z tym.  Większość z Was powinna to pamiętać jeszcze ze szkoły, ale mogę się założyć, że nauczycielka „wciskając” wam tę wiedzę nie wspomniała czegoś w stylu: uczcie się tego dzieciaki, bo przyda się kiedyś przy projektowaniu stron internetowych. Znajdźcie chwilę czasu, żeby poklikać też w tą. Nawet bez znajomości angielskiego zorientujecie się w czym rzecz.

Następnym razem zajmiemy się wykorzystaniem 1.62 przy projektowaniu „layoutów” do stron / blogów. Zobaczycie jak się sprawdza. Dla niecierpliwych znających angielski polecam artykuł ze smashingmagazine.

Zapraszam do komentarzy.

1. Nie będziesz ignorował kompatybilności między przeglądarkami.

To jest z pewnością problem numer jeden w trakcie tworzenia stron internetowych – muszą wyglądać wszędzie tak samo. Pamiętaj o tym, że są pewne fundamentalne różnice w sposobie interpretacji CSS’ów przez Internet Explorer a inne przeglądarki. Na chwilę obecną może nie jest aż tak źle jak kilka lat (czytaj: kolejnych numerów) wcześniej, aczkolwiek w dalszym ciągu potrafi być to ból w … Fajnie jest tworzyć stronę pod jedną przeglądarkę zapominając o sprawdzaniu działania (wyglądu) pod innymi. Mało tego – jeżeli już sprawdzamy, to mamy skłonność do świadomego lekceważenia problemu. Z doświadczenia wiem, że na naprawienie czegoś w dalszym etapie prac przysparza więcej problemów. Jak już przebrnąłeś przez sprawdzenie czy Twoja nowa strona wygląda tak samo na każdej przeglądarce na Twoim komputerze, to warto też sprawdzić jak będzie wyglądała na innych. Jest takie fajne miejsce w internecie: http://browsershots.org/ – wystarczy podać link, wybrać które przeglądarki nas interesują i poczekać kilka minut. Prawda czasami bywa bolesna …

2. Nie będziesz zapominał o niższych rozdzielczościach.

Kiedy większość web designerów / developerów jest dumna ze swoich dwudziesto i większych calowcych panoramicznych monitorów (nie doszukiwać się analogii w rozmiarach samochodów), to jednak większość normalnych ludzi nie dysponuje takim sprzętem – mało tego – zdarzają się jeszcze przypadki, że ktoś przegląda stronę w 800 x 600 (pewnie telefon – ale to zawsze …). Sprawdź w statystykach odwiedzin swojej strony – taka informacja zawsze gdzieś jest. Google Analytics też ma taką opcję.

3. Korzystajcie z „framework’ów”.

Jak zaczynasz jakiś projekt poraz kolejny od zera, to zadaj sobie pytanie: dlaczego ? Wszystko już zostało raz zrobione – po co wykonywać jakąś pracę dwa razy ? Tyczy się to również naszych CSS’ów. W sieci można znaleźć gotowe dosyć ciekawe rozwiązania – np: blueprintcss czy tez 960 Grid System. ……

4. Będziesz korzystał z ogólnie zdefioniowanych klas.

Łatwo jest zapomnieć o tym, że w przyszłości dany projekt będzie musiałbyć zmieniony (oczywiście nie poprawiony, bo zakładamy, że to co tworzymy jest właściwie doskonałe . Złapaliście się na tym, że do każdego obiektu / elementu tworzycie osobną klasę ? ….

5. Będziecie sprawdzali poprawność HTML/XHTML.

Mogę sobie dać obciąć … palec, że nawet nie pomyślałeś o tym jaki wpływ poprawnie zwalidowany HTML ma na CSS. Tak więc – sprawdź najpierw czy HTML jest poprawny. Czasami może być tak, że jakiś mały błąd – literówka czy nie zamknięty DIV – przejdzie i przeglądarka jakoś wyświetli stronę (błędy przeglądarek) a po dodaniu CSS wszystko zaczyna się krzaczyć. Tak więc – zacznim zaczniesz obwiniać CSS, upewnij się np. tu, że HTML jest cacy.

6.  Będziecie sprawdzali wadlidowanie CSS.

Często prześladowałem znajomych (tych, którzy się zajmują web designem) coby mi pomogli znaleźć rozwiązanie problemu w CSS’ie. Też tak robicie … Jakkolwiek – jeden z nich, za każdym razem odsyłał mnie do walidatora kodu CSS. I chwała mu w sumie za to bo przynajmniej 90% problemów wynikało właśnie z błędów w kodzie.

Dodatkową korzyścią jest to, że szanse na poprawne działanie kodu w różnych przeglądarkach wzrastają.

7. Nie będziecie korzystali z wieeeeelkich obrazków jako tło.

Często się zdarza, że początkujący web designerzy korzystają z wielkich obrazków jako tło do strony. Mało tego, żeby mieć pewność, źe będzie to dobrze wyglądało i działało na KAŻDEJ rozdzielczości, potrafią zaserwować coś jak 3000 x 2000. Spróbujcie zamiast tego korztstać z obrazków, które mogą się powtarzać albo w pionie albo w poziomie (paterny) – zamiast 200kB mamy 2kB. Zwróćcie uwagę jaka oszczędność na paśmie plus goście na naszej stronie nie muszą czekać na wgrywanie takiego wielkiego tła.

8. Nie będziecie na siłę robili wszystkiego w CSS’ach.

Zwróćcie uwagę, że jak pojawi się tylko coś nowego (jakieś rozwiązanie itp.) wszyscy na siłę chcą z tego skorzystać. Nie zawsze trzeba. Przykład – tabele. Po to one są, żeby przedstawiać w nich dane tabelaryczne, a nie walczyć z problemem posługując się DIV’ami i CSS’ami. Style CSS są po to, żeby proces tworzenia przyspieszyć, a nie spowalniać.

9. Nie będziecie ustawiali styli elemntów w kodzie HTML.

To jest jak zaraza ale występuje częściej niż byś się spodziewał. Robiąc stronę ZAWSZE trzymaj w osobnych plikach (X)HTML i CSS. Jak się nie będziesz do tego stosował, to kiedy będziesz chciał coś zmienić w stronie będziesz musiał się przekopywać przez kody (X)HTML. Co przy większch projektach jest naprawdę czasochłonne. Np. zamiast:

<a style=”float: right; color: #333333;” href=”somewhere.html”>link</a>

lepiej zrobić to tak:

<a href=„somewhere.html” class=„link_style”>link</a>

i oczywiście w arkuszy styli zdefiniować klasę „link_style” i nadać mu odpowiednie atrybuty. Proste – no nie ? A ile może zaosczędzić czasu w przyszłości.

10.  Nie będziecie korzystali z wielu plików CSS.

Zetknęliście się kiedyś ze stronami, do których style były rozbite na np. 12 plików ? Niektóre templatki do wordpressa na przykład są tak zrobione. A  teraz wyobraź sobie, że jak chcesz coś w tym zmienić to musisz przeszukać 12 plików … prcochłonne, a na pewno marnotrastwo czasu. Najlepiej trzymać wszystkie style w jednym, najwyżej dwu plikach. W zupełnośći wystarczy.

To tyle na razie. Mam nadzieję, że skorzystacie z tych rad i ułatwią wam waszą pracę.

Amen.

Tekst powstał w oparciu o http://nettuts.com/articles/web-roundups/are-you-making-these-10-css-mistakes/