Responzívny dizajn  
(Responsive design)

 
Po tom čo spoločnosť Google oznámila zmenu vo vyhľadávacom algoritme v prospech responzívnych webov, sa tento prístup stáva dôležitou súčasťou SEO (optimalizácia pre vyhľadávače). V skratke ide o to, aby sa váš web prispôsobil zariadeniu, z ktorého web prezeráte (PC, mobil, tablet). Iný vzhľad si môžete dovoliť vo väčšom rozlíšení koncového zariadenia a iný v menšom rozlíšení. Pričom dominantným zariadením súčastnosti je mobil (stratégia mobile first), nie počítač, ani notebook. Vaša stránka by teda mala byť prispôsobená a optimalizovaná na všetky tieto zariadenia.

Responzívny dizajn
 
Ak teda máte záujem o popredné priečky vo vyhľadávači Google, bez responzívneho dizajnu to už jednoducho nepôjde. Väčšina stránok na Slovensku tomu ešte nie je prispôsobená, ale trend je jasný.
 
V našej spoločnosti sme zadefinovali proces hospodárneho prechodu vášho webu do responzívneho dizajnu nasledovným spôsobom.
 
Zistite viac o čase a cene prechodu na responzívny dizajn na vašom webe. Kontaktujte nás na tel. čísle 0903-113-815, alebo emailom na adrese run@run.sk
 
Prevedieme váš web do responzívneho dizajnu !!!

 

Pravidlá na budovanie responzívneho dizajnu

1. do hlavičky treba pridať meta tag (dôležité je initial-scale=1.0):
<meta name="viewport" content="width=device-width, initial-scale=1.0">


2. základný dizajn stránky (pre veľké obrazovky) v app/css/less/main.less urobiť elastický, t.j. šírky nie sú zadané v pixeloch, ale v percentách. Takže v css napríklad namiesto:

        body {
            width: 1000px;
        }
        half-block {
            width: 500px;
        }


    bude:

 

        body {
            width: 1000px;
        }
        half-block {
            width: 50%;
        }

    Tu väčšinou vzniká problém s centrovaním, ktorý je možné podľa situácie vyriešiť nasledovnými spôsobmi:
  • v jednoduchých prípadoch: "text-align:center;"
  • v prípade bloku ktorého šírku poznáme: "margin:0 auto;"
  • v prípade bloku ktorého šírku vopred nepoznáme: "display:table;margin:0 auto;word-wrap:initial"
  • v prípade bloku ktorý potrebuje absolútnu pozíciu:

    absolute-center-block {
                    position: absolute;
                    left: 50%;
                    ...
                }
                center-fix {
                    margin-left: -50%;
                }


                <div class="absolute-center-block">
                    <div class="center-fix">
                        ...
                    </div>
                </div>
 
 

Pri budovaní základného dizajnu stránky je možné použiť triedy responzívneho gridu, ktoré sú popísané nižšie.



3. HTML horného menu treba robiť tak, aby sa jeho položky dali na malých obrazovkách zbaliť pod seba a hneď už musí byť prítomný aj toggle button na jeho zobrazenie na malých zariadeniach. Tento button je v základnom dizajne skrytý použitím "display:none;". Na vytvorenie buttonu je možné použiť Html::toggleButton().


4. Takto pripravený základný dizajn stránky doplníme v app/css/less/responsive.less o štýly pre menšie rozmery obrazoviek (@import "responsive.less"; je na konci main.less). Pokiaľ je základný dizajn urobený správne elasticky, tak responzivita nevyžaduje veľa štýlovania . Rozmer zariadenia je možné nasimulovať buď jednoduchou zmenou šírky okna prehliadača (Firefox sa dá zúžiť viac ako Chrome) alebo v Chrome v Developer tools (F12) a následne CTRL+SHIFT+M (konzola > simulácia zariadenia) a následne F5 (refresh). Pri vytváraní media queries postupujeme nasledovne:

     4.1. Prvú media query vytvoríme pre šírku obrazovky zhodnú so šírkou stredového bloku základného dizajnu + padding-left a padding-right 10px, tak aby obsah stránky nebol natlačený na kraj obrazovky. T.j. ak má základný dizajn nasledovné css pre stredový blok:

.center {
                width: 1000px;
                margin: 0 auto;
            }

        Tak prvá media query bude:

            @media (max-width: 1020px) {
                .center {
                    width: auto;
                    padding-left: 10px;
                    padding-right: 10px;       
                }
            }
 

Ak je hlavička a/alebo pätička na celú šírku stránky, tak ich štýly upravíme v tejto media query, tak aby sa to zachovalo (t.j. ten padding im vynulujeme).


     4.2. Ostatné media queries budujeme postupným zužovaním okna browsera. Pri ich budovaní máme na zreteli, že google stránku nepovažuje za responzívnu:
  • ak je jej obsah širší ako obrazovka zariadenia
  • ak sú linky príliš blízko pri sebe
  • ak je text príliš malý a nečitateľný (neodporúčam menšie ako 12-13px - ale to záleží aj od prípadu)
  • prípadné ďalšie nedostatky je možné preveriť priamo na https://www.google.com/webmasters/tools/mobile-friendly/

     4.3. V niektorej z media queries skryjeme horné menu a zobrazíme jeho toggle button.


5. Na budovanie responzívneho html, či už programátorsky alebo v CKEditore (cez grid plugin) je možné použiť responzívny grid (app/css/less/grid.less,  @import "grid.less"; je na začiatku responsive.less):

<div class="grid-row grid-break-560">
  <div class="grid-col grid-col-20-100 grid-center grid-hide-400">Stlpec 1</div>
  <div class="grid-col grid-col-1-3 grid-break-780">Stlpec 2</div>
  <div class="grid-col grid-col-2-7 grid-col-offset-10-100">Stlpec 3</div>
</div>

V uvedenom príklade sa jedná o jeden riadok responzívneho gridu. Všetky jeho stĺpce sa zalomia pod seba pri šírke obrazovky 560px (.grid-break-560).

        Riadok obsahuje 3 stĺpce:
  • Stĺpec 1
    má šírku 20% = 20/100 (grid-col-20-100) zo šírky bloku, v ktorom sa nachádza riadok. Po jeho zalomení (t.j. pri 560px) sa jeho blok má vycentrovať (grid-center). Pri šírke obrazovky 400px sa má skryť (grid-hide-400).
  • Stĺpec 2
    má šírku 1/3 (grid-col-1-3). Pri šírke obrazovky 780px sa má zalomiť (t.j. skôr ako ostatné bloky riadku, ktoré sa zalamujú podľa nastavenia na úrovni riadku). Ak má stĺpec nastavené osobitné zalomenie, tak to má zmysel len v prípade, že šírka obrazovky pre jeho zalomenie je väčšia ako šírka nastavená na úrovni riadku. Prípadne riadok nemusí mať nastavenú žiadnu šírku zalomenia stĺpcov a každý stĺpec si ju nastaví sám.
  • Stĺpec 3
    má šírku 2/7 (grid-col-2-7) a súčasne je odsadený od predošlého bloku o 10% (grid-col-offset-10-100)

Triedy grid-col-?-? na určenie šírky pokrývajú 100, 3, 5, 6, 7, 8 a 9-tiny. Triedy grid-break-? pre zalomenie stĺpcov pod seba pri určitej šírke obrazovky pokrývajú šírky obrazoviek od 300px po 1000px s krokom 20px (300px, 320px, 340px, ...). Triedy grid-hide-? na skrytie elementov majú ten istý rozsah ako grid-break-?. Triedy a grid-show-? na zobrazenie elementov sa generujú len v prípade potreby na danom projekte. V prípade potreby je možné zmeniť uvedené rozsahy. Stačí upraviť príslušnú sekciu v responsive.less. Okrem triedy grid-center na vycentrovanie celého bloku po zalomení stĺpca, je k dispozícii aj trieda grid-center-text na vycentrovanie textu daného bloku.

Na danom projekte je možné upraviť grid podľa požiadaviek dizajnu nasledovne:
  • upravíme parametre generovania gridu v grid.less
  • rovnako tieto parametre upravíme aj pre CKEditor v app/vendors/ckeditor/config.js. Jedná sa o nasledovné parametre: config.grid_minScreenWidth, config.grid_maxScreenWidth, config.grid_ScreenWidthStep, config.grid_initialMaxColumnsNumber, config.grid_widthFractions;

6. Správnosť nasadenia responzívneho dizajnu overiť na https://www.google.com/webmasters/tools/mobile-friendly/


7. Ďalšie informácie priamo od googlu sa nachádzajú tu: https://developers.google.com/webmasters/mobile-sites/mobile-seo/configurations/responsive-design


8. Pozor na nasledovné:
CKEditor pri kopírovaní pridáva inline štýly ktoré rozbíjajú responzivitu (style="width:500px;font-size:15px"). Aby sa to nedialo, je potrebné kopírovať v režime Zdrojový kód (čo samozrejme nie je pre klientov pohodlné).

Mojmír Ďurík