C'era una volta, a circa un'ora di distanza da dove vivo attualmente, un web designer che amava le sue composizioni di Photoshop e i layout a larghezza fissa. E beh, non voglio rovinare il finale, ma quel designer ero io.
Poi, mentre mi occupavo della mia attività, la comunità creativa basata sul web è impazzita per questo nuovo concetto chiamato "responsive design". Come ogni giovane, con gli occhi vivaci e con la coda a cespuglio farebbe, ho investigato. Dopotutto, la cosa più nuova e più recente dovrebbe sempre essere data almeno un'occhiata di passaggio.
Ciò che ho scoperto, tuttavia, mi ha lasciato sgomento. Una malvagia mente chiamata Ethan Marcotte aveva scatenato a piano vile per fare in modo che i web designer lavorino di più! Il suo libro ha lasciato la gente lamentarsi e delirante su come dovevamo "considerare gli utenti mobili" e "far funzionare i nostri siti web su quante più piattaforme possibili" ... i pagani.
Certo, ho resistito più che potevo. Ho combattuto duramente e coraggiosamente contro questa marea di buonsenso e affari intelligenti; ma era tutto per niente. Poi, sono tornato sulle scuse: "Ma non ho nessun dispositivo mobile con cui testare!" E questo, caro lettore, è il punto. Si scopre che non ne hai assolutamente bisogno.
Nel corso del tempo, ho elaborato alcune linee guida di base che, se dovessi trovarti senza un telefono cellulare o un tablet, ti aiuteranno a progettare siti Web che facciano comunque apparire le cose sulla maggior parte dei browser mobili.
... stai costruendo qualcosa di più grande di un piccolo sito web basato sui contenuti. I siti Web di grandi dimensioni e i siti basati sulle applicazioni dovrebbero essere sicuramente testati su piattaforme mobili reali. Voglio dire, certo, probabilmente potresti fingere, ma non lo consiglierei.
Quando lavori con variabili sconosciute, la tua migliore opzione è di mantenere le cose stupidamente semplici. Sì, sto invocando la regola KISS quasi scontata, perché funziona.
Senza uno scaffale pieno di smartphone e così via, è necessario fare affidamento su ciò che sanno gli altri. Fortunatamente, è stato speso un sacco di tempo ed energie per esaminare le funzionalità dei browser mobili più popolari là fuori e come si confrontano tra loro.
Scopri qual è il tuo pubblico di destinazione e poi scopri che tipo di browser stanno utilizzando. Come sempre, Google è tuo amico. Quindi, tutto ciò che devi fare è progettare per le statistiche.
Se la maggior parte del tuo mercato di destinazione mobile utilizza Android / iOS in una forma o nell'altra, sei fortunato! I loro browser predefiniti (e le alternative più popolari, come Firefox) sono per la maggior parte moderni. Tecniche di impaginazione avanzate, effetti CSS3 di base, jQuery ... questi molto probabilmente renderanno ragionevolmente bene.
Se il pubblico di destinazione utilizza altre piattaforme, tuttavia, dovrai fare ricerche più specifiche su di loro e scoprire cosa possono o non possono fare.
Ora, cosa fai se hai poco o nessuna informazione sui tuoi utenti? Cerca almeno di capire dove sono. La maggior parte dei siti web ha, per lo meno, una regione generale da cui provengono gran parte dei loro utenti. Ottieni le statistiche per quella regione.
In mancanza di tutto ciò, la progettazione per lo scenario peggiore.
Per rendere il tuo lavoro un po 'più semplice, ho trovato un sito web con un confronto abbastanza dettagliato di ciò che i browser mobili più popolari fanno e non supportano. Dai un'occhiata a mobilehtml5.org .
E, naturalmente, c'è sempre il popolare caniuse.com
So che alcuni designer giurano creando codice personalizzato specifico per ogni progetto, ma quando si lavora ciechi, per così dire, reinventare la ruota non è un'opzione pratica. I framework che sono già stati testati su piattaforme mobili eliminano molte congetture dal processo.
Il guesswork è cattivo. Evitalo.
Ora, ovviamente non ho provato o testato personalmente ogni framework, quindi dovrai trovarne uno che fa ciò che vuoi che faccia, e ricercarlo, confrontandolo con le capacità della tua piattaforma mobile. Tuttavia, ci sono alcuni che potresti iniziare con:
Questi sono quelli che puoi probabilmente nominare in cima alla tua testa. Sono caratterizzati dalla loro pura complessità. Portano insieme sistemi di layout, elementi dell'interfaccia utente e plugin jQuery in un unico potente pacchetto.
Il più famoso di questi sono bootstrap e Fondazione . Non mi preoccuperò di confrontarli qui, quindi vai avanti e Google "Bootstrap vs. Foundation" se hai bisogno di maggiori dettagli. Tutto quello che devi sapere per ora è che in ogni framework, ogni componente è stato ampiamente testato da una fan-base piuttosto ampia ed è predisposto per dispositivi mobili.
Questi non cercano di fare tutto per te, ma piuttosto ti danno abbastanza per iniziare. Ciò rende la personalizzazione delle cose un po 'più semplice, ma la creazione e / o lo stile di elementi dell'interfaccia utente più complessi dipende da te.
Questa categoria include Scheletro , MENO Framework 4 e così via…
Questa è in realtà la mia categoria preferita. Preferisco iniziare con uno schermo vuoto e un sistema di layout pronto, che mi consente di creare il tipo di sito web che desidero senza dover sovrascrivere un sacco di CSS, o provare ad estrarre parti specifiche di un determinato framework.
Questi framework, per la maggior parte, non sembrano riguardare il layout o la struttura della pagina. Sono progettati per fornire un modo semplice per aggiungere elementi di interfaccia di applicazione fantasiosi e compatibili con i dispositivi mobili (leggi: widget).
Ne ho provata solo una, ma la mia ricerca dice che i tre migliori (o almeno i più popolari) framework in questa categoria sono jQuery Mobile , KendoUI , e Wijmo .
Si scopre che l'accessibilità non è solo per i daltonici o completamente ciechi. Molti dei vecchi browser per dispositivi mobili hanno capacità così limitate che è praticamente come navigare con tutti i CSS e Javascript disattivati.
La tua migliore scommessa, in questo caso, è di accertarsi assolutamente che il tuo sito web sia utilizzabile in queste condizioni. Trasforma tutte quelle cose carine e assicurati che sia ancora possibile per gli utenti raggiungere gli obiettivi del sito Web senza di loro.
Gli emulatori di dispositivi di solito non sono accurati al 100%, ma puoi testare le cose più importanti, come il layout e così via. I bug che ho incontrato sono spesso cose più piccole, come i font web non il rendering. Non preoccuparti, dovrebbero funzionare bene sull'hardware attuale.
Ma quali emulatori dovresti usare?
Questo funziona un po 'lentamente, ma funziona come un fascino. Devi scaricare l'intero kit per sviluppatori, ma vale la pena avere un programma che imiti da vicino non solo il browser predefinito Android, ma l'intero sistema operativo. Inoltre, puoi testare il tuo sito su una varietà di "dispositivi" virtuali.
Un altro funziona fondamentalmente come pubblicizzato. Lo scarichi, scegli il tuo "dispositivo" e vai.
Firefox ha diverse opzioni per testare il tuo contenuto mobile. Il primo è un semplice emulatore che simula la funzionalità di rendering del progetto mobile Mozilla di Mozilla, nome in codice: Fennec.
Non è eccessivamente complicato, fornendoti una finestra semplice e ridimensionabile, quindi spetta a te impostare manualmente le dimensioni dello schermo che desideri testare.
Il seconda opzione è un componente aggiuntivo per la versione desktop di Firefox. Soprannominato Firefox OS Simulator, ti offre un'intera piattaforma con cui giocare, non solo il browser (proprio come l'SDK di Android).
Non ero in grado di testare questo emulatore , in quanto richiede l'installazione di un SDK molto grande e l'installazione è stata intercettata, almeno per me. Comunque, è là fuori che puoi testare a tua discrezione.
Blackberry offre un numero di simulatori per BB10. Forse sono io, ma non ho avuto molto successo eseguendo nessuno di loro. Mi piacerebbe sapere da chiunque riesca a farli funzionare.
Ultimo, ma certamente non meno importante, Apple fornisce un simulatore iOS gratuito che può essere utilizzato per testare i dispositivi Apple come parte di Xcode. Sfortunatamente, poiché fa parte di Xcode, è solo per Mac.
Se hai il budget (o puoi testare molto velocemente, dato che il loro tempo libero è limitato nel tempo) non puoi sbagliare troppo BrowserStack . Ti permetteranno di testare su molti desktop e un'enorme varietà di cellulari. Non così reattivo come la cosa reale, ti mostreranno problemi con cose come il layout.
I browser mobili tendono a giocare con le impostazioni dello zoom, o almeno così è stata la mia esperienza. Se vuoi che il tuo sito web appaia come fa quando riduci la finestra del browser in base alle dimensioni dei dispositivi mobili, utilizza questo bellissimo pezzo di HTML nella parte iniziale del documento:
Lasciatemi riformulare questo: il minimalismo oscilla sul cellulare. L'estetica minimalista si adatta bene a schermi di dimensioni più ridotte con meno modifiche e regolazioni, risparmiando un sacco di tempo. Forse questo sembra un gioco da ragazzi per alcuni di voi, ma non posso enfatizzare abbastanza.
Questo collage di informazioni è solo la punta dell'iceberg, ovviamente, e nessuna corrispondenza per testare realmente i tuoi siti web su hardware mobile reale, ma dovrebbe permetterti di iniziare e, si spera, di guadagnare abbastanza dalla progettazione mobile per permettertelo. così pienamente meritato.
Immagine in primo piano / miniatura, immagine del dispositivo mobile via Shutterstock.