Responsive Web

Odzivno spletno oblikovanje (angl. Responsive Web Design) je tehnika izdelave spletnih strani, ki se ustrezno prikažejo v mobilnih napravah, tablicah in namiznih računalnikih.

Odzivno spletno oblikovanje (angl. Responsive Web Design)

Še ne dologo nazaj so bile spletne strani postavljene samo za tablice ali pa samo za namizne računalnike. To je delovalo zadovoljivo, dokler se za ogled spletnih strani niso začeli uporabljati pametni mobilni telefoni in manjše tablice. Potrebno je bilo poiskati nove rešitve in leta 2010 so se pojavile prve izvedbe odzivnega spletnega oblikovanja (Ethan Marcotte's, Responsive Web Design).

Kaj je odzivno spletno oblikovanje?

Odzivno spletno oblikovanje omogoča spremenjen prikaz spletnih strani glede na različno ločljivost zaslona. Pri tem oblikovanju uporablajmo naslednje tehnike:

Fluid Grids

Tradicionalno so bile spletne strani definirane v pikslih. Ideja je bila povzeta iz tiskarstva (revije, časopisi), kjer je bila velikost vedno enako velika. Ta način pa spletnim stranem ne ustreza najbolj, saj se mora spletna stran prikazati na različno velikih zaslonih kot npr.: ure, mobilni telefoni, tablice, namizni računalniki, tv zasloni, projekcijska platna. Zato spletne strani gradimo z relativnimi enotami.

Če želimo spletno stran, ki je zgrajena v pikslih pretvoriti v stran v odstotkih, lahko uporabimo preprosto matematično enačbo:

tarča / kontekst = rezultat

Razložimo uporabo enačbe na primeru. Recimo, da imamo spletno stran, ki je postavljena tako, da je njena širina 960 pikslov, stran pa si ogledujemo na zaslonu z ločljivostjo 1920 pikslov. V tem primeru je širina okna brskalnika kontekst, širina strani pa tarča. Če želimo, da bo stran izgledala povsem enako, tarčo delimo s kontekstom, da dobimo odstotke:

960px / 1920px = 50%

Oglejmo si še primer, kjer bomo pretvorili elemente strani. Recimo, da imamo stran, ki je postavljena tako, da ima 300 pikslov širok stranski stolpec na levi in 640 pikslov širok stolpec glavne vsebine na desni, vmes pa je 20 pikslov obrobe:

Z uporabo enačbe dobimo odstotkovne vrednosti takole:

• sidebar: 300px / 960px = 31,25%
• main content: 640px / 960px = 66,66667%
• margin: 20px / 960px = 2,08334%

Sedaj odstokovne vrednosti lahko uporabimo v CSS za postavitev širine stranskega stolpca, obrobe in glavene vsebine:

<div class="wrapper">
   <div class="sidebar"><h1>Sidebar</h1></div>
   <div class="content"><h1>Content</h1></div>
</div>

/**********************************
  Koda Responsive web design
***********************************/
.wrapper {
   width: 50%;
   margin: 0 auto;
}
.sidebar {
   width: 31.25%;
   margin-right: 2.08334%;
}
.content {
   width: 66.66667%;
}

/**********************************
  Koda oblike strani
***********************************/
.sidebar, .content {
   background: #888;
   height: 250px;
   float: left;
   border-radius: 4px;
   color: #FFF;
   font-family: Helvetica;
   text-align: center;
}
h1 {
   padding: 100px 0;
   font-size: 1em;
}

Prikaz primera v novem oknu oz. zavihku.

Fluid Images

Pri spreminjanju ločljivosti strani, se mora spreminjati tudi velikost slik. Osnovna ideja je, da se slike prilagajajo mreži strani, kar storimo z naslednjo CSS kodo:

Ta brskalniku pove, da se slika ne razteguje ali krči, ampak se glede na razpoložljiv prostor njena velikost sproti vsakič preračuna tako, da slika ostane v razmerju.

Več o slikah, ki se velikostno prilagajajo si lahko ogledate na strani Responsive Images Community Group ali pa na ZURB Interchange.

Media Queries

Medijski tipi so namenjeni za prikaz vsebine na različnih medijih. V CSS s pravilom @media oznanimo, da bomo našteli lastnosti, ki se uporabijo samo za določen medij. To dosežemo tako, da navedemo določeno širino, pri kateri priredimo druge slogovne lastnosti:

@media screen and (max-width: 480px) {
     /* ...oblikovne lastnosti za mobilni prikaz... */ 
  }

Pri odzivnem spletnem oblikovanju je najbolje najprej izdelati obliko za mobilne naprave, za tem pa obliko prilagajamo večjim napravam (tablicam, nato namiznim računalnikom, itd.). Slog CSS bi v tem primeru postavili nekako takole:

/* ... mobilni slog ... */ 
  @media screen and (min-width: 600px) { 
/* ... slog za tablice ... */ 
  } 
  @media screen and (min-width: 900px) { 
/* ... slog za namizne računalnike ... */ 
  }

Seveda lahko določimo še več medijskih tipov, ki bodo določili sloge za posamezne naprave. Velikosti posameznih naprav so podane na strani Scren Seiz.es.

Za primer bomo razširili zgornji zgled, v katerem smo stran postavili v odstotkih tako, da se bo stran prilagodila tudi mobilnim napravam:

<div class="wrapper">
   <div class="sidebar"><h1>Sidebar</h1></div>
   <div class="content"><h1>Content</h1></div>
</div>

/**********************************
 Koda Responsive web design
***********************************/

/* ...slog mobilne strani... */

@media screen and (min-width: 600px) {
   /* ...slog večje spletne strani... */
   .wrapper {
      width: 50%;
      margin: 0 auto;
   }
   .sidebar, .content {
      float: left;
   }
   .sidebar {
      width: 31.25%;
      margin-right: 2.08334%;
   }
   .content {
      width: 66.66667%;
   } 
}

/**********************************
  Koda oblike strani
***********************************/
.sidebar, .content {
   background: #888;
   height: 250px;
   border-radius: 4px;
   color: #FFF;
   font-family: Helvetica;
   text-align: center;
}
h1 {
   padding: 100px 0;
   font-size: 1em;
}

Prikaz primera v novem oknu oz. zavihku.