Jakie są zasady tworzenia stron responsywnych? – 9 kwestii

Jakie są zasady tworzenia stron responsywnych?

Faktem stało się, że przeglądamy coraz częściej internet na urządzeniach mobilnych. Potwierdzają to statystyki, na których wyraźnie widać, że częściej przeglądamy strony internetowe na urządzeniach mobilnych, niż na tradycyjnym komputerze czy laptopie.

Nie powinno to nikogo dziwić. Spójrz nawet po sobie – gdziekolwiek jesteś i masz krótką chwilę lub czekasz na coś, to z pewnością w większości przypadków wyciągasz smartfona, aby coś „sprawdzić”. Stało się to już po części nawykiem. Stąd też takie, a nie inne statystyki.

Dlatego też warto poznać praktyczne zasady tworzenia stron responsywnych, aby ich wygląd oraz przeglądanie na małym ekranie były przyjemne. Sprawdź więc, na co można zwrócić uwagę, projektując taką stronę oraz co można usprawnić w mobilnym widoku strony.

Zasady tworzenia stron responsywnych – 9 praktycznych uwag

1. Poprawa prędkości wczytywania się strony.

Podstawą skutecznej strony responsywnej jest jej szybkość działania. Zazwyczaj strony przegląda się na komórkowym przesyle danych, więc treści do pobrania powinny być możliwie najmniejsze. W tym celu warto zadbać o kilka technicznych aspektów, więc najlepiej to zadanie powierzyć specjaliście.

Tymczasem zapraszam Cię do poznania przyczyn wolno wczytującej się strony. Być może zauważysz kilka wskazówek, które warto zastosować na Twojej stronie.

2. Zredukowane obrazy.

Obrazy przede wszystkim są duże wagowo, więc najczęściej są główną przyczyną niskiej prędkości wczytywania responsywnej strony. Jednak łatwo to wyeliminować, stosując dwie zasady:

  • Zawsze zmniejszaj rozdzielczość obrazu, aby wstawiane zdjęcie nie miało takiego rozmiaru, jak np. 3600 x 2200 pikseli, tylko – powiedzmy – 1000 x 800.
  • Zawsze i bezwzględnie kompresuj obrazy, np. takim narzędziem online.

Przestrzegając tylko tych dwóch zasad, zapewne już nie zabijesz prędkości wczytywania się strony.

3. Odstępy pomiędzy elementami.

Zasady tworzenia stron responsywnych odnoszą się głównie do tego, że mamy tutaj ograniczony rozmiar ekranu. Wszystko więc musi zostać ściśnięte do mniejszych ram niż w przypadku monitora.

Inaczej też przeglądamy takie strony, ponieważ widzimy jednocześnie dość mały wycinek strony oraz poszczególne elementy układają się na zasadzie jeden pod drugim. Co w związku z tym należy mieć na uwadze?

Przede wszystkim to, że poszczególne elementy muszą mieć czym oddychać. Zadbaj więc o dostateczne puste miejsce wokół elementu, aby nic na siebie nie nachodziło oraz przede wszystkim nie zaburzało to interaktywności elementu.

4. Przylepiony numer telefonu.

Dobrym pomysłem szczególnie dla stron firmowych jest przyczepienie do górnej krawędzi mniejszego ekranu informacji z numerem telefonu. Wtedy też będzie można z łatwością w każdej chwili zadzwonić, aby dopytać się o szczegóły oferty czy po prostu ją zamówić.

Przy tym warto również sprawić, aby taki numer telefonu był klikalny, czyli aby po jego kliknięciu nastąpił automatyczny wybór numeru telefonu i przejście do wykonania połączenia. Wystarczy, że w kodzie strony zastosujesz taki kod:

<a href=”tel:123456789″>123 456 789</a>

5. Chowanie zbędnych elementów.

W zawiązku z tym, że mamy ograniczoną przestrzeń na urządzeniu mobilnym, warto pewne elementy ukryć. Uczyni to stronę przede wszystkim krótszą i bardziej treściwą.

To może wpłynąć na komfort przeglądania strony, ale również na zwiększenie konwersji za sprawą szybszego zapoznania się ze stroną.

Tutaj warto rozważyć, czy dany element jest kluczowym elementem, czy warto go mimo wszystko ukryć, ponieważ nie wnosi do strony aż tyle, co inne obiekty.

6. Agregowanie treści w karuzelę lub rozwijany panel.

