Przyznam się, że do niedawna sam nie potrafiłbym odpowiedzieć na tak postawione pytanie. I dopiero zwrócenie uwagi na ten temat przez znajomego sprawiło, że zacząłem się bliżej interesować tym tematem.
Responsive web design to sposób konstruowania stron internetowych w taki sposób, aby witryna samoistnie dopasowywała się do różnych urządzeń, na których będzie przeglądana. Normalnie pracuję na 22″ monitorach – ale używam też 13,3″ notebooka oraz (a jakże, „smycz” też musi być) 4,3″ HTC Desire HD. Do pełni szczęścia brakuje mi tylko chyba tableta – np. tego, co ma go wypuścić Google – chyba 7″ to będzie.
Przykład zastosowania poniżej
O ile Google oficjalnie nie zajęło jeszcze stanowiska w zakresie wytycznych tworzenia stron opartych na jednym adresie url – nadal wiele witryn ma wersje „normalne” i „mobilne” – o tyle Bing niedawno jasno zadeklarował, że strony powinny być dostępne tylko pod jednym adresem, bez rozbijania serwisu na strony „stacjonarne” i „mobilne”. Kiedy tylko dowiedziałem się, co znaczy responsive web design, od razu przypomniałem sobie to stwierdzenie i muszę przyznać, że uważam je za słuszne. No bo co – będziemy tworzyć osobno strony na smartfony, osobno na tablety, osobno na komputery stacjonarne? Bez sensu.
Po wstępnej sondzie wśród znajomych widzę, że webmasterzy nie do końca jeszcze „czują bluesa” i na razie nie robią stron zgodnie z zaleceniami RWD. O ile w przypadku małych serwisów jest to zrozumiałe, o tyle duże firmy nie mogą sobie na to pozwolić, ponieważ jak wynika z badania, jakie przeprowadził comScore
2012 U.S. Digital Future in Focus, reports smartphone and tablets are drastically altering “consumers’ digital media consumption,” concluding the majority of mobile phone owners used their devices for accessing the Web in 2011 for surfing, shopping, banking or any desired action.
czyli udział smartfonów i tabletów w naszym życiu drastycznie zwiększy się, co wpłynie na konieczność dopasowywania stron pod te właśnie urządzenia. Kto tego nie zrobi, może sporo stracić.
Przeglądając obecnie strony na swoim HTC mam do wyboru – albo włączyć mobilne strony albo „bawić się” w rozciąganie obrazu. Oba rozwiązania mają swoje minusy. Pierwsze – strony mobilne nie mają wielu funkcjonalności stron stacjonarnych. Drugie – aby poszukać informacji trzeba się „poprzesuwać” i „ponaciągać”. Oba te minusy likwiduje responsive web design.
Jaki to ma wpływ na SEO?
Bardzo duży – im strona jest częściej odwiedzana, im więcej czasu na niej spędzamy – tym bardziej zyskuje w „oczach wyszukiwarki”. Tego nikt chyba nie zakwestionuje?
Zachęcam do zapoznania się z ciekawym artykułem, który przybliża temat oraz pokazuje nam przykłady zastosowania tej techniki w praktyce.
Gdy pierwszy raz zobaczyłem taką stronę od razu wiedziałem, że to jest przyszłościowe rozwiązanie – podpatrzyłem i stosuję. Moim zdaniem to nie webmasterzy „nie czują bluesa”, bo takie strony tworzy się łatwo, tylko designerzy i klienci. Jak dostaję od grafika szablon, którego nijak nie da się przystosować do smartfona, a klienta w 99% przypadków to kompletnie nie interesuje, to nie mam co wysilać i przekonywać do oczywistości – pieniędzy mi od tego nie przybędzie. Niestety webdeveloper jest na końcu łańcuszka i ma paradoksalnie najmniejszy wpływ na wygląd i funkcjonalność strony.
Coś w tym jest, norbis. Pochwalisz się jakimś projektem? 🙂
Oj, jako początkujący w SEO wolałbym nie podawać adresów stron klientów 😉 Jestem jednak w trakcie własnego projektu w którym będzie to bardzo widoczne i z chęcią wrzucę tu linka jak skończę.
Jasne, w pełni zrozumiałe 🙂 – może jak zrobisz swoją stronę, to się pochwal 🙂
Nigdy nie ograniczę funkcjonalności czy usability w celu dopasowania strony do 4-calowego ekranu. Użytkownicy urządzeń niebędących komputerami nie są istotną grupą docelową żadnego z moich serwisów.
A jakby byli?
A jakiś przykład takich stron można poprosić?
http://themeforest.net/item/smartstart-responsive-html5-template/full_screen_preview/1674915
To zrobiłbym dwie wersje, pod dwoma adresami, ponieważ:
1. Jak pisałem wyżej, wersja desktopowa nie powinna mieć ograniczonej funkcjonalności w celu ułatwienia przeglądania jej na małym ekranie, ponieważ użytkownicy dużych urządzeń stanowią większość i długo się to nie zmieni. Zgodzisz się chyba ze mną, że interfejs Windows nie powinien wyglądać jak sztucznie rozciągnięty na duży ekran interfejs Androida, tylko zupełnie inaczej. To samo dotyczy stron internetowych. Dopasowanie strony do miniaturowych ekranów oznaczałoby m.in. rezygnację z tabel (na przykład z danymi technicznymi kilku porównywanych na stronie urządzeń) i wstawianie wszędzie jednowymiarowych list, które są mniej czytelne.
2. Uruchomienie dwóch wersji pod jednym adresem wymaga sprawnie działającego mechanizmu wykrywania urządzenia, z czym nawet najwięksi mają problemy: http://meta.wikimedia.org/wiki/Mobile_Projects/BadRedirect, zwłaszcza że nie istnieje publiczna baza rodzajów user-agentów. Poza tym niektórzy użytkownicy chcą ręcznie zmienić wersję na inną, a cookies w telefonach działają różnie, przez co URL (prawdopodobnie dodany do zakładek) jest jedynym miejscem pozwalającym zachować informację o wybranej wersji.
ad 1) Na razie mam wtyczkę na WordPressie „na szybko” i przyznam, że nie nie jestem z niej zadowolony. Pod nowy szablon muszę coś wymyślić. Zapewne pod niektóre branże, czy rozwiązania – np. blogowe – sprawdzi się RWD. Ale pod techniczne kwestie, jak piszesz, pewnie nie – argumenty podałeś sensowne. Chociaż pytanie, czy użytkownik miałby chcieć sobie powiększać na 4″ urządzeniu tabelkę i potem ją przesuwać „w nieskonczoność”?
ad 2) Nie wiem, jak to działa – jak jednak testowałem przykładowe szablony na desktopie, to się same ustawiały, jak zmniejszałem ekran.
Ja tylko z małą uwagą na temat ortografii 😉
„Po wstępnej sądzie wśród znajomych(…)”
Chyba powinno być „sondzie” 🙂
Yes, dzięki za uwagę. Musiałem coś namieszac z lierami i WordPress poprawił to na sąd, a nie sonda 🙁
Właśnie o to mi chodzi, żeby na dużym ekranie pokazać tabelę, a na małym ekranie zwykłą listę. Nie zrobisz tego inaczej niż generując różny HTML w zależności od user-agenta. Responsive web design polegałby na zrobieniu zawsze listy, najwyżej o różnej liczbie kolumn na różnych urządzeniach, co nie jest najlepsze.
Ale wiesz, że aby mieć dwa zupełnie różne kody HTML (klasyczna metoda, a nie responsive web design) pod tym samym adresem, musisz rozpoznawać po czymś urządzenie.
Standardem jest raczej uruchomienie drugiej wersji na subdomenie o nazwie „m”, a nie korzystanie z tych samych adresów.
Trafne uwagi, jak zawsze, Colin 🙂
Ale zgodzisz się, że w pewnych rozwiązaniach to zastosowanie jest przydatne? Nie jestem jednak webmasterem „z krwi i kości” i nie wiem, czy łatwiej jest napisać wersję klasyczną i mobilna, czy zastosować RWD..
Jest przydatne przy dostosowywaniu dużej wersji do różnych rozdzielczości, pozwala np. wyświetlać coś normalnie na dole, a w wysokiej rozdzielczości po prawej stronie.
Zgadzam sie z colinem. Sporo latam po stronach przez telefon i szlak mnie trafia jak automatycznie wrzuca mnie na strone mobilna np. Groupon czy allegro gdzie funkcjonalnosc jest ograniczona jakbym mial tak na pc to by mnie cos trafilo 🙂
I rzeczywiscie wazna jest Twoja grupa docelowa.
@gdaq – możesz sobie wyłączyć jedną opcję i będziesz widział strony „normalnie” 🙂 – ja tak zrobiłem, bo strony mobilne u nas robi się często z tak dużymi ograniczeniami w stosunku do wersji desktopowej, że człowieka „trafia”…
Większość telefonów, nawet tych z Androidem, nie ma opcji zmiany user-agenta.
Mam na myśli to, że wyłączam sobie „widok dla komórek”, zbyt chyba ogólnie napisałem…
http://jportal.pl/responsive-web-design—elastyczne-strony.html 🙂
A da się to jakoś wyłączyć w Firefoxie?
Bo nawet na desktopie, przy wykorzystaniu tylko połowy ekranu, część stron uruchamia się w „mobilnym” (o ile można go tak nazwać?) trybie…
Nie wygląda to fajnie, a wolałbym dalej korzystać z ekranu pół na pół.
Pogrzeb w ustawieniach
Czyli jest to możliwe?
Bo przeglądam about:config (nie wierzę, aby, gdzie indziej coś było), ale nic nie ma co by wyłączało ten tryb…
Ja nie ruszałem tego, więc się nie wypowiem – może ktoś inny pomoże – albo podpytaj na Forum FF