Twoja strona jest przestarzała? Czas na Redesign z użyciem CSS

Wielu właścicieli stron internetowych nie zdaje sobie sprawy z wagi jakości kodu strony internetowej. Dla nich liczy się to co widzi użytkownik internetu - klient. Często myśl o przeprojektowaniu strony oznacza spory koszt, a właściciele stron wyznają zasadę, że jeżeli strona działa i jest zyskowna to dlaczego coś w niej zmieniać. Jest co najmniej 5 powodów, aby głęboko przemyśleć Redesign swojej strony internetowej.

Strony projektowane w starym stylu

Już bardzo dawno temu odkryto, że za pomocą tabel można tworzyć całe strony internetowe. Stało to się standardem przy bardziej złożonych layoutach, gdzie były podziały na kolumny, wiersze i bloki informacji w przeróżnych konfiguracjach. Tabele znacznie upraszczały sprawę i w tabelach można było wszystko "poukładać". Stron opartych na tabelach zaczęto używać wszędzie, praktycznie wszystkie strony były projektowane na tabelach. Tak uczono podstaw HTML w szkołach i dla wielu był to jedyny sposób na zbudowanie layoutu.

Nowa myśl - Semantyczne strony internetowe

Po raz pierwszy z tym pojęciem spotkałem się już na początku swojej ścieżki zawodowej, na szczęście nie miałem czasu, aby zakodować w sobie myśl projektowania stron za pomocą tabel i pierwsze moje strony miały przejrzysty kod, a layout trafiał do osobnych plików CSS - Kaskadowych Arkuszy Stylów. Do dziś pamiętam zachwyt osób, które wyjaśniały mi tajniki internetu i projektowania stron, nad stroną, która była całkowicie dostępna z poziomu telefonu komórkowego nie wyposażonego w przeglądarkę HTML. Było oto pięć lat temu, a strona o której mowa to CSS Zen Garden. Do dziś dnia strona nie uległa zmianie, ale ilość oraz jakość dostępnych layoutów tworzonych jedynie za pomocą CSS i bez naruszenia chociaż jednego znacznika HTML wciąż budzi podziw. To jest właśnie siła CSS - oddzielenie Contentu od prezentacji, inaczej mówiąc całkowite oddzielenie treści strony od jej części wizualnej.

Dla webdesignerów głównym powodem stosowania CSS jest łatwość edycji i wprowadzania zmian do strony, głównie do sposobu jej prezentacji. Są także duże korzyści dla właścicieli stron i na tym skupię się w dalszej części artykułu

Większa użyteczność (używalność) stron

Z pewnością wielu z Was spotkało się z pojęciem Web Usability. Oznacza to tyle co użyteczność, funkcjonalność stron internetowych. Jak stosowanie CSS oraz semantycznej budowy strony wpływa na poprawę jej użyteczności? Przede wszystkim pomaga w lepszej i czytelniejszej nawigacji, ułatwia skanowanie w poszukiwaniu informacji, zapewnia zrozumiałą z użytkownikiem komunikację. To naturalnie ułatwia użytkownikowi obcowanie na stronie, a jak to się przełoży na szych klientów - chyba nikomu nie trzeba wyjaśniać.

Dostępność

Używanie CSS zwiększa dostępność do naszych stron zwłaszcza użytkownikom mobilnym. Obecnie nie trzeba budować osobnych stron specjalnie dla telefonów komórkowych, PDA i tym podobnych urządzeń. Dostępne dla wszystkich strony internetowe to przede wszystkim większy ruch skierowany na stronę, a także lepszy wizerunek firmy. Ponadto niektóre przeglądarki umożliwiają przeglądanie stron osobom niedowidzącym. Użytkownik dostanie wybór. Nie będzie musiał trudzić się w przeglądaniu stron tak jak została ona zaprojektowana. Będzie miał możliwość np. wyłączenia tła i czytanie tekstów w kolorze czarnym, najlepiej przez niego postrzeganym. To jest bardzo ważne, a my często nie zdajemy sobie sprawy z tego, że ktoś może mieć problem z odbiorem informacji, która jest dla mnie dostępna.

Wyszukiwarki

Istnieją zwolennicy teorii, że jakość kodu nie wpływa na wyniki wyszukiwania w popularnych wyszukiwarkach, szczególne w Google. Jednakże wielokrotnie udowadniano, że przejrzysty i czytelny kod wpływa pozytywnie na wyszukiwarki. Przede wszystkim robot indeksujący stronę ma do przejrzenia mniej kodu i w danym czasie może przejrzeć więcej naszych podstron, poprzez podstawowe znaczniki potrafi odróżnić bloki tekstu - nagłówki, akapity, listy, pogrubienia, cytaty itp. To przekłada się na jakość, a warto pamiętać, że największy ruch na strony generowany jest wciąż przez wyszukiwarki internetowe. Niektóre źródła podają nawet 80%, ale wartość ta stopniowo maleje.

Transfer

Każdy nadmiar kodu to dodatkowe kilobajty, a tym samym większe zużycie transferu i wolniejsze wczytywanie się stron. Użycie kaskadowych arkuszy stylów pozwala na całkowite zminimalizowanie objętości kodu HTML. Ponadto pliki CSS w przeglądarkach ładowne są tylko raz, aż do czasu opróżnienia pamięci. Strony oparte na tabelach są ciężkie i za każdym razem wysyłają do przeglądarki cały kod.

Estetyka i marka

Wszystkie podpunkty wymienione wyżej wpływają pozytywnie na postrzegania naszej firmy przez użytkowników. Dobra strona internetowa świadczy o profesjonalizmie firmy, wzbudza szacunek wśród konsumentów oraz konkurencji. Dobrze zaprojektowana strona pozostawia pozytywne wrażenia dla wszystkich odwiedzających. Ma to duży wpływ przy kreowaniu naszego wizerunku.

Czy zatem należy zapomnieć o tabelach

Zdecydowanie nie. Natomiast należy ograniczyć ich stosowanie do minimum, tylko do danych tabelarycznych. Po to te znaczniki zostały stworzone.

Podsumowanie

Ze względu na spore korzyści płynące ze stosowania semantycznych stron internetowych należy rozważyć przeprojektowanie każdej strony zbudowanej na tabelach. Przy okazji można odświeżyć wizerunek i stworzyć lepszy layout. Im szybciej porzucimy tabele, tym szybciej zwróci się inwestycja. To Ty masz wpływ na to jak użytkownicy postrzegają Twoją stronę i zadbaj o to, aby była ona odbierana jak najlepiej.

Brak komentarzy