Podívejte se na návrh pro mobilní zařízení
Když byl první iPhone vydán, vzal technologický svět bouří. Od té doby to bylo téměř 5 let a trh se smartphony se rozrostl v popularitě, a to i Microsoft se dostal do soutěže s OS Windows 7 a partnery. S tolika internetovými uživateli na jejich smartphonu dnes, to je zdravý rozum očekávat, že počet mobilních webových stránek se agresivně zvýší.
Navrhování pro mobilní web je však zcela odlišná operace se společným webovým designem. Naše webové stránky jsou navrženy pro obrovskou obrazovku, ale velikost obrazovky smartphonu je oproti tomu příliš malá, což vede k nepříjemným problémům s použitelností. Nové konstrukční normy a postupy jsou velmi potřebné pro lepší mobilní stránky design s hladkým uživatelským zážitkem.
V této příručce se budeme snažit navrhnout uživatelsky přívětivé stránky pro mobilní prohlížeče smartphone. Budu mluvit o osvědčených postupech a užitečných vývojářských nástrojích, abyste mohli navrhnout lepší mobilní webovou stránku, takže se do toho po skoku dostaneme!
Plánování silné uživatelské zkušenosti
Když stavíte mobilní webové stránky, je důležité vždy udržujte své uživatele na paměti, jako nakonec vaše webové stránky jsou navrženy a vytvořeny pro uživatele těšit. Je to jistě běžné, že uživatelé očekávají, že se mobilní webová stránka bude chovat podobně jako prostředí pracovní plochy udržení uživatelského komfortu by měla být hlavním cílem při budování úspěšné mobilní stránky.
Pro vaše uživatele je třeba vzít v úvahu mnoho konceptů použitelnosti. Tyto úvahy zahrnují velikost obrazovky, inline obrázky, hypertextové odkazy, velikosti písma, a navigace na stránce. Napsali jsme o mobilním designu použitelnosti, abyste si mohli vyřezat vaše webové stránky pro lepší použitelnost. Kromě průvodce, musíte vždy udržet si ostražitost pro nové nápady zlepšit své stránky.
Plánování silné uživatelské zkušenosti také znamená, že byste měli zvážit, jak bude uživatel pracovat s vašimi webovými stránkami. Na ploše mohou být vaše webové stránky propojeny s myší a klávesnicí, ale na smartphonu budou uživatelé klepnutím, blikání, a bít své cesty kolem vašich stránek. Pravděpodobně budete muset navrhnout stránky způsobem, který mohou uživatelé s těmito fyzickými pohyby snadno přistupovat k informacím o místě.
Udržujte stránky krátké a sladké
Maso a brambory jakékoliv webové stránky je obsah stránky. Každá z vašich webových stránek značné množství užitečných informací pro uživatele, například text, fotografie nebo videa. Najdete zde také články zpráv a příspěvky blogu, které běží na několik stránek, což může pomoci rozbít text, ale není doporučeno pro mobilní zařízení jako technika. vyžaduje více načítání stránky, což znamená větší čekací dobu na straně uživatele.
Pokud to není naprosto nezbytné, doporučuji zkrácení obsahu stránky. Měli byste také zvážit, zda to vypadá sladce styling písma na mnohem větší velikost a možná pohybující se obrazy stranou. S vaším obsahem na plné obrazovce to přirozeně přitahuje pozornost, nemluvě o optimalizaci skutečně dělá skenování stránek mnohem jednodušší. To je také důvod, proč rozložení jednotlivých sloupců dokonale zapadá do účtu.
Ve většině případů nebudou mobilní prohlížeče načítat webové stránky tak rychle, jak je to u stolních prohlížečů, a to by mohlo vaše čtenáře obtěžovat, proto je třeba optimalizovat obsah a webové stránky pro vysokorychlostní načítání obsahu. Můžeš buď zkrátit článek při zachování plného obsahu, nebo jednoduše odstranit nepotřebné obrázky. Umístěte své zaměření na jednoduchost místo krásy.
Vaše hlavní navigace je život zachránce pro vaše návštěvníky, kteří se chtějí pohybovat mezi stránkami. Na mobilním zařízení se odkazy na obrazovce budou od přírody zdát mnohem menší, takže je mnohem těžší na ně klepnout. Podstatné vyladění tohoto problému je maximalizujte písmo a prostor pro navigační odkazy, možná zabere celou oblast bloku. Případně můžete design navigační lištu, aby byl podobný skutečný iPhone aplikace na panelu, jako ten, který byl uveden výše.
Budování mobilních CSS stylů
Nyní, když víme, jak optimalizovat mobilní webové stránky pro lepší čitelnost a použitelnost, bylo by dobré hovořit o CSS stylech. Každá šablona stylů CSS obsahuje mnoho selektorů s vlastnostmi týkajícími se písem, velikostí, umístění a nastavení zobrazení. Pokud jde o mobilní, měli byste věnovat pozornost jak se vaše bloky dostanou na místo.
(Zdroj obrázku: Magazín Smashing)
Jednou z oblastí, kde začít, je obnovte šířku obálky webu na procenta. Je běžné používat pixely jako jednotku pro určování polohy, výšku čáry, velikost písma a šířku div, ale při práci s mobilem budete chtít, aby se vaše stránky zobrazovaly a přechod mezi jednotlivými zařízeními přirozeně. Nastavením kontejneru divs na 100% šířku bude obsah umožněn vyplňte snadno mezi režimem na výšku / na šířku, aniž by přeteče přes okraj.
Pokud jste jedním z lidí, kteří chtějí změnit strukturu celého uspořádání, ujistěte se, že jste zasáhnout všechno s resetovat. Taky odstavce, záhlaví a navigační odkazy zobrazení: blok; takže získáte ten lineární pocit ve stylu tisku. Znovu umístěte okraje a vycpávkou, abyste odstranili bloat z rozvržení. Vyhněte se tabulkám pokud je to možné, protože mají sklon k tomu, že výsledky mezi zařízeními způsobují chyby.
Velké snímky jsou také mezi zařízeními. Většina obrázků na vašich webových stránkách bude větší než 480px a možná nebudete chtít nechat je rozbít. První možností je nastavte jejich šířku na 100%, aby obrázky mohly měnit velikost přirozeně. Je to určitě možné vytvořit různé sady obrázků pro vaše webové stránky a vykreslit je odlišně na základě agenta prohlížeče, ale upřímně to jen přidává další práce na vaší straně, takže to zkuste tuto techniku používejte pouze tehdy, když je to opravdu potřeba.
Navrhování webových stránek pro iPhone
Podíl na mobilním trhu je poměrně velký a rozdělený, ale Apple má velký kus koláče s jejich iDevices. IPhone i iPad jsou mobilní internetová zařízení s integrovanou funkcí dotykové obrazovky. Jsou vybaveny stejným výchozím webovým prohlížečem, Safari a celou řadou dalších možností.
Pro webové stránky specifické pro iPhone budete muset cílit na velikost obrazovky. Pevná velikost obrazovky je nastavena na 320px 480px pro starší modely iPhone a 640px 960px pro iPhone 4 a iPhone 4S.
iPhone obrazovky jsou omezeny na prostor. Měl bys mít jeden blok obsahu, který trvá tak dlouho, jak je potřeba. Vedení prvků v jediném sloupci ušetří vám bolesti hlavy a umožňují rozvržení tekutiny “vyplnit” na výšku i na šířku. K tomu budete pravděpodobně muset vytvořit další šablonu a najít způsob, jak zjistit, zda váš návštěvník (y) používají iPhone. Níže uvedený malý fragment PHP by měl fungovat dobře:
V podstatě logika přitahuje naši globální $ _SERVER proměnná pro agenta HTTP a zkontroluje, zda slovo “iphone” se objeví kdekoli. Pokud ano, víme, že náš návštěvník používá iPhone a odtud můžeme dát trochu jiné HTML nebo dokonce celou novou šablonu rozvržení! To by mohlo být také použito zahrnovat specifický styl pro iPhone, změnit názvy stránek, odstranit obrázky nebo téměř všechny dynamické efekty.
Pokud jde o poskytování nových stylů, je to jednodušší způsob. Jak již bylo zmíněno, maximální velikost obrazovky pro iPhone je 960px široká. Proto s novými dotazy na média CSS3 můžete přidávat styly přímo do hlavní šablony stylů webu, která bude pouze na iPhone. Níže je malý příklad kódu:
Obrazovka @media a (max. šířka zařízení: 960px) / * iPhone css * /
To funguje, protože CSS nyní může detekovat agenty procházení a jejich vlastnosti. Max. Šířka obrazovky je jednou z vlastností, které lze také detekovat.
All-in-all mobilní webové stránky pro zařízení iPhone není příliš těžké navrhnout pro, existuje jen příliš mnoho příkladů odkazovat, tj., CSS iPhone. Udržujte se zaneprázdněným studiem a nebojte se experimentovat s novými technikami v designu UI.
Mobilní jQuery Skriptování
Většina webových vývojářů je obeznámena s knihovnou jQuery. Nabízí některé fantastické zkratky pro kódování efektů, animací, rozbalovacích nabídek, a řadu dalších funkcí v prohlížeči, a to prostě dostane více úžasné s oznámením jQuery Mobile. to je nedoporučuje se skočit v tech přímo a nahrát vaše webové stránky s efekty všude, ale pro testovací účely pokročilé funkce mohou hrát velmi dobře.
jQuery Mobile je trochu odlišný od běžného jQuery, protože vám dává plné prostředí, na kterém můžete stavět. Když pracujete s jejich soubory, nejsou to jen JavaScript, ale také styly CSS pro tlačítka, odkazy a efekty přechodu. Stále píšete webové stránky v HTML kódu, ale tým jQuery Mobile má dodával mnoho volitelných prvků návrhu UI. S tímto rámcem je toho mnoho, ale od té doby rámec je stále v beta verzi, držme se jednoduchých efektů.
Malý návod na blogu DevGrow poskytuje několik úžasných příkladů. Oficiální stránky také nabízí dema pro vás vyzkoušet. Používáme atribut HTML, přechod dat přidat efekty animace s některou z předdefinovaných hodnot. Patří mezi ně snímek, pop, flip, fade, atd. Podívejte se na malý příklad DevGrow získat chuť těchto efektů.
Efekty a přechody jsou pěkné a skutečnost, že můžete vytvořit celé mobilní rozhraní striktně s jQuery, je také obrovským krokem vpřed pro tuto platformu, ale s platformou pouze v beta verzi bych nedoporučoval budovat celý mobilní web s jejich knihovny, zejména s tím, že je to nejsou podporovány všemi hlavními smartphony v době psaní (zejména Windows Phone 7), ale s časem to určitě zlepší.
Nakonec doporučuji seznámit se s tímto novým mobilním rámcem před nasazení živě na jakýkoli projekt.
Užitečné nástroje pro vývojáře
Mobilní vývojáři nehledají jen zdroje kódování a designu. Existuje také vysoká poptávka po softwarových nástrojích a IDE, nemluvě o výkonných mobilních rámcích. Tvorba webu je obtížný úkol, který vyžaduje poměrně dost věnování, ale využití dalších nástrojů vám usnadní práci.
Opera Mobile Emulator
Hledáte způsob, jak zjistit, jak se vaše webové stránky pro mobily zobrazují? To může být obrovská bolest, pokud nemáte smartphone s přístupem na internet. Nebo si prostě nepřejete používat svůj smartphone k otestování stránek pokaždé, když je aktualizace přenesena na váš server. No, Opera Mobile Emulator je fantastický kus softwaru pro testování mobilních webových stránek.
Emulátor podporuje kolem 20 mobilních profilů například Samsung Galaxy S, HTC Desire a dokonce i tablety jako Motorola Xoom. Je také možné nastavit vlastní rozlišení a hustota pixelů pro účely intenzivního testování. Nejlepší ze všeho je, že nemusíte dělat příliš mnoho práce s konfigurací, stačí udělat několik kliknutí a můžete jít.
Stahování je zcela zdarma a software běží v prostředí Mac OS X i Windows. Jejich vývojáři jsou tvrdě pracující při vytváření správných webových standardů a vylepšování mobilního renderovacího jádra. Pokud hledáte další nástroje, které vám pomohou na cestě, doporučuji jejich další nástroje dev.
PhoneGap
Neexistuje mnoho rozhraní API vyvinutých v HTML5 pro budování pevných mobilních aplikací. Zejména mobilní krajina chybí tyto typy webových stránek, což je přesně důvod, proč PhoneGap vyplní výklenek tak dobře. Jejich platforma vám umožní snadno vytvářet aplikace založené na HTML5 jako nativní aplikace na 6 různých platformách.
Proces funguje tak, že nejprve zkomprimujete kód a předáte jej aplikačnímu rámci aplikace PhoneGap. Odtud mohou vaše aplikace dosáhnout velké části mobilního trhu, včetně Android, iOS, Windows Phone 7 a BlackBerry.
Pokud jsi trochu zmatený, tak se příliš nestarej. Jejich stránky podpory přehledně nastiňují proces a nabízejí odkazy na užitečné zdroje. Aplikace, které již byly vyvinuty, byly sestaveny v krásném portfoliu knihovny. Podívejte se na jejich celou sbírku aplikací, kterou pak můžete třídit podle zařízení se snímky obrazovky.
Studio Aptana
Webové stránky Aptana jsou prvotřídním místem, kde se můžete učit o svých vývojových nástrojích. Nejnovější verze Aptana 3.0.3 obsahuje plně integrované IDE pro vývoj webu, styly CSS a vnoření tagů HTML a nejlepší část: Aptana je zcela volný, uvolnit ke stažení! Nabízejí balíčky pro všechny 3 hlavní operační systémy (včetně Linuxu), což je obrovská výhoda pro vývojáře.
Co dělá Aptana specialitou je, jak rychle můžete vytvořit malou webovou aplikaci a vyzkoušet svůj design. Studio suite vám umožní rychle vyvíjet a testovat webovou aplikaci běžící přes Ruby na Rails, PHP, Python nebo jednoduše HTML / CSS, a jejich funkce zvýraznění kódu byly nedávno vylepšeny zahrnují nové knihovny tagů HTML5 a CSS3. Dodává se také s integrací Git, vestavěným terminálem, debuggerem kódu a hrstkou dalších šikovných funkcí.
Mobile GUI sady a ikony
Jaký by byl web bez jakýchkoli překážek? Pro webové designéry je význam uživatelského rozhraní vyšší než vše ostatní. Jednoduchá grafická uživatelská rozhraní jsou těžké přijít a jen ti nejkreativnější designéři přišli s pracovními řešeními.
Nicméně, existuje mnoho bezplatných, ale kvalitních zdrojů, které jsou k dispozici pro vás web designer vyzkoušet. Tyto sady GUI jsou většinou určeny pro Adobe Photoshop nebo Fireworks, kde se můžete pohybovat po prvcích a exportovat je jako ploché obrazové soubory.
Ikony jsou velmi užitečným zdrojem. Designéři vytvářejí volné sady a nabízejí jim online častěji než kdy dříve. Jedna taková webová stránka Glyphish má přehlídku jak pro volné, tak pro ikony. Tyto návrhy jsou založeny na jediném motivu, který se používá v mobilních šablonách a návrzích aplikací.
Naše kolekce prototypů mobilních zařízení bude pro vás skvělou pomocí po cestě vývoje webových stránek a aplikací. Neměli byste začít kódovat, dokud nebudete mít silné grafické rozhraní a tyto webové sady vás začnou na správné cestě.
iOS 5 GUI Kit
Prvky vektoru iPhone UI
iPhone App Icon Kit
Drátové magnety (sada DIY)
GUI rozhraní Android
