Loading
Memtor Marketing

Responsive Web Design – strony przyjazne urządzeniom mobilnym

image title

Do niedawna wystarczyło stworzyć stronę o stałej szerokości, żeby poprawnie wyświetlała się dla niemal wszystkich internautów. Działo się to, dlatego że od początków Internetu niemal 90% jego użytkowników posiadało monitor w jednej z dwóch najczęstszych rozdzielczości. I chociaż z czasem te rozdzielczości się zwiększały, to wystarczało tylko co jakiś czas poszerzać stronę. Jednak od kilku lat z Internetu korzysta się nie tylko na komputerze stacjonarnym, ale także na laptopach, tabletach, smartfonach, gdzie każde urządzenie ma inną wielkość, a nawet na pecetach pojawiły się większe monitory, przez co rozrzut używanych szerokości wyświetlacza wynosi obecnie od 360 do 1920 pikseli. Nie ma możliwości stworzenia jednego układu witryny, który u każdego wyglądałby równie dobrze. Przez pewien czas radzono sobie, tworząc dodatkową wersję strony, która wyświetlała się użytkownikom mobilnym, jednak to było za mało. W czerwcu 2012 r. wyszedł CSS3, który znacznie ułatwia sprawę, ulepszając obecne już wcześniej Media Queries. Od tej pory można używać różnych stylów CSS zależnie od kilku parametrów urządzenia, na którym strona jest wyświetlana. Główne parametry, które są sprawdzane w celu zmiany wyglądu, to rodzaj urządzenia oraz szerokość w pikselach dostępna dla przeglądarki. Tworzenie strony z użyciem Media Queries nosi nazwę Responsive Web Design.

Celem poprawnego użycia Media Queries należy odpowiednio przygotować witrynę. Powinna ona być podzielona na kilka głównych elementów, najlepiej prostokątnego kształtu: nagłówek (zawierający logo, menu itd.), główną treść strony, panele boczne oraz stopkę. Wtedy można łatwo przenosić i zwężać odpowiednie elementy, jeśli urządzenie użytkownika nie ma wystarczającej szerokości, żeby wyświetlić podstawowy układ bez poziomego paska przewijania. Standardowy układ może być dalej dopasowany do szerokości 1024 pikseli, ale jeśli przeglądarka wykryje urządzenie o trochę węższej rozdzielczości (np. tablet), wtedy zmienia niektóre własności głównych elementów, dzięki czemu np. prawy panel boczny przechodzi na dół lub pod lewy panel boczny, a nagłówek oraz główna treść będą trochę zwężone. Jeśli urządzenie będzie jeszcze mniejsze, np. smartfon, wtedy także lewy panel boczny przechodzi pod treść, która także zostaje jeszcze bardziej zwężona. A dla monitorów o znacznej szerokości można dodać dodatkowy panel boczny, żeby nie było dużo pustego miejsca po bokach.

Przykład użycia Media Queries:

@media screen and (width: 700px) { /* deklaracje css */ }

Zamiast screen można użyć: all, braille, embossed, handheld, print, projection, tty lub tv. Natomiast zamiast width można użyć: height, device-width, device-height, orientation, aspect-ratio, device-aspect-ratio, color, resolution, scan, grid lub monochrome, większość z nich można użyć z parametrem min i max (np. min-width lub max-height).

Więcej na Być Widocznym.