Každý, běžný uživatel navštěvuje webové stránky z mobilního telefonu. Takzvaný Mobile-first přístup pomáhá vytvořit web, který funguje přirozeně na všech zařízeních.
Dříve se weby navrhovaly nejdříve pro počítač a mobilní verze vznikala až později. Aktuálně je situace opačná. Mobilní zařízení tvoří většinu návštěvnosti a uživatelé očekávají rychlé načtení webových stránek, jednoduché ovládání a čitelnost i na menší obrazovce. Mobile-first design znamená, že návrh webu začíná právě pro mobilní telefon. Rozhraní webových stránek se navrhne tak, aby bylo jednoduché, přehledné a rychlé. Teprve následně se přidávají rozšířené prvky pro tablet nebo počítač. Díky tomu je přehlednější nejen na mobilu, ale i na větších obrazovkách.
Mobilní telefon dnes často slouží jako první místo, kde si lidé vybírají firmu, službu nebo produkt. Zákazník obvykle hledá rychlou odpověď, tedy: například cenu, nabídku služeb nebo kontakt. Pokud se stránka načítá pomalu nebo se na mobilu špatně ovládá, návštěvník většinou okamžitě přejde na jiný web. V této fázi se totiž často rozhoduje pouze podle prvního dojmu nejen z designu webu.
Responzivní design a mobile-first přístup proto výrazně ovlivňují takzvaný předvýběr dodavatele. Uživatel si na mobilu rychle projde několik webů a vybere jen ty, které:
Firmy, které mají mobilní web dobře navržený, se tak častěji dostanou do užšího výběru uživatele.
Responzivní web dnes neznamená jen to, že se stránka „zmenší“ na displej mobilního telefonu. Jde o celkový způsob práce s obsahem, rychlostí webu i navigací.
Dobře navržený web by měl umět:
Pro majitele firem to znamená jediné. Jejich návštěvník se rychle dostane k informacím, které hledá o dané firmě, nabídce služeb či cenách daného sortimentu.
01/ Lepší uživatelská zkušenost
Na mobilu lidé web často používají jednou rukou a ve spěchu. Mobile-first design proto klade důraz na jednoduchost, dostatečně velká tlačítka a přehledné rozložení obsahu. Návštěvník se rychle zorientuje a snáze najde kontakt nebo nabídku služeb.
02/ Rychlejší načítání webu
Mobile-first návrh přirozeně vede k menšímu množství skriptů, obrázků a vizuálních prvků. Díky tomu se stránky načítají rychleji. Rychlost je přitom jeden z hlavních faktorů, který ovlivňuje, zda návštěvník na webu zůstane.
03/ Viditelnost ve vyhledávání
Vyhledávače dnes hodnotí web především podle mobilní verze. Pokud stránky na mobilu fungují dobře, mají větší šanci na lepší pozice ve výsledcích vyhledávání.
04/ Přehlednější obsah
Omezený prostor mobilní obrazovky nutí soustředit se jen na to podstatné. Texty jsou kratší, struktura je logická a informace mají jasné pořadí. Takový web se dobře čte i na počítači.
Při tvorbě webových stránek se používá také nástroj Google Lighthouse. Ten hodnotí kvalitu webu z pohledu výkonu, přístupnosti, SEO i použitelnosti.
Majitelům i tvůrcům webových stránek pomáhá zjistit například:
Vysoké hodnocení v nástroji Google Lighthouse obvykle znamená rychlý a technicky správně připravený web.
Stále více zařízení dnes používá tmavý režim zobrazení. Pokud je web navržen pouze pro světlé prostředí, může být v Dark Mode hůře čitelný. Moderní web by měl proto počítat s oběma variantami. Správně nastavený tmavý režim přináší několik výhod:
Při návrhu je důležité hlídat kontrast textu, práci s ikonami a obrázky i barevnou hierarchii. Tyto faktory zároveň ovlivňují hodnocení v nástrojích pro analýzu výkonu webu. Ale to je práce pro tvůrce webu či frontend developera, který by měl mít zkušenosti.
Mobile-first design není jen trend. Je to praktický způsob, jak vytvořit web, který odpovídá tomu, jak lidé internet skutečně používají. Mobilní telefon je dnes často místem, kde zákazník provede první průzkum a vybere několik firem, které stojí za další pozornost. Pokud web na mobilu funguje dobře, firma má větší šanci dostat se do užšího výběru a získat poptávku. Proto je při návrhu nového webu důležité myslet na mobil od samého začátku.
Autor
Jsem tvůrce webových stránek, návrhů designu webů, rozhraní mobilních i webových aplikací, jako jsou intranety, B2B portály aj. Pokud potřebujete zkušeného a spolehlivého webaře pro Váš projekt, jsem Vám k dispozici.
Začátkem roku jsem provedl řadu aktualizací a úprav redakčního systému webdilna | com. Změny se týkaly především front-end kódu a optimalizace pro Google Lighthouse.
Přečtěte si, jak jednoduše založíte novou sekci e-shop v administraci webové prezentace na redakčním systému webdilna | com a doplníte jednotlivé produkty.
Zde je ukázka formátování slepého textu v administraci web dílny. K novince je připojený obrázek, mapa a několik ukázek, co lze upravit pomocí editoru.
V jednom z předchozích článků jsem psal o optimalizaci html kódu s Rich Snippets pro sekci e-shopu a stránky samotných produktů. Nyní se strukturovaná data rozšířily do dalších částí webdílny.