Jak usprawnić responsywną wersję strony internetowej? – 9 wskazówek

Jak usprawnić responsywną wersję strony internetowej?

Czy sam fakt posiadania strony internetowej, która swój wygląd dostosowuje do ekranów urządzeń mobilnych, załatwia sprawę?

Nie do końca.

To, że dla pewnych zakresów rozdzielczości niektóre elementy wyglądają inaczej, wcale nie oznacza, że strona jest przyjazna użytkownikom mobilnym.

Istotne są przede wszystkim poszczególne rozwiązania, techniki i różnego rodzaju triki, jakie można zaserwować odwiedzającym.

O jakich kwestiach mowa?

Dziewięć z nich znajdziesz na poniższej liście.

Jak usprawnić responsywną wersję strony www? – 9 porad

1. Ustal priorytet dla typów treści.

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ć.

Jak usprawnić responsywną wersję strony internetowej? – podsumowanie

Jak widzisz, wymóg posiadania strony responsywnej i odhaczenie, że dany serwis taki jest, zupełnie nic nie oznacza.

Sam fakt zastosowania w budowie strony tzw. siatki nie załatwia sprawy.

Potrzebne jest gruntowne przejrzenie całej witryny, aby mieć pewność, że strona faktycznie wygląda optymalnie na wszystkich istotnych rozdzielczościach.

Mam nadzieję, że powyższe porady okażą się dla Ciebie pod tym właśnie kątem przydatne.

Spodobał Ci się ten tekst?

Jeśli sądzisz, że moglibyśmy Tobie pomóc, odezwij się do nas. Wypełnij bardzo prosty formularz szybkiej wyceny. Gwarantujemy szybką odpowiedź.

Bądź pierwszą osobą, która skomentuje ten artykuł! 😉

Oświadczam, że akceptuję postanowienia zawarte w polityce prywatności. *

Michał ZiółkowskiMichał Ziółkowski

Co-founder agencji interaktywnej MobileTry z Olsztyna, świadczącej kompleksowe usługi przede wszystkim małym firmom. Specjalizacją agencji jest tworzenie stron internetowych i sklepów internetowych. Ponadto MobileTry prowadzi kampanie reklamowe w internecie oraz oferuje usługi z zakresu pozycjonowania.

Mało czytania? Nie ma problemu!

Sprawdź inne teksty powiązane z tym artykułem

Michał Ziółkowski

Michał Ziółkowski

2 miesiące temu

Porady dotyczące user interface – 7 ważnych kwestii

Oto nasze porady dotyczące user interface, których wcielenie w życie sprawi, że Twoja strona internetowa będzie bardziej przyjazna odbiorcom. Sprawdź je!

Michał Ziółkowski

2 miesiące temu
Porady dotyczące user interface – 7 ważnych kwestii
Jakub Ozorowski

Jakub Ozorowski

2 miesiące temu

Brak konwersji w sklepie internetowym – 10 typowych przyczyn

Brak konwersji w sklepie internetowym to niewątpliwie ogromny problem dla właścicieli stron e-commerce. Jakie są najczęstsze przyczyny tego stanu rzeczy?

Michał Ziółkowski

Michał Ziółkowski

2 miesiące temu

Proces tworzenia strony internetowej – na czym polega?

Z jakich kroków składa się proces tworzenia strony internetowej? Jakie jego aspekty są istotne, a które mniej? Zobacz, jak proces ten powinien przebiegać.

Michał Ziółkowski

2 miesiące temu
Proces tworzenia strony internetowej – na czym polega?
Michał Ziółkowski

Michał Ziółkowski

2 miesiące temu

Najczęstsze błędy typograficzne na stronach internetowych

Jakie są najczęstsze błędy typograficzne na stronach internetowych? Dlaczego należy ich bezwzględnie unikać na własnej stronie? Poznaj nasz poradnik.

Jakub Ozorowski

Jakub Ozorowski

2 miesiące temu

Aktualizacja strony internetowej – kiedy najlepiej ją przeprowadzić?

W którym momencie aktualizacja strony internetowej powinna być przeprowadzona? Po czym poznać, że najwyższy czas na zmiany? Poznaj nasz poradnik.

Jakub Ozorowski

Jakub Ozorowski

3 miesiące temu

Co irytuje użytkowników stron internetowych? – 14 kwestii

Czy wiesz, co irytuje użytkowników stron internetowych? Jakie są to elementy? W naszym wpisie wymieniamy kluczowe sprawy, na które musisz zwrócić uwagę.