responsive

zasady responsywności – basic responsive design principles:

  1. fluid grids and layouts – łatwe dostosowywanie się do każdego okna urządzenia – stosowanie % zamiast px – layout-related lengths
    1. float base layout
    2. flexbox
    3. css grid (dwuwymiarowy grid)
  2. flexible/responsive images – optymalizacja wielkości obrazków w zależności od szerokości okna
  3. media queries – użycie breakpointów, różne style dla różnych szerokości okna

 

metody implementowania funkcji adaptacyjnych:

  • wtyczki jQuery do zdefiniowania interakcji dotykowych
  • przekształcanie tabel na responsywne
  • wizualna modyfikacja elementów formularzy dla komputerów stacjonarnych
  • funkcja geolokacji dla prezentowania użytkownikowi lepiej dopasowanych treści
  • modyfikacja hierarchi informacji z ustalonymi priorytetami treści

 

Klasyfikacja rozmiarów urządzeń:

  • 4″ – 5″ – smartfony
  • 5″ – 6″ – bybrydy telefony i tabletu
  • 7″ – 8″ – małe tablety
  • 9″ – 10″ – tablety
  • 11″ – 17″ – laptopy
  • 20″ – 30″ – monitory stacjonarne

zapytania o media obsłygiwane w:

  • Firefox 3.6
  • Safari 4
  • Chrome 4
  • Opera 9.5
  • iOS Safari 3.2
  • Opera Mobile 10
  • Android 2.1
  • Internet Explorer 9

Starsze przeglądarki – rozwiązanie Respond – wprowadza obsługę zapytań o media.

 

Respond pozwala na stosowanie zapytań o media.

<link href="css/style.css" rel="stylesheet" type="text/css" media="screen and (max-width:480px)" />

<script src="mypath/js/respond.min.js"></script>
</body>

Funkcje wykorzystywane w zapytaniu o media:

  • szerokość: min-width, max-width
  • wysokość: min-height, max-height
  • orientacja – pionowa czy pozioma
  • rozdzielczość: min-resolution:300dpi
@media only screen and (min-width:1025px){
  monitory stacjonarne
}

@media only screen and (min-width:481px) and (max-width:1024px){
  tablety
}

@media only screen and (max-width:480px){
  smartfony
}

wykaz rozwiązań: mediaqueri.es

 

Tworzenie responsywnych stron poprzez:

  • stosowanie wielkości w procentach zamiast px
  • systemy responsywnych siatek z wyborem kolumn, kod utrzymuje elementy w kolumnach za pomocą wymiarów względnych

 

Rozwiązania JavaScript:

  • Adapt.js
  • Respond.js

Biblioteka Adapt.js:

  • odczyt wymiarów okna – biblioteka aktywuje te style css które są potrzebne
  • niewielkie rozmiary pliku biblioteki
  • obsługuje starsze przeglądarki IE8
  • opóźnienia podczas wybierania właściwych styli poprzez wykonywanie analizy wielkości okna na żądanie
  • wydłużone początkowe ładowanie strony poprzez konieczność zamieszczenia skryptu na początku kody (znacznik head)

Zastosowanie:

<script type="text/javascript">
 var ADAPT_CONFIG = {
 path: 'mypath/style/',
 dynamic: true,
 range: [
 '0px to 480px = mobile.min.css',
 '481px to 760px = portrait.min.css',
 '761px to 1024px = landscape.min.css',
 '1025px to 2500px = screen.min.css'
 ]
 };
</script>
<script src="mypath/js/adapt.min.js" type="text/javascript"><script>

gdzie określamy:

  • domyślną ścieżkę do pliku css
  • częstotliwość dynamicznej adaptacji (jednorazowa, przy każdej zmianie wymiarów okna)
  • zakres szerokości i odpowiednie mu pliki

 

Biblioteka Respond.js

  • wykorzystuje zapytania o media użyte w kodzie
  • niewielkie rozmiary pliku biblioteki
  • konieczność sprawdzenia czy przeglądarka potrzebuje tego skryptu, powinien być uruchamiany tylko w razie potrzeby
  • dostępne dwa API ułatwiające znalezienie błędów
  • wybór i uruchomienie właściwego pliku css – opóźnienie
<script src="mypath/js/respond.min.js" type="text/javascript"></script>

 

Przeliczanie px na %

za pomocą responsv.com/flexible-math/

 

Responsywne systemy siatek – grid system

narzędzie projektowe, zbiór plików css ułatwiających szybkie projektowanie stron.

System siatek 12-16

gutter (rynna) – oddziela kolumny od siebie

 

Fluid Baseline Grid

kod biblioteki – fluidbaselinegrid.com

trzy kolumnowy system:

  • 1 kolumna – smartfony – treść zawarta w 1 kolumnie – klasa g1
  • 2 kolumny tablet – treść zawarta w 2 kolumnach – klasa g2
  • 3 kolumny – monitor stacjonarny – treść w 3 kolumnach – klasa g3

 

obsługa wielu funkcji w IE6/7/8 dzięki bibliotece Respond.js (zapytania o media) i html5shim (elementy HTML5).

 

1140 Grid

kod biblioteki – cssgrid.net

Strona (szerokość bazowa 1280px) dzielona na 12 kolumn, które można łączyć ze sobą.

<div class="row">
 <div class="onecol">
 ...
 </div>
 <div class="twocol">
 ...
 </div>
 <div class="threecol">
 ...
 </div>
 <div class="sixcol last">
 ...
 </div> 
</div>

<div class="row">
 <div class="fourcol">
 ...
 </div>
 <div class="fourcol">
 ...
 </div>
 <div class="fourcol last">
 ...
 </div> 
</div>

Class row – definiuje właściwość max-width=1140px;

 

Foundation4

kod biblioteki – foundation.zurb.com

pozwala na wybór opcji i komponentów do pobrania z tych które będą potrzebne

 

możliwość używania innego podziału kolumn dla małych i dużych ekranów poprzez klasy kolumn small i large.

możliwość zagnieżdżania kolumn w sobie z uwzględnieniem że zawsze pracujemy na łącznej liczbie 12.

<div class="row">
 <div class="small-6 large-5 columns">...</div>
 <div class="small-6 large-7 columns">
 <div class="row">
 <div class="small-4 columns">...</div>
 <div class="small-8 columns">...</div>
 </div>
 </div> 
</div>

Przesunięcie – za pomocą nadanie klasy offset

Wyśrodkowanie – klasa centered

Przeniesienie kolumn – klasa push – do przesuwanej do przodu kolumny, klasa pull do kolumny przesuwanej do tyłu.

<div class="row">
 <div class="small-3 columns">...</div>
 <div class="small-3 small-offset-3 columns">...</div>
 
 <div class="small-6 small-centered columns">...</div>
 
 <div class="small-3 push-9 columns">...</div>
 <div class="small-9 pull-3 columns">ta będzie jako pierwsza widoczna</div> 
</div>

Szablon siatek Photoshop

wtyczka Guideguide – wyświetlanie kolumn podczas projektowania.

 

responsive menu

  • top navigation
  • footer anchor
  • toggle menu
  • select menu – plugin tinynav.js
  • footer only
  • multi toggle – plugin tinynav.js
  • toggle and slide – przełączanie i przesuwanie – plugin tinynav.js
  • off canvas – menu rozwijane z boku treści – plugin jpanelmenu.js

 

testowanie

Viewport Resizer

pozwala na:

  • zamieszczenie w przeglądarce okna symulującego wielkości najpopularniejszych urządzeń mobilnych
  • definiowanie własnych rozmiarów okna
  • podgląd danych urządzenia (zdarzenia onMouseOver)

 

Surveyor

pozwala na wprowadzenie adresu url strony oraz podanie szerokości okien na jakich chcesz przetestować stronę. Wybrane widoki wyświetla obok siebie dla łatwiejszego zobrazowania różnic.

 

ScreenFly

pozwala na wprowadzenie adresu url strony. Wprowadzona strona jest przedstawiona na wybranych urządzeniach. Narzędzie pozwala na zapisanie linku (poprzez opcję shere) który wyświetla prezentację strony na wybranym urządzeniu.

 

Emulator Opera Mobile

udostępniany przez firmę Opera Software program pozwalający na testowanie strony.

 

Narzędzia ujednolicające działanie funkcji we wszystkich przeglądarkach – wypełniacze – polyfill.

Informacja o technikach i funkcjach dostępnych w przeglądarkach i urządzeniach:

  • CanIUse.com
  • MobileHTML5.org – określa zgodność przeglądarek z językiem HTML5. Funkcje testowane są na rzeczywistych urządzeniach.
  • QuirksMode.org – pozwala sprawdzić czy dany selektor, pseudoklasa są obsługiwane przez daną przeglądarkę.
  • Test zgodności z urządzeniami mobilnymi – Mobile Friendly Websites

 

Rozwiązania zastępcze – fallback – przygotowanie alternatyw dla użytych technologii czy rozwiązań na wypadek nie obsługiwania ich przez przeglądarkę.

  • polyfills – wypełniacze – kod emulujący daną funkcję w przeglądarce, która jej nie obsługuje
  • webshims – wstawki – definiują rozwiązania zastępcze, przez udostępnienie własnego API

 

Responsive Images

to serve the right image to the right screen size and device

  • resolution switching – from large screen to small screen –  decrease image resolution on smaller screen
  • density switching – from @2x screen (high-res) to @1x screen (low-res) – half of the image resolution an @1x screen
  • art direction – from large screen to small screen – different image on smaller screen

 

in HTML:

<img srcset="images/logo-1x.png 1x, images/logo-2x.png 2x" alt="">

<picture class="footer__logo">
        <source srcset="images/logo-small-1x.png 1x, images/logo-small-2x.png 2x" media="(max-width: 600px)">
        <img srcset="images/logo-1x.png 1x, images/logo-2x.png 2x" alt="" >
</picture>

<img srcset="images/foto.jpg 300w, images/foto-large.jpg 1000w"
     sizes="(max-width: 900px) 20vw, (max-width: 600px) 30vw, 300px"
     src="images/foto-large.jpg"
     alt=""
     class="">

in CSS/SASS:

  @media (min-resolution: 192dpi) and (min-width: 600px),
         (-webkit-min-device-pixel-ratio: 2) and (min-width: 600px),
         (min-width: 2000px)
    background-image: url('../images/hero.jpg')

 

CSS Browser Selector +

Wykrywa dostępne funkcje na etapie ładowania i analizowania kodu strony dzięki klasie umieszczonej w znaczniku <hrml>.

Dzięki niej uzyskujemy informacje:

  • rodzaj, wersja przeglądarki
  • mechanizm rysowania stron
  • platforma, system operacyjny
  • urządzenie
  • max i min szerokość ekranu
  • ułożenia okna przeglądarki
  • język przeglądarki

 

Modernizr

wykrywa funkcje HTML5, CSS3 w przeglądarce użytkownika.

Dodaje klasy do znacznika <html>.

Tworzy obiekt JavaScript przechowujący wyniki.

Pozwala na pobranie biblioteki w okrojonych wersjach tak by jak najdokładniej dostosować do naszych potrzeb.

 

YepNope

pozwala na asynchroniczne ładowanie zewnętrznych zasobów JavaScript i CSS.

 

html5shiv

obsługa elementów html5 w starszych wersjach IE (6-8/9).

 

Polyfils – wypełniacze

sprawdzenie istniejących polyfills.

 

 

SVG

problem z poprawnym wyświetlaniem na starszych przeglądarkach rozwiązuje technika Alexeya Tena.

 

  • wykorzystanie Modernizr  do zamieszczenia zastępczego tła:
 .icon{
 background-image: url(icon.svg);
 }
 .no-svg .icon{
 background-image: url(icon.png);
 }

 

  • obrazek w znaczniku svg:
<svg width="50px" height="50px">
 <image xlink:href="icon.svg" src="icon.png" width="50px" height="50px" />
</svg>

 

obrazek w znaczniku img

<img src="icon.svg" onerror="this.src=icon.png">

<script type="text/javascript">
 if (!Modernizr.svg){
 $('img[src$=svg]').echo(function(index, item){
 imagePath = $(item).attr('src');
 $(item).attr('src', imagePath.slice(0,-3)+'png');
 });
 }
</script>

Responsive plugin:

  • Columns

szybkie przygotowanie układu responsywnego.

 

  • Equalize

dopasowuje wymiary (wysokość, szerokość) elementów.

 

  • Packery

algorytm wypełniający puste przestrzenie w widoku kafelkowym. Plugin wymaga płatności w wykorzystaniach komercyjnych.

 

  • Sidr

responsywne menu boczne.

 

  • EasyResponsiveTabstoAccordion

przekształca pionowe/poziome karty w układ rozwijanej harmonijki Accordion

 

  • FlaxNav

tworzenie menu rozwijanego.

 

  • SVGeezy

obsługa obrazków svg

 

  • Prefix free

tworzenie kodu nie zależne od przedrostków

 

  • Magnific Popup

responsywne, wyskakujące okienka.

 

  • Riloadr

dostosowanie obrazków kontekstowych w zależności od potrzeb układu responsywnego. Wyświetla obrazki w różnych wymiarach w zależności od szerokości ekranu.

 

  • Calendario

kalendarz dostosowujący się do wielkości ekranu.

#responsive