Tematyka serwisów internetowych jest jak rzeka, można ten temat opisywać z różnych strona – a i tak może nam zabraknąć papieru w drukarce. Tak jak i na tym blogu, co jakiś czas staram się poruszać różnego rodzaju problemy lub tematyki, jednak myślę że poruszyłem i tak nie wielki procent problemów z jakimi się zmagacie. Sam niejednokrotnie utknąłem z jakimś tematem, tworząc nowy serwis internetowy lub przerabiając już stworzony dla klienta. Dzięki temu doświadczeniu, mogę dziś trochę wam pomóc i podzielić się swoją widzą.

Każdy z nas ma dziś multimedialny telefon komórkowy, tzw “smartfona” – starszego lub nowszego. Może mieć na “pokładzie” Androidem 5 albo 11, równie dobrze możecie należeć do grupy iOS. Tak czy siak, w przypadku przeglądania stron internetowych nie ma to aż tak kluczowego znaczenia. Wiadomo, że różnice w interpretacji serwisu przez przeglądarkę internetową zawsze są. Jednak dziś są naprawdę niewielkie. Swoją droga pamiętam czasy, cofając się o jakieś 10 lat – gdzie serwisy robiło się pod konkretne przeglądarki. Dla każdej przeglądarki był konkretny plik CSS. Ależ to była żmudna robota, opracowywać serwis pod każdą przeglądarkę. Zmiennych naprawdę było sporo, a wtedy jeszcze nie było urządzeń mobilnych – które dopiero wywróciły temat do góry nogami. Fakt że idealnie zoptymalizowaliście serwis na komputerach, tracił znaczenie na urządzeniach mobilnych. Na nich wszystko się rozpadało, stąd narodził się pomysł strony mobilnej. Największym uproszczeniu, był to osobny serwis na najczęściej na subdomenie domeny głównej. Wszystkie elementy na wersji mobilnej miały na szerokość 100%, od krawędzi do krawędzi. Serwisy te miały przekazać klientowi podstawowe informację, o możliwości skontaktowaniu się i dojazdu. Jak również wprowadzały firmę w odrobinę nowoczesności, że można wejść na ich stronę z urządzenia mobilnego.

Różnice pomiędzy stroną responsywną, a mobilną.

Jednak sporo lat upłynęło, cała struktura internetową również mocno się rozwinęła. Świat ujrzała nowa technologia, która odmieniła los stron oraz sklepów internetowych. Responsywność, dokładnie tak. W dużym skrócie polega na dopasowywaniu się do szerokości każdego ekranu – komputerowego lub mobilnego bez różnicy. A swoje początki miała w 2010 roku, technika ta z języka angielskiego nosi nazwę Responsive Web Desig (RWD). Największą przewagą strony responsywnej, nad mobilną jest fakt, że ta pierwsza funkcjonuje na obu platformach, a strona mobilna tylko na jednej. Nie potrzeba już tworzenia dwóch serwis, z osobnymi panelami jeżeli posiadamy CMS’a. Nie ma potrzeby duplikować treści, administrować dwóch serwisów. Przy serwisie responsywnym mamy jeden panel i te same treści, jednak na urządzeniach mobilnych nie powinniśmy upychać wszystkiego co posiadamy na wersji komputerowej. Przepych nie jest mile widziany, zbyt duża liczba elementów może negatywnie wpłynąć na szybkość wczytywania się serwisu internetowego. Dobrze zachować swoistą równowagę.

Warto również zaznaczyć, że do rewolucji przyczynił się również Google. Które dużo lepiej ocenia w wynikach wyszukiwania serwisy współpracujące z każdą rozdzielczością. A biorąc pod uwagę, że pod koniec ubiegłego roku z urządzeń mobilnych korzystało 3,5 miliarda osób, którzy średnio korzystają ze swojego urządzenia około 3h dziennie – daje prawdziwe pole do popisu. Przy wersji mobilnej, aprobata Google nie było aż tak widoczna. Jednak na pewno strony z wersją mobilną były wyświetlane wyżej, od tych bez.

Kluczowe elementy serwisu dla urządzeń mobilnych

