rwd piotrek tour mobilnosc strona www

Piotrek-tour.pl: dodanie mobilności do strony zbudowanej na CMS WordPress

Ten wpis jest opisem jednego z niedawnych zleceń. Klient posiadał stronę internetową wykonaną w oparciu o CMS (system do zarządzania treścią) WordPress. Strona internetowa piotrek-tour.pl nie posiadała wersji mobilnej. Oznacza to, że po wejściu na stronę ze smartfona lub tabletu użytkownik widział tę samą, dużą wersję strony co użytkownik odwiedzający z komputera. Jeżeli strona nie jest w stanie dostosować się do małego ekranu urządzenia mobilnego jest niestety słabiej dostępna. Jakie są tego konsekwencje?

Dodanie RWD do strony piotrek-tour.pl

Dodanie RWD do strony piotrek-tour.pl

Ile osób odwiedza Twoją stronę z urządzeń mobilnych?

Proszę spojrzeć do statystyk swojej strony (np. w Google Analytics). Obecnie ruch z urządzeń mobilnych może dochodzić nawet do 50% (sporo zależy od branży i innych czynników). W każdym razie łatwo można obliczyć, jak wielu użytkowników próbowało poradzić sobie ze stroną na małym ekranie. Czy sobie poradzili? Odpowiedzi na to pytanie należy szukać indywidualnie. Mierzalne konsekwencje są takie, że wyszukiwarka Google zdecydowanie faworyzuje strony dostosowane do urządzeń mobilnych. Informacje o tym pojawiały się na oficjalnym blogu Google oraz w wytycznych dla webmasterów przygotowywanych przez pracowników Google. Jeżeli konkurencja o to zadbała, możemy przypuszczać, że w wynikach wyszukiwania pojawi się wyżej od nas.

 

Kilka słów technicznych

Front-end, czyli widoczna w przeglądarce część strony została zakodowana bez użycia tzw. frameworka. Oznacza to, że poziom usystematyzowania kodu jest niższy i słabiej zrozumiały dla programisty stojącego przed zadaniem dobudowania do strony www mobilności. Zastosowanie popularnych standardów (np. Bootstrap) pozwala już na początku uwzględnić responsywność strony lub przynajmniej zastosować odpowiednie podstawy. Oczywiście można sobie poradzić bez tego – wystarczy rozgryźć sposób myślenia autora kodu. Przy okazji tego typu prac zwykle również optymalizujemy kod pod kątem Google – umieszczamy nagłówki h1, h2, itd. usuwamy zbędne znaczniki. W przypadku tego typu prac najwięcej kłopotów sprawiają szerokie tabele oraz elementy interaktywne (w tym przypadku galerie), ale poradziliśmy sobie ze wszystkim wzorowo (klient jest zadowolony 🙂 użytkownicy, mamy nadzieję, też).

Efekt końcowy – przegląd

Obecnie nie da się odczuć, że strona nie posiadała mobilności od samego początku. Można sprawdzić samodzielnie wchodząc na stronę klienta: www.piotrek-tour.pl lub oglądając poniższy film.

 

 

Dodaliśmy ciekawe udogodnienie dla użytkowników. Mianowicie po wybraniu opcji z menu ekran na urządzeniu mobilnym automatycznie zjeżdża do treści pod menu. Jest to użyteczne rozwiązanie ze względu na to, że długość menu w niektórych przypadkach (podkategorie) może być dosyć duża i użytkownik tak naprawdę mógłby w ogóle nie zauważyć, że nastąpiło przeładowanie treści.

Jeżeli Twoja strona nie posiada mobilności, skontaktuj się z nami już dzisiaj! Zapraszamy.