Jedným zo zásadných zlomov v programovaní webstránok bol príchod iPhonu na trh. Dovtedy sa webové stránky programovali v desktopovej aj mobilnej verzii, čo sa však ukázalo ako mimoriadne náročné riešenie z finančného i časového hľadiska. Dnes sú mobilné zariadenia zodpovedné za 56%+ využitia internetu, preto je potrebné, aby sme prehodnotili spôsob, akým webové stránky tvoríme. Riešením je responzívny dizajn.
Rozhodne najsilnejším trendom v digitálnom svete je využívanie internetu v on-the-go móde na mobilných zariadeniach. Aby sa naše ciele stretli s preferenciami zákazníkov, je nutné upraviť prístup k vývoju webov tak, aby boli stránky optimalizované na všetky zariadenia.
Čo to znamená? Responzívny dizajn webových stránok je flexibilný, dokáže prispôsobiť rozloženie obsahu, veľkosť obrázkov i navigačné menu rôznym rozmerom obrazoviek.
Preto, ak o stránke hovoríme ako o “optimalizovanej”, znamená to, že stránka je čitateľná a pre užívateľa je ľahko ovládateľná s minimálnym pohybom a posúvaním rovnako na desktope, tablete alebo smartfóne.
Responzívny dizajn nie je len metóda alebo technika vývoja webu. Ide o ideológiu, podľa ktorej sú stránky navrhované a následne programované.
Responzívny web je navrhnutý na základe troch developerských princípov:
Koreňom responzívneho dizajnu sú tzv. Fluid Grids, ktoré tvoria štruktúru webu. Tieto mriežky nepracujú s počtom pixelov, ale majú definovanú maximálnu výšku a/alebo šírku rozlíšenia obrazovky, čo umožňuje prispôsobiť vzhľad stránky zariadeniu. Stanovenie maximálnej a minimálnej hodnoty určuje hraničné body priblíženia a zmenšenia webovej stránky tak, aby zostala zachovaná kvalita grafiky a zároveň aj čitateľnosť webu.
Vizuálnym základom responzívneho dizajnu sú tzv. Media Queries alebo breakpointy. Tie sú zodpovedné za zmenu dizajnu stránky v závislosti od zariadenia, na ktorom si konkrétny obsah prezeráme. Webová lokalita zistí typ zariadenia alebo rozlíšenie webového prehliadača a následne zobrazí obsah v preddefinovaných bodoch.
V zjednodušenej programátorskej reči to funguje takto – opýtaj sa prehliadača otázku, potom urob krok X, len ak je odpoveď Y.
Aké je aktuálne rozlíšenie obrazovky? Ak je odpoveď napríklad >400 pxl, CSS rozdelí obsah do dvoch stĺpcov. Ak je odpoveď <400 pxl obsah sa zobrazí v jednom dlhšom stĺpci.
Breakpointy však používajte s rozumom. Ak ich pridáte priveľa, stránka môže pôsobiť chaoticky, čo v konečnom dôsledku ovplyvňuje celú používateľskú skúsenosť.
Obrázky, videá a iné médiá sú neoddeliteľnou súčasťou každej webstránky. Pri vývoji nového responzívneho webu je preto nutné zabezpečiť, aby aj obrázky či médiá boli optimalizované. Táto vlastnosť umožňuje prispôsobiť ich rozlíšenie a zároveň stanoviť rýchlosť načítavania v závislosti od zariadenia.
Výhodou responzívnych obrázkov je zachovanie ich vizuálnej kvality.
Super príkladom dobre zvládnutého responzívneho dizajnu je DropBox. Stránku na zdieľanie a odkladanie súborov využíva celý svet na desktope, tablete a čoraz častejšie je využívaná aj ako mobilná aplikácia.
Responzívny web nie je len o prispôsobovaní rozlíšenia. Pri programovaní takejto webovej stránky síce eliminujeme nutnosť samostatnej desktopovej a mobilnej verzie, no na povrch sa vynárajú aj iné, veľmi podstatné, detaily.
Pri desktopových počítačoch a laptopoch používateľ potrebuje myšku (alebo touchpad) na pohyb po obrazovke a výber objektov. Tablety a smartfóny však fungujú na dotyk prsta, ktorý nie je tak presný ako ikona myši.
Pri dizajnovaní responzívnej webstránky pre mobily a tablety je preto dôležité myslieť na detaily. Obrazovky smartfónov sú menšie, o to dôležitejšia je dostupnosť a veľkosť kľúčových buttonov, či navigačnej lišty.
Používatelia mobilných telefónov očakávajú, že ich výkonnosť bude porovnateľná s tou počítačovou, čo potvrdzujú aj odborníci z Googlu. Tí tvrdia, že priemerný čas načítania webovej stránky na mobilnom zariadení je 22 sekúnd.
Avšak až 53% používateľov zo stránky odchádza, ak sa na nej do 3 sekúnd nič nezobrazí.
Dobu načítania webu ovplyvňuje aj veľkosť grafiky a obrázkov, preto pri mobilnej verzii webu odporúčame staviť na jednoduchú grafiku a menej obrázkového materiálu.
Jedným z cieľov responzívnych webov je poskytnúť návštevníkovi plnohodnotný zážitok. White spaces, alebo biele miesta na webe, slúžia ako akcent, ktorý pomáha návštevníkom sústrediť sa na obsah webu.
Prakticky povedané, pri responzívnom dizajne je potrebné ustrážiť si paddingy (medzery) a prispôsobiť veľkosť písma i riadkovanie rozloženiu obrazovky. Neexistuje žiaden dohodnutý pomer, ktorý by určoval množstvo white spaces na stránke.
Jediným spoľahlivým merítkom sú vaše oči.
Responzívny dizajn je dnes nutnosť pre akýkoľvek typ webu. Nezáleží na tom, či predávate produkt alebo službu, responzívny dizajn pomôže zvýšiť návštevnosť webu a navyše je search friendly. Dôležité je však myslieť na každú maličkosť, pretože okrem jednoduchého ovládania musí web vyzerať skvelo na všetkých zariadeniach.
Pavol je ArtDirector v brandingovej agentúre GALTON Brands a dizajnu sa venuje už viac ako 10 rokov. Špecializuje sa na dizajn vizuálnej identity značiek a návrh webstránok s dôrazom na bezchybné používateľské rozhranie.
Brandingová agentúra GALTON Brands je strategickým partnerom pre značky, ktoré chcú dlhodobo napredovať. Už viac ako 10 rokov budujeme značky a zlepšujeme firemnú kultúru startupom, lokálnym i globálnym spoločnostiam. Pomáhame im pochopiť vlastnú identitu, učíme ich zrozumiteľne komunikovať a tvoriť hodnoty pre lepšiu budúcnosť.
Pravidlené novinky, rozhovory a dlhodobý obsah pre majiteľov eshopov a ecommerce marketérov. To je Ecommerce Bridge.
Pravidlené novinky, rozhovory a dlhobobý obsah pre majiteľov eshopov a ecommerce marketérov. To je Ecommerce Bridge.