Responsive Web Design – Wprowadzenie

Wstęp do Responsive Design

Zobacz obszerny Kurs Elastyczne Strony WWW na temat Responsive Web Desingn.

Aktualnie wybór rozmiaru strony to jedno z trudniejszych zadań dla projektantów stron WWW. Skończyły się czasy, w których nasi klienci wymagali adaptacji do rozdzielczości 1024x768px. Na rynku pojawiło się mnóstwo urządzeń przenośnym z wysokiej jakości wyświetlaczami, które przy przekątnej kilku cali są w stanie prezentować strony WWW w rozdzielczości podobnej do wielkich, plazmowych ekranów.

Mobilna rewolucja o której mówimy nie jest już jedynie nowinką i ciekawostką, ale zaczyna skutecznie konkurować z tradycyjnym dostępem do treści internetowych w przeglądarce komputera stacjonarnego czy laptopa. Już teraz smartphone’y stanowią ponad połowę urządzeń mobilnych używanych przez mieszkańców Stanów Zjednoczonych. Rzecz jasna urządzenia mobilne jak telefony czy tablety to znacznie większy rynek niż komputery stacjonarne i osobiste. Co więcej, telefon każdy z nas ma przy sobie – a w sytuacji, gdy wszystkie te urządzenia są już wyposażone w przeglądarkę i często dorównują wydajnością komputerom osobistym sprzed 2-3 lat, użytkownicy chętnie korzystają z nich w celu przeglądania sieci. Jak wynika z ostatnich badań – nie tylko do przeglądania, ale coraz częściej robią też zakupy w internecie bezpośrednio z tabletu czy smartphone’a. Z kolei statystyki popularnego serwisu Facebook już od dłuższego czasu wskazują, że więcej osób korzysta z niego z pomocą urządzeń mobilnych niż komputerów stacjonarnych.

Najważniejsze dla nas, projektantów stron WWW oraz interfejsów, jest to, że prezentacja treści na urządzeniach mobilnych musi być zupełnie inna niż ma to miejsce na ekranach komputerów stacjonarnych i laptopów. Nawet jeśli dysponują one tą samą rozdzielczością, wyobraź sobie prezentowanie tylu treści na malutkim telefonie, co na monitorze 24”. Rzecz jasna dla użytkowników jest to niewygodne i wymaga ciągłego powiększania fragmentów witryny w celu odnalezienia właściwej treści. Problemy zdarzają się także natury funkcjonalnej i jako prosty przykład można przywołać tutaj zachowanie rollOver, które w przypadku ekranu dotykowego nie ma racji bytu. Jeśli wcześniej o tym nie pomyślałeś, teraz zapewne zastanawiasz się na ilu swoich stronach w najważniejszych elementach nawigacyjnych zastosowałeś rollOvery i pseudoklasy :hover.

Mając za sobą te wstępne rozważania, dochodzimy do wniosku, że jedynym sensownym rozwiązaniem będzie dostosowanie naszych stron WWW do różnych rozdzielczości i urządzeń. Taki proces we wczesnym stadium jego rozwoju, jeden z autorów witryny AListApart, Ethan Marcotte, określił terminem Responsive Webdesign. W osobnym artykule, który możesz znaleźć na: http://www.alistapart.com/articles/responsive-web-design/

Ethan opracował stronę internetową, która elastycznie dopasowuje się do wielu rozdzielczości a tym samym dobrze wygląda na różnych urządzeniach, także tych z mniejszym ekranem. Od czasu publikacji wspomnianego poradnika, ukazały się w sieci setki opracowań dotyczących zagadnienia Responsive Webdesign i dostosowywania naszych witryn do wymogów wielu rozdzielczości.

Kurs Responsive Webdesign

Artykuł, który masz przed sobą, jest pierwszą częścią opracowania, które będziemy publikować systematycznie na blogu eduweb.pl. Jest ono wprowadzeniem do naszego kursu Elastyczne Strony WWW – Projektowanie na Wiele Rozdzielczości i Ekranów, który jest najbardziej obszernym opracowaniem na temat Responsive Design oraz powiązanych technik optymalizacji stron WWW pod różne ekrany.

Poradnik podzieliłem na kilka części, w pierwszej, którą masz przed sobą, wyjaśniam czym jest Responsive Webdesign oraz jakie są jego wady i zalety, oraz kiedy powinniśmy z niego korzystać. Kolejna część będzie dotyczyła popularnych rozdzielczości, pod które powinniśmy projektować swoje witryny. Następnie zajmę się praktycznym wymiarem Responsive Design powołując szereg technik, które przydadzą się przy tworzeniu stron WWW. Osobny artykuł będzie dotyczył rozwiązań poza przeglądarką, czyli tworzenia natywnych aplikacji na urządzenia przenośne.

