YELLOWTEAM.PL

Na przestrzeni ostatnich lat pojawiło się wiele różnych urządzeń za pomocą których można przeglądać Internet , a co za tym idzie ta sama strona internetowa powinna dobrze wyświetlać się na różnych ekranach takich jak smartfon, telefon, tablet, netbook, pc … a w przyszłości zapewne na wszystkie urządzenia posiadające ekran jak telewizor, konsole do gier itp i dostęp do internetu.

Problem dla projektantów chcących obsłużyć większość tych urządzeń,  stał się na tyle poważny że przygotowanie witryny wyglądającej tak jak byśmy tego chcieli na wszystkich możliwych urządzeniach i konfiguracjach jest praktycznie niemożliwa. Z pomocą przychodzi nam tutaj właśnie Responsive Web Design.

RWD (tworzenie stron responsywnych) to przede wszystkim rozwiązanie problemu wielu rozdzielczości, nowa idea a nawet rewolucja w web designie, którą zapoczątkował Ethan Marcotte ( zdjęcie tego artykułu - okładka książki Ethan'a Marcotte'a ) znany z wielu publikacji na temat standardów sieciowych. Polega ona głównie na tym że strona internetowa a dokładniej jej architektura treści i sposób prezentacji elementów zmienia się wraz ze zmianą szerokości witryny.

Inaczej mówiąc witryna będzie wrażliwa ( responsive - patrz tytuł artykułu :) ) na zmiany wielkości urządzenia na którym ta witryna jest wyświetlana. Przy czym wszystko ma działać automatycznie bez tworzenia oddzielnych wersji dla różnych rozdzielczości ekranu.
Jeden serwis dla wszystkich rozdzielczości ekranu to ograniczenie kosztów produkcji.
 
Dla tworzenia tego typu stron wykorzystuje się skrypty Media Queries, które pozwalają właśnie na zgrabne kontrolowanie tego, co internauta zobaczy bez względu na to, z jakiego urządzenia skorzysta – laptopa, tabletu czy smartfona. Te ostatnie urządzenia zasługują na szczególnie potraktowanie, jak dowodzą badania Instytutu Nielsen z końca 2011 roku przeprowadzonych w USA – coraz bardziej lubimy kupować za pomocą urządzeń mobilnych przez strony www.

Responsive Web Design daje możliwość stworzenia jednej strony, która poprawnie będzie się wyświetlać na wszystkich urządzeniach. Responsive Web Design jednak wymaga sporo uwagi na etapie projektowania i planowania zmian front-endu  dla różnych szerokości ekranów, biorąc pod uwagę  wiele zmiennych wpływających na ostateczny wygląd naszej strony.

Jak to wygląda w praktyce?

Wdrożenie elastycznej strony www wymaga dużo więcej pracy, jest zatem bardziej kosztowne. Poza tym trzeba wziąć pod uwagę, że sytuacja na zachodzie wygląda znacznie inaczej, gdzie dojeżdzając do pracy pociągiem, co 4 osoba surfuje na iPadzie lub czyta coś na Kindle  , a każdy ma telefon z dotykowym wyświetlaczem i przegląda internet lub maila.
W Polsce takie zwyczaje jeszcze nie są praktykowane aż na tak dużą skalę, dlatego na chwilę obecną na polski rynek nie jest to na razie opłacalne. Poza tym nie każde layouty da się zaimplementować.

Przeglądarki internetowe zainstalowane w telefonach radzą sobie z tradycyjnie przygotowanymi stronami www w ten sposób, że po prostu wyświetlają stronę pomniejszoną do rozmiaru ekranu, następnie można powiększyć wybrany fragment i w miarę wygodnie czytać. W przypadku większości serwisów ten mechanizm wystarcza, jest to jednak półśrodek.  
Przewijanie strony internetowej w poziomie nie jest czymś naturalnym i powinniśmy traktować to jako błąd ze strony projektantów. Użytkownicy przyjeli taki sposób zachowania stron jako tak zwaną oczywistą oczywistość i starają się do tego przywyknąć.

Strony oparte o RWD dają wielką wygodę. Przy dobrze zaprojektowanej stronie nawigowanie jest czytelne, w przeciwieństwie do małych linków ustawionych blisko siebie przy tradycyjnym sposobie wyświetlania na ekranach telefonów, za każdym razem w sposób nienaturalny musimy powiększać stronę.

W RWD Elementy strony są  intuicyjne a architektura treści przejrzysta. Trzeba mieć też na uwadze że pomiędzy kursorem a dotykiem jest ogromna różnica i strona powinna być przygotowana odpowiednio do interfejsu.

Musimy wziąć pod uwagę również to, że  z mobilnych urządzeń do przeglądania internetu używamy będąc często w ruchu a więc przystosowywanie stron do mobilnych realiów jest dość istotne, aby w szybki, łatwy i przyjemny sposób zawsze dotrzeć do interesujących nas na stronie tematów, nie zaś doprowadzać się co chwila do frustracji.


Aby przedstawić wizualnie to zagadnienie podaje link do strony Mediaqueries z przykładami RWD: mediaqueri.es