Je pravděpodobné, že jste viděli, jak iPhone může flip a rozšiřovat webové stránky. Zobrazí celou stránku na první pohled nebo přiblíží, aby text, který vás zajímá, byl čitelný. V jistém smyslu, protože iPhone používá Safari, weboví návrháři by neměli dělat nic zvláštního pro vytvoření webové stránky, která bude pracovat na iPhone.
Ale opravdu chcete, aby vaše stránka fungovala? Většina návrhářů chce, aby jejich stránky svítily!
Když vytvoříte webovou stránku , musíte přemýšlet o tom, kdo ji bude prohlížet a jak ji budou prohlížet. Některé z nejlepších stránek berou v úvahu, na jaký typ zařízení je stránka zobrazována, včetně rozlišení, barevných možností a dostupných funkcí. Nepoužívají jen na zařízení, aby to zjistili.
Obecné pokyny pro vytváření stránek pro mobilní zařízení
- Zkoušejte tolik zařízení, kolik můžete. První věc, kterou byste měli udělat, je prohlížet vaše stránky na iPhone a tolik různých mobilních zařízení nebo emulátorů, jak můžete. Zatímco můžete použít emulátory pro všechna vaše testování, opravdu vám nedávají stejný pocit, jako se snažíte procházet webovou stránkou na maličké obrazovce, a tak testovat na skutečných zařízeních co nejvíce.
- Přeměňte své stránky ladně. Můžete psát své stránky pro širokoúhlé prohlížeče podporující blesk, ale ujistěte se, že důležité informace jsou viditelné i na malém monitoru, který nemůže zvládnout žádné speciální funkce (například cookies, Ajax, Flash, JavaScript atd.). Něco jiného než XHTML Basic bude nad rámec některých mobilních telefonů. Zatímco většina smartphonů dokáže zpracovat všechny tyto věci (kromě Flash v iPhone, samozřejmě), ostatní mobilní zařízení nemohou.
- Vytvoření konkrétní stránky pro bezdrátové připojení - a usnadní vyhledávání. Pokud se chystáte vytvořit konkrétní stránku pro váš mobilní telefon a bezdrátové zákazníky - zpřístupnit ji. Skvělý způsob je umístit odkaz na bezdrátovou stránku v horní části vašeho dokumentu a poté skrýt tento odkaz z jiných zařízení než z ruky pomocí ručního média. Koneckonců, většina lidí přichází na vaši domovskou stránku, dokonce i na mobilní telefony - a pokud odkaz na vaši bezdrátovou stránku tam není, odjíždí, pokud je stránka příliš těžká k použití.
Rozložení webové stránky pro smartphony
První věc, kterou byste si měli zapamatovat při psaní stránek pro trh smartphonů, je, že nemusíte provádět žádné změny, pokud nechcete. Skvělá věc o většině dostupných smartphonů je, že pro prohlížení webových stránek používají prohlížeče Webkit (Safari v systému iOS a Chrome v systému Android), takže pokud se vaše stránka zobrazí v Safari nebo Chrome, vypadá to dobře na většině smartphonů (mnohem menší ). Existují však věci, které můžete udělat, abyste zpříjemnili prohlížení:
- Nezapomeňte, že obrazovka je malá. Chytré telefony budou všechny tyto sloupce kondenzovat dolů do malého okna, což jim může velmi těžko číst bez zvětšení. Většina uživatelů je zvyklá na přiblížení, ale může to být únavné. Jeden dlouhý sloupec textu je snadněji čitelný.
- Rozdělte stránky na menší kousky. Může být obtížné číst dlouhé segmenty textu na mobilním telefonu, takže jejich uvedení na více stránek usnadňuje jejich čtení.
Odkazy a navigace na iPhones
- Čí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 (s výjimkou teenagerů, kteří jsou zvyklí posílat spoustu textových zpráv). Dokonce i na iPhone je nudné zadávat dlouhé adresy URL. Udržujte je krátký.
- Text dlouhého odkazu je však jednodušší klepnout. Když na stránce, kde je několik samostatných slov spojeno s různými články, které se nacházejí vedle sebe, může být velmi obtížné klepnout na správné bez zoomu. Mnoho lidí se prostě vzdá a jít někam jinam. Odkazy s 3-5 slovy v nich jsou jednodušší kliknout na telefon než 1-slovní spojení.
- Nepokládejte navigaci v horní části obrazovky. Není nic víc nepříjemného, než abyste museli procházet obrazovkami a obrazovkami odkazů, abyste našli požadované informace. Pokud jste se podívali na webové stránky, které byly navrženy pro mobilní telefony, uvidíte, že první věci, které se objevují, jsou obsah a nadpis. Pak, pod to je navigace.
- Nebojte se skrýt navigaci. Skrytí navigačních odkazů pomocí CSS nebo JavaScript a jejich zobrazování pouze tehdy, když o ně uživatel požádá, je způsob, jak usnadnit práci uživatelům smartphonu.
Tipy pro obrázky na smartphonech
- Obrazy musí být malé. Ano, Android a iPhone mohou zvětšovat a rozšiřovat obrazy , ale čím menší jsou, v obou rozměrech a době stažení, tím spokojnější jsou vaši zákazníci bezdrátové sítě. Optimalizace obrázků je vždy dobrý nápad, ale pro stránky mobilního telefonu je to kritické.
- Obrázky se musí rychle stáhnout. Obrázky zaberou spoustu místa na webových stránkách, když je prohlížíte z mobilního zařízení. A když jsou často velmi milí a dělají lepší vzhled stránek při prohlížení na celoobrazovkovém internetovém prohlížeči, často se stávají cestujícími na mobilním zařízení. Navíc, když je uživatel smartphonu v mobilní síti, poslední věc, kterou chtějí zaplatit, je stahování spousty obrovských obrázků nebo navigačních ikon.
- Neumisťujte velké obrázky do horní části stránky. Stejně jako u navigace, může být velmi únavné počkat na obrázek, který zaujme 3-4 screenfuls, které se načtou v horní části stránky. A to je extrémně běžné na webových stránkách. Jedinou výjimkou je, pokud čtenář ví, že po kliknutí na obrázek získá fotografie, řekněme v fotogalerii.
Co se vyhnout při navrhování pro mobilní zařízení
Existuje několik věcí, které byste se měli vyvarovat při vytváření stránky přátelské k mobilním telefonům. Jak již bylo uvedeno výše, pokud chcete tyto stránky skutečně mít na své stránce, můžete, ale ujistěte se, že stránky fungují bez nich.
- Flash - většina mobilních telefonů nepodporuje Flash, takže není vhodné ho zahrnout do vašich bezdrátových stránek.
- Cookies - mnoho mobilních telefonů nemá podporu souborů cookie. iPhony mají podporu cookie.
- Rámce - i když je prohlížeč podporuje, přemýšlejte o rozměrech obrazovky. Rámce na mobilních zařízeních nefungují - jsou velmi obtížné nebo nemožné číst.
- Tabulky - nepoužívejte tabulky pro rozvržení na mobilní stránce. A snaží se obecně vyhýbat stolům. Nejsou podporovány na každém mobilním telefonu (i když je podporují telefony iPhone a další smartphony) a můžete skončit s podivnými výsledky.
- Vnořené tabulky - pokud musíte použít tabulku, ujistěte se, že ji nenasadíte do jiné tabulky. Tyto funkce jsou pro stolní prohlížeče obtížné, a pokud je to nejlepší, zatěžují stránku pomaleji.
- Absolutní opatření - jinými slovy, nedefinujte rozměry objektů v absolutních velikostech (jako jsou pixely, milimetry nebo palce). Pokud definujete něco jako šířku 100 pixelů, na jednom mobilním zařízení, které může být polovina obrazovky a na druhé může být dvakrát větší než šířka. Relativní velikosti (jako ems a procenta) fungují nejlépe.
- Písma - nepředpokládejte, že některá z písem, na které jste zvyklí mít přístup, budou k dispozici na mobilních telefonech.
Přečtěte si více
- Jak udělat svůj web Mobile Friendly pomocí PHP