Uso brillante di elenchi HTML in Web Design
Puoi trovare elenchi ben disegnati su Internet. I designer li hanno usati per decenni coordinare le informazioni e i layout della pagina, e nel web di oggi puoi vedere la grande creatività nel modo in cui i web designer utilizzano le liste. Questi includono i menu di navigazione, i collegamenti ai profili, gli archivi, le attività / checklist e molti altri usi!
In questo post presenterò diversi tipi di liste HTML, con suggerimenti su come progettarle, in particolare su come aggiungi un bordo unico alla tua lista. Ti illustrerò anche alcuni esempi di siti Web con fantastici design di elenchi e alla fine otterrai un elenco di siti Web con elenchi HTML ben progettati. Non ci sono più dubbi su come rendere unici i tuoi elenchi dall'aspetto semplice, e iniziamo a trarre il massimo da loro oggi!
Gli elementi dell'elenco
I web designer stanno costantemente saltando da un carro a un altro, causando così il cambiamento degli stili del sito web nel tempo, ma le liste hanno superato la prova del tempo e potrebbero benissimo essere in giro per l'innovazione futura del World Wide Web.
Prima di esaminare gli esempi voglio coprire alcuni punti con gli elenchi HTML. Esistono pochi tipi di elenchi che è possibile utilizzare nel proprio lavoro di progettazione. La maggior parte dei web designer si concentra su Liste non ordinate che sono aperti con a
Liste non ordinate ()
Forse uno degli elementi più utilizzati negli standard HTML4 / HTML5. Gli elenchi non ordinati generano i dati allo stesso modo di un elenco ordinato, tuttavia tu non vedrà alcun indicatore numerico sul lato. Invece a ogni oggetto viene dato un piccolo cerchio o disco e ripartito su una nuova linea. Questa icona può anche essere modificato con la proprietà list-type-type trovato in CSS.
Di seguito è riportato il codice di esempio dell'elenco non ordinato:
- Articolo 1
- Articolo 2
- Articolo 3
Le liste non ordinate sono il rimedio perfetto per la costruzione collegamenti di navigazione. Dal momento che puoi facilmente annidare intere liste all'interno di qualsiasi voce dell'elenco è un questione semplice per creare link di sub-navigazione anche. Dopo aver rimosso lo stile dell'elenco, rimarrai con un elemento elemento vuoto. Da qui puoi disegnare i link di ancoraggio per apparire come elementi di blocco sulla tua pagina, compilando così un design del menu di navigazione, e con qualche codice jQuery puoi mettere insieme una bella intestazione per il tuo sito.
Più comunemente troverai elenchi non ordinati nel mezzo di articoli Web o istruzioni di installazione. Prendi nota Google e altri robot di ricerca non elaborano il contenuto della pagina in modo diverso, così tuo SEO non dovrebbe essere influenzato indipendentemente dal tipo di elenco che scegli.
Elenchi ordinati ()
Quando è necessario ordinare un set di dati, è possibile configurare da zero il proprio framework di layout, ma in questo modo è necessario aggiungere manualmente ciascun numero progressivo, cosa che può risultare noiosa. Gli elenchi ordinati sono ottimi per mantenere i compiti numerati in linea senza alcun errore. L'ordine degli elementi della lista interna () indicherà come vengono presentati i dati.
Di seguito è riportato il codice di esempio dell'elenco ordinato:
- Articolo 1
- Articolo 2
- Articolo 3
È anche possibile cambia il contatore da numeri regolari a una manciata di altre opzioni. Questi includono lettere alfabetiche e numeri romani, per dirne alcuni. I web designer userebbero l'elenco ordinato per gli elenchi specifici del contenuto. Dati di ricetta, Compiti giornalieri, preferiti, o top / recenti utenti registrati sono solo alcuni esempi Spesso vedrai commenti del blog costruito usando liste ordinate per mantenere ogni commento in una sequenza numerata.
Elenchi di definizione dei dati ()
Gli elenchi di definizioni non sono più visti molto spesso (non come se fossero mai stati popolari). Sono stati visti con i web designer che creano complessi formati di link o contenuti di scatole. Il tag lista dati (
Di seguito è riportato il codice di esempio dell'elenco di definizioni dei dati:
- Articolo 1
- Descrizione
- Articolo 2
- Descrizione
- Articolo 3
- Descrizione
Tuttavia con le nuove specifiche HTML5, le liste di dati hanno ricevuto una trascrizione. Non ci sono differenze con la sintassi nel modo in cui si usano gli elementi, tuttavia il loro scopo è stato aggiornato come elenco di descrizione che comprende uno o più termini di dati () seguito da una o più definizioni di dati ().
Un forte esempio tratto dall'articolo di HTML5 Doctor è a elenco formattato con metadati. All'interno di un singolo dl elenco di elementi che vorresti definire un termine, come il tuo nome, quindi ogni successivo il tag di definizione potrebbe descrivere i dati su di te, forse la tua età, professione, città / città attuale, ecc. In definitiva qualsiasi insieme di dati con coppie chiave / valore si adatta bene in una lista di descrizioni. È possibile utilizzare più di un termine di dati in un elenco, ma W3C lo afferma ogni termine dovrebbe essere unico nella lista.
Ora che abbiamo individuato i 3 stili più popolari, passiamo ad alcuni esempi! I web designer sono diventati molto creativi con le loro liste negli ultimi anni. Di seguito sono stati catalogati 7 dei miei siti Web preferiti con particolare attenzione all'utilizzo creativo degli elenchi.
Semplice navigazione nella lista non ordinata
I menu di navigazione sono molto più semplici da costruire con le moderne tecniche CSS. Questo è il motivo per cui liste non ordinate e persino liste ordinate sono diventate un'opzione popolare. Uno dei miei esempi preferiti di questo appare sul blog dei social media, Mashable.
Verso la parte superiore della loro intestazione noterete 2 insiemi principali di collegamenti. Direttamente all'inizio del loro logo c'è una piccola lista non ordinata che contiene link di comunità come Top Stories, Trending Topics e People. Il designer ha creato uno stile elegante al passaggio del mouse che presenta uno sfondo e una combinazione di colori solidi.
Direttamente sotto a questo vedrai i loro collegamenti di navigazione secondaria. Questo menu di navigazione porta a categorie di blog come Social Media o Tech. Entrambe le liste non ordinate sono contenute in a HTML5 elemento per mantenere tutto in linea con il modello. Gli effetti al passaggio del mouse aggiunti qui mostrano un angolo arrotondato attorno al menu di navigazione secondaria. Ogni collegamento viene visualizzato come elemento di blocco e occupa molto spazio nel menu di navigazione secondaria.
Elenco delle funzionalità del software
Questo è probabilmente uno dei miei esempi preferiti di liste in stile. Gli sviluppatori Web e le società di software li utilizzano nei propri progetti web aziendali. Il mio esempio si concentra sulla pagina delle cose del codice cultura, un'app lista delle cose da fare. Hanno costruito a set di elementi e funzionalità formattati puoi trovare nelle cose.
Tutta la collezione è contenuto in a Le immagini sono aggiunte come Gli elementi sono stati messi insieme splendidamente e ammiro molto l'etica del lavoro di Culture Code. Hanno dimostrato di offrire fantastici disegni nel corso degli anni, specialmente per le cose. Se controlli una qualsiasi directory di icone come Icon Finder è abbastanza semplice scegliere un set di freebie, e da qui puoi simulare un design e codificare uno stile simile di elenco in CSS. Se ti interessa più a fondo nel loro design, la pagina Cose per iPhone utilizza effettivamente un elenco di descrizioni. Ogni icona è impostare come un termine di definizione e le descrizioni sono posizionate a destra. Questo non è il modo consigliato di usare questi tag, ma funziona in alcune circostanze! Gli utenti di WordPress hanno molta familiarità con il sistema categorie / tag. Ha funzionato bene in molte forme di social media fino ad ora, ma è originariamente derivato dalla blogosfera. I tag sono grandi per la visualizzazione di alcuni articoli di nicchia relativi all'argomento. Le categorie sono molto più ampie e utilizzate per comprendere la maggior parte dei tuoi articoli. Il miglior esempio che mi viene in mente è Smashing Magazine e il loro nuovo re-design della home page. In alto noterai una linguetta con l'etichetta “Rivista” con un'icona piccola etichetta appesa fuori dal lato. Passa il mouse su questo per visualizzare un elenco nascosto di categorie come codifica, design, grafica, ecc. Ognuno è anche in stile con un elegante effetto hover CSS3 per apparire come pulsanti lucidi. Guardando il codice noterete che hanno posizionato questa casella nell'area della colonna di sinistra. È dato a Sono sempre stato un grande fan del classico design Digg. Presentava tutto ciò che ci si aspetta da un sito Web di notizie con grandi capacità sociali. Un pezzo davvero interessante per il loro vecchio design è il impostazione colonne dei piè di pagina mediante elenchi di definizioni. Sfortunatamente l'equipaggio di Digg ha già lanciato v4 design live, ma Internet è un luogo nostalgico e con il Wayback Internet Archives possiamo estrarre un vecchio progetto di Digg dall'agosto del 2007. Questo modello presenta molti fantastici elementi dell'interfaccia utente, ma più specificamente concentriamoci sull'area del footer. Noterai che ciascuna colonna è effettivamente suddivisa in a elemento dell'elenco di dati. Queste colonne sono impostato per visualizzare come blocchi e galleggiare l'uno accanto all'altro con larghezze predefinite. Il i termini dei dati si comportano come intestazioni all'interno della lista e compaiono solo una volta per colonna. Secondo me questo è un modo molto più bello e più pulito per costruire la tua lista di descrizioni. È possibile utilizzare più di un termine per elenco, ma questo spesso incasina il codice HTML e si può perdere la traccia del codice molto rapidamente. Le prime due colonne contengono 6-7 collegamenti elencati l'uno sotto l'altro come termini dati per la descrizione del testo dell'intestazione, ma dopo questo noterete che le colonne si staccano dalla formattazione predefinita. Per esempio, sotto Digg Tools & API ci sono solo due definizioni di dati. Questi sono in realtà i 2 paragrafi che contengono un collegamento interno e una frase. Sicuramente non c'è niente di sbagliato in questo markup, ed è in realtà un sistema molto creativo e sostenibile per costruire colonne di footer. Sono certo che se navighi negli archivi delle pagine di Digg troverai molti più fantastici esempi di liste. Le liste non sono sempre solo incorporate per gli stili di design. In realtà ci sono momenti in cui il contenuto richiede voci di elenco per formare un elenco effettivo di dati. Le liste di cose da fare sono l'esempio perfetto di questi fenomeni. Tuttavia non ci sono un sacco di task manager integrati nel web, quindi è difficile trovare ottimi esempi. Flow App è uno di questi servizi con un bellissimo pannello utente. Se hai tempo suggerisco di registrarti per un account gratuito per dare all'applicazione una demo. Anche se non hai intenzione di pagare, è ancora un'app web molto divertente con cui giocare e puoi persino trarre ispirazione dal design. Se hai effettuato l'accesso, il menu in basso a sinistra ordina la tua raccolta di elenchi. Queste sono attività che è possibile riorganizzare, modificare, etichettare e controllare come completo. Cliccando sul primo elenco predefinito “Le basi” aprirà il contenuto nel riquadro di destra, qui l'intera struttura dell'elenco è costruita con un elenco non ordinato. Ogni oggetto contiene una quantità abbastanza grande di contesto interno. Ogni barra che vedi attraversa regali una voce di elenco aggiunta al totale Insieme a molti colleghi designer sono un enorme tossicodipendente di Dribbble. Il sito Web è costruito magnificamente e presenta alcuni dei migliori grafici di tutto il mondo. Se non conosci la rete, Dribbble è una community social di soli inviti di web designer che condividono scatti del loro ultimo lavoro. Le cose si fanno interessanti se rivolgi la tua attenzione alla parte in basso a destra della sua barra laterale. Qui abbiamo una lista ordinata con la classe “giocatori-list“. È dotato di principianti che sono i designer più recenti dati gli inviti e che hanno effettuato l'accesso al sito più di recente. Per qualsiasi motivo lo sviluppatore web di Dribbble ha scelto di utilizzare un elenco ordinato con ciascuna voce dell'elenco contenente dettagli sull'utente. Il contenuto interno è in realtà suddiviso in due segmenti. UN Esistono alcuni esempi fantastici e best practice scritte per la creazione della navigazione breadcrumb. Questi menu visualizzano visibilmente il raccolta di collegamenti secondari che hai attraversato per raggiungere la pagina corrente. Abbiamo un fantastico tutorial sui breadcrumb in Hongkiat, costruito interamente con le tecniche CSS3 e le liste non ordinate. Il design usa collegamenti di ancoraggio come elementi di blocco per visualizzare il menu elenco. Il collegamento di ancoraggio viene fornito con un'immagine di sfondo e a diminuzione Inoltre, dai un'occhiata all'esempio di Google su una delle loro pagine di supporto. Questo è l'elemento di pagina perfetto da inserire nel tuo sito web, se lo hai più pagine nidificate di contenuti. I visitatori probabilmente cercheranno di tornare alle pagine precedenti senza controllare la loro cronologia. Non ci sono troppe alternative per la costruzione di un elenco di collegamenti breadcrumb. Potresti usare una lista ordinata così I crawler dei motori di ricerca comprendono che esiste un ordine nei collegamenti del menu, tuttavia, come affermato in precedenza, probabilmente non farà troppa differenza quando si tratta di classificare in SERPS. Se hai esigenze più complesse di breadcrumb come un titolo / descrizione per ciascun link, puoi utilizzare meglio l'elemento dell'elenco di definizioni. Senza entrare troppo nei dettagli, il mio obiettivo è raccogliere una fantastica configurazione di elementi di interfaccia basati su elenchi. Questo è molto più facile a dirsi che a farsi - ma Internet ha così tante opzioni tra cui scegliere! C'è ampio spazio per la crescita nel regno delle liste HTML. Se stai morendo per avere più ispirazione, guarda la mini gallery qui sotto con alcuni esempi fantastici. Un fantastico menu di navigazione in stile come elementi del pulsante. Cake Sweet Cake presenta una bella lista di immagini in miniatura contenenti alcuni deliziosi campioni delle loro opere di pasticceria. Il sito Web di Cheesemonger Invitational include 2 elementi separati I link dei social media nella parte inferiore del sito Web di Threepenny Editor sono tutti realizzati in un elenco. Si inserisce perfettamente in una colonna del loro tema di layout mani-e-carta. Un altro bellissimo esempio di menu di navigazione in stile con immagini e CSS. Sapete chi presenta un fantastico effetto di design retrò sul loro sito web. La parte inferiore della home page ha una piccola lista ordinata che contiene le anteprime del loro ultimo lavoro di progetto. Una lista non ordinata creata per i piani di iscrizione di MediaLoot sembra promettente. 365psd offre un nuovo modello Photoshop da scaricare ogni giorno. Nella barra laterale troverai un elenco di tag integrati in un elenco non ordinato. Questo sembra perfetto nei blog e nelle pagine di archivio in cui un piccolo elenco di tag sembra appropriato. Speriamo che questa galleria di elenchi in stile HTML creativi ti abbia ispirato a progettare il contenuto del layout. Può essere difficile trovare un'idea concreta per le tue liste sulle pagine web, ma le liste di articoli sono una parte importante del processo di progettazione e offrire relazioni costruttive tra tag di markup e contenuti. Ci sono probabilmente dozzine di altri fantastici elenchi trovati sul Web, e con la crescente quantità di web designer disponibili vedremo sicuramente questo numero aumentare più velocemente che mai. Se sei a conoscenza di un ottimo sito Web con elenchi HTML fantastici, ti invitiamo a offrire i link nella sezione dei commenti qui sotto. Inoltre, se aggiungi uno degli stili sopra elencati nel tuo sito web, vorremmo verificarlo!. Il forte tag sono usati per ciascuno dei punti di intestazione che appaiono nel testo più scuro, e subito dopo viene aggiunta la descrizione.Categorie e tag del blog
display: nessuno; stile a appaiono nascosti fino all'attivazione. La lista non ordinata è impostato con ogni voce dell'elenco contenente un collegamento di ancoraggio, ma come alternativa questi collegamenti vengono visualizzati in linea e si suddividono su due righe per lo spazio richiesto.Colonne di piè di pagina con elenchi di definizioni
Compiti e cose da fare
Elenco giocatori Dribbble
intestazione con la classe “vCard” contenente il nome e l'avatar dell'utente. Questi sono entrambi collegati al loro profilo Dribbble personale, insieme ad alcune statistiche dell'account. Pangrattato orizzontale
z-index proprietà in modo che le frecce vengano visualizzate sopra ciascun elemento concorrente.
Più bella interfaccia utente basata su elenchi
6wunderkinder
Torta dolce torta
Cheesemonger Invitational
The Threepenny Editor
Le Tipi
Tu sai chi
MediaLoot
365psd
Conclusione