Przykłady Elastycznych Stron WWW

Zrozumieć ideę projektowania na różne rozdzielczości najłatwiej można przeglądając przykładowe strony. Wystarczy, że zeskalujemy w nich okno przeglądarki do mniejszej rozdzielczości aby zauważyć zmiany w układzie spowodowane dostosowaniem do urządzeń mobilnych. Kilka przykładów poniżej:

www.blog.eduweb.pl

www.forefathersgroup.com

www.benhandzo.com/

www.deren.me

Jak działą Responsive Web Design?

Opracowanie projektu responsywnej strony sprowadza się do połączenia kilku technik, z których najbardziej popularne to:

• CSS3 Media Queries
• Elastyczne skalowanie zawartości
• JavaScript

CSS3 Media Queries

Są to instrukcje warunkowe w kodzie CSS3, które pozwalają wykryć rozdzielczość urządzenia na którym pracujemy. W rezultacie, jesteśmy w stanie zastosować blok instrukcji CSS, które będą wyświetlane np. wyłącznie w rozdzielczości telefonowej czy tabletowej. Przykładowy CSS3 Media Query wygląda następująco:

[css]
@media screen and (min-width: 480px){
color: red;
}
[/css]

W powołanym przypadku czerwony kolor tekstu zostanie zastosowany wyłącznie dla rozdzielczości większych niż 480px szerokości. Z pomocą Media Queries możemy sprawdzać również szereg innych właściwości przeglądarki użytkownika oraz stosować instrukcje wielokrotnie złożone, spełniające kilka warunków naraz:

[css]
@media only screen and (min-width: 480px), only screen and (max-width: 1024px) {
color: blue;
}
[/css]

Z pomocą CSS3 Media Queries można także załadować odrębny plik .css, który będzie przeznaczony dla konkretnej rozdzielczości, np.:

[css]
@import url(tablet.css) screen and (min-width: 480px) and (max-width: 1024px);
[/css]

Media Queries jest ewolucją atrybutu media, który istniał już wcześniej i mogliśmy go przyporządkować przy imporcie stylów CSS. Jednak wcześniej mieliśmy do dyspozycji wyłącznie typ urządzenia, który nie musiał zresztą być wspierany przez przeglądarkę na urządzeniu przenośnym, a więc poprawny wynik zastosowania takiej operacji był pewny jak pogoda nad Bałtykiem. Przykład starszego rozwiązania to:

[html]
[/html]

Jednak w tym przypadku sam typ urządzenia, który ustaliliśmy jako telewizor, niewiele nam mówi o jego faktycznej rozdzielczości, stąd użycie nowej metody CSS3 Media Queries jest niewątpliwie dużo lepsze.

Ograniczenia w CSS3 Media Queries?

Ponieważ wsparcie CSS3 Miedia Queries jest bardzo szerokie na przestrzeni przeglądarek, praktycznie nie ma przeciwwskazań do stosowania tego elementu specyfikacji CSS3 już teraz. Nawet przeglądarki na urządzeniach mobilnych doskonale radzą sobie z zapytaniami warunkowymi w naszych stylach CSS. Niestety, jak zwykle w tyle został Internet Explorer, który wsparcie dla Media Queries oferuje dopiero od wersji 9, natomiast istnieje szereg prostych technik, które możemy wykorzystać aby zmusić IE do poprawnej interpretacji naszego kodu. Polegają one na zastosowaniu skryptów JavaScript takich jak Respond.js, Modernizr czy css3-mediaqueries.js

Elastyczne Skalowanie Zawartości

To kolejna stara jak świat technika, która znalazła nowe zastosowania. Polega ona na wykorzystaniu przy projektowaniu naszych stron WWW elastycznych, czyli relatywnych jednostek. W skrócie, jednostki takie jak pixele są jednostkami absolutnymi, ponieważ na sztywno definiują wielkość jakiegoś elementu na ekranie. Natomiast zastosowanie wymiarów w procentach pozwoli dynamicznie dopasowywać naszą zawartość do szerokości i wysokości okna przeglądarki czy kontenera.

[css]
#box {
width: 50%;
height: 50%;
}
[/css]

Zamiennie z procentami możemy wprowadzić jednostki em, które również są relatywne. Najczęściej ich zastosowanie w Responsive Design wiąże się z ustaleniem w takich jednostkach wymiarów tekstu, marginesów czy paddingu. Biorąc pod uwagę fakt, że domyślnie przeglądarki renderują tekst o wielkości 16px, zastosowanie reguły:

