Engang om en time væk fra hvor jeg bor i øjeblikket, arbejdede jeg en webdesigner, der elskede sine Photoshop comps og fastbredde layout. Og godt, jeg vil ikke forkæle slutningen, men den designer var mig.
Derefter gik det web-baserede kreative samfund, da jeg tænkte på min egen virksomhed, om, at det var et nyt koncept, der hedder "responsivt design". Som enhver ung, lysebrun, bushy-tailed professionel ville gøre, undersøgte jeg. Når alt kommer til alt, skal den nyeste, nyeste ting altid gives mindst et forbigående blik.
Hvad jeg opdagede dog forlod mig forfærdet. En ond mastermind navngivet Ethan Marcotte havde frigivet a dastardly plan at gøre webdesignere arbejde hårdere! Hans bog efterlod folk ranting og raving om hvordan vi skulle "overveje mobile brugere" og "gøre vores hjemmesider arbejde på så mange platforme som muligt" ... hedningerne.
Selvfølgelig modstod jeg så længe jeg kunne. Jeg kæmpede hårdt og modigt mod denne tidevand med god fornuft og smart forretning; men det var alt for ingenting. Derefter faldt jeg tilbage på undskyldninger: "Men jeg har ingen mobile enheder til at teste med!" Og det, kære læser, er punktet. Det viser sig, at du ikke absolut har brug for en.
I løbet af tiden har jeg fået nogle grundlæggende retningslinjer, som, hvis du finder dig selv uden en mobiltelefon eller en tablet, vil hjælpe dig med at designe websteder, der gør det godt for de fleste mobilbrowsere alligevel.
... du bygger noget større end en lille, indholdsdrevet hjemmeside. Store websteder og applikationsdrevne websteder skal absolut testes på de faktiske mobile platforme. Jeg mener sikkert, du kunne nok falske det, men jeg ville ikke rådgive det.
Når du arbejder med ukendte variabler, er din bedste mulighed at holde tingene dumt enkle. Ja, jeg påberåber den næsten klichédiske KISS-regel, fordi den virker.
Uden en rack fuld af smartphones og så videre, skal du stole på, hvad andre mennesker ved. Heldigvis er meget tid og energi blevet brugt til at undersøge mulighederne hos de mere populære mobilbrowsere derude, og hvordan de sammenligner med hinanden.
Find ud af, hvad din målgruppe er, og find ud af, hvilken slags browsere de bruger. Som altid er Google din ven. Så alt hvad du skal gøre er at designe for statistik.
Hvis det meste af dit mobile målmarked bruger Android / iOS i en eller anden form, har du held og lykke! Deres standard browsere (og mest populære alternativer, såsom Firefox) er moderne for det meste. Avancerede layout teknikker, grundlæggende CSS3 effekter, jQuery ... disse vil alle sandsynligvis gøre det rimeligt godt.
Hvis din målgruppe bruger andre platforme, skal du dog gøre mere specifikke undersøgelser om dem og finde ud af, hvad de kan og ikke kan gøre.
Hvad gør du nu, hvis du har ringe eller ingen oplysninger om dine brugere? Prøv at finde ud af, hvor de er. De fleste websteder har i det mindste en generel region, som de fleste af deres brugere henter fra. Få statistikken for den pågældende region.
Mangler alt det, design for værste tilfælde.
For at gøre dit arbejde lidt lettere, fandt jeg et websted med en ret detaljeret sammenligning af, hvad de mere populære mobilbrowsere gør og ikke støtter. Tjek det ud på mobilehtml5.org .
Og selvfølgelig er der altid populært caniuse.com
Jeg ved, at nogle designere sværger ved at oprette brugerdefineret kode, der er specifik for hvert projekt, men når du arbejder blindt, er det ikke en praktisk mulighed at genopfinde hjulet. Rammer, der allerede er testet på mobile platforme, tager meget af gættet ud af processen.
Guesswork er dårligt. Undgå det.
Nu har jeg selvfølgelig ikke personligt prøvet eller testet alle rammer derude, så du bliver nødt til at finde en, der gør hvad du vil have det, og undersøge det, sammenligne det med evnen til din planlagte mobile platform. Der er stadig et par, du kan starte med:
Det er dem, du sikkert kan nævne fra toppen af dit hoved. De er præget af deres rene kompleksitet. De bringer layoutsystemer, UI-elementer og jQuery-plugins sammen i en kraftfuld pakke.
De mest kendte af disse er bootstrap og Fundament . Jeg vil ikke gider sammenligne dem her, så fortsæt og Google "Bootstrap vs. Foundation", hvis du har brug for flere detaljer. Alt hvad du virkelig behøver at vide for nu er, at hver komponent i hver ramme er blevet gennemprøvet af en temmelig stor fan-base og er mobil-klar.
Disse forsøger ikke at gøre alt for dig, men bare give dig nok til at komme i gang. Dette gør det lettere at tilpasse tingene, men skabelsen og / eller stylingen af mere komplekse brugergrænseelementer er op til dig.
Denne kategori indeholder Skelet , MINDER ramme 4 og så videre…
Dette er faktisk min personlige favorit kategori. Jeg foretrækker at starte med en blank skærm og et layout system klar, hvilket giver mig mulighed for at oprette den slags hjemmeside, jeg ønsker uden at skulle overskrive en masse CSS eller forsøge at udtrække specifikke dele af en given ramme.
Disse rammer, for det meste, synes ikke at beskæftige sig med layout eller sidestruktur. De er designet til at give en nem måde at tilføje fancy, mobile kompatible applikationsgrænsefladeelementer (læs: widgets).
Jeg har kun testet en, men min forskning siger, at de tre bedste (eller i det mindste mest populære) rammer i denne kategori er jQuery Mobile , KendoUI , og Wijmo .
Det viser sig, at tilgængelighed ikke kun er for den blinde eller den helt blinde. Mange af de ældre mobile browsere er så begrænsede i funktioner, at det stort set ligner at surfe med alle CSS og Javascript slået fra.
Din bedste indsats er i dette tilfælde at gøre helt sikker på, at dit websted kan bruges under disse forhold. Sluk alle disse smukke ting, og sørg for, at det stadig er muligt for brugerne at nå hjemmesidens mål uden dem.
Enhedsemulatorer er normalt ikke et hundrede procent nøjagtigt, men du kan teste de vigtigste ting, som layout og så videre. Fejl, jeg har stødt på, er ofte mindre ting, som f.eks. Web skrifttyper, der ikke gengives. Bare rolig, de burde fungere fint på den faktiske hardware.
Men hvilke emulatorer skal du bruge?
Denne virker lidt langsomt, men det virker som en charme. Du skal downloade hele udviklerpakken, men det er værd at have et program, der efterligner ikke kun Android-standardbrowseren, men hele OS. Derudover kan du teste dit websted på en række virtuelle "enheder".
Endnu en det fungerer grundlæggende som annonceret. Du downloader det, vælg din "enhed" og gå.
Firefox har flere muligheder for at teste dit mobilindhold. Den første er en simpel emulator, der efterligner renderingsfunktionaliteten i Mozillas mobile Firefox-projekt, codenavn: Fennec.
Det er ikke alt for kompliceret, hvilket giver dig et simpelt vindue, der kan ændres, så det er op til dig at manuelt indstille den skærmstørrelse, du vil teste.
Det anden mulighed er en tilføjelse til den desktop version af Firefox. Doblet Firefox OS Simulator, det giver dig en hel platform til at lege med, ikke kun browseren (ligesom Android SDK).
Jeg kunne ikke teste denne emulator , da det kræver installation af et meget stort SDK, og installationen blev bugged, i hvert fald for mig. Stadig er det derude for dig at teste efter eget valg.
Blackberry tilbyder en række simulatorer til BB10. Måske er det mig, men jeg har ikke haft stor succes med at køre nogen af dem. Jeg vil gerne høre fra enhver, der formår at få dem til at arbejde.
Sidst, men bestemt ikke mindst, leverer Apple en gratis iOS-simulator der kan bruges til at teste for Apple-enheder som en del af Xcode. Desværre er det kun Mac, fordi det er en del af Xcode.
Hvis du har budgettet (eller kan teste rigtig hurtigt, da deres fritid er tidsbegrænset), kan du ikke gå for langt forkert med BrowserStack . De giver dig mulighed for at teste på mange desktops og et stort udvalg af mobiler. Ikke så lydhør som den rigtige ting, de vil vise dig problemer med ting som layout.
Mobilbrowsere har tendens til at spille rundt med zoomindstillinger, eller så har min erfaring været. Hvis du vil have din hjemmeside til at se den måde, det gør, når du krymper dit browservindue ned til mobilstørrelser, skal du bruge dette smukke stykke HTML i hovedet på dit dokument:
Lad mig omformulere det: minimalism sten på mobil. Den minimalistiske æstetik tilpasser sig godt til mindre skærmstørrelser med færre tweaks og justeringer, hvilket sparer mig meget tid. Måske virker dette som en no-brainer til nogle af jer, men jeg kan ikke understrege det nok.
Denne informationskollage er naturligvis kun toppen af isbjerget, og det er selvfølgelig ingen kamp for faktisk at teste dine hjemmesider på ægte mobilhardware, men det skal give dig mulighed for at komme i gang og forhåbentlig tjene nok fra mobildesign til at rådgive det enhedslab du så rigtig fortjent.
Fremhævet billede / miniaturebillede, mobil enhed billede via Shutterstock.