Tekst pierwotnie opublikowany czasopiśmie online: „Webmaster”, październik 1999.
Język płata nam figle. Chcąc pisać o stylu witryny internetowej trzeba się zastrzec, że nie myślimy wyłącznie o stosowaniu stylów (Cascading Style Sheets) w projektowaniu stron WWW. Jednak niezależnie od wyboru techniki projektowania witryny użytkownik zawsze ma do czynienia z końcowym rezultatem oglądanym w oknie przeglądarki. I strona mu się podoba lub nie.
Są miejsca w sieci, które oglądamy z przyjemnością – strony są „ładne”, podobają się; znajdujemy też takie, które nie zwracają na siebie uwagi, ale użytkownik lubi je odwiedzać, bo są mu „przyjazne” – w czytelny, klarowny sposób dostarczają poszukiwanych informacji, szybko udostępniają dane. Są wreszcie miejsca, które wręcz porażają, „nie podobają się”, oceniamy je jako „brzydkie”, w złym guście, w fatalnym stylu.
Ale co to znaczy „w złym stylu”, co znaczy „nie podobają”. Wkraczamy na grząski teren oceniania, siłą rzeczy subiektywnego. Co to znaczy wreszcie „styl” witryny?
Wybór + uporządkowanie = styl
Projektant witryny dysponuje pewną (ograniczoną!) liczbą składników, które może wykorzystać do jej zbudowania. Tymi najoczywistszymi i najpopularniejszymi są: grafika i tekst, ale interaktywne i multimedialne strony WWW wyposażone są często w rozmaite animacje, formularze, pola dialogowe, rozwijane menu – wszystkie te elementy strony tworzą jej plastyczny wyraz (będziemy unikać okropnego słowa „design”). Można więc powiedzieć, że na styl witryny składać się będzie zawsze pewien swoisty dobór elementów oraz ich szczególne uporządkowanie, motywowane określonymi funkcjami witryny. Dysponując taką definicją możemy pokusić się o wyliczenie warunków przynajmniej wystarczających do uznania, że witryna została zaprojektowana w „dobrym stylu”.
„Dobry styl” ujawnia się nie wyłącznie w plastycznym wyrazie, który skądinąd może się podobać lub nie. Należałoby w tym miejscu zastosować rzetelne kryteria, którymi potrafią się posługiwać jedynie krytycy sztuki, profesjonalni plastycy, dlatego akurat ten czynnik, choć ważny, proponuję pominąć. Jednak wykorzystane składniki tworzące projekt witryny podlegają innym – również istotnym kryteriom. Zastanówmy się na początek nad elementami graficznymi.
Grafika w dobrym stylu
Twórcy stron WWW wykorzystują dwa najpopularniejsze formaty graficzne – GIF i JPEG Wciąż do rzadkości należy wykorzystanie formatu PNG oraz formatów wektorowych, zatem pole manewru nie jest wielkie. W istocie – ograniczenia są jeszcze większe: 1) rozdzielczość monitorów komputerowych każe przygotowywać grafikę w rozdzielczości 72 – 120 pikseli na cal, co wpływa na jej jakość; 2) format GIF obsługuje 256 (lub mniej) kolorów w 8-bitowej palecie, a format JPEG, chociaż zachowuje 24-bitową paletę, to stosowane w nim metody kompresji powodują bezpowrotną utratę jakości obrazu; 3) przepustowość sieci zmusza do ograniczania wielkości (mierzonej w KB) plików graficznych. A zatem jednym z kryteriów oceny dobrej stylowo strony będzie wybór formatu do właściwego typu obrazu: niewielkie obrazki, grafika kreskowa, napisy, obrazy o wyraźnych przejściach między kolorami – to domena formatu GIF, natomiast fotografie o większych rozmiarach, grafika zawierająca sporo półcieni powinna być zachowywana w formacie JPEG, przy czym twórca musi balansować między jakością obrazków a wielkością plików.
Znawcy podkreślają, że grafika zapisana w formacie GIF powinna być optymalizowana pod względem użytej w niej liczby kolorów, gdyż zmniejszenie palety wpływa najbardziej na rozmiar (możliwość kompresji) pliku graficznego. Nie ma żadnego powodu, aby prosta linia składająca się z jednego koloru zapisywana była z 256-kolorową paletą – do tego wystarczy 1-bitowy GIF pozwalający zapisać już dwa różne kolory. Z kolei GIF-y bardziej złożone mogą być zapisane w palecie 4-, 8-, 16-, 32-, 64-, 128-, 256-kolorowej.
Nadmierna redukcja kolorów w palecie może niestety prowadzić do tego, że niektóre obszary obrazka, pierwotnie o zróżnicowanych odcieniach, zleją się w nieciekawą plamę. Czasami ma to uzasadnienie ze względu na ogólny wyraz plastyczny strony, ale częściej jednak psuje efekt wizualny. Pewnym rozwiązaniem jest stosowanie roztrząsania kolorów, co powoduje przy niewielkiej ich liczbie symulowanie barw pośrednich. Ale nie jest to najlepszy sposób, gdyż uzyskany obraz zawiera widoczną ziarnistość, a kompresowalność w formacie GIF znacznie się obniża. Zbyt duża redukcja kolorów sprawia też, że krawędzie będą nazbyt postrzępione. Na tę bolączkę jest sposób: w dobrym stylu jest stosowanie antialiasingu, czyli wygładzania krawędzi obrazka poprzez dodanie kolorów pośrednich. Przy redukcji liczby kolorów w palecie trzeba po prostu eksperymentować, aby znaleźć złoty środek między wielkością i zawartością palety a jakością obrazka. Podobnego zachowania wymaga format JPEG, który na etapie zapisu do pliku pozwala określić z jednej strony stopień kompresji, a z drugiej stopień możliwej do zaakceptowania utraty jakości. Dobrym przykładem optymalizowanych GIF-ów są napisy, które można spokojnie zapisać z 8-kolorową paletą (czasami jeszcze mniejszą), bez dramatycznego popsucia konturu.
O dobrym stylu projektanta świadczyć będzie także wykorzystanie tej bardzo sympatycznej właściwości formatu GIF, jaką jest przezroczystość – w ilustracji jeden kolor z palety określony jest jako przezroczysty, co sprawia, że w istocie nie on jest widoczny, lecz leżące pod nim tło. I tu zaczyna się problem. Mianowicie nawet bardzo bliski, ale jednak inny kolor z palety nie jest już przezroczysty (np. przezroczysta biel #FFFFFFF i „bielszy odcień bieli” #FFFFFE), co na ciemnym tle ujawnia się jako jasna aureolka, psująca plastyczny efekt. Przezroczystość zatem trzeba zawsze stosować w odniesieniu do projektowanego tła strony WWW.
Format GIF pozwala na tworzenie animacji – w tym wypadku wszystkie wymienione wcześniej problemy wystąpią zwielokrotnione liczbą „klatek” zapisanych w jednym pliku. Ale rozważania o GIF-ach animowanych i dobrym stylu tworzenia stron WWW można chyba zamknąć jednym stwierdzeniem: nie przesadzać.
Nie można zapomnieć także o pewnym ograniczeniu, jakie nakłada przeglądarka Netscape’a, czyli o tzw. bezpiecznej palecie 216 kolorów używanych przed jakimś czasem do wyświetlania stron WWW na maszynach dysponujących jedynie 256 kolorami. Ten problem jednak z czasem zdaje się tracić na wadze.
Jak widać, na projektanta witryn internetowych czeka mnóstwo pułapek wynikających w gruncie rzeczy z bardzo ograniczonych możliwości, jakie dają formaty GIF i JPEG. A mimo takich ograniczeń w Internecie znajdziemy wiele witryn, które pod względem plastycznym wspaniale się prezentują. Bo tak naprawdę nie tylko w umiejętności pokonywania technicznych ograniczeń internetowej grafiki tkwi istota zagadnienia. Projektant witryny winien pamiętać o pewnej zasadzie, jakiej hołdują twórcy teatralni: jeśli w pierwszym akcie na scenie elementem dekoracji jest dubeltówka, to w trzecim akcie powinna obowiązkowo wypalić. W innym przypadku jest rekwizytem zupełnie niepotrzebnym. Mówimy tu o kryterium bodaj najważniejszym, określającym dobry styl projektowania witryn: o funkcjonalności każdego zastosowanego składnika strony.
Piktogram, ideogram, symbol
Wznieśmy się bowiem ponad techniczny warsztat projektanta i zastanówmy, jakie funkcje spełnia grafika na stronie WWW. Rola najmniej oryginalna jest jednocześnie najbardziej rozpowszechniona – czyli funkcja ilustracyjna, dekoracyjna. Elementy graficzne tworzą atmosferę, klimat witryny, wspomagają słowo. Znaki ikoniczne, takie jak rysunek czy fotografia, są znakami niewymagającymi znajomości kodu językowego, ich znaczenie wynika z podobieństwa do rzeczy oznaczanej a nie z konwencji, co oznacza, że są uniwersalnym, ekonomicznym i pojemnym nośnikiem informacji. Najczęściej na stronach WWW mamy do czynienia z piktogramem, wyobrażającym konkretne przedmioty lub ideogramem, czyli znakiem obrazkowym przedstawiającym idee i pojęcia kojarzące się z ukazanymi przedmiotami. Piktogramy i ideogramy są, inaczej rzecz nazywając, graficzną metonimią, czyli zabiegiem organizacji semantycznej witryny, polegającym na zastosowaniu obrazu w funkcji przenośni – zamienni. Przenośnia tego typu opiera się na wykorzystaniu plastycznego przedstawienia, które pozostaje w istotnym związku logicznym ze wskazywaną treścią. Np. pocztowa trąbka lub koperta jako odnośnik do poczty, koszyk jako odniesienie do internetowych zakupów itp.
Są projektanci, tacy jak np. David Siegel, (autor książki Creating Killer Web Sites), którzy ilustracji na stronie WWW przypisują znaczenie szczególne. W ich praktycznych rozwiązaniach grafika tworzy metaforę – obarczona jest zatem zdolnością ewokowania sensów wtórnych, bogatszych i daleko wykraczających poza proste przedstawienie. Graficzna metafora ma być wyzwaniem dla surfera – niespodzianką, zaskoczeniem i… zaproszeniem. Jeśli strona jest czymś więcej niż tylko zbiorem nagromadzonych obok siebie elementów, jeśli z ich zestawienia wynika dodatkowa, dana odbiorcy do samodzielnego odczytania treść – wtedy można mówić o prawdziwej metaforze na stronie WWW, można sądzić, że witryna bogata jest w treść symboliczną. David Siegel nazywa takie strony witrynami trzeciej generacji.
W sieci znaleźć można wiele przykładów ciekawych realizacji koncepcji „zabójczych witryn” D. Siegela. Jedną z nich jest Oficjalna strona zespołu Kult (http://kult.art.pl).
Witryna trzeciej generacji w wykonaniu Michała Jaskólskiego zaprasza gościa surowym na pozór projektem, wykorzystującym okładkę ostatniego albumu zespołu. Ascetyczność projektu jest jego wielkim atutem – dobrze definiuje „klimaty”, jakie dominują w twórczości Kultu. Witryna ta jest m.in. jednym z nielicznych niestety przykładów sensownego wykorzystania tła graficznego, które w tym wypadku poszerza obszar centralnie umieszczonej grafiki bez obciążania witryny nadmierną liczbą kilobajtów. Nieco gorzej wypada ocenić typografię na tej stronie, bo choć napisy odnośników są kolorystycznie zharmonizowane z czarno-białą fotografią a bezszeryfowa czcionka napisów dobrze wkomponowuje się w surową urodę strony, to wydaje się, że zastosowanie podkreślonej, standardowej czcionki Arial w odsyłaczach tekstowych, psuje nieco efekt całości.
Tym sposobem uwaga nasza przenosi się na drugi, kapitalnie ważny składnik witryn internetowych – tekst.
Typografia witryny
Problematyka dobrego stylu typografii (tak!) witryn internetowych godna jest książki, a nie jedynie kilku wzmianek w krótkim artykule. Krótko rzecz ujmując, można stwierdzić, że jest to zagadnienie niedoceniane przez twórców witryn internetowych. Częściowo wynika to z „dziedzictwa” języka HTML, który stworzony został jako standard uniwersalny, niezależny od platformy, co wykluczało ścisłe wiązanie konkretnego kroju czcionki z określonym tekstem. Ale wraz z pojawieniem się pierwszych przeglądarek pracujących w środowiskach graficznych został ustanowiony związek między tym co znaczące („formą”) a tym co oznaczane („treścią”). Bardziej w drodze niepisanej konwencji niż instytucjonalnych ustaleń niektórym elementom strukturalnym takim jak H1…H6, EM. STRONG, CODE itd. przypisano wielkości, kroje i właściwości fontów używanych w danym systemie. Autor strony WWW właściwie niewiele miał tu do powiedzenia, o wszystkim (w zasadzie) decydował producent przeglądarki.
Pasjonujące jest śledzenie losów typografii na stronach WWW od niedawnych przecież siermiężnych początków, poprzez okres „błędów i wypaczeń” (stosowanie znacznika FONT z atrybutami), po czas teraźniejszy, kiedy to typografię stron internetowych znakomicie wspomagają arkusze stylów. Zainteresowanych można odesłać do strony, gdzie znaleźć można rozwinięcie niektórych zagadnień związanych z typografią internetową.
Ale typografia to nie tylko problem stosowania różnych czcionek na stronie WWW. To także problematyka układu strony, komponowania stylu całej witryny, to wreszcie – nie bójmy się takich górnych określeń – znak czasu. Litera w naszym współczesnym świecie nabrała cech autonomicznych: w reklamie, na afiszu, na szyldzie, w ulicznym neonie – wszędzie tam przemawia do nas już nie tylko znak głoski – kategorii tyle konkretnej, co przecież niesamodzielnej semantycznie. Otóż w tych nowych okolicznościach litery stają się symbolami przemawiającymi do nas metaforą, dodatkowym znaczeniem.
Typografia nieodłącznie związana jest z ładem, precyzją i porządkiem. Poważne traktowanie zasad typograficznych zmusza projektanta do myślenia o witrynie jako konstrukcyjnej całości obejmującej planowanie funkcji i celów witryny, makietowanie, namysł na tymi elementami, które tekst wyróżniają (tytuły, podtytuły, cytaty, kolor itp.), nad kształtem tekstu zasadniczego (dobór kroju i wielkości czcionki, interlinia, akapity, inicjały, wyrównanie tekstu, listy itd.), nad wykorzystaniem (w różnych funkcjach) tabel.
Typografia pozbawiona jest pretensji artystycznych, co więcej – wśród niektórych webmasterów (którzy uwielbiają się przezywać „dizajnerami”) znaleźć można i takich, którzy o tekście na stronie WWW mówią z lekceważeniem. Można się zastanawiać, w którą stronę zmierzać będzie projektowanie stron WWW, ale osobiście wyrażam przekonanie, że WWW zawsze integralnie będzie związane ze słowem, tekstem, niezależnie od faktu, że będą to także witryny multimedialne, więc zawierające treści komunikowane także innymi środkami – pozajęzykowymi. Skoro słowo pozostanie, to warto pamiętać, że trafny dobór czcionki, czytelny układ strony, sensowne zastosowanie tabeli, układ pustych przestrzeni i światła – potrafią uczynić stronę WWW – po prostu piękną.
W prezentowanych tu ilustracjach powoduję się oczywiście swoim subiektywnym gustem, ale właściwie w polskim Internecie znajduję bardzo mało przykładów harmonijnego komponowania grafiki i tekstu. Aby zilustrować to, co „tygrysy lubią najbardziej”, proponuję spojrzeć na pierwszą stronę Akademii Informatyki (http://www.ai.wroc.pl/) zaprojektowaną przez studio L-Design Łukasza Rzepeckiego
oraz na… nieobecną w sieci (w tym kształcie) witrynę, której projekt możemy jednak zobaczyć na stronach domowych Marcina Jagodzińskiego (http://portfolio.art.pl/). Projekt witryny serwisu Kultura i Media jest autorstwa Marcina Jagodzińskiego i Domana Domańskiego.
Dobra typografia i udana, funkcjonalnie zastosowana grafika, pomagają interpretować tekst zawarty na stronach WWW, czynią go nośnym – albo… nieznośnym – wszystko zależy od dobrego stylu projektanta.