RWD – wymóg czy fanaberia?

Gdziekolwiek bym się nie wybrał, to najczęściej spotykam ludzi z nosami w telefonach. To uzależnienie XXI wieku jest trochę przerażające. Często widzę ludzi w kawiarni siedzących parami, może na randkach lub innych spotkaniach, z telefonami przed oczami. Mnie osobiście to przeraża, ale to przecież ogromna okazja.

W miejscu, gdzie społeczna część mojej osobowości widzi zagrożenie, to ta bardziej przedsiębiorcza widzi okazję. Skoro ludzie tak często korzystają z telefonów, a dostęp do internetu jest praktycznie wszędzie, to podsuń swoją stronę tym ludziom przed oczy. Wrzuć ją do jego telefonu. Upewnij się, że osoba, która wejdzie na Twoją stronę z telefonu, będzie w stanie, odczytać to czego potrzebuje. Jest kilka rzeczy, na które musisz zwrócić uwagę przy projektowaniu i wdrażaniu strony na urządzenia mobilne.

Garść statystyk

Polska posiada 38 mln obywateli. Całkiem sporo. Z raportu UKE wynika, że 91.3% obywateli posiada telefon komórkowy. Niezły wynik. Przejdźmy jednak dalej. Z tej liczby 72.7% deklaruje, że korzysta z internetu. I na sam koniec aż 90% osób korzysta z internetu na telefonie komórkowym czy smartfonie. Po przeliczeniu tego w przybliżeniu wyszło mi, że polski rynek internetu mobilnego to około 23 mln osób.

Korzystanie z usług internetowych

Okej to by było na tyle jeżeli, chodzi o pogrubioną czcionkę. No ale powiedz, czy te liczby nie robią na Tobie wrażenia? Na mnie robią ogromne. Gdyby liczba moich potencjalnych klientów wynosiła 23 mln osób, to prawdopodobnie zostałbym miliarderem. Ale mówiąc całkiem poważnie zwróć, proszę uwagę na to, że praktycznie 60% obywateli Polski korzysta z internetu w swoim telefonie. Myślę, że to chyba wystarczający powód, aby upewnić się, że Twoja strona działa dobrze na urządzeniach mobilnych.

Wszystkie statystyki zaczerpnąłem z artykułu na portalu wirtualnemedia.pl. Są to statystyki opublikowane na koniec 2018 roku. Mogę Cię tylko zapewnić, że trend w tej branży jest wzrostowy i nadal będzie narastał, a więc liczba potencjalnych użytkowników, którą tutaj podałem, będzie najpewniej zaniżona. Ale ogrom możliwości został przedstawiony, a o to mi chodziło. Przejdźmy więc do głównego tematu postu. Co to jest RWD?

RWD – co to znaczy?

Krótka definicja: RWD – responsive web design, czyli zaprojektowanie strony tak, żeby była responsywna. No dobra, ale co to znaczy? W dużym skrócie, strona zaprojektowana zgodnie z zasadami RWD, wyświetla się poprawnie na każdym urządzeniu. W teorii brzmi banalnie. Ale w praktyce już nie jest tak kolorowo. Dlaczego? Ponieważ ilość telefonów jest ogromna. Na dodatek nie ma jednego czy też kilku standardowych rozmiarów, do których trzeba dopasować stronę. Praktycznie każdy producent ma w swojej ofercie telefony o przeróżnych wielkościach ekranu i rozdzielczościach. Do tego jeszcze dochodzi dwa tryby, czyli landscape i portrait. A zatem wszystkie konfiguracje trzeba przemnożyć przez dwa.

Różne podejścia

Wykonawcy radzą sobie z mnogością możliwości w bardzo przeróżny sposób i z różnym efektem. Jedni stosują gotowe frameworki do stylowania takie jak Bootstrap, a inni piszą wszystko sami opierając się o podstawową jednostkę czyli pixele. Jeżeli chodzi o mnie, to zazwyczaj korzystam z % lub jednostek zależnych takich jak vh czy vw. Pewnie te skróty nic Ci nie mówią, ale to nie istotne. Musisz tylko wiedzieć, że strona w momencie ładowania sprawdza wysokość i szerokość okna w którym, ma się pojawić a potem za pomocą specjalnych reguł, dopasowuje swój wygląd do dostępnego miejsca.

Na jakim etapie wdrażać RWD?

Pytanie w tytule jest taką delikatną zaczepką w kierunku projektantów stron internetowych. Dlaczego? Otóż bardzo często zdarza się, że projektant przygotowuje projekt strony w standardowym rozmiarze 1920x1080px i na tym się kończy. I żadne prośby, groźby ani nawet przekupstwa nie działają. Oczywiście nie każdy designer w ten sposób podchodzi do tematu. Śmiem twierdzić, że pewnie większość przygotowuje projekty na przynajmniej trzy podstawowe wielkości ekranu. Po prostu ja miałem szczęście pracować z takimi ludźmi.

Na etapie projektowania

Zasady RWD najlepiej jest stosować już na etapie koncepcyjnym. Dzięki temu możemy wyeliminować niektóre problemy jeszcze zanim się pojawią. Dotyczy to, chociażby ułożenie elementów na stronie czy sposobu wyświetlania menu na telefonach. Etap projektowania jest najlepszym momentem do wprowadzenia RWD. Później jest już tylko ciężej. Dlatego warto wymagać od projektantów, aby przygotowywali kilka różnych wielkości dla strony.

