wtorek
13
Grudzień
2016
Developers

RWD, czyli Responsive Web Design

Technika projektowania stron internetowych znacząco zaczęła się rozwijać wraz ze wzrostem liczby użytkowników smartfonów. W 2016 roku zarejestrowano wzrost o 4%, jeśli chodzi o liczbę użytkowników telefonów komórkowych. Użytkownicy mobilni mają coraz większy udział w globalnym ruchu internetowym, stanowi on już 39% wszystkich stron internetowych. Dla przykładu średni czas, jaki Polacy spędzają codziennie w internecie wynosi 4,4 godziny na komputerach, a 1,3 godziny na urządzeniach mobilnym, 51% stron internetowych jest odwiedzanych ze smartfonów i tabletów.

RWD czyli Responsive Web Design (1)

Wzrost przeglądania stron internetowych na urządzeniach mobilnych przyczynił się do rozwoju, jeśli chodzi o technikę projektowania. Ponieważ stosuje się różne rozdzielczości pomiędzy smartfonami a laptopami czy tabletami, ważne jest, aby stronę dostosować pod dane urządzenie. Głównie po to aby nie stracić potencjalnego klienta. Użytkownik, który nie może znaleźć tego czego szuka, szybko rezygnuje z danej strony. Aktualnie około 5% firm i 30% e-sklepów posiada strony przystosowane pod urządzenia mobilne. Internetowa strona RWD dostosowuje swój wygląd do wielkości ekranu, jest elastyczna i odpowiednio skaluje grafiki.

RWD czyli Responsive Web Design (2)

Idea Responsive Web Design (RWD) stworzona przez Ethan Marcotte szybko zainteresowała twórców stron internetowych. Zakłada ona, że odpowiednio przygotowana witryna może automatycznie dopasowywać się do urządzeń. Wraz z pojawieniem się tej koncepcji do stworzenia takiej witryny wykorzystuje się różne dostępne technologie, które w dalszym stopniu są rozwijane. Technika RWD jest możliwa dzięki CSS3 i media queries. Za pomocą kawałka kodu, możemy powiedzieć przeglądarce, że pewien element na naszej stronie powinien inaczej się zachować dla pewnych szerokości ekranu.

Na przykład:

RWD czyli Responsive Web Design (2)

Element na stronie z klasą ‚content’ będzie miał 80% szerokości dla szerokości ekranu powyżej 800px, poniżej tej szerokości ten sam element będzie zajmował 100% szerokości strony. Dużym plusem jest też to, że aby zmieniały się style nie musimy przeładowywać strony, dzięki temu podczas obracania urządzenia z pozycji pionowej na poziomą mamy gwarancję, że strona będzie dalej dobrze wyglądać. W arkuszu stylów możemy umieszczać wiele media queries, aby określać minimalną lub maksymalną szerokość dla danego elementu. Zastosowań jest bardzo dużo i nie odnosi się jedynie do określania wielkości, możemy również zmienić kolor, rozmiar czcionki itd.. Ilość punktów granicznych, w których zmieniać się będzie nasza strona może być bardzo wiele, wszystko zależy od nas.

Przykładowy layout strony responsywnej

RWD czyli Responsive Web Design (3)

Z badań wynika, że internauci nie wracają ponownie do sklepów, których strona nie jest wygodna w użytkowaniu. Strony internetowe, których witryny opierają się na technologii RWD są postrzegane, jako bardziej nowoczesne i profesjonalne. Bardzo dużym plusem jest to, że sklep posiada tylko jeden adres strony, tym samym zarządzanie i modyfikacja takiej strony odbywa się tylko i wyłącznie w jednym kodzie źródłowym, co też wpływa na obniżenie kosztów zmian.

ZALETY

WADY

automatyczne dopasowanie strony do różnych urządzeń

minimalizacja elementów na urządzeniach mobilnych

jeden URL dla jednej treści

waga strony

łatwość w modernizacji i aktualizacji kodu strony

wyższy koszt wdrożenia na etapie projektowania

jedne kod HTML

elastyczne zdjęcia i multimedia

szybsze indeksowanie stron

większa liczba odwiedzin

Projektowanie stron internetowych stało się popularnym trendem i raczej nie należy o tym zapominać projektując layout witryny, jeśli zależy nam na dużej liczbie odbiorców. Również dla Google bardzo ważnym elementem jest to czy strona poprawnie wyświetla się na urządzeniach mobilnych. Mam nadzieję, że artykuł wyjaśnił choć trochę czym są responsywne strony internetowe oraz jaką wartość mają w dobie dzisiejszego Internetu.


Źródło: http://weblider.eu/co-to-jest-rwd-czy-google-wymaga-responsive-web-designu/

Źródło: https://mobirank.pl/2016/01/27/mobile-digital-w-polsce-na-swiecie-2016/

FacebookTwitterGoogle+LinkedIn