Einu sinni, um klukkustund í burtu frá því sem ég bý núna, vann vefhönnuður sem elskaði Photoshop hans og fastbreiddar skipulag. Og vel, ég vil ekki spilla endanum, en þessi hönnuður var ég.

Þá, þegar ég var að hugsa um mitt eigið fyrirtæki, gekk vefabiðandi skapandi samfélagur með berserk yfir þetta nýtt hugtak sem kallast "móttækileg hönnun". Eins og allir ungir, bjarta augu, bushy-tailed faglega myndi gera, ég rannsakað. Eftir allt saman, ætti nýjasta, nýjasta hlutinn að vera að minnsta kosti í huga.

Það sem ég uppgötvaði hins vegar fór frá mér óttast. Illt mastermind sem heitir Ethan Marcotte hafði lausan tauminn a dastardly áætlun að gera vefhönnuðir að vinna betur! Bók hans fór frá fólki sem ranting og raving um hvernig við þurftum að "íhuga farsíma notendur" og "gera vefsíður okkar að vinna eins mörgum kerfum og mögulegt er" ... þjóðunum.

Auðvitað mótmælti ég svo lengi sem ég gat. Ég barðist hart og hugrakkur gegn þessu fjöru af góðri vitund og snjallt fyrirtæki; en það var allt fyrir ekkert. Þá féll ég aftur á afsakanir: "En ég hef engar farsímatæki til að prófa með!" Og það, kæri lesandi, er málið. Það kemur í ljós að þú þarft ekki alveg einn.

Með tímanum hef ég komið upp nokkrum grunnleiðbeiningum, að ef þú finnur þig án farsíma eða töflu, mun þú hjálpa þér að hanna vefsíður sem gera það að litlu leyti á flestum farsímavísum.

Fyrirvari: þú ættir ekki að hlusta á mig ef ...

... þú ert að byggja upp eitthvað sem er stærra en lítið, innihaldstengt vefsvæði. Stærri vefsíður og umsóknarfyrirtæki eiga að vera örugglega prófaðar á raunverulegum farsímanum. Ég meina, vissulega, þú gætir líklega falsað það, en ég myndi ekki ráðleggja því.

Þegar þú ert að vinna með óþekkta breytur, er besti kosturinn þinn að halda hlutum heimskulega einfalt. Já, ég kalla á næstum klisja KISS regluna, því það virkar.

Gera þinn rannsókn

Án rekki fullur af smartphones og svo framvegis, þú þarft að reiða sig á það sem aðrir vita. Til allrar hamingju, mikið af tíma og orku hefur verið eytt með því að skoða getu vinsælra farsímavarna þarna úti og hvernig þeir bera saman við hvert annað.

Finndu út hvað markhópurinn þinn er og finndu þá hvaða vafra þeir nota. Eins og alltaf, Google er vinur þinn. Þá er allt sem þú þarft að gera hönnun fyrir tölfræði.

Ef flestir hreyfanlegur markaðurinn þinn notar Android / IOS á einu eða öðru formi, þá ertu með heppni! Sjálfgefin vafrar (og vinsælustu valin, svo sem Firefox) eru nútíma að mestu leyti. Advanced skipulag tækni, undirstöðu CSS3 áhrif, jQuery ... þetta mun öllum líklega gera nokkuð vel.

Ef markhópur þinn notar aðrar vettvangi þarftu hins vegar að gera nákvæmari rannsóknir um þá og finna út hvað þeir geta og geta ekki gert.

Nú, hvað gerirðu ef þú hefur litla eða enga upplýsingar um notendur þína? Reyndu að minnsta kosti finna út hvar þau eru. Flestar vefsíður hafa að minnsta kosti almennt svæði sem flestir notendur þeirra koma frá. Fáðu upplýsingar um það svæði.

Mistakast allt þetta, hönnun í versta tilfelli.

Byrjaðu hér

Til að gera starf þitt svolítið auðveldara fann ég vefsíðu með tiltölulega nákvæma samanburð á því sem vinsælustu farsímavafar gera og styðja ekki. Skoðaðu það út á mobilehtml5.org .

Og auðvitað er það alltaf vinsælt caniuse.com

Íhugaðu að nota ramma

Ég veit að sumir hönnuðir sverja með því að búa til sérsniðna kóða sem er sérstaklega við hvert verkefni en þegar þú ert að vinna blindur, þá er það ekki raunhæft að endurfjárfesta hjólið. Rammar sem þegar hafa verið prófaðir á farsímanum taka mikið af giska í ferlinu.

Giska er slæmt. Forðastu það.

Nú hef ég augljóslega ekki persónulega reynt eða prófað alla ramma þarna úti, þannig að þú verður að finna einn sem gerir það sem þú vilt að það sé að gera og rannsaka það og bera það saman við getu fyrirhugaðrar hreyfanlegur pallur þinnar. Enn, það eru fáir sem þú gætir byrjað með:

Eldhús-vaskur ramma

Þetta eru þær sem þú getur sennilega nefnt ofan á höfðinu. Þeir einkennast af hreinni flókið. Þeir koma með skipulagskerfi, UI-þætti og jQuery tappi saman í einum öflugum pakka.

Frægasta af þessum eru Stígvél og Stofnunin . Ég mun ekki trufla að bera saman þau hér, svo farðu á undan og Google "Stígvél vs. Foundation" ef þú þarft frekari upplýsingar. Allt sem þú þarft í raun að vita fyrir núna er að í hverju ramma hefur hver hluti verið mikið prófuð af frekar stórum aðdáandi og er tilbúinn fyrir farsíma.

Mið-svið ramma

Þetta reynir ekki að gera allt fyrir þig, heldur bara gefa þér nóg til að byrja. Þetta gerir aðlaga hluti frekar en að búa til og / eða stíl flóknari UI-þættir er undir þér komið.

