Je pravděpodobné, že jste viděli, jak může iPhone převracet a rozšiřovat webové stránky. Může vám na první pohled zobrazit celou webovou stránku nebo ji přiblížit, aby byl text, který vás zajímá, čitelný. V jednom smyslu, protože iPhone používá Safari, by weboví designéři nemuseli dělat nic zvláštního, aby vytvořili webovou stránku, která bude fungovat na iPhone. Ale opravdu chcete, aby vaše stránka jen fungovala - nebo vynikla a zářila?
Když vás vytvořit webovou stránku, musíte přemýšlet o tom, kdo to uvidí a jak to uvidí. Některé z nejlepších webů berou v úvahu, na jakém typu zařízení se stránka zobrazuje, včetně rozlišení, barevných možností a dostupných funkcí. Nespoléhají se jen na to, že na to zařízení přijde.
Obecné pokyny pro vytváření stránek pro mobilní zařízení
- Vyzkoušejte co nejvíce zařízení. První věcí, kterou byste měli udělat, je prohlížet si svůj web na iPhonu a mnoha dalších mobilní zařízení nebo emulátory, jak můžete. I když můžete pro své testování použít emulátory, ve skutečnosti vám nedávají stejný pocit, jako když se pokoušíte procházet webem na malé malé obrazovce. Měli byste co nejvíce testovat na skutečných zařízeních.
- Nechte své stránky ladně degradovat. Můžete psát své stránky pro Flash povolen, širokoúhlé prohlížeče, ale ujistěte se, že jsou důležité informace viditelné i na malém monitoru, který nedokáže zpracovat žádné speciální funkce (jako jsou soubory cookie, Ajax, Flash, JavaScript atd.). Cokoli nad rámec XHTML Basic bude nad rámec některých mobilních telefonů. Zatímco většina smartphonů zvládne všechny tyto věci, jiná mobilní zařízení nemohou.
- Vytvořte stránku specifickou pro bezdrátové připojení - a usnadněte ji. Pokud se chystáte vytvořit konkrétní stránku pro zákazníky mobilních telefonů a bezdrátových sítí - zpřístupněte ji. Skvělým způsobem je umístit odkaz na bezdrátovou stránku na samém horním okraji dokumentu a poté tento odkaz skrýt před jinými zařízeními než kapesními pomocí typu ručního média. Koneckonců, většina lidí navštíví vaši domovskou stránku, dokonce i na mobilních telefonech - a pokud tam odkaz na vaši bezdrátovou stránku není, odejdou, pokud je stránka příliš obtížná k použití.
Rozvržení webové stránky pro chytré telefony
Při psaní stránek pro trh smartphonů byste měli pamatovat na to, že pokud nechcete, nemusíte provádět žádné změny. Skvělá věc na většině dostupných smartphonů je, že používají prohlížeče Webkit (Safari pro iOS a Chrome pro Android) zobrazovat webové stránky, takže pokud vaše stránka vypadá dobře v Safari nebo Chrome, bude to vypadat dobře na většině smartphonů (jen hodně menší). Existují však věci, které můžete udělat, aby bylo procházení příjemnější:
- Pamatujte, že obrazovka je malá. Smartphony zkondenzují všechny tyto sloupce dolů do malého okénka, což může způsobit, že budou bez zvětšení velmi obtížně čitelné. Většina uživatelů je zvyklá na přiblížení, ale může to být únavné. Jeden dlouhý sloupec textu je čitelnější.
- Rozdělte stránky na menší části. Může být obtížné číst dlouhé segmenty textu na mobilním telefonu, takže jejich umístění na více stránek usnadňuje čtení.
Odkazy a navigace na iPhonech
- Čím kratší jsou adresy URL, tím lépe. Pokud jste někdy zkusili zadat adresu URL na mobilním telefonu, budete vědět, že je to bolest (snad s výjimkou dospívajících, kteří jsou zvyklí posílat spoustu textových zpráv). I na iPhonu je zdlouhavé zadávat dlouhé adresy URL. Držte je krátké.
- Je však snazší klepnout na dlouhý text odkazu. Na stránce, kde je na různé články propojeno několik samostatných slov, hned vedle sebe, může být velmi obtížné klepnout na správné bez zvětšení. Mnoho lidí to vzdá a odejdou někam jinam. Odkazy, které obsahují 3 až 5 slov, se po telefonu snáze klikají než jednoslovné.
- Nenechávejte navigaci na samém horním okraji obrazovky. Není nic otravnějšího než procházet obrazovky a obrazovky odkazů, abyste našli požadované informace. Pokud jste se podívali na webové stránky určené pro mobilní telefony, uvidíte, že první, co se zobrazí, je obsah a nadpis. Pod tím je navigace.
- Nebojte se skrýt svou navigaci.Skrytí navigačních odkazů pomocí CSS nebo JavaScriptu a jejich zobrazování pouze v případě, že o to uživatel požádá, je způsob, jak uživatelům smartphone usnadnit stránku.
Tipy pro obrázky na smartphonech
- Obrázky musí být malé. Ano, Android a iPhony mohou obrázky přiblížit a oddálit, ale čím menší jsou, v obou rozměrech a době stahování, tím šťastnější budou vaši zákazníci s bezdrátovým připojením. Optimalizace obrázků je vždy dobrý nápad, ale pro stránky mobilních telefonů je to kritické.
- Obrázky se musí rychle stáhnout. Obrázky zabírají na webových stránkách spoustu místa, když je prohlížíte z mobilního zařízení. A i když jsou často velmi pěkné a zlepšují vzhled stránek při prohlížení na webovém prohlížeči na celou obrazovku, často jim překážejí v mobilním zařízení. Navíc, když je uživatel smartphonu v mobilní síti, poslední věc, za kterou chce zaplatit, je stažení spousty obrovských obrázků nebo navigačních ikon.
- Nedávejte velké obrázky do horní části stránky. Stejně jako u navigace může být velmi zdlouhavé čekat na načtení obrázku, který zabírá 3 až 4 obrazovky, v samém horním rohu stránky. A to je na webových stránkách velmi běžné. Jedinou výjimkou je, pokud čtenář ví, že po kliknutí, například ve fotogalerii, získá obrázek.
Co je třeba se vyvarovat při navrhování pro mobilní zařízení
Při vytváření stránky vhodné pro mobilní zařízení byste se měli vyhnout několika věcem. Jak již bylo zmíněno výše, pokud je opravdu chcete mít na své stránce, můžete, ale ujistěte se, že web funguje i bez nich.
- Blikat: Většina mobilních telefonů nepodporuje Flash, takže není dobré jej zahrnout na své bezdrátové stránky.
- Soubory cookie: Mnoho mobilních telefonů nemá podporu souborů cookie. iPhony ano podpora souborů cookie.
- Rámečky: I když je prohlížeč podporuje, přemýšlejte o rozměrech obrazovky. Rámečky na mobilních zařízeních prostě nefungují - jsou velmi obtížné nebo nemožné je přečíst.
- Tabulky: Nepoužívejte tabulky pro rozložení na mobilní stránce. A zkuste se obecně vyhnout tabulkám. Nejsou podporovány na každém mobilním telefonu (i když je podporují iPhony a další smartphony) a můžete skončit s podivnými výsledky.
- Vnořené tabulky: Pokud musíte použít tabulku, nezapomeňte ji vnořit do jiné tabulky. Pro desktopové prohlížeče je obtížné je podporovat a v nejlepším případě zpomalit načítání stránky.
- Absolutní opatření: Jinými slovy, nedefinujte rozměry objektů v absolutních velikostech (například pixely, milimetry nebo palce). Pokud definujete něco jako šířku 100px, na jednom mobilním zařízení, které by mohlo být poloviční než obrazovka, a na jiném, by to mohlo být dvojnásobek šířky. Nejlépe fungují relativní velikosti (například ems a procenta).
- Písma: Nepředpokládejte, že některý z písma jste zvyklí mít přístup, budou k dispozici na mobilních telefonech.