Responzivní design pro vaše stránky

Grafický návrh, který pro vás vytvoříme, je samozřejmě plně responzivní.

Žijeme v době mobilové, časy, kdy jsme mobily využívali jen pro volání a posílání sms zpráv, patří do telefonního pravěku. Díky překotnému vývoji v této oblasti co do výkonu i inteligence, se telefony staly naším neodmyslitelným souputníkem a pomocníkem. Poskytují nám nepřeberné množství funkcí a aplikací, můžeme v nich mít mapy, jízdní řády, fotografie, hudbu, hry, emaily, bankovnictví, předpověď počasí, můžeme v nich pouštět videa na YouTube, zprostředkovávají nám přístup do sociálních sítí jako je Facebook ...

... a samozřejmě, že z mobilů přistupujeme ve stále větší míře i k internetu, k prohlížení webových stránek a navštěvování eshopů.

Rok od roku stoupá počet vlastníku chytrých telefonů a s tím ruku v ruce stoupá podíl návštěvnosti webových stránek z mobilních zařízení a tabletů.

Majitelé webových stránek tak stojí před otázkou, jak zpřístupnit své stránky či služby majitelům mobilů. V čem je největší zádrhel? Samozřejmě v tom, že display mobilu je mnohem menší než display počítačového monitoru. Prohlížeče v mobilu samozřejmě umí zobrazit každou webovou stránku, problém je ten, že standardně bude v mobilu titěrná, že ji budete muset zoomovat (zvětšovat), pak v ní posunovat a vůbec bude takové prohlížení stránek nepohodlné.

Způsobů, jak dostat vaše webové stránky na mobil je více.

Nejdražší možností je nechat si vytvořit speciální mobilní aplikaci. Zpravidla to není nejlepší řešení, protože lidé si jen neochotně instalují neznámé aplikace do mobilu. Také budete muset zvažovat, zda nevytvořit jednu aplikaci pro ekosystém Androidu a jednu pro Apple.

Další možností je udělat si druhou verzi stránek speciálně pro mobily. To také stojí nějaké prostředky, navíc je to nepohodlné v tom, že musíte spravovat, udržovat a synchronizovat dvě verze vašich stránek. Toto řešení navíc nemusí být dobré z hlediska SEO (optimalizace pro vyhledávače), protože vyhledávače takové stránky mohou považovat za duplicitní.

Třetí možností je responzivní design. Tato možnost je nejjednodušší, nejlevnější a nejelegantnější.

Responzivní design

Responzivní design znamená, že se jedna a táž webová stránka vykreslí a přizpůsobí pro každé zařízení bez ohledu na jeho velikost. Ať již je to menší nebo větší mobil, tablet, netbook, notebook, počítač se standardním nebo i velkým monitorem.

Technicky se responzivní design realizuje stylováním html dokumentu, u jednotlivých html elementů se neudávají rozměry v pixelech, ale procentech; správným propočtem se pak tyto elementy přizpůsobují různým velikostem jednotlivých zařízení. Pokročilé vykreslování na různá zařízení má na starost jedna z technik CSS3 (kaskádové styly) tzv. Media query, kdy je možno pro vykreslování stanovovat pravidla, která platí za předem definovaných podmínek. Takto je možnost přiřadit každému jednotlivému rozlišení nějaký konkrétní styl. Webový server posílá klientovi (webový prohlížeč) vždy ta samá data a je na koncovém zařízení, jak je zpracuje.

Výhody responzivního designu v kostce:

• Snadná správa stránek. Udržujete jen jeden kód na jednom místě. Napíšete článek a ten se zobrazí návštěvníkům vašich stránek, ať již na váš web přistupují z počítače či mobilu. Podobně to platí např. i u eshopu, přidáte svůj produkt jen jedenkrát a váš zákazník si jej může koupit jak z počítače, tak ze svého mobilu.
• Vyšší návštěvnost. Získáte další návštěvníky vašich stránek, neboť jak již bylo řečeno, počet uživatelů, kteří na internet přistupují z mobilů, stále roste.
• Dobrá orientace. Váš web se bude na mobilu dobře zobrazovat, pro vaše návštěvníky bude snadné a pohodlné se na něm orientovat.
• Výhodné pro SEO. Google ve výsledcích vyhledávání na mobilu upřednostňuje stránky, které jsou responzivní.