Otevřete si vlastní web na telefonu. Text je čitelný, menu se čistě sbalí a obrázky se přizpůsobí, aniž by cokoli vytlačily mimo obrazovku. To je správně fungující responzivní design webu. Když takhle nefunguje, návštěvníci odejdou dřív, než přečtou jediné slovo.
Váš web má jednu sadu obsahu a jednu sadu kódu. Responzivní design webu je přístup, díky kterému tento jediný kód správně obslouží každého návštěvníka, ať sedí u širokoúhlého monitoru, nebo drží telefon na výšku. Místo vytváření samostatné mobilní verze webu responzivní design automaticky upravuje rozvržení, obrázky a navigaci podle toho, jaká obrazovka se používá.
Web, který vypadá správně jen na počítači, selhává u většiny návštěvníků dřív, než cokoli přečtou. Pro většinu majitelů firem není responzivní design rozhodnutím, o kterém by se uvažovalo. Je to základní očekávání, které je třeba před spuštěním ověřit.
Jak responzivní design funguje?
Responzivní web používá pravidla CSS zvaná media queries, která zjišťují velikost obrazovky, kterou návštěvník používá. Podle těchto informací se upraví rozvržení. Třísloupcová sekce na počítači se může na mobilu změnit na jeden sloupec. Vodorovné navigační menu se může sbalit do tlačítka. Obrázky se zmenší tak, aby se vešly do dostupné šířky a nepřetékaly své kontejnery.
Klíčový princip je, že obsah zůstává stejný. Mění se to, jak je uspořádaný a zobrazený. Responzivní web není jiný web pro mobilní uživatele. Je to stejný web přizpůsobený jiné obrazovce.
Hlubší technické vysvětlení najdete v článku o tom, co je responzivní design, který podrobně popisuje mechaniku, včetně toho, jak fungují pružné mřížky a flexibilní obrázky napříč velikostmi zařízení.
Jaký je rozdíl mezi responzivním designem a čistě mobilním webem?
Než se responzivní design stal standardem, mnoho firem vytvářelo samostatnou mobilní verzi webu, často na jiné adrese URL. Návštěvník na telefonu byl přesměrován na mobilní verzi. Návštěvník na počítači viděl hlavní web.
Tento přístup vytvářel dvě oddělené věci, které bylo třeba udržovat. Změny v jedné se automaticky neprojevily v druhé. Obsah se rozcházel. Mobilní verze měla často méně funkcí nebo méně obsahu. Správa dvou kódů zdvojnásobila práci, ale ne výsledek.
Responzivní design to nahradil tím, že jediný web funguje všude. Jedna adresa URL, jedna sada obsahu, jeden kód přizpůsobený všem velikostem obrazovky. Je jednodušší na tvorbu, jednodušší na údržbu a lepší pro vyhledávače, které preferují jednu autoritativní adresu URL pro každý kus obsahu.
Co se mění mezi počítačem a mobilem na responzivním webu?
Úpravy mezi počítačem a mobilem jsou rozsáhlejší, než si většina lidí zpočátku uvědomuje.
Sloupce rozvržení se sbalují. Sekce se čtyřmi kartami produktů vedle sebe na počítači se na mobilu změní v posouvatelný sloupec pod sebou. Navigační menu mění podobu. Vodorovná menu se mění ve sbalitelné panely nebo vysouvací zásuvky. Velikosti písma se upravují, aby zůstaly čitelné bez přibližování. Tlačítka se zvětšují, aby se na ně dalo snáze klepnout prstem, než kliknout myší.
Obrázky se přizpůsobují svým kontejnerům, aniž by přetékaly. Obrázky na pozadí se mohou jinak oříznout, aby fungovaly v poměru na výšku. Formuláře upravují velikosti polí a odsazení tak, aby se daly používat s mobilní klávesnicí.
Zkouškou dobře provedeného responzivního designu není jen to, že se na mobilu nerozbije. Je to to, že zážitek na mobilu působí promyšleně, a ne jen stlačeně.
Jak souvisí responzivní design s rychlostí stránky?
Responzivní design a rychlost stránky spolu úzce souvisejí. Responzivní web, který mobilním návštěvníkům servíruje obrázky v plném rozlišení pro počítače, je technicky responzivní, ale prakticky pomalý. Mobilní návštěvníci na mobilním připojení stahují obrázky mnohem větší, než jaké jejich obrazovka dokáže zobrazit.
Dobře provedený responzivní design to řeší tím, že každému zařízení servíruje obrázky vhodné velikosti, komprimuje soubory pro mobilní připojení a odkládá nepodstatné prvky, které zpomalují první načtení. Cílem není jen přizpůsobení rozvržení. Je to rychlý a plynulý zážitek bez ohledu na zařízení nebo rychlost připojení.
Článek o tom, co je rychlost webu, popisuje, jak rychlost načítání ovlivňuje uživatelský zážitek a pozice ve vyhledávání a co způsobuje, že weby běží pomaleji, než by měly.
Co zkontrolovat při posuzování responzivity šablony?
Ne každá šablona označená jako responzivní je pro mobily stejně dobře navržená. Při posuzování stojí za to zkontrolovat několik konkrétních věcí, než se rozhodnete.
Otevřete ukázku šablony na telefonu, ne jen v náhledu na počítači. Projděte každou sekci. Ověřte, že se menu čistě otevírá a všechny odkazy jsou dosažitelné. Ověřte, že text je čitelný bez přibližování. Ověřte, že tlačítka výzvy k akci jsou dost velká, aby se na ně pohodlně klepalo. Ověřte, že se obrázky zobrazují správně a nevytlačují obsah mimo obrazovku.
Všímejte si odsazení na mobilu. Sekce, které na počítači působí vzdušně, mohou působit stísněně, když se sloupce na malé obrazovce sbalí. Zkontrolujte, že mají sekce obsahu dost vnitřního odsazení, aby text neběžel od okraje k okraji. Článek o tom, jak vybrat šablonu webu, zahrnuje testování na mobilu jako součást úplného posouzení šablony.
Podle čeho poznáte, že web není správně responzivní?
Některá selhání responzivity jsou zřejmá. Jiná jsou tak nenápadná, že si jich nemusíte všimnout, dokud se o nich nezmíní zákazník.
Mezi běžné příznaky, že web není správně responzivní, patří text, který je třeba číst posouváním do stran, obrázky, které přetékají své kontejnery a jsou na okrajích oříznuté, navigační menu, která nejdou použít bez kurzoru, tlačítka příliš malá na spolehlivé klepnutí a formuláře, jejichž vstupní pole se nepřizpůsobí mobilní klávesnici.
Méně zřejmé příznaky jsou rozvržení, které se na mobil technicky vejde, ale vypadá jako web pro počítače stlačený do úzkého sloupce. Sekce s příliš mnoha sloupci, které se sbalí do matoucího pořadí. Záhlaví a patičky, které se na mobilu chovají jinak způsobem, s nímž původní design nepočítal.
Standardní kontrola je projít každou stránku na skutečném telefonu. Náhledy v prohlížeči jsou užitečné při vývoji, ale zážitek na dotykovém zařízení plně nenahradí.
Jak responzivní design ovlivňuje pozice ve vyhledávání?
Vyhledávače používají mobilní verzi vašeho webu jako primární verzi pro indexaci a řazení. Web, který dobře funguje na mobilu a rychle se na telefonu načítá, si obecně vede ve výsledcích vyhledávání lépe než web vytvořený hlavně pro počítač.
Kromě preference při indexaci posílá špatně responzivní web negativní signály. Vysoká míra opuštění u mobilních návštěvníků, pomalé načítání na mobilním připojení a obsah, který se těžko čte, časem všechno stahují výkon dolů. Návštěvníci, kteří okamžitě odejdou, protože web na jejich telefonu nefunguje, říkají vyhledávačům, že jim stránka neposloužila.
Úplný obrázek o tom, jak funguje optimalizace pro vyhledávače a které technické faktory jsou nejdůležitější, podává článek co je SEO.
Jak responzivní design řeší WEMASY
Každá šablona v tvůrci webů WEMASY je vytvořena jako responzivní pro počítač, tablet i mobil. Vizuální editor obsahuje vedle zobrazení pro počítač také náhled pro mobil, takže při tvorbě vidíte, jak se sekce chovají na různých velikostech obrazovky. Výkon a responzivitu pro mobily zajišťuje platforma, není potřeba nic nastavovat ručně.
Co je zahrnuto, zjistíte na stránce tvůrce webů WEMASY, a balíčky najdete na stránce s ceníkem.
Často kladené otázky
Je můj web automaticky responzivní, když používám tvůrce webů?
Většina moderních tvůrců webů standardně používá responzivní šablony. Pokud jste vybrali šablonu z aktuálního tvůrce webů, je pravděpodobně responzivní. Důležité není to, zda je šablona označená jako responzivní, ale zda se dobře chová na telefonu. Než předpokládáte, že všechno funguje správně, projděte web na skutečném mobilním zařízení a vyzkoušejte navigaci, obrázky, velikost textu a formuláře. S tvůrcem webů WEMASY si to můžete nastavit přímo na svém webu.
Dá se starší web udělat responzivním bez přestavby?
Záleží na tom, jak byl původní web vytvořen. U webů vytvořených v moderních tvůrcích webů lze často zlepšit mobilní zážitek úpravou nastavení šablony nebo přechodem na lepší šablonu. Weby napsané od nuly nebo postavené na starších platformách mohou vyžadovat rozsáhlé úpravy. V mnoha případech je přestavba na aktuální platformě rychlejší a přinese lepší výsledek než snaha dodatečně přidat responzivitu do staršího kódu.
Ovlivňuje responzivní design, jak rychle se můj web načítá?
Samotný responzivní design web nezpomaluje. Zpomalit ho může způsob provedení. Web, který mobilním návštěvníkům na mobilním připojení servíruje obrázky velikosti pro počítač, se bude načítat pomalu, i když se rozvržení správně přizpůsobí. Dobře provedený responzivní design zahrnuje velikosti obrázků vhodné pro mobil, komprimované soubory a odložené načítání nepodstatných prvků. Přizpůsobení rozvržení obrazovce je jen část kompletního mobilního zážitku.
Co je mobile-first design?
Mobile-first design je přístup, při kterém se mobilní verze webu navrhuje a vytváří dřív než verze pro počítač, a ne naopak. Začíná v nejvíce omezeném prostředí a rozšiřuje se směrem ven. Návrh nejdřív pro mobil vynucuje jasnější priority. Když je místa málo, přežije jen nejdůležitější obsah a akce. Verze pro počítač pak má prostor na tomto základu stavět.
Jak zjistím, zda je můj web vhodný pro mobily?
Projděte každou stránku na skutečném telefonu. Vyzkoušejte navigaci, obrázky, velikost textu, formuláře a tlačítka. Vyhledávače také nabízejí bezplatné nástroje pro testování mobilních stránek, kam zadáte svou adresu URL a ony upozorní na konkrétní problémy, například příliš malý text nebo klikatelné prvky příliš blízko u sebe. Kombinace ručního průchodu a kontroly nástrojem odhalí problémy, na kterých nejvíc záleží.