Pamatujete si na internet v roce 1997? Stránky byly navrženy pro monitory s nízkým rozlišením a pomalé modemy. Text dominoval webu a občasné obrázky ve formátech JPEG a GIF sloužily pouze k ozdobení stránek. Nejčastěji jsme je ani neviděli, protože zakázání načítání obrázků bylo jedním z jistých způsobů, jak trochu zrychlit modem pro telefonické připojení. O více než deset let později se celá krajina internetu změnila. Širokopásmový přístup prostřednictvím kabelových a DSL připojení se ve vyspělých zemích stal standardem a webové stránky mohou k poskytování obsahu používat složitější prvky – více obrázků, efekty průhlednosti a dokonce i video. Můžeme dokonce streamovat celé filmy z internetu do našich počítačů, aniž bychom čekali na stažení souborů!
Navzdory masivnímu posunu k monitorům s vysokým rozlišením, vysokorychlostním přenosovým rychlostem a sofistikovaným grafickým schopnostem měl druhý trend obrovský dopad na dnešní World Wide Web. S tím, jak se technologie telefonů stala pokročilejší a dostupnější, se smartphony staly nedílnou součástí internetového zážitku. Mobilní zařízení představují klíčovou bránu k webu pro miliony uživatelů, kteří nemají osobní počítače. Například v Indii vzrostlo používání oblíbeného webového prohlížeče Opera Mini mezi březnem 2010 a březnem 2011 o 300 procent. V mnoha částech světa není oknem k internetu 23palcový monitor, ale 3palcová obrazovka telefonu. I levné, hloupé telefony bez dotykových obrazovek nebo výkonného hardwaru mohou procházet web.
Do obrazu se dostávají mobilní weby. Protože se popularita mobilního internetu shoduje s příchodem vysokorychlostního přístupu k internetu a výkonnějšího výpočetního hardwaru, stojí vývojáři online obsahu před jedinečnou výzvou. Webové stránky vytvořené pro velké monitory, rychlé počítače a rychlý internet do značné míry spoléhají na grafiku a pokročilá softwarová řešení, která ne vždy fungují na malých obrazovkách a pomalých sítích mobilních zařízení. Řešení spočívá v mobilních webech – stránkách, které jsou speciálně přizpůsobeny pro práci na malých zařízeních a poskytují důležitý obsah a zároveň snižují grafiku, která zpomaluje načítání stránek. I když jsou mobilní weby záměrně jednodušší než plné verze, neznamená to, že je lze snadno vytvořit. Mobilní webové stránky stále vyžadují pozornost věnovanou designu a technologii a přísná omezení mobilního hardwaru tento úkol nijak neusnadňují.
Proč mobilní weby potřebují speciální designová řešení
Přechod z prohlížeče na stolním počítači do mobilního není jen o zmenšení obrazovky. Tím se zbavíte nadměrného hluku. Když navrhujete mobilní web, nezmenšujete pouze prvky. Přemýšlíš o tom, co je opravdu důležité.
Uživatelé stolních počítačů očekávají vizuální přitažlivost. Mají šířku pásma a počet pixelů, aby to zvládli. Mobilní uživatelé? Ne tak moc. Uživatel s 3G připojením ve venkovské oblasti nebude muset čekat na načtení hlavního banneru. Potřebuje text. Potřebuje data. Pokud na mobilním zařízení vnutíte prostředí stolního počítače, nejste inovativní. Stáváte se překážkou.
To vytváří specifický problém pro vývojáře. Jak vyvažujete potřebu bohatého obsahu s realitou omezených zdrojů?
Hlavní omezení designu mobilního webu:
- Prostor na obrazovce je omezený. 3″ obrazovka nemůže zobrazit stejné rozložení jako 23″ monitor. Navigace by měla být intuitivní, ne roztahaná.
- Síla hardwaru se velmi liší. Přestože se smartphony staly výkonnými, stále existují základní telefony. Kód, který běží hladce na iPhonu, může udusit základní zařízení Android nebo funkční telefon.
- Nestabilita sítě je normou, nikoli výjimkou. Na rozdíl od stabilního širokopásmového připojení doma podléhají mobilní sítě výkyvům. Těžké zdroje snižují dobu načítání.
Je to chůze po laně. Pokud odstraníte příliš mnoho, bude web vypadat rozbitý. Pokud necháte příliš mnoho, načte se stejně pomalu jako v roce 1998.
„Mobilní webové stránky jsou záměrně jednodušší než plné verze, ale to neznamená, že je lze snadno vytvořit.“
Nejde o to
Design určuje dostupné obrazovky
Všechno to vychází na čtvereční palce. Nebo přesněji na jejich nedostatek.
Dokonce i ty největší obrazovky smartphonů – ty větší než čtyři palce (10,2 cm) úhlopříčně – vypadají vedle stolního monitoru jako poštovní známky. Čísla rozlišení se mohou zvýšit, ale fyzikální zákony nelze oklamat. Vysoký počet pixelů na malém displeji stále ztěžuje čitelné zobrazení celé webové stránky. Nakonec stáhnete obrazovku, abyste ji přiblížili, a potýkáte se s rozvržením s více sloupci, které promění navigaci ve hru.
Dobrý mobilní web design není o zmenšení vašeho webu pro počítače. Jde o to začít s čistým štítem a používat rozvržení s jedním sloupcem.
To znamená kondenzovat vše do jednoho vertikálního toku. Přestavujete navigační odkazy. Odstraňujete dekorativní zbytky. Hlavní sloupec zúžíte tak, aby odpovídal skutečné šířce telefonu. Většina monitorů má široké obdélníky. A co telefony? Jedná se o vysoké pruhy. Ano, zařízení můžete otočit na šířku, ale výchozí režim je orientace na výšku. Nejprve navrhněte úzký pásek.
Pak je tu otázka vstupní metody.
Desktopové prohlížeče spoléhají na myš. Najeďte myší na nabídku a zobrazí se rozevírací seznam. Zkuste to udělat palcem. nefunguje. Návrh mobilního webu vyžaduje přehodnocení těchto „stavů najetí“. Na nabídky je potřeba klikat, ne na ně najíždět. Tlačítka by měla být dostatečně velká na prst, nikoli na přesný kurzor. Pokud váš web spoléhá na efekty umístění kurzoru, je již na mobilních zařízeních nefunkční.
Noční můra fragmentace zařízení
Vývoj desktopů je již obtížný. Máte Internet Explorer, který hází záchvaty vzteku, Firefox dělá své a Chrome žere veškerou vaši RAM. Ale mobilní vývoj? Je to úplně jiná šelma.
Rozmanitost hardwaru je úžasná. Na jednom konci spektra jsou hloupé telefony s maličkými obrazovkami s nízkým rozlišením a základními prohlížeči. Na druhé straně jsou smartphony s jasnými dotykovými obrazovkami s vysokým rozlišením a výkonnými procesory.
Jedna velikost nesedí všem. Někdy jsou potřeba samostatná rozhraní.
Podívejte se na Facebook. Neposkytuje pouze stejný HTML kód všem. Určuje, jaké zařízení používáte. Ať už máte iPhone nebo Android, získáte přizpůsobené prostředí optimalizované pro vaši konkrétní obrazovku a možnosti prohlížeče. Pokud máte funkční telefon, získáte odlehčenou verzi.
Jeden mobilní web nestačí. Musíte navrhnout s ohledem na zařízení, nejen na prohlížeč.
Tato logika definice je mostem mezi uživatelem a správným rozhraním. Je to technologie, která umožňuje design.
Chytřejší, ne jednodušší
Zjednodušení rozhraní neznamená zjednodušení zážitku. Ve skutečnosti mohou být mobilní zařízení pro určité úkoly výkonnější než stolní zařízení.
Smartphony mají hardwarové komponenty, které PC nemají. Kamery. GPS. Akcelerometry.
QR kódy jsou dokonalým příkladem. Namiřte fotoaparát na kód a ten okamžitě otevře webovou stránku nebo si stáhne aplikaci. Není třeba zadávat URL. Není třeba hledat. Stačí naskenovat a jít.
Mapy používají data GPS k poskytování tras v reálném čase nebo doporučení restaurací na základě vaší přesné polohy. Nejde jen o „menší web“. Toto je jiný nástroj.
Vytvoření efektivního mobilního webu vyžaduje chytré využití těchto technologií na straně serveru. Není to jen o CSS a HTML. Jde o používání samotného zařízení. Design a technologie jsou dvě strany téže mince. Nemůžete mít jedno bez druhého.
Podívejme se blíže na to, jak k tomuto určení dochází. Jak Facebook pozná, že používáte iPhone a ne starou Nokii?
Povolení mobilního prostředí: zjišťování, subdomény a volba uživatele
Vidíte čisté linie a čitelný text. Vypadá to jednoduše. Pod kapotou je chaos chytrého inženýrství. Moderní web design spoléhá na Cascading Style Sheets nebo CSS. Tento kód určuje písma, barvy, výplň a šířku stránky. Obsah je uložen v databázi nebo souborech HTML. CSS rozhoduje o tom, jak bude tento obsah vypadat.
Každá výše zmíněná změna designu se odehrává zde. Aby byl váš mobilní web rychlý, nahraďte těžký obrázek na pozadí plnou barvou. To šetří šířku pásma. Díky tomu je načítání stránky rychlejší.
Vytvoření webu je prvním krokem. Přimět lidi, aby to používali, je druhý krok. Neexistuje jediný správný způsob, jak poskytovat mobilní web. Možností je několik.
Nejjednodušší metodou je odkaz. Zveřejníte to na celém webu. Zní: „Zobrazit mobilní web.“ Vývojáři často používají subdoménu, jako je m.website.com. Je snadné to poznat. Website.com vede k verzi pro počítače. m.website.com vede k mobilní verzi. Některé stránky používají i.website.com kvůli iPhonu. Kód funguje stejně.
Někteří uživatelé musí ručně zadat m.website.com. Většina webů tento proces automatizuje.
Jak mobilní weby identifikují vaše zařízení
Jiné techniky jsou složitější. Mnoho webů automaticky rozpozná typ vašeho zařízení. Rozhodují, který soubor CSS poskytnout, na základě vašeho hardwaru.
To se děje odesláním požadavku do zařízení. Server kontroluje identifikační faktory, jako je šířka obrazovky v pixelech. Přečte řetězec uživatelského agenta. Tento řádek deklaruje, který prohlížeč stránku načítá.
Dotazy na média jsou řádky kódu CSS. Odkazují na řetězec user-agent. Zdůrazňují specifické identifikační faktory. Pokud se uživatelský agent identifikuje jako mobilní prohlížeč s úzkou obrazovkou, server načte mobilní stránku.
Tato metoda má nevýhody. Některé prohlížeče umožňují zfalšovat řetězec uživatelského agenta. Nové prohlížeče uvolňují stále nové řetězce. Servery mají tendenci odesílat správné stránky na správné zařízení. Ale není to ideální.
Tento identifikační systém souvisí s další možností. Dejte uživateli na výběr. Přejděte z telefonu na stránku IMDB.com. Automaticky načte mobilní web. Také vás zve ke stažení mobilní aplikace. Aplikace nabízí více funkcí.
Výhody a nevýhody mobilních prohlížečů
Mobilní weby obecně fungují lépe než celé weby na chytrých telefonech. Jsou speciálně navrženy pro malé obrazovky. „Jedna velikost pro všechny“ funguje jen zřídka.
Ale „lepší“ je relativní pojem. Mobilní weby nabízejí omezené možnosti. Berou v úvahu omezení zařízení. Navigace často mizí. Na obrazovce není dostatek místa, aby byla nabídka stále viditelná.
Interakce s webem je nejtěžší část mobilního procházení. Procházení vstupním formulářem nějakou dobu trvá. Výběr polí je zdlouhavý. Psaní na telefonu je pomalejší než na počítači. Dotykové obrazovky a softwarové klávesnice to zhoršují.
Prohlížeče telefonu mohou ukládat soubory cookie. Pamatují si hesla, stejně jako stolní prohlížeče. Pomáhá to. Počítačové prohlížeče, jako je Firefox pro Android a Opera Mobile, mohou synchronizovat data. Uložená data přenesete z počítače. To usnadňuje prohlížení na obou platformách.
Telefony mají také triky. Stažením prstů zvětšíte text. Klepnutím na měřítko upravíte odstavec tak, aby odpovídal šířce obrazovky.
Proč Flash video nefunguje na mobilních zařízeních
Flash video je součástí každé diskuze o sledování na mobilu. Vyžaduje to hodně prostředků CPU. Vybíjí baterii. V průběhu let se to zlepšilo. Funguje na mnoha zařízeních.
Nefunguje na žádném zařízení Apple.
Apple blokuje Flash videa na iOS. Místo toho podporují HTML5 video. YouTube používá HTML5 video. Mnoho dalších stránek také.
Videa Flash můžete vložit na mobilní webové stránky. To je v rozporu se zásadami mobilního designu. Jednoduchost je největší předností mobilních webů. Načítají se rychle, protože používají text a malé obrázky. Flash to porušuje.
Umístění Flash na vaše stránky omezuje uživatele iPhone. Nemohou interagovat se stránkou. Ztrácíte velkou část publika.
Mobilní nakupování: jsou opravdu bezpečnější než nakupování na počítači?
Tady je nečekaný zvrat. Váš telefon může být bezpečnějším místem pro zadávání informací o kreditní kartě.
Většina webových virů cílí na Windows. Nefungují na iOS ani Androidu. Pro velké množství malwaru jste v podstatě neviditelní jednoduše proto, že nepoužíváte počítač. Moderní telefony podporují šifrování HTTPS a SSL, stejně jako váš notebook.
Ale nepolevuj.
Stále musíte dávat pozor na adresní řádek. Hledejte ikonu visacího zámku. Používejte pouze důvěryhodné stránky. Pokud web vypadá podezřele na počítači, bude vypadat podezřele na telefonu. Jen v menším měřítku. Oblast hrozeb se mění, ale princip zůstává stejný. Opatrnost je lepší než lítost.
Funkce návrhu mobilní stránky
Co to vůbec je design mobilní stránky?
Toto není jen menší kopie webu. Jedná se o specifickou optimalizaci pro dotykové obrazovky a úzké zobrazovací plochy. Mysli menší. Jednodušší. Bez zbytečného hluku.
Stránky pro stolní počítače spoléhají na umístění myši a přesná kliknutí. Mobilní zařízení spoléhají na palce. Tím se vše mění. Tlačítka jsou stále větší. Nabídky jsou skryté. Obsah je upřednostněn. Pokud se snažíte přečíst hustý odstavec na 6palcové obrazovce, bojujete se zařízením. Dobrý mobilní design zabrání tomuto boji ještě předtím, než vůbec začne.
Mobilní weby vs. tradiční weby
Lidé si tyto pojmy neustále pletou. Pojďme je rozlišit.
Standardní web je určen pro stolní počítače. Klávesnice. Myši. Velké monitory. Předpokládá to, že máte šířku pásma a trpělivost.
Mobilní web vytvořený pro chytré telefony a tablety. Zbavuje se nepotřebných věcí. Funkce, které nefungují na dotykových obrazovkách, jsou odstraněny. Obrázky jsou komprimované. Skripty jsou jednodušší.
Na rozdílu záleží.
Proč? Protože se mobilní weby načítají rychleji. Spotřebovávají méně dat. To není jen pohodlí pro uživatele Apple na Manhattanu. To je nutnost pro lidi v rozvojových zemích, kde je vysokorychlostní internet spíše luxusem než základní službou. Pokud je váš web těžký, nebudou ho moci načíst. Tečka.
Proč je mobilní design důležitý
Všechno se točí kolem tření.
Prohlížení ze stolního počítače je efektivní. Mobilní prohlížení je pohodlné. Internet máte v kapse. Psaní na skleněné obrazovce je ale zdlouhavé.
Díky dobrému mobilnímu designu tato nudnost zmizí. Respektuje váš čas. Respektuje váš datový tarif. Bere v úvahu skutečnost, že při používání zařízení pravděpodobně budete chodit.
Funguje zde i reklama. Ale obří vyskakovací okna? Ne. Většina mobilních prohlížečů je stejně blokuje. Google AdSense je perfektní. Malý. Ne dotěrný. Relevantní.
Mobilní web není omezená verze webu pro počítače. Je to jiná bestie. Podle toho s ním zacházejte.
