Tarkastellaan mobiililaitteiden suunnittelua
Kun ensimmäinen iPhone julkaistiin, se vei teknologian maailman myrskyllä. Siitä lähtien se on ollut lähes 5 vuotta ja älypuhelimien markkinat ovat kasvaneet suosioon, ja jopa Microsoft on joutunut kilpailuun Windows 7 -käyttöjärjestelmän ja yhteistyökumppaneidensa kanssa. Nykyään älypuhelimissa on niin paljon Internetin käyttäjiä, että on järkevää odottaa, että mobiilisivustojen määrä kasvaa aggressiivisesti.
Mobiiliverkon suunnittelu on kuitenkin täysin erilainen toiminta, jossa on yhteinen web-suunnittelu. Verkkosivustomme on suunniteltu valtavaan näyttöön, mutta älypuhelimen näytön koko on liian pieni verrattuna siihen, mikä johtaa ärsyttäviin käyttöongelmiin. Uudet suunnittelun standardit ja käytännöt tarvitaan huomattavasti parempaan mobiilipaikan suunnitteluun, jolla on sujuva käyttäjäkokemus.
Tässä oppaassa on tarkoitus suunnitella käyttäjäystävällinen sivusto älypuhelimen mobiililaitteille. Puhun parhaista käytännöistä ja hyödyllisestä kehitystyökalusta, jonka avulla voit suunnitella paremman mobiilisivuston, joten päästään siihen hyppyjen jälkeen!
Vahvan käyttäjäkokemuksen suunnittelu
Kun luot mobiilisivuston, on tärkeää pitää käyttäjät mielessäsi aina, koska viime kädessä sivustosi on suunniteltu ja luotu käyttäjille nauttimaan. On varmasti tavallista, että käyttäjät odottavat mobiilisivuston käyttäytyvän samoin kuin työpöytäympäristö pitää käyttäjäkokemuksen ystävällisenä sinun pitäisi olla tärkein painopiste, kun rakennetaan onnistunut mobiilipalvelu.
Käyttäjiä varten on harkittava monia käytettävyyskäsitteitä. Näitä näkökohtia ovat mm näytön koko, inline-kuvia, hyperlinkkejä, kirjasinkokoja, ja sivun navigointi. Olemme kirjoittaneet mobiilikäytön suunnittelusta, jotta voit hyödyntää sivustoasi parempaan käytettävyyteen. Oppaiden lisäksi sinun täytyy aina olla pidä itsesi ajan tasalla uusista ideoista parantaa sivustoa.
Vahvan käyttäjäkokemuksen suunnittelu tarkoittaa myös sitä, että sinun pitäisi pohtia, miten käyttäjä toimii vuorovaikutuksessa verkkosivustosi kanssa. Työpöydällä sivustosi voi olla vuorovaikutuksessa hiiren ja näppäimistön kanssa, mutta älypuhelimen käyttäjillä on salakuuntelu, heilauttamalla, ja pyyhkäisemällä niiden ympärillä. Sinun on todennäköisesti suunniteltava sivusto tavalla, jolla käyttäjät voivat näillä fyysisillä liikkeillä pääset helposti sivustotietoihin.
Pidä sivut lyhyenä ja makeana
Sivuston liha ja perunat ovat sivun sisältö. Jokainen verkkosivusi omistaa huomattavan määrän hyödyllistä tietoa käyttäjille, kuten teksti, valokuvat tai videot. Löydät myös uutisartikkeleita ja blogiviestejä, jotka toimivat muutaman sivun päällä, mikä voi auttaa hajottamaan tekstiä, mutta sitä ei suositella mobiililaitteille tekniikaksi vaatii lisää sivun latausta, mikä tarkoittaa enemmän odotusaikaa käyttäjän puolella.
Ellei se ole ehdottoman välttämätöntä, suosittelen sivun sisällön pitäminen lyhyenä. Sinun pitäisi myös harkita sen näyttämistä makealta fontin muotoilu paljon suurempaan kokoon ja ehkä liikkuvat kuvat syrjään. Kun sisältö on näytössä, se luonnollisesti houkuttelee huomiota, puhumattakaan siitä, että optimointi tekee sivujen skannaamisesta paljon helpompaa. Tämä on myös syy siihen, miksi a yhden sarakkeen asettelu sopii laskuun täydellisesti.
Useimmissa tapauksissa mobiiliselaimet eivät lataa verkkosivuja yhtä nopeasti kuin työpöydän selaimet, ja tämä saattaa häiritä lukijoita, siksi sinun täytyy optimoi sisältö ja verkkosivusto nopeiden sisältöjen lataamiseen. Voit joko Lyhennä artikkeli säilyttäen koko sisällön, tai yksinkertaisesti poistaa tarpeettomat kuvat. Aseta keskittyminen yksinkertaisuuteen kauneuden sijasta.
Keskeinen navigointi on elämää säästävä, kun kävijät haluavat siirtyä sivujen välillä. Mobiililaitteessa näytön linkit näkyvät luonteeltaan paljon pienemmiksi, joten niitä on paljon vaikeampi käyttää. Oleellinen näyte tämän ongelman ratkaisemiseksi on maksimoi navigointilinkkien fontti ja tila, ehkä koko lohkon alue. Vaihtoehtoisesti voit suunnitella navigointipalkin olevan samanlainen kuin todellisen iPhone-sovelluksen välilehtipalkki, kuten edellä esitetty.
Mobile CSS -tyylien rakentaminen
Nyt kun tiedämme, miten mobiilisivuston optimointi helpottaa luettavuutta ja käytettävyyttä, olisi hyvä puhua CSS-tyylistä. Jokainen CSS-tyylitaulukko sisältää monia valintoja, joiden ominaisuuksia koskevat fontit, koot, paikannus ja näyttöasetukset. Kun kyse on mobiilista, sinun pitäisi kiinnittää huomiota miten lohkosi putoavat paikalleen.
(Kuvalähde: Smashing Magazine)
Yksi alue aloittaa palauta sivuston kääreiden leveydet prosentteina. Pikseleitä käytetään yleisesti sijainnin, linjan korkeuden, kirjasinkoon ja divin leveyden yksikkönä, mutta kun käytät mobiililaitteita, haluat, että sivusi ovat nestettä ja siirtymistä kunkin laitteen välillä luonnollisesti. Säiliötilojen asettaminen 100% leveydelle mahdollistaa sisällön täytä helposti pysty- / vaaka-tilan välillä virtaamatta reunan yli.
Jos olet yksi niistä, jotka haluavat rakentaa koko ulkoasun, varmista, että olet osui kaikkeen a asettaa uudelleen. Myös kaikki kohdat, otsikot ja navigointilinkit olisi asetettava näyttö: lohko; niin saat tämän lineaarisen painotyypin tunteen. Aseta marginaalit ja pehmusteet paikalleen poistaaksesi paisuntaa. Vältä taulukoita jos se on mahdollista, koska ne pyrkivät tekemään bugisia tuloksia laitteiden välillä.
Suuret kuvat ovat myös laitteiden välistä vaivaa. Suurin osa sivustosi kuvista on suurempi kuin 480px ja et ehkä halua, että ne rikkovat kontin. Ensimmäinen vaihtoehto on aseta niiden leveys 100%: iin, jotta kuvat voivat muuttua luonnollisesti. Se on varmasti mahdollista luoda erilaisia kuvasarjoja sivustollesi ja tehdä ne eri tavalla selaimen edustajan perusteella, mutta rehellisesti tämä vain lisää lisää töitä puolellasi, joten yritä käytä tekniikkaa vain silloin, kun sitä todella tarvitaan.
Verkkosivujen suunnittelu iPhoneen
Matkaviestinnän markkinaosuus on melko suuri ja jaettu, mutta Apple on saanut suuren osan siipikasta iDevicesinsa kanssa. Sekä iPhone että iPad ovat langattomia Internet-valmiita laitteita, joissa on sisäänrakennettu kosketusnäyttö. Niissä on sama oletusselain, Safari ja koko joukko muita vaihtoehtoja.
IPhone-sivustoille sinun on kohdennettava näytön koko. Kiinteä näytön koko on asetettu 320px 480px vanhemmille iPhone-malleille ja 640px 960px iPhone 4: lle ja iPhone 4S: lle.
iPhonen näytöt ovat rajallisia. Sinulla pitäisi olla yksi sisällön lohko, joka ulottuu niin kauan kuin se on tarpeen. Elementtien pitäminen yhdessä sarakkeessa säästää päänsärkyä ja sallia nesteen asettelu “täyttää” sekä vaaka- että vaakasuunnassa. Tämän vuoksi sinun on todennäköisesti kehitettävä toinen malli ja löydettävä keino tarkistaa, käyttävätkö kävijäsi iPhonea. Pienen PHP-koodinpätkän pitäisi toimia hyvin:
Periaatteessa logiikka vetää globaalin $ _SERVER HTTP-agentin muuttuja ja tarkistaa, onko sana “iphone” näkyy missä tahansa. Jos kyllä, niin tiedämme, että kävijämme käyttää iPhonea ja sieltä voimme laittaa hieman erilaisen HTML-koodin tai jopa kokonaan uuden mallipohjan! Tätä voitaisiin käyttää myös sisällyttää iPhone-spesifinen tyylitaulukko, muuta sivun otsikoita, poista kuvia tai lähes mitään dynaamisia vaikutuksia.
Uusien tyyleiden tarjoamisessa on helpompi tapa. Kuten aiemmin mainittiin, iPhonen enimmäiskoko on 960px. Siksi uusilla CSS3-mediakyselyillä voit lisätä tyylejä suoraan sivustosi tärkeimpään tyylitaulukkoon vain näyttö iPhoneen. Alla on pieni esimerkkikoodi:
@media-näyttö ja (max-device-width: 960px) / * iPhone css * /
Tämä toimii, koska CSS voi nyt havaita selaavat aineet ja niiden ominaisuudet. Näytön suurin leveys on yksi niistä ominaisuuksista, jotka voidaan havaita.
Kaiken kaikkiaan iPhone-laitteiden mobiilisivusto ei ole liian vaikea suunnitella, on vain liian monia esimerkkejä, esim. CSS iPhone. Pidä itsesi kiireinen opiskelu ja älä pelkää kokeilla uusia tekniikoita käyttöliittymän suunnittelussa.
Mobiili jQuery-komentosarjat
Suurin osa etuosan web-kehittäjistä tuntee jQuery-kirjaston. Se tarjoaa loistavan lyhytnimityksen koodausvaikutuksille, animaatioille, pudotusvalikoille ja monille muille selaimen toiminnoille, ja se vain saa enemmän mahtavaa jQuery Mobile -ilmoituksen kanssa. se on ei suositella hypätä suoraan teknologiaan ja ladata verkkosivusi tehokkuudella kaikkialla, mutta testaustarkoituksiin edistykselliset toiminnot voivat toimia hyvin.
jQuery Mobile on hieman erilainen kuin tavallinen jQuery, koska se antaa sinulle täydellisen ympäristön, johon voit rakentaa. Kun käsittelet tiedostojaan, ne eivät ole vain JavaScript vaan myös CSS-tyylit painikkeille, linkeille ja siirtymävaihtoehdoille. Kirjoitat vielä Web-sivuja HTML-koodissa, mutta jQuery Mobile -tiimissä on tarjosi paljon valinnaisia käyttöliittymän suunnittelun ominaisuuksia. Voimme tehdä paljon tämän kehyksen kanssa, mutta siitä lähtien kehys on edelleen beta-versiossa, pidetään kiinni yksinkertaisista vaikutuksista.
Pieni opetusohjelma DevGrow-blogissa tarjoaa joitakin mahtavia esimerkkejä. Virallinen sivusto tarjoaa myös demoja, joita voit kokeilla. Huomaa, että käytämme HTML-attribuuttia, data-siirtymä lisätä animaatiovaikutuksia mihin tahansa ennalta määritettyyn arvoon. Näitä ovat dia, pop, flip, fade jne. Tutustu pieneen DevGrow-esimerkkiin saadaksesi maun näistä vaikutuksista.
Vaikutukset ja siirtymät ovat melko siistit, ja se, että voit rakentaa koko mobiililiitännän tiukasti jQueryn kanssa, on myös suuri askel eteenpäin tällä alustalla, mutta alustan ollessa vain beetalla en suosittele koko mobiilisivuston rakentamista heidän kirjastoonsa, varsinkin kun se on Kaikkia suurimpia älypuhelimia ei tueta kirjallisesti (erityisesti Windows Phone 7), mutta se varmasti paranee ajan myötä.
Lopulta suosittelen tutustumaan uuteen mobiilikehykseen ennen elää jokaisessa hankkeessa.
Hyödyllisiä kehitystyökaluja
Mobiilikehittäjät eivät vain tutkii koodaus- ja suunnitteluresursseja. Ohjelmistotyökaluja ja IDE-laitteita on myös paljon, puhumattakaan tehokkaista mobiilirakenteista. Web-kehitys on vaikea tehtävä, joka vaatii melkoisesti omistautumista, mutta ylimääräisten työkalujen hyödyntäminen tekee työstäsi paljon helpompaa.
Opera Mobile Emulator
Etsitkö tapaa tarkistaa, miten mobiilisivustosi on tehty? Tämä voi olla valtava kipu, jos sinulla ei ole älypuhelinta, jossa on Internet-yhteys. Tai et vain halua käyttää älypuhelinta testata sivustoa joka kerta, kun päivitys työnnetään palvelimellesi. No, Opera Mobile Emulator on loistava ohjelmisto, jolla voit testata mobiilisivustoa.
Emulaattori tukee sitä 20 mobiiliprofiilia kuten Samsung Galaxy S, HTC Desire ja jopa tabletit kuten Motorola Xoom. On myös mahdollista asettaa mukautettu resoluutio ja pikselitiheys intensiivistä testausta varten. Mikä parasta, sinun ei tarvitse tehdä liikaa konfiguraatiotöitä, vain muutaman napsautuksen ja olet hyvä mennä.
Lataus on täysin ilmainen ja ohjelmisto toimii sekä Mac OS X- että Windows-ympäristössä. Heidän kehittäjänsä ovat kovasti töissä luomalla asianmukaiset web-standardit ja säätämällä niiden mobiililaitteistoa. Suosittelen muita dev-työkaluja, jos etsit ylimääräisiä työkaluja, jotka auttavat sinua matkan varrella.
PhoneGap
HTML5: n yli ei ole kehitetty monia sovellusliittymiä, jotta voidaan rakentaa kiinteitä mobiilisovelluksia. Erityisesti mobiili maisema on puuttunut tällaisista verkkosivustoista, minkä vuoksi PhoneGap täyttää kapealla niin hyvin. Heidän fooruminsa avulla voit helposti rakentaa HTML5-pohjaisia sovelluksia alkuperäisinä sovelluksina 6 eri alustalle.
Prosessi toimii puristamalla koodisi ensin ja siirtämällä se PhoneGapin sovelluskehyksen kautta. Sieltä sovellukset voivat saavuttaa suuren osan mobiilimarkkinoista, kuten Android, iOS, Windows Phone 7 ja BlackBerry.
Jos olet hieman hämmentynyt, älä hermostu liikaa. Niiden tukisivut kuvaavat selkeästi prosessia ja tarjoavat linkkejä hyödyllisiin resursseihin. Jo kehitetyt sovellukset on koottu kauniiseen kirjastotyyliin. Tutustu niiden koko sovellusten kokoelmaan, jonka voit lajitella kuvakaappauksin varustettujen laitteiden mukaan.
Aptana Studio
Aptana-sivusto on tärkein paikka oppia kehitystyökaluistaan. Uusin ohjelmistopaketti, Aptana 3.0.3, sisältää täysin integroidun IDE: n web-kehitykseen, CSS-tyyliin ja HTML-tunnisteihin, ja paras osa: Aptana on täysin vapaa ladata! Ne tarjoavat paketteja kaikille kolmelle tärkeälle käyttöjärjestelmälle (mukaan lukien Linux), joka on valtava käyttömukavuus kehittäjille.
Mikä tekee Aptanasta erityisen, kuinka nopeasti voit kehittää pienen web-sovelluksen ja testata suunnittelua. Studio-sviitissä voit nopeasti kehittää ja testata Ruby on Railsin, PHP: n, Pythonin tai yksinkertaisesti HTML / CSS: n yli kulkeva web-sovellus, ja niiden koodin korostusominaisuudet ovat viime aikoina parantuneet sisältää uusia HTML5- ja CSS3-tunnisteiden kirjastoja. Siinä on myös Git-integrointi, sisäänrakennettu päätelaite, koodin virheenkorjaus ja kourallinen muita hienoja ominaisuuksia.
Mobile GUI Kits ja kuvakkeet
Mikä olisi web ilman freebies makaa noin? Verkkosuunnittelijoille käyttöliittymän merkitys on kaiken muun yläpuolella. Yksinkertaiset käyttöliittymät ovat vaikeita tulla ja vain kaikkein luovimmat suunnittelijat ovat tehneet ratkaisuja.
Web-suunnittelijan käytettävissä on kuitenkin monia ilmaisia, mutta laadukkaita resursseja testata. Nämä GUI-paketit on suunniteltu pääasiassa Adobe Photoshopille tai Fireworksille, jossa voit liikkua elementtien ympäri ja viedä ne tasaisiksi kuvatiedostoiksi.
Kuvakkeet ovat erittäin kätevä resurssi. Suunnittelijat luovat ilmaisia sarjoja ja tarjoavat niitä verkossa useammin kuin koskaan aikaisemmin. Yksi tällainen sivusto Glyphish on esitelty sekä ilmaisia että pro-kuvakkeita. Nämä mallit perustuvat yhteen teemaan, jota käytetään mobiilimallien ja sovellusten suunnittelussa.
Meidän mobiililaitteiden prototyyppimallin kokoelma on suuri apu sinulle sivuston ja sovellusten kehittämisen matkan varrella. Sinun ei pitäisi aloittaa koodausta ennen kuin sinulla on vahva graafinen käyttöliittymä, ja nämä web-paketit alkavat aloittaa oikealla tiellä.
iOS 5 GUI Kit
iPhone UI Vector -elementit
iPhone App Icon Kit
Lanka-magneettit (DIY-paketti)
Android-käyttöliittymä
