Responzivita: Základ moderního webu

• ​​​​​Data mluví za vše: Mobil hraje prim
• Proč mít responzivní web?
  • Čitelnost: základ úspěšného webu
  • Úspěšný marketing? Nezapomeňte na SEO!
• Chci responzivní web. Jaké mám možnosti?
  • Nové webové stránky
  • Web už mám, ale není responzivní. Co teď?

Data mluví za vše: Mobil hraje prim

Mobile First se mezi webdesignery neříká jen tak. Podle novodobých statistik je přibližně 50 % návštěv na webu z mobilních zařízení, a tento trend každoročně stoupá. Za posledních sedm let podíl mobilních návštěvníků vzrostl o neuvěřitelných 222 % a do roku 2025 se očekává, že až tři čtvrtě internetových prohlížení bude z mobilů. Pro zajímavost, podíl na tomto vývoji mají zejména rozvojové země, kde jsou chytré telefony čím dál dostupnější. Například v Číně se poměr internetových návštěv z mobilních zařízení vyšplhal na rekordních 98 %.

Úměrně s tímto trendem roste také délka stráveného času na mobilu. Podle dat ze Spojených států stráví průměrný Američan přibližně 203 minut denně na telefonu a 128 minut denně na počítači. Zatímco čas u počítačů se každoročně lehce snižuje, u mobilních zařízení sledujeme opačný trend. Za posledních sedm let se doba strávená na mobilních zařízeních navýšila téměř o třetinu. Jak s těmito údaji zamíchal lockdown se zatím můžeme jen domnívat. To nás utvrzuje v nutnosti optimalizovat webové stránky pro mobilní zařízení, případně zvážit zhotovení mobilní aplikace. Existují odhady, že až 90% času stráví uživatel mobilního telefonu právě používáním aplikací. O tom, jak mobilní aplikace vzniká a na kolik zhruba přijde se můžete dočíst v tomto článku.

Vývoj podílu návštěv webových stránek z mobilních zařízení

Proč mít responzivní web?

Kromě výše uvedených důvodů sledujeme další výhody, proč optimalizovat své stránky pro mobilní zařízení. O co konkrétně jde?

1. Čitelnost: základ úspěšného webu

Webový obsah by měl být jako voda, tedy přizpůsobovat se šířce zařízení. Základem toho je tzv. fluidní design, který není v CSS definovaný natvrdo v pixelech, ale v procentech. Obsah se tak přizpůsobuje všem zařízením. Tuto funkci by vám měl zajistit každý kodér. Další responzivní CSS vychytávky najdete v tomto článku.

Co dalšího mít na mysli při optimalizaci webu pro mobily:

• Návštěva webu by měla být pro uživatele co nejpohodlnější. Obsah by se měl zobrazovat přes celý displej, bez nutnosti scrollovat do stran nebo si stránku přibližovat. Mějte na paměti, že šířka containeru (pole s obsahem) by pro mobilní zařízení měla tvořit přibližně 90–97 %.
• Nezapomínejte na tlačítka, jejichž velikost by měla být dostatečná, aby se na ně dalo pohodlně kliknout prstem.
• Nejdůležitější je zachování čitelnosti, a to i u obrázků. Pokud na mobilu nejde poznat, co na obrázku je, obrázek zvětšete nebo ho pro mobilní zařízení skryjte. Dbejte však na atraktivitu webu. Vyvarujte se používání obrázků s delšími texty, na mobilu jsou takřka nečitelné. Textový obsah je lepší nakódovat zvlášť.
• Pozor na náročné animace, které mohou ovlivnit rychlost načítání webu.
• Nejvíce zanedbávaným, a přitom nejpodstatnějším prvkem je správné nastavení typografie, které rozhoduje o úspěšnosti vašich stránek. Pokud web nebude čitelný, uživatelé odejdou pryč. Pro obsah na desktopu se obecně doporučuje velikost písma okolo 15-22px a pro mobil 14-16px. Další důležitá pravidla webové typografie najdete zde.
• Detailnější vysvětlení tipů, jak vylepšit mobilní verzi vašeho webu z hlediska UX, se můžete dočíst v tomto článku.

Nejste si jistí vizuálním řešením vašeho webu? Vyzkoušejte UX analýzu a rádi vám pomůžeme najít efektivní řešení i pro vaši firmu. Pro více informací se podívejte na naše stránky nebo využijte nezávaznou konzultaci.

2. Úspěšný marketing? Nezapomeňte na SEO!

Responzivní weby jsou v SEO rankingu označovány za velké plus. Google vyhledávače v poslední době zveřejňují údaje, jestli je stránka optimalizovaná pro mobilní zařízení. Tyto stránky se pak ve výsledcích vyhledávání zobrazují výše než weby s neresponzivním obsahem. Jestli váš web tyto parametry splňuje, můžete zjistit za pomocí Mobile-friendly testu od společnosti Google. Více o SEO se dočtete na našich stránkách.

Čtěte také:

• Historie SEO: Kde má kořeny a jak se vyvíjelo?
• Jak lidé vyhledávají na internetu
• Jak si založit a udržet e-shop?
• Fotografie na webu: Jak s nimi pracovat?

Chci responzivní web. Jaké mám možnosti?

Nové webové stránky

V dnešní době je responzivní webdesign samozřejmostí. Není nic jednoduššího než se obrátit na profesionální tým vývojářů a designérů, kteří vám pomohou k webu dle vašich představ. Vybrat si můžete buď ze široké nabídky šablon, což je rychlejší a levnější metoda, anebo investovat do designu na míru, který bude jen váš. Více o srovnání těchto dvou možností jsme napsali zde.

• Tip pro vás! Jaké jsou nejpoužívanější redakční systémy, na kterých web postavit?

S tvorbou webových stránek máme široké zkušenosti a rádi vám pomůžeme. Podívejte se na naše reference. Vybrané designové lahůdky z naší dílny pro vás máme nachystané v Galerii grafiky.

Web už mám, ale není responzivní. Co teď?

Pokud nejsou vaše stránky optimalizované pro mobilní zařízení, ale jinak jste s nimi spokojení, není povinností sáhnout po kompletním redesignu. Na výběr máte i tyto dvě možnosti:

• Mobilní verze webu

Jedná se o samostatné webové stránky, které jsou vytvořeny čistě pro mobilní verzi. Stránky se automaticky přizpůsobují prohlížeči, na kterém uživatel právě je. Nevýhodou této varianty bývá vyšší pořizovací cena za tvorbu a správu webu, přistupují k ní tedy především větší e-shopy jako např. Ikea, Baťa nebo Alza. Za výhody se naopak považuje možnost zvolit jiný obsah pro každou verzi nebo rychlejší načítání stránek, pozor však na zachování jednotného designu webu.

• Optimalizace webu pro responzivní zobrazování

Webový developer by neměl mít problém s optimalizací stránek pro menší rozlišení. Výhodou této možnosti je nižší investice a možnost přizpůsobení stránky pro všechna rozlišení, tedy i tablet na výšku, tablet na šířku, mobil na šířku apod. Díky jedné URL adrese se navíc jedná o výhodnější variantu z hlediska SEO.

Zvažte, jestli se vám responzivní úpravy vyplatí. Pokud se jde o zastaralé stránky, výhodnější metodou může být investice do kompletního redesignu, který vám vydrží na dlouhou dobu a mezi konkurencí vynikne. Pokud si nejste jistí, která varianta je pro vás lepší, zvažte možnost analýzy webu nebo nás kontaktujte a rádi vám poradíme.