En gång i tiden, ungefär en timme bort från var jag för närvarande bor, arbetade jag en webbdesigner som älskade sina Photoshop-kompositioner och fast breddslayout. Och jag vill inte förstöra slutet, men den formgivaren var jag.
Sedan, som jag tänkte på mitt eget företag, gick det webbaserade kreativa samhället med märke till det här nya konceptet som kallades "responsiv design". Som någon ung, ljusögd, buskig tailed professionell skulle göra, undersökte jag. När allt kommer omkring bör den senaste, senaste saken alltid ges åtminstone en överblick.
Vad jag upptäckte lämnade mig emellertid orolig. En ond mastermind heter Ethan Marcotte hade släppt ut a dastardly plan för att göra webdesigners arbeta hårdare! Hans bok lämnade folk som ranting och raving om hur vi behövde "överväga mobila användare" och "göra våra webbplatser att arbeta på så många plattformar som möjligt" ... hedningarna.
Självklart motstod jag så länge jag kunde. Jag kämpade hårt och modigt mot denna tid av god förnuft och smart verksamhet; men det var allt för ingenting. Sedan föll jag tillbaka på ursäkter: "Men jag har inga mobila enheter att testa med!" Och det, kära läsare, är poängen. Det visar sig att du inte behöver absolut en.
Med tiden har jag kommit fram till några grundläggande riktlinjer som, om du hittar dig själv utan mobiltelefon eller en tablett, hjälper dig att utforma webbplatser som gör att sakerna ser bra ut på de flesta mobila webbläsare.
... du bygger någonting större än en liten, innehållsdriven webbplats. Stora webbplatser och applikationsdrivna webbplatser borde absolut testas på mobila plattformar. Jag menar, du kan förmodligen förfalska det, men jag skulle inte råda det.
När du arbetar med okända variabler är ditt bästa alternativ att hålla sakerna dumma enkla. Ja, jag påbereder den nästan klichéda KISS-regeln, eftersom den fungerar.
Utan ett rack fullt av smartphones och så vidare måste du lita på vad andra människor vet. Lyckligtvis har mycket tid och energi spenderats på att undersöka möjligheterna hos de mer populära mobila webbläsarna där ute och hur de jämför varandra.
Ta reda på vad din målgrupp är och ta reda på vilken typ av webbläsare de använder. Som alltid är Google din vän. Sedan är allt du behöver göra för att skapa statistik.
Om det mesta av din mobilmarknad använder Android / iOS i en eller annan form, har du lycka till! Standardwebbläsare (och mest populära alternativ, till exempel Firefox) är moderna för det mesta. Avancerade layouttekniker, grundläggande CSS3-effekter, jQuery ... dessa kommer alla troligen att göra ganska bra.
Om din målgrupp använder andra plattformar, måste du dock göra mer specifik forskning om dem och ta reda på vad de kan och inte kan göra.
Vad gör du om du har liten eller ingen information om dina användare? Försök att åtminstone räkna ut var de är. De flesta webbplatser har åtminstone en allmän region som de flesta av sina användare hämtar från. Hämta statistiken för den regionen.
Misslyckas allt detta, design för värsta scenariot.
För att göra ditt jobb lite enklare hittade jag en webbplats med en ganska detaljerad jämförelse av vad de mer populära mobila webbläsarna gör och inte stöder. Kolla in det på mobilehtml5.org .
Och det är självklart det alltid populärt caniuse.com
Jag vet att vissa designers svär genom att skapa anpassad kod som är specifik för varje projekt, men när du arbetar blind, är det inte ett praktiskt alternativ att återuppfinna hjulet. Ramar som redan har testats på mobila plattformar tar mycket av gissningen ur processen.
Gissningen är dålig. Undvika det.
Nu har jag självklart inte personligen provat eller testat varje ram där ute, så du måste hitta en som gör vad du vill att den ska göra, och undersöka den, jämföra den med din avsedda mobilplattforms kapacitet. Fortfarande finns det några som du kan börja med:
Det här är de som du säkert kan namnge från toppen av ditt huvud. De kännetecknas av deras rena komplexitet. De innehåller layoutsystem, UI-element och jQuery-plugins i ett kraftfullt paket.
De mest kända av dessa är bootstrap och fundament . Jag kommer inte bry mig att jämföra dem här, så fortsätt och Google "Bootstrap vs. Foundation" om du behöver mer information. Allt du verkligen behöver veta för nu är att varje komponent har testats i stor utsträckning av en ganska stor fanbas och är mobil-klar.
Dessa försöker inte göra allt för dig, utan bara ge dig tillräckligt för att komma igång. Det gör det lättare att anpassa saker, men skapandet och / eller utformningen av mer komplexa användargränssnitt är upp till dig.
Denna kategori innehåller Skelett , Mindre ram 4 och så vidare…
Detta är faktiskt min personliga favorit kategori. Jag föredrar att börja med ett tomt skärm och ett layoutsystem som är klart, vilket gör att jag kan skapa den typ av webbplats jag vill ha utan att behöva skriva över mycket CSS eller försöka extrahera specifika delar av en viss ram.
Dessa ramar verkar för det mesta inte oroa sig för layout eller sidstruktur. De är utformade för att ge ett enkelt sätt att lägga till fina, mobila kompatibla applikationsgränssnittselement (läs: widgets).
Jag har bara testat en, men min forskning säger att de tre bästa (eller i alla fall populäraste) ramarna i denna kategori är jQuery Mobile , KendoUI , och Wijmo .
Det visar sig att tillgänglighet inte bara är för den färgblinda eller helt blind. Många av de äldre mobila webbläsarna är så begränsade i möjligheter att det är ungefär som att surfa med alla CSS och Javascript är avstängt.
Din bästa satsning är i detta fall att absolut vara säker på att din webbplats är användbar under dessa förhållanden. Stäng av alla dessa vackra saker och se till att det fortfarande är möjligt för användarna att uppnå webbplatsens mål utan dem.
Enhetsemulatorer är vanligtvis inte hundra procent korrekta, men du kan testa de viktigaste sakerna, som layout och så vidare. Fel som jag har stött på är ofta mindre saker, som webfonter som inte återges. Oroa dig inte, de borde fungera bra på den faktiska hårdvaran.
Men vilka emulatorer ska du använda?
Den här fungerar lite långsamt, men det fungerar som en charm. Du måste ladda ner hela utvecklaren, men det är väl värt att ha ett program som efterliknar inte bara Android-standardwebbläsaren, men hela operativsystemet. Dessutom kan du testa din webbplats på en mängd olika virtuella "enheter".
En till som fungerar i grunden som annonseras. Du laddar ner den, väljer din "enhet" och går.
Firefox har flera alternativ för att testa ditt mobilinnehåll. Den första är en enkel emulator som efterliknar funktionen för återgivning av Mozillas mobila Firefox-projekt, kodnamn: Fennec.
Det är inte alltför komplicerat, vilket ger dig ett enkelt fönster som kan ändras, så det är upp till dig att manuellt ställa in skärmstorleken du vill testa.
De andra alternativet är ett tillägg för skrivbordet versionen av Firefox. Dubbat Firefox OS Simulator, det ger dig en hel plattform att spela med, inte bara webbläsaren (ungefär som Android SDK).
Jag kunde inte testa den här emulatorn , eftersom det kräver installation av en mycket stor SDK, och installationen var buggged, åtminstone för mig. Fortfarande är det där ute för att du ska testa efter eget gottfinnande.
Blackberry erbjuder ett antal simulatorer för BB10. Kanske är det jag, men jag har inte haft mycket framgång med att köra någon av dem. Jag skulle gärna höra från någon som klarar av att få dem att fungera.
Sist men absolut inte minst ger Apple en gratis iOS-simulator som kan användas för att testa för Apple-enheter som en del av Xcode. Tyvärr, eftersom det är en del av Xcode, är det bara Mac.
Om du har budgeten (eller kan testa riktigt snabbt, eftersom din fritid är tidsbegränsad) kan du inte gå för långt fel med BrowserStack . De låter dig testa på många skrivbord och ett stort antal mobiler. Inte lika lyhörda som den riktiga saken, de kommer att visa dig problem med saker som layout.
Mobila webbläsare tenderar att leka med zoominställningar, eller så har min erfarenhet varit. Om du vill att din webbplats ska se hur den gör när du krymper ditt webbläsarfönster ner till mobilstorlekar, använd den här vackra HTML-delen i huvudet på ditt dokument:
Låt mig omformulera det: minimalism stenar på mobilen. Den minimalistiska estetiken anpassar sig bra till mindre skärmstorlekar med färre tweaks och justeringar, vilket sparar mig mycket tid. Kanske verkar det här som en no-brainer till några av er, men jag kan inte betona det tillräckligt.
Denna informationskollage är förstås bara toppen av isberget, och ingen match för att testa dina webbplatser på riktig mobil hårdvara, men det borde låta dig komma igång och förhoppningsvis tjäna tillräckligt med mobildesign för att ha råd med det här enheten. så rikligt förtjänar.
Utvalda bild / miniatyrbild, mobilenhetens bild via Shutterstock.