TECHNOLOGIE / HTML i CSS / Artykuły / Czy Ty też
używasz tabeli zmniejszającej oglądalność strony?
Jak wiele razy zdarzyło Ci się szukać w
Internecie informacji, wchodzić na stronę i nie widząc niczego przez 20
sekund ZAMYKAĆ okno przeglądarki? Na pewno nie raz spotkałeś się z
takimi witrynami. Czy zastanawiałeś się kiedykolwiek, czy i Twoim
klientom towarzyszy takie zachowanie? Czyż to nie wielka strata, pozbyć
się odwiedzającego zanim zobaczy jakikolwiek przekaz od Ciebie?
Pamiętając o zasadzie, że KAŻDY odwiedzający jest potencjalnym klientem,
oznacza to wielką stratę. Stratę w postaci pachnących świeżością
pieniędzy odpływających do Twojej konkurencji.
W artykule "Rady dla biznesmenów, którzy chcą
zwiększyć skuteczność swojej witryny WWW" jednym z wymienionych punktów
krytycznych, na które należy szczególnie zwracać uwagę projektując
serwis www jest szybkość ładowania się strony. Na tym właśnie
zagadnieniu skupię się w poniższym tekście.
Czy nie denerwuje Cię gdy wchodząc na stronę
musisz czekać, aż załaduje się zawartość, a Ty w tym czasie widzisz
puste okno przeglądarki? W pewnych sytuacjach właściwie nie jesteś
pewien, czy strona jeszcze się ładuję, czy połączenie już zostało
przerwane. Jedynym wskaĽnikiem ładowania się strony jest animowana ikona
w przeglądarce lub pasek postępu wczytywania strony. A i to nie zawsze
jest wiarygodnym wyznacznikiem.
Na szczęście rozwiązanie tego problemu
jest bardzo proste.
Po pierwsze, oczywiście należy "odchudzać"
stronę jak najbardziej, aby skrócić czas jej wczytywania. Ale to tylko
POŁOWA sukcesu. Zmniejszanie objętości grafiki, banerów, reklam itp.
jest dobrym pomysłem (m.in. zwracają na to uwagę wyszukiwarki
internetowe), ale przecież nie można pozbyć się wszystkiego. Strona musi
mieć jakąś objętość i pewnej granicy nie przekroczysz nie tracąc
jednocześnie na jakości.
Po drugie, ważna jest odpowiednia BUDOWA
samej struktury strony. Problemem jest tu schemat budowania stron
używany przez wielu programistów. Schemat ten powstał ze względu na
powszechność stosowania tabel i prostoty ich użycia w celu formatowania
całej strony. Bardzo często strona budowana jest w taki sposób, że cała
zawartość strony umieszczana jest w JEDNEJ tabeli. Taka tabela zaczyna
się po znaczniku <body> i kończy przed końcem znacznika zamykającego
</body>.
Jakie skutki niesie za sobą używanie
jednej tabeli do formatowania całej strony?
Takie, że Internauta może nie zobaczyć
NICZEGO dopóki nie załaduję się cała zawartość strony. Inaczej mówiąc,
podczas ładowania się całej strony Twój odwiedzający CZEKA patrząc w
PUSTY ekran. Czeka... jeśli oczywiście jest na tyle cierpliwy i
wcześniej nie zamknie okna przeglądarki. Zważając na fakt, że czasu na
zainteresowanie Internauty ofertą masz bardzo niewiele każda sekunda
jest cenna.
Wszystkiemu winna jest nieszczęsna tabela, w
której mieści się cała zawartość strony. A gdyby tak Twój odwiedzający
najpierw zobaczył nagłówek strony, póĽniej przygotowany przez Ciebie
tekst strony, a na końcu wczytałaby się stopka? Czy nie byłoby to lepsze
rozwiązanie?
Wyjściem z problemu jest PODZIELENIE dużej
tabeli na kilka mniejszych. W najbardziej powszechniejszym układzie
strony możemy wyróżnić: nagłówek, część główną strony i stopkę. A zatem
każdy z tych elementów umieść w osobnej tabeli.
Pierwsza tabela zawierać będzie nagłówek
strony. Wystąpi ona w kodzie jako pierwsza i jako pierwsza pojawi się na
ekranie, bez względu na postęp ładowania dalszej części strony. Tak więc
użytkownik najpierw ZOBACZY nagłówek. Skoro coś się dzieje na stronie,
to znaczy, że serwis działa i się ładuje. Użytkownik będzie podziwiać
Twój nagłówek i czekać na dalszą część. W momencie załadowania części
głównej strony użytkownik SKUPI SIĘ już na treści właściwej serwisu, a w
tym czasie ładować się będzie stopka strony. Prawda, że proste i bardzo
ergonomiczne.
A teraz praktyka, czyli jak to zrobić w
HTMLu
Zakładamy, że tworzymy typowy, opisany
powyżej układ strony złożony z nagłówka, części głównej i stopki. Kod
HTML jest następujący:
<table width="100%" align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
zawarto tabeli 1 - nagwek
</td>
</tr>
</table>
<table width="100%" align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
zawarto tabeli 2 - cz gwna strony
</td>
</tr>
</table>
<table width="100%" align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
zawarto tabeli 3 - stopka
</td>
</tr>
</table>
Tabele nie muszą być szerokości 100%; może
być to dowolna wartość np. podana jako stała liczba pikseli. Do każdej z
tabel wstaw całą zawartość wydzielonych wcześniej części strony.
Przedstawiony powyżej podział na trzy części jest najbardziej
powszechny. Nie oznacza to jednak, że takie rozwiązanie jest zawsze
najlepsze. Jeśli strona zawiera dużo informacji, wówczas warto
zastanowić się czy nie warto strony podzielić na więcej niż 3 części.
Autor: Tomasz Molik
O autorze:
Tomasz Molik od trzech lat pomaga firmom w realizacji projektów e-biznesowych;
jest m.in. właścicielem witryny eSzablony.pl, gdzie oprócz profesjonalnych szablonów znajdziesz porady i artykuły o e-marketingu i tworzeniu efektywnych stron. |
