Webové komponenty Rozloženie stránky

Obsah stránky umiestnite do stĺpcového dizajnu (ang. Grid). Návrh začnite vytvárať od najmenších veľkostí obrazovky a až potom ho prispôsobte väčším rozmerom.

Obsah:

Šírka strany

Predvolená maximálna šírka stránky je 1020 px (pixelov). Ak si to obsah nevyhnutne vyžaduje, je prijateľná aj širšia stránka. Myslite však na to, že používatelia s bežnými či menšími obrazovkami budú musieť obsah horizontálne posúvať.

Veľkosť obrazovky

Pri navrhovaní rozloženia obsahu stránky začnite s návrhom pre malé obrazovky (rozmiestnenie obsahu do jedného stĺpca). Následne optimalizujte stránku pre rôzne veľkosti obrazoviek. Obsah stránky umiestnite do predvoleného stĺpcového dizajnu. Aby ste vytvorili vizuálnu hierarchiu obsahu stránky, využite prázdny priestor medzi elementami.

Medzery a vonkajšie okraje

15px príklad vonkajších okrajov
30px príklad vonkajších okrajov

Šírka textových blokov

Pri vytváraní stránky pamätajte na to, že dlhé riadky textu znižujú jeho čitateľnosť, čiže všetky riadky s textom by nemali mať viac ako 70 až 80 znakov. Pre zamedzenie dlhých riadkov textu by mal obsah v stĺpci dosahovať maximálne dve tretiny šírky strany

Stĺpcový dizajn

Pre rozloženie obsahu na stránke použite preddefinovaný stĺpcový dizajn (ang. Grid).

Základné pomery stĺpcov sú:

Celá šírka (1 stĺpcový dizajn)

Obsah


  
    <div class="grid-row">

  <div class="column-full">
    <p>Obsah</p>
  </div>

</div>

  

Polovice (2 stĺpcový dizajn)

Obsah

Obsah


  
    <div class="grid-row">

  <div class="column-one-half">
    <p>Obsah</p>
  </div>

  <div class="column-one-half">
    <p>Obsah</p>
  </div>

</div>

  

Tretiny (3 stĺpcový dizajn)

Obsah

Obsah

Obsah


  
    <div class="grid-row">

  <div class="column-one-third">
    <p>Obsah</p>
  </div>

  <div class="column-one-third">
    <p>Obsah</p>
  </div>

  <div class="column-one-third">
    <p>Obsah</p>
  </div>

</div>

  

Dve tretiny / Jedna tretina

Obsah

Obsah


  
    <div class="grid-row">

  <div class="column-two-thirds">
    <p>Obsah</p>
  </div>

  <div class="column-one-third">
    <p>Obsah</p>
  </div>

</div>

  

Jedna tretina / Dve tretiny

Obsah

Obsah


  
    <div class="grid-row">

  <div class="column-one-third">
    <p>Obsah</p>
  </div>

  <div class="column-two-thirds">
    <p>Obsah</p>
  </div>

</div>

  

Štvrtiny (4 stĺpcový dizajn)

Obsah

Obsah

Obsah

Obsah


  
    <div class="grid-row">

  <div class="column-one-quarter">
    <p>Obsah</p>
  </div>

  <div class="column-one-quarter">
    <p>Obsah</p>
  </div>

  <div class="column-one-quarter">
    <p>Obsah</p>
  </div>

  <div class="column-one-quarter">
    <p>Obsah</p>
  </div>

</div>

  

Príklady