Jak usprawnić responsywną wersję strony internetowej?

Responsywność (a raczej siatka, o którą oparty jest zazwyczaj responsywny design) ma to do siebie, że domyślnie na mniejszych rozdzielczościach „ścieśnia” treść.

To, co wcześniej zajmowało np. cztery kolumny w jednym wierszu i było widoczne obok siebie, na urządzeniach mobilnych znajduje się jedno pod drugim.

W związku z tym wysokość takiej strony drastycznie się zwiększa. Trzeba sporo naprzesuwać się palcem, aby przejść z góry do dołu.

Dlatego też pamiętaj, aby możliwie najwyżej znajdowały się główne elementy przydatne użytkownikom.

O to właśnie chodzi, aby nie zmuszać ich do długiego poszukiwania tego, co potencjalnie najbardziej ich zainteresuje. Im szybciej odwiedzający to zauważą, tym lepiej – zarówno dla nich, jak i dla Ciebie.

2. Nie pokazuj wszystkiego, co jest widoczne na desktopach.

Ta wskazówka wynika bezpośrednio z poprzedniej.

Jak wspomniałem, siatka w domyśle nakazuje chowanie się poszczególnych kolumn jedna pod drugą na ekranach mniejszych urządzeń.

Czy to oznacza, że użytkownik smartfona musi widzieć dokładnie te same informacje, co odwiedzający stronę przy pomocy desktopa?

Absolutnie nie.

Urządzenia mobilne są przez nas inaczej traktowane niż monitory komputerów. Z uwagi na swój rozmiar oczekujemy od nich nieco innego poruszania się po stronach internetowych.

Chcemy, aby wszystko było możliwie najbardziej kompaktowe, by serwis mobilny zawierał tylko te najistotniejsze informacje.

Oceń, czy wszystkie informacje „normalnie” widoczne na Twojej stronie internetowej będą przydatne użytkownikom mobilnym. Jeśli uważasz, że nie, to śmiało ukryj niektóre elementy, by skupić się jedynie na tych istotnych.

3. Serwuj użytkownikom obrazy o odpowiednich wymiarach.

W kwestii tego, jak usprawnić responsywną wersję strony www, nie można zapomnieć o grafikach.

Widok responsywnej strony można łatwo skalować w poziomie. Wystarczy rozszerzyć lub zwęzić okienko przeglądarki, by dowiedzieć się, jak dany serwis prezentuje się na różnych rozdzielczościach.

Problem polegać może na tym, że obrazy wstawione w niewłaściwy sposób na mniejszych ekranach mogą wyglądać po prostu źle.

Z jednej strony mogą być „niedociągnięte” do krawędzi ekranu, a z drugiej właśnie niepotrzebnie rozszerzone w stosunku do oryginału.

Dlatego też „strona responsywna” nie jest jednym hasłem, którego obecność załatwia sprawę. Za tym kryje się konieczność przejrzenia wszystkich możliwych zakresów rozdzielczości. W dodatku na każdej podstronie.

Wszystko po to, aby upewnić się, że dany widok (i wchodzące w jego skład grafiki) jest po prostu optymalny.

4. Uczyń adresy mailowe i numery kontaktowe dotykalnymi.

Jeśli myślisz o tym, jak usprawnić responsywną wersję strony internetowej, to jest to bez wątpienia jedna z podstaw.

Otóż są pewne elementy witryn, które warto jest odpowiednio na stronach mobilnych traktować.

Mowa np. o adresach mailowych. Nałożenie odpowiedniego odnośnika na taki adres powoduje, że możemy wybrać go palcem. Dzięki temu otwiera nam się klient pocztowy, za którego pomocą możemy wysłać wiadomość.

To samo dotyczy numerów telefonów. Poprzez dodanie odnośnika „tel:” użytkownik może, po dotknięciu takiego numeru palcem, od razu przenieść się do dialera, czyli aplikacji odpowiadającej za wybieranie numeru. Okienko jest już wypełnione wskazanym numerem telefonu – nie trzeba go ani wklejać, ani tym bardziej przepisywać „na żywca”.

Zmiany te wydają się drobne, lecz uwierz mi – użytkownicy to doceniają.

5. Zredukuj wagę grafik.

Ponownie na moment przysiadamy do grafik.

Owszem, technologia idzie do przodu. Mamy coraz większe pakiety danych, różne typy sieci dają nam też możliwość przeglądania internetu o wiele szybciej niż kiedyś.

