Projektowanie stron dla biznesu

Skocz do treści

Standardy projektowania stron WWW

Autor: Łukasz Sebestyański, Opublikowane: 18 lutego 2004r., Update: 16.09.2006r.

Standardy projektowania stron WWW nie są zbiorem sztywnych reguł, według których serwisy internetowe powinny być budowane. Podejście takie sprawiłoby, że strony niewiele by się różniły.

Projektowanie według standardów zalecane jest wszystkim projektantom oraz właścicielom serwisów internetowych. Budowa z ich uwzględnieniem sprawia, że serwisy stają się tańsze w realizacji, dostępne dla większej liczby użytkowników, dla których ich treść jest zrozumiała i czytelna w każdych warunkach. Zaprojektowana strona według standardów jest nie tylko dobrze działającą stroną dzisiaj, ale będzie nią również w przyszłości.

Kto tworzy standardy?

Od 1994 roku tworzeniem wytycznych w projektowaniu, nie tylko stron WWW zajmuje się World Wide Web Consortium (Nowe Oknowww.w3c.org). W3C tworzy standardy, dzięki którym Internet rozwija się w sposób bardziej racjonalny i przyjazny dla użytkownika. Dzięki wysiłkom W3C sieć staje się bardziej dostępna dla wszystkich bez względu na ograniczenia fizyczne jak i techniczne użytkowników.

Dlaczego projekty wg standardów są tańsze w realizacji i utrzymaniu?

Aż trudno uwierzyć jak duża część serwisów internetowych jest niezgodna ze standardami. Zaglądałem w kod niejeden strony i w zdecydowanej większości mogę powiedzieć, że ich właściciele każdego dnia tracą pieniądze.

Dlaczego? Ponieważ każde wyświetlenie strony oraz podstron zwiększa obciążenie serwerów, mało tego, transfer plików jaki może być zrealizowany w ramach działalności serwisu jest zwykle ograniczony. Może być to 2, 10 lub więcej gigabajtów na miesiąc. Podstawowa wartość jest zawsze zawarta w abonamencie, ale każde wykroczenie poza limity kosztuje, dlatego popularnym rozwiązaniem, jakie się stosuje jest zwiększenie pakietu, a co za tym idzie KOSZTU utrzymania strony WWW.

Konstruowanie strony według standardów pozwala na znaczną redukcję przestarzałego kodu, który można łatwo zastąpić, a w ten sposób zmniejszyć rozmiar plików o co najmniej 50% bez naruszenia formy graficznej.

Jest tylko jedno wytłumaczenie dla przestarzałych konstrukcyjnie stron. Ich autorzy, bądź właściciele pragną by ich strony wyglądały jednakowo we wszystkich możliwych przeglądarkach, nawet tych, których nikt nie używa.

Ideą Standardów sieciowych jest możliwość jednakowego zrozumienia treści, niezależnie od platformy, na której strona jest wyświetlana. W przypadku np. Netscape 4.0, który używany jest tylko przez 0.1% internautów, dążenie do tego by strona wyglądała w nim identycznie jak w najnowszej wersji przeglądarki to strata czasu i pieniędzy! Należy tylko umożliwić logiczne wyświetlenie jej treści.

Projektowanie przestarzałych konstrukcyjnie witryn zawyża koszty utrzymania serwisów internetowych, jak również spowalnia ładowanie się stron. Problem godzi w „modemowców”, którzy nie mają łącza stałego, a szczególnie dla powiększającej się grupy osób, które używają komórek oraz innych urządzeń bezprzewodowych jako modemów.

Najprostszy przykład

Zastosujemy poniżej przestarzałą, ale jak mocno zakorzenioną w świadomości projektantów regułę HTML pisania tekstów za pomocą znaczników <font>, które zdecydowanie dzisiaj nie powinno się stosować.

<font face="verdana, helvetica, arial" color="#FFFFFF" size="1"> Witam …</font>
<font face="verdana, helvetica, arial" color="#FFFFFF" size="1"> Zapraszam …</font>

Bardzo dużo serwisów zapisuje treść zawsze w powyższy sposób. Na każdej podstronie tekst jest wpisywany na nowo z zastosowaniem przestarzałej formy, która generuje zbędny ruch w sieci oraz na naszych serwerach.

Język CSS w połączeniu z XHTML daje olbrzymie możliwości. Poniżej zastosuję znacznik <p> osiągając identyczny efekt wizualny.

<p>Witam …</p>
<p>Zapraszam …</p>

Reguła CSS

p {
font: normal 12px verdana, helvetica, arial; color: #000;
}

