Inspirace  |  Přečteno 68 x
5 tipů jak na responzivní web

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

 

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

Získejte virtuálního
asistenta ještě dnes

Jak si přejete využít svých
300 Kč zdarma?

Napište nám a my se
vám obratem ozveme.
4.9 hodnocení
4.9 hodnocení

Mohlo by vás zajímat

Všechny články >
Timi photo
Jan Skovajsa
CEO
zakladatel, CEO a zároveň jeden z investorů myTimi

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

Zpráva
4.9 hodnocení

Těšte se na výhody

fajfka
300 Kč zdarma na vaše první úkoly
fajfka
200 Kč za každé doporučení přátelům
fajfka
Přehled o všech úkolech
fajfka
Lépe vás poznáme a úkoly splníme rychleji
Abyste mohli používat myTimi naplno, prosím, potvrďte souhlas s našimi pravidly soukromí. Více informací: zdeSouhlasím