Mobile-friendly: průvodce optimalizací mobilního webu

Mobily a mobilní internet

Lámete si hlavu, jak vyřešit přístupnost vašeho webu pro mobilní zařízení? Nevymýšlejte kolo a podívejte se do tohoto Průvodce – připravil po vás seznam základních strategií při „mobilizaci“, jejich výhody, nevýhody a pár tipů, které oceníte nejen při návrhu mobilních webů.

Překlad článku Mobile-friendly: The mobile web optimization guide, jehož autorem je Bruce Lawson. Publikujeme s laskavým svolením dev.opera.com.

Úvod

Kdybych měl euro za všechny, co se mě na konferencích ptají, jak mohou „mobilizovat“ své webové stránky, byl bych nejen mimořádně bohatý, ale i úžasně pohledný.

Je snadné uhodnout, proč si lidé přejí udělat své stránky „mobile friendly“: podle výzkumu agentury Gartner překonají mobilní zařízení v roce 2013 PC v roli nejběžnějšího zařízení pro přístup k webu. A nezapomeňte na ostatní návštěvy ze zařízení, jako jsou herní konzole typu Nintendo Wii, DSi, televize uzpůsobené pro přístup na web, prohlížeče v autech a podobně.

Mnoho zákazníků už používá mobilní zařízení jako hlavní způsob přístupu k webu, hlavně na nově vznikajících trzích – July 2009 Statistical Report on Internet Development in China uvádí, že podíl lidí přistupujících na internet pomocí mobilních zařízení významně vzrostl z 39,5 % koncem roku 2008 na 46 % v červnu 2009, zatímco podíl využití desktopů a notebooků klesl. Tahle procentuelní změna vyjádřená v absolutních číslech znamená 150 milionů lidí. V rozvinutém světě má mnoho lidí mobilní zařízení jako druhý způsob přístupu, když jsou mimo domov.

Říkat, že na webu vždycky někdo nabízí stejnou službu jako vy, je truismus. A jestli neobsluhujete mobilní uživatele, můžete si být jisti, že vaši konkurenti to dělají. V současném nepříznivém ekonomickém klimatu nebude posílání zákazníků do náruče konkurence úspěšnou obchodní strategií.

Tento článek poskytuje přehled tří hlavních strategií, jak dosáhnout toho, aby vaše webové stránky fungovaly na všech zařízeních. Budeme je nazývat „mobile-aware“ (tj. „mobilně-uvědomělé“) webové stránky, protože to nejsou stránky výhradně pro mobilní zařízení, ale budou na nich fungovat, stejně jako na různých alternativních prohlížecích zařízeních. Tyto strategie se vzájemně nevylučují; můžete je kombinovat jak to jen váš projekt, rozpočet a duševní zdraví dovolí.

Obtíže multiplatformního designu

Proč je tak obtížné najít spolehlivé informace o tom, jak nakódovat mobile-aware stránky? Konec konců, ti z nás, kteří jsou zběhlí v aplikování webových standardů, využívají nějakou tu sadu best practices už roky. Odpověď je, že trh je stále fragmentovaný, ačkoliv můžeme pozorovat více konvergence s tím, jak se zařízení stávají výkonnějšími (a v důsledku toho se zákazníci stávají náročnějšími).

Mobilní zařízení mají pestrý rozsah velikostí obrazovky a způsobů zadávání vstupu od QWERTY klávesnic přes dotykové obrazovky po tradiční numerické klávesnice. Problém je i životnost baterie; pokud vaše nová webová aplikace vysává baterii vašeho návštěvníka, pravděpodobně nebude mít úspěch, bez ohledu na to, jak skvělá jinak je.

Pak je tu fakt obrovské rozmanitosti zařízení a prohlížečů, běžících na těchto zařízeních. Chytré telefony mohou mít plnohodnotné prohlížeče jako Opera Mobile nebo Safari/iPhone, zatímco v rozvojovém světě vidíme více low-endové handsety, které nemají operační systém, ale pokud na nich může běžet Java, mohou používat Operu Mini (tenký klient k proxy systému, který komprimuje stránky na zhruba 10% jejich originální velikosti před jejich odesláním k vyrenderování na handsetu – podívejte se na naše srovnání Opera Mobile a Opera Mini). Měsíční zpráva o stavu mobilního webu od Opery přináší užitečný rozbor různých handsetů používaných ve světě.

