Čím sú mobilné zariadenia obľúbenejšie, tým nepohodlnejšie je posúvanie na väčšine stránok. Preto od roku 2012 webmasteri používajú riešenie, vďaka ktorému je prezeranie zdrojov na obrazovkách s nízkym rozlíšením pohodlnejšie – adaptívne rozloženie.
Moderný trend
V súčasnosti používa mobilné telefóny asi päť miliárd ľudí na Zemi, pričom tretina z nich má smartfóny. Mobilná návštevnosť je preto pre majiteľov webových stránok čoraz dôležitejšia. Je pravdepodobné, že takýto zdroj návštevníkov bude časom len rásť. Vyhľadávače na tento trend rýchlo zareagovali. Veľké korporácie „Yandex“a Google urobili významné zmeny vo svojich algoritmoch na hodnotenie stránok vo výsledkoch vyhľadávania, pričom zohľadnili dostupnosť adaptívneho rozloženia a dizajnu. Jednoducho povedané, webové zdroje optimalizované pre mobilné telefóny, smartfóny a tablety budú mať oproti svojim konkurentom určitú výhodu.
Definícia responzívneho rozloženia
Adaptívne rozloženie je metóda vytvárania rámca webovej stránky,automatická zmena umiestnenia blokov v súlade s rozlíšením obrazovky zariadenia, na ktorom sa zobrazuje. To znamená, že s týmto prístupom sa vytvárajú samostatné štýly pre rôzne rozlíšenia. Tento efekt sa dosiahne písaním špeciálnych CSS súborov.
Predtým sa problém riešil trochu inak. Vývojári museli urobiť oveľa viac „pohybov tela“, vytvoriť rozloženie a dizajn hlavnej verzie stránky a urobiť to isté pre mobilnú verziu. V závislosti od obrazovky zariadenia, na ktorom bol internetový projekt s dostupnou mobilnou platformou zobrazený, bola spustená príslušná verzia stránky.
Tento prístup sa v mnohých smeroch neospravedlňoval a väčšina správcov webu sa nikdy nepustila do vytvárania mobilnej verzie. Teraz bolo toto poradie nahradené adaptívnym rozložením. Vytvorením kostry stránky pomocou tejto technológie sústreďuje webmaster všetko svoje úsilie na vytvorenie jednej verzie projektu a návštevníci si ju môžu prezerať s rovnakým komfortom ako na veľkej obrazovke počítača, tak aj na mobilnom telefóne, smartfóne či tablete.
Výhody responzívneho rozloženia
Aké sú výhody adaptívneho rozloženia webových stránok? Už skôr bolo poznamenané, že výhodou je správne zobrazenie všetkých blokov stránok na akomkoľvek zariadení. Taktiež pozitívom tohto prístupu pri tvorbe šablóny je rýchlosť implementácie zmien. Čo to znamená?
Ak mala stránka dve platformy, zmeny v rozložení museli byť vykonanénajprv implementujte v pracovnej verzii a potom v mobilnej verzii. Ak by boli zmeny v kóde dosť významné, potom by proces vykonávania takýchto zmien mohol trvať dlho. S adaptívnym rozložením sa práca na webe vykonáva v jednom súbore. Zmeny v rozložení webovej stránky sa prejavia rovnako skoro v produkčnej aj mobilnej verzii.
Nevýhodou tohto prístupu niektorí webmasteri označujú zložitosť jeho implementácie. S príchodom CSS 3 sa však vytvorenie šablóny responzívneho rozloženia stalo celkom jednoduchým. Dokonca aj neskúsení správcovia webu môžu prispôsobiť svoju stránku pre mobilné zariadenia.
Princípy a funkcie adaptívneho rozloženia
Aké princípy sú základom metódy responzívneho rozloženia vo webdizajne?
- Použitie typu tekutého rozloženia.
- „Gumové“obrázky.
- Používanie mediálnych dopytov (media-queries).
- Potreba myslieť na mobilné zariadenia od úplného začiatku rozloženia.
Z týchto základných princípov tejto metódy vytvárania šablóny vyplývajú nasledujúce vlastnosti adaptívneho rozloženia:
1. Návrh a vytvorenie dizajnu webovej stránky s ohľadom na prácu v celom rozsahu rozlíšení: od mobilných až po širokouhlé displeje.
2. Rozloženie s kaskádovými štýlmi pomocou technológie dopytovania médií zavedenej v CSS 3.
3. Programovanie na strane klienta aj servera na odosielanie obrázkov na mobilné zariadenia s menšou veľkosťou a rozlíšením.
Dôležitým aspektom, berúc do úvahy, aké adaptívne rozloženie je vytvorené, jerozlišovacia matica populárnych elektronických zariadení. Vďaka tomuto prístupu k vývoju dizajnu bude prehliadanie webu na akejkoľvek obrazovke veľmi pohodlné. Ale ako viete, ktoré z nich zahrnúť do štýlov?
Kde začať s responzívnym rozložením?
Väčšina webových stránok je vytvorená tak, že na obrazovkách smartfónov a tabletov sa zobrazujú posuvné lišty, ktoré nie sú také pohodlné na surfovanie, a dizajn a rozloženie mnohých internetových projektov jednoducho „pláva“. Webové stránky vytvorené na výučbu webdizajnu obsahujú rôzne rozlíšenia obrazoviek rôznych zariadení, pod ktorými sa oplatí rozvrhnúť stránky vášho webu.
Adaptívne usporiadanie, ktorého príklady možno nájsť pomerne často, má množstvo výhod. Čo by ste mali mať na pamäti, keď pristupujete k rozloženiu stránky týmto spôsobom?
Na začiatku práce na šablóne je dôležité pravidelne testovať, ako dobre sa obsah a bloky rozloženia zobrazujú na rôznych obrazovkách. Na to niekedy stačí zmeniť šírku okna prehliadača. Súbor štýlu prijme mediálny dotaz a premiestni bloky, čím sa urobia významné zmeny. Dobrým nástrojom na testovanie šablóny responzívneho rozloženia môžu byť stránky, ktoré napodobňujú obrazovky mobilných zariadení rôznych modelov. Takéto služby vám umožnia dôkladne zvážiť a vyhodnotiť, ako dizajn vyzerá na displejoch rôznych mobilných zariadení.
Hoci technológia takéhoto responzívneho rozloženia nie je taká jednoduchá, jej zvládnutie prinesie ovocie veľmi skoro.
