Responsive Web Design – czyli dobrze dostosowany!

RWD czyli Responsive Web Design to zbiór cech strony internetowej, które określają poprawność wyświetlania się ich na dowolnym urządzeniu o różnej rozdzielczości. Strony, które w swoim projekcie uwzględniają RWD są czytelne, przejrzyste i mają odpowiednie wymiary, bez względu na to, czy oglądamy je na telefonie, komputerze czy tablecie.

Na poprawnie stworzonej stronie nie spotkamy miniaturowych przycisków, zbyt małych na nasze palce, rozciągniętych zdjęć czy schowanego w połowie tekstu.

Skąd wynikają takie rozbieżności?

Na pewno słyszałeś o telewizorach Full HD, a nawet 4K. Nazywane są tak rozdzielczości ekranów i określa się je pixelami (małymi punktami, z których składa się cyfrowy obraz). W zależności od tego, jaka jest wielka, tyle informacji może się zmieścić w miejscu, w którym wyświetla się obraz.

Jeżeli telewizor nie będzie miał odpowiednio dopasowanych parametrów, to pomimo tego, że będzie wielki, to obraz na nim będzie lekko nieostry i rozciągnięty. A nie tego od niego oczekujemy, prawda?

Między innymi dlatego, grafiki na stronach internetowych powinny być odpowiednio wielkie, aby na większym urządzeniu nie zobaczyć niewyraźnego dziwadła. Wielkość tekstu również zwiększa lub zmniejsza się proporcjonalnie do wielkości sekcji, w której się znajduje, więc razem z nią, może zmienić się w niewygodny do czytania sposób.

Dużo wygodniej czyta się na telefonach poprawnie zaprojektowany wygląd i właśnie do tego twórcy powinni dążyć. Dlaczego? Wiąże się to z pojęciem mobile first, o którym powiemy nieco później.

A czy zdarzyło Ci się, że pomimo tej samej rozdzielczości, na Twoim komputerze wszystko działało jak trzeba, a u kolegi już nie? A czy używaliście tej samej przeglądarki? I tu Cię mamy. ?

Obecnie najpopularniejsze z nich to Google Chrome, Firefox, Internet Explorer, Opera i Safari. Każda z nich, ma swój własny interpreter kodu odpowiedzialnego za styl i wygląd konkretnych elementów. Pomimo tego, że większość  jest odbierane tak samo, część z nich wymaga uwzględnienia dodatkowych parametrów. Przykładowo najprostsze, pisane w języku HTML formularze, mogą mieć różny wygląd i zachowania tuż po kliknięciu czy najechaniu, niż pozostałe. Wtedy różnice w wyglądzie mogą być mocno zauważalne.

Co składa się na RWD – dobre praktyki responsywności

Poniżej prezentujemy istotne czynniki, które wpływają na poprawne ocenienie, czy dana strona ułatwia, czy utrudnia nam poruszanie się po niej:

• Układ – coś, co dobrze prezentuje się w 4 kolumnach na komputerze, może być słabo czytelne na smartfonie. Dlatego warto wziąć pod uwagę rozmieszczenie elementów w sekcjach na stronie i ułożyć je przykładowo jeden, pod drugim.
• Obrazy – ich wielkość ma znaczenie. Wraz ze zmianą szerokości urządzenia, grafika powinna skalować się w taki sposób, aby zachować właściwe proporcje. Na telefonie najczęściej używa się Internetu mobilnego, a odpowiedzi oczekujemy w jak najszybszym czasie, więc zdjęcia nie powinny ładować się bardzo długo.
• Menu – stanowi ważną część każdej strony, warto zamienić go z poziomego, na pionowe menu, aby wygodniej się poruszać po podstronach.
• Dodatki specjalne dla urządzeń mobilnych – za pomocą kursora możesz bez problemu kliknąć dowolne miejsce na ekranie, jednak problem może nastąpić w momencie, kiedy przycisk jest za mały, żeby w niego trafić. Pamiętaj więc, aby dobrać jego właściwą wielkość, umożliwiając tym samym wygodniejszą nawigację na stronie.

Dlaczego Responsive Web Design jest tak istotny

Dostęp do informacji może być potrzebny w każdym momencie. Telefony pozwalają nam na tak wiele, że obecnie ciężko byłoby sobie wyobrazić funkcjonowanie bez nich. Płatności, informacje o miejscu, lokalach, usługach czy komunikacja ze znajomymi. Przeglądamy Internet nawet przed snem w łóżku, szukając nowych ubrań czy gadżetów do domu.

Rosnący ruch na urządzeniach mobilnych zauważyła firma Google – lider wśród wyszukiwarek internetowych. W ostatnim czasie wprowadziła Mobile first Index. Kierując się wygodą użytkowników, w pierwszej kolejności będą wyświetlane linki do stron przystosowane do każdego rodzaju urządzeń. Część witryn z dobrymi treściami może zostać wykluczona z pierwszych stron wyszukiwania. Podobna sytuacja miała miejsce po ogłoszeniu Speed Update, które działało w analogiczny sposób, a brana pod uwagę była szybkość ładowania się stron.

Warto przyłożyć wagę do responsywności swojej strony internetowej. Zniechęcenie odwiedzającego może zakończyć się nawet straceniem cennego klienta. Dodatkowo przypominamy – nie zapomnij umieścić klikalnego numeru telefonu, aby w razie konieczności utrzymać kontakt ze swoimi użytkownikami na bieżąco.

Podobne posty