Co to jest Responsive Web Design ?

Responsive Web Design w skrócie RWD, temat który ostatnio jest bardzo mody i popularny. RWD przedstawiane jest jako coś niesamowicie nowego, rewolucyjnego.  Pytanie brzmi, czy naprawdę Responsive Web Design to taka rewolucja? Czy to taka nowość? Według mnie NIE.

Trochę historii o Rponsive Web Design.

Pojęcie powstało w roku 2010, a chciałbym zauważyć, że mamy rok 2018. Co oznacza, że przez trzy lata nikt się tym za bardzo nie interesował. Co nie oznacza, że temat się nie rozwijał. W takim razie…

dlaczego nikt nie interesował się tematem Responsive Web Design?

Kiedyś najbardziej popularną rozdzielczością urządzeń było 800×600 z biegiem czasu zaczęły wchodzić coraz to większe monitory. Niektórzy twierdzili, że tworzenie stron o szerokości 1024px jest już przeżytkiem i powinno zacząć tworzyć serwisy już o większej rozdzielczości. I tu właśnie był błąd. Weszły nowe urządzenia smartfony, tabelty, netbooki. Okazuje się często, że każde z urządzeń ma inną rozdzielczość. Do tej pory wprawdzie, strona rozpoznawała urządzenie mobilne, ale np. po systemie operacyjnym :), a co jeśli telewizor ma Androida ? Wtedy wersję mobilną strony mamy na 42 calach, co delikatnie mówiąc jest paranoją 🙂Druga sprawa to to że wersje mobilne najczęściej miały inny adres, co znaczyło, że trzeba pozycjonować nie jedną stronę ale dwie. Programiści zaczęli szukać więc rozwiązania na te problemy i właśnie tak powstało RWD.

Czym jest Responsive Web Design?

RWD to nic innego jak zdrowe podejście do programowania. Według zasad strona zaprojektowana powinna poprawnie wyświetlać się niezależnie od urządzenia i jego rozdzielczości. Pff… co za problem dajemy procenty i po problemie 🙂 ? Otóż NIE. Nie zapominajmy o jednej bardzo ważnej sprawie, a mianowicie tym, że strona ma być użyteczna czyli czytelna i klikalna :). Przyciski na dotykowym monitorze powinny mieć minimum 0,5cm, a gdy wrzucimy wszędzie procenty, bez zmiany wyglądu, okaże się, że strona jest nie czytelna nie klikalna, bezużyteczna.

Jak zaprojektować stronę Responsywną poprawnie?

Po pierwsze Mobile First

, to znaczy zaczynamy projektowanie serwisu najpierw na urządzenia mobilne. Telefony o niskiej rozdzielczości na których nie powinny znajdować się zbędę, rozproszone elementy.

Hierarchizacja danych i elementów strony.

Pamiętaj! strona ma być przyjazna użytkownikowi i do czegoś służy, więc spraw wszystko by użytkownik telefony mógł jak najszybciej i najłatwiej dokonać celu swojej wizyty. Klasyką są formularze wypełnianie ich przy użyciu telefonu, czy tabletu jest trudne i męczące, jeżeli już musi być, niech będzie zredukowany do minimum. Formularz kontaktowy jest niemal zbędny lepiej niech pojawi się duży numer telefonu. W końcu wchodząc z telefonu chyba łatwiej jest po prostu zadzwonić 🙂

Dopasowany rozmiar do palca.

Czas rysików i myszek już miną. Tak jak pisałem wcześniej przycisk na wyświetlaczu telefonu powinien mieć, co najmniej, pół centymetra. Wypadało by tu posłużyć się badaniami i były takie, niestety nie pamiętam źródła, więc musicie mi uwierzyć na słowo. Statystycznie rzecz ujmując poniżej 5mm przycisk jest zbyt trudno trafialny i użytkownik się irytuje.

Responsive Web Design technicznie

Mamy do wyboru dwie techniki jedna to Płynny szablon (liquid layout) i tu stosujemy wartości procentowe i jednostki relatywne jak em, lub wykorzystujemy technikę gridów tzn siatki w zależności ile ustawimy rozmiarów rozdzielczości tyle wersji strony tworzymy.

Ważne. Dodajemy metatag, aby przeglądarki mobilne nam nie próbowały przeskalować strony.

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

To o czym wspominałem wyżej to Media Queries. W css 3 wprowadzono Media Queries dzięki czemu w zależności od rozdzielczości możemy serwować inny wygląd strony, nadając inne style, np:

@media screen and (max-width: 998px) and (min-width: 800px) { … }

między nawiasami kwadratowymi wprowadzamy odpowiedni styl.  Media Queries umożliwia także wprowadzenie stylu dla orientacji urządzenia, landscape lub portrait.

@media (orientation: portrait) { … }

 

Na temat responsywnych obrazów i innych mediów zapraszam do moich kolejnych wpisów. Postaram się pokazać jak najwięcej narzędzi i materiałów na ten temat.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *