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:

 

Klasyfikacja rozmiarów urządzeń:

zapytania o media obsłygiwane w:

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:

@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:

 

Rozwiązania JavaScript:

Biblioteka Adapt.js:

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:

 

Biblioteka Respond.js

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

 

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

 

testowanie

Viewport Resizer

pozwala na:

 

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:

 

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

 

Responsive Images

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

 

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:

 

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.

 

 .icon{
 background-image: url(icon.svg);
 }
 .no-svg .icon{
 background-image: url(icon.png);
 }

 

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

szybkie przygotowanie układu responsywnego.

 

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

 

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

 

responsywne menu boczne.

 

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

 

tworzenie menu rozwijanego.

 

obsługa obrazków svg

 

tworzenie kodu nie zależne od przedrostków

 

responsywne, wyskakujące okienka.

 

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.

 

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

#responsive

Agnieszka Trefler

Agnieszka Trefler (Ruda) - freelancer, web developer, specjalistka od WordPressa z Wrocławia. Z pasją budowania stron, blogowania i fotografowania. Twórca Inspiracji fotograficznych.