Newsletter: Jak mít web přizpůsobený pro jakékoliv zařízení

V dnešní době stále roste počet zařízení, která se mohou připojit na internet. Velké množství webů s tímto nepočítá a jejich ovládání je na různých zařízeních poměrně složité. Vy, jako majitelé webů a e-commerce produktů, se tak můžete připravit o potencionální zákazníky a o zisk.

Díky technice zvané responsivní design bude váš web dobře ovladatelný na jakémkoliv zařízení - od mobilních telefonů až po Full HD televizory - a nebude potřeba vytvářet zvlášť oddělené verze pro každý typ zařízení.

Web přizpůsobený pro různá zařízení

Proč přizpůsobit web pro různá zařízení?

Klasické webové stránky nejsou pro prohlížení a ovládání na různých zařízeních přizpůsobeny a je proto nutné pamatovat na to, že se jednotlivé produkty liší svými technickými možnostmi:

• Velikost zobrazovací plochy - mobilní zařízení mají menší zobrazovací plochu, než displeje notebooků nebo klasických počítačů.
• Ovládání zařízení - ovládání pomocí myši a klávesnice je zcela odlišné od ovládání pomocí dotyku nebo jiného způsobu - například gesty na televizi. Je proto potřeba přizpůsobit web daným omezením a příležitostem.
• Kvalita prohlížečů - nelze počítat s tím, že kvalita a možnosti prohlížečů jsou na různých zařízeních stejné. Prohlížeče pro klasické počítače nabízí více technických možností než mobilní či televizní prohlížeče.
• Internetového připojení - kvalita pokrytí a rychlost připojení není vždy stejná jako u klasických počítačů. Například rychlost mobilního připojení je často více jak 2x menší a závislá na pokrytí lokality, ve které se právě nacházíte. Je také nutné počítat s tím, že mobilní připojení poskytuje omezené možnosti pro stahování dat.

Společnost Gartner zveřejnila výsledky prodeje chytrých telefonů. Tento segment zaznamenal od roku 2008 velice výrazný nárůst prodeje.

Celosvětový prodej chytrých telefonů koncovým uživatelům v letech 2008 až 2011. Zdroj: Gartner

Z měření společnosti StatCounter vyplývá, že stále roste počet přístupu na web přes mobilní zařízení.

Celosvětový přístup na internet přes mobilní zařízení a klasický počítač v letech 2008 - 2012 (do 21. srpna) Zdroj: StatCounter

Z grafu je patrný značný růst přístupů na internet z mobilních zařízení. Téměř dvanáct procent v roce 2012 není zanedbatelné číslo. Je nutné počítat s tím, že tento trend bude i nadále růst.

Nárůst se ale netýká jen mobilních zařízení. Roste také prodej televizorů s připojením k internetu:

• Podle společnosti Alza.cz se prodej těchto televizorů zvedl proti předchozímu půl roku o více jak třicet procent.
• Podle společnosti Datart.cz prodej televizorů „s připojením“ překonává jejich „offline“ verze o dvacet procent.

Pokud pro svůj web využijete responsivní design, zákazníci budou váš web používat snadno a efektivně. Vaše investice vložená do přizpůsobeného webu se vám vrátí v podobě provedených nákupů a pozdějších ušetřených nákladech za návrh, vývoj a správu oddělených webových stránek pro jednotlivá zařízení.

Co je responsivní design?

Tato metoda umožňuje vytvořit jeden web, který se patřičně přizpůsobí možnostem daného zařízení s důrazem na vysokou použitelnost a zážitek uživatele.

Výhodou je, že jako majitelé webu nemusíte přemýšlet nad tím, zda vytvořit oddělenou verzi webu pro všechna zařízení, která se mohou připojit na internet.

Jeden web použitelný na různých zařízeních

Webové stránky se navrhují do mřížky, tzv. gridu. Jednotlivé prvky se do této mřížky rozmístí, což lidem značně usnadňuje orientaci a hledání požadovaného obsahu. Protože jednotlivá zařízení umožňují zobrazení v různém rozlišení, je tuto mřížku potřeba patřičným způsobem upravit možnostem obrazovky.Jak to funguje?

Webové stránky se navrhují s využitím základní mřížky, která má velikost 960 obrazových bodů a je rozdělena do čtyř sloupců.

Výchozí mřížka pro webovou stránku - rozlišení 1024 x 768 obrazových bodů

Po „příchodu“ zařízení na web je mu automaticky přizpůsobena mřížka a rozložení prvků (viz. následující obrázek):

Pro každé zařízení je vždy dostupná ta nejlepší varianta rozložení prvků na stránce

Mobilní web nebo responsivní design?

Oba přístupy vytváří na návrh, tvorbu a správu webu odlišné nároky.

S tím souvisí, jak oba tyto způsoby fungují.

Jak funguje mobilní web

V případě oddělené mobilní verze webu je vytvořena druhá verze webu, která je přizpůsobena možnostem a omezením mobilních zařízení.

Webová stránka rozpozná typ daného zařízení - mobilním zařízením poskytne mobilní verzi webu, ostatním zařízením poskytne klasický web.

Webová stránka ověřuje, jakého typu je přistupující zařízení. Na základě toho rozhodne, jakou verzi webu danému zařízení nabídne.

Jak funguje responsivní design

Stránka využívajícího metody responsivního designu počítá s tím, že na ní mohou přijít různá zařízení.

Existuje tedy pouze jeden web, který díky technickému řešení změní rozložení jednotlivých prvků, uzpůsobí velikost obrázků, atp. podle možností daného zařízení. Vše se děje až v samotném zařízení.

Máte pouze jeden web, který se automaticky přizpůsobí možnostem daného zařízení.

Responsivní design nenabídne mobilním uživatelům “něco” navíc

Pokud chcete nabídnout uživatelům mobilních zařízení specifické funkce, které se hodí do kontextu použití mobilního zařízení, nemůžete použít responsivní design na jednom webu, který slouží pro všechny uživatele.

Budete tak stále muset vytvořit mobilní web obsahující specifické funkce, které uživatelé mobilních zařízení požadují a které by zbytečně obsahoval web klasický.

Pokud budete chtít poradit, jakou metodu zvolit, velice rádi vám s výběrem metody poradíme nebo pro vás web realizujeme.

Více informací

Zaujala Vás metoda responsivní design a chtěli byste znát více podrobností? Přečtěte si:

• Responsive Web Design na A list apart - http://www.alistapart.com/articles/responsive-web-design/
• Responsive Web Design: What It Is and How To Use It na Smashing Magazine - http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
• Mobile Websites vs Responsive Design: What’s the right solution for your business? na Google Inside AdSence Blog - http://adsense.blogspot.cz/2012/07/mobile-websites-vs-responsive-design.html

Doporučujeme také k přečtení knihu Responsive Web Design od Ethan Marcotte.

Datum vydání: 22. 8. 2012