Jeśli ukrywanie elementów nie ma praktycznego zastosowania, to warto rozważyć kolejny zabieg. Dobre zasady tworzenia stron responsywnych odnoszą się do grupowania elementów i kondensowania ich. Takim sposobem może być:

  • Karuzela, gdzie poszczególne elementy są przesuwane w prawo i w lewo. W ten sposób znacząco ograniczamy długość przewijanej responsywnej strony. Taka opcja przyda się szczególnie wszędzie tam, gdzie mamy kilka kolumn z informacjami, np. przedstawione korzyści, jakiś proces, opinie, cechy produktu / usługi itd.
  • Kolejnym rozwiązaniem tego typu są zakładki lub panele rozwijane. Zakładki dodają funkcjonalność kart, więc możemy decydować, którą treść chcemy przeglądać. Z kolei panele rozwijane powodują, że dana sekcja z treścią jest chowana lub pokazywana w zależności od naszych wyborów.

Oba rozwiązania są szczególnie polecane przy chęci ograniczenia długości strony oraz wtedy, gdy mamy dużo elementów tego samego typu, które można scalić.

7. Przebudowa długich bloków tekstu.

Zmorą mniejszych ekranów są długie bloki tekstu.

Są przede wszystkim nudne, a szczególnie na smartfonie wydają się szczególnie długie. Przez to są mało czytelne i nijak nie są atrakcyjne do czytania. Pod kątem jakiejkolwiek optymalizacji mobilnej, warto je możliwie przerabiać. Przy tym można kierować się zasadą, żeby możliwie jak najbardziej przykuć uwagę odbiorcy. Można to osiągnąć, tworząc treść wysoce łatwą w skanowaniu.

Wystarczy, że zamiast bloku tekstu, przedstawisz go w formie:

  • listy wypunktowanej lub ponumerowanej, jak ta tutaj
  • ograniczeniem tylko na nagłówki
  • podziałem treści na mniejsze akapity
  • redakcją treści pod kątem zbędnych słów, czyli tzw. lania wody

Praktycznie każdy blok treści można przerobić w taki sposób, co znacząco wpłynie na jego odbiór w oczach internautów.

8. Rozważ wideo zamiast tekstu.

Z racji tego, że wygoda przeglądania treści na urządzeniu mobilnym jest znacznie trudniejsza niż na ekranie monitora, warto rozważyć stosowanie wideo.

Krótki filmik będący streszczeniem strony jest znacznie lepiej przyswajany niż tekst. Prezentacja firmy, produktów czy oferowanych usług w postaci filmiku może być świetnym wprowadzeniem na stronę.

Dodatkowo tak przedstawiony materiał jest znacznie bardziej angażujący i zachęcający do interakcji, niż czytanie oraz przeglądanie kolejnych treści rozmieszczonych w zakładkach strony.

9. Optymalizacja formularzy na stronie.

Dobre nawyki i zasady tworzenia stron responsywnych obejmują również zagadnienia formularzy na stronie internetowej.

Niewątpliwie ich wypełnienie na smartfonie jest trudniejsze i mniej komfortowe niż na komputerze. Stąd też trzeba koniecznie zadbać o ten aspekt pod kątem pozyskiwania klientów – właśnie poprzez urządzenia mobilne.

Tutaj pierwszym elementem, na jaki należy zwrócić uwagę, jest liczba pól formularza. Oczywiste, że im mniej danych do wypełnienia, tym lepiej. Warto więc skracać formularz do absolutnego minimum.

Jeśli nie ma takiej sposobności, to można rozważyć podział formularza na etapy. Uzyskamy optyczne zmniejszenie tego elementu oraz będzie on tym samym przyjaźniejszy w odbiorze.

Kolejne, o co warto zadbać, to elementy formularza. Jeśli to możliwie, to najlepiej dać możliwość wyboru użytkownikowi czegoś, niż wymuszać na nim pisanie. Najlepiej podejść do tego na takiej zasadzie, że lepiej kilkoma dotknięciami palca wybrać pożądane elementy, niż je wypisywać.

Zatem jakie są zasady tworzenia stron responsywnych?

Jak widać, zasady tworzenia stron responsywnych obejmują przede wszystkim dobre nawyki pod kątem przeglądania stron na mniejszym ekranie.

Tutaj dostępny obszar jest znacznie mniejszy, więc trzeba przemodelować elementy, aby były znacznie bardziej skondensowane, treściwie oraz by szybko przedstawiały dany temat. Trzeba więc postawić na konkretny przekaz, aby odbiorca mógł szybko poznać to, czego szuka.

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

Bartłomiej Kiljan

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

5 lat 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!

Jakub Ozorowski

5 lat 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

5 lat 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

5 lat 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

5 lat 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

5 lat 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ę.