Idea of responsive web design. Roman Białek Mateusz Mikołajczak Kacper Palmowski Krzysztof Szot

Transkrypt

1 Idea of responsive web design Roman Białek Mateusz Mikołajczak Kacper Palmowski Krzysztof Szot

2 Czym tak właściwie jest responsive web design? Jest to podejście do projektowania stron internetowych w taki sposób aby można je było swobodnie przeglądać na szerokim spektrum urządzeń od niewielkich telefonów po duże monitory. Należy to osiągnąć przy jednej wersji strony dokonując jedynie niezbędnego przeskalowania pewnych elementów i reorganizacji układu. Głównym orędownikiem RWD jest firma Google.

3

4 Skąd wywodzi się potrzeba stosowania RWD? Internet wywodzi się z komputerów osobistych i nadal duża część stron projektowana jest głównie z myślą o nich. Pomimo znaczącego wzrostu wykorzystania urządzeń mobilnych do korzystania z sieci większość stron nadal nie jest zoptymalizowana do działania na nich. Co gorsza istnieje spora grupa stron których przeglądanie na urządzeniach mobilnych jest praktycznie niemożliwe bądź znacznie utrudnione. Złych przykładów nie trzeba daleko szukać.

5

6

7

8

9 Pomimo coraz szerszego wykorzystania idei Responsive Web Design szczególnie wśród polskich stron internetowych nadal pozostaje ona mało popularna. Jednak i u nas pojawia się coraz więcej stron wykorzystujących tę filozofię. Bardzo często są to mniej popularne portale.

10

11

12

13

14

15

16 Jak naprawić nieprzystosowane strony? Trzy już i tak niezależne sekcje wyświetlane jedna po drugiej zamiast obok siebie. Drobne modyfikacje górnego menu.

17 Znacząca zmiana w postaci rezygnacji z rozsówanego menu na rzecz prostrzego rozwiązania. Podobnie jak w poprzednim przykładzie reorganizacja układu strony.

18 Zwiększanie elastyczności dzięki zapytaniom o media CSS

19 Zapytania o media CSS Zapytania o media to proste filtry, które można zastosować do stylów CSS. Ułatwiają zmianę stylów na podstawie cech urządzenia, które renderuje treści, takich jak typ wyświetlacza, szerokość, wysokość, orientacja, a nawet rozdzielczość.

20 Zapytania o media CSS Zapytania o media umożliwiają tworzenie elastycznych interfejsów, w których wybrane style są stosowane na małych, dużych i wszystkich pośrednich ekranach. Składnia zapytań o media pozwala opracowywać reguły stosowane w zależności od cech urządzenia. Jest kilka różnych elementów, których może dotyczyć zapytanie, jednak przy elastycznym projektowaniu witryn najczęściej używa się min-width, max-width, min-height i max-height.

21 Orientacja urządzenia mobilnego Przystosowanie wyświetlanej strony do orientacji urządzenia mobilnego może także zostać wykonane poprzez zapytania o media CSS. W tym przypadku jest wykorzystywany atrybut orientation. orientation=portrait Reguły obowiązują w każdej przeglądarce, której wysokość jest równa szerokości lub większa. orientation=landscape Reguły obowiązują w każdej przeglądarce, której szerokość jest większa niż wysokość.

22

23 Korzystanie z jednostek względnych Podstawowa zaleta, która odróżnia projektowanie elastyczne od układów o stałej szerokości, to płynność i proporcjonalność. Stosowanie jednostek względnych miary pomaga uprościć układy i zapobiega przypadkowemu tworzeniu komponentów, które wychodzą poza widoczny obszar.

24 Dopasowanie treści do wielkości urządzenia Ważnym elementem, który trzeba wziąć pod uwagę podczas tworzenia stron internetowych jest to, że strona powinna dopasowywać się do szerokości ekranu w pikselach niezależnych od urządzenia. Dzięki temu jej zawartość może zostać ułożona odpowiednio do danego rozmiaru ekranu zarówno małego w telefonie komórkowym, jak i dużego w monitorze komputera.

25 Dopasowanie treści do wielkości urządzenia

26 Dostosowanie rozmiaru treści do widocznego obszaru Zarówno na komputerach, jak i urządzeniach mobilnych użytkownicy są przyzwyczajeni do przewijania stron w pionie, ale nie w poziomie. Zmuszanie użytkownika do przewijania w poziomie lub pomniejszania widoku, gdy chce zobaczyć pozostałą część strony, obniża wygodę obsługi.

27 Dostosowanie rozmiaru treści do widocznego obszaru

28 Czy warto?

29 Czy warto?

30 Zastosowanie w praktyce

31 Meta tag viewport <meta name="viewport" content="width=device-width, initial-scale=1.0">

32 Meta tag viewport

33 Meta tag viewport

34 Media queries body { width: 896px; padding: 72px 48px 84px; background: #fff; screen and (min-width: 768px) and (max-width: 991px) { body { width: 712px; padding: 48px 28px 60px; } }

35 Elastyczne skalowanie img { max-width: 100%; height: auto; width: auto; body { font-size: 14px; } p{ font-size: 1.2em; } } ul { font-size: 1em; }

36 JavaScript if ((screen.width>=1024) && (screen.height>=768)) { //instrukcje } else { //instrukcje } Modernizr

37 Strona responsywna, czy mobilna? <link rel="alternate" media="only screen and (max-width: 768px)" href=" />

38

39 strona responsywna - jeden adres url niezależnie od urządzenia, na którym czytamy - trudność w pogodzeniu wszystkich użytkowników - wyższy koszt stworzenia strona mobilna - 2 adresy url w spisie google - możliwość dostosowania treści do wersji mobilnej /łatwiejsze odchudzenie wersji mobilnej - niższy koszt stworzenia - jeden panel CMS do zarządzania treścią - konieczność aktualizacji treści w dwóch różnych panelach CMS - jeden kod śledzenia Google Analytics (łatwiejsza analiza danych) - konieczność wdrożenia odrębnego kodu śledzenia Google Analytics - problem z mierzeniem kampanii reklamowych, które kierują na obie wersje

40 Aplikacje natywne

41 Aplikacja natywna vs. strona internetowa lepsza wydajność - optymalizacja pod daną platformę - przetwarzanie wielowątkowe możliwość działania offline szersza funkcjonalność - łatwy dostęp do bluetooth, GPS itp. różne wersje aplikacji na różne systemy operacyjne - wyższe koszty aktualizacja tylko za potwierdzeniem klienta konieczność instalacji na urządzeniu

42 Jak googlebot widzi naszą stronę?

43 Dziękujemy za uwagę