Mobilní návrh webových stránek je komplikovaný, protože jedna mobilní verze webu nemusí být kompatibilní se všemi zařízeními. Návrháři si musí být vědomi nejlepších praktických postupů, aby vaše mobilní přítomnost byla smysluplná a užitečná.
Mezi tvůrci webových stránek se neustále diskutuje o tom, jakým způsobem je nejlepší způsob vytváření optimalizované webové stránky pro mobily. Existují tři hlavní metody pro vývoj mobilních webových stránek.
Tyto jsou:
- Odpovídající webový design.
- Vyhrazené mobilní webové stránky.
- RESS: Programování na straně serveru zobrazuje CSS a HTML v závislosti na typu zařízení.
Každá metoda má své výhody a nevýhody. Webový vývojář si musí být vědom každého způsobu, jak nejlépe implementovat situaci.
3 způsoby, jak navrhnout mobilní web
Odpovídající webový design (RWD)
RWD spoléhá na dotazy médií CSS3 pro přizpůsobení rozvržení webové stránky o velikosti zobrazovací oblasti zařízení. Stejný kód HTML slouží k zobrazení různých rozvržení webových stránek pro tablety, mobilní zařízení, stolní počítače a další miniaplikace.
Výhody:
- Vaše webové stránky budou mít podobný obsah a značku HTML, takže mobilní návštěvníci budou mít stejnou zkušenost bez ohledu na druh zařízení, které používají.
- Jediná adresa URL uživatelům usnadňuje propojení a sdílení obsahu. (Pokud je webová stránka k dispozici pod více než jednou adresou URL, uživatelé se mohou zmást.)
Nevýhody:
Není možné samostatně optimalizovat mobilní obsah. Proto návrhář, který používá RWD, nemůže přizpůsobit obsah zvlášť pro mobilní uživatele.
Podle údajů z ledna 2013 z archivu HTTP je průměrná webová stránka přibližně 1,3 MB. Většina míst RWD je však relativně větší. Tato větší velikost snižuje výkon mobilních webů, což je zpomaluje.
Mobilní uživatelé jsou více přizpůsobení vzhledu návrhů uživatelského rozhraní pro konkrétní mobilní zařízení. Navíc jsou mobilní uživatelé zvyklí na multi-tasking. Pokud není navigační struktura přizpůsobena pro konkrétní zařízení, uživatelé mohou při řešení několika úkolů současně čelit problémům.
Vyhrazené mobilní weby
Tato metoda zlepšuje zkušenosti mobilních uživatelů vytvořením zcela samostatného webu.
Výhody:
- Jednoduchost řízení: Pro mobilní a stolní počítače jsou požadovány samostatné změny. Uvedené změny jsou omezeny na každou příslušnou verzi. To znamená, že změny určené pro mobilní platformu nejsou přístupné z počítače.
- Jak vyvíjíte webové stránky specifické pro mobilní zařízení, je snazší optimalizovat a optimalizovat pro konkrétní publikum.
- Struktura obsahu a navigace může být přizpůsobena pro mobilní uživatele.
Nevýhody:
Sdílení webové stránky prostřednictvím sociálních médií se stává obtížnější, protože se speciálními stránkami pro mobily existuje více adres URL pro stránky. Když uživatelé stolního počítače kliknou na mobilní adresy URL sdílené na platformách sociálních médií, mohou neúmyslně obdržet mobilní verzi webu místo verze pro stolní počítače.
Aby nedocházelo k duplicitním problémům s obsahem, musí webový vývojář používat meta tagy rel = "alternativní" a rel = "canonical". Pokud mobilní uživatel vyhledá Google a klikne na adresu URL plochy, uživatel buď prohlédne verzi počítače, nebo bude přesměrován na mobilní verzi webové stránky. Pokud mobilní verze neexistuje, uživatel obdrží chybovou zprávu.
Vytvoření úplně jiného webu pro mobilní uživatele znamená, že stránky budou upraveny speciálně pro mobilní uživatele. K dosažení tohoto cíle však musí weboví vývojáři omezit funkčnost a obsah, což se pro ně jeví jako noční můra.
Odpovídající webový design+ Komponenty na straně serveru (RESS)
Tato metoda závisí na programování na straně serveru a poskytuje vlastní HTML a CSS pro různá zařízení. Kód pro mobilní uživatele se bude lišit od kódu uživatelů.
Hlavním cílem této implementace je zlepšit výkon webových stránek. Tato metoda funguje dobře v kombinaci s citlivým webovým designem. Proto lze tuto implementaci označit jako Responsive Web Design + součásti serveru (RESS).
Výhody:
- Struktura navigace může být přizpůsobena pro různé úkoly prováděné uživateli stolního počítače a mobilních zařízení.
- Vývojáři mohou odstranit prvky stránky z HTML a CSS, aby dosáhly požadovaného zobrazení.
- Je možné odstranit z HTML kódování zbytečný JavaScript, který uvolní zdroje CPU, paměť a mezipaměť mobilních zařízení.
Nevýhody:
- Dynamické HTML zvyšuje zatížení serveru.
- Detekce zařízení nelze spoléhat.
- HTML a CSS jsou optimalizovány pro mobilní výkon. Verze plochy používá více požadavků HTTP a Java skriptů.
Která metoda zvolit?
Rozhodnutí navrhnout stránky optimalizované pro mobilní zařízení závisí na produktech, které prodáváte, na cílové skupině, požadované investice, konkurenci, míře konverze atd. Návrhová metoda, která bude nejlépe fungovat, závisí převážně na formátech obrazovky, operačních systémech, prohlížečích a rozlišení.
Nejčastěji reagující stránky webového designu nejsou optimálně implementovány a výsledkem je, že tyto stránky potřebují více času na načtení. Vzhledem k tomu, že konkurence je zuřivá, můžete přijít o zákazníky, pokud vaše stránky fungují pomaleji. Uživatel se jednoduše přepne na jinou webovou stránku, která trvá méně času, než se otevře. Ačkoli je možné vytvářet webové stránky s kratší dobou načítání se specializovanými stránkami pro mobilní zařízení, k této implementaci jsou také spojeny různé nevýhody.
RESS poskytuje výhody RWD překonávání svých dvou hlavních nevýhod. Hlavní nevýhodou RESS je, že detekce zařízení je nespolehlivá. Musíte často testovat na nových zařízeních, abyste zajistili, že proces bude i nadále fungovat správně.
K dispozici jsou služby jako DeviceAtlas, WURFL a další, které dokáží detekovat nová zařízení. Bude to skvělá pomoc při aktualizaci nových zařízení ve vaší databázi.
Mobilní webový design je úspěšný pouze tehdy, když se správně zobrazí na mobilním zařízení. I když je to pro designéry skličující úkol, aby reprezentovali všechny podstatné části desktopu v malém, mobilním okně, objevují se každodenně nové techniky, které zpřístupňují mobilní webové stránky lepšímu, rychlejšímu a plnohodnotnějšímu.
Mobilní webové stránky Fotografie přes Shutterstock
15 komentářů ▼
