4 zasady tworzenia responsywnych stron internetowych

Pod tym tajemniczym terminem kryje się nic innego jak… dostosowywanie się wyglądu i układu strony do urządzenia na jakim jest wyświetlana. Doskonale wiemy, że obecne monitory w komputerach stacjonarnych są szerokie i poziome, a ekrany naszych smartfonów w wyjściowej pozycji są pionowe. Jeszcze nie tak dawno, obejrzenie i przeczytanie tekstu na telefonie powodowało, że potrzebowaliśmy lupy, lub musieliśmy powiększać całość palcami. O jakichś interakcjach, typu wypełnienie formularza, czy kliknięcie czegoś poniżej ekranu graniczyło z cudem.

Wtedy z pomocą przyszła nam responsywność 🙂 Czyli takie ułożenie poszczególnych elementów strony www, które zapewni optymalne wyświetlanie na najmniejszych telefonach i nie będzie generowało problemów przy nawigacji.

Obecnie nauczyliśmy się, jako środowisko, myślenia mobilnego. Prościej rzecz ujmując: projektując nową witrynę, najpierw myślimy i tworzymy jej wersję mobilną, w myśl zasady że poruszamy się od najmniejszych rozdzielczości ku większym, a wszelki ruch internetowy w 2022 jest w większości generowany przez urządzenia mobilne, a nie stacjonarne pecety.

Zasada ta ma przełożenie we wszystkich typach witryn internetowych – od prostej strony firmowej, przez sklep online, po portale informacyjne użyteczności publicznej. W Website Style nasi graficy dokładnie analizują całą architekturę informacji przed rozpoczęciem jakichkolwiek prac nad nowymi realizacjami.

Jeszcze w latach ‘90-tych designerzy bardzo chcieli “wymyślić koło na nowo”, jak ognia unikając “nudnych” layoutów ułożonych w bloczki jeden pod drugim. Z biegiem lat okazało się, że takie najprostsze rozwiązanie jest po prostu najlepsze i najlepiej wpływa na czytelność i użyteczność projektów.

Obecnie powszechna jest zasada, że to co jest w kolumnie po lewej stronie, na urządzeniach mobile pozostaje wyżej, a elementy występujące po prawej stronie na wersjach desktopowych – “chowają” się poniżej. Taki układ gwarantuje uporządkowanie i logiczną całość projektu.

Tak samo ważne jest zachowanie odpowiednich proporcji jeśli chodzi o wielkość wyświetlanych na wersjach responsywnych, fontów, grafik oraz zdjęć. Nie powinny one wykraczać poza ustalony od początku grid (siatkę na bazie której buduje się nie tylko layout mobile, ale i wszystkie inne widoki) i dawać możliwości scrollowania strony w bok (jest to powszechnie uznawane za błąd. Generalnie: każdy inny scroll niż góra-dół nie jest pożądany w responsive web design)

W zasadzie jest to także dość istotna zasada designu w Website Style! Nie od dziś bowiem wiadomo, że nowoczesny i elegancki wygląd witryny nie musi posiadać absolutnie wszystkich form, kolorów i kształtów na jednym foldzie, a użyte fonty nie muszą obrazować barokowego handwrittingu.

Budując responsywną stronę www, zakładając skomplikowane i ‘długo trwające’ efekty hover, czy animacje, należy mieć na uwadze fakt, że w przeważającej części będą one na wersji mobile po prostu nieczytelne, nie będą mogły być obsłużone, ergo: nie będą miały racji bytu. Bardzo częstym zabiegiem jest po prostu ukrywanie pewnych elementów stron internetowych – pstrokatego tła, szerokich, panoramicznych fotografii, czy skomplikowanych konfiguratorów, które nie miałyby szans być widoczne w całości na ekranach smartfonów. 

Nie należy tego oczywiście traktować jako błąd, czy celowe działanie w złej wierze developera, wręcz przeciwnie – wycinając z wersji mobile pewne rzeczy, programista dba o poprawność kodu oraz jego czystość, co z kolei znacząco wpływa na szybkość ładowania na urządzeniach mobilnych.

Responsywna strona internetowa to przede wszystkim wygoda dla użytkowników Internetu. Takie rozwiązanie daje im możliwość pełnego wykorzystania możliwości każdego z urządzeń, z których korzystają na co dzień. Co istotne, responsywna strona www dostosowuje się nie tylko do urządzenia, ale i przeglądarki, z jakiej się korzysta – informacje o urządzeniu i przeglądarce są pobierane przez system, dzięki czemu strona automatycznie dostosowuje elementy niezbędne do funkcjonowania oraz te dodatkowe, takie jak grafika czy rodzaj czcionki. Dopasowywana jest też wielkość poszczególnych elementów. Sprawia to, że strona internetowa wyświetla się tak samo dobrze na urządzeniach z przeglądarką Chrome, Safari, Opera, Firefox czy Internet Explorer przy różnej rozdzielczości ekranu.

Rozmawiając z grafikiem o wersji responsywnej należy przygotować sobie specyfikację elementów, bez których absolutnie nie możemy się obejść na stronie mobilnej i po prostu dać designerowi zaprojektować to w sposób jaki uzna za najbardziej korzystny i odpowiedni.

Jeśli responsywne strony internetowe to temat, którym Cię właśnie zaciekawiliśmy, jeśli chciałbyś odświeżyć swoją istniejącą już witrynę firmową – zachęcamy do wypełnienia krótkiej ankiety projektowej i skontaktowania się z nami. Były to naszym zdaniem 4 najważniejsze zasady tworzenia responsywnych stron internetowych . Doradzimy, wycenimy i jak zawsze – damy z siebie 100% aby efekt końcowy zachwycił nie tylko Ciebie, ale i Twoich klientów.

Czytaj więcej o RWD…