Článek

Design mobilních webů v roce 2021: Vše, co potřebujete vědět

Mobilní web je zásadní.



Proč? Protože mobilní zařízení způsobují revoluci ve způsobu, jakým se připojujeme, a ve výsledku ve způsobu, jakým podniky fungují. Ve skutečnosti nyní většina webového provozu pochází z mobilu zařízení.

'Mobile se stává nejen novým digitálním rozbočovačem, ale také mostem do fyzického světa,' řekl Thomas Husson , viceprezident a hlavní analytik ve společnosti Forrester Research. 'To je důvod, proč mobilní aplikace ovlivní více než jen vaše digitální operace - transformuje celé vaše podnikání.'





Jinými slovy, potřebujete mobilní responzivní web.

Co je to však web vhodný pro mobilní zařízení? V tomto článku se dozvíte vše o webech vhodných pro mobilní zařízení a uvidíte devět nejlepších příkladů designu mobilních webů. Navíc se naučíte, jak zjistit, zda je váš web vhodný pro mobilní zařízení.


OPTAD-3

Pojďme na to.

Nečekejte, až to udělá někdo jiný. Najměte se a začněte volat výstřely.

Začněte zdarma

Co je to web vhodný pro mobilní zařízení?

Jednoduše řečeno, web vhodný pro mobilní zařízení je web, který je navržen a optimalizován pro ruční zařízení, jako jsou chytré telefony a tablety.

A mobilní responzivní design je proces vytvoření webové stránky který se přizpůsobuje velikosti obrazovky, na které je zobrazen.

Tady v Oberlo máme design webových stránek vhodný pro mobilní zařízení. Pojďme si porovnat, jak to vypadá na počítači a mobilu.

jak založit účet na youtube

Na obrázku níže můžete vidět, že webová stránka pro stolní počítače má dostatek místa, prvky stránky jsou místy uspořádány vedle sebe a text je ve srovnání s velikostí obrazovky relativně malý.

Oberlo Desktop Web

Na druhou stranu, když si prohlížíte web v mobilu, prvky stránky se skládají na sebe v jednom dlouhém sloupci a kolem každého prvku je méně místa. Tlačítka jsou také větší, aby na ně bylo snadné klepnout, a text je větší v porovnání s velikostí stránky, aby bylo snazší číst.

Oberlo Mobile Design webových stránek

'Bohaté a interaktivní zážitky, které jsme u mobilních aplikací očekávali, vytvořily nové standardy a očekávání pro všechna digitální média včetně webu,' řekl Raj Aggarwal , Generální ředitel společnosti pro mobilní marketing Localytics. 'Výsledkem je, že webové stránky se vyvíjejí, aby se ve své bohaté funkčnosti staly více podobnými aplikacím.'

Důležitost designu mobilních webových stránek

Pojďme pronásledovat: V posledním čtvrtletí roku 2019 byly chytré telefony zodpovědné za neuvěřitelné 52,6 procenta celosvětového provozu webových stránek .

To znamená, že používání mobilních zařízení nyní dominuje stolním počítačům.

Více počet mobilních uživatelů se očekává, že do roku 2021 vzroste na 3,8 miliardy.

Tak jako Cyndie Shaffstall , zakladatel marketingové společnosti Spider Trainers, řekl: „Mobilní není budoucnost, je to nyní. Setkejte se se svými zákazníky v prostředí podle svého výběru, ne tam, kde je to pro vás výhodné. “

Mobilní zařízení také mění nákupní návyky.

Podle Google 59 procent nakupujících říci, že je to možné nakupovat na svých mobilních zařízeních je důležité při rozhodování, od kterého prodejce nebo značky nakupovat.

Více, 70 procent majitelů chytrých telefonů kteří provedli nákup v obchodě, obrátili se na svá mobilní zařízení, aby nákup předem prozkoumali.

