5 tipů, jak na responzivní web

4. 6. 2020
Marketing Přečteno 7827 x

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í.

monitor, notebook, tablet, mobil

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í.

 

Pořád si nejste jistí, jak na to? Rádi vám pomůžeme v rámci naší služby tvorby webu!

 

 

Zlepšete svoji akvizici ještě dnes

Zpráva


Odesláním formuláře souhlasíte se zpracováním osobních údajů.
deloitte

Mohlo by vás zajímat

Marketing
Display reklama od A do Z: Vytvořte reklamu, která přinese prodeje
Chcete si přečíst co se stalo nového ve světě nebo najít recept na nedělní oběd, ale místo toho vaši pozornost upoutají barevné animované bannery neboli display reklama. Skvělý nástroj online marketingu, jenž může oslovit i uživatele, kteří o váš produkt zatím neprojevili zájem. Přečtěte si, jak vytvořit display reklamu, která přinese prodeje.
Marketing
Co je marketingové ROI a jak ho můžete zlepšit?
Marketing a ROI – co to je a jak jej určíte? Jak vytěžíte z marketingových kanálů naprosté maximum? Přemýšlejte jako investor. Přečtěte si, jak vybírat ty nejefektivnější kanály, optimalizovat rozpočet a dosáhnout skutečných výsledků. Poradíme vám postupy pro maximalizaci vašeho marketingového ROI ověřené dlouholetou praxí.
Marketing
Od nápadu k realizaci: Jak sestavit úspěšnou marketingovou strategii pro e-shop ve 4 krocích?
Jak vytvořit úspěšný a výdělečný internetový obchod, který osloví to správně publikum pomocí sociálních sítích, obsahu, SEO, PPC reklam nebo jiných online kanálů? Za úspěchem stojí správně stanovená digitální marketingová strategie. Zjistěte, jak ji sestavit ve 4 krocích a na co si dát při tvorbě pozor.
Marketing
Praktický průvodce Google Search Console pro majitele firem
Trápí vás nízká návštěvnost vašeho webu? Nástroj Google Search Console vám umožní zjistit, co brání dalšímu růstu, a nabídne konkrétní kroky k nápravě. Na následujících řádcích se dočtete, jak s tímto nástrojem získáte lepší viditelnost ve vyhledávání, vylepšíte technické parametry svého webu, a především na něj přivedete více zákazníků.

Napište mi, s čím potřebujete pomoci,
a pojďme se sejít

Těšte se na výhody

fajfka
Perspektiva majitele firmy
fajfka

60+ odborníků pod jednou střechou

fajfka
myTimi už využívá více než 327 zákazníků
Zpráva
Odesláním formuláře souhlasíte se zpracováním osobních údajů.
Jan Skovajsa
Jan Skovajsa
zakladatel, CEO
a zároveň jeden z investorů myTimi
© myTimi s.r.o. 2025