Pozrite sa do projektovania pre mobilné zariadenia
Keď bol prvý iPhone prepustený, trvalo to technický svet búrkou. Odvtedy je to takmer päť rokov a trh s inteligentnými telefónmi sa zvýšil v popularite, dokonca aj keď sa Microsoft dostal do súťaže s operačným systémom Windows 7 a partnermi. S toľkými užívateľmi internetu na svojom smartfóne dnes je rozumné očakávať, že počet mobilných webových stránok sa bude agresívne zvyšovať.
Avšak navrhovanie pre mobilný web je úplne iná operácia s bežným webovým dizajnom. Naše webové stránky sú určené pre obrovskú obrazovku, ale veľkosť obrazovky smartfónu je príliš malá v porovnaní s tým, čo vedie k otravným problémom použiteľnosti. Nové konštrukčné štandardy a postupy sú veľmi potrebné pre lepšiu koncepciu mobilného webu s plynulým používateľským zážitkom.
V tejto príručke sa budeme snažiť navrhnúť užívateľsky prívetivú stránku pre mobilné prehliadače smartphonov. Budem hovoriť o osvedčených postupoch a užitočnom nástroji pre vývojárov, aby ste mohli navrhnúť lepšie webové stránky pre mobilné zariadenia, a tak sa dostaneme do toho po skoku!
Plánovanie silnej používateľskej skúsenosti
Pri vytváraní mobilných webových stránok je dôležité Majte stále na pamäti svojich používateľov, pretože nakoniec vaše webové stránky sú navrhnuté a vytvorené pre užívateľov, aby si ich mohli vychutnať. Je určite bežné, že používatelia očakávajú, že sa mobilné webové stránky budú správať podobne ako prostredie desktopu udržanie užívateľského zážitku priateľský by malo byť vaše hlavné zameranie pri budovaní úspešného mobilného webu.
Existuje veľa konceptov použiteľnosti, ktoré je potrebné zvážiť pre používateľov. Tieto úvahy zahŕňajú veľkosť obrazovky, inline obrázky, hypertextové odkazy, veľkosť písma, a navigácia na stránke. Napísali sme o dizajne použiteľnosti pre mobilné zariadenia, aby ste vybrali vaše webové stránky pre lepšiu použiteľnosť. Okrem sprievodcu musíte vždy Dajte si pozor na nové nápady zlepšiť svoje stránky.
Plánovanie silného používateľského zážitku tiež znamená, že by ste mali zvážte, ako bude používateľ interagovať s vašimi webovými stránkami. Na pracovnej ploche môže byť vaša webová stránka interaktívna s myšou a klávesnicou, ale na užívateľoch smartfónov poklepaním, švihnutí, a biť svojou cestou okolo vašich stránok. Pravdepodobne musíte navrhnúť stránky spôsobom, ktorý môžu používatelia ľahko pristupovať k informáciám o mieste s týmito fyzickými pohybmi.
Udržujte stránky krátke a sladké
Mäso a zemiaky na ktorejkoľvek webovej stránke sú obsah stránky. Každá z vašich webových stránok má významné množstvo užitočných informácií pre svojich používateľov, napríklad text, fotografie alebo videá. Nájdete tu aj novinové články a blogové príspevky, ktoré sa zobrazujú na niekoľkých stranách, čo môže pomôcť rozdeliť text, ale neodporúča sa pre mobilné zariadenia ako technika vyžaduje viac načítania stránky, čo znamená viac čakacej doby na strane užívateľa.
Pokiaľ to nie je absolútne nutné, odporúčam udržiavať obsah stránky krátky. Mali by ste tiež zvážiť, aby to vyzeralo, ako by to vyzeralo styling písma oveľa väčšiu veľkosť a možno pohyblivé zábery stranou. Váš obsah na plnom displeji prirodzene priťahuje pozornosť, nehovoriac o tom, že optimalizácia skenuje stránky oveľa jednoduchšie. To je aj dôvod, prečo a rozloženie jednotlivých stĺpcov výborne zapadá do účtu.
Vo väčšine prípadov nebudú mobilné prehliadače načítavať webové stránky tak rýchlo, ako stolové prehliadače, čo by mohlo váš čitateľov obťažovať, preto je potrebné optimalizovať obsah a webové stránky pre vysokorýchlostné načítanie obsahu. Môžete to urobiť skrátiť článok pri zachovaní plného obsahu, alebo jednoducho odstráňte nepotrebné obrázky. Zamerajte sa na jednoduchosť namiesto krásy.
Vaša hlavná navigácia je šetrič života pre vašich návštevníkov, ktorí sa chcú pohybovať medzi jednotlivými stránkami. Na mobilnom zariadení sa obrazovkové prepojenia zdajú byť oveľa menšie, čo je oveľa ťažšie. Základným vylepšením riešenia tejto otázky je maximalizujte písmo a priestor pre navigačné odkazy, možno zobratie celej blokovej oblasti. Prípadne môžete Navrhnite navigačnú lištu tak, aby bola podobná pravému panelu aplikácie iPhone, ako to bolo uvedené vyššie.
Budovanie mobilných štýlov CSS
Teraz, keď vieme, ako optimalizovať mobilné webové stránky pre lepšiu čitateľnosť a použiteľnosť, bolo by dobré hovoriť o štýloch CSS. Každá šablóna so štýlmi CSS obsahuje mnoho selektorov s vlastnosťami týkajúcimi sa písma, veľkostí, polohovania a nastavení zobrazenia. Pokiaľ ide o mobilné zariadenia, mali by ste venovať pozornosť ako bloky padajú na miesto.
(Image Source: Smashing Magazine)
Jednou oblasťou, ktorú môžete začať, je obnovte šírky obálok vašej stránky na percentuálnu hodnotu. Je obvyklé používať pixely ako jednotku na určovanie polohy, výšku čiary, veľkosť písma a šírku div, ale pri práci s mobilom budete chcieť, aby vaše stránky boli tekutiny a prechod medzi jednotlivými zariadeniami prirodzene. Nastavenie kontajnera rozdeľuje na 100% šírku umožní obsah ľahko naplňte režim na výšku / na šírku bez toho, aby ste prelietali cez okraj.
Ak ste jedným z ľudí, ktorí chcú reštrukturalizovať celé rozloženie, uistite sa, že ste hit všetko s resetovať. tiež odseky, nadpisy a navigačné prepojenia by mali byť nastavené na zobrazenie: blok; takže máte ten lineárny pocit v tlači. Opätovne umiestnite okraje a polstrovanie, aby ste z rozloženia odstránili nadúvanie. Vyhnite sa tabuľkám ak je to možné, pretože tieto majú tendenciu robiť výsledky bugmi medzi zariadeniami.
Veľké zábery sú tiež problémy medzi zariadeniami. Väčšina vašich stránok s obrázkami bude väčšia ako 480 pixelov a pravdepodobne nebudete chcieť, aby ste ich porušili. Prvou možnosťou je nastavte ich šírku na 100%, aby sa obrázky mohli prirodzene meniť. Určite je to možné vytvoriť rôzne súbory obrázkov pre vaše webové stránky a vykresľujú ich inak na základe agentov prehliadača, ale čestne to práve pridáva viac prác na vašu stranu, tak skúste to použite techniku len vtedy, keď je to naozaj potrebné.
Navrhovanie webových stránok pre iPhone
Mobilný podiel na trhu je pomerne veľký a rozdelený, ale Apple má s ich iDevices veľký kus koláča. IPhone i iPad sú zariadenia pripravené na mobilné pripojenie k internetu s vstavanou dotykovou obrazovkou. Majú rovnaký predvolený webový prehliadač, Safari a celý rad ďalších možností.
V prípade webových stránok špecifických pre iPhone je potrebné zacielenie na veľkosť obrazovky. Pevná veľkosť obrazovky je nastavená na 320px x 480px pre staršie modely iPhone a 640px 960px pre iPhone 4 a iPhone 4S.
iPhone obrazovky sú obmedzené na priestor. Mal by si mať jeden blok obsahu, ktorý sa rozprestiera tak dlho, koľko je potrebné. Udržiavanie prvkov v jednom stĺpci vám ušetrí bolesti hlavy a umožniť rozloženie kvapaliny “vyplniť” v režime na výšku aj na šírku. Na to budete pravdepodobne potrebovať vytvoriť inú šablónu a nájsť spôsob, ako skontrolovať, či váš návštevník používa iPhone. Malý útržok PHP by mal fungovať správne:
V zásade logika vytiahne naše globálne $ _SERVER pre agent HTTP a skontroluje, či je slovo “iphone” zobrazuje sa kdekoľvek. Ak áno, potom vieme, že náš návštevník používa iPhone a tam môžeme umiestniť mierne odlišné HTML alebo dokonca úplne nové rozloženie šablóny! To by sa dalo použiť aj na obsahovať šablónu štýlov pre iPhone, zmeniť názvy stránok, odstrániť obrázky alebo takmer všetky dynamické efekty.
Pokiaľ ide o podávanie nových štýlov, je to jednoduchšia cesta. Ako bolo spomenuté vyššie, maximálna veľkosť obrazovky pre iPhone je široká 960 pixelov. Preto pri nových dopytoch médií CSS3 môžete pridávať štýly priamo do hlavnej šablóny štýlov, ktorá bude iba zobrazenie na zariadení iPhone. Nižšie je uvedený malý príklad kódu:
@media obrazovka a (max-device-width: 960px) / * iPhone css * /
To funguje preto, lebo Služba CSS teraz dokáže rozpoznať agentov prehliadania a ich vlastnosti. Maximálna šírka obrazovky je jednou z vlastností, ktorá sa dá tiež zistiť.
Celá mobilná webová stránka pre zariadenia iPhone nie je príliš ťažké navrhnúť, existuje príliš veľa príkladov na to, aby odkazovali, tj CSS iPhone. Nechajte sa zaneprázdňovať a nebojte sa experimentujte s novými technikami v dizajne používateľského rozhrania.
Mobilné jQuery skriptovanie
Väčšina vývojárov webových aplikácií na fronte je oboznámená s knižnicou jQuery. Ponúka skvelú skratku pre efekty kódovania, animácie, rozbaľovacie ponuky a množstvo ďalších funkcií v prehliadači a práve to sa stáva úžasnejšou s oznámením jQuery Mobile. to je neodporúča sa skočiť priamo do technológie a načítať vaše webové stránky s efektami všade, ale pre testovacie účely pokročilé funkcie môžu hrať veľmi dobre.
jQuery Mobile je trochu odlišný od bežného jQuery, pretože vám dáva plnohodnotné prostredie. Keď pracujete so svojimi súbormi, nie sú to len JavaScript, ale aj štýly CSS pre tlačidlá, odkazy a efekty prechodu. Ste stále písanie webových stránok v HTML kóde, ale tím jQuery Mobile má dodala veľa voliteľných funkcií dizajnu používateľského rozhrania. S týmto rámcom môžeme urobiť veľa, ale odvtedy rámec je stále v beta verzii, budeme držať jednoduchých efektov.
Malý tutoriál na blogu DevGrow poskytuje niekoľko úžasných príkladov. Oficiálna stránka ponúka aj demávy, ktoré môžete vyskúšať. Všimnite si, že používame atribút HTML, dát prechod pridať animačné efekty s ľubovoľnou z preddefinovaných hodnôt. Medzi ne patrí snímka, pop, flip, fade, atď Pozrite sa na malý príklad DevGrow, aby ste získali chuť týchto efektov.
Účinky a prechody sú celkom úhľadné a skutočnosť, že si môžete vybudovať celé mobilné rozhranie striktne s jQuery, je tiež pre túto platformu obrovským krokom, ale s platformou iba v beta verzii by som neodporúčal vybudovať celý mobilný web s ich knižnicu, najmä s tým, že je to nepodporuje všetky hlavné smartphony v čase písania (najmä v systéme Windows Phone 7), ale bude to určite lepšie s časom.
Nakoniec odporúčam oboznámiť sa s týmto novým mobilným rámcom pred nasadenie naživo na akomkoľvek projekte.
Užitočné nástroje pre vývojárov
Vývojári v oblasti mobilných zariadení sa nehľadajú iba na zdroje kódovania a dizajnu. Existuje tiež vysoká náročnosť na softvérové nástroje a IDE, nehovoriac o výkonných mobilných rámcoch. Vývoj webu je náročná úloha, ktorá si vyžaduje dosť odhodlania, ale využitie ďalších nástrojov vám uľahčí prácu.
Opera Mobile emulátor
Hľadáte spôsob, ako skontrolovať spôsob vykresľovania vašich mobilných webových stránok? To môže byť obrovská bolesť, ak nemáte smartphone s prístupom na internet. Alebo jednoducho nechcete používať váš smartphone na otestovanie stránky vždy, keď sa tlačia na váš server. Opera Mobile Emulator je fantastický softvér na otestovanie mobilných webových stránok.
Emulátor podporuje okolo 20 mobilných profilov ako napríklad Samsung Galaxy S, HTC Desire a dokonca tablet ako Motorola Xoom. Je tiež možné nastaviť vlastné rozlíšenie a hustota pixelov na účely intenzívneho testovania. Najlepšie zo všetkého je, že nemusíte robiť príliš veľa práce s konfiguráciami, stačí len pár kliknutí a máte dobré ísť.
Sťahovanie je úplne zadarmo a softvér sa spúšťa v prostredí Mac OS X a Windows. Ich vývojári sú ťažko pracujúci, vytvárajú správne webové štandardy a ladí svoj mobilný rendering engine. Odporúčam ich ďalšie nástroje dev, ak hľadáte ďalšie nástroje, ktoré vám pomôžu pozdĺž cesty.
PhoneGap
Nie je veľa rozhraní API vyvinutých cez HTML5 na vytvorenie pevných mobilných aplikácií. Najmä mobilná krajina chýba na týchto typoch webových stránok, čo je presne dôvod, prečo PhoneGap vyplňuje výklenok tak dobre. Ich platforma vám umožňuje ľahko vytvorte aplikácie založené na jazyku HTML5 ako natívne aplikácie na 6 rôznych platformách.
Tento proces funguje tak, že najprv komprimujete kód a odovzdáte ho prostredníctvom aplikácie Framework PhoneGap. Odtiaľ sa vaše aplikácie môžu dostať do veľkej časti trhu s mobilnými zariadeniami vrátane systémov Android, iOS, Windows Phone 7 a BlackBerry.
Ak ste trochu zmätení, netrápte sa príliš. Ich stránky podpory prehľadne popisujú proces a ponúkajú odkazy na užitočné zdroje. Aplikácie, ktoré už boli vyvinuté, boli zostavené v krásnom portfóliu v štýle knižnice. Pozrite sa na ich kompletnú zbierku aplikácií, ktorú môžete potom triediť podľa zariadení so snímkami obrazovky.
Aptana Studio
Webová stránka spoločnosti Aptana je najdôležitejším miestom na získanie informácií o vývojových nástrojoch. Najnovšia verzia balíka Aptana 3.0.3 obsahuje plne integrovaný IDE pre vývoj webových aplikácií, štýlov CSS a vkladanie značiek HTML a najlepšia časť: Aptana je úplne zadarmo stiahnuť! Ponúkajú balíky pre všetky 3 hlavné operačné systémy (vrátane Linuxu), čo je obrovské pohodlie pre vývojárov.
To, čo robí Aptana špeciálne, je rýchlosť vývoja malej webovej aplikácie a otestovanie vášho dizajnu. Studio vám dovolí rýchlo vyvíjať a otestovať webovú aplikáciu, ktorá prechádza cez Ruby on Rails, PHP, Python alebo jednoducho HTML / CSS, a ich funkcie zvýrazňovania kódu sa nedávno zlepšili zahrnúť nové knižnice značiek HTML5 a CSS3. Dodáva sa tiež s integráciou Git, zabudovaným terminálom, debuggerom kódu a niekoľkými ďalšími šikovnými funkciami.
Mobilné grafické súpravy a ikony
Aký by bol web bez freebies ležiaceho okolo? Pre webových dizajnérov je význam používateľského rozhrania nad všetkým ostatným. Jednoduché grafické používateľské rozhrania sú ťažké a len najkreatívnejšie dizajnéri prichádzajú s pracovnými riešeniami.
Existuje však veľa bezplatných kvalitných zdrojov, ktoré máte k dispozícii pre vás, aby ste mohli vyskúšať webový dizajnér. Tieto súpravy GUI sú väčšinou určené pre Adobe Photoshop alebo Fireworks, kde sa môžete pohybovať okolo prvkov a exportovať ich ako súbory s plochými obrázkami.
Ikony sú veľmi užitočným zdrojom. Dizajnéri vytvárajú bezplatné súbory a ponúkajú ich on-line častejšie než kedykoľvek predtým. Jedna takáto webová stránka Glyphish má prehliadku bezplatných aj pro ikon. Tieto návrhy sú založené na jedinej téme, ktorá sa používa v mobilných šablónach a dizajnoch aplikácií.
Naša kolekcia prototypových šablón mobilných zariadení vám pomôže pozdĺž cesty k vývoju webových stránok a aplikácií. Nesmiete začať kódovať, kým nebudete mať silné grafické rozhranie a tieto webové zostavy vám začnú na správnej ceste.
iOS 5 GUI Kit
Vektorové prvky iPhone UI
iPhone App Icon Kit
Sústružníkové magnety (DIY Kit)
Rozhranie GUI rozhrania Android