Jednak nic nie stoi na przeszkodzie, aby dla obrazów zastosować tzw. kompresję.

Polega ona na zmniejszeniu wagi grafik, aby – bez uszczerbku na jakości lub z niewiele widoczną jej stratą – zajmowały po prostu mniej miejsca na serwerze.

Dzięki temu obrazy ładują się szybciej, a serwer „zżera” mniej transferu.

W wielu przypadkach ilość pracy, jaką trzeba w tym kierunku wykonać, jest niewspółmiernie mała do otrzymywanego efektu.

Przy tej okazji mogę polecić Ci jeden z naszych tekstów: jak zoptymalizować grafikę na stronie internetowej?

6. Zadbaj o to, by pola w formularzach miały właściwe typy.

Na komputerach nie zauważamy tej kwestii. To, że formularz ma dwa pola typu „Imię i nazwisko” oraz „Numer telefonu” nie robi nam żadnej różnicy. Przy pomocy jednej klawiatury jesteśmy w stanie w równie łatwy sposób wypełnić oba te pola.

Na komórkach jest już inaczej.

Jeśli dane pole w języku HTML będzie oznaczone typem „numer”, wtedy po wybraniu takiego pola mobilna przeglądarka domyślnie uruchamia klawiaturę numeryczną.

Z kolei, jeśli pole będzie oznaczone jako „pole tekstowe” lub „tekst”, ujrzymy klawiaturę domyślną.

Takie zabiegi sprawiają, że użytkownik ma jeden krok mniej do wykonania. Jeżeli strona w danym miejscu oczekuje od odwiedzającego wpisania numeru telefonu, to ustalenie typu pola jako „numer” po prostu zaoszczędza czas. Cały proces wypełniania formularza jest wtedy bardziej płynny.

Miej zatem na uwadze to, aby odpowiednie pola oznaczać właściwymi typami.

Ponownie podrzucam tekst, który być może Cię zainteresuje: formularze na stronach internetowych – jak je efektywnie projektować?

7. Dostosuj rozmiary fontów i wysokość linii.

Jedna z oczywistości w kontekście tego, jak usprawnić responsywną wersję strony internetowej.

Na komórkach i tabletach niekiedy sporo czytamy. Nie da się ukryć, że są to wygodne urządzenia do tej właśnie czynności.

Należy więc zrobić wszystko, aby wspomóc w tym użytkowników.

Tekst na Twojej stronie internetowej musi być po prostu odpowiednio widoczny. W niektórych przypadkach wskazane będzie nawet niewielkie zwiększenie rozmiaru fontów w stosunku do tych dostępnych na desktopach.

To samo dotyczy wysokości linii. Tekst nie może być po prostu „ściśnięty”. Poszczególne linie muszą mieć właściwy odstęp, aby tekst „oddychał” i był łatwy w zapoznawaniu się z nim.

8. Rozważ dodanie wyszukiwarki.

Strony responsywne z uwagi na swoją konstrukcję nie są często tak intuicyjne w obsłudze, jak ich desktopowe odpowiedniki.

Tyczy się to zwłaszcza serwisów nieco bardziej rozbudowanych, mających wewnątrz sporo treści.

Jeżeli Twoja witryna zalicza się do tej kategorii, rozważ zaserwowanie użytkownikom wyszukiwarki.

Jeśli masz sporo treści blogowych, to zamieszczenie formularza wyszukiwania w miarę wysoko powinno być opłacalnym ruchem.

Zaoszczędzisz wtedy czasu użytkownikom, którzy o wiele szybciej mogliby znaleźć to, czego aktualnie szukają.

Również i na ten temat opublikowaliśmy swego czasu na naszym blogu odpowiedni tekst: wyszukiwarka na stronie internetowej – jak powinna działać i wyglądać?

9. Dopasuj rozmiary przycisków.

Jak to się mówi, last but not least.

W kontekście tego, jak usprawnić responsywną wersję strony internetowej, nie można zapomnieć o przyciskach.

To one odpowiadają za wykonywanie najważniejszych akcji – wyszukiwanie, wybieranie podstron, a nawet kupowanie produktów. Mają tysiące zastosowań.

Zasada jest więc prosta – przyciski muszą być nie tylko odpowiednio widoczne, lecz także wyróżnione właściwymi rozmiarami.

Wszystko po to, aby nasz palec mógł wygodnie z takiego przycisku skorzystać.