Musíte si zapamatovat tohle…

Mantra multiplatformního vývoje je: jeden web pro všechny je ideální, ale ne vždy možný. Ať už použijete kteroukoliv strategii, je tu jedna důležitá věc k zapamatování:

Mobilní uživatelé jsou úkolově orientovaní. Ale to jsou všichni!

Mnoho vývojářů a odborníků na použitelnost obhajuje vytváření stránek pouze pro mobilní zařízení tím, že mobilní uživatelé spěchají; neustále jsou zaměstnaní, takže chtějí vykonat jeden specifický úkol a pak skončit. Běžně uváděný příklad je web restaurace. Mobilní uživatel chce najít lokaci, menu a otevírací hodiny, takže se vyvozuje, že mobilní stránka by měla obsahovat tohle a nic jiného.

To je dobrý argument, ale je jen z poloviny pravdivý. Kdyby byl pravdivý na sto procent, tak co by bylo na tom „plném“ webu? Nejspíš video dekorace a zařízení restaurace, nějaká atmosférická hudba, animované znázornění specialit podniku, a možnost stáhnout si menu v nějakém pěkném fontu… Omyl spočívá v předpokladu, že uživatelé desktopových počítačů nejsou zaměření na vykonávání úkolů a mají čas nazbyt, který rádi věnují plnému estetickému prožitku. Pravda je, že všichni uživatelé spěchají a všichni uživatelé chtějí najít informace, pak opustit váš web a jít dělat něco zajímavějšího – jako třeba vzít svého partnera či partnerku na večeři. Měli byste se proto snažit zredukovat všechno zbytečné haraburdí a šetřit čas všem uživatelům – jeden web by měl být schopen uspokojit potřeby mobilních i desktopových uživatelů.

Mantra č. 2: to, že vám desktopový web umožňuje zaplnit více místa, ještě neznamená, že byste to měli udělat.

Strategie č. 1: Kódujte dobře a pro mobilní uživatele nedělejte nic speciálního

Současné pokročilé mobilní prohlížeče jsou velmi dobré v přeuspořádávání obsahu i bez toho, aby jim vývojář určil, jak. Na uživatelův požadavek posouvají a zoomují, reformátují stránku do jediného sloupce, odstraní obrázky a umí i další věci.

Dobrý semi-liquid layout, který má v CSS nastavené min-width a max-width a typografii založenou na em, bude velmi dobře fungovat napříč škálou různých zařízení a velikostí obrazovky. Tohle se asi bude vašim specialistům na marketing a branding líbit víc než osekaná „mobile-only“ verze, a také uživatelům zvyklým na plnohodnotný desktopový web to bude bližší.

Lidem, kteří si vypínají obrázky, aby zrychlili načítání stránky (a aby ušetřili peníze v případě, že platí za MB, což je stále běžné na mobilních zařízeních, a také v rozvojovém světě), můžete pomoci tím, že budete kódovat s ohledem na přístupnost. Používání správného alternativního textu u obrázků pomáhá nejen těm, kteří obrázky nemohou vidět kvůli svému postižení, ale i těm, kteří se rozhodnou si obrázky nestahovat.

Existují i další paralely mezi mobilním prohlížením a přístupností: starší zařízení nemusí zobrazovat barvy nebo speciální fonty, takže požadavek přístupnosti nespoléhat se na barvy nebo vizuální prvky pro sdělení informace je vhodný i zde. Zabezpečení dobrého kontrastu mezi popředím a pozadím je důležité; už jste se někdy museli přemístit do stínu, abyste mohli číst ze svého telefonu, protože na slunci jste nedokázali správně rozeznat text?

Užitečnou vzájemnou referenci mezi mobilními best practices a pravidly přístupnosti najdete v Relationship between Mobile Web Best Practices (MWBP) and Web Content Accessibility Guidelines (WCAG).

Další best practices z desktopového vývoje mají prospěšné vedlejší účinky pro vývoj multiplatformních webů. Např. CSS sprites byly vyvinuty proto, aby bylo možné obejít se bez potřeby použít JavaScript pro preload obrázků na pozadí, což samo o sobě bylo obcházením problému s problikáváním obrázků při načítání. V mobilním světě zabere každý požadavek přes síť nepředvídatelně dlouhý čas, a CSS sprites nám umožní snížit počet HTTP požadavků; interakce díky tomu působí rychleji a web lépe reaguje.

A jestli máte chuť se do toho vrhnout po hlavě, můžete zkusit přidat trochu koření z plně mobile-aware metodologie. Například jestli máte v nějakém elementu na pozadí obrázek, můžete použít novou vlastnost background-size , takže obrázek v pozadí se bude velikostí přizpůsobovat tak, aby vyplnil svůj container.

Strategie č. 2: Udělejte zvláštní „mobilní“ web

Tohle může být nejrychleji dosažitelná možnost v případě webu založeného na nějakém redakčním systému, ale nemusí to být ta nejlepší možnost z dlouhodobého hlediska: výsledkem je, že máte dva weby k uživatelskému testování, udržování atd. Samozřejmě, v komerční sféře může být nejrychlejší a nejsnadnější často považováno za synonymum pro „nejlepší“, takže se podívejme, jak to funguje.

Mobilní web obvykle na sebe bere podobu m.example.com a obecně má stejnou strukturu jako plný web. S každým alespoň trochu slušným CMS je možné toho snadno dosáhnout.

Pak potřebujete na straně serveru implementovat detekci pro přesměrování ne-desktopových prohlížečů na mobilní verzi. K tomu potřebujete udržovat seznam UA řetězců, které prohlížeče posílají serveru s každým požadavkem (podívejte se v Opeře na váš UA řetězec přes Nápověda > O aplikaci Opera) – tímto způsobem se prohlížeče identifikují serverům, kterým posílají požadavky. Testujte UA řetězce prohlížečů, které přistupují na váš web, a sledujte, jestli souhlasí s řetězci zaznamenanými ve výše zmíněném seznamu UA řetězců a jestli identifikují daný prohlížeč jako mobilní. Pokud ano, pošlete jim mobilní verzi vašeho webu.

Samozřejmě, když se na trhu objeví nový prohlížeč, seznam musí být aktualizován, protože jinak bude vracet chybné výsledky, což povede k otráveným uživatelům přesměrovávaným na špatný web.

Nemůžeme doporučit žádný specifický kód pro detekci prohlížečů, protože to, co funguje dnes, může velmi snadno zastarat, není-li to aktivně udržováno. Jako příklad, User Agent (UA) řetězec pro rodinu prohlížečů Opera 10 uvádí „Opera/9.80“. To proto, že beta verze uváděla „Opera/10“, což však odhalilo problém – weby s detekcí prohlížeče blokovaly přístup, protože mylně detekovaly prohlížeč jako Opera 1, jelikož jejich autoři nepočítali s dvoucifernými čísly. Takže se mějte na pozoru: používáte-li detekci prohlížeče, připravte se na neustálé přepisování a nasazování nových verzí skriptů na každém webu.

Kupříkladu fragment UA řetězce „Mobi“ je užitečný identifikátor pro Operu Mobile; fragment řetězce „Mini“ je užitečný identifikátor pro Operu Mini. Opera může být identifikována také pomocí JavaScriptu, testováním přítomnosti objektu  window.opera.

Sofistikovanější metodou detekce prohlížeče je Wireless Universal Resource File (WURFL); což je XML soubor, který obsahuje informace o schopnostech a vlastnostech mnoha mobilních zařízení. To vám umožní testovat vlastnosti, ale vyžaduje to, aby úplně všechny handsety na planetě byly v databázi se správně identifikovanými vlastnostmi. A samozřejmě je potřeba jej neustále udržovat aktuální.

