W3 Style Dobra strona: wygląd
Dobra strona WWW
Wygląd
Nie straszyć, nie mamić...
Wygląd strony wpływa nie tylko na wrażenia estetyczne, ale również na emocje odwiedzającego. Już pierwsze chwile decydują o tym, czy nasz gość poczuje się dobrze potraktowany tym, co mu zaserwowaliśmy. Do dobrego tonu należy oszczędny, nieprzeładowany w mrugające, rozproszone po serwisie gadżety layout. Inteligentne użycie grafiki powinnno przejawiać się w wysokiej estetyce, spójnej graficznie stylistyce nawiązującej do charakteru działalności właściciela strony i celu prezentacji, rownież w logicznym ułożeniu elementów graficznych, podkreślającym zawartą na stronie treść. W większości przypadków (poza nielicznymi wyjątkami), zbędne jest tworzenie historyjek obrazkowych i mamienie różnorodnością efektów wizualnych, ponieważ przeciętny użytkownik internetu szuka w nim głównie informacji.
Estetyka w parze z ekonomią
Oczywiście jest spora grupa internautów poszukujących w internecie rozrywki, i temu służą właśnie te odbiegające od naszej reguły serwisy, zaopatrzone w gry interaktywne, barwnie prezentowane konkursy, animowane gadżety i dowcipy obrazkowe, będące atrakcją same w sobie. Jeśli jednak zamierzamy dotrzeć do klienta z informacją, to powinniśmy uczynić wszystko, aby była ona łatwo dostępna i aby jak najmniej elementów rozpraszało uwagę gościa.
Jest jeszcze inna przyczyna, dla której oszczędność grafiki jest dla nas korzystna. Każde zdjęcie, każdy rysunek - to dodatkowe kilobajty i opóźnienia w ładowaniu się strony. Szacunek dla gościa wymaga, aby nie czekał on długo na oczekiwaną informację. Jeśli ten czas przekracza 5 sekund, jest duże prawdopodobieństwo, że gość zrezygnuje z przeglądania naszego serwisu i przejdzie do stron naszej konkurencji.
Oszczędność grafiki nie oznacza rezygnacji z niej w ogóle. Nasz wizerunek w sieci wymaga wyrazistej identyfikacji, począwszy od logo naszej firmy (lub tylko logo strony), które stanowi dobrą podstawę do zaprojektowania pozostałych, spójnych z nim elementów witryny (kolor czcionki, tytułów, wypunktowań w tekście, tła poszczególnych bloków). Do opracowania takiej identyfikacji potrzebny jest motyw-klucz, którym może być jeden dobrze wybrany element łączący wszystkie podstrony. W tej sytuacji każda kolejna odwiedzana podstrona nie będzie pobierała grafiki z internetu, tylko korzystała z pamięci podręcznej naszej przeglądarki, przechowującej raz pobraną grafikę, z czego będziemy mieli podwójną korzyść: szybkie ładowanie podstron i spójny wewnętrznie wystrój serwisu.
Kontrasty i walory
Przy okazji graficznego wystroju strony możemy wspomnieć, w dużym uproszczeniu, o kilku prawach wynikających z psychologii i psychofizjologii widzenia. Z tych praw wynika, że najlepiej odbierane, jako solidne i wiarygodne, są strony jasne, z ciemną czcionką tekstu. W uzasadnionych przypadkach możliwe jest odwrócenie kolorów tła i czcionki: ciemne tło, jasna czcionka, chciaż poza utratą światła (i optymizmu) musimy się liczyć również z mniejszą czytelnością tekstu, mimo zachowania właściwego kontrastu. Z tej przyczyny "negatyw" odradzamy dla stron zawierających długie teksty (poradniki, zbiory artykułów).
Wbrew pozorom czytelność tekstu nie wzrasta wraz z siłą kontrastu między tłem a literami. Zbyt silny kontrast potrafi utrudnić czytanie, szczególnie w przypadku drobnych fontów szeryfowych. Optymalnym rozwiązaniem jest złamana kolorem (lub szarością) biel tła i czarna czcionka, ewentualnie białe tło i szara lub zabarwiona kolorem ciemna czcionka. Złym rozwiązaniem jest barwne tło i barwna czcionka, chociaż dopuszczalna jest sytuacja, w której tło i czcionka mają ten sam kolor, tylko w odpowiednio mocno różniącym się stopniu nasycenia.
W dużych, regularnych blokach tekstu można użyć graficznego tła, jednak tutaj również wymagana jest rozwaga i wyczucie. Jeżeli chemy, aby motyw w tle był rozpoznawalny i równocześnie aby tekst był czytelny - obiekt w tle powinien być sylwetą, plamą czytelną w niskim kontraście, a jego kontury - najlepiej uproszczone lub nieco rozmyte - nie powinny mieszać się z tekstem, czyli nie powinny być drobne i oparte na kresce.
Optymalizacja a format graficzny
Szczególne wymogi, zahaczające o problemy nie tyle wizualne ile technologiczne, dotyczą formatów i kompresji użytych na stronie grafik. Formaty obsługiwane przez wiekszość przeglądarek internetowych to GIF, JPEG i PNG, przy czym najbardziej popularne są dwa pierwsze, i używane są do nieco odmiennych zastosowań. Grafiki muszą być optymalnie skompresowane. Aby uzyskać w tym jak najlepsze efekty - zdjęcia i obrazki z dużą ilością kolorów i przejść tonalnych zapisujemy jako JPEG, natomiast grafiki w ograniczonej gamie barwnej, zwłaszcza z drobnym detalem, wymagające ostrości - jako GIF.
Jeśli zastosujemy formaty odwrotnie - to zdjęcia w GIF wyjdą nam "kropkowane" lub miejscami "wyżarte", przy tym objętościowo duże, zaś grafiki jednobarwne w JPEG będą albo "kosmate" albo będą miały nieekonomicznie dużą objętość (przeważnie i jedno i drugie). Zdecydowanie najlepszym formatem (optymalnym pod względem relacji jakości i objętości) jest PNG, o ile nasz plik bazowy nie jest już skompresowany jako JPG lub GIF, ponieważ utraconych podczas kompresji informacji już nie odzyskamy. PNG jest dobrym formatem dla nowo tworzonej grafiki, lub zdjęcia zmniejszanego z dużego, niskokompresowanego formatu JPEG.
Animacje niekoniecznie Flash
Przechodząc dalej z estetyki w stronę technologii należy wspomnieć o skądinąd świetnym wynalazku, jakim jest Flash firmy Macromedia. Flash pozwala na tworzenie rozbudowanych animacji bez porównania lżejszych objętościowo od nadal popularnych animowanych GIF-ów, przy czym daje możliwość użycia przejść tonalnych, półprzezroczystości i innych wyrafinowanych efektów, których uzyskanie w GIF byłoby bardzo trudne lub wręcz niemożliwe albo powiększyłoby objętość pliku GIF do nieprawdopodobnych rozmiarów uniemożliwiając jego wykorzystanie na stronie WWW.
Jednak i ta technologia ma swoją specyfikę - animacja Flash zawierająca zdjęcia lub wielobarwne grafiki rastrowe ma objętość równą sumie objętości tych grafik. Dlatego odradzamy we Flash animacje na zdjęciach, ponieważ jest to nieekonomiczne. W zamian polecamy we Flash animowanie tekstów i elementów wektorowych, które Flash optymalizuje rewelacyjnie. Nawiązując jednak do naszych wcześniejszych wskazówek, dotyczących ograniczenia zbędnych efektów, radzimy używać Flash oszczędnie, z rozsądkiem. Najlepsze zastosowanie dla tej technologii widzimy w bannerach i samodzielnie funkcjonujacych reklamówkach, grach i gadżetach interaktywnych lub w intro (przedbiegówce) strony i koniecznie z możliwością jego opuszczenia w każdej chwili.
Zdecydowanie odradzamy zastępowanie Flash'em elementów, ktore można standarwowo wykonać w HTML, ale ta uwaga dotyczy nie tylko Flash - również innych zbędnych grafik (np. wielu przycisków graficznych zamiast napisów tekstowych na jednakowym dla wszystkich przycisków graficznym tle).
Wracając do Flash - chcemy zwrócić uwagę Klientów na często utrudnioną nawigację stron wykonanych w tej technologii. Szczególnie dotyczy to zakłóceń w normalnych funkcjach przeglądarki, kiedy używając "wstecz" nie trafiamy tam, gdzie byśmy chcieli, w zamian otrzymujemy powtórnie ładującą się animację, którą chcielibyśmy już opuścić, jednak nie możemy, ponieważ nawigacja po serwisie jest w niej umieszczona. Dobrze wykonana strona we Flash, w której unikniemy podobnych uciążliwości, wymaga ogromu pracy, co przekłada się na cenę. Hołdując zasadzie oszczędności czasu, pieniędzy i zbędnych efektów, i mając doświadczenie w poprawianiu cudzych stron we Flash - radzimy stosować tę technologię tylko w uzasadnionych przypadkach.