Mowa tutaj o informacjach, jakich szuka potencjalny klient zainteresowany waszą ofertą. Pomimo coraz większych ekranów oraz ich rozdzielczości, nasze telefony mimo wszystko pokazują stosunkowo małą cześć danych w porównaniu do wersji komputerowej serwisu. Nie może być tak, że przywita klienta długi tekst o nas, a następnie galeria czy realizacje. To jest wszystko ważne, ale dopiero w drugiej kolejności – jak klient zdecyduje się na naszą firmę, wtedy wykaże zainteresowanie do zapoznania się z historią firmy i co dokładnie oferuje. Na początku klient szuka lokalizacji, kontaktu, formularza zgłoszeniowego oraz informacji o dojeździe.

Osobiście zalecam dane typu numer kontaktowy, adres e-mail umieścić w górne części serwisu internetowego. Dane te powinny być podlinkowane, aby klikając w nie przenosiło do wykonania połączenia lub wysłania wiadomość e-mail. Elementy te również powinny być na tyle duże, aby bez problemu można było w nie kliknąć. Ciekawy pomysłem jest stworzenie przycisków z taką funkcją, podnosi to aspekt wizualny oraz praktyczny. W kolejny etapie przewijania serwisu powinien być dostępny adres dojazdu z adresem firmy oraz formularz kontaktowy.

Chciałbym w tym miejscu zwrócić uwagę na to, czego nie powinno być na wersji mobilnej czy responsywnej – wyskakujących okien. Jak jeszcze na wersji komputerowej to przechodzi w granicy rozsądku – tak na telefonach czy tabletach nie powinny mieć miejsca.

Jak poprawić wynik w PageSpeed Insights?

O tym w przyszłości będę chciał stworzyć osobny wpis, bo na pewno wymaga dużo więcej uwagi niż kilka akapitów. Jednak w najważniejszy kwestia omówimy temat.

Google PageSpeed Insights to narzędzie od Google, które bardzo często jest wyznacznikiem szybkości działania strony internetowej. Wynik strony dzieli na dwie karty, dla wersji komputerowej oraz mobilnej. Maksymalna liczba punktów do zebrania to 100, im dalszy wynik, tym gorsze są parametry naszego serwisu. Serwis działający dobrze, osiąga w obu kartach minimum 85 punktów. A co gdy jest mniej? Prawie każdy serwis internetowy, można przerobić tak aby doszedł blisko maksymalnej liczbie. Warto również zwrócić uwagę, że punkty przyznawane są logarytmicznie, a nie liniowo. Czyli poprawa wyniki z 98 a 100 będzie wymagała więcej pracy, niż z 50 na 55.

Aby poprawić wyświetlanie się naszego serwisu, należy zwrócić uwagę na poniższe elementy:

  • używanie obrazów nowej generacji (np. WebP)
  • stosowanie “lazy-load”, aby opóźnić wczytywanie grafik o dużym rozmiarze
  • włączyć kompresje tekstu gzip
  • usunąć niepotrzebny kod CSS oraz JavaScript
  • Minifikuj CSS, HTML oraz JavaScript
  • Usunąć zasoby blokujące renderowanie
  • Używać wtyczek pomagających optymalizację oraz zapewniających Cache na stronie

Podsumowanie

W powyższym artykule częściowo omówiliśmy sobie wiele aspektów związanych z stronami internetowymi na urządzenia mobilne, oraz w jaki sposób je tworzyć i nimi zarządzać. W kolejnych wpisach postaram się dogłębniej opisać tematy, które w tym artykule jedynie poruszyliśmy. Jeżeli macie jakieś pytania, śmiało piszcie – kontakt@s90.pl

Jeżeli macie jeszcze inne pytania odnośnie tworzenia stron internetowych, administracji stron internetowych lub pozycjonowaniem stron to również śmiało pytajcie.

Mateusz Adamski

Mateusz Adamski

Frontend Developer, Specjalista SEO. Od 2009 roku zajmuję się pozycjonowaniem oraz optymalizacją stron internetowych. Od 2012 roku specjalizuję się w tworzeniu stron i sklepów internetowych opartych na systemach CMS WordPress oraz Prestashop. Posiadam dobrą znajomość HTML5, CSS3, Bootstrap. Dysponuję również dużym doświadczeniem z programami Adobe Photoshop, Dreamweaver oraz CorelDRAW. Prywatnie jestem dużym fanem fotografii oraz motoryzacji. Od 2013 roku udzielam się jako klubowicz oraz moderator ogólnopolskiego klubu motoryzacyjnego. Masz jakieś pytania? Napisz do nas.