Kerran kerrallaan, noin tunnin ajomatkan päässä asuinpaikastani, työskenteli web-suunnittelija, joka rakasti hänen Photoshop-koneita ja kiinteän leveän asettelun. Ja no, en halua pilata loppua, mutta se suunnitteli minua.
Sitten, kun olin miettii omaa liiketoimintaani, web-pohjainen luovuusyhteisö menestyi tämän uudentyyppisen käsitteen nimeltä "reagoiva muotoilu". Kuten minkä tahansa nuoren, kirkkaan silmänräpäisemmän, karhupuoleisen ammattilaisen tekisi, tutkitsin. Loppujen lopuksi uusin, uusin asia on aina annettava ainakin silmänräpäyksessä.
Mitä löysin, kuitenkin jäi minut kauhistuneeksi. Paha päämies nimeltään Ethan Marcotte oli valloittanut a huono suunnitelma tehdä web-suunnittelijoista töitä! Hänen kirjansa jättivät ihmisiä rantelevasti ja röyhkeästi siitä, miten meidän tarvitsee "harkita mobiilikäyttäjiä" ja "tehdä verkkosivujemme toimimaan mahdollisimman monilla alustoilla" ... pakanoilla.
Tietenkin vastustin niin kauan kuin voisin. Taistelin kovaa ja rohkeasti tätä järkevää ja järkevää liiketoimintaa vastaan; mutta kaikki ei ollut mitään. Sitten palasin tekosyitä vastaan: "Mutta minulla ei ole mobiililaitteita, joiden kanssa kokeillaan!" Ja tämä, rakas lukija, on asia. Näyttää siltä, että et ehdottomasti tarvitsisi sitä.
Ajan myötä olen keksinyt muutamia perusohjeita, joiden pitäisi löytää itsesi ilman matkapuhelinta tai tabletta, auttaa sinua suunnittelemaan verkkosivustoja, jotka tekevät asioista hyvältä useimmissa mobiiliselaimissa.
... olet rakentamassa jotain isompaa kuin pieni, sisältöä ohjaava verkkosivusto. Suuret verkkosivustot ja sovelluskohteet olisi ehdottomasti testattava todellisissa mobiililaitteissa. Tarkoitan, varmasti, että voisit luultavasti rikkoa sen, mutta en kannata sitä.
Kun työskentelet tuntemattomien muuttujien kanssa, paras vaihtoehto on pitää asioita tyhmästi yksinkertaisina. Kyllä, viittaan lähes kliskiin KISS-sääntöön, koska se toimii.
Ilman telineitä täynnä älypuhelimia ja niin edelleen, sinun täytyy luottaa siihen, mitä muut ihmiset tietävät. Onneksi paljon aikaa ja energiaa on käytetty tarkastelemaan suosittujen mobiiliselainten ominaisuuksia ja niiden vertailu toisiinsa.
Tutustu kohdeyleisösi ja selvitä millaisia selaimia he käyttävät. Kuten aina, Google on ystäväsi. Sitten sinun tarvitsee vain suunnitella tilastoja.
Jos suurin osa mobiilimarkkinointimarkkinoista käyttää Android / iOSia yhdessä tai toisessa, olette onnea! Heidän oletusselaimet (ja suosituimmat vaihtoehdot, kuten Firefox) ovat nykyään moderneja. Kehittyneet asettelutekniikat, perus CSS3-tehosteet, jQuery ... nämä kaikki todennäköisesti tekevät kohtuullisen hyvin.
Jos kohdeyleisö käyttää muita käyttöympäristöjä, sinun on kuitenkin tehtävä tarkempi tutkimus heistä ja selvitettävä, mitä he voivat ja eivät voi tehdä.
Nyt, mitä teet, jos sinulla on vain vähän tietoa käyttäjistäsi? Yritä ainakin selvittää missä he ovat. Useimmilla verkkosivustoilla on vähintäänkin yleinen alue, jonka useimmat käyttäjät käyttävät. Hanki kyseisen alueen tilastot.
Jos kaikki ei ole, suunnittelua pahimmassa tapauksessa.
Jotta työsi olisi hieman helpompaa, löysin verkkosivuston, jossa on melko yksityiskohtainen vertailu siitä, mitä suosituimmat mobiiliselaimet tekevät ja eivät tue. Tarkista se mobilehtml5.org .
Ja tietenkin on aina suosittu caniuse.com
Tiedän, että jotkut suunnittelijat vannovat luomalla kullekin projektille omat mukautetun koodin, mutta kun työskentelet sokealla, puhumattakaan pyörän keksimisestä ei ole käytännöllinen vaihtoehto. Mobiilialustoille jo testatut kehykset vie paljon arvailuja pois prosessista.
Arvailu on huono. Vältä sitä.
Nyt en tietenkään ole henkilökohtaisesti kokeillut tai testannut kaikkia kehyksiä siellä, joten sinun on löydettävä sellainen, joka tekee mitä haluat tehdä ja tutkii sitä vertaamalla sitä suunnitellun mobiililaitteen ominaisuuksiin. On kuitenkin olemassa muutamia, joita voit aloittaa:
Nämä ovat niitä, joita voit todennäköisesti nimetä pään yläpäästä. Niille on ominaista niiden selkeä monimutkaisuus. Ne tuovat layout-järjestelmät, UI-elementit ja jQuery-laajennukset yhdessä yhteen tehokkaaseen pakettiin.
Tunnetuimpia näistä ovat bootstrap ja perusta . En vaivaudu vertaamaan niitä täällä, joten mene eteenpäin ja Google "Bootstrap vs. Foundation", jos tarvitset lisätietoja. Sinun tarvitsee vain tietää, että jokaisessa kehyksessä jokainen komponentti on testattu perusteellisesti melko suurella tuulettimella ja se on mobiili-valmis.
Nämä eivät yritä tehdä kaikkea sinua varten, vaan pikemminkin antavat sinulle tarpeeksi aluksi. Tämä tekee asioiden mukauttamisesta hieman helpomman, mutta monimutkaisempien UI-elementtien luominen ja / tai muotoilu riippuu sinulle.
Tämä luokka sisältää Luuranko , LESS Framework 4 ja niin edelleen…
Tämä on oikeastaan henkilökohtainen suosikkiluokkaani. Haluan aloittaa tyhjällä näytöllä ja layout-järjestelmällä valmiina, mikä sallii minun luoda sellaisen verkkosivuston, jota en halua korvata paljon CSS: ää tai yrittää poimia tietyn osan tietyistä osista.
Nämä puitteet eivät suurimmaksi osaksi näytä aiheuttavan asettelua tai sivurakennetta. Ne on suunniteltu tarjoamaan helpoin tapa lisätä hienoja, mobiilikäyttöisiä sovellusrajapintoja (lue: widgettiä).
Olen testannut vain yhtä, mutta tutkimukseni mukaan tämän luokan kolme parasta (tai ainakin suosituinta) kehystä ovat jQuery Mobile , KendoUI , ja Wijmo .
On käynyt ilmi, että saavutettavuus ei ole pelkästään sokea tai sokea. Paljon vanhempia mobiiliselaimia on niin rajoitettu ominaisuuksiltaan, että se on melko paljon kuin selailu kaikkien CSS: n ja Javascriptin kanssa sammutettuna.
Paras vaihtoehto tässä tapauksessa on varmistaa, että sivustosi on käyttökelpoinen näissä olosuhteissa. Käännä kaikki nämä kauniit asiat käytöstä ja varmista, että käyttäjät voivat edelleen saavuttaa verkkosivuston tavoitteet ilman niitä.
Laiteemulaattorit eivät yleensä ole sataprosenttisesti tarkkoja, mutta voit testata tärkeimpiä asioita, kuten ulkoasun ja niin edelleen. Ongelmat, joita olen havainnut, ovat usein pienempiä asioita, kuten web-kirjasimia, jotka eivät renderoidu. Älä huoli, heidän pitäisi työskennellä hienosti varsinaisessa laitteistossa.
Mutta mitä emulaattoreita sinun pitäisi käyttää?
Tämä toimii vähän hitaasti, mutta se toimii kuin charmia. Sinun on ladattava koko kehittäjäpaketti, mutta on syytä pitää ohjelmassa, joka jäljittelee tarkasti paitsi Android-oletusselaimen myös koko käyttöjärjestelmää. Lisäksi voit testata sivustosi useilla virtuaalisilla "laitteilla".
Toinen joka toimii periaatteessa mainostettuna. Lataa se, valitse "laite" ja mene.
Firefoxilla on useita vaihtoehtoja mobiilisisällön testaamiseen. Ensimmäinen on yksinkertainen emulaattori, joka jäljittelee Mozillan mobiilin Firefox-projektin renderointitoimintoa, koodinimi: Aavikkokettu.
Se ei ole liian monimutkainen, jos sinulla on yksinkertainen, muokattava ikkuna, joten sinun on asetettava manuaalisesti näytettävä koko, jonka haluat testata.
second option toinen vaihtoehto on lisäosa Firefoxin työpöytäversiolle. Firefoxin simulaattorilla nimetty versio tarjoaa sinulle koko alustan, jota ei pelkästään selain (kuten Android SDK).
En voinut testata tämä emulaattori , koska se vaatii erittäin suuren SDK: n asentamisen ja asennus oli väärässä, ainakin minulle. Silti se on siellä, jotta voit testata omalla harkintanne mukaan.
Blackberry tarjoaa useita simulaattorit BB10: lle. Ehkä se on minua, mutta minulla ei ole ollut paljon menestystä. Haluaisin kuulla keneltä tahansa, joka onnistuu tekemään työtä.
Viimeisenä, mutta varmasti vähäisimpänä, Apple tarjoaa a ilmainen iOS-simulaattori jota voidaan käyttää Apple-laitteiden testaamiseen osana Xcodea. Valitettavasti, koska se on osa Xcodea, se on vain Mac.
Jos sinulla on talousarvio (tai voit testata todella nopeasti, koska vapaa-aika on määräaikainen), et voi mennä liian pitkälle väärin BrowserStack . Niiden avulla voit testata monella työpöydällä ja valtavasti erilaisia matkapuhelimia. Ei niin reagoiva kuin todellinen asia, he näyttävät asioita, kuten asettelua.
Mobile-selaimissa on taipumus leikkiä zoomausasetuksilla, tai kokemukseni on ollut. Jos haluat, että verkkosivustosi näyttää tapaa, kun pienennät selainikkunasi alas mobiilikokoja varten, käytä tätä kaunista HTML-osaa asiakirjan otsikossa:
Sallikaa minun muokata tämä: minimalismi kiviä mobiili. Minimaalinen esteettinen sopeutuu hyvin pienempiin näytön kooksiin, pienemmillä muokkauksilla ja säädöillä, mikä säästää minua paljon aikaa. Ehkä tämä tuntuu ei-aivomukselta joillekin teistä, mutta en voi korostaa sitä tarpeeksi.
Tämä informaation kollaasi on vain jäävuoren kärki, eikä tietenkään voida testata verkkosivustojesi todellisissa mobiililaitteissa, mutta sen pitäisi antaa sinulle mahdollisuus aloittaa ja toivottavasti ansaita tarpeeksi mobiilisuunnittelusta, jotta laite labsii sinulle niin ansaitsevat ansiokkaasti.
Esitetty kuva / pikkukuva, mobiililaitteen kuva kautta Shutterstock.