Nowoczesny Webdesign: Techniki Fluid i Media Queries
Projektowanie stron i UI/UX
11 godz. 24 min · UI, UX i Webdesign
Grzegorz RógIdea ArchitectCzego się nauczysz
- Mobile First i RWD – Najlepsze Praktyki
- Praca koncepcyjna - UX, Uzytkownicy, Prototypowanie
- Grafika i UI strony WWW – Narzedzia, Formaty
- Typografia na stronach WWW
- Najlepsze, inspirujace przyklady serwisów
- Architektura Informacji i Nawigacja
- Optymalizacja stron WWW
- Praca w Zespole - Praktyczne Narzedzia
- Wstep do SEO - Pozycjonowanie i Promocja
- I wiele wiecej!
Technologie w sieci - Pojęcia
Poznasz podstawowe zagadnienia związane z funkcjonowaniem stron WWW w sieci - porozmawiamy o przeglądarce, domenach oraz DNS, wyborze odpowiedniego dostawcy usług hostingowych i najważniejszych parametrach na które należy zwrócić uwagę aby nasza strona WWW mogła skalować się wraz ze wzrostem ruchu. Powiem też o tym jak wygląda podział ról w procesie projektowania a także poznamy podstawowe pojęcia jak serwer i client-side oraz ich najważniejsze technologie html css js, pomówimy o blibliotekach i frameworkach, bazach danych i technologiach serwerowych jak asp net i php. Ta część głównie kierowana jest do osób które stawiają swoje pierwsze kroki w webdesignie i stanowi dopełnienie całego materiału.
Mobile first
Czy wiesz, że aż 25% ludzi na świecie korzysta wyłącznie z urządzeń mobilnych do przeglądania sieci? W tej części kursu będziesz miał okazję zainspirować się nowym podejściem do projektowania w związku ze zmieniającym się ekosystemem urządzeń i technologii mobilnych. Dowiesz się czym jest podejście mobile first oraz jakie są zalety rozpoczęcia procesu projektowego od małych ekranów. Poznasz też aktualne kierunki i trendy związane z wykorzystaniem IOT oraz VR i sensorów. Sprawdzimy statystyki i przygotujemy się do praktycznych aspektów projektowania na wiele ekranów, czyli…
Responsive Web Design
Projektowanie jako proces
Współczesny proces tworzenia serwisów, czy raczej aplikacji internetowych w ciągu ostatnich lat ewoluował w kierunku sprawnego dostarczania rezultatów i realizacji celów biznesowych w rekordowym czasie. W kursie omówimy dokładnie nowe podejście, wspominając także o metodologii Agile i podejściu Scrum, które z odpowiednimi modyfikacjami zastosujesz do każdego serwisu - niezależnie, czy tworzy go duży zespół osób, czy tylko grafik i programista. Jeśli słyszałeś o Agile UX i Lean UX to prawdopodobnie zainteresuje Cię to w jaki sposób zorganizować pracę tak aby przebiegała ona z nakierowaniem na rezultat. Powiem Ci też jak niemal całkowicie zrezygnować z przestarzałej dokumentacji na rzecz aktywnego angażowania zespołu i właściciela projektu.
Podstawy pracy koncepcyjnej
Kurs, który masz przed sobą prowadzi Cię w sposób spójny i zrozumiały po kolejnych etapach procesu projektowania stron WWW. Ma on stanowić kompletne źródło wiedzy, do którego będziesz wracał w różnych fazach swoich projektów. Dlatego kolejnym działem jest wyjaśnienie zagadnienia pracy koncepcyjnej i jego pierwszego etapu jakim jest definicja celów oraz stworzenie modelu biznesowego dla powstającej witryny. Pokażę Ci jak zdefiniować cele, akcje oraz funkcje serwisu i jak powinien przebiegać podział tych elementów w fazie koncepcyjnej.
Użytkownicy i testy
Kolejnym etapem pracy będzie zweryfikowanie tego, czy cele biznesowe serwisu odpowiadają zapotrzebowaniu oraz specyficznym wymaganiom użytkowników. Powiem Ci jak małym nakładem czasu przeprowadzić testy na użytkownikach i wyjaśnię, dlaczego są potrzebne w fazie koncepcyjnej. Zdefiniujemy także użytkowników, do których chcemy kierować swój serwis a także stworzymy persony, które będą towarzyszyć nam podczas kreowania strategii treści dla serwisu.
Treść i architektura informacji na stronie WWW
Ta obszerna część kursu obejmuje niezwykle ważny etap pracy koncepcyjnej, w ramach którego najpierw opracujemy schemat i architekturę treści dla naszego serwisu a następnie zbudujemy relację podstron witryny tworząc tym samym tzw. Sitemapę. Przy okazji pokażę Ci mnóstwo ciekawych narzędzi wspierających ten proces. Zajmiemy się kolejno hierarchią treści i podstron budując tym samym nawigację na naszej stronie. Pokażę Ci także szereg praktycznych, nowoczesnych rozwiązań związanych z nawigacją w serwisie.Kolejno zajmiemy się tworzeniem wizualnego schematu witryny a naszą pracę rozpoczniemy od prostych Wireframe'ów oraz projektowania w oparciu o tekst, by przejść do coraz bardziej zaawansowanych technik pracując nad mockupami oraz prototypami serwisu. Pokażę Ci szereg rozwiązań i narzędzi które będą pomocne również do tworzenia interaktywnych prototypów takich jak UX Pin, Invision czy Adobe Muse.Zbudujemy też tzw. Content Inventory, czyli repozytorium treści, które znajdą się w serwisie. Poznasz sposoby na jego łatwą aktualizację oraz narzędzia chmurowe, które pozwolą na zdalną współpracę nad treścią z innymi autorami.
Atomowe komponenty
Zamiast tworzenia klasycznych stron WWW opartych o podstrony, zaproponuję Ci zupełnie nowe podejście bazujące na tworzeniu systemów opartych o komponenty. Poznasz atomy oraz molekuły tworzące gotowy organizm i strony Twojego serwisu i odkryjesz mnóstwo zalet takiego podejścia, które znacznie odciąży Twój serwis i sprawi, że będziesz mógł go łatwo skalować. Pomówimy o graficznych bibliotekach komponentów oraz ich organizacji a także rozwiązaniach opartych o przeglądarkę i HTML oraz CSS. Dowiesz się czym jest Style Guide i jak stworzyć uniwersalne wytyczne do komponentów w Twoim serwisie. Pokażę Ci też najlepiej przygotowane przykłady Style Guide.
Liczy się styl!
Kolejną część kursu poświęcimy na omówienie praktycznych zagadnień związanych z poszukiwaniem inspiracji stylistycznych do projektu. Pokażę Ci narzędzia, które pozwolą w łatwy sposób gromadzić inspiracje w postaci zasobów i tablic a następnie na ich podstawie stworzymy wytyczne do zaprojektowania graficznego UI serwisu. Dowiesz się czym są Style Tiles i dlaczego warto tą część procesu zaplanować w odpowiednim czasie.
BONUS! Inspirujące Strony WWW - Trendy 2016
To nie wszystko! Jako bonus do tego kursu otrzymasz ponad godzinną lekcję z przeglądem setek serwisów WWW, które zainspirują Cię do dalszej pracy. Przyjrzymy się aktualnym trendom w projektowaniu takim jak Flat UI czy Material Design. Będziesz miał okazję obejrzeć najlepiej zaprojektowane serwisy na Świecie i dowiedzieć się, co sprawia że ich UI i UX są wyjątkowe. To nie wszystko! W ramach kursu otrzymasz darmowe aktualizacje tego materiału w każdym roku tak, abyś mógł dopasować się do zmieniających się trendów!
Grafika na stronach WWW
W kolejnej części kursu porozmawiamy o nowych trendach w zakresie przygotowywania i optymalizacji na strony WWW. Dowiesz się jakie są popularne formaty grafiki, jak możemy zastąpić ją z pomocą typografii czy elementów CSS3 a także jak przygotować pliki na Twoją stronę WWW. Dowiesz się też jak pracować z formatem SVG i popularnymi bibliotekami wspomagającymi pracę z grafiką.Porozmawiamy także o projektowaniu w oparciu o zasoby - przekażę Ci mnóstwo linków do darmowych zasobów jak grafiki - zdjęcia, ikony, czy gotowe zestawy UI przygotowane dla Photoshop, Sketch czy Illustrator, tak abyś mógł pracować wydajniej mając do dyspozycji świetnej jakości źródła.
Typografia w sieci
Kolory w sieci i Grid
Kolejna część dotyczy kolorystyki na stronach WWW oraz siatki - poznasz właściwe zastosowania kolorów oraz dowiesz się jak działa psychologia kolorów. Pokażę Ci także szereg narzędzi, które ułatwią i pomogą w wyborze kolorystyki na stronę WWW. Poza tym będziemy także pracować w oparciu o siatkę jako jeden z kanonów projektowania, który łatwo zrozumiesz dzięki aplikacjom optymalizującym pracę na gridzie.
Praca w zespole
Z kursu dowiesz się także jak skutecznie pracować w zespole. Nieważne, czy jest to zespół składający się z kilkunastu osób pracujących zdalnie, czy z dwóch które ściśle ze sobą współpracują - pokażę Ci jak zautomatyzować procesy oraz jak zarządzać skuteczną komunikacją w zespole z wykorzystaniem nowych, ciekawych narzędzi. Automatyzatory zadań, repozytoria plików, praca w oparciu o chmurę czy biblioteki CC, Slack, OneDrive i wiele innych narzędzi pomoże Ci zrealizować sprawnie zadania projektowe w ramach nowego procesu Parallel Design.
Wydajność stron WWW
Promocja i pozycjonowanie
Ostatnia część kursu stanowi wprowadzenie do nowoczesnego SEO, czyli optymalizacji strony pod kątem indeksowania w wyszukiwarkach. Poznasz elementarne składowe procesu zarządzania indeksowaniem oraz sposoby na monitorowanie i analitykę Twojej strony pod tym kątem. Poza tym, będziemy także mówić o promocji strony w sieci, gdzie poznasz podstawowe kanały, którymi warto obecnie docierać do Twoich odbiorców.Jako bonus do kursu znajdziesz również wzory prawidłowo skonstruowanych dokumentów!
Podsumowując, dowiesz się między innymi:
- Wprowadzenie do webdesignu i podstawowe pojęcia
- Proces projektowania stron WWW
- Mobile First jako nowoczesne podejście do projektowania
- Responsive Web Design – najlepsze praktyki
- Praca koncepcyjna nad serwisem
- Grafika na strony WWW – narzędzia, formaty i wiele więcej
- Typografia na stronach WWW
- Narzędzia wspierające proces kreatywny
- Najlepsze przykłady serwisów i rozwiązań
- Nawigacja na stronach WWW
- Optymalizacja stron WWW
- Praca w zespole i ciekawe narzędzia
- Wstęp do pozycjonowania i promocji
- I wiele, wiele więcej!
Dla kogo jest ten kurs?
Kurs jest przeznaczony dla wszystkich osób, które pracują ze stronami WWW - grafików, programistów, koderów, a także osób które kierują projektami webowymi lub odpowiadają za ich ousourcing w firmach. Jeśli chcesz dowiedzieć się, jak funkcjonują nowoczesne strony WWW - ten kurs jest właśnie dla Ciebie!
Witaj w kolejnej lekcji, w której zapoznam Cię z praktycznym aspektem Responsive Web Design, czyli pokażę Ci to jak
zrobić żeby strona była responsywna.
Jakich technik się używa i z jakich narzędzi warto skorzystać.
Jest to bardzo proste w gruncie rzeczy, ponieważ korzystamy zawsze z technik CSS'owych praktycznie, są
oczywiście biblioteki JavaScript, które pozwalają wykrywać różne rozdzielczości, ale zdecydowanie najlepszą,
rekomendowaną techniką jest wykorzystanie CSS i są tutaj dwie rzeczy, które możemy zrobić.
Pierwsza opiera się na tzw. technice Fluid. Technika Fluid to technika, którą już pokazywałem Ci wcześniej
i polega ona w zasadzie na bardzo prostym wykorzystaniu opływania kontenerów.
Technika Fluid, chciałbym Ci zaprezentować ją na takim prostym tekście, który mamy tutaj wyświetlany w przeglądarce.
Polega na tym, że ten tekst i, zresztą jestem tutaj w narzędziu CSSdeck, które warto sobie poznać ponieważ
możesz tutaj generować sobie kod HTML, CSS i JavaScript i podglądać po prawej stronie jak to wyświetla się,
jak by to wyglądało w przeglądarce, na bieżąco wpisywać i widzieć te zmiany. Jest sporo takich narzędzi,
jest CSSdeck, jest JSfiddle, jest jeszcze kilka innych, ale ja będę akurat korzystał z CSSdeck'a, bo mi się wydaje,
że jest całkiem przyjazny. W związku z tym zobacz jak wyświetla się tekst, który osadziłem tutaj w HTML'u
w jednym, prostym akapicie i na naszej stronie,
jeżeli zmienimy rozdzielczość przeglądarki, czyli zaczniemy skalować przeglądarkę, ten tekst automatycznie
opływa,
czyli tak jakby przelewa się w tej przeglądarce.
Wygląda to w ten sposób, że jeżeli kontener, w którym się znajduje,
ten tekst się nie mieści to zaczyna się przelewać na dół.
Czyli można powiedzieć, że przeglądarka, per se, od samego początku jest responsywna i tak naprawdę nic
nie trzeba było tutaj robić.
Problem gdzie się pojawia? Problem pojawia się tutaj, że zwykle nie chcemy mieć takiego kontenera na całą
szerokość naszej strony, ale często chcemy mu zadać jakąś konkretną, konkretny wymiar, konkretną szerokość.
I w tym przypadku gdybym wpisał w kodzie CSS dla tego div'a, w którym znajduje się nasz akapit tekstu,
czyli dla tego konkretnego kontenera, szerokość czyli width i zadał ją np. na 500px to okazałoby się,
że nasz tekst został złamany przy tych 500px, bo taki duży jest nasz div.
Mogę zresztą np. wstawić sobie jakieś tło background i, super, źle to napisałem, i określić np. tło na yellow
tak żebyś widział jak to wygląda.
Czyli ten div ma teraz 500px i w momencie kiedy będziemy zmieniać szerokość okna przeglądarki okazuje
się, że ten kontener traci właściwości responsywne, czyli traci tą właściwość Fluid, tego opływania, tekst przestaje
wpływać na dół i pojawia się coś co jest sygnałem, że nasz RWD jest zrobiony źle, czyli właśnie ten poziomy
pasek scrollowania.
Tak nie powinno nigdy być, w związku z tym to co musimy zrobić to zastosować właśnie podejście do techniki
Fluid, które mówi, że w ramach kontenerów powinniśmy stosować zamiast jednostek absolutnych, takich jak
pixele, jednostki relatywne, takie jak procenty.
Na czym polega różnica? Na ekranie mamy konkretną ilość pikseli, w zależności od wielkości tego ekranu,
jego rozdzielczości, piksel ma zawsze jakąś fizyczną wielkość, np. ćwierć milimetra.
No i teraz jeżeli zadajemy mu 300px, to zawsze będzie to ćwierć milimetra razy 300, czyli zawsze
będzie fizycznie taka konkretna określona rozdzielczość.
To są jednostki absolutne. Jednostki absolutne to też są centymetry, metry itd.
Natomiast jednostki relatywne to jednostki, które powstają, jeżeli określamy w jednostkach relatywnych
np. szerokość kontenera to znaczy, że ten kontener pozostaje w relacji do czegoś i podstawową jednostką
oczywiście są procenty,
natomiast na stronach WWW stosujemy także jednostki takie jak rem'y oraz em'y,
ale to szczegółowo omówię przy okazji omawiania topografii, natomiast teraz zajmijmy się procentami, bo
jest to najłatwiejsze do zrozumienia i nasz przykład zmodyfikujmy tak, żeby nasz div nie zajmował 500px,
ale zajmował 50%. 50%
czego?
Otóż 50% okna przeglądarki, w którym został osadzony, a ściślej rzecz biorąc, swojego rodzica w
HTML'u, tym rodzicem jest znacznik Body, czyli tak jakby całe okno przeglądarki, które mamy do dyspozycji.
Zatem jeżeli będę teraz skalował to okno to ten div będzie cały czas zawsze zajmował 50% i uruchomiliśmy
w magiczny sposób opływanie tekstu, czyli właśnie ten kontener jest teraz w pełni Fluid, czyli w pełni
spełniliśmy pierwszą zasadę Responsive Web Design, czyli określamy po prostu te elementy, jednostki i wielkości jako
elementy pozostające w relacji do siebie, albo np. do okna przeglądarki z pomocą procentów.
Ok.
Następna rzecz, następna
technika RWD to jest technika, która pomagała nam ukrywać elementy.
Przypomnę Ci stronę Smashing Magazine. Tutaj mamy zastosowanie tych dwóch technik naraz,
ponieważ jeżeli skalujemy stronę to tekst w tym kontenerze przelewa się z pomocą techniki Fluid,
natomiast jeżeli dojdziemy np. gdzieś w to miejsce, do rozdzielczości tabletowej, to w tym momencie, na tym Break
Poincie następuje ukrycie całej prawej szpalty i to jest właśnie ta druga z tych dwóch technik Responsive Web Design,
która nazywa się Media Queries, i która w skrócie sprowadza się do tego, że możemy sprawdzić jaką szerokość
ma okno przeglądarki i w zależności od tej szerokości zastosować jakiś blok kodu CSS, czyli w jakiś sposób
wpłynąć na ostylowanie, położenie, rozmiary elementów, które znajdują się na naszej stronie.
Innymi słowy, możemy stworzyć takie instrukcje warunkowe, które dopasują style CSS w zależności od rozdzielczości
ekranu albo konkretnego urządzenia. I chciałbym pokazać Ci technikę właśnie wykorzystując tutaj znowu
bardzo prosty przykład, gdzie mamy jednego div'a, tło na żółte określone i wymiary 500 na 500 pikseli i teraz
chcielibyśmy aby ten div np. znikał w momencie kiedy okno przeglądarki będzie od niego węższe,
czyli jeżeli będzie węższe od tych 500px chcemy go ukryć tak jak działo się to ze szpaltą, z prawą szpaltą na Smashing
Magazine.
Teraz składnia Media Queries, to jest jest jeszcze składnia techniki Fluid, którą omówiliśmy. Składnia Media
Queries wygląda następująco: najpierw znaczek małpka (@), później media i wpisujemy maksymalna szerokość czy
maksymalna wysokość czy maksymalny czy minimalna szerokość.
Zwykle na takich jednostkach się operuje i podajemy tutaj szerokość, np. właśnie szerokość 600px i wtedy
robimy coś z contentem.
W praktyce to jest bardzo proste, działa na takiej zasadzie, że zapisujemy @media, tylko trzeba jeszcze
umieć pisać na klawiaturze, @media i teraz tak, stawiamy sobie najpierw tutaj warunek, czyli mówimy,
że np. max-width, czyli maksymalna szerokość, to ma być 500px.
I teraz nawiasach klamrowych
mówimy co ma się dziać poniżej tych 500px.
W tym przypadku chcemy naszego div'a nieszczęsnego ukryć.
Czyli dajemy mu właściwość display: none;
To jest po prostu właściwość CSS, która odpowiada za ukrycie elementu na stronie.
I teraz, ten element jest dalej widoczny mimo, że daliśmy taką właściwość. Dlaczego?
Dlatego, że nie został spełniony warunek max-width: 500px.
Dopiero kiedy będzie spełniony, czyli kiedy nasza strona będzie miała mniej niż 500px to zauważ, że dopiero
w tym momencie cały div zostaje ukryty, znika ze strony.
Dlaczego?
Dlatego, że zadziałała ta reguła media query.
Co więcej reguły media query można ze sobą łączyć.
Jeżeli chcielibyśmy zrobić tak że np. chcemy aby ten kwadrat znikał np. między 300 a 500
pikselem, a tak to był widoczny, to możemy zrobić kolejną instrukcję, kolejny warunek min-width
300px.
I tutaj jeszcze trzeba po prostu dodać spójnik and oraz max-width: 500px.
To znaczy, że jeżeli mamy minimum 300, a maksimum 500px na stronie, jeśli chodzi o szerokość okna.
Co mamy zrobić? Display: none; dla naszego div'a. Czyli jeżeli wycelujemy sobie,
tutaj mamy teraz mniej niż 300px, np. 200, 250, 280, kiedy będzie 300
to ten element zniknie i nie będzie go widać aż do 500px,
gdzie powinien się znowu po przekroczeniu 500px pojawić i zostać na stronie.
Czyli możemy łączyć te elementy ze sobą właśnie za pomocą takich prostych instrukcji warunkowej.
Teraz co jeszcze sobie zrobimy? Może połączmy te dwie techniki. Pokażę Ci jak to zrobić na
może trochę bardziej złożonym, ale dalej prostym przykładzie, gdzie mamy obok siebie ustawionych, mamy
sześć div'ów i domyślne działanie przeglądarki jest takie, że w momencie kiedy te div'y mają zadaną taką
specjalną właściwość float: left;, czyli właściwość, która sprawia, że są ułożone obok siebie, one tak jakby znowu,
per se, ta przeglądarka działa, jest responsywna sama z siebie, czyli te div'y jeżeli zmieniamy szerokość
okna, one będą opływały, czyli będą układały się jeden pod drugim.
No i można powiedzieć, że to już w pewien sposób działa i jest responsywne.
Natomiast to co ja będę chciał zrobić to opakować jeszcze te div'y w osobne sekcje po to, żeby zademonstrować
Ci pewną właściwość, połączenie tych dwóch technik. Sekcjom nadamy identyfikatory np. sek1 to będzie
sekcja pierwsza i może skopiuję sobie ten fragment kodu żeby to szybko później zrobić, najpierw zamknę tą sekcję
i stworzę sobie tutaj sekcję drugą. Teraz będzie sekcja trzecia i skopiuję jeszcze znaczniki domykające
sekcji w ten sposób i generalnie wpłynęliśmy tylko na semantykę kodu.
Nie zmieniło się tutaj nic, ponieważ dodaliśmy jakieś puste znaczniki, które obejmują te div'y. Najpierw jednego div'a,
później kolejny obejmuje 2 div'y i następna sekcja obejmuje 3 div'y. I teraz jeżeli byśmy zrobili następującą
rzecz, jeżeli np. dla sek1, czyli dla identyfikatora sek1, a więc wstawiam tutaj #, czyli w ten sposób
możemy się odnieść do sekcji pierwszej i odniesiemy się do div'a, który się znajduje w tej sekcji i tam jest
przypominam tylko jeden div, zadamy np. mu szerokość 100% to okaże się że ten div poszerzył
się na 100% i tym samym zepchnął na dół wszystkie pozostałe divy. I w ten sposób możemy zrobić
taki, przynajmniej zacząć tworzyć takie coś co nazywa się Responsywnym Frameworkiem,
gdzie jeżeli wybierzemy sobie teraz, skopiujemy te linie kodu i np. dla sekcji drugiej dla div'ów zadamy im
szerokość ok. 50%.
Dlaczego nie mogę dać 50%? Dlatego, że wtedy te div'y znajdują się jeden po drugim,
ponieważ mam zadane jeszcze jakiś konkretny margines. Margines jest dodawany z każdej strony, w związku
z tym możemy zrobić tak, żeby nasza strona była w pełni fajna jakby responsywnie
to możemy też wszystkie jednostki, które są jednostkami absolutnymi przerobić na relatywnie i np. zrobić
margines rzędu 1%.
Jeżeli tak zrobimy to możemy łatwiej przewidzieć te jednostki procentowe tutaj, bo będzie to wyglądało
w ten sposób. Będzie 1% z tej strony, później 1% tutaj i 1% z prawej strony, czyli będziemy
mieli do odjęcia łącznie 4% na tych dwóch div'ach.
Czyli wystarczy, że zrobimy 48 proc. i powinny się zmieścić. Wygląda to w porządku.
Teraz są obok siebie.
Następnie sekcja trzecia. I sekcja trzecia, mamy podobną sytuację, tutaj mamy 3 div'y i odejmujemy mniej
więcej po 1%, nawet nam teraz nie starczy, chyba 29 moment, tutaj jest sek
3.
No właśnie powinno nam wystarczyć 30%, a nawet może 31 się uda? Tak.
Czyli tutaj mamy teraz sytuację, gdzie każdy z tych div'ów sekcji trzeciej został umieszczony obok siebie
i jest dokładnie na 31%.
I dlaczego teraz dobre jest to że wszystkie jednostki mamy w jednostkach relatywnych, jest to layout
Fluid? Bo zmieniając szerokość okna przeglądarki, to wszystko elegancko, pięknie nam się dopasowuje i to jest
właśnie dobrze skonstruowany taki framework, czyli taka podstawa, fundament naszej strony jeśli chodzi
o RWD, no i teraz możemy to połączyć z media queries.
Na przykład jeżeli chcielibyśmy zrobić taką historię, że jeżeli dojdziemy do 480px, czyli do layoutu
takiego telefonowego, to to jest już za mocno ściśnięte, więc chcemy umieścić wszystkie rzeczy jedna
pod drugą. Nie ma problemu i możemy to zrobić właśnie z pomocą media queries.
Jak z zaadresować takie media query? @media.
Tak jak już robiliśmy poprzednio, instrukcja warunkowa to max-width,
w tym przypadku 480px, ta rozdzielczość telefonowa, a następnie w bloku instrukcji mówimy, że każdy
z div'ów poproszę żeby miał 100% szerokości. Czyli div,
to akurat źle zapisałem, width: 100%; tutaj jeszcze dodam taką frazę !important; żeby
wymusić te style, aczkolwiek sama jakby technika tego naszego działania właśnie zostaje taka, że jeżeli zostanie
spełniony warunek, że jeżeli to jest poniżej 480px, czyli maksymalnie 480, to wtedy nie wyświetlamy
div'ów w taki sposób, tylko układamy je jeden po drugim zadając każdemu szerokość 100%. I tak moi drodzy
wygląda wykorzystanie dwóch najbardziej popularnych technik Responsive Web Design, czyli media queries, które
pozwalają nam sprawdzać jakiś warunek, a także techniki Fluid, która pozwala opływać.
Co więcej media queries, tak jak tutaj jest pokazane, możemy dołączyć nie tylko w jednym pliku stylów CSS,
ale w HTML'u możemy podlinkować różne pliki CSS, które spełniają różne, będą wyświetlane przy spełnieniu różnych
warunków.
Czyli możemy stworzyć plik tablet.css, telefon.css i desktop.css i to będą trzy różne pliki, które będziemy
ładować w zależności od konkretnego warunku spełnionegoe w HTML'u.
Teraz jeszcze jedna ważna rzecz. Co można sprawdzić w media query? Czy tylko wymiary czy tylko szerokość?
Tak jak robiliśmy, minimalną i maksymalną.
Otóż okazuje się, że nie. Można sprawdzić masę różnych rzeczy, m.in. coś takiego jak szerokość device-width to ok, możemy
sprawdzić kolor.
Możemy sprawdzić rozdzielczość, możemy sprawdzić np. device-aspect-ratio, czyli coś takiego co pozwala sprawdzić czy
jakiś ekran skaluje zawartość, o czym więcej będzie jeszcze w sekcji o grafice i powiem Ci na czym polega
to media query.
Możemy też sprawdzić typ projekcji, czy jest to ekran, czy jest to telewizor.
Tutaj nie zawsze to wszystko będzie dobrze działać, ale mamy tutaj do wyboru zdecydowanie więcej niż
tylko szerokość,
i warto sprawdzić w tym kontekście stronę Mozilla Developer, którą zresztą znów polecam, jest to jeden
z lepszych zasobów, które można znaleźć jeśli chodzi o współczesne standardy web developerki.
I tutaj jeżeli chcesz nauczyć się czegoś właśnie już związanego z kodowaniem, polecam tę stronę i Using media queries
to jest strona, na której są opisane różne zastosowania media query z różnymi wariantami i dokładnie opisane
jest to co można sprawdzać z pomocą media queries. W zależności od tego możemy stosować różne style no i tak naprawdę
to jest wszystko co chciałem powiedzieć. W następnej lekcji przejdziemy do kolejnej praktycznej rzeczy,
czyli jak zrobić responsywne obrazki, to będzie naprawdę proste i podsumujemy też całą część RWD.
Do usłyszenia.