Jak zrobić stronę responsywną?
Jak zrobić stronę internetową, która będzie responsywna? Czy to trudne?
Takie pytanie przewija się w praktyce od kiedy tylko strony responsywne pojawiły się w internecie.
Dostosowują się one do szerokości ekranu i wyglądają dobrze na każdym urządzeniu – od małego telefonu, poprzez tablet i komputer, aż do telewizora.
Żadnego powiększania, rozciągania ani wlepiania nosa w ekran, bo literki są za małe.
Jednak pojawienie się stron responsywnych spowodowało też zmianę standardów w tworzeniu stron www.
I o takich zmianach standardów i dobrych praktykach dowiesz się z artykułu.
(Jako uzupełnienie – z tego tekstu dowiesz się czym są responsywne strony internetowe)
Zacznij od najmniejszego ekranu
To złota zasada tworzenia strony responsywnej. Niezależnie od tego, czy tworzysz portal czy prostą stronę firmy – warto zacząć ją budować od wersji na telefon.
Tak, wiem, to stawia trochę rzeczy na głowie, ale już tłumaczę dlaczego.
Przede wszystkim – większość ruchu w internecie generują urządzenia mobilne (telefony i tablety). To ponad 52% ruchu i z tym trzeba się liczyć. Kiedyś dominowały w sieci komputery i robiono strony głównie na nie. Dzisiaj przeważają urządzenia mobilne, więc warto utrzymać analogiczne podejście.
Jeśli zaczniesz tworzenie strony od najmniejszego ekranu, to szybko się zorientujesz, że wersja na telefony nie ma ograniczeń. Nic nie musisz upychać, po prostu układasz elementy, a na pozostałych widokach – rozkładasz je nieco inaczej, powiększasz i w gruncie rzeczy masz więcej miejsca :).
Takie podejście pomaga docenić wartość treści na stronie i zmusza do dokładnego przemyślenia układu oraz szeroko pojętego user experience. Chociaż brzmi to wymagająco, to jednak takie nie jest. W dalszych punktach tłumaczę dlaczego.
Ustaw priorytety
Priorytety, to brzmi złowieszczo. Ale wcale nie musi.
Gdy robisz stronę responsywną, to rzeczą, która załatwi ponad połowę roboty jest ustalenie priorytetów na stronie. Co jest najważniejsze. Co mniej. Co może wylecieć (?), a co lepiej żeby zostało.
Mały ekran tego wymaga. Nie napchasz na nim tylu elementów, co na stronie desktopowej i… dobrze. Bo taka strona nie ma sensu.
Gdy zaczynasz od najmniejszego widoku strony i planujesz położenie elementów na niej, to od razu zauważysz, że kolejne elementy muszą układać się w jakąś sensowną całość. Jedno powinno wynikać z drugiego, każdy element powinien mieć swój cel lub pomagać realizować cel strony.
Dodatkowo – najważniejsze elementy powinny znaleźć się na górze strony. To je użytkownik powinien widzieć w pierwszej kolejności.
Jeśli zastanowisz się nad tym nieco głębiej, to tak powinno wyglądać tworzenie stron internetowych. Zawsze, niezależnie od urządzenia. Po prostu wersje responsywne wymagają respektowania tych zasad. Dzięki temu wiele stron jest dzisiaj o niebo przejrzystszych niż jeszcze kilka lat temu.
Ponad 600 000 ludzi tworzy strony za darmo, bez kodowania i przy wsparciu AI. Zobacz, jakie to proste
Idź w minimalizm
Ustalając priorytety warto pamiętać o jednym: minimalizm na stronie internetowej nie jest wymysłem czy tylko trendem. Mniej elementów w najwęższym widoku strony oznacza jedno: zostają tylko te najważniejsze.
Następują po sobie, uzupełniają treść i serio – sprawdzają się.
Jednak niech Cię nie zmyli to, że na takiej stronie jest niewiele elementów – to wcale nie takie pójście na łatwiznę. Mniej w tej sytuacji oznacza więcej. I często wymaga więcej uwagi. Jednak to (naprawdę) popłaca.
Bo gdy przechodzisz do rozkładania treści na pozostałych widokach responsywnych, to okazuje się, że wystarczy trochę rozszerzyć tu i tam, powiększyć font, nieznacznie zmienić układ i widok gotowy.
Jak wspomniałem – gdy zaczniesz projektowanie strony od najwęższego widoku mobilnego, każdy kolejny (szerszy) będzie sprawiał wrażenie przestronnego.
Duże obiekty
Tak, duże obiekty.
Pewnie doskonale wiesz, że wyświetlacz smartphone’a ma ograniczoną powierzchnię i szerokość. Do tego trudno na nim trafić palcem precyzyjnie w jakiś obiekt. Dla komputerowego kursora to nie kłopot; gorzej z całkiem sporą powierzchnią kciuka.
Więc obiekty na stronie, które mają być klikane, powinny być wystarczająco duże, żeby użytkownik mógł łatwo w nie trafić i – tu Cię zaskoczę – kliknąć. Tak.
Jednak przyciski nie są jedynymi rzeczami, które powinny być wystarczająco duże na stronie.
Dobra typografia, czyli rozmiar fontu ma znaczenie
Dobrze dobrane fonty i zachowanie dobrej struktury nagłówków jest kluczowe dla łatwości czytania tekstu na stronie. Zwłaszcza responsywnej.
Podstawą dobrej strony internetowej jest dobra treść, a za nią odpowiada najczęściej tekst. Więc warto dopracować jego wygląd, żeby użytkownicy mogli łatwo przeczytać to, co masz na stronie.
Dotyczy to niemal każdego elementu, który jest tekstem na stronie – od informacji w nagłówku, poprzez krótkie bullety, aż po teksty blogowe. Każdy powinien być łatwy w czytaniu.
Pomoże w tym na pewno dobra typografia, czyli dobrze dobrane fonty. W internecie najlepiej czyta się tekst „napisany” fontem bezszeryfowym, czyli bez „kreseczek”. Times New Roman jest szeryfowy, Lato które teraz czytasz – jest bezszeryfowe.
Dodatkowo ważny jest rozmiar tekstu. I pewnie dobrze się domyślasz – powinien być duży. 20 pikseli wysokości dla zwykłego tekstu to absolutne minimum. Taki tekst jest czytelny na urządzeniach mobilnych i naprawdę nie warto dawać mniejszego fontu.
Do tego dochodzą też nagłówki. Powinny być odpowiednio większe, żeby użytkownicy wiedzieli co jest, a co nie jest nagłówkiem (można powiedzieć, że idealną proporcją między wysokością nagłówków a tekstu jest 1,6).
Poza tym nagłówki są dobre dla użytkowników i pozycjonowania strony.
20 pikseli wysokości dla zwykłego tekstu to absolutne minimum. Taki tekst jest czytelny na urządzeniach mobilnych i naprawdę nie warto dawać mniejszego fontu.
Spójność między wersjami
Niedawno wielu właścicieli (w praktyce – niemal wszyscy) dostali miłego maila od Google Search Console, że wchodzi w życie Mobile First Indexing. Czyli że za podstawę indeksowania strony brana jest wersja dostosowana do urządzeń mobilnych.
W mailu była też wzmianka o tym, że treści na różnych wersjach strony są spójne lub nie. I to jest właśnie bardzo ważna rzecz.
Jeszcze jakiś czas temu wiele stron miało wersję standardową (na komputer, ze standardowym adresem) i mobilną, z „m.” przed adresem. To były często dwie osobne strony, które czasem dawało się aktualizować jednocześnie, jednak nie zawsze. W przypadku stron responsywnych to nie jest kłopot.
Co nie zmienia faktu, że zachowanie spójności między wersjami strony responsywnej jest bardzo ważne. Nie na darmo pisałem o tym, że gdy zaczniesz robić stronę od widoku urządzeń mobilnych, to potem kolejne wersje będą łatwiejsze do opanowania.
Gdy wybierzesz kluczowe elementy i umieścisz je na najwęższej wersji strony, to potem lepiej jest dostosować ich wielkość, a nie dodawać coś nowego.
Oczywiście – między wersjami mogą być różnice (chociażby menu – mobilne lub „zwykłe”) czy pojawić się jakieś dodatkowe obiekty na stronie desktopowej (animacje, więcej obrazów w galerii czy coś), ale kluczowe rzeczy, takie jak treść, powinny być spójne.
Są też różne sposoby na „rozwijanie” treści strony, od telefonów do komputerów, jednak jest to osobny i dosyć obszerny temat, więc jeśli interesuje Cię ten temat, to Luke Wroblewski, Product Director w Google, bardzo fajnie tłumaczy ten temat na swoim blogu.
Responsywne grafiki na stronie i nie tylko
Czyli grafiki wektorowe. Format SVG coraz częściej pojawia się na stronach internetowych.
Grafiki w tym formacie mają kilka wad (m.in. mogą być tylko grafikami, a nie zdjęciami), ale ich zalety zdecydowanie przeważają. Warto też wspomnieć, że nie wszystkie programy do tworzenia stron wspierają format SVG (kreator stron www WebWave go wspiera).
Przede wszystkim: szybko się ładują (co jest ważne na urządzeniach mobilnych) i doskonale się skalują (czyli niezależnie od tego, jak bardzo je powiększysz, nie zobaczysz „pikselozy”).
Poza nimi dobrze umieszczać na stronach responsywnych grafiki o odpowiednich rozmiarach – najlepiej takie, które co najwyższa pokrywają maksymalną szerokość ekranu (dzisiaj mało który wyświetlacz przekracza szerokość 1920 pikseli), jednak pamiętaj, że na urządzeniach mobilnych ta realna szerokość rzadko przekracza 1000 pikseli.
Bo im większa rozdzielczość, tym większy rozmiar zdjęcia. Im większy rozmiar zdjęcia, tym dłużej trzeba czekać, aż się załaduje. Nawet na najszybszym łączu.
Warto też korzystać z formatów, które łatwo się kompresują (na przykład .jpg lub .png, gdy zależy Ci na tym, żeby grafika nie miała tła). Dzięki temu strona będzie ładowała się dużo szybciej.
Im większa rozdzielczość, tym większy rozmiar zdjęcia. Im większy rozmiar zdjęcia, tym dłużej trzeba czekać, aż się załaduje. Nawet na najszybszym łączu.
Stonowane tła
Skoro jestem przy grafikach, to warto wspomnieć o stonowanym tle strony; takim, które nie przeszkadza w czytaniu i odbiorze treści.
To trochę taka oczywistość, ale na urządzeniach mobilnych bardzo ważne jest to, żeby tło (strony, bloków tekstowych czy segmentów treści) pomagało w czytaniu. Czyli wysoki kontrast między treścią a kolorem pod spodem jest bardzo wskazany.
Oczywiście – warto tu pójść w klasykę, czyli czarne litery i białe tło (jak tutaj), ale nie musisz się ograniczać. Jednak pamiętaj, że kolorowe tła lub ornamenty znacznie pogarszają komfort czytania.
Odpowiednia liczba widoków
Chociaż utarło się, że strony responsywne mają trzy widoki (telefon, tablet, komputer), to często problemem okazują się większe telefony, na których najmniejszy widok wygląda trochę nienaturalnie (jest po prostu rozciągnięty), a wyświetlacz nie jest jeszcze na tyle duży, żeby pokazała się wersja na tablet.
Bardzo dobrze ten problem pokazuje grafika z UXplanet.com:
Innymi słowy – czwarty widok, „pośredni” między telefonem a tabletem, może bardzo się przydać. I taki czwarty widok mamy też w WebWave. Nazywamy go „telefon poziomo”, jednak ta szerokość odpowiada też coraz większym wyświetlaczom dużych smartphone’ów i minitabletów.
Wykorzystaj możliwości urządzeń mobilnych (nawigacja, dzwonienie)
Czasem się o tym zapomina, ale kiedy chcesz zadzwonić na jakiś numer podany na stronie, to potrafi to zdenerwować. Trzeba go zaznaczyć, skopiować i potem wkleić w okno wybierania. Ale da się to zrobić o wiele fajniej.
Możesz dodać akcję po dotknięciu palcem numeru telefonu lub ikonę (callto), dzięki czemu ktoś, kto chce zadzwonić, zadzwoni szybciej. Podobnie jest z nawigacją – po kliknięciu w odpowiednim miejscu uruchomi się nawigacja, która pokieruje pod wskazany adres.
A to tylko kilka luźnych pomysłów :).
To w końcu jak zrobić stronę responsywną?
Z głową, smakiem i pomysłem ;).
Wymieniłem tylko kilka rzeczy, o których warto pamiętać, więc nie zdziwię się, jeśli znasz jeszcze jakieś tipy związane z dobrymi praktykami przy robieniu stron responsywnych :).
Zastanawiasz się jak stworzyć stronę internetową w WebWave? Sprawdź nasz darmowy kurs tworzenia stron internetowych.
Dowiedz się więcej o najlepszych praktykach tworzenia stron:
Popularne artykuły.
Kreator stron www WebWave umożliwia tworzenie stron www z pełną swobodą. Strony internetowe możesz tworzyć zaczynając od czystej karty lub wykorzystując szablony www. Strona www bez kodowania? To łatwe - zacznij już teraz.
contact@webwavecms.com
+48 731 395 898
Porozmawiaj z nami na czacie
Od godziny 08:00 do 24:00
Ta strona została stworzona w kreatorze WebWave.
Znajdziesz nas na:
Kreator WebWave.
Oferta.