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...

  1. Dedykowane
  2. Adaptive
  3. Responsive

... cechy, zalety i wady

  1. Zasada działania
  2. Stworzenie witryny - nakład pracy, koszt, czas
  3. Utrzymanie witryny - nakład pracy, koszt, czas
  4. Szybkość ładowania witryny
  5. Dostępność i wrażenia użytkownika
  6. 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

  1. Płynny interfejs
  2. Elastyczne obrazki i multimedia
  3. Media Queries

Cechy dodatkowe

  1. Relatywne jednostki interfejsu i typografii
  2. Optymalizacja pod ekrany z wysoką rozdzielczością
  3. Wygodna i przyjazna nawigacja
  4. Responsywne komponenty jak modale, lightboxy, slidery
  5. 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!

  1. Do budowy layoutu stosuj zagnieżdżanie tabelek. DIVy stosuj tylko w specyficznych przypadkach.
  2. Jeżeli w jakaś właściwość CSS może zostać zapisana w HTMLu to należy to zrobić (np. border)
  3. Ustalaj zawsze wszystkie paddingi (można użyć wersji skróconej)
  4. Zawsze sprawdzaj czy właściwość CSS, której chcesz użyć ma wsparcie w wiodących klientach
  5. Style pisz inline (lub korzystaj z CSS Inlinera)
  6. Przetestuj swój kod Walidatorem W3C
Made with Slides.com