Více než 50 % návštěv webů přichází z mobilních telefonů. Přitom 33 % zákazníků web opustí, protože není responzivní. Mít responzivní web se tedy opravdu vyplatí. Přečtěte si 5 tipů, jak na něj – plus 4 důvody, proč vám pomůže zabodovat v organickém vyhledávání.
Proč je responzivní design webu důležitý?
Moderní webdesign se neobejde bez responzivity. Nejen, že responzivní web je mnohem uživatelsky přívětivější a efektivnější, ale také vám poslouží jako zbraň ve vodách SEO. V roce 2015 Google vydal aktualizaci, která responzivní weby zvýhodňuje při vyhledávání. Co všechno vyhledávač u responzivního webu zohledňuje? Důležité jsou pro vyhledávače tyto faktory:
1. Uživatelská přívětivosti responzivního webdesignu
Pokud bude váš web responzivní, uživatelé se v něm budou snáz pohybovat a stráví na něm více času. Také se k vám více návštěvníků vrátí. Díky tomu vyhledávač váš web vyhodnotí jako uživatelsky přívětivý a zobrazí ho na vyšších příčkách vyhledávání.
2. Vyšší rychlost načítání díky responzivnímu designu
Stránky optimalizované pro mobily se zpravidla načtou mnohem rychleji, díky čemuž je vyhledávač upřednostní před weby, které optimalizované nejsou, a načítají se proto mnohem pomaleji.
3. Bounce Rate – responzivita ho pomůže významně snížit
Bounce Rate je počet návštěvníků, kteří web ihned po otevření opustí. Čísla mluví jasně – 33 % lidí při mobilním vyhledávání opustí web, který není responzivní.
4. Responzivita jako taková
Při mobilním vyhledávání vám Google předně ukáže ty weby, které jsou pro mobily optimalizované.
Responzivní web vám pomůže i s konverzí zákazníků
Nespornou výhodou webových stránek, které jsou optimalizované pro telefony, je i jejich propojení s mobilními aplikacemi. Na web můžete umístit tlačítka, která vám doslova přivedou nové zákazníky – třeba interaktivní mapu, která se uživatelům otevře v aplikaci, a jim už stačí jen spustit navigaci. Nebo tlačítko s telefonním číslem, které lidem umožní zavolat vám jediným kliknutím. Možností, jak responzivitu využít ve svůj prospěch, je celá řada.
5 tipů, jak na responzivní design
Teď, když víte, proč je responzivita důležitá, nastal čas povědět si, jak na responzivní web. Návod se skládá z 5 hlavních bodů: viewportu, pružného layoutu, Media Queries, breakpointů a flexibilních obrázků. Tak pojďme na to.
1. Viewport jako základ responzivního webu
Stalo se vám někdy, že jste na mobilu otevřeli nějakou stránku a zobrazila se vám zmenšená verze webu? Tomu zabráníte přidáním meta značky viewport, díky které prohlížeč v mobilu pozná, že se má stránka přizpůsobit skutečné velikosti displeje. Značku je potřeba umístit do hlavičky stránky (sekce head) a bude vypadat následovně:
2. Pružný layout: klíč k responzivnímu webdesignu
Vytvořte pružný layout. Díky němu se prvky webu, které jsou v desktopové verzi vedle sebe (například sloupce textu), přizpůsobí reálné šířce displeje. V praxi to znamená, že šířku prvků, které se na webu vyskytují, do kódu nezadáte v pixelech, ale v procentech. Maximální šířka prvku tedy bude vypadat takto:
max-width: 100%
3. Přidejte do kódu Media Queries
Pokud si web zobrazíte v tak malém rozlišení, jaké mají třeba mobilní telefony, samotný pružný layout už vám stačit nebude. A právě v tuto chvíli přijdou na řadu Media Queries. Jedná se o CSS3 modul, který umožňuje nastavit podmínky, za kterých se design webu změní – ze tří sloupců se stanou dva a podobně. Nejčastěji budete pomocí Media Queries definovat rozlišení obrazovky. Můžete tak nastavit různý design webu při zobrazení z různých zařízení. Například pro rozlišení webu menší než 900 pixelů použijete tuto značku:
@media screen and (max-width: 900px) {
#wrapper {
Čímž se logicky dostáváme ke čtvrtému bodu:
4. Určete si breakpointy
Abyste mohli do responzivního webdesignu zařadit Media Queries, musíte si definovat breakpointy – konkrétní body zlomu, při kterých dojde ke změně designu. V předchozím příkladu je breakpointem právě hodnota 900 pixelů.
Jak si breakpointy určit? Zaměřte se na rozlišení jednotlivých zařízení – jiný design bude potřeba pro kvalitní displeje s rozlišením 1900 pixelů a jiný pro obrazovky mobilů široké 320 pixelů. Jakmile si určíte, na kterých zařízeních se má web zobrazovat, určení breakpointů už bude snadné.
Pokud budete chtít například nastavit, aby se při zobrazení webu v rozlišení 600–900 pixelů změnila velikost headeru na 800 pixelů, vytvoříte následující kód:
@media (max-width: 900px) and (min-width: 600px) {
#header {
width: 800px;
}
Tip: Nepoužívejte breakpointy, pokud to není potřeba. Design webu se při změně rozlišení nijak nezmění a jediné, co je třeba upravit, je velikost písma a okrajů? Pak byste breakpoint používali zbytečně.
5. Postarejte se o responzivitu obrázků
V dnešní době, kdy většinu informací vnímáme vizuálně, nesmíme zapomenout na velmi důležitou součást responzivního webu – optimalizované obrázky. Jak na to? Místo, abyste velikost obrázku napsali do kódu v pixelech, zadáte maximální šířku 100 % a výšku automatickou. CSS tedy bude vypadat následovně:
.content img {
max-width: 100%
height: auto;
}
Proč tvorbu responzivního webdesignu outsourcovat
Pokud chcete skutečně kvalitní, profesionální a optimalizovaný web, potřebujete tým složený z vývojářů, UX designerů a QA specialistů. Zaměstnávat na plný úvazek takový tým se však většině malých a středně velkých podniků finančně nevyplatí. Co s tím? Tvorbu nebo optimalizaci webu můžete outsourcovat.
Získejte kvalitní responzivní web díky službě myTimi
Outsourcing poskytuje řadu nesporných výhod: ušetříte peníze, proměníte své náklady ve variabilní a okamžitě získáte přístup k týmu specialistů. Proč optimalizaci webu outsourcovat s myTimi? Při tvorbě webových stránek klademe důraz na to, aby byl web v souladu s celkovou strategií firmy. Je pro nás důležité, aby web perfektně fungoval nejen sám o sobě, ale také z marketingového a obchodního hlediska. Nastavujeme plán tak, aby vše drželo pohromadě a web byl v rámci celé firmy efektivní.