Na etapie wdrożenia

Drugą możliwością jest dodawanie RWD już na etapie wdrażania strony przez programistę. Wygląda to wtedy tak, że programista przygotowuje otrzymany projekt pod duże ekrany a później na podstawie własnych umiejętności i doświadczeń przygotowuje wygląd strony na urządzeniach mobilnych. Miej na uwadze to, że obecne przeglądarki mają tak zwany tryb mobilny i programista nie musi sprawdzać, jak wygląda Twoja strona na fizycznym telefonie. Mimo to warto abyś, sam(a) to zrobił(a). Czasem pewne błędy da się wyłapać tylko na fizycznym urządzeniu.

Wdrożenie RWD do istniejącej strony

Gotowe strony internetowe, które nie posiadają RWD, da się przerobić. Niestety nie jest to proste. Po pierwsze ze względu na już istniejącą strukturę dokumentu HTML niektóre rzeczy może być bardzo trudno zmieścić na małych ekranach. Kolejną rzeczą może być przestarzała technologia, która będzie wymuszała zmiany w pełnowymiarowej wersji strony, a to zwiększa koszty. Jak wiadomo koszty to coś czego przedsiębiorcy nie lubią, więc zazwyczaj po prostu tworzy się całkiem nową wersję strony zawierającą RWD. Bo tak wychodzi po prostu taniej.

Kilka porad

Skoro już wiesz, dlaczego warto wprowadzić RWD na swojej stronie, to teraz przejdźmy do kilku krótkich porad, które pomogą Ci przygotować widok mobilny Twojej strony. Zatem do sedna.

1. Upewnij się, że projektant przygotuje projekt wersji mobilnej

Najłatwiej jest przygotować odpowiedni projekt, przed wdrożeniem strony internetowej. Zajmuje to najmniej czasu i eliminuje niektóre problemy, jeszcze zanim zaczną sprawiać kłopoty. Gdy zlecasz wykonanie swojej strony upewnij się, że dostaniesz do zaakceptowania grafikę dla widoku mobilnego, oraz pełnowymiarowego. Zawsze lepiej jest wiedzieć co się otrzyma przed realizacją 🙂

2. Staraj się przygotowywać krótkie i jasne teksty

Na małych ekranach mieści się niewiele informacji. Jeżeli dodamy do tego obowiązkowy odstęp od krawędzi, aby wyglądało to schludnie i estetycznie to naprawdę nie zostaje wiele miejsca na Twoją treść. Dlatego polecam tworzyć krótkie, jasne teksty i nagłówki. To samo tyczy się zdjęć. Zdjęcia wykresów czy innych tego typu elementów będą trudne do odczytania na urządzeniu mobilnym. Dużo lepszym rozwiązaniem do prezentowania danych będą infografiki, które łatwo odczytać tak na dużych, jak i na małych ekranach.

3. Testuj stronę za pomocą urządzeń fizycznych

Otrzymaną stronę sprawdzaj zawsze za pomocą fizycznych urządzeń. Najlepiej jest sprawdzić ją na kilku urządzeniach, na przykład prosząc rodzinę o pomoc. Często problemy pojawiają się na Iphone-ach , chociaż nie jest to regułą. Dlatego przed uruchomieniem strony sprawdź ją samemu. Oczywiście wykonawca na pewno przeprowadza testy, ale niektóre błędy mogą umknąć programiście lub testerowi, a Ty jako osoba, która zlecała wykonanie tej strony, będziesz bardziej dokładny w tej kwestii.

4. Zwróć uwagę jak długo strona się ładuje

rwd - pagespeed insight
stronybeztajemnic – szybkość ładowania strony

Na urządzeniach mobilnych szczególnie ważna jest szybkość ładowania się strony. Internet mobilny jest zazwyczaj wolniejszy niż ten, którego używasz w domu czy w pracy. Dlatego tak ważne jest, aby na urządzeniach mobilnych nie przesyłać dużych obrazków czy zasobożernych skryptów. Idealnie jest, jeżeli na Twojej stronie pierwszy znaczący element pojawi się w ciągu dwóch sekund. Możesz to sprawdzić na przykład za pomocą darmowego narzędzia PageSpeed Insights. Jest to narzędzie udostępnianie przez Google, w którym możemy sprawdzić, jak szybko ładuje się nasza strona i co jeszcze można poprawić. Czasem sprawdzać swoją stronę tym narzędziem i pilnować, aby wynik był możliwie jak najbliżej 100.

RWD – podsumowanie

Teraz już wiesz, że w XXI wieku RWD to podstawa, jeżeli chodzi o strony internetowe. Ogromna liczba ludzi korzysta z telefonów i bardzo szkoda by było, gdyby nie mogli oni nic odczytać z Twojej strony. Wiesz też, czego warto wymagać od grafika przygotowującego projekt dla Twojej strony. Mam nadzieję, że te proste porady pomogą Ci uniknąć problemów z wersją RWD Twojej strony internetowej.

Dzięki za poświęcony czas na przeczytanie tego postu. Jeżeli masz jakieś uwagi lub pytania, to zapraszam do sekcji komentarzy lub do strony kontakt gdzie znajdziesz namiary na mnie. Pozdrawiam i życzę zdrowia w tym szalonym czasie.