Jak powstaje strona internetowa? - kiedyś a dziś

Projektanci, programiści, menedżerowie projektów i wreszcie klienci - wszyscy lepiej lub gorzej znają już przebieg procesu projektowania strony internetowej. Ale czy w tak dynamicznie rozwijającej się się branży jaka bez wątpienia jest web development istnieje jeszcze ten jeden właściwy sposób? Czy wczorajsze standardy nie okażą się jutro przestarzałe i nie zaczną hamować naszej kreatywności lub, co gorsza, utrudniać ukończenie zalecenia? Przyjrzyjmy się procesowi powstawania strony internetowej jeszcze raz.

Kiedyś a dziś

Jeszcze kilka lat temu sprawa wydawała się jasna. Po kilku odręcznych szkicach projektant uruchamiał Photoshopa i przez wiele godzin starannie projektował układ strony, aby następnie przejść to typografii, kolorystyki, tekstury, kończąc na dopieszczeniu szczegółów. Mógł do tego celu skorzystać z jednego z popularnych systemów siatki (np 960.gs), aby lepiej dopasować się do aktualnych standardów dotyczących rozdzielczości. Efekty swojej pracy przekazywał programiście lub, jeśli posiadał odpowiednie umiejętności, sam pieczołowicie, piksel po pikselu, zamieniał projekt graficzny w setki linijek kodu HTML & CSS. Na tym etapie strona mogła była w zasadzie gotowa, o ile nie wymagała implementacji skryptów JavaScript lub PHP, często pod postacią jednej z popularnych platform CMS. Taki proces projektowania opierał się na założeniu, że istnieją pewne standardy dotyczące rozdzielczości ekranu, a w istocie urządzeń, na których strona miała być wyświetlana po stronie użytkownika. Przez długie lata takim standardem była szerokość 960px, która zapewniała optymalne wyświetlanie na ekranach o poziomej rozdzielczości 1024px. Sprawa skomplikowała się jednak wraz z pojawieniem się netbooków, a także pierwszych smartfonów pozwalających na dostęp do stron www. Okazało się bowiem, że wraz z nadejściem ery mobilnej, rozdzielczość ekranu nagle przestała rosnąć - a wręcz radykalnie się skurczyła! Wkrótce pojawił się kolejny problem. Nowoczesne telefony mogły wyświetlać strony w trybie portretowym i pejzażowym. Jednocześnie strony mobilne, które do tej pory serwowały drastycznie okrojone wersje serwisów internetowych dla telefonów starszej daty, na nowych wyglądały najzwyczajniej biednie. Na przestrzeni ostatnich lat pojęcie rozdzielczości ekranu nabrało zupełnie nowego znaczenia - z telefonami i tabletami zdolnymi wyświetlać obrazy o gęstości znacznie przewyższającej dotychczasową granicę nazwaną nomen omen FullHD.

Jak zatem żyć?

Dopasować się. To banalne stwierdzenie stało się podwalina nowego trendu w projektowaniu pod sieć - responsywności (ang. responsive design). W największym skrócie, projektowanie responsywne polega na dopasowywaniu układu i treści strony do dowolnego urządzenia. Jak to?! - zakrzykną projektanci przywiązani do swoich programów graficznych. Czy to oznacza, że musimy teraz projektować osobny układ dla każdego z dziesiątek, jeśli nie setek urządzeń dostępnych na rynku? Otóż nie. Ta syzyfowa z pozoru praca okazuje się znacznie prostsza jeśli odrzucimy odrzucimy dawne przyzwyczajenia i stary sposób myślenia. Co jest najważniejszym elementem każdej witryny internetowej? Co sprawia, że użytkownicy trafiają na nią z wyszukiwarki i wracają po więcej? Nie jest to z pewnością estetyka - przykłady obrzydliwych wręcz stron o niesłychanej popularności moglibyśmy mnożyć w nieskończoność  Nie jest to wbrew pozorom użyteczność, choć stała się mantrą projektantów na całym świecie. Nie, najważniejszym elementem strony jest jej treść. A zatem podstawowym zadaniem projektanta jest dostarczyć ją w czytelnej formie na każde z tysiąca dostępnych obecnie urządzeń. Jest oczywiste, że wygląd strony będzie się różnił na tych urządzeniach. Zamiast jednak dążyć do jak najwierniejszego przedstawienia statycznego projektu w postaci funkcjonalnej strony, projektanci muszą nauczyć się projektować elastyczne rozwiązania dopasowujące się do dowolnej rozdzielczości i orientacji ekranu.

Nowy proces projektowania

Dziś większość projektowania odbywa się w przeglądarce. Projektant pragnący zachować status, twarz i posadę musi przejąć znaczny ciężar obowiązków programisty i zakasać rękawy. Na nic zdadzą się najpiękniejsze przyciski zaprojektowane w Photoshopie, jeśli nie będą skutecznie pełnić swojej funkcji zarówno na 40 calowym telewizorze i 4 calowym smartfonie. W oparciu o szkielet w HTML’u nowoczesny projektant musi zbudować za pomocą aktualnego CSS’a wspomniany system, bardziej przypominający aplikacje niż typową stronę. Dla przykładu: Branżowy serwis w wersji desktop powinien przyciągać uwagę efektownym sliderem z promowanymi newsami, musi przez architekturę informacji angażować użytkownika i zmusić go do zagłębienia się w treści i pozostania na stronie, także ze względu na reklamodfawców. Jednak w sferze mobilnej, gdzie wszystko toczy się 4 razy szybciej, te rzeczy nie mają znaczenia. Liczy się szybki dostęp do informacji. Znika zatem slider, pasek boczy, czy rozbudowane drzewo kategorii. Wersja na tablet może prezentować artykuły w formie tak popularnego ostatnio grid view, jednak na smartfonie sprawdzi się tylko jedna kolumna. Rzecz w tym, że przygotowanie nawet 3 wspomnianych wersji to ogromny nakład pracy. A co z 40 calowym telewizorem i 3 calowym telefonem dla kobiet? Ta mnogość urządzeń wymusza radykalny krok - serwowanie jednej strony dla wszystkich. Jak to możliwe? Założenia i techniki związane z projektowaniem responsywnym postaram się przybliżyć w kolejnym artykule.