Intestazioni e loghi reattivi - Consigli e insidie

Il concetto di responsive web design ha permeato il web e diventa un elemento fondamentale per gli sviluppatori di frontend. Non si può negare il valore del design reattivo nel mondo moderno, ma c'è qualche difficoltà nel comprendere appieno come progettare correttamente i layout responsivi.

L'argomento potrebbe continuare a lungo perché ci sono così tante aree uniche di un sito Web, ma concentrarsi su singoli elementi può aiutarti a capire meglio gli obiettivi di un utente e come questi obiettivi possono essere raggiunti con un design reattivo.

Mi piacerebbe coprire consigli di progettazione per intestazioni, loghi, e menu di navigazione, come appartengono al design reattivo. Prendi questi suggerimenti mentre si applicano al tuo lavoro e assicurati di progettare le interfacce in base al comportamento degli utenti.

Più sottile navbars

Su schermi di grandi dimensioni, è normale avere intestazioni grandi, forse anche intestazioni sovradimensionate con livelli di collegamento multilivello. Ma gli schermi più piccoli non hanno lo stesso spazio e dovrebbero essere ristretti secondo necessità.

In genere le app mobili native hanno intestazioni fisse, questa è una pratica comune anche nel design reattivo. Un'intestazione fissa dovrebbe anche ridursi quando su dispositivi più piccoli: questo lascia più spazio per i contenuti, ma offre comunque ai lettori l'accesso diretto all'intestazione e alla navigazione.

Prendiamo ad esempio il layout di Cartoon Brew su un monitor a grandezza naturale e su un dispositivo mobile.

Al punto di interruzione di 600 px, la navigazione si riduce a quasi metà della sua altezza nella pagina. Questo rende sia il logo che il menu di scelta rapida selezionabili più piccoli, ma lo sono molto più proporzionale allo spazio dello schermo relativo.

Considera anche che Cartoon Brew ha una casella a discesa come menu reattivo sullo schermo mobile. Questo significa sovrappone il contenuto sulla pagina aperta, quindi è importante lasciare molto spazio per questo.

Un esempio simile può essere trovato sul sito Web di Jacksonville Art Walk. La barra di navigazione superiore rimane fissa durante lo scorrimento ma si restringe su dispositivi più piccoli. Questo è meglio per il design reattivo perché la barra di navigazione più sottile lascia più spazio per il contenuto su uno schermo mobile più piccolo.

Ogni link nella barra di navigazione ha un'icona correlata collegata al link testuale. Questo è ottimo su un monitor widescreen, ma è troppo dettagliato per schermi più piccoli.

La navigazione Art Walk passa a un menu a discesa con collegamenti fissi attorno al punto di interruzione 770 px. Le icone sono nascoste nel menu a discesa perché sarebbero troppo piccole e troppo anguste su dispositivi più piccoli.

Quando si progetta un header reattivo, considera sempre lo spazio generale dello schermo mentre disegna la barra di navigazione. Se non vuoi che l'intestazione rimanga fissa, va benissimo, ma potresti comunque volerlo riducilo un po ' per salvare spazio nella parte superiore della pagina.

Iconificare il logo

La maggior parte dei loghi incorpora un testo e un'icona o un'immagine per rappresentare il marchio. Questo significa che puoi sempre Iconifica (sì è una parola reale) questo tipo di loghi fino a un simbolo della sua versione completa.

Questa è una tecnica potente per le intestazioni reattive perché non c'è sempre spazio sufficiente per un logo completo. Perderai un po 'dello sfarzo e del glamour di un logo a grandezza naturale, ma questo è il prezzo che potresti dover pagare per un layout reattivo e pulito.

Controlla il logo di Web Designer News e guarda come cambia mentre ridimensiona il browser.

Forse non tutti riconosceranno quell'icona quando visiteranno per la prima volta il sito, ma grazie a riconoscimento del modello questo non è un problema enorme.

Le persone sono state su Internet abbastanza a lungo da sapere che l'angolo in alto a sinistra della pagina è tipicamente riservato per un logo. Questa piccola icona rosa è anche usata nella favicon, quindi è facile trarre alcune conclusioni senza scavare troppo nel sito.

