En gang om en time fra hvor jeg bor, jobbet jeg en webdesigner som elsket sine Photoshop-komposisjoner og fastbreddeoppsett. Og vel, jeg ønsker ikke å skjemme bort slutten, men den designeren var meg.
Da jeg nettopp tenkte på min egen virksomhet, ble det nettbaserte kreative fellesskapet kjent med dette nybegynne konseptet "responsivt design". Som noen unge, lyseøyne, bushy-tailed profesjonelle ville gjøre, undersøkte jeg. Tross alt, bør den nyeste, nyeste tingen alltid gis minst et forbigående blikk.
Det jeg oppdaget, forlot meg imidlertid forferdet. En ond mastermind heter Ethan Marcotte hadde slukket a dastardly plan å gjøre webdesignere jobber hardere! Hans bok forlot folk som ranting og raving om hvordan vi trengte å "vurdere mobile brukere" og "få våre nettsteder til å fungere på så mange plattformer som mulig" ... hedningene.
Selvfølgelig motstod jeg så lenge jeg kunne. Jeg kjempet hardt og modig mot denne tidevannet med god sans og smart virksomhet; men det var alt for ingenting. Da falt jeg tilbake på unnskyldninger: "Men jeg har ingen mobile enheter til å teste med!" Og det, kjære leser, er poenget. Det viser seg at du ikke absolutt trenger en.
Over tid har jeg kommet opp med noen grunnleggende retningslinjer som, hvis du finner deg selv uten en mobiltelefon eller en nettbrett, vil hjelpe deg med å designe nettsteder som gjør at alt ser bra ut på de fleste mobile nettlesere.
... du bygger noe større enn et lite, innholdsdrevet nettsted. Store nettsteder og applikasjonsdrevne nettsteder bør mest definitivt bli testet på faktiske mobile plattformer. Jeg mener sikkert, du kunne nok fake det, men jeg ville ikke råde det.
Når du jobber med ukjente variabler, er det beste alternativet å holde ting dumt enkelt. Ja, jeg påberoper den nesten klichédiske KISS-regelen, fordi den fungerer.
Uten en rack full av smarttelefoner og så videre, må du stole på hva andre mennesker vet. Heldigvis har mye tid og energi blitt brukt til å undersøke evnen til de mer populære mobilnettleserne der ute, og hvordan de sammenligner med hverandre.
Finn ut hva målgruppen din er, og finn ut hva slags nettlesere de bruker. Som alltid er Google din venn. Så alt du trenger å gjøre er å designe for statistikk.
Hvis det meste av mobilmarkedet ditt bruker Android / IOS i en eller annen form, har du lykke! De vanlige nettleserne (og mest populære alternativer, for eksempel Firefox) er moderne for det meste. Avanserte oppsettteknikker, grunnleggende CSS3-effekter, jQuery ... disse vil alle sannsynligvis gjøre det rimelig bra.
Hvis målgruppen bruker andre plattformer, må du imidlertid gjøre mer spesifikk forskning om dem, og finne ut hva de kan og ikke kan gjøre.
Nå, hva gjør du hvis du har liten eller ingen informasjon om brukerne dine? Prøv å finne ut hvor de er. De fleste nettsteder har i det minste en generell region som de fleste brukerne henter fra. Få statistikken for den regionen.
Mangler alt det, design for worst case scenario.
For å gjøre jobben litt enklere, fant jeg et nettsted med en ganske detaljert sammenligning av hva de mest populære mobilnettleserne gjør og ikke støtter. Sjekk det ut på mobilehtml5.org .
Og selvfølgelig er det alltid populært caniuse.com
Jeg vet at noen designere sverger ved å lage egendefinert kode som er spesifikk for hvert prosjekt, men når du arbeider blind, er det ikke et praktisk alternativ å gjenoppfinne hjulet. Rammer som allerede er testet på mobile plattformer, tar mye av gjetningen ut av prosessen.
Gjetning er dårlig. Unngå det.
Nå har jeg selvfølgelig ikke personlig prøvd eller testet hvert ramme der ute, så du må finne en som gjør det du vil ha det, og undersøke det, sammenligne det med evnen til den planlagte mobilplattformen din. Likevel er det noen du kan begynne med:
Dette er de som du sikkert kan nevne på toppen av hodet ditt. De er preget av deres rene kompleksitet. De bringer layoutsystemer, UI-elementer og jQuery-plugins sammen i en kraftig pakke.
De mest kjente av disse er Bootstrap og Fundament . Jeg vil ikke bry deg om å sammenligne dem her, så fortsett og Google "Bootstrap vs. Foundation" hvis du trenger mer informasjon. Alt du virkelig trenger å vite for nå er at i hvert rammeverk, har hver komponent blitt omfattende testet av en ganske stor fan-base og er mobil-klar.
Disse prøver ikke å gjøre alt for deg, men bare gi deg nok til å komme i gang. Dette gjør det enklere å tilpasse ting, men opprettelsen og / eller stylingen av mer komplekse brukergrensesnittelementer er opp til deg.
Denne kategorien inkluderer Skjelett , MINDER ramme 4 og så videre…
Dette er faktisk min personlige favorittkategori. Jeg foretrekker å starte med et tomt skjermbilde og et layoutsystem på klart, noe som gjør at jeg kan lage den typen nettside jeg vil ha uten å måtte overskrive mye CSS, eller prøve å trekke ut bestemte deler av et gitt rammeverk.
Disse rammene, for det meste, ser ikke ut til å bekymre seg om layout eller sidestruktur. De er utformet for å gi en enkel måte å legge til fancy, mobile kompatible applikasjonsgrensesnittelementer (les: widgets).
Jeg har bare testet en, men min forskning sier at de tre beste (eller i det minste mest populære) rammene i denne kategorien er jQuery Mobile , KendoUI , og Wijmo .
Det viser seg at tilgjengeligheten ikke bare er for fargeblind eller helt blind. Mange av de eldre mobilnettleserne er så begrensede i muligheter at det er ganske mye som å bla med alle CSS og Javascript slått av.
Din beste innsats, i dette tilfellet, er å være helt sikker på at nettstedet ditt er brukbart under disse forholdene. Slå av alle de fine tingene, og sørg for at det fortsatt er mulig for brukerne å oppnå nettstedets mål uten dem.
Enhetsemulatorer er vanligvis ikke hundre prosent nøyaktige, men du kan teste de viktigste tingene, som layout og så videre. Feil jeg har møtt er ofte mindre ting, som webfonter som ikke gjengis. Ikke bekymre deg, de burde fungere fint på selve maskinvaren.
Men hvilke emulatorer skal du bruke?
Denne virker litt sakte, men det virker som en sjarm. Du må laste ned hele utviklerpakken, men det er vel verdt å ha et program som etterligner ikke bare Android-nettleseren, men hele operativsystemet. I tillegg kan du teste nettstedet ditt på en rekke virtuelle "enheter".
En annen som fungerer i utgangspunktet som annonsert. Du laster ned det, velg din "enhet" og gå.
Firefox har flere alternativer for å teste mobilinnholdet ditt. Den første er en enkel emulator som etterligner gjengivelsesfunksjonaliteten til Mozillas mobile Firefox-prosjekt, kodenavn: Fennec.
Det er ikke altfor komplisert, og gir deg et enkelt vindu som kan konverteres, så det er opp til deg å manuelt angi skjermstørrelsen du vil teste.
De andre alternativet er et tillegg for desktop-versjonen av Firefox. Koblet til Firefox OS Simulator, den gir deg en hel plattform for å leke med, ikke bare nettleseren (i likhet med Android SDK).
Jeg var ikke i stand til å teste denne emulatoren , da det krever å installere et veldig stort SDK, og installasjonen ble bugged, i hvert fall for meg. Likevel er det der ute for å teste etter eget skjønn.
Blackberry tilbyr en rekke simulatorer for BB10. Kanskje det er meg, men jeg har ikke hatt mye suksess med å kjøre noen av dem. Jeg vil gjerne høre fra alle som klarer å få dem til å fungere.
Sist, men absolutt ikke minst, gir Apple en gratis iOS-simulator som kan brukes til å teste for Apple-enheter som en del av Xcode. Dessverre, fordi det er en del av Xcode, er det bare Mac.
Hvis du har budsjettet (eller kan teste veldig fort, da fritiden er tidsbegrenset), kan du ikke gå for langt galt med BrowserStack . De vil tillate deg å teste på mange skrivebord og et stort utvalg av mobiler. Ikke så responsiv som den virkelige ting, de vil vise deg problemer med ting som layout.
Mobilnettlesere har en tendens til å leke med zoominnstillinger, eller så har min erfaring vært. Hvis du vil at nettstedet ditt skal se på måten det gjør når du krymper nettleservinduet ned til mobilstørrelser, kan du bruke dette vakre stykket HTML i hodet på dokumentet ditt:
La meg omformulere det: minimalistiske bergarter på mobilen. Den minimalistiske estetikken passer godt til mindre skjermstørrelser med færre tweaks og justeringer, og sparer meg mye tid. Kanskje dette virker som en no-brainer til noen av dere, men jeg kan ikke understreke det nok.
Denne informasjonskollagen er bare toppen av isbreen, og det er selvfølgelig ingen kamp for å teste nettstedene dine på ekte mobil maskinvare, men det bør tillate deg å komme i gang, og forhåpentligvis tjener nok fra mobilt design for å ha råd til det aktuelle enheten du så rikelig fortjener.
Utvalgt bilde / miniatyrbilde, mobil enhet bilde via Shutterstock.