Accentsconagua
Blu. No, yel…
Sta 'zitto! Starai zitto ?! Ma tu sei vestito come uno… Camelot! Non vota per i re.
Share
Stiamo per costruire una navigazione semplice e reattiva del sito web. La nostra soluzione ci aiuterà a porre l'accento sul soddisfare della nostra pagina, probabilmente la massima priorità quando si progetta per i dispositivi mobili. Non ci sarà alcun JavaScript coinvolto e lo affronteremo da un approccio Mobile First.
Se hai bisogno di ulteriore aiuto, prova a contattare uno dei designer e sviluppatori su Envato Studio. Possono correggere bug e problemi per te o persino creare un design reattivo da zero.
Ad esempio, puoi avere un design sito web fisso convertito in un design completamente reattivo per soli $ 350 e l'intera operazione verrà completata entro sette giorni.
Se hai letto Mobile First di Luke Wroblewski avrai familiarità con la sua affermazione che:
Come regola generale, il contenuto ha la precedenza sulla navigazione su dispositivo mobile.
Ciò che intende con questo è che gli utenti mobili sono spesso alla ricerca di risposte immediate; vogliono il contenuto che sono andati a cercare, non più opzioni di navigazione.
Molti siti, anche quelli reattivi, si attengono alla convenzione che la navigazione appartiene all'inizio di ogni pagina. Questo approccio può causare problemi di usabilità sui dispositivi mobili perché gli utenti mobili sono spesso a corto di due cose: lo spazio sullo schermo e il tempo. Se la navigazione principale è posizionata nella parte superiore di una pagina, ci sono buone probabilità che oscuri un intero schermo mobile. Questo problema è ulteriormente aggravato da ampi link di menu a sfioramento, costringendo gli utenti a scorrere oltre la navigazione per accedere a qualsiasi contenuto di valore.
Prendi questo esempio da London & Partners:
Un design reattivo perfettamente decente, ma con dimensioni standard di viewport per dispositivi mobili (320 px x 480 px) tutto ciò che vedi è un menu di navigazione. Sicuramente, essendo appena arrivato sulla homepage, voglio vedere qualcosa di diverso da quello? Non è solo London & Partners a dimostrarlo, è una pratica presente in molti design reattivi sul web.
Abbiamo visto alcuni modi per aggirare questo problema, spesso appoggiandoci a jQuery per sistemare le cose per noi. Prendi la spiegazione di Chris Coyier del menu a discesa reattivo Five Steps.
Usando jQuery, viene creato un duplicato del menu sotto forma di a menu a discesa, inizialmente nascosto alla vista tramite CSS. Quando le query multimediali rilevano uno schermo più piccolo, rendono visibile il menu a discesa e la navigazione originale è invisibile. Questo è perfetto per i dispositivi mobili in quanto i dropdown occupano meno spazio e utilizzano la particolare interfaccia utente del dispositivo (come lo scroller dell'iPhone).
In alternativa, è possibile nascondere la navigazione, ma è necessario passare alla visualizzazione quando si fa clic sul pulsante "menu". Puoi vedere questo effetto in azione con l'ultimo Bootstrap di Twitter.
Schermate più piccole nascondono i link di navigazione e visualizzano l'icona di un 'elenco' (che viene rapidamente accettato come significato 'menu') che rivela la navigazione quando viene cliccato. Anche in questo caso, i visitatori mobili sono presentati con il maggior numero possibile di contenuti, ma dispongono di opzioni di navigazione disponibili se li desiderano.
Useremo una tecnica discussa da Luke, che usa il CSS e un approccio Mobile First. Cosa intendiamo per approccio Mobile First? In parole povere, progetteremo un layout mobile diretto, quindi miglioreremo progressivamente il design per schermi più grandi. Useremo le query multimediali che rilevano dimensioni dello schermo in costante aumento, aggiungendo stile e funzionalità.
Ciò significa che verranno caricati solo il minimo di CSS e risorse quando il nostro design viene visualizzato con un dispositivo mobile. Significa anche che le versioni precedenti di IE (che non riconoscono le query multimediali) verranno presentate con il sito mobile. Per saperne di più su Joni Korpi's Leaving Old Internet Explorer Behind.
Spiegherò le idee alla base di questa soluzione mentre procediamo, quindi per il momento gettiamo insieme qualche markup, iniziando con un documento HTML5 blanco.
Primo dispositivo di navigazione sensibile
Nota: Non dimenticare il Meta Tag di Viewport!
Fatto ciò, aggiungeremo una struttura di pagina. Cose semplici e tutto per gli scopi della nostra dimostrazione. Ho usato il testo di riempimento di Holy Grail di Monty Python (grazie a Chris Valleskey) che è un bel modo per sorridere quando lavori :)
Nav
Blu. No, yel…
Sta 'zitto! Starai zitto ?! Ma tu sei vestito come uno… Camelot! Non vota per i re.
Vogliamo un arbusto!!
Guarda, mio signore! Sta 'zitto! Ma tu sei vestito come uno…
- Il naso?
- Shh! Cavalieri, ti do il benvenuto nella tua nuova casa. Andiamo a Camelot!
- Guarda, mio signore!
Aiuto, aiuto, sono repressa!
Perché? Ascolta. Strane donne che giacciono in stagni che distribuiscono spade non sono la base per un sistema di governo. Il potere esecutivo supremo deriva da un mandato delle masse, non da qualche cerimonia acquatica farsesca. Silenzio! Un tritone?
Abbiamo riunito una pagina HTML di base, quindi ora è il momento per l'attrazione principale; la nostra navigazione principale ...
Sì, l'hai visto correttamente, l'abbiamo aggiunto alla riga 68, dopo l'ultimo articolo. Non dimenticare che stiamo progettando per cellulari ora, copriremo il desktop in seguito. Abbiamo posizionato la navigazione nella parte inferiore della nostra pagina in modo che sia completamente fuori mano. Ora inseriremo un link nella parte superiore della nostra pagina in modo che gli utenti possano trovare la navigazione se lo desiderano.
Nav
Menu
A seconda di come si avviano normalmente i progetti Web, questo passaggio differisce dal normale flusso di lavoro. Ho sempre trovato che il reset di Eric Meyer fosse una solida base su cui lavorare, specialmente perché recentemente l'ha perfezionata. Aggiungeremo le sue regole di ripristino a un foglio di stile per dare il calcio al nostro css:
/ * http://meyerweb.com/eric/tools/css/reset/ v2.0b1 | 201101 NOTA: LAVORO IN CORSO UTILIZZARE CON ATTENZIONE E TEST CON ABANDON * / html, corpo, div, span, applet, oggetto, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr , acronimo, indirizzo, grande, citare, codice, del, dfn, em, img, ins, kbd, q, s, samp, piccolo, sciopero, forte, sub, sup, tt, var, b, u, i, centro , dl, dt, dd, ol, ul, li, fieldset, forma, etichetta, legenda, tabella, didascalia, tbody, tfoot, thead, tr, th, td, articolo, a parte, canvas, dettagli, figcaption, figure, footer , header, hgroup, menu, nav, section, summary, time, mark, audio, video margin: 0; padding: 0; confine: 0; contorni: 0; dimensione carattere: 100%; font: inherit; vertical-align: baseline; / * HTML5 display-role reset per i browser più vecchi * / article, a parte, dettagli, figcaption, figure, footer, header, hgroup, menu, nav, section display: block; body line-height: 1; ol, ul list-style: none; blockquote, q quotes: none; blockquote: before, blockquote: after, q: before, q: after content: "; content: none; / * ricorda di evidenziare gli insert in qualche modo! * / ins text-decoration: none; del text-decoration : line-through; table border-collapse: collapse; border-spacing: 0;
Al momento la nostra pagina sembra piuttosto interessante ...
... quindi miglioriamo le cose aggiungendo un po 'di stile semplice.
/ * inizia i nostri stili * / body font: 16px / 1.4em 'PT Sans', sans-serif ;; colore: # 1c1c1c; p, ul margin: 0 0 1.5em; ul list-style: disc; padding: 0 0 0 20px; a color: # 1D745A; h1 h2 font-family: 'PT Serif', serif; dimensione del font: 32px; line-height: 1.4em; margine: 0 0, 4em; font-weight: bold; / * layout * / .wrapper article border-bottom: 1px solid # d8d8d8; imbottitura: 10px 20px 0 20px; margine: 10px 0; / * header * / header background: # 1c1c1c; imbottitura: 15px 20px; / * shortfix più breve http://nicolasgallagher.com/micro-clearfix-hack/*/ header: before, header: after content: ""; display: table; header: after clear: both; / * Per IE 6/7 (trigger hasLayout) * / header zoom: 1; h1.logo a color: # d8d8d8; decorazione del testo: nessuna; font-weight: bold; text-transform: maiuscolo; font-size: 20px; altezza della linea: 22px; fluttuare: a sinistra; letter-spacing: 0.2em; a.to_nav float: right; colore: #fff; sfondo: # 4e4e4e; decorazione del testo: nessuna; padding: 0 10px; font-size: 12px; font-weight: bold; altezza della linea: 22px; altezza: 22px; text-transform: maiuscolo; letter-spacing: 0.1em; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; a.to_nav: hover, a.to_nav: focus color: # 1c1c1c; sfondo: #ccc;
Questa è tutta roba di base (caratteri, altezza delle linee, colori ecc.), Ciò che è cruciale finora è che ho stilizzato il pulsante 'menu' per spostarsi a destra all'interno del , dove spesso ti aspetteresti che fosse trovata la navigazione.
Se passate il mouse su di esso vedrete lo stato di passaggio del mouse - non necessario per i dispositivi touch screen, ovviamente, ma questa esperienza verrà anche consegnata alle versioni non collaborative di Internet Explorer. Cosa noi avere definito a beneficio degli utenti mobili è un :messa a fuoco stato. È lo stesso di : hover stato, ma offrirà un feedback fondamentale per i dispositivi touch-screen. I nostri utenti lo faranno conoscere hanno avuto successo nel toccare il pulsante del menu.
Ad ogni modo, fai clic e sarai portato alla navigazione, super.
Ora diamo uno stile al menu.
In effetti, modificheremo la nostra navigazione primaria proprio come l'esempio di London & Partners mostrato in precedenza, eccetto che questa volta è ovviamente nella parte inferiore della pagina ...
/ * navigation * / #primary_nav ul list-style: none; sfondo: # 1c1c1c; imbottitura: 5px 0; #primary_nav li a display: block; imbottitura: 0 20px; colore: #fff; decorazione del testo: nessuna; font-weight: bold; text-transform: maiuscolo; letter-spacing: 0.1em; letter-spacing: 0.1em; line-height: 2em; altezza: 2em; border-bottom: 1px solid # 383838; #primary_nav li: last-child a border-bottom: none; #primary_nav li a: hover, #primary_nav li a: focus color: # 1c1c1c; sfondo: #ccc; / * footer * / footer font-family: 'PT Serif', serif; stile di carattere: corsivo; allineamento del testo: centro; font-size: 14px;
Molto meglio. Abbiamo reso i collegamenti del menu belli e grandi (leggi di più su Touch Target Sizes sul blog di Luke Wroblewski) e ancora una volta determinato un :messa a fuoco stato per il feedback degli utenti.
È anche diventato chiaro che abbiamo incluso un link "top" che riporta gli utenti in cima alla pagina, se necessario.
OK, ci siamo occupati del nostro semplice layout mobile, quindi ora è il momento di migliorare progressivamente. Utilizzeremo le query multimediali per determinare quando il nostro layout mobile non è più appropriato.
Ma a che punto diventa inappropriato? Esistono molti modi per affrontare le query multimediali, ma lavoreremo partendo dal presupposto che una finestra mobile sia 320 x 480 px. È largo 320 px quando viene visualizzato in verticale, largo 480 px se visualizzato in orizzontale, quindi è possibile impostare in modo giustificato la prima query multimediale per rilevare qualsiasi schermo maggiore di 480 px.
Tuttavia, il prossimo passo è probabilmente il tablet. L'iPad ha una risoluzione di 980px x 768px, quindi possiamo tranquillamente supporre che qualsiasi cosa più piccola di 768px sia appropriata per il nostro layout mobile. Qualunque cosa più grande di 768px può gestire più layout di navigazione come desktop.
Possiamo quindi iniziare ad aggiungere regole, quindi impostiamo una query multimediale:
/ * media query * / @media solo schermo e (min-larghezza: 768px)
Questa query multimediale eseguirà tutti gli stili contenuti al suo interno quando il viewport è largo almeno 768 px. Si noti l'inclusione di solo parola chiave, che garantisce che Internet Explorer 8 non venga confuso e provi a elaborare la query. Vedi la mia precedente spiegazione per i dettagli.
Diamo il calcio d'inizio facendo sparire il nostro pulsante 'menu':
@media solo schermo e (min-width: 768px) a.to_nav display: none;
Con il browser leggermente più ampio, il pulsante del menu non viene più visualizzato.
Ora dobbiamo portare la nostra navigazione principale in cima alla pagina. Lo faremo rimuovendolo dal flusso del documento, posizionandolo assolutamente in alto.
@media solo schermo e (min-width: 768px) a.to_nav display: none; . wrapper position: relative; larghezza: 768 px; margine: auto; #primary_nav position: absolute; inizio: 5px; a destra: 10px; sfondo: nessuno; #primary_nav li display: inline; #primary_nav li a float: left; confine: nessuno; padding: 0 10px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px;
Affinché ciò sia possibile, dobbiamo prima fare il genitore (.involucro) relativamente posizionato. Possiamo farlo qui nella query multimediale o determinarlo all'inizio del nostro foglio di stile.
Una volta che il menu è stato posizionato in modo assoluto, è necessario rimuovere alcuni stili di ancoraggio. Non c'è molto da fare, ma abbiamo bisogno degli elementi della lista da mostrare in linea, e abbiamo bisogno di rimuovere i bordi e il riempimento esagerato dagli ancoraggi. Gli stati al passaggio del mouse che abbiamo dettato in precedenza vanno bene, ovviamente, quindi non è necessario cambiarli.
Se hai prestato attenzione, avrai notato che abbiamo ancora un link "top" nella navigazione - non ne abbiamo più bisogno eh?
Possiamo rimuoverlo in molti modi, ma siamo sicuri di cosa sta succedendo. Per prima cosa aggiungiamo una classe alla voce dell'elenco:
E poi possiamo sbarazzarcene nella nostra query sui media:
#primary_nav li.top display: none;
Questo è tutto! Ci sono molti modi per sfruttare questa idea (implementando l'icona dell'elenco solo una) e, naturalmente, è possibile continuare ad aggiungere query multimediali per soddisfare gli schermi in crescita. Spero che ora tu abbia le basi per farlo. Abbiamo creato una navigazione semplice, reattiva, touch-friendly, da un primo approccio mobile, dando enfasi al contenuto e all'usabilità. Chi può chiedere di più?!
Alcuni link utili menzionati nel tutorial, tutti raggruppati in una lista utile:
Sul mercato Envato sono disponibili numerosi modelli di design per la prima telefonata per l'uso immediato nei tuoi progetti.
Ad esempio, il primo è un tema mobile per la prima app web / admin dashboard con un'interfaccia utente piatta basata su Bootstrap 3. È leggero ma con molti componenti adatti alle tue esigenze. Inoltre, è completamente reattivo e i widget e i componenti sono mobili per primi.
prima - Tema di Mobile First Web App
