Responsywne strony internetowe
Responsywne czy adaptacyjne?
Responsywny – czyli dopasowujący się do wielkości ekranu (ewidentne zapożyczenie z angielskiego „responsive”). Adptacyjny (adaptive design) oznacza mniej więcej to samo – ale różnica polega na sposobie w jaki strony się dopasowują do wielkości ekranu. Wyjaśnia to poniższy rysunek (źródło: Timeless UX Design Trends: Responsive & Adaptive Web Design):
Strony responsywne nie tylko płynnie dopasowują określoną procentowo siatkę z treścią, ale także zmieniają wielkości elementów (czcionki i grafika). Podejście responsywne (RWD) zostało sformułowane około roku 2010 (vide artykuł Responsive Web Design). Natomiast podstawy projektowania adaptacyjnego (AWD) opisał Aaron Gustafson się w książce z roku 2011 „Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement” jako strategię stopniowego ulepszania stron internetowych.
W obu tych strategiach (AWD i RWD) tworzymy kilka layouty (układy), zmieniające się gdy okno przeglądarki osiągnie określony „punkt zmiany” (breakpoint). W przypadku RWD jest to jeden układ, dopasowujący się płynnie do wielkości. Stosując AWD z góry przewidujemy jaki układ bdzie przy konkretnej szerokości ekranu (przyjmuje się stanardowo: 320, 480, 760, 960, 1200, 1600).
RWD to jeden płynny układ (fluid layout), a AWD to zbiór sztywnych układów (fixed width layouts). Nie znaczy to wcale, że układ siatki nie zmienia się – ale to jedna siatka zmieniająca się automatycznie. Pokazuje to poniższy rysunek (źródło: Responsive Web Design Best Practices Advice, Tutorials, Case Studies, Copyright © 2015 by UXPin Inc):
CSS3
Najnowsze standardy HTML i CSS zawierają elementy pozwalające na łatwe dopasowywanie stron do urządzeń o różnych rozmiarach ekranu. Są to przede wszystkim meta-znacznik viewport oraz zapytanie @media (nowy element CSS). Ich wykorzystanie pokazuje poniższy przykład:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
@media screen and (max-width: 700px) {
body {
background-color: lightgreen;
}
}
@media screen and (min-width: 800px) {
body {
background-color: yellow;
}
}
@media screen and (min-width: 1000px) {
body {
background-color: white;
}
}
</style>
</head>
<body>
<div>
Przykład użycia CSS3 zob: <a href="https://www.w3schools.com/cssref/css3_pr_mediaquery.asp">
https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
</a><br /> Kolor tła zmienia się wraz z wielkością
</div>
</body>
</html>
Więcej informacji na ten temat: https://developers.google.com/web/fundamentals/design-and-ui/responsive/?hl=pl
Na stronie http://webroad.pl/html5-css3/572-responsywny-web-design-media-queries opisano z kolei w jaki sposób wykorzystać te mechanizmy do zbudowania elastycznego układu strony. Nie będziemy się tutaj tym zajmować, gdyż możemy wykorzystać gotowe rozwiązania, takie jak opisany poniżej Bootstrap. Wcześniej jednak musimy wyjaśnić podstawowe dla Bootstrapa pojęcie responsywności.
Bootstrap i Material
Bootstrap
Firma Twitter stworzyła bibliotekę css/js, która ułatwia tworzenie responsywnych stron. Nazwano ją Bootstrap. Staje się ona powoli standardem. Wystaczy ją dołączyć do naszej strony. Można ją pobrać ze strony:http://getbootstrap.com (dopasowując przy pobraniu kolorystykę). Opis tej biblioteki (po polsku) można znaleźć na przykład na stronie http://kursbootstrap.pl.
Ta biblioteka obsługuje między innymi menu, formularze i ramki.
Strona jest podzielona na wiersze (row), które z kolei dzielą się na kolumny (col). W ten sposób tworzy się siatka (grid) zmieniająca się w zależności od szerokości ekranu. Poszczególne elementy tworzy się przy pomocy ramek div o odpowiednich w nazwach klas (class=""). Dla kolumn nazwy te tworzy się w następujący sposób:
col-[szerokosc]-[ilosc]
gdzie [szerokosc]= lg, md, sm lub xs
[ilosc] = od 1 do 12
Na przykład col-md-6 - ramka, która na średnim ekranie mieści się obok 6 podobnych
Bootstrap ustala następujące przedziały szerokości
lg> 1200px,
md>992px,
sm>768px
xs<768px.
Wiersze (row) są zawarte w kontenerze (container).
Prócz nazw klas z Bootstrap, można stosować własne - do zmiany zachowania elementów.+
Można też swój arkusz styli budować w oparciu o identyfikatory (id) a nie klasy (class).
Przykład:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<style>
#ramka {
border: 1px solid red;
background-color: white;
margin: 10px;
}
.zielona {
border: 1px solid green;
background-color: white;
margin: 10px;
}
.container {
background-color: lightyellow;
}
</style>
</head>
<body>
<div class="container">
<div class="container-fluid">
<div class="row">
<div id="ramka" class="col-sm-12">
ramka1</div>
</div>
<div class="row">
<div class="zielona col-lg-4 col-md-6 col-xs-6">
ramka 2
</div>
<div class="zielona col-lg-4 col-md-6 col-xs-6">
ramka 3
</div>
</div>
</div>
</div>
</body>
</html>
Material
Bootstrap nie tylko definiuje zwijający się szkielet (grid), ale także eleganckie elementy graficzne (w tym przyciski). To z tego powodu wiele stron zaczęło wyglądać bardzo podbnie. Ostatnio jednak nastąpiła w tym względzie duża zmiana z powodu MDL.
Material Design Lite (MDL) został zaprojektowany jako interfejs urządzeń przenośnych. Jednak poprzez wykorzystanie w internecie szybko się spopularyzował.
Najważniejsza różnica między Bootstrap i Material, to zastosowanie płaskich elementów, zaprojektowanych w myśl idei UX (duże wyraziste). To główna tendencja ostatnich lat.
Porównanie Bootstrap i Material pokazuje przykład ex01.html (http://jurekw.dev.pwste.edu.pl/w2017/ex01.html)
Pożyteczne linki:
https://material.io/guidelines/#introduction-goals
http://blog.eduweb.pl/material-design-projektowanie-interfejsow-android/