Jelenlegi hely

2.13. Responsive webtervezés

Előzmények

A 2010-es év körül egy fontos webtervezési trend jelent meg (nem csak) minimalista weboldalak készítéséhez. A kulcsszó a grid layout volt, ami egy rácsszerkezetre felépített webdizájnt jelentett:

Grid dizájn

Grid dizájn

Ekkor még a fix oldalszélesség alkalmazása volt a középpontban. Egyik legismertebb megoldás a 960 Grid System volt.

Definíció

A reszponzív weboldal egy olyan megközelítéssel tervezett weboldal, amelynek a célja az, hogy optimális megjelenést biztosítson - könnyű olvashatóság, egyszerű navigáció a lehető legkevesebb átméretezéssel és görgetéssel - a legkülönfélébb eszközökön (az asztali számítógép monitorjától egészen a mobiltelefonokig).

Egy reszponzív elv alapján tervezett oldal tökéletesen igazodik a megjelenítő eszközhöz, mindezt rugalmas felépítéssel, flexibilis képekkel. A CSS3 media query (a @media szabály egy kiterjesztése) segít nekünk definiálni egy ilyen weboldal stíluslapját, követve az alábbiakat:

  • A rugalmas felosztású koncepció alapján a honlap minden elemének mérete százalékosan, relatívan van meghatározva.
  • A flexibilis képek úgyszintén a befoglaló elemhez képest, százalékosan határozódnak meg.
  • A media query alkalmazásával megvalósíthatjuk, hogy a weboldalon mindig olyan CSS szabályok lépjenek érvénybe, amelyek a megjelenítő eszközön optimálisak.

Forrás: Wikipédia

Mobilbarát weboldalkészítés alapjai néhány példán keresztül

Külön CSS állomány nagyobb képernyőkhöz:

<link rel="stylesheet" type="text/css" href="style.css" media="screen, handheld" />
<link rel="stylesheet" type="text/css" href="enhanced.css" media="screen  and (min-width: 40.5em)" />

Eltérő formázás:

.product-img {
  width: 50%;
  float: left;
}
@media screen and (max-width: 40.5em) {
  .product-img {
    width: auto;
    float: none;
  }
}

@media all and (min-width:800px){
  .sidebar ul{
    border:none;
    padding:0;
  }
  .sidebar ul li{
    display:block;
    padding:0;
    border:none;
  }
  h3.subscribe{
    display:block;
  }
  .sidebar ul.subscribe{
    position:static;
    top:auto;
    right:auto;
    border:inherit;
    color:inherit;
  }
  .sidebar ul.subscribe li{
    border:inherit;
  }
}

Egy CSS keretrendszer: Bootstrap

A keretrendszer egy előre megírt eszközkészlet, melyet rövid tanulási folyamat után már használhatunk is, hiszen meglévő tudásra alapoz, igaz egyedi módszerrel. A Bootstrap egy előre megírt, multifunkcionálisan alkalmazható eszközkészletet kínál, aminek a segítségével gyorsabban, átláthatóbban és hatékonyabban dolgozhatunk. A HTML struktúra és a CSS tulajdonságok mellett számos JavaScript bővítménnyel is rendelkezik, melyek igen rugalmasak!

Forrás: http://adamlaki.com/bootstrap-bemutato/