Responsive Web Design
Pracuję z
Pracuję w
Layout
Content
Nawigacje
Media Queries
Jednostki relatywne
Strony mobilne - teoria
Grafika, Video, Multimedia
Typografia
Testowanie
Komponenty
Touch Events
W programie
Tabele
Newslettery
Rodzaje stron mobilnych...
- Dedykowane
- Adaptive
- Responsive
... cechy, zalety i wady
- Zasada działania
- Stworzenie witryny - nakład pracy, koszt, czas
- Utrzymanie witryny - nakład pracy, koszt, czas
- Szybkość ładowania witryny
- Dostępność i wrażenia użytkownika
- Pozycjonowanie
Dedykowane
Mobile: http://m.gazeta.pl
Mobile: http://www.wp.pl/mini.html
(Mobile Design)
Desktop: http://www.wp.pl
Desktop: http://gazeta.pl
Adaptacyjne
(Adaptive Design)
Responsywne
(Responsive Design)
Brucee Lee
"You put water into a cup it becomes the cup.
You put water into a bottle it becomes the bottle.
You put it into a teapot it becomes the teapot."
Cechy strony responsywnej
- Płynny interfejs
- Elastyczna treść (obrazki, tabelki, etc.)
- Media Queries
Podstawowe cechy strony responsywnej
- Płynny interfejs
- Elastyczne obrazki i multimedia
- Media Queries
Cechy dodatkowe
- Relatywne jednostki interfejsu i typografii
- Optymalizacja pod ekrany z wysoką rozdzielczością
- Wygodna i przyjazna nawigacja
- Responsywne komponenty jak modale, lightboxy, slidery
- Obsługa zdarzeń dotyku
Ale równie ważne ;)
Jednostki w CSS
ale nie byle jakie... relatywne!
Jednostki w CSS
co, gdzie i kiedy
| % (procent) | Layout (szerokość i wysokość elementów, odstępy) |
| em | Media Queries |
| rem i em | Typografia |
| vw, vh, vmin, vmax | Layout, typografia |
* - należy uważać na jednostki vm, vh, vmin, vmax - nie są jeszcze w pełni wspierane przez przeglądarki (#http://caniuse.com/#search=vw)
Testowanie stron responsywnych
Media Queries
| min-width: 30em min-height: 30em |
Minimalna szerokość, wysokość ekranu/przeglądarki. |
| max-width: 30em max-height: 30em |
Maksymalna szerokość, wysokość ekranu/przeglądarki. |
| orientation: portrait orientation: landspace |
Orientacja urządzenia. Może przyjąć wartości: portrait lub landscape. |
| -webkit-min-device-pixel-ratio: 1.5 | Minimalna wartość pixel ratio ekranu. |
| min-resolution: 144dpi | Minimalna rozdzielczość ekranu. Podana wartość musi być w jednostkach dpi. |
Meta VIEWPORT
| width, height | Szerokość, wysokość wyświetlanego obszaru strony. |
| device-width device-height |
Szerokość, wysokość ekranu urządzenia. |
| initial-scale | Domyślne przybliżenie strony. Parametr przyjmuje wartości numeryczne. |
| minimum-scale maximum-scale |
Minimalne, maksymalne przybliżenie strony. Parametr przyjmuje wartości numeryczne. |
| user-scalable | Pozwala włączyć lub wyłączyć możliwość skalowania strony przez użytkownika. Przyjmuje wartości: yes lub no. |
<meta name="viewport" content="width=device-width, initial-scale=1">Zalecane ustawienie
Layout
Layout
Fluid
Semi-fluid
Grid
Equal Height Column
Fluid Height
Multicolumn
Flexbox
Nawigacja
Nawigacja w teorii...
Problemy z nawigacją na stronach responsywnych.
... i w praktyce
Implementacja wzorców nawigacji.
Czym powinna charakteryzować się idealna nawigacja dostosowana do urządzeń mobilnych i desktopowych.
Przegląd ciekawych rozwiązań.
Problemy z nawigacją
Horyzontalną i Wertykalną
Jak upchnąć wszystkie elementy nawigacji na małym ekranie telefonu lub tabletu?
Jak przenieść rozbudowane submenu na ekran telefonu lub tabletu?
Co zrobić rozbudowaną nawigacją w sidebarze?
Cechy idealnej nawigacji
Zoptymalizowane pod kątem "tapnięcia" a nie stanu hover.
Wszystkie elementy nawigacji dostępne z dowolnego urządzenia.
Intuicyjna ikonka mobilnego menu.
Duże, łatwe do "tapnięcia" przyciski.
Nie zajmuje dużo miejsca.
Łatwo i szybko dostępna.
...coś jeszcze?
Wzorce
Squeeze content
Push content
Overlay content
Horizontal momentum scroll
Fullscreen Overlay
Off-canvas (fly-out)
Toggle
Multilevel toggle
Implementacja i inspiracja
Perfekcyjna grafika
Ta sama wielkość inna rozdzielczość
Ekrany o dużej rozdzielczości i skalowanie sprzętowe
Ta sama wielkość inna rozdzielczość
Ekrany o dużej rozdzielczości i skalowanie sprzętowe
Ta sama wielkość inna rozdzielczość
Ekrany o dużej rozdzielczości i skalowanie sprzętowe
Ta sama wielkość inna rozdzielczość
Ekrany o dużej rozdzielczości i skalowanie sprzętowe
Browser Stack
Testowanie wieloplatformowe
Live Preview
Na maszynach wirtualnych
Live Preview
Na maszynach wirtualnych
Live Preview
Na maszynach wirtualnych
Issue Tracking
Wygodne raportowanie błędów
Issue Tracking
Wygodne raportowanie błędów
Issue Tracking
Wygodne raportowanie błędów
Issue Tracking
Wygodne raportowanie błędów
Auto Screen Shoots
Z różnych przeglądarek na różnych urządzeniach
Auto Screen Shoots
Z różnych przeglądarek na różnych urządzeniach
Auto Screen Shoots
Z różnych przeglądarek na różnych urządzeniach
Responsive HTML Emails
Zapomnij o tym, czego się do tej pory nauczyłeś...
Zero standardów
A więc musisz mieć się na baczności!
- Do budowy layoutu stosuj zagnieżdżanie tabelek. DIVy stosuj tylko w specyficznych przypadkach.
- Jeżeli w jakaś właściwość CSS może zostać zapisana w HTMLu to należy to zrobić (np. border)
- Ustalaj zawsze wszystkie paddingi (można użyć wersji skróconej)
- Zawsze sprawdzaj czy właściwość CSS, której chcesz użyć ma wsparcie w wiodących klientach
- Style pisz inline (lub korzystaj z CSS Inlinera)
- Przetestuj swój kod Walidatorem W3C
Responsive Web Design
By Maciej Żukiewicz