Zauważ, że powyższa reguła CSS ładuje się tylko raz. Obowiązuje cały serwis bez względu na to czy witryna składa się z 5 czy 500 podstron. Różnica widoczna jest gołym okiem.

Serwis konstruowany w języku XHTML z zastosowaniem kaskadowych arkuszy stylów (CSS) zajmuje mniej miejsca (KB, MB), ładuje się szybciej, stanowi mniejsze obciążenie dla łącz i serwerów. Pozwala uzyskać semantyczną strukturę strony, co ma fundamentalne znaczenie dla dostępności serwisów internetowych.

Technologie takie jak CSS i XHTML zostały szczegółowo zaprojektowane tak, aby niosły ze sobą jak najwięcej korzyści dla projektantów jak i użytkowników Internetu.

Zgodność a pozycja w wyszukiwarkach

Wyszukiwarki indeksując liczbę słów kluczowych na stronie biorą pod uwagę całą treść dokumentu wraz ze znacznikami HTML. Powoduje to procentowe zaniżenie słów kluczowych na stronie. Nadmiar kodu oraz błędy składni, takie jak pozamykane w złej kolejności tagi powodują, że nasza strona jest gorzej punktowana. Często zdarza się, że bot indeksujący stronę omija jej główne działy z wyżej wymienionych powodów.

Co wynika z biuletynu Ranking.pl?

Z biuletynu Ranking.pl wydanego na przełomie maja i czerwca 2008r. możemy wnioskować, że nie warto już wspierać wszelkiej maści staroci i że właściwym rozwiązaniem jest zbudowanie strony wg najnowszych standardów i wytycznych W3C.

1 Firefox 2.x 35.9%
2 MSIE 6.x 32.9%
3 MSIE 7.x 21.7%
4 Opera 9.x 6.1%
5 Firefox 1.x 1.5%
6 Firefox 3.x 0.6%
7 Mozilla 1.x 0.4%
8 MSIE 5.x 0.3%
9 Safari 3.x 0.2%

Zabytkowe przeglądarki są praktycznie nieużywane. Jednak ze względu na to, że nawet ten mały ułamek stanowi naszych potencjalnych klientów warto sprawdzić jak prezentują się w nich nasze witryny. Należy wszystkim umożliwić logiczne zaprezentowanie treści stron.

Zgodność wstecz

Jak sprawdzić, czy nasze nowe serwisy są zgodne z takimi przeglądarkami jak Internet Explorer 4.0 lub 5.5? Ponieważ instalacja starszej wersji IE sprawia trudności, można pobrać specjalnie spreparowane wersje z poniższego adresu i uruchamiać je z katalogu. Nowe Oknowww.quirksmode.org/browsers na stronie znajdują się także starsze wersje innych przeglądarek. Pod adresem Nowe Oknobrowsers.evolt.org znajduje się archiwum przeglądarek internetowych.

Zachęcam również do skorzystania z Nowe Oknobrowsershots.org - serwisu umożliwiającego zrobienie zrzutów ekranowch stron internetowych. Browsershots w trybie online pokaże Tobie jak wyświetla się Twój serwis w różnych przeglądarkach.

Koniec z różnymi wersjami stron, dla różnych przeglądarek

Ponieważ jeszcze kilka lat temu każda przeglądarka internetowa taka jak Netscape, czy Internet Explorer miała własne standardy, powodowało to, że projektanci tworzyli kilka wersji strony dla różnych przeglądarek lub stosowali przestarzały i dużo zajmujący kod.

Wprowadzenie standardów było zatem konieczne. Zaprojektowana wg ich wytycznych strona jest niemalże jednakowo odwzorowywana w każdej z przeglądarek. Już nie musimy tworzyć odrębnych wersji strony, a tylko dodać kilka reguł do arkusza stylu CSS.

Gdzie można sprawdzić zgodność stron WWW z wytycznymi W3C?

Żadna z obecnie dostępnych przeglądarek nie jest w 100% zgodna ze standardami. Nawet po poprawnej walidacji serwisu WWW należy go sprawdzić pod kątem różnych przeglądarek.

W3C Markup Validation Service jest darmowym narzędziem sprawdzającym zgodność serwisów WWW ze wszystkimi wersjami HTML, XHTML. Nowe Okno validator.w3.org

Dostępne jest także narzędzie do sprawdzania poprawności użytych formuł CSS Nowe Oknojigsaw.w3.org/css-validator


Wykorzystaj artykuł w swoich publikacjach
Artykuły: e-biznes e-marketing usability i dostępność standardy e-booki