Protože detekce prohlížeče nikdy není zajištěná proti změnám v budoucnosti, je absolutně nezbytné mít na každé stránce odkaz, který uživatele pošle na plnou verzi stránek a tuto volbu si uloží do cookie. Díky tomu v situaci, kdy váš serverový skript nerozpozná prohlížeč Whizzo (protože ten skript byl napsán předtím, než byl prohlížeč Whizzo vymyšlen), pošle uživatele sice na mobilní web, ale uživatelé tohoto prohlížeče mohou jednoduše kliknout na odkaz „zobrazit standardní stránky“ a díky tomu se nadále pokaždé dostat na plný web.

Vytvoření šablony

Budete potřebovat navrhnout osekanou šablonu, s jednoduchým brandingem, žádnými webovými fonty atd. pro CMS, do kterého budete vkládat váš obsah.

Protože vynakládáte spoustu úsilí k zajištění toho, že váš web bude pro mobilní zařízení, měli byste prohlížeči naznačit, že jste už vše vymysleli a že tedy nemusí provádět všechno to chytré reformátování, které tyhle zařízení umějí. Jeden způsob, jak mu tohle sdělit, je metatag viewport.

metatag viewport

Když načítáte web v plnohodnotném mobilním prohlížeči jako je Opera Mobile, začnete s odzoomovaným náhledem stránky a můžete se posouvat a zoomovat do specifických oblastí webu několika kliknutími. Zatímco tenhle přístup funguje pro většinu stánek přijatelně, je možné vylepšit vašim návštěvníkům uživatelský prožitek tím, že jim stránku ukážete už nazoomovanou. Tento přístup funguje obzvlášť dobře u webových aplikací, protože díky tomu lépe vzbuzují dojem aplikace.

Opera Mobile defaultně předpokládá stránku o šířce 850 pixelů, a odzoomovaný náhled přiměřeně změní tyto hodnoty tak, aby zapadly do obrazovky zařízení. S metatagem viewport v hlavičce stránky můžete tuto defaultní šířku přepsat a místo ní libovolně nastavit v pixelech hodnoty jako 320, 480 atd. Pro kompatibilitu napříč zařízeními doporučujeme nastavit šířku na  device-width:

<meta name="viewport" content="width=device-width" /> 

Tohle přizpůsobí šířku stránky tak aby byla využita plná šířka obrazovky, nebo jinak vyjádřeno, udělá z jednoho CSS pixelu jeden pixel na obrazovce.

Více si můžete přečíst v Úvodu do metatagů viewport and @viewport nebo v článku Mobilizujeme web v HTML5.

Strategie č. 3: Tvořte mobile-aware adaptivní weby

Metodologie ze všech nejobtížnější na zvládnutí je ta, která může návštěvníkům vašeho webu přinést to nejlepší z obou světů. Plně mobile-aware web, jednoduše přeloženo jako web, který si je vědom mobilních zařízení a je na ně připravený, má přizpůsobující se obsah, který reaguje na schopnosti zařízení, a je tedy připravený i na to, co ještě ani neexistuje a objeví se teprve v budoucnosti, protože testuje schopnosti zařízení  místo prostého detekování prohlížečů.

Jádrem této techniky jsou CSS Media Queries (viz Webdesignérův průvodce po CSS3: Media Queries), které podporuje Opera Desktop, Opera Mini a Opera Mobile, Safari (desktop a iPhone/ iPad), Chrome, Firefox a Internet Explorer 9.

Media Queries jsou novinkou v CSS3, která vám umožní specifikovat, za jakých podmínek se má použít styl nebo specifická sada CSS pravidel. Například abychom omezili použití sady stylů pouze na obrazovky, které jsou široké 480px nebo méně, můžeme použít následující Media Query:

@media screen and (max-width: 480px) {
    background-color: red;
    font-size: 1.5em;
} 

Samozřejmě, není pravděpodobné, že byste chtěli veškerý text změnit na červený. Ale mohli byste chtít použít „široké“ firemní logo jako obrázek do pozadí záhlaví nebo zápatí na obrazovkách desktopové velikosti, zatímco pro menší obrazovky použijete úzkou verzi.

