3–5 minut
Co oznacza responsywna strona i dlaczego wpływa
na Twój biznes
Cześć! Zdarzyło ci się kiedyś wejść na strony na telefonie i wszystko było poza ekranem? Tekst za mały, trzeba było powiększyć, przewijać na boki a przyciski prawie niemożliwe do kliknięcia?
Większość osób w takiej sytuacji po prostu zamyka stronę i szuka innej. Dlatego pokażę czym tak naprawdę, jest responsywność strony i dlaczego wpływa nie tylko na jej wygląd, ale też na to, jak jest postrzegana przez użytkowników
i oceniana przez Google. Zapraszam do lektury!
Responsywność
Responsywność to dopasowanie strony do każdego urządzenia: komputera, tabletu czy telefonu. Chodzi o to by zawartość strony, układała się automatycznie do wielkości ekranu bez przewijania w bok bez powiększania tekstu czy kombinowania z kliknięciem przycisku.
Dlaczego to ważne?
Ponad 60% użytkowników przegląda dziś strony internetowe na telefonach dodatkowo Google, bierze pod uwagę responsywność przy pozycjonowaniu. Strona, która nie działa dobrze na smartfonie, może po prostu znaleźć się niżej w wynikach wyszukiwania.
Sami zresztą pewnie korzystacie z różnych urządzeń rano telefon potem może laptop czasem tablet, strona powinna być do tego dostosowana, inaczej użytkownik opuszcza daną witrynę.
Na co zwrócić uwagę przy projektowaniu?
Uproszczony układ bez zbędnych kolumn
Mniejsze zdjęcia
Czytelniejsze teksty
Duże i łatwe do kliknięcia przyciski
Animacje ograniczone lub wyłączone całkowicie – ale jeżeli chcemy na przykład wprowadzić animacje na smartfonie, możemy skorzystać na przykład z kodu CSS
Optymalizacja ładowania – nie każdy ma szybki Internet, więc warto zadbać o to, żeby strona szybko ładowała się na smartfonach.
Sposoby na sprawdzenie responsywności strony
Dobrym przykładem strony responsywnej, czyli dostosowanej do różnej wielkości urządzeń jest allegro.pl i youtube.pl.
Pierwszym sposobem sprawdzenia, czy strona internetowa dopasuje się do mniejszych rozdzielczości, jest zmniejszenie okna przeglądarki i sprawdzenie, czy witryna dopasuje się do niej. Weryfikujemy łatwość nawigacji na stronie, przyciski dopasowane do wielkości ekranu, czytelność tekstu, zdjęcia bądź obrazki odpowiedniej wielkości.
Podobnie jest ze stroną YouTube jak powyżej. W momencie, kiedy zmniejszamy okno przeglądarki menu, po lewej schowa się i czeka na rozwinięcie dopiero, jak przyciśniemy odpowiednią opcję, czyli w lewym narożniku menu tzw. hamburger. W momencie, gdy zaczynamy powiększać okno przeglądarki, pojawia się menu po lewej.
Drugim sposobem jest wejście w narzędzie deweloperskie w przeglądarce na przykład Opera, Google Chrome czy Firefox. Będąc na stronie w dowolnym pustym miejscu, na stronie klikamy prawym przyciskiem myszki i z listy rozwijanej wybieramy Zbadaj element (zazwyczaj ostatnia opcja).
Przebywając w narzędziu deweloperskim, jak widać powyżej, po prawej stronie obok Elements mamy dwa ekrany większy
i mniejszy służą do przełączenia się z ekranu monitora na ekrany urządzeń mobilnych.
U góry w narzędziu deweloperskim możemy ręcznie ustawić rozdzielczość strony, którą chcemy sprawdzić na przykład 1500 pikseli na 750 pikseli. To rozdzielczość stron stworzonych w WordPress.
Po wprowadzeniu rozdzielczości tabletu, czyli 1024 piksele na 600 pikseli strona Allegro.pl dostosowała się do ekranu. Wszystko jest czytelne, nie ma problemu z nawigacją na stronie czy elementami znajdującymi się poza ekranem.
W narzędziu deweloperskim przeszłam na mniejszy ekran smartfonu Samsung Galaxy A51. Otworzyłam stronę YouTube
i kanał Samuraj programowania. Jak widać powyżej, strona dopasowała się do rozdzielczości smartfonu. Przycisku są czytelne i łatwe do kliknięcia, podobnie jak linki. Miniatury wideo są odpowiedniej wielkości, co prawda jest ucięty opis,
ale to nie przeszkadza.
Klikając na nazwę smartfonu u góry narzędzia deweloperskiego, można otworzyć listę rozwijaną i zmienić urządzenie na przykład na tablet lub inny model smartfonu. Pozwoli to na sprawdzenie, czy strona będzie dobrze się prezentować na innych urządzeniach.
W miejscu, gdzie mamy możliwość zmiany urządzenia bliżej prawej strony znajduje się przycisk odpowiadający za obrót ekranu na pozycję poziomom.
Google w swoich wytycznych wyraźnie wskazuje, że responsywność to jeden z czynników wpływających na pozycjonowanie strony. Jeśli nie działa dobrze na telefonie – Google to zauważy. Google posiada również darmowe narzędzie – Lighthouse – działa w narzędziu developerskim i podpowiada, czy strona spełnia mobilne standardy. W dostępnych opcjach mamy między innymi weryfikację nawigacji na urządzeniach mobilnych dodatkami takimi jak dobre praktyki czy SEO.
Przeprowadziłam badanie i jak widać YouTube, ma SEO na 100%.
Podsumowanie
Responsywna strona to dziś nie tylko kwestia estetyki, ale też funkcjonalności, wygody użytkownika i lepszej widoczności w Google.
Warto zadbać o to, by użytkownicy – niezależnie od urządzenia – mogli bez problemu korzystać z Twojej strony.
*Uwaga: Fragmenty kodu widoczne na print screenach mają wyłącznie charakter edukacyjny.
Strona działa, ale nikt się nie odzywa – co sprawdzić?
Strona działa, ale nikt się nie odzywa. Co sprawdzić? Wchodzisz do sklepu, wszystko wygląda…
Strona działała, ale Google jej nie widział. Sprawdziłam te ustawienia WordPress
Strona działa, można ją otworzyć z linku, więc pojawia się pytanie:
dlaczego nie wyświetla się…
Formularz kontaktowy nie wysyła wiadomości
Pewnego dnia dzwoni klient i mówi:
Wysłałam tydzień temu zapytanie przez formularz na stronie,
ale…
WordPress to nie tylko szablon.
WordPress to nie tylko szablon. Co decyduje o tym, czy strona naprawdę działa Na…
SEO-wiec, copywriter i marketer czym się różnią i jak wpływają na stronę
Gdy planujesz stronę internetową albo chcesz ją poprawić, pojawiają się trzy pojęcia:
SEO, copywriting…