Felieton

Tomasz Staniak


Jeśli oddajesz klientowi serwis, w którym grafik przewidział menu z trzema elementami - nie przyjmuj założenia, że nigdy nie znajdzie się tam czwarty element.

Numer 17 (3/2006) • 31 grudnia 2006


Magnus Blomster : Minigaleria

Tomasz Staniak
Tworzenie z myślą o przyszłości

Ilustracja: Magnus Blomster


Tworzenie z myślą o przyszłości


Unikanie kryzysowych sytuacji w tworzeniu stron internetowych


1. Myśl co tworzysz

Zanim napiszesz cokolwiek - pomyśl. Już na etapie projektu graficznego jesteś w stanie określić elementy, z którymi będą problemy. Pamiętaj, że graficy, którzy dostarczają grafikę nie zawsze posiadają wiedzę z zakresu jej dostosowywania do Sieci.

Nie bój się zwracać uwagi na ich niedociągnięcią, brak spójności bądź wiedzy.

Na tym etapie powinnieneś potrafić wyróżnić wszelkie gradienty, cienie, gradienty na cieniach, cienie na gradientach i tym podobne - problematyczne - elementy.

2. Internet Explorer

IE to zło, dlatego unikaj go (najdłużej jak się da).

Nie zaczynaj tworzenia strony od pisania pod IE - skoncentruj się na dobrych przeglądarkach, takich jak Mozilla Firefox czy Opera. O wiele łatwiej jest pisać zgodnie ze standardami i wprowadzać obejścia na IE, niż dostosowywać tag-zupę do standardów.

3. Bądź ogólny... w CSS

Bycie ogólnym w CSS to bycie elastycznym. Zasada jest prosta - nie przesadzaj ze specyficznością definicji. Nigdy nie masz pewności, że dany warunek zostanie wypełniony w 100%.

Jeśli definiujesz wielkość fontów dla akapitu zawartego w divie o identyfikatorze main lepiej będzie, jeśli przyjmiesz założenie, że tekst może pojawić się bez akapitu. Zdefiniuj wielkość tekstu dla całej sekcji (diva).

Bycie ogólnym to wygoda modyfikacji. Rzadko zdarza się, by serwis został zapomniany po jego ukończeniu. Z reguły trzeba co jakiś czas do niego wrócić by dokonać kilku poprawek.

Bycie ogólnym to także szansa na nie zapędzenie się w kozi róg - kiedy zaczynasz nadużywać atrybutu !important to znak, że gdzieś przesadziłeś ze specyficznością.

W praktyce, zamiast pisać div#main napisz #main. Raz: nigdy do końca nie masz pewności, że #main będzie zawsze divem a dwa: kiedy przeczesujesz wzrokiem arkusz, o wiele bardziej czytelne jest #main h2 niż div#main h2 (w gąszczu div#xxx, div#yyy, div#zzz).

4. Bądź podejrzliwy

Jeśli oddajesz klientowi serwis, w którym grafik przewidział menu z trzema elementami - nie przyjmuj założenia, że nigdy nie znajdzie się tam czwarty element.

Jeśli grafik uznał, że tekst zajmie 120 pikseli, nie masz pewności, że ostatecznie nie zajmie dwa razy więcej.

Jest to bardzo często spotykany błąd w przypadku wszelkiego typu układów menu: dodanie linii tekstu więcej kończy się eleganckim "rozjechaniem" całego menu/a nawet serwisu.

Zamiast podawać wartości na "sztywno", operuj na elastycznych, często relatywnych jednostkach. Jeśli na grafice element menu ma 50px wysokości - osiągnij tę wartość za pomocą paddingu.

Pamiętaj również o tym, że nie jesteś bezbronny w sprawie interpretacji kodu przez przeglądarki. Jeśli chciałbyś, by jakiś element komponujący się w misternym tle nie przesunął się wraz z powiększaniem tekstu, zastosuj overflow: auto;

5. Nie występuj przeciw Absolutowi...

Moje ulubione pozycjonowanie absolutne w elementach pozycjonowanych relatywnie może łatwo napsuć ci wiele krwi, jeśli nie wiesz co robisz.

Z reguły, o wiele bardziej bezpieczne jest poleganie na elementach z float: left/right; niż position: absolute; Nigdy nie stosuj position: absolute tam, gdzie element może/musi się rozszerzać.

6. Nie polegaj na fontach

Nie masz absolutnie żadnej pewności, że użytkownik obejrzy stronę z tekstem napisanym tak, jak to zaplanowałeś. Font to pierwsza rzecz, która ulega modyfikacji: często jest powiększany, często brakuje fontów zdefiniowanych w CSS.

Jeśli chcesz się dowiedzieć jak strona będzie wyglądała na przykład pod Linuksem - zanim przeskoczysz na swoją ulubioną Tahomę/Verdanę/Trebuchet MS - zobacz jak strona wygląda z np.: Bitstream Vera Sans.

Jeśli przestaniesz polegać na rozmiarze czy kroju fontów, automatycznie zmniejszysz ilość zgłoszeń, że strona się rozpada.

7. Nie polegaj na tak zwanym dynamicznym HTML

Javascript może uatrakcyjnić stronę, AJAX może ułatwić jej modyfikację, ale jeśli to tylko możliwe - staraj się zapewnić alternatywę dla osób, które nie mają JS w przeglądarce z której korzystają.

Nigdy nie opieraj kluczowych elementów strony o technologie, które nie są powszechne. Niedopuszczalna jest sytuacja, kiedy menu we Flashu nie ma nieflashowej alternatywy albo linki w menu działają na onclick="".

8. Nie panikuj - najważniejsza jest treść

Nie przejmuj się tym, że elementy rozjeżdżają się w IE5 czy Netscape 4. Tempo aktualizacji przeglądarek takich jak Opera czy Firefox jest również na tyle duże, że możesz przestać się przejmować wyglądem strony w wersji danej przeglądarki starszej niż pół roku. Pamiętaj po prostu o złotej zasadzie: najważniejsze jest to, żeby stronę dało się czytać. Ma dobrze wyglądać w IE/Operze/Firefoxie/Safari. Reszta to kwestia założeń i targetu. Tworzenie stron internetowych to właśnie w dużej mierze przyjmowanie założeń.

Tomasz Staniak


O autorze

Tomasz Staniak

Tomasz Staniak

Zapytany czym się dotychczas zajmował, nie potrafi udzielić jednoznacznej odpowiedzi. Był już zwykłym pracownikiem fizycznym, audytorem w dużej sieci hipermarketów, menadżerem w branży gier komputerowych i próbował prowadzić własną grupę. Obecnie pracuje jako webdeveloper oraz prowadzi bloga, w znacznej mierze poświęconego standardom sieciowym.