Se hai ignorato le piattaforme mobili in passato, può essere scoraggiante fare finalmente il salto e iniziare a supportare la navigazione mobile sui tuoi siti esistenti. C'è così tanto da imparare, un milione di tecniche tra cui scegliere e una quantità illimitata di lavoro che potresti potenzialmente inserire in progetti esistenti.
Una domanda che i progettisti e i proprietari dei siti vogliono sempre sapere è, "Come posso aggiungere rapidamente il supporto mobile ?? A volte, non hai il budget per iniziare da zero e tuttavia desideri ancora un minimo di bontà mobile. Oggi ti guiderò attraverso cinque cose che puoi fare per rendere il tuo sito più mobile-friendly.
Questo articolo fa parte delle nostre serie su "guardare oltre il design del desktop", offerto in collaborazione con Heart Internet VPS.
Utilizzare un layout fluido
I layout fluidi sono in circolazione ormai da anni. Molto prima che il design responsive, come lo conosciamo oggi, sia stato sviluppato da diversi web designer e sviluppatori, questa tecnica è stata pensata come soluzione al problema delle dimensioni di più finestre.
Creare layout fluidi è abbastanza semplice, tutto ciò che devi fare è eliminare le larghezze statiche a favore della larghezza basata sulla percentuale nel tuo CSS. Quindi, invece di una colonna con una larghezza espressa di 350 px, potresti impostarla al 30%. Questa impostazione di larghezza prenderà automaticamente in considerazione la dimensione del viewport e imposterà la larghezza al 30% di quel totale. Quindi se la finestra del browser è larga 900 px, la larghezza della colonna sarà 270 px.
Quindi, come lo fai in libertà? Il trucco è capire la matematica necessaria. Sai che stai iniziando con il 100%, quindi per tirare su, un layout a cinque colonne, potresti essere tentato di impostare ogni colonna al 20% di larghezza (20 * 5 = 100). Tuttavia, ciò comporterebbe il riempimento delle colonne dell'intera larghezza disponibile senza spazio tra di esse. Solitamente vorrete aggiungere dei margini, che mangeranno un po 'di quella larghezza.
Quello che devi fare è capire quanta margine vuoi applicare a ciascuna colonna, quindi moltiplicare quella volta il numero di colonne per scoprire il margine totale. Alla fine dividi le colonne in ciò che è rimasto. Di solito installo qualcosa su Instacalc per trovare tutti i numeri per me.
Qui puoi vedere che ho impostato un layout a 5 colonne con margini del 4% su ciascuna colonna (due a sinistra, due a destra). Clicca sull'immagine qui sopra per andare a questo calcolatore dove puoi modificare questi numeri da solo. Una volta inseriti questi due valori, il resto viene calcolato per noi.
Il margine di quattro volte per cinque colonne equivale al venti percento della nostra larghezza per i margini, lasciando l'ottanta percento rimasto per le colonne. La larghezza dell'ottanta percento divisa per cinque colonne equivale a una larghezza di sedici percento per colonna.
A prescindere dalle dimensioni della finestra del browser, queste proporzioni verranno mantenute.
Fallo con Sass
Se vuoi un modo per impostare facilmente questo nel tuo CSS, puoi usare Sass per capire tutti i calcoli per te. Ecco un mixin che esegue tutte le operazioni necessarie, basta passarlo il numero di colonne e il margine per ogni colonna.
Per implementare questo mixin, usi una dichiarazione include seguita dal nome del mixin e dai parametri che abbiamo appena menzionato. Ecco un esempio che distribuisce automaticamente quattro colonne con un margine del 4% su ogni colonna.
Il CSS compilato posiziona una larghezza del 21% su ogni colonna con un margine del 2% sui lati sinistro e destro. Questo mostra davvero l'utilità dei preprocessori come Sass e LESS.
Utilizzare un quadro
Se sei cauto nel costruire il tuo layout fluido da zero, ci sono molti framework CSS disponibili che fanno tutto il lavoro per te. Dai un'occhiata a ciascuna delle seguenti opzioni, alcune delle quali si occupano anche delle query multimediali per te.
- Il sistema di griglia CSS 1140px
- Fluido 960.gs
- Piccola griglia fluida
- NegativeGrid
- Golden Grid System
- Fluid Baseline Grid
Lanciare una query media a colonna singola
In questi giorni, la mia raccomandazione per i siti ottimizzati per i dispositivi mobili è di diventare completamente reattiva. Questo ti consente di creare un design unico che si adatta e si adatta a diversi viewport, il che assicura che il tuo sito abbia un bell'aspetto su quasi tutti i dispositivi. Questa soluzione è elegante e più semplice da implementare di quanto tu possa immaginare.
Detto questo, avrai ancora molte sfide quando tenterai un design completamente reattivo. Devi avvolgere la tua mente su un modo completamente nuovo di guardare il web design e ottimizzare il tuo sito in diversi punti di interruzione.
Nel mondo reale, potresti non avere sempre il tempo e il budget per concentrarti su una revisione completa e reattiva. Forse anche a lungo termine stai pianificando un design reattivo nuovo di zecca ma vuoi almeno dare al tuo sito attuale una spinta veloce per farlo apparire migliore su finestre più piccole.
Una soluzione è quella di pubblicare una singola query multimediale che mette essenzialmente il 100% della larghezza su colonne e contenitori. Riduci le dimensioni della finestra del browser e trova il punto in cui il tuo design non è più molto utile, quindi aggiungi alcuni stili di base per risolverlo:
Come ho fatto qui, probabilmente dovrai aggiustare alcune altre cose oltre a impostare le larghezze delle colonne al 100% solo per assicurarti che tutto sia gradevole con questo nuovo layout.Usando questa tecnica, il layout predefinito verrà visualizzato su schermi più grandi e si rifletterà su una singola colonna quando il viewport diventa troppo piccolo per adattarsi al progetto originale (700px nel nostro esempio sopra).
Recentemente ho dimostrato questa tecnica in un precedente articolo con il seguente semplice layout. Ecco il design di grandi dimensioni:
Sui dispositivi più piccoli non ci preoccupiamo di tonnellate di modifiche, ma invece usiamo semplicemente il frammento di codice sopra per creare un'unica colonna di contenuti.
Aggiungi le icone di Apple Touch
Questo è un po 'iOS-centric, ma non fa mai male ad adattarsi a piattaforme personalizzate, ove possibile. Richiede uno sforzo minimo e rende il tuo sito molto più incline a essere tenuto sulla schermata principale di un utente iPhone / iPad (particolarmente utile per le applicazioni web).
Safari su iOS consente agli utenti non solo di aggiungere un segnalibro a una pagina nel senso tradizionale, ma anche di posizionarlo accanto a tutte le altre icone nella griglia della schermata principale. Per assicurarti che l'icona catturata da Safari sia formattata correttamente, è meglio crearne una tua.
Come implementare le icone
Attualmente ci sono tre schermate diverse da tenere in considerazione con i dispositivi Apple: iPad, iPhone 4 e altri iPhone meno recenti. Le dimensioni appropriate per questi sono 57px quadrati per i vecchi iPhone, 72px quadrati per iPad (versione uno e due) e 114px quadrati per iPhone 4 e successivi. Tieni presente che l'iPad 3 richiederà probabilmente un'icona quadrata di 144px se le voci sul raddoppiamento della risoluzione si dimostreranno vere.
Ecco il codice che dovrai includere nella sezione head del tuo file HTML.
Puoi aggiungere una schermata di avvio alla tua app Web utilizzando un metodo molto simile. Controlla la documentazione ufficiale per maggiori informazioni.
Effetti speciali
Abbiamo già analizzato le dimensioni per ciascuna immagine, ma c'è ancora molto da considerare. Ogni icona che crei dovrebbe essere quadrata con angoli duri e di novanta gradi e non contenere alcuna trasparenza o ombra. L'iPhone arrotonda automaticamente gli angoli al raggio appropriato e applica l'effetto lucentezza predefinito.
Mancia: Aggiungi? Precomposto? al nome del file per saltare l'effetto lucido. Esempio: apple-touch-icon-precomposed.png.
Guarda i tuoi passaggi
Questo è un consiglio abbastanza generico, ma è qualcosa che incoraggio sempre i principianti a prendere in considerazione quando si progettano siti Web mobili. Per il web design del desktop, tendo ad usare gli hover abbastanza estensivamente e occasionalmente oltre i semplici suggerimenti visivi e in effetti li uso per attivare alcuni eventi funzionali.
Pensa a come questo evento si trasferirà alle piattaforme touchscreen mobili. All'improvviso, non c'è hover. Stai o toccando un oggetto o no, non c'è niente in mezzo come lo è con un mouse. Questo significa che non dovresti usare la funzionalità basata su hover? Niente affatto, ricordati solo di assicurarti che il tuo sito funzioni ancora perfettamente su un dispositivo mobile.
Questo non richiede sempre molto lavoro. In definitiva, ti incoraggio a eseguire i test laddove possibile per avere un'idea di come funzionerà il tuo sito. Ad esempio, di recente ho pubblicato un tutorial sulla creazione di un menu di navigazione espandibile che si apre con il passaggio del mouse. Ho istintivamente pensato che il menu sarebbe stato inutile su un dispositivo iOS poiché non c'è nessun evento di hover, ma risulta che l'iPhone e l'iPad lo traducono automaticamente in un evento touch, lasciando il menu perfettamente funzionante.
Mai fare affidamento su questo però come potrebbe non essere sempre il caso che i tuoi voli si traducono bene su piattaforme mobili. Quando non lo fanno, prova a offrire una query multimediale personalizzata o qualche JavaScript solo per cellulare per compensare.
Usa la tecnologia mobile-friendly
Il Web mobile ha presentato una serie di sfide di compatibilità per designer e sviluppatori. L'elemento principale che ottiene la maggior parte della stampa è che iOS si rifiuta semplicemente di supportare Flash, ma non si ferma qui. Il web è pieno di plugin proprietari come Microsoft Silverlight che non possono essere installati su alcune piattaforme mobili.
Per tener conto di ciò, assicurati che il tuo sito non dipenda da queste tecnologie per funzionare. Se lo fanno, dovrai offrire una versione mobile speciale per compensare. Ad esempio, YouTube (un ex sito solo Flash) ora utilizza uno speciale video player HTML5 che funziona molto bene sulle piattaforme mobili.
Assicurati inoltre di sfruttare le librerie predefinite che ti consentono di aggiungere il supporto per diverse piattaforme mobili con facilità. Un esempio che piace ai fan di JavaScript è jQuery Mobile, un toolkit basato su HTML5 di rockin basato su jQuery e jQuery UI.
Conclusione
Ovviamente, questa lista non è assolutamente esaustiva, ma serve semplicemente come un modo per farti immergere nel mondo dei siti web che funzionano e funzionano alla grande su qualsiasi piattaforma. Una volta che ti sei veramente immerso in queste cinque tecniche, ti prometto che ti sentirai meglio nell'approccio al web design per dispositivi mobili e ti ritroverai a scardinare progetti completamente reattivi e multipiattaforma in pochissimo tempo.
Lascia un commento qui sotto e facci sapere come cambieresti questa lista. Se ti chiedessi cinque modi semplici e veloci per rendere un sito più mobile-friendly, quale consiglio vorresti offrire?