Jaka jest geneza powstania Responsive Web Design?
W ostatnich latach bardzo szybko zaczęła rosnąć różnorodność urządzeń, za pośrednictwem których korzystamy z Internetu. Problem, z którym spotkali się twórcy stron www polegał na tym, jak zaprezentować użytkownikowi tę samą treść na niezliczonej ilości różnych gadżetów. W grę wchodziły nie tylko różne wielkości ekranów, od dużych monitorów 30-calowych po małe ekrany smartfonów, rozdzielczości od kilkuset do kilku tysięcy pikseli, ale również rożne sposoby nawigacji – tradycyjna i precyzyjna myszka lub gruby palec na małym dotykowym ekranie. Ta różnorodność wymaga zastosowania innych interfejsów i sposobów nawigacji na komputerze i na smartfonie.
Zobacz również
(źródło: punchcut.com/perspectives/the-great-tablet-flood)
Biorąc pod uwagę różnorodność urządzeń, na których użytkownicy oglądają naszą stronę, projektowanie jej w kilkunastu/kilkudziesięciu wersjach byłoby ekonomicznie nieuzasadnione, zwłaszcza że nie wiemy, czy za pól roku nie pojawi się nowy tablet, pod którym nasza strona będzie nieużyteczna.
#PrzeglądTygodnia [05.11-12.11.24]: kampanie z okazji Movember, suszonki miesiąca, mindfulness w reklamach![#PrzeglądTygodnia [05.11-12.11.24]: kampanie z okazji Movember, suszonki miesiąca, mindfulness w reklamach](https://nowymarketing.pl/wp-content/uploads/2024/11/przeglad-tygodnia-5-12-listopada-142x0-c-default.jpg)
I jako odpowiedź na wszystkie te problemy pojawił się Responsive Web Design?
Słuchaj podcastu NowyMarketing
Tak, z pomocą przyszły tu Media Queries w CSS3 umożliwiające tworzenie jednego kodu HTML, który zależnie od rodzaju urządzenia, jego rozdzielczości, położenia (pion/poziom) będzie pokazywał nam stronę dopasowaną do urządzenia, na którym aktualnie ją oglądamy. Nie chodzi tu jedynie o zmianę szerokości strony – możliwości są znacznie większe, możemy zmieniać jej układ, sposób działania nawigacji, wygląd i ilość/widoczność elementów – wszystko czego potrzebujemy, by zoptymalizować stronę pod danym urządzeniem.
Jak to właściwie działa?
Zależnie od potrzeb wyznaczamy sobie tzw. breaking points – punkty, w których strona powinna zareagować zmieniając swój układ/wygląd/ilość elementów/sposób nawigacji. Rozsądnym jest ustalenie breaking points tak, by obejmowały klasy urządzeń typu smartfon, tablet, komputer – do tego można dodać położenie urządzenia (poziome/pionowe) możliwości jest oczywiście więcej – rożne rozdzielczości strony dla monitorów od szerokości 1024 przez okolice 1400 do 1600+ pikseli itd. Szaleć można w nieskończoność. Główną kwestią jest tutaj znalezienie złotego środka. W końcu chcemy uniknąć projektowania pod każde istniejące urządzenie.
Tworzenie stron w idei RWD wymaga od każdego członka zespołu na każdym etapie prac więcej wysiłku niż projektowanie sztywnej strony pod konkretne urządzenie, ale raz podjęty wysiłek sprawi, że nasza strona będzie użyteczna pod wszystkimi urządzeniami teraz i w przyszłości.
Na Zachodzie RWD jest już bardzo mocnym trendem. W sieci możemy szybko wyszukać sporo bardzo ciekawych przykładów stron wykonanych zgodnie z jego zaleceniami. Jak to wygląda w Polsce?
Mówiąc szczerze, w tym temacie nie śledzę polskiego rynku. Prawda jest taka, że większość, jeśli nie wszystkie nowinki z branży, przychodzą do nas z Zachodu. Na zachodnich blogach temat RWD jest bardzo szeroko wałkowany. Prawdziwy boom nastąpił w 2011 roku. Ten rok również przebiega i będzie przebiegał pod znakiem RWD. Wielu specjalistów wróży, że stanie się on jednym ze standardów nowoczesnego web designu. Należy jednak pamiętać, że RWD nie jest jeszcze tworem doskonałym i skończonym – cały czas trwają dyskusje, pojawiają się nowe sposoby, różne podejścia do tematu, hybrydy z innymi rozwiązaniami.
Ciekawych case’ów implemntacji RWD w Polsce niestety nie znam – prywatnie ciekawy jest dla mnie projekt jednego ze sklepów internetowych, nad którym właśnie pracujemy, ze względu na rozmiar oferty i funkcji, jakie oferuje tego typu serwis. Dzięki RWD nie tylko tworzymy optymalne wersje interfejsu dla smartfonów i tabletów, ale także jesteśmy w stanie lepiej wykorzystać większe rozdzielczości ekranu komputerów – i tak dla rozdzielczości 1300+ pikseli interfejs będzie wzbogacony o dodatkowe funkcje nawigacji i większą ilość produktów promowanych niż ma to miejsce w przypadku standardowej szerokości ekranu, pod która obecnie się projektuje (1024px).
Z zagranicznych case’ów ciekawy jest serwis Smashing Magazine, który sam bardzo mocno promuje RWD od długiego czasu i właśnie zgodnie z tą ideą stworzył nową wersję swojej strony.
Co jest przeszkodą na drodze do upowszechnienia się RWD w Polsce?
Myślę, że upowszechnienie się RWD w Polsce to tylko kwestia czasu – jak wspomniałem wcześniej, nowości przychodzą z Zachodu, naturalnym jest, że w Polsce trendy te pojawiają się z opóźnieniem. Nie mamy też aż tak rozwiniętego rynku urządzeń mobilnych jak na Zachodzie, u nas jeszcze na szczęście nie wszyscy mają przyklejony do ręki smartfon lub tablet – ale to również jest już tylko kwestią czasu.
Właściciele stron widzą już wyraźnie rosnący procent odwiedzin z urządzeń mobilnych. Coraz częściej nasi klienci od początku są świadomi potrzeby dostosowania strony pod tym kątem. Patrząc perspektywiczne, za rok, najdalej dwa, będzie to już koniecznością.
Krzysztof Zięba
Zajmuje się projektowaniem serwisów internetowych od 8 lat. Od 2005 roku prowadzi własną agencję TonikStudio (www.tonikstudio.pl) specjalizującą się w dostarczaniu użytecznych i funkcjonalnych interfejsów aplikacji mobilnych oraz stron www. Podczas projektowania skupia się na User Experience. Nad wodotryski graficzne przedkłada skuteczność interfejsu w realizowaniu wyznaczonych celów. Wybrane prace jego autorstwa można zobaczyć w portfolio.