Þessi flokkur inniheldur Beinagrindur , LESS Framework 4 og svo framvegis…

Einungis rammar um skipulag

Þetta er reyndar persónuleg uppáhaldsflokkurinn minn. Ég vil frekar byrja með einni skjá og skipulagskerfi sem er tilbúið, sem gerir mér kleift að búa til vefsíðu sem ég vil án þess að þurfa að skrifa mikið af CSS, eða reyna að vinna úr tilteknum hlutum hvers ramma.

UI frumefni ramma

Þessar rammar, að mestu leyti, virðast ekki hafa áhyggjur af skipulagi eða síðuuppbyggingu. Þau eru hönnuð til að veita auðvelda leið til að bæta við ímyndandi, hreyfanlegur samhæfðum forritum tengi þætti (lesa: búnaður).

Ég hef aðeins prófað einn, en rannsóknir mínar segja að þriggja bestu (eða að minnsta kosti vinsælustu) rammarnar í þessum flokki eru jQuery Mobile , KendoUI , og Wijmo .

Faðma aðgengi

Það kemur í ljós að aðgengi er ekki bara fyrir litblind eða algjörlega blindur. A einhver fjöldi af eldri farsíma vöfrum er svo takmarkaður í getu að það er frekar eins og að vafra með öllum CSS og Javascript slökkt.

Besta veðmálið þitt, í þessu tilfelli, er að gera algerlega viss um að vefsvæðið þitt sé nothæft við þessar aðstæður. Slökkva á öllum þessum fallegu hlutum og vertu viss um að það er ennþá hægt fyrir notendur að ná markmiðum vefsvæðisins án þeirra.

Notaðu keppinautar

Tæki emulators eru venjulega ekki hundrað prósent nákvæm, en þú getur prófað mikilvægustu hluti, eins og skipulag og svo framvegis. Bugs sem ég hef upplifað eru oft minni hluti, eins og leturgerðir sem ekki eru gerðar. Ekki hafa áhyggjur, þeir ættu að vinna bara vel við raunverulegan vélbúnað.

En hvaða emulators ættir þú að nota?

Android SDK

Þessi virkar svolítið hægt, en það virkar eins og heilla. Þú þarft að hlaða niður öllu forritasettinu, en það er vel þess virði að hafa forrit sem nánar líkist ekki aðeins Android sjálfgefna vafranum heldur öllu OS. Að auki getur þú prófað síðuna þína á ýmsum raunverulegum "tækjum".

Opera hreyfanlegur keppinautur

Annar sem virkar í grundvallaratriðum eins og auglýst er. Þú hleður því niður, velur "tækið þitt" og fer.

Firefox valkostir

Firefox hefur nokkra möguleika til að prófa farsíma efnið þitt. Fyrsti er einföld keppinautur sem líkir eftir flutningsgetu Mozilla's Mobile Firefox verkefnisins, codename: Fennec.

Það er ekki of flókið að veita þér einfaldan, breytanlegt gluggann, svo það er komið að þér að setja handvirkt skjástærðina sem þú vilt prófa.

The annar valkostur er viðbót fyrir skjáborðsútgáfu Firefox. Kölluð Firefox OS Simulator, það veitir þér alla vettvang til að spila með, ekki bara vafranum (líkt og Android SDK).

Windows sími

Ég gat ekki prófað þetta keppinautur , þar sem það þarf að setja upp mjög stóran SDK, og uppsetningin var bugged, að minnsta kosti fyrir mig. Enn er það þarna úti fyrir þig að prófa að eigin vali.

Brómber

Brómber býður upp á fjölda hermir fyrir BB10. Kannski er ég, en ég hef ekki haft mikla velgengni í því að keyra eitthvað af þeim. Mig langar að heyra frá þeim sem stjórna þeim til að vinna þau.

iOS

Síðast en þó ekki síst, veita Apple a ókeypis iOS hermir sem hægt er að nota til að prófa fyrir Apple tæki sem hluti af Xcode. Því miður, vegna þess að það er hluti af Xcode, er það aðeins Mac.

Ein stærð sem hentar öllum

Ef þú hefur fjárhagsáætlunina (eða getur prófað mjög fljótt, þar sem frítími þeirra er tímabundin) getur þú ekki farið of langt úrskeiðis með BrowserStack . Þeir leyfa þér að prófa á mörgum skjáborðum og mikið úrval af farsíma. Ekki eins móttækilegur og raunverulegur hlutur, þeir munu sýna þér vandamál með hluti eins og útlit.

Endanleg ábendingar

Stilla skjástærðina

Farsímar hafa tilhneigingu til að spila með zoom stillingum, eða svo hefur reynsla mín verið. Ef þú vilt að vefsvæðið þitt sé eins og það gerist þegar þú smellir vafrann þinn niður í farsíma stærðir skaltu nota þetta fallega stykki af HTML í höfuðið á skjalinu þínu:

Lærðu að elska einfaldleika

Leyfðu mér að endurskrifa það: naumhyggju steina á farsímanum. Minimalistic fagurfræði passar vel við smærri skjástærð með færri klip og aðlögun, sem sparar mér mikinn tíma. Kannski virðist þetta ekki vera nokkuð af þér, en ég get ekki lagt áherslu á það nóg.

Niðurstaða

Þessi upplýsingatækni er auðvitað aðeins ábendingin á ísjakanum og engin samsvörun til að prófa vefsíðurnar þínar á alvöru farsímahugbúnaði en það ætti að leyfa þér að byrja og vonandi afla nóg úr farsímahönnun til að hafa efni á því tæki sem þú notar svo ríkulega skilið.

Valin mynd / smámynd, mynd af farsíma um Shutterstock.