Jak nie projektować serwisu internetowego
- NetWorld OnLine,
- 09.12.2011, godz. 21:51
Wielu webmasterów "upiększa" swoje serwisy czego efekty bywają opłakane.
Zobaczmy czego nie należy robić projektując serwis www.
<b>Strony pełne Flasha</b>
WWW zmierza do HTML5 i dni Flasha są zapewne policzone. Ale nawet jeśli mobilne urządzenie obsługuje Flasha, to nie robi tego idealnie. Nie można zastąpić przewijania myszą dotykiem na ekranie, więc jeśli nawigacja na naszej stronie lub większość zawartości opiera się na Flashu, to sporo internautów będzie na niej bezradnych.
Niektóre przeglądarki nawet nie ostrzegają użytkowników, że Flash player nie jest zainstalowany, po prostu wyświetlają puste ramki tam, gdzie powinna być flashowa zawartość. Strona pełna takich pustych ramek robi złe wrażenie. Rozważmy więc dla wideo, treści multimedialnych i dynamicznej nawigacji wybór HTML5.
<b>Złe strony pełne Flasha</b>
Co może być gorsze od strony pełnej Flasha? Źle napisana strona pełna Flasha. Pokazana strona <a href="http://www.qssis.com/web.html" target="new">banquet hall site</a> to jedna gigantyczna animacja mająca się skalować do ekranu przeglądarki. Jeśli jednak przeglądarka nie ma tej rozdzielczości co animacja, to skalowanie może prowadzić do kuriozalnego ściśnięcia lub rozciągnięcia strony (co widać na obrazku). Dobrze chociaż, że komentowana strona nie zmusza przeglądarki do zmiany rozdzielczości, co jest kardynalnym błędem w projektowaniu. Za to automatycznie gra piosenkę Billy’ego Idola i odtwarza wideo, którego nie można wyłączyć.
<b>Złe zestawienie tekstu i tła</b>
Jeśli znamy zawartość naszej strony, jasnoniebieski tekst na niewiele ciemniejszym niebieskim tle nie jest dla nas nieczytelny. Jednak internauci mogą uznać go za irytująco trudny do przeczytania i przenieść się na następną stronę z wyników ich wyszukiwarki.
Na obrazku pokazano taki przypadek - dopiero przez podświetlenie tekstu uzyskamy większą czytelność.
<b>Kontrowersyjne użycie kolorów</b>
Spójny schemat kolorów nie tylko sprawi, ze nasza strona będzie wyglądała schludnie, ale także może się łączyć z naszą marką – internauci po wizycie na naszej stronie będą nas lepiej identyfikować. LOT jest granatowy, Lufthansa – żółta, a KLM - błękitny. Zbyt wiele kolorów wprowadza nieporządek, irytuje, a nawet prowadzi do nieczytelnej strony.
W przykładzie na obrazku zwykle podświetlenie pstrokatej, różnokolorowej zawartości prowadzi do znacznie czytelniejszej strony.
<b>Zły wybór kroju czcionki</b>
Żadna strona nie powinna być przenigdy napisana fontem Comic Sans. Nie bez przyczyny jednym z pierwszych rezultatów wyszukiwania hasła comic sans jest <b>bancomicsans.com</b>. Użycie tej czcionki jest po prostu nieprofesjonalne. Jedyna gorszą rzeczą od stworzenia całej strony z fontem Comic Sans jest mieszanie na stronie różnych fontów. Postarajmy się wybrać czcionkę, który będzie pasował do naszej treści.
Zaprezentowana strona zbiera dodatkowe punkty za to, że gdy tylko odrobinę zmniejszy się szerokość okna przeglądarki, to cała treść centralnej kolumny znika (zob. na dole obrazka).
<b>Rozsypujacy się layout</b>
Pokazana strona zapewne dobrze wygląda w IE6, ale na ekranie Chrome prezentuje się właśnie tak – z chaotycznie rozrzuconymi elementami. Sprawdźmy wygląd naszej strony przynajmniej w trzech najpopularniejszych przeglądarkach i starajmy się spełniać aktualne standardy. Trzeba założyć, że przynajmniej co kilka lat będziemy musieli przerabiać nasza stronę – standardy webowe szybko ewoluują i zmieniają się. Nawet wyróżniony wszelkimi możliwymi nagrodami projekt z 1998 r. nie będzie dobrze wyglądał w nowej przeglądarce.
Pokazana strona jest dodatkowo jest anachroniczną księgą gości. W czasach Web 2.0 lepiej chyba sięgnąć po Facebooka bądź Google+, co da nam większy kontakt z odwiedzającymi nasz serwis a także szansę na to, że zainteresują się nim również znajomi naszych gości.
<b>Przewijanie na stronie</b>
Ciężko jest zmieścić dużo treści na jednej stronie, ale od czego jest dobra nawigacja. Jeśli nasza strona powoduje pojawienie się poziomego paska do przewijania, powinniśmy jeszcze raz przemyśleć jej układ. Chociaż niektóre dzisiejszych laptopów pozwalają również na wygodne przewijanie w poziomie, to już kółko myszy pozwala tylko na przewijanie w pionie.
Postarajmy się tak zmienić projekt, by głębsza struktura nawigacji objęła wszystkie nasze treści, a strona mieściła się na szerokość w oknie przeglądarki.
Zapewne na pokazanej na obrazku stronie restauracji Denny’s chciano osiągnąć wrażenie papierowego menu, ale wyszło jak wyszło. Także animacje użyte do przemieszczania się do następnego panelu działają zbyt wolno, zmuszając do oczekiwania na treść.
<b>Nadmiar animowanych grafik</b>
Oto przykład przeładowania flashowymi widżetami i animowanymi GIF-ami – ich stosowanie w ogóle nie jest dobrym pomysłem. Migające obiekty będą odciągać odwiedzających nasza stronę od czytania naszych właściwych treści. Na pokazanym przykładzie nie sposób skupić się na jednej rzeczy. Dlatego nasz projekt powinien być uporządkowany i prezentujący jeden bądź dwa elementy, na których można w danym momencie się skupić. Jeśli nie chcemy by widżety i inne tego typu elementy rozpraszały uwagę czytelnika umieszczajmy je na obrzeżach strony.
<b>Widżety społecznościowe – bałagan w stylu Web 2.0</b>
Zanika użycie liczników gości i bannerów webringów, rośnie korzystanie z nowych widżetów często zaśmiecających strony. Oczywiście, że chcemy, by odwiedzający naszą stronę wiedzieli, że korzystamy z Tweetera, Facebooka, RSS i YouTube, a także Flickr i Instagram.
Niezmiernie łatwo jest przeładować stronę takimi miniaplikacjami. Podobnie jak staromodne bannery we Flashu mocno spowolnią ładowanie się strony, zbyt wiele widżetów zmieni uporządkowaną, zgrabną, szybko ładująca się stronę w powolny koszmar.
Trzy - cztery najpopularniejsze serwisy społecznościowe w uporządkowanej grupie widżetów -wydają się rozsądnym maksimum.
<b>Treść schowana w reklamach</b>
Można znaleźć strony jeszcze bardziej nasycone reklamami niż ta którą prezentujemy, jednak pamiętajmy - jeśli treść można z trudem dostrzec wśród kilku rzędów reklam i widżetów społecznościowych - zdecydowanie czas zastanowić się czy serwis został dobrze zaprojektowany.
Nie zapominajmy, że najważniejszą rzeczą w naszym serwisie powinna być właśnie treść.
<b>Aktualizacja ... z przeprosinami za brak aktualizacji</b>
Pojawianie się treści w serwisie internetowym jest ważna, niemniej istotna jest jednak też treść. Jeśli ktoś trafi na stronę za pomocą wyszukiwarki internetowej nie ma dla niego specjalnego znaczenia czy ostatni wpis na stronie jest sprzed kilku tygodni, miesięcy czy z wczoraj.
Choć tego typu wpisy bywają zwykle na osobistych blogach, potrafią także pojawiać się na stronach biznesowych (przykład z lewej pochodzi z firmowego blogu).
<b>Tego się nie da opisać</b>
Na koniec prawdziwy hit. Nie podejmujemy się próby opisania tego serwisu - <a href="http://www.dokimos.org/ajff/" target="new"><b>trzeba po prostu to zobaczyć samemu</a></b>.
Najciekawsze "efekty" (w tym dźwiękowe) uzyskamy w Internet Explorerze
Ostrzegamy jednak, że ta strona "żyje"
Computerworld dostarcza najświeższe informacje, opinie, prognozy i analizy z branży IT w Polsce i na świecie.
W celu komercyjnej reprodukcji treści Computerworld należy zakupić licencję. Skontaktuj się z naszym partnerem, YGS Group, pod adresem [email protected]