Zdarzyło Ci się kiedyś szukać produktu lub usługi na smartfonie? A może kiedyś wypełniałeś formularz kontaktowy na tablecie? Internauci są coraz bardziej wymagający a to sprawia, że gdy strona internetowa nie wyświetla się najlepiej na małym ekranie to przechodzą do strony konkurencji. Można temu zapobiec! Rozwiązaniem jest…
Responsywna strona internetowa
To w jaki sposób przeglądamy Internet ciągle się zmienia a to dzięki zasłudze rosnącej ilości tabletów, smartfonów, laptopów a nawet okularów czy zegarków. W związku z tym warto zapewnić komfort użytkownikom i dostosować swoją witrynę internetową do różnej wielkości ekranów na których potencjalnie może być wyświetlana.
Responsive Web Desing czyli RWD jest techniką projektowania stron internetowych, w taki sposób, aby ich rozmiar, układ i wygląd automatycznie dopasowywał się do okna urządzenia na którym są wyświetlane. Responsywność pozwala zatem na wyświetlanie się witryny w przeglądarce komputera stacjonarnego, laptopa, tabletu czy smartfona w sposób czytelny oraz przejrzysty.
Statystyki mówią same za siebie
W dobie urządzeń z ekranami o różnej wielkości, statyczne strony www przestają spełniać swoją rolę. Czasy w których przeglądanie stron internetowych jedynie za pomocą komputera stacjonarnego czy laptopa minęły bezpowrotnie co pokazują statystyki z różnych źródeł.
W Polsce już w 2015 roku ilość smartfonów przekroczyła liczbę tradycyjnych komórek, a w 2018 r. ich liczba ma sięgać aż 44 miliony co oznacza, że smartfon będzie miało 3 na 4 użytkowników telefonii komórkowej.
Obecnie już ponad 50% użytkowników odwiedza strony internetowe ze smartfonów. Co więcej w świecie gdzie od konkurencji dzieli nas zaledwie jedno kliknięcie, tolerancja użytkowników wobec słabych stron jest bardzo niska. Jeżeli zatem nie mogą znaleźć potrzebnych im informacji w kilka sekund to po prostu szukają dalej na innych witrynach.
Era postpecetowa – czyli smartfony górą
W dzisiejszych czasach zdecydowana większość użytkowników Internetu przegląda strony www na urządzenia mobilnych. Mamy do czynienia z tak zwaną erą postpecetową w której korzystanie z sieci za pomocą tradycyjnego komputera stacjonarnego odeszło do lamusa.
Jeżeli obecnie ktoś ogląda naszą stronę www to bardzo możliwe, że korzysta z urządzenia mobilnego takiego jak smartfon, tablet a nawet zegarek. Nieresponsywny design ma jeden rozmiar a zatem jest jak wydrukowana kartka o określonym formacie. To oznacza, że na urządzeniach z małym ekranem zostanie ona zmniejszona do bardzo małych nieczytelnych rozmiarów co powoduje, że użytkownik będzie musiał przewijać ją w górę i dół, w lewo i prawo aby zapoznać się z treściami. W przypadku dużego ekranu obraz naszej przykładowej kartki będzie zawierał puste przestrzenie a sama strona będzie wyglądać na małą i nieciekawą.
Zastosowanie responsywności pozwala zaoferować różny layout strony na podstawie różnych rozmiarów ekranu urządzenia. W związku z tym, mobilny układ powinien być wąski i mieć skondensowane teksty oraz obrazki a layout dla większych ekranów powinien być szeroki i mieć więcej tekstu oraz czytelniejsze obrazki. Bez względu na rozmiar, styl jest taki sam, natomiast zmienia się jej układ. Responsywną stronę można porównać do różnych rozmiarów tej samej koszulki: S, M, L, XL…
Zalety Responsive Web Design (RWD)
- Czytelna i przejrzysta – najważniejszą zaletą technologii stron responsywnych jest, to że nie sprawia ona użytkownikom problemów w trakcie jej wyświetlania na urządzeniach mobilnych. Bez względu na rozmiar ekranu na którym jest wyświetlana będzie nadal atrakcyjna wizualnie – estetyczna i spójna.
- Więcej użytkowników oraz wyższa konwersja – odwiedzający stronę, którzy będą korzystać z różnych urządzeń bez trudu się na niej poruszają, a tym samym szybciej docierają do właściwych zawartości, a jeżeli jest to sklep internetowy – szybciej składają zamówienia.
- Lepsze efekty w pozycjonowaniu – Google rekomenduje witryny internetowe, które są responsywne a to oznacza wyższe pozycje w wyszukiwarce internetowej.
- Oszczędność kosztów – utrzymywanie responsywnej wersji serwisu internetowego jest tańsze niż prowadzenie witryny w dwóch wersjach: stacjonarnej i mobilnej; w przypadku dwóch wersji ważna jest integralność z bazą danych chociaż zdarza się, że strona mobilna istnieje na zupełnie innym silniku niż strona stacjonarna; wiąże się to z dodatkowym kosztem gdzie trzeba obydwie osobno aktualizować.
- Komfort korzystania i szybkość dotarcia – użytkownicy nie muszą już przewijać strony w lewo czy w prawo gdyż dopasowuje się ona do wielkości ekranu; co więcej wybór numeru telefonu odbywa się za pomocą jednego kliknięcia co zajmuje zaledwie chwilę.
Jak widać technologia projektowania stron z wykorzystaniem technologii responsywnej niesie ze sobą wiele korzyści. Należy pamiętać, że RWD ma również swoje mankamenty.
Wady responsywności stron (RWD)
- Brak optymalizacji dla urządzeń mobilnych – mimo tego, że pewne elementy można odpowiednio dostosować, musimy pamiętać, że przy stronie responsywnej zawsze jest wczytywana całość strony (zdjęcia bannery),
- Nie do wszystkich stron można wdrożyć RWD – zdarzają się przypadki gdzie struktura strony jest tak skomplikowana, że wdrożenie wersji responsywnej jest niemożliwe,
- Dłuższy czas wczytywania niż wersji standardowej – niezależnie od rodzaju urządzenia, aby móc wyświetlić serwis, urządzenie potrzebuje pobrać cały kod; dodatkowo wczytują się różne elementy i skrypty, które zupełnie nie są wyświetlane; jest to szczególnie niedogodne dla tych użytkowników, którzy posiadają wolniejsze połączenia ponieważ strona tego typu zużywa więcej transferu danych.
Tworzenie responsywnej strony internetowej
Jak można się domyślać, budowa strony www w technologii responsywnej wiąże się z projektowaniem trzech lub czterech układów, a zatem zajmuje więcej czasu niż standardowa strona. W trakcie tworzenia należy przemyśleć kilka kwestii takich jak: które elementy są najważniejsze, ile kolumn powinien mieć każdy layout, jaka będzie optymalna długość linijki tekstu oraz jak będą prezentować się obrazki i reklamy.
W pierwszej kolejności powinna być projektowana wersja na urządzenia mobilne a dopiero po niej wersja na komputery i laptopy. Wynika to z tego, że na małych ekranach musimy odpowiednio przedstawić niezbędne elementy. Powinniśmy zaprojektować ją w sposób maksymalnie użyteczny i czytelny dla odbiory. Dlatego właśnie na tym etapie ustalamy style, kolory, ilustracje i inne ważne elementy. To wszystko oznacza, że poznanie odbiorców i ich priorytetów jest niezwykle ważne.
Efektywne tworzenie stron responsywnych – przykłady
Bardzo często można spotkać się z opinią, że responsywne tworzenie stron wiąże się z dużym rozmiarem plików, które spowalniają działanie podstron. Można jednak sprawić aby responsywne strony działały płynnie. Wystarczy stworzyć podstawowy stylesheet dla każdej przeglądarki i ulepszony stylesheet dla nowoczesnych przeglądarek.
Elastyczne siatki to z pewnością jedne z bardziej ekscytujących elementów projektowania RWD. Dzięki wykorzystaniu podzielonego kontekstowo targetu ustawiamy proporcjonalną siatkę, która obejmuje nieznane elementy. Dzięki zastosowaniu płynnej siatki luki są wypełnione na różnych rozmiarach ekranu, a to pozwala aby treści wypełniły przestrzenie o dowolnych rozmiarach.
Media query daje możliwość dopasowania layoutu na podstawie możliwości danego ekranu. Warto pamiętać podczas projektowania aby nie wykorzystywać breakpointów stworzonych na podstawienie najbardziej popularnych urządzeń ponieważ ich lista ciągle się zmienia. W związku z tym do tworzenia breakpointów powinno wykorzystywać się em, a nie piksele. Dzięki temu będzie można wziąć pod uwagę zmienne poziomy przybliżenia w przeglądarkach. Ustawienie maksymalnej szerokości obrazów i media query na 100% w przypadku takich elementów jak filmy zapewniam ich elastyczność.
Poprawne będzie załadowanie w pierwszej kolejności najważniejszych elementów podstrony a dopiero później pozostałych mniej istotnych elementów w tle. Funkcjonalności niezależne od Javascript mają większą wydajność. Internauci nie korzystają z Javascript podczas pobierania strony.
W tym miejscu warto dodać, że Javascript jest drugą pod względem wielkości częścią podstron, która blokuje renderowanie dopóki nie załaduje się w całości. Dlatego warto zacząć ładowanie od jak najmniejszej możliwej ilości Javascriptu. Powinno się ją stosować do określenia co załadować w następnej kolejności. Początkowy Javascript powinien załadować testy opcji, najważniejsze polyfille, asset loadery i script loadery.
Obrazki na stronie stanowią około 65% rozmiaru wszystkich plików na stronach internetowych. Dlatego warto wspomnieć o tym, że zarządzanie obrazkami na różnych rozdzielczościach jest dosyć trudne. W związku z tym zamiast wykorzystywać obrazy rastowe dla ikon i tła, możemy z pomocą SVG wykorzystać grafikę wektorową.
Obecność firmy w Internecie jest dziś podstawą, a w dobie gdzie zdecydowanie częściej niż kiedyś sięgamy do kieszeni po smartfona, responsywna strona www jest obowiązkiem każdego kto poważnie myśli o biznesie. To właśnie dzięki popularności Internetu mobilnego wyświetlanie witryn na ekranach tabletów i smartfonów stało się standardem oraz trendem, który z roku na rok zdobywa coraz większą popularność. Dlatego też chcąc skutecznie zaistnieć w Internecie powinniśmy posiadać responsywną stronę internetową.
