Optymalizacja stron

Co to jest responsive web design? Czeka nas rewolucja w tworzeniu stron internetowych?

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

 

Responsive web design w praktyce

 

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.

GD Star Rating
loading...
Co to jest responsive web design? Czeka nas rewolucja w tworzeniu stron internetowych?, Co to jest responsive web design? Czeka nas rewolucja w tworzeniu stron internetowych?, 8.0 out of 10 based on 4 ratings Co to jest responsive web design? Czeka nas rewolucja w tworzeniu stron internetowych?

Zobacz inne wpisy z tej kategorii

napisał/a 1334 artykułów na rzecz Bloga SEO

Optymalizacja i pozycjonowanie stron i sklepów internetowych w Google to moja pasja.

Od 2008 roku jako Top Contributor pomagam webmasterom rozwiązywać problemy z widocznością ich stron w Google na Forum Pomocy Google dla Webmasterów, na którym jestem najdłuższym stażem TC w Polsce.

W 2010 roku roku założyłem pierwszego w Polsce bloga SEO skierowanego nie do branży SEO, ale stricte do właścicieli stron, na którym przystępnym językiem przybliżam Wskazówki Google dla Webmasterów, opisuję i komentuję zmiany, jakie zachodzą w algorytmie Google. Publikując wskazówki odnośnie tego, jak rozwijać strony, aby rankowały wysoko w Google, pomagam im zwiększać ruch na stronach z naturalnych wyników wyszukiwania.

SEO to także moje życie zawodowe – firma SEOProfi, której jestem właścicielem, świadczy usługi na rynku polsko, anglo- i niemieckojęzycznym.

Opinie i Komentarze

norbis 18 marca 2012, 15:33

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.

Seo-Profi 18 marca 2012, 16:22

Coś w tym jest, norbis. Pochwalisz się jakimś projektem? :)

norbis 18 marca 2012, 18:40

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ę.

Seo-Profi 18 marca 2012, 19:11

Jasne, w pełni zrozumiałe :) – może jak zrobisz swoją stronę, to się pochwal :)

Colin 18 marca 2012, 18:51

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.

Seo-Profi 18 marca 2012, 19:12

A jakby byli?

Rzezniczek 18 marca 2012, 19:21

A jakiś przykład takich stron można poprosić?

Colin 18 marca 2012, 19:39

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.

Seo-Profi 18 marca 2012, 20:30

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.

Karlosky 18 marca 2012, 20:45

Ja tylko z małą uwagą na temat ortografii ;)

„Po wstępnej sądzie wśród znajomych(…)”

Chyba powinno być „sondzie” :)

Seo-Profi 18 marca 2012, 21:00

Yes, dzięki za uwagę. Musiałem coś namieszac z lierami i WordPress poprawił to na sąd, a nie sonda :(

Colin 18 marca 2012, 20:57

Chociaż pytanie, czy użytkownik miałby chcieć sobie powiększać na 4″ urządzeniu tabelkę i potem ją przesuwać „w nieskonczoność”?

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.

Nie wiem, jak to działa

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.

Seo-Profi 18 marca 2012, 21:03

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..

Colin 18 marca 2012, 21:14

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.

gdaq 19 marca 2012, 7:58

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.

Seo-Profi 19 marca 2012, 8:53

@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”…

Colin 19 marca 2012, 9:33

Większość telefonów, nawet tych z Androidem, nie ma opcji zmiany user-agenta.

Seo-Profi 19 marca 2012, 10:14

Mam na myśli to, że wyłączam sobie „widok dla komórek”, zbyt chyba ogólnie napisałem…

ch3mn3y 29 sierpnia 2016, 18:10

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ół.

Sebastian Miśniakiewicz 29 sierpnia 2016, 18:14

Pogrzeb w ustawieniach

ch3mn3y 29 sierpnia 2016, 18:31

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…

Sebastian Miśniakiewicz 29 sierpnia 2016, 18:36

Ja nie ruszałem tego, więc się nie wypowiem – może ktoś inny pomoże – albo podpytaj na Forum FF

Skomentuj

Twój adres e-mail nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *