Responzivní web design
Responzivní web design nám pomáhá navrhnout webovou stránku tak, aby automaticky přizpůsobila svou velikost a rozložení prvků podle druhu zařízení na kterém je prohlížena. Ať už se jedná o velký monitor s úhlopříčkou 19 palců nebo o mobilní zařízení s velmi malou obrazovkou. Se stále větší dostupností chytrých telefonů vzrůstá i počet uživatelů používající malé displeje. Navíc mohou preferovat zobrazení na výšku (portrait) nebo případně otočit telefon a přejít do zobrazení na šířku (landscape). Obsah se musí ve všech případech zobrazit správně a responzivní chování by tak mělo být nezbytnou součástí každé moderní webové aplikace.
Představme si tradiční webovou stránku se třemi sloupci, která měla velikost a pozici svých prvků nastavené “napevno”. Vše se zdá být v pořádku, pokud si takovou stránku prohlížíte na počítači. Na menších zařízeních už nejspíše budete muset scrollovat v horizontálním směru, abyste viděli celý obsah stránky. Nutnost posouvat obsah ve vodorovném směru je nepříjemná. Některé elementy nemusí být viditelné úplně nebo mohou působit zkresleně. Pokud při návrhu stránky vezmeme v úvahu i další zařízení a použijeme responzivní design, tak se verze pro tablet může zobrazit ve dvou sloupcích. Zachová se tím správná navigace a obsah je více čitelný. Obdobný postup platí pro chytré telefony. Stránku můžeme zobrazit jako jeden sloupec s obsahem uspořádaným vertikálně. Obrázky a další grafické elementy se proporcionálně zmenší a nebudou zkreslené nebo oříznuté. Některé sekce jako menu se mohou skrýt a znovu zobrazit pomocí tlačítka, čímž se uvolní prostor pro zobrazení informací.
Základním mechanismem je použití takzvané mřížky, která stránku rozděluje na sloupce. Specifikuje se počet sloupců a jejich relativní velikost v procentech. Některý ze sloupců může například zabírat šedesát procent stránky a o zbylý prostor se v udaných poměrech podělí zbylé sloupce. Klíčem je nespecifikovat velikost mřížky a jakýchkoliv jiných elementů na stránce v pixelech, ale používat relativní velikost vzhledem k ostatním prvkům. Dále se dá specifikovat různé rozložení sloupců a umístění prvků stránky v závislosti na velikosti daného zařízení. Je také potřeba myslet na to, jak bude uživatel aplikaci ovládat. U stolního počítače máme dostupnou myš. Při prohlížení stránek na telefonu si musí většina uživatelů vystačit s doteky prstů. Programátoři to musí vzít v úvahu a vytvářet elementy stránky dostatečné velké, aby se na ně bezproblémově dalo kliknout prstem.
Při vývoji Zpravodaje365 jsme mysleli na všechny výše zmíněné aspekty a důsledně jsme aplikovali responzivní design. Správné zobrazení zpravodaje na různých zařízeních dokumentuje přiložený obrázek. Pokud si vše chcete vyzkoušet osobně, neváhejte a navštivte web některého z našich klientů. Přejeme příjemné čtení bez ohledu na to jaké zařízení zrovna používáte.