[css]
body {
font-size: 0.625em;
}
[/css]

Spowoduje domyślne sformatowanie tekstu do 10px, jednak dalej możemy tekst powiększać relatywnie bazując na ustalonej wartości, czyli np. do 1em lyb 2em.

Zastosowanie JavaScript w Responsive Webdesign

W niektórych przypadkach możemy skorzystać także z JavaScript aby wykryć parametry klienta. CSS3 Media Queries daje nam wiele możliwości, poza testowaniem szerokości i wysokości możemy sprawdzać np. ilość kolorów czy rozdzielczość. Jednak z pomocą JavaScript mamy także dostęp do wiadomości o agencie, na przykład możemy sprawdzić z jakiej przeglądarki korzysta użytkownik i czy wspiera ona same Media Queries. Popularnym gotowym skryptem, który umożliwia takie testy jest Modernizr. Możemy także sami wykonać odpowiedni kod JS, przykładowo:

[javascript]
if ((screen.width>=1024) && (screen.height>=768))
{
//instrukcje
}
else
{
//instrukcje
}
[/javascript]

Popularną techniką jest łączenie tych wszystkich sposobów, a zatem przykładowo wykrywanie działania Media Quries z pomocą JavaScript i Modernizr, następnie same instrukcje CSS3 Media Queries, a dla niektórych elementów na przykład akapitów i kontenerów z tekstem na naszej stronie – wykorzystanie jednostek relatywny.

Podsumowanie

Jak widzisz istnieje wiele możliwości na dopasowanie naszej strony WWW do wielu ekranów i urządzeń. Większość z nich możesz już teraz bezpiecznie stosować w swoich projektach. Chciałbym w tym miejscu wymienić jeszcze kilka wad i zalet płynących z wykorzystania Responsive Webdesign:

Zalety:

• Dotarcie do mobilnego segmentu rynku – jesteśmy w stanie stworzyć witrynę „szytą na miarę” dla urządzeń mobilnych, co przy zwiększonym komforcie korzystania z naszej strony przekłada się bezpośrednio na ROI.
• Wszystko w jednym miejscu – tworząc elastyczną witrynę cały ruch na stronie skumulowany jest wokół jednego adresu URL co korzystnie wpływa na pozycjonowanie oraz intuicyjność korzystania z serwisów
• Dostosowanie wyszukiwarek – roboty indeksujące są w pełni przystosowane do wymogów stawianych przed autorami witryn w kontekście Responsive Design i potrafią dobrze katalogować nasze treści (wyjątek poniżej)
• Brak przekierowań – korzystając z Responsive Design eliminujemy konieczność przekierowywania użytkownika między serwisami, co wiąże się z mniejszym komfortem i dłuższym czasem załadowania strony
• Prostsze zarządzanie – wprowadzanie zmian do elastycznych serwisów wiąże się z modyfikacją jednego kodu źródłowego, czego rezultat ma miejsce automatycznie we wszystkich wersjach serwisu.

Wady:

• Dłuższy czas przygotowania – jest to pozorna wada, ponieważ jeśli mielibyśmy w planie przygotowanie osobnych serwisów mobilnych i hostowanie ich pod odrębnymi domenami np. m.mojadomena.pl, zabrałoby to więcej czasu. Jednak w porównaniu do tworzenia strony WWW przystosowanej do jednej rozdzielczości na pewno jest to duża ilość dodatkowego kodu.
• Dłuższe ładowanie – niemal w każdym przypadku wykorzystanie technik Responsive Webdesign w pewnym stopniu spowolni naszą stronę, ponieważ użytkownik będzie musiał pobrać część niepotrzebnych linii kodu HTML i CSS.
• Mniejsza kontrola – korzystając z layoutu typu fluid bazującego na wartościach procentowych, mamy trochę mniejszą kontrolę nad każdym pixelem a zarazem nasza strona może wyświetlać się w nieprzewidziany przez nas sposób. Dlatego dużo czasu należy poświęcić na testowanie.
• Ranking Goole – w chwili obecnej niektórzy autorzy wskazują, że strony które posiadają wyłącznie wersję mobilną nie są indeksowane w wyszukiwarce. Nie jest to jednak problemem przy schemacie który omówiłem powyżej.

To już wszystko w części wprowadzającej, szczegółowe omówienie i praktyczne przykłady wyżej wspomnianych zagadnień zawiera Kurs Responsive Design – Elastyczne Strony WWW.

Serdecznie pozdrawiam,
Grzegorz Róg