Pokud to nestačí, algoritmus Google upřednostní ve výsledcích vyhledávání weby vhodné pro mobilní zařízení.

V březnu 2020 Řekl Google „Pro zjednodušení přejdeme na indexování všech mobilních webů nejprve na mobil.“

Pokud vás zajímá, co to znamená, obhájce vývoje Google John Mueller vysvětluje :

'Google v současné době zkoumá verzi webu pro počítače a poté na základě těchto informací stanoví, jak bude hodnotit mobilní web.' Jakmile se tato aktualizace objeví, stane se pravý opak. Google začne prohlížet vaše mobilní stránky a podle toho vyhodnotí stránky pro počítače. “

Aktualizace oficiálně vstoupí do hry v září 2020, ale 70 procent webových stránek zobrazené ve výsledcích vyhledávání jsou již hodnoceny na základě tohoto indexovacího algoritmu prvního mobilního telefonu.

Statistika Google

A konečně, mnoho uživatelů načítá mobilní webové stránky pomocí pomalého a slabého telefonního připojení. Ve výsledku musí značky vytvořit design mobilního webu, který se rychle načte.

Svět je nyní celkově první na mobilních zařízeních - a proto potřebujete mobilní responzivní web.

8 návrhových tipů z nejlepších mobilních webových stránek

V této části se blíže podíváme na osm tipů pro design mobilních webů, které můžete použít. Navíc uvidíte příklady z reálného života z nejlepších mobilních webů na webu.

1. Použijte velká tlačítka

Webové stránky vhodné pro mobily musí mít dostatečně velká tlačítka, aby na ně uživatelé mohli klepnout, aniž by je museli přibližovat.

Mezi hypertextovými odkazy navíc musí být mezera. Pokud jsou odkazy umístěny příliš blízko u sebe, uživatelé se mohou pokusit kliknout na odkaz a omylem kliknout na jiný.

Shopify používá velká tlačítka a dává velký prostor mezi hypertextovými odkazy na svém mobilním designu webových stránek.

Shopify velká tlačítka

Když tedy navrhujete svůj mobilní responzivní web, mějte na paměti mezery a zajistěte, aby na každý hypertextový odkaz bylo možné snadno kliknout.

2. Zvětšete text tak, aby byl dostatečně čitelný

Tenhle se může zdát trochu zřejmý, ale je také zásadní pro design webových stránek vhodných pro mobilní zařízení.

Uživatelé by nikdy nemuseli něco přiblížit - ani rolovat doleva či doprava - aby si něco přečetli. Text by měl být vždy dostatečně velký, aby se dal pohodlně číst.

V níže uvedeném příkladu z Beardbrand , můžete vidět, že veškerý zobrazený text dokonale odpovídá velikosti obrazovky.

Velký text Beardbrand

Zvětšete svůj text na obrazovkách všech velikostí tak, aby uživatelé mohli snadno číst, co říkáte.

3. Zjednodušte nabídky

Nabídky webových stránek pro počítače mají spoustu místa. Mohou zabírat celý pruh v horní části obrazovky a mají rozsáhlé možnosti rozevíracího seznamu, to vše bez omezení uživatelské zkušenosti.

U mobilních zařízení tomu tak není - prostě není dostatek místa.

Weby vhodné pro mobilní zařízení by měly používat jednoduché nabídky, které poskytují přehled o webu. Uživatelé pak mohou pomocí kategorií, filtrů nebo vyhledávací funkce vylepšit to, co hledají.

Většina webových stránek vhodných pro mobilní zařízení používá k označení nabídky symbol hamburgeru - skládající se ze dvou nebo tří vodorovných čar.

Podívejme se na dobrý příklad jednoho z nejlepších mobilních webů, Kylie Skin .

Když uživatelé klepnou na dvouřádkovou nabídku hamburgerů v pravém horním rohu obrazovky, zobrazí se jim nabídka na celou obrazovku s velkými tlačítky a textem.

