Responsywne projektowanie stron internetowych
![](http://upload.wikimedia.org/wikipedia/commons/thumb/e/e7/Diseno-web-responsive-design.jpg/250px-Diseno-web-responsive-design.jpg)
Responsywne projektowanie stron internetowych (ang. responsive web design, RWD) – technika projektowania strony WWW, aby jej układ dostosowywał się samoczynnie do rozmiaru okna przeglądarki, na której jest wyświetlany np. przeglądarki, smartfonów czy tabletów[1]. Strona utworzona tą techniką jest uniwersalna: wyświetla się dobrze na dużych ekranach oraz na smartfonach i tabletach: zmienia swój rozmiar oraz układ, obsługuje różne rozdzielczości w zależności od przekątnej ekranu, na jakim aplikacja webowa, czy strona internetowa ma być wyświetlona.
Wdrażanie Responsive Web Design
[edytuj | edytuj kod]Obsługa tej techniki odbywa się za pomocą tzw. media queries, które pozwalają rozpoznać rozdzielczość okna przeglądarki i zastosować odpowiedni arkusz stylu, lub jego fragment. Do działania możemy również użyć różnych skryptów JavaScript.
Tag HTML
[edytuj | edytuj kod]Poniższy kod zmienia domyślne ustawienia skalowania zawartości przez urządzenie mobilne, co pozwala na tworzenie stron niewymagających ciągłego powiększania i pomniejszania przez użytkownika. Określa on również domyślną szerokość dokumentu na 100% szerokości wyświetlacza. Błędne określenie szerokości lub położenia elementów za pośrednictwem arkuszy stylów nadal powoduje konieczność przewijania strony w lewo bądź prawo.
<meta name="viewport" content="width=device-width, initial-scale=1" />
Można również wstawić cały arkusz stylu, używając media queries.
<link rel="stylesheet"
media="screen and (max-width: 600px)"
href="arkusz600.css">
Powyższy fragment mówi o tym, że arkusz stylu o nazwie arkusz600.css będzie działał tylko wtedy, kiedy szerokość przeglądarki będzie mniejsza lub równa 600 pikseli. Można również użyć np. min-width
, max-height
, min-height
.
Media Queries w CSS
[edytuj | edytuj kod]Jeśli nie potrzeba dzielić stylów na różne arkusze, można zrobić to wszystko w jednym pliku, używając media queries.
@media screen and (min-width: 480px) {
a {
color: red;
}
}
Powyższy fragment CSS powoduje pokolorowanie wszystkich odnośników, jeśli tylko szerokość przeglądarki będzie wynosić minimum 480 pikseli.
Popularność Responsive Web Design
[edytuj | edytuj kod]Popularność RWD wynika z proporcji udziału urządzeń mobilnych, które z roku na rok zdobywają coraz większą część rynku.
Tę zmianę w znacznym stopniu przyspieszył Google, który lepiej ocenia strony internetowe w wynikach wyszukiwania, które poprawnie wyświetlają się na urządzeniach mobilnych.
Zmiana była na tyle rewolucyjna, że doczekała się własnej nazwy – Mobilegeddon .
W końcówce 2020 roku ponad 3,5 miliarda osób używa smartfonów. Na korzystaniu ze smartfonów spędzamy średnio prawie 3 godziny[2].
Zasady Responsive Web Design[3]
[edytuj | edytuj kod]Fluid Grid Systems
[edytuj | edytuj kod]Wyrażanie wymiarów strony internetowej w sposób względny – docelowego rozmiaru oraz kontekstu wyświetlania.
Fluid Image
[edytuj | edytuj kod]Dostosowywania elementów graficznych do danej wielkości – na przykład zdjęć, czy grafik.
Dla przeglądarki internetowej stanowi to informację, w jaki sposób obraz ma być skalowany, aby dostosować je do poszczególnych urządzeń. Dzięki temu rozwiązaniu, chronimy obrazy przed nadmiernym rozciągnięciem.
Media Queries / Breakpoints
[edytuj | edytuj kod]Pozwalają na określenie, w jaki sposób wyświetlać stronę internetową na danym urządzeniu. Pomagają określić, po spełnieniu jakich warunków układ witryny może być zmieniony i w jaki sposób.
Frameworks
[edytuj | edytuj kod]Rozwój podejścia mobile first zaowocował powstaniem ogólnodostępnych frameworków. Dobrą praktyką jest korzystanie z nich. Samodzielne poszukiwanie rozwiązań zazwyczaj oznacza niepotrzebną stratę czasu dla projektanta danej strony internetowej.
Przypisy
[edytuj | edytuj kod]- ↑ Przyszłość bankowości mobilnej to serwisy lite – PRNews.pl (Dostęp: 2014-03-04).
- ↑ 10 Mobile Usage Statistics You Should Know in 2021 [Infographic] [online], www.oberlo.com, 22 kwietnia 2020 [dostęp 2021-02-22] (ang.).
- ↑ The Story , Kluczowe zasady RWD – Responsive Web Design [online], thestory.is [dostęp 2021-02-22] (pol.).