Non è sempre necessario fare affidamento sulla grafica per questa tecnica del logo condensato. L'intestazione di Young And Hungry utilizza un testo verde brillante per il logo che alla fine si condensa nel testo "Y & H".

È possibile che questo non funzioni per ogni sito se il branding non è facile da riconoscere come lettere singole. Ma va a dimostrare che i loghi può essere reso più semplice sia in grafica e testo, sia in entrambe le varianti occupare meno spazio su schermi più piccoli.

Gestione degli sfondi a schermo intero

Molte pagine di destinazione utilizzano sfondi a schermo intero per attirare più attenzione. Questa è una tecnica potente ma spesso funziona meglio su monitor di grandi dimensioni.

Quindi come gestirlo su uno schermo più piccolo? In generale, anche i designer rimuovere l'immagine di sfondo passato un certo punto di interruzione o l'immagine stessa si riallinea per adattarsi alla finestra.

Cap Radio Raffle utilizza questa tecnica nella loro home page. L'immagine di sfondo mantiene il punto focale in vista in ogni momento, indipendentemente dallo schermo ridimensionato.

Tipicamente questo tipo di soluzione richiede un po 'di posizionamento CSS ma è davvero semplice quando ci riesci. Appena mantenere il punto focale in vista in ogni momento, e ridimensiona il contenitore dell'immagine per adattarsi in proporzione al dispositivo.

Oltre agli sfondi di grandi dimensioni per motivi estetici, è possibile utilizzare anche immagini di grandi dimensioni per il contenuto della pagina. La home page di Mashable utilizza uno sfondo di immagine in primo piano per la storia principale che copre l'intero layout.

Il loro layout reattivo comprime l'immagine mentre mantenendo un punto focale centrale. È difficile farlo perché l'immagine in primo piano cambia quando la storia cambia, quindi le foto devono essere curate attentamente. La soluzione di Mashable è ancora un ottimo metodo per gestire le foto a schermo intero per blog e layout di riviste se progettati correttamente.

Semplifica la navigazione

Quando si rinnova per schermi più piccoli, mantenere il maggior numero di collegamenti possibile nella navigazione, e renderlo facilmente accessibile. Ciò significa che potrebbe essere necessario abbandonare alcuni collegamenti se si dispone di menu a discesa a più livelli.

Sebbene tu abbia la strategia giusta è comunque possibile mantenere tutti i dropdown intatti. Ad esempio, Kidscreen utilizza a menu a comparsa con piccole icone a forma di freccia indicando sottolink nel menu responsive.

Molte persone discutono contro il menu dell'hamburger ma sono arrivato ad accettarlo come elemento necessario per i lunghi menu di navigazione. Funziona semplicemente ed è stato ampiamente compreso dalla maggior parte degli utenti di smartphone come "il pulsante del menu".

In effetti, ti verrebbe difficile trovare un sito reattivo che non si basasse sul menu a tre barre dell'hamburger. CyberChimps è un grande esempio utilizza un menu a discesa verticale piuttosto che uno slide-in.

La struttura di navigazione di CyberChimps viene riorganizzata per scorrere in basso nella parte superiore della pagina. Il menu scende dall'alto con elementi di blocco di grandi dimensioni per i collegamenti.

Con più spazio per fare clic e testo del link più grande, il processo di navigazione delle pagine diventa molto più semplice. Cerca di seguire questa filosofia con il tuo intero header reattivo e i tuoi progetti miglioreranno drasticamente.

Costruisci il tuo

Con questi suggerimenti a tua disposizione non dovrebbe essere difficile costruire intestazioni reattive utilizzabili. Mentre ci sono molti strumenti per aiutarti, l'unico modo per capire veramente è attraverso la pratica.

Quindi prendi queste tecniche con te e inizia a costruire siti web! Ho anche elencato una manciata di ulteriori risorse per intestazioni reattive che puoi consultare qui sotto.

• Crea un menu di navigazione reattivo CSS di base (Teamtreehouse.com)
• Best practice per l'intestazione del sito web reattivo (Ux.stackexchange.com)
• Come posso rendere la mia immagine di intestazione correttamente reattiva? (Stackoverflow.com)