Příklad mobilní nabídky KylieSkin

Při vytváření mobilního responzivního webu udržujte své nabídky jednoduché, aby uživatelé mohli snadno najít to, co hledají.

4. Poskytněte funkci jednoduchého a intuitivního vyhledávání

Funkce vyhledávání na vašem webu je obzvláště důležitá pro uživatele mobilních zařízení.

Jak již bylo zmíněno výše, zjednodušené nabídky mohou usnadnit procházení mobilních zařízení. Mohou však také uživatelům ztěžovat hledání konkrétní položky.

Abyste uživatelům usnadnili hledání toho, co chtějí, umístěte funkci vyhledávání dopředu a dozadu.

Shopify uživatel Tělocvična umístí vyhledávací funkci do horního pruhu stránky. K dispozici je také intuitivní funkce filtru, která uživatelům usnadní hledání konkrétních typů produktů.

Funkce vyhledávání a filtrování Gymshark

Klíčové jídlo? Udělejte z designu svého mobilního webu jednoduchou a efektivní funkci vyhledávání.

5. Usnadněte kontakt

Pokud zákazník hledá vaše kontaktní údaje, mohl se dostat do potíží - což znamená, že je již pravděpodobně trochu frustrovaný. Nepřidávejte urážku ke zranění tím, že vás bude obtížné kontaktovat.

jak přidávat další videa na instagram

Zvláště když 84 procent spotřebitelů zvážit služby zákazníkům být klíčovým faktorem při rozhodování, zda provést nákup.

Statistika zákaznického servisu

Zde je další skvělý příklad designu mobilního webu od uživatele Shopify Bremont . Tato značka luxusních hodinek umístí ikonu chatu v pravém dolním rohu obrazovky, což návštěvníkům webových stránek umožňuje rychle a snadno kontaktovat zástupce.

Možnosti kontaktu Bremont

Pokud nemůžete nepřetržitě nabízet živý chat, zvažte propojení s a Facebook chatbot , nebo jednoduše zadejte kontaktní formulář, ke kterému mají uživatelé přístup prostřednictvím odkazu „Kontakt“ v nabídce.

6. Vytvořte jednoduché formuláře

Uživatelé mohou mít větší tendenci vyplňovat dlouhý formulář na počítači, protože obrazovka je větší a je snadnější psát pomocí klávesnice.

Na mobilních zařízeních musí být formuláře kratší s velkými textovými poli a tlačítky.

Pokud například žádáte uživatele, aby se zaregistrovali do vašeho seznamu adres, neměli byste požadovat více než jméno a e-mailovou adresu.

Pokud potřebujete zahrnout více otázek, odpovězte na ně rychle a snadno.

V tomto příkladu designu mobilního webu od uživatele Shopify QuadLock , můžete vidět velká pole s jednoduchými požadavky na formulář. K dispozici je dokonce rozbalovací nabídka, která uživatelům pomůže poskytnout informace o jejich dotazu.

Kontaktní formulář QuadLock

Stručně řečeno, ujistěte se, že vaše formuláře jsou krátké a sladké.

7. Vytvářejte výzvy k akci přitahující pozornost

NA výzva k akci - také známý jako CTA - je obrázek, banner nebo text, který doslova vyzývá uživatele, aby podnikli nějakou formu akce.

Můžete například vyzvat uživatele, aby se přihlásili k vašemu účtu poštovní seznam , dozvědět se více o nabídce nebo zakoupit produkt.

Tato marketingová taktika hraje zásadní roli v designu mobilních webových stránek.

Může však být náročné vytvářet přesvědčivé výzvy k akci s tak omezeným prostorem na obrazovce, se kterým si můžete zahrát.

Na tomto mobilním webu příklad od uživatele Shopify Luxusní vlasy , můžete vidět dva bannery s výzvami k akci. První propaguje nový produkt, který je dodáván s dárkem zdarma, a druhý vybízí uživatele, aby se dozvěděli více o zásadách bezplatné dopravy a 90denní výměně značky.

