Mobilna wersja strony – jak sprawdzić?

Data: 24 czerwca, 2022

Mobilna wersja strony – jak sprawdzić?

Dobrze zaprojektowana strona internetowa stanowi estetyczną wizytówkę firmy w sieci. Za jej pomocą możemy opowiedzieć o naszej marce, przedstawić ofertę czy zaprosić odwiedzających do kontaktu. Dzięki odpowiednim technikom SEO jesteśmy w stanie zwiększyć ruch na naszej witrynie, dzięki czemu trafi ona do szerszego grona klientów.

 

Stworzenie strony internetowej przyjaznej odbiorcom, korzystającym z różnego rodzaju urządzeń, wymaga ciągłego monitorowania tego procesu. Jak donoszą statystyki, w 2021 roku ponad połowa użytkowników korzystała z Internetu na urządzeniach mobilnych, a do 2025 roku aż 83% Europejczyków będzie scrollowała swoje smartfony, przeglądając sieć. Jak kontrolować wygląd strony na “mobilkach” podczas jej tworzenia. Wszystkiego dowiesz się z naszego artykułu!

Po co sprawdzać wersję mobile strony?

W ciągu ostatnich lat tworzenie stron internetowych przeszło niemałą przemianę. Dzieje się tak właśnie za sprawą wspomnianych przez nas wcześniej statystyk – większa liczba użytkowników mobilnych wymusza dostosowanie stron, w taki sposób, aby doskonale prezentowały się na urządzeniach przenośnych. 

 

Przeglądanie Internetu na smartfonie to nasza codzienność. Prawdopodobnie każdy z nas trafił na stronę, która nie była dostosowana do urządzeń mobilnych. Takie witryny nie tylko nie prezentują się dobrze, ale przede wszystkim utrudniają zapoznanie się z ich treścią. Większość użytkowników z pewnością porzuci stronę i nigdy więcej na nią nie wróci. 

 

Monitorowanie wyglądu strony za pomocą podglądu wersji mobilnej pomoże Ci dostosować ją w taki sposób, aby była funkcjonalna niezależnie od tego, na jakim urządzeniu zostanie uruchomiona. 

Mobilna wersja strony w Chrome

Wygląd mobilny strony w przeglądarce Chrome możesz w łatwy i szybki sposób podejrzeć za pomocą wbudowanej konsoli Chrome DevTools. Istnieje kilka sposobów, aby ją uruchomić na wybranej stronie:

 

  • użycie prawego przycisku myszy i wybranie opcji “Zbadaj”,
  • skrót klawiszowy Ctrl + Shift + I (Windows, Linux),
  • skrót klawiszowy Ctrl + Shift + C,
  • klawisz F12,
  • skrót klawiszowy Comand + Option + C (MAC).

 

Po uruchomieniu konsoli Chrome DevTools z panelu po prawej stronie wybierz opcję “Przełącz pasek narzędzi urządzenia” (znajdującą się w prawym górnym rogu) lub użyj skrótu klawiszowego Ctrl + Shift + M. Następnie z menu rozwijanego znajdującego się na górze wybierz urządzenie, dla którego chcesz sprawdzić widok. Podgląd wyłączysz za pomocą “X”, znajdującego się w prawym górnym rogu.

tworzenie-stron-internetowych-mobilna-wersja-strony-przeglądarka-chrome

Konsola Chrome DevTools nie tylko umożliwia Ci sprawdzenie wersji mobilnej strony, ale także daje dostęp do opcji takich jak: elementy, konsola, źródła, sieć itp. 

Mobilna wersja strony w Firefox

Jeżeli jesteś użytkownikiem przeglądarki Firefox, sprawa ma się bardzo podobnie, co w przypadku Chrome. Pierwszym krokiem jest odwiedzenie strony, której wersję mobilną chcesz otworzyć. 

 

Używając skrótu klawiszowego Ctrl + Shift + M w kilka sekund otworzysz podgląd mobilnej wersji strony. W menu rozwijanym, znajdującym się u góry okna, tak jak w przypadku Chrome, możesz wybrać interesujące Cię urządzenie. Aby wyłączyć podgląd, użyj “X” w prawym, górnym rogu.   

tworzenie-stron-internetowych-wersja-mobuilna-strony-chrome-wybór-urządzenia

Jeżeli z jakiegoś powodu nie uda Ci się użyć powyższego skrótu klawiszowego, możesz spróbować drugiego sposobu. Wejdź w menu przeglądarki, wybierz “Więcej narzędzi”, a następnie “Narzędzia dla twórców witryn”. W tym przypadku również możesz skorzystać ze skrótu klawiszowego Ctrl + Shift + I, a następnie wybrać ikonę smartfonu, znajdującą się w prawym dolnym rogu. Następne kroki wyglądają tak samo, jak w poprzednim przypadku.  

tworzenie-stron-internetowych-wersja-mobilna-strony-firefox-jak-włączyć

Podgląd mobilny w WordPress

Skorzystanie z tej opcji jest możliwe, jeżeli jesteś administratorem strony. Pierwszym krokiem, jaki musisz wykonać, jest zalogowanie się do panelu WordPress. Następnie przejdź do zakładki “Wygląd” i kliknij “Dostosuj”. 

tworzenie-stron-internetowych-podgląd-wersji-mobilnej-strony-w-panelu-administracyjnym-wordpress

Przeniesiesz się do opcji personalizowania motywu. W lewym dolnym rogu zobaczysz trzy ikony różnych urządzeń. Wybierz tę, która odpowiada Twoim potrzebom. 

Mobilna wersja strony – trzymaj rękę na pulsie

W naszym artykule przedstawiliśmy sposoby na sprawdzenie wersji mobilnej strony. Dzięki temu możesz kontrolować jej wygląd na urządzeniach mobilnych z poziomu przeglądarki internetowej. Monitorowanie witryny podczas procesu jej przygotowywania sprawia, że tworzenie stron internetowych będzie przebiegało bez zbędnych komplikacji. 

 

Źródła:

https://www.broadbandsearch.net/blog/internet-statistics

https://techjury.net/blog/internet-statistics/#gref