@media screen and (min-width: 800px {
   #footer {background-image: url(wide-banner.png);}
}

@media screen and (max-width: 800px {
   #footer {background-image: url(narrow-banner.png);}
} 

Další běžné využití je pro reformátování layoutu. Tady je jednoduchý příklad Media Queries na ukázku. Na široké obrazovce má stránka tři sloupce. Jestliže obrazovku zúžíte, uvidíte, jak stránka změní layout na dvousloupcový (také se změní font pro zdůraznění faktu, že je použito jiné CSS). Další zúžení stránky vám ukáže jednosloupcový layout, a na opravdu úzké šířce je obsah skryt pomocí {display:none;} a místo toho je zobrazen milý obrázek.

Jeden stylesheet obsahuje několik odlišných požadavků:

@media screen and (min-width: 800px) {
   @font-face {
     font-family: "demand";
     src: url("demand.ttf") format("truetype");
   }
   h1 {font-family: demand, cursive}
}


@media screen and (min-width: 480px) and (max-width: 800px) {
   body {font-family:"Comic Sans MS", fantasy, cursive;}
/* [etc] */
}


@media screen and (min-width: 400px) and (max-width: 480px) {
   body {font-family:"Courier New", Courier, monospace;}
/* [etc] */
}


@media screen and (max-width: 400px) {
   #main {background-image: url(bruce.png); position: absolute; top: 0; text-indent: -10000em; height: 500px; width: 100%;}
   h1, #sidebar, #footer, #pub {display: none;}
}

Povšimněte si vztahu k šířce viditelné oblasti prohlížeče: když je stránka načtena do desktopového prohlížeče, šířka viewportu je totožná jako šířka okna prohlížeče; když je načtena v Opeře Mobile 10, šířka viewportu je defaultně 850 pixelů, pokud není přepsána pomocí metatagu  viewport.

Můžete si to sami vyzkoušet, když náš Media Queries + viewport příklad vyzkoušíte v Opera Desktop a potom v Opera Mobile 10, Opera Mobile emulátoru na vašem desktopu, nebo v Opera Mini. Na desktopu dostaneme třísloupcový layout pro šířky prohlížeče větší než 800 pixelů – stránka získá odlišný layout, když změníte velikost okna prohlížeče. V Opera Mobile 10 běžící na zařízení s fyzickou šířkou obrazovky menší než 400 pixelů (například Nokia 5800 v módu portrétu má šířku 360 pixelů) metatag viewport s šířkou nastavenou na width=device-width aktivuje @media screen and (max-width: 400px) { ... } a třísloupcová stránka se změní v jednosloupcovou stránku.

V souvislosti s Media Queries je potřeba porozumět třem základním bodům:

  1. Tato technika netestuje jednotlivá zařízení nebo prohlížeče, jen schopnosti, takže je ve své podstatě „future-proof“, tj. zabezpečená proti změnám v budoucnosti
  2. Nepoužívá se zde žádné přesměrovávání na odlišné stránky; je to jedna stránka na všechno
  3. Media Query se testuje dřív, než je cokoliv stahováno. Takže pokud je cokoliv otestováno jako false, nestahuje se to, což šetří přenosovou kapacitou a zrychluje zobrazování.

Zde je další příklad na CSS Media Queries a viewport. Můžete zhlédnout screencast Mobile web development techniques od Andrease Bovense.

Používání Media Queries na vypnutí CSS, které požírají zdroje

Může se stát, že zjistíte, že některé části vašich CSS se vykreslují pomalu na zařízeních s omezenými zdroji nebo příliš zatěžují CPU a vyčerpávají baterii. Viníkem může být prohlížeč nebo samotné zařízení, ale třeba takové CSS transformace a přechody a box-shadow jsou známé svou nenasytností.

Vzhledem k tomu, že CSS je čistě stylistická záležitost, můžete se rozhodnout, že bude lépe podobné efekty v mobilní verzi vypnout.

Další užitečné mobile-friendly techniky

Ať už pro svoje mobilní weby použijete kteroukoliv primární metodu, můžete použít některou z následujících technik:

Kombinujte soubory a redukujte počet requestů po síti

Jak už bylo zmíněno, nejpomalejším prvkem při jakémkoliv využití webu na mobilním zařízení je síť. Každý obrázek, CSS soubor, JavaScriptový soubor, obrázek do pozadí apod. je volán přes síť, a každý z těchto HTTP requestů zabere nepředvídatelně dlouhý čas. Už jsme zmínili CSS sprites, ale další užitečné techniky následují:

  • Zkombinujte tolik skriptů kolik jen můžete do jednoho souboru (např.  utilities.js)
  • Zkombinujte tolik stylesheetů kolik jen můžete do jednoho souboru
  • Minifikujte vaše .js a .css soubory
  • Ujistěte se, že váš server používá gzip na komprimování všech souborů, které posílá
  • Zvažte použití Data URI (viz Datová URL pomohou s malými soubory) pro obrázky a CSS background obrázky. Tímto způsobem můžete data zahrnout přímo do webových stránek. Například:
<img src="data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABGdBTUEAALGP
C/xhBQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9YGARc5KB0XV+IA
AAAddEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIFRoZSBHSU1Q72QlbgAAAF1J
REFUGNO9zL0NglAAxPEfdLTs4BZM4DIO4C7OwQg2JoQ9LE1exdlYvBBeZ7jq
ch9//q1uH4TLzw4d6+ErXMMcXuHWxId3KOETnnXXV6MJpcq2MLaI97CER3N0
vr4MkhoXe0rZigAAAABJRU5ErkJggg==" alt="Red dot" /> 

Tohle do stránky vloží červený bod, ale žádný obrázek není vyžádán ze serveru, protože je zakódován přímo do tohoto řetězce písmen a čísel. Ian Hicksonutilitu na enkódování Data URI (zdrojový kód utility). Tahle technika může nafouknout velikost souboru, ale to je často lepší než nutnost čekat na síť kvůli stahování externího souboru s obrázkem.

Používejte pro obrázky SVG (Scalable Vector Graphics)

SVG je technologie, která umožňuje vyjádřit obrázky matematicky, aby je prohlížeč mohl vykreslovat prostřednictvím markupu. Takže místo bitmapového obrázku např. kruhu a čtverce můžete popsat tvary:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink">
   <circle cx="100" cy="100" r="30" fill="blue" stroke="red"/>
   <rect x="10" y="10" width="80" height="40" fill="yellow" stroke="black"/>
</svg> 

Prohlížeč to potom vykreslí následovně:

Hlavní výhoda spočívá v tom, že můžete zoomovat jak jen chcete, a obrázek nikdy nebude pixelovatý, protože je pokaždé prohlížečem překreslen – takže bude vypadat ostře na malé obrazovce stejně jako na širokoúhlé televizi s podporou webu.

Velikost SVG souboru bude obvykle zlomková oproti ekvivalentu v podobě bitmapového obrázku. Pokud použijete XHTML doctype a naservírujete to prohlížeči jako XML, můžete prostě vložit SVG kód přímo do markupu, takže ušetříte síťový požadavek ke stažení toho obrázku. V blízké budoucnosti budete moci dělat totéž i pomocí HTML5.

SVG soubory také fungují s CSS/Media Queries – tady je fragment SVG souboru, který vykreslí kruh a vyplní jej různými barvami v závislosti na jeho průměru (viz SVG/Media Queries coloured circle demo):

@media screen and (max-width: 350px) {
   #circle {fill:  #879758;}
}
@media screen and (max-width: 200px) {
   #circle {fill: #3b9557;}
} 

Pomocí této techniky můžete zjednodušit loga v menších velikostech. V SVG/Media Queries simplified logo demo můžete vidět, že logo na levé straně využívá Media Queries k odstranění spirály, když je logo zmenšeno, a následně ve velmi malé velikosti je zcela odstraněn vnější kruh.

@media screen and (max-width: 256px) {
   #spiral {display: none;}
}

@media screen and (max-width: 16px) {
   #circle1, #circle2 {display: none;}
} 

Logika je obsažena v SVG souboru samotném, takže jakmile je jednou napsaná, může být začleněna kamkoliv a nevyžaduje žádné skriptování.

Umístěte elementy script ve zdrojovém kódu nejníž, jak je možné

Prohlížeče se pozastaví, když stahují skripty v elementech script, obsažených v HTML souborech. Takže vložte tyto script elementy ve zdrojovém kódu tak dolů, jak je to možné. Má to psychologický důvod; jestliže je vaše obrazovka plná obsahu ke čtení (který je umístěný před script elementem), stránka bude působit rychleji, protože uživatel už může číst obsah, zatímco se čeká na načtení interaktivních prvků.

(HTML5 specifikuje způsob, jak mohou prohlížeče stahovat a vykonávat skripty bez blokování, s využitím atributů defer a async , ale podpora je zatím nekompletní a specifikace se může změnit.)

Uveďte rozměry obrázků v HTML

Vždy uvádějte rozměry všech obrázků ve vašem HTML, takže prohlížeč vykreslí textový obsah nejdříve a nechá správné místo pro obrázky, které se teprve stahují (což zabere více času, protože obrázky jsou podstatně větší než textový obsah). Jakmile jsou stažené, naskočí v prázdných místech, která pro ně byla ponechána.

Když nevymezíte velikost obrázku, prohlížeč si nenechá žádné místo. A když obrázky nakonec dorazí po síti, prohlížeč musí přeuspořádat text, aby pro ně udělal místo. Jestliže uživatel právě něco četl a náhle mu to poskočí a odscrolluje ze stránky, aby vzniklo místo pro obrázek, pravděpodobně ho to znechutí nebo naštve. Navíc každé překreslení obrazovky potřebuje spoustu cyklů procesoru, a tudíž se rychleji vybíjí baterie.

Seznamte se s HTML5

HTML5 má mnoho aspektů, které mohou udělat vývoj pro zařízení snadnější. Například můžete uložit informace v prohlížeči pomocí local nebo session storage (viz Webdesignérův průvodce po HTML5: WebStorage) a nemusíte se spoléhat na cookies.

HTML5 poskytuje nativní validaci v prohlížeči pro jisté generické typy formulářů; můžete testovat, jestli je určitý prvek číslem v jistém rozsahu, nebo odpovídá jistému regexpu, nebo jestli vyžadované pole je vyplněné atd., a to bez použití JavaScriptu. Vyzkoušejte HTML5 forms demo v Opeře a uvidíte to v akci. Navíc, některé mobilní prohlížeče, které mají své vlastní zabudované klávesnice (jako WebKit na iPhone) nabízejí přizpůsobenou klávesnici v závislosti na tom, zda typ formuláře je nastaven na e-mail, číslo, telefon atd.

Využívejte progressive enhancement

Pravděpodobně ve své práci používáte metodologii progressive enhancement tak jako tak. V mobilním kontextu by to mohlo být nazýváno „nejprve mobilní“.

Nepředpokládejte podporu pro skriptování nebo Ajax. Například Opera Mini renderuje stránky na serveru a posílá snímek stránky na zařízení, takže stránka se nezmění, dokud na ní uživatel něco neudělá, a není tu žádný způsob, jak by skripty mohly běžet na pozadí. Uživatel musí něco udělat, co donutí Mini ozvat se serveru, aby se JavaScript odpauzoval. Výsledkem je, že nemůžete očekávat, že by věci jako JavaScriptové animace nebo načasované ajaxové updaty běžely na pozadí tak jako na desktopovém prohlížeči.

Podobně byste neměli nic předpokládat o schopnostech animace (canvas, SVG animace, animované GIFy), fontech, barvách a podobně.

Vývoj pro Operu Mini je do hloubky dokumentován v článku Opera Mini: web content authoring guidelines.

Geolokace

Geolokace není jen na mobilních telefonech (je i v moderních desktopových prohlížečích), ale vzhledem k tomu že většina hig-endových telefonů má GPS zařízení a telefony jsou při svém využívání v pohybu, je zde velký potenciál pro využití W3C Geolocation API (viz Geolokace v prohlížeči) pro užitečné aplikace.

Je ale důležité zajistit, že geolokace je přidána spíše jako vylepšení než nezbytnost; uživatel si může vybrat možnost nesdílet svoji lokaci s webem z důvodu ochrany soukromí, nebo mu dochází baterie (GPS mohou vybíjet baterie rychle) nebo je v oblasti, ve které je pokrytí slabší, takže přesnost je nízká.

Dobrý příklad progressive enhancement je owlsnearyou.com, web uvádějící místa spatření sov ve vaší oblasti. Jestliže tento web navštívíte s prohlížečem, který podporuje geolokaci, a potvrdíte, že si přejete sdílet vaši lokaci, API předvyplní vyhledávací pole místem, které detekuje jako vaši současnou pozici. Pokud to není správně (nebo pokud jste třeba v Londýně a chcete se podívat na místa spatření sov ve Skotsku), můžete jednoduše napsat novou destinaci do vyhledávacího pole.

Pokud váš prohlížeč geo nepodporuje, nebo pokud odmítnete poskytnout svoji lokaci, vyhledávací formulář je prázdný, takže můžete vepsat jméno místa nebo směrovací číslo.

Testujeme, testujeme, jedna dva tři…

Na závěr tohoto článku si ukážeme několik tipů pro snadnější testování webů na mobilních prohlížečích.

Testování v Opera Mobile a Opera Mini

Opera Mobile emulátor může být nainstalován na vašem desktopu a dá se použít k testování jakýchkoliv souborů, které jsou na vašem lokálním stroji nebo síti, dřív než se spustí naostro. Je to plný produkt – stejná codebase – takže si můžete být jistí, že je to přesné. Opera Mobile emulátor vám umožňuje změnit UA string, takže můžete napodobit Nokia/S60, Windows Mobile a Android verze prohlížeče, debugovat Opera widgety a využít Opera Dragonfly k debugování.

Pokud nemáte na svém telefonu Operu Mini (je dostupná pro více než 800 různých handsetů, takže by zde měla být i verze pro vás!), můžete web testovat s použitím webového Opera Mobile emulátoru. Povšimněte si, že díky povaze tohoto produktu musí jít stránky prohlížené v Opera Mini přes servery Opery, takže vámi testované stránky musí být někde na webu (ačkoli je můžete skrýt za heslem, takže si nikdo nebude moci prohlížet vaše stránky v předprodukční fá­zi).

Testování na dalších handsetech a prohlížečích

Spojili jsme se do týmu s Perfecto Mobile, kteří provozují službu, která vám umožňuje vzdáleně testovat na různých handsetech. Uživatelé Opery se mohou přihlásit pro sedm hodin testování zdarma. Navíc, firmy jako Apple a Palm nabízejí emulátory pro testování na jejich produktech.

Debugování zařízení s Opera Dragonfly

Jako u dřívějších verzí Opera Mobile, Opera Dragonfly vám umožňuje debugovat webové stránky zobrazené na vašem mobilním telefonu vzdáleně z vašeho desktopu. Chcete-li ladit stránky v Opera Mobile 10, otevřete si Opera Dragonfly v Opera Desktop (Stránka > Vývojářské nástroje > Opera Dragonfly) a postupujte podle instrukcí v našem článku o vzdáleném debugování (k dispozici je i video (YouTube).)

Shrnutí

Doufáme, že vám náš optimalizační průvodce pro mobilní zařízení připadal užitečný. Pokryli jsme tři různé strategie pro to, aby vaše weby fungovaly lépe na mobilních zařízeních, přidali pár tipů a triků a poradili, jak na debugování a testování.

Zdroje

Nadšený cyklista, backpacker a freelancer vyrábějící webové stránky… a taky bývalý student sociologie stále víc fascinovaný tím, jak nové technologie mění fungování společnosti.

Věděli jste, že nám můžete zasílat zprávičky? (Jen pro přihlášené.)

Komentáře: 8

Přehled komentářů

shamot hodnotenie
František Kučera Re: hodnotenie
kyk Redakčně smazáno
dusanmsk Hudba
Pepé Re: Hudba
LuKo Re: Hudba
Lukáš Lukoko Kokoška Hodně optimistický pohled na problematicku
Čelo Re: Hodně optimistický pohled na problematicku
Zdroj: https://www.zdrojak.cz/?p=3532