Luxusní výzvy k akci na vlasy

Když vytváříte CTA pro váš web vhodný pro mobilní zařízení, nechte je vyniknout umístěním nad záhyb stránky, kde je uživatelé mohou vidět, aniž by museli posouvat dolů.

8. Vyvarujte se vyskakovacích oken

Podívejme se na to: Většina lidí nenávidí vyskakovací okna. Ve skutečnosti, pokud Google „Nesnáším vyskakovací reklamy“, najdete téměř 48 milionů výsledků.

Není divu, že Google uvedl na trh změna algoritmu v roce 2017 který penalizuje weby, které na mobilních zařízeních nabízejí konkrétní typy vyskakovacích oken.

V dnešní době je pravděpodobné, že vaše hodnocení ve vyhledávání utrpí, pokud:

  • Zobrazit vyskakovací okno pokrývající hlavní obsah
  • Zobrazit samostatnou vsunutou reklamu, kterou musí uživatel zrušit, než bude mít přístup k hlavnímu obsahu.
  • Zkontrolujte, zda horní část stránky připomíná samostatnou vsunutou reklamu, a umístěte pod ni původní obsah.

Pop-up, které sají

To znamená, že některé typy vyskakovacích oken by neměly negativně ovlivnit vaše hodnocení, například

  • Vsunuté reklamy používané ke splnění zákonných povinností, jako je ověření věku, souhlas se soubory cookie nebo GDPR .
  • Přihlašovací okna pro přístup k soukromému obsahu, jako je e-mail nebo obsah, který je za paywallem.
  • Malé bannery, které lze snadno zavřít a „využívají přiměřené množství místa na obrazovce“, například bannery pro instalaci aplikací používané Chrome a Safari.

Pop-up, které jsou v pořádku

Sečteno a podtrženo, vyskakovací okna pro mobilní zařízení uživatele frustrují a mohou vám ublížit vyhledejte žebříčky , proto je používejte pouze v nezbytných případech.

Jak zjistit, zda máte web vhodný pro mobilní zařízení

Pokud vás zajímá, zda je váš web vhodný pro mobilní zařízení, zjistíte pomocí pouze chvilku Testovací nástroj společnosti Google vhodný pro mobilní zařízení - stačí zadat odkaz na váš web a kliknout na „Testovat URL“.

Tento nástroj vyhodnotí, jak je váš web vhodný pro mobilní zařízení, a poskytne vám podrobný rozpis toho, co můžete udělat pro jeho vylepšení.

Google & aposs Mobile-Friendly Test

Shrnutí: Design mobilních webů v roce 2021

Web vhodný pro mobilní zařízení je navržen tak, aby dobře fungoval na chytrých telefonech a tabletech. A teď, když je svět nejprve mobilní, by měl být i váš web.

Stručně řečeno, zde je osm tipů pro design mobilních webů:

  1. Nastavte tlačítka dostatečně velká, aby na ně lidé mohli klepnout.
  2. Zajistěte, aby byl text dostatečně velký na to, aby jej uživatelé mohli přiblížit.
  3. Zjednodušte své menu, abyste měli snadnou navigaci na malé obrazovce.
  4. Umístěte vyhledávací funkci dopředu a dopředu a umožněte uživatelům filtrovat výsledky hledání.
  5. Usnadněte uživatelům, aby vás kontaktovali.
  6. Vytvářejte snadno a rychle použitelné formuláře.
  7. Umístěte výzvy k akci nad okraj, aby byly prominentní.
  8. Vyvarujte se frustraci uživatelů vyskakovacími okny, pokud to není nezbytně nutné.

Co si myslíte o designu mobilních webů? Zmeškali jsme nějaké skvělé osvědčené postupy pro mobilní webový design? Dejte nám vědět v komentářích níže!

Chcete se dozvědět více?



^