Strona responsywna – co to takiego i po co Ci to? + krótka rozmowa z Olą Gościniak

17 sierpnia 2017 | komentarze: 1

O tym, że coś takiego jak strona responsywna istnieje, wie już większość internetów. Spora część internetów wie też, co to takiego jest i że jest to bardzo, bardzo istotne. Cały czas jednak zdarza mi się dostawać maile, że ktoś coś tam o tej responsywności czytał, komuś się to obiło o uszy, ale tak do końca to nie wie czy responsywna strona to mus, czy można machnąć na to ręką?

Jeśli Ty także masz tego typu wątpliwości, to zaraz Ci je rozwieję 🙂

Na wstępie trochę sobie powspominam 🙂

Początki mojej przyjaźni z responsywnością stron były burzliwe 😀 Pamiętam pewien dzień, kiedy lata temu hobbystycznie prowadziłam dla kogoś stronę www, nie mając bladego pojęcia, że coś takiego, jak RWD (Responsive Web Design) wchodzi w życie. W tym pamiętnym dniu dostałam zdjęcie przedstawiające, jak strona mojego autorstwa prezentuje się na komórce – a prezentowała się okropnie! Do kompletu dostałam drugie zdjęcie, przedstawiające przykład strony responsywnej, która prezentowała się o wiele, wiele lepiej. W pierwszej chwili zapadłam się pod ziemię, w drugiej chwili… dalej pod tą ziemią siedziałam, bo było mi strasznie głupio, że nawet nie wiem, co to RWD 😉 , a w trzeciej chwili postanowiłam wygrzebać się na powierzchnię i się tego czegoś nauczyć.

I zakochałam się! Zakochałam się na zabój w możliwościach, jakie RWD daje. Ta miłość trwa do teraz i chcę się nią z Tobą trochę podzielić 🙂

Strona responsywna – co to takiego?

Strona responsywna to taka, która zmienia się w zależności od tego czy odwiedzasz ją z komputera, telefonu, tabletu lub czegokolwiek innego oraz czy telefon/tablet trzymasz w poziomie czy w pionie, czyli krótko mówiąc od tego, w jakiej rozdzielczości ją oglądasz.

W większych rozdzielczościach strona ma bardziej „bujną” oprawę graficzną i więcej się na niej dzieje. Przy projektowaniu takiej strony można sobie bardziej poszaleć graficznie, choć ja lubię strony projektować tak, by w rozdzielczościach telefonowych móc „ocalić” maksymalnie dużo takiego… jakby to ująć?… graficznego uroku, jaki ma strona desktopowa (czyli ta „duża”) 🙂

W mniejszych rozdzielczościach (w szczególności tych telefonowych) grafika jest okrojona, a priorytetem jest to, żeby:

  • strona nie ładowała się w nieskończoność, tylko jak najszybciej,
  • teksty były maksymalnie czytelne,
  • wszelkie ważne elementy (typu „call to action”) były wyeksponowane i wygodne do „tapnięcia” palcem.

Responsywność strony możesz zobaczyć, zmniejszając swoją przeglądarkę. Im mniejsze okno przeglądarki, tym mocniej strona się przeobraża: tu coś znika, tam się przesuwa, aż w końcu zostaje tylko to, co najistotniejsze, bez niepotrzebnych bajerów.

Nie znaczy to rzecz jasna, że skoro strona w małych rozdzielczościach ma być „uboższa” graficznie, to ta „ubogość” oznacza brzydotę. Co to to nie! Ja tworząc strony przywiązuję bardzo dużą wagę do tego, żeby strona na telefonie była nie tylko czytelna, ale też miła dla oka. Ma to być miniatura desktopowej strony – prostsza, ale nie brzydsza 🙂

Co się dzieje, kiedy odwiedza się nieresponsywną stronę z telefonu czy tabletu?

Dzieją się okropne rzeczy 😉 Najczęściej taka strona jest maleńka i totalnie nieczytelna, a przeczytanie na niej tekstu lub „tapnięcie” w menu czy cokolwiek innego może nieźle wkurzyć. Ja z takiej strony zwiewam w sekundę i wiem, że nie jestem jedyna – szybko wkurzających się osób jest masa 😉

Jak to wygląda w praktyce?

Tak na przykład wyglądałaby strona Uli Phelep, jeśli przy jej kodowaniu olałabym responsywność (obok widzisz prawdziwą, responsywną wersję, czyli taką, jaką zobaczysz po wejściu na www.urszula-phelep.com z telefonu).

Strona responsywna - co to jest - Zdjęcie nr 1

Mockup: Michał Jakobsze

A tak wyglądałby np. formularz do zapisu na newsletter na stronie Pani Swojego Czasu (to to maleństwo na szarym pasku na dole), jeśli nie zakodowałabym jej jako strony responsywnej. Zapisywanie się na newsletter w takim formularzu nie jest zbyt wygodne, prawda? Obok widzisz prawdziwy, responsywny formularz – taki, jaki zobaczysz po wejściu z telefonu na www.paniswojegoczasu.pl.

Strona responsywna - co to jest - Zdjęcie nr 2

Mockup: Michał Jakobsze

Dlaczego responsywność strony to prawie „must have”?

Dlatego, że cała masa osób przegląda internety z telefonów czy tabletów. To już nie jakiś tam niewielki procent, jak kiedyś. Statystyki mówią, że w ostatnim czasie numerem 1 jeśli chodzi o rozdzielczość jest 360×640 pikseli, czyli jedna z rozdzielczości telefonowych. Około 21% osób odwiedza strony z telefonów o takiej rozdzielczości. TO BARDZO, BARDZO DUŻO. Druga w kolejności jest rozdzielczość 1366×768 pikseli, czyli jedna z rozdzielczości laptopowych – około 18-19%.

Machnięcie ręką na te 21% osób jest jak strzelenie sobie w stopę. Dlaczego więc responsywność strony to tylko PRAWIE „must have”? Dlatego, że RWD nie jest jedną jedyną możliwością – drugą jest strona mobilna (bo nie jest to jedno i to samo).

Strona mobilna a responsywna

Co to jest strona mobilna?

Strona mobilna także zmienia się w zależności od tego, skąd ją odwiedzasz, jednak kluczem nie jest tu rozdzielczość, tylko urządzenie. Mobilna strona od responsywnej różni się tym, że jest jakby „osobnym bytem”, mającym swój indywidualny adres, inny od adresu „podstawowej” strony (np. dla adresu lalala.pl adres mobilny to m.lalala.pl czy lalala.pl/mobile). Strona taka „wyniuchuje”, że odwiedzasz ją z telefonu czy tabletu i przekierowuje Cię pod adres mobilny.

Jak żyć? Jaką stronę www wybrać?

Stronę mobilną możesz brać pod uwagę np. kiedy masz już swoją stronę i jej przerobienie na responsywną byłoby kłopotliwe i kosztowne, a nie masz na to budżetu (bywa, że przeróbka już istniejącej strony na responsywną może być bardziej kosztowna niż strona mobilna).

Przed podjęciem decyzji – strona responsywna czy mobilna – warto wziąć pod lupę także to, jak obie strony radzą sobie, jeśli chodzi o SEO, czyli o optymalizację pod kątem lepszego pozycjonowania strony, np. w Google.

W temacie SEO żaden ze mnie spec, więc podpytałam o to Olę Gościniak, która objaśni Ci to o wiele lepiej 🙂

Strona responsywna i mobilna a SEO. Krótka rozmowa z Olą Gościniak.

Ola Gościniak - Jestem Interaktywna

Ola Gościniak

Pisze bloga Jestem Interaktywna. Zakochana w WordPressie (ponoć z wzajemnością), ogarnia też SEO i lubi nowe technologie. Pisze, uczy i radzi na grupie wsparcia dla kobiet na FB „Jesteśmy interaktywne”, tworzy kursy online oraz prowadzi szkolenia i warsztaty. Swoje hobby odnalazła w uczeniu, jak samodzielnie stworzyć stronę WWW marzeń i każdego dnia dodawać jej skrzydeł.

Olu, patrząc pod kątem SEO – wygrywa strona responsywna czy mobilna?

Obydwa te podejścia są prawidłowe, jeśli zależy nam na pozycjonowaniu strony internetowej.

Czy któreś z podejść pozycjonuje się lepiej? Strona mobilna, dzięki temu, że jest dostosowana specjalnie do urządzeń mobilnych, jest na pewno szybsza, co jest premiowane przez Google. Chodzą słuchy, że w tym wypadku na minus jest duplikacja treści, jednak to rozwiązanie staje się coraz bardziej powszechne, a co za tym idzie zostało także zaakceptowane przez Google.

Osobiście jednak bardziej wolę dobrze zoptymalizowaną i szybką na każdym urządzeniu stronę responsywną. Będzie się ona pozycjonowała równie dobrze jak strona mobilna. Dlaczego ją wybrałam? Bo znacznie łatwiej utrzymuje się stronę responsywną, koszt jej stworzenia jest mniejszy oraz wyświetla się ona prawidłowo nawet na urządzeniach desktopowych, np. w momencie, gdy zminimalizujemy przeglądarkę.

Od dłuższego czasu słyszy się to tu, to tam, że Google faworyzuje strony responsywne/mobilne. Czy to prawda, czy fałsz? 🙂

Wiosną 2015 roku została wprowadzona przez Google aktualizacja, która wpływa na to, że strony www przyjazne dla urządzeń mobilnych są wyżej wyświetlane w wyszukaniach na urządzeniach mobilnych.

Zgodność swojej strony internetowej można sprawdzić tutaj: search.google.com/test/mobilefriendly.

Sprawdź swoją stronę i zadbaj o dostosowanie jej do wymagań Google. Na co między innymi jest zwracana uwaga?

  • Prawidłowe wyświetlanie strony www – czy wszystkie elementy są czytelne i widoczne?
  • Wygoda – czy wszystkie linki są możliwe do kliknięcia, aby móc wybrać link palcem?
  • Szybkość – czy strona ładuje się szybko i nie „zje” transferu? (optymalny czas to 1-3 sekundy wczytywania).
Strona responsywna - co to jest - Zdjęcie nr 3

Mockup: Michał Jakobsze

Wspomniałaś o duplikacji treści na stronie mobilnej (jeśli ktoś z moich czytelników nie wie, co to takiego, to podpowiem, że jest to powielenie treści z jednego miejsca w sieci w innym miejscu, także w ramach jednej strony www, np. na dwóch podstronach). Czy mimo, że duplikacja treści na stronie mobilnej nie jest już takim „nieszczęściem” jak kiedyś, można zrobić coś, żeby NA PEWNO nie odczuć jej efektów?

Aby mieć pewność, że treści strony mobilnej będą na pewno dobrze pozycjonowane, warto dodać swoją stronę oraz wersję mobilną do Google Search Console i wskazać główną wersję. Wtedy na pewno będzie łatwiej reagować na wszelkie problemy związane z indeksowaniem.

Spotkałam się też nie raz i nie dwa z namawianiem do strony responsywnej przez wzgląd na Google Analytics, bo niby analiza strony mobilnej jest trudna. Znów zapytam: czy to prawda, czy fałsz?

Analiza strony mobilnej w Google Analytics wcale nie musi być trudniejsza. Możemy tak skonfigurować swoje raporty, aby dane były zbierane na jednym koncie. Zrobimy to w ustawieniach w dziale „Administracja” za pomocą widoków oraz filtrów. To jest głównie kwestia poprawnej konfiguracji.

Czy responsywna strona to mus, czy można machnąć na to ręką? Click To Tweet

Podsumujmy 🙂

Podobnie jak Ola, ja także jestem za stronami responsywnymi i takie strony tworzę dla moich klientów.

Dzieje się tak z kilku powodów:

  • Strona responsywna jest przyjaźniejsza w takim codziennym „obcowaniu” – wygodniej się ją edytuje, bo edycja ma miejsce tylko na jednej stronie, a nie na dwóch, jak to najczęściej bywa ze stroną mobilną.
  • Mimo że dbanie o SEO i analiza w Google Analytics nie jest na stronie mobilnej aż takim kłopotem, to dla mniej wprawionej osoby konfiguracja GA pod tym kątem może nie być bułką z masłem, a im prościej, tym lepiej 🙂
  • O wiele bardziej lubię efekt płynnego zmieniania się strony w zależności od tego, w jakiej rozdzielczości się ją ogląda niż „sztywną” stronę mobilną. Lubię także to, o czym wspomniała Ola – że strona responsywna zmienia się nie tylko na telefonie czy tablecie, ale i na komputerze, kiedy zmniejszamy okno przeglądarki.

Czyli:

  • Jeśli przymierzasz się do stworzenia strony www od zera – postawiłabym na responsywność.
  • Jeśli masz już swoją stronę, a jej przeróbka na wersję responsywną nie jest dla Ciebie zbyt kosztowna/kłopotliwa – także postawiłabym na responsywność.
  • Jeśli masz już stronę i z jakiegoś powodu wersja mobilna jest dla Ciebie mniejszym kłopotem – postaw na nią i zadbaj o to, żeby wszystko grało pod kątem SEO i analizy w Google Analytics (jeśli to dla Ciebie istotne).

A Ty masz już responsywną/mobilną stronę www? Pochwalisz się nią w komentarzu? Zróbmy sobie komentarzowe link party, czy – jak to lubię nazywać na FB – linkowanie przy kawie 🙂

Uściski 💛 💚 💙
Natalia, Pogromczyni Pixeli 😀

Natalia Bednarczyk - Pogromczyni Pixeli - Pixels Factory