Brilliant användning av HTML-listor i webbdesign

Du hittar väl utformade listor över hela Internet. Designers har använt dem i årtionden till koordinera sidinformation och layouter, och på dagens webbsida kan du se den stora kreativiteten i hur webbdesigners använder listor. Dessa inkluderar navigeringsmenyer, profillänkar, arkiv, uppgifter / checklistor och många andra användningsområden!

I det här inlägget kommer jag att introducera olika typer av HTML-listor, med tips om hur du utformar dem, särskilt om hur du ska Lägg till en unik kant på din lista. Jag tar även dig igenom några exempel på webbplatser med fantastiska listdesigner och så småningom får du en lista med webbplatser med snyggt utformade HTML-listor. Det finns inget mer tvivel på hur man gör dina vanliga listor ser unika ut, och låt oss börja göra det mesta av dem idag!

Listningselementen

Webbdesigners hoppar ständigt från en bandwagon till nästa, vilket medför att webbplatsstilar ändras över tid men listor har stått tidstestet och kan mycket väl vara kvar i framtiden innovation av World Wide Web.

Innan jag tittar på exemplen vill jag täcka några punkter med HTML-listor. Det finns få olika typer av listor som du kan använda i ditt eget designarbete. Majoriteten av webbdesigners fokuserar på Oorderade listor som öppnas med a

Beställda listor

Datadefinitioner

Oorderade listor (
)

Eventuellt en av de mest använda elementen i HTML4 / HTML5-standarder. Oordnade listor kommer att mata ut data på samma sätt som en beställd lista, dock du kommer inte att se några numeriska markörer på sidan. Istället ges varje artikel en liten cirkel eller skiva och uppdelad på en ny linje. Den här ikonen kan också ändras med egenskapen lista-stil-typ hittades i CSS.

Nedan är exemplet kod för den oordnade listan:

  Artikel 1
 Punkt 2
 Punkt 3

Oordnade listor är det perfekta botemedlet för byggandet navigationslänkar. Eftersom du lätt kan boet hela listor inom något listobjekt det är en enkel sak att skapa subnavigationslänkar också. Efter att du har tagit bort listestilen lämnas du med ett tomt objektelement. Härifrån kan du ställa ankarlänkar för att visas som blockelement på din sida, så att du fyller i en navigationsmeny design och med någon jQuery-kod kan du sätta ihop en vacker rubrik för din webbplats.

Vanligtvis hittar du oordnade listor mitt i webbartiklar eller installationsanvisningar. Lägg märke till det Google och andra sökrobotar behandlar inte ditt sidinnehåll något annorlunda, så din SEO bör inte påverkas oavsett vilken noteringstyp du väljer.

Beställda listor (
)

När du behöver beställa en uppsättning data är det möjligt att ställa in din egen layoutram från början, men på så sätt måste du lägga till varje inkrementellt tal för hand, vilket kan vara tröttsamt. Beställda listor är bra för hålla nummererade uppgifter i linje utan några skruv-ups. Ordern för dina interna listobjekt (

) kommer att diktera hur data presenteras.

Nedan visas exempelkoden för den beställda listan:
```
  Artikel 1
 Punkt 2
 Punkt 3
 
 
```
Det är också möjligt att byt disken från vanliga nummer till en handfull andra alternativ. Dessa inkluderar alfabetisk bokstäveri och romerska siffror, för att nämna några. Webbdesigners skulle använda beställd lista för innehållsspecifika listor. Receptdata, Dagliga uppgifter, favoriter, eller top / nyligen inloggade användare är bara några exempel. Ofta ser du bloggkommentarer byggd med hjälp av beställda listor för att behålla varje kommentar i en numrerad sekvens.

Data Definition Listor (
)

Definition listor ses inte mycket ofta längre (inte som om de var någonsin populära). De brukade ses med webbdesigners som skapade komplexa format för länkar eller innehåll i innehållet. De datalista tagg (
) är ofta missförstådd av kodare idag. I HTML4.01 användes specifika datalistor par objekt med sina beskrivningar. Dessa kallades definitionslistor.

Nedan visas exempelkoden för datadefinitionslistan:
```
  Artikel 1
 Beskrivning
 Punkt 2
 Beskrivning
 Punkt 3
 Beskrivning
 
 
```
Men med de nya HTML5-specifikationerna har datalistorna fått en transkription. Det finns inga skillnader med syntax i hur du använder elementen, men deras syfte har uppdaterats som en beskrivningslista som består av en eller flera data termer (
) följt av en eller flera datadefinitioner (
).

Ett starkt exempel från HTML5-doktorns artikel är a metadataformaterad lista. Inuti en singel dl listelement du skulle definiera en term, som ditt namn, sedan varje efterföljande definition tagg kan beskriva data om dig, eventuellt din ålder, ockupation, nuvarande stad / stad, etc. I slutändan Varje uppsättning data med nyckel / värdepar passar snyggt i en beskrivningslista. Du kan använda mer än en dataterm i en lista, men W3C anger det varje term bör vara unik i listan.

Nu när vi har naglat ner de 3 populära liststilarna, låt oss gå vidare till några exempel! Webbdesigners har blivit mycket kreativa med sina listor under de senaste åren. Jag har katalogiserat 7 av mina favoritwebbplatser nedan med specifikt fokus på deras kreativa användning av listor.

Enkel oorderad listnavigering

Navigationsmenyer är mycket enklare att bygga med moderna CSS-tekniker. Därför har oordnade listor och till och med beställda listor blivit ett populärt alternativ. Ett av mina favoritexempel på detta syns på social media-bloggen Mashable.

Mot toppen av huvudet lägger du märke till två huvudsätt med länkar. Direkt till toppen av logotypen är en liten oorderad lista som innehåller samhällslänkar som Top Stories, Trending Topics och People. Designern har skapat en elegant svansstil som har en solid bakgrund och färgschema.

Direkt nedanför ser du deras subnavigationslänkar. Den här navigationsmenyn leder till bloggkategorier som Social Media eller Tech. Båda oorderade listorna finns i a HTML5
element för att hålla allt inline med mallen. De svängareffekter som läggs till här visar ett rundat hörn runt undernavigationsmenyn. Varje länk visas som ett blockelement och tar upp mycket utrymme i undernavigeringsmenyn.

Listing Software Features

Detta är möjligen ett av mina favorit exempel på stylade listor. Webbutvecklare och mjukvaruföretag använder dessa i sina egna företags webbdesigner. Mitt exempel fokuserar på sidan av Culture Code's Things, en att-göra-lista app. De har byggt en formaterad uppsättning artiklar och funktioner du kan hitta i saker.

Hela kollektionen finns inne i a
tagg som innehåller både vänster och höger kolumner. Inuti är flytande
element med vänster och höger klass, respektive. Listan innehållet är faktiskt brutit in i segment och CSS används för att anpassa allt.

Bilder läggs till som taggar direkt i koden och positionerat i förhållande till deras innehållande
. De stark taggar används för var och en av rubrikpunkterna som visas i mörkare text, och direkt efter detta läggs beskrivningen till.

Elementen sattes vackert och jag uppskattar starkt Culture Codes arbetsetik. De har visat sig erbjuda fantastiska mönster över år, speciellt för saker. Om du kolla in någon ikonkatalog som Icon Finder är det ganska enkelt att välja en uppsättning freebie, och härifrån kan du mockup en design och koda en liknande listlista i CSS.

Om du är intresserad mer i sin design använder Things for iPhone-sidan faktiskt en beskrivningslista. Varje ikon är definieras som en definitionsterm och beskrivningarna är placerade till höger. Det här är inte det rekommenderade sättet att använda dessa taggar, men det fungerar bra under vissa omständigheter!

Blog Kategorier och Taggar

WordPress-användare är mycket bekanta med kategorierna / tagsystemet. Det har fungerat bra i de flesta former av sociala medier hittills, men det härledde sig ursprungligen från blogosfären. Taggar är bra för att visa några nischartiklar relaterade till ämnet. Kategorier är mycket bredare och brukar omfatta större delar av dina artiklar.

Det bästa exemplet jag kan tänka på är Smashing Magazine och deras nya hemsida omdesign. Överst märker du en flik som är märkt “Tidskrift” med en liten etikettikon hängande från sidan. Håll över det här för att visa en dold lista över kategorier som kodning, design, grafik etc. Var och en är också utformad med en fin CSS3-svängareffekt som visas som glansiga knappar.

Om du tittar på koden märker du att de har placerat den här rutan i det vänstra kolumnområdet. Det ges en display: none; stil till visas dold tills den utlöses. Den oorderade listan är inställd med varje listobjekt som innehåller en ankarlänk, men som alternativ dessa länkar visas inline och bröt på två linjer för önskat utrymme.

Footer-kolumner med definitionlistor

Jag var alltid ett stort fan av den klassiska Digg-designen. Den presenterade allt du kan förvänta dig från en nyhetswebbplats med stora sociala möjligheter. En riktigt intressant bit till sin gamla design är infogningskolumner setup med hjälp av definition listor.

Tyvärr har Digg crew redan lanserat v4 design live, men Internet är en nostalgisk plats och med Wayback Internet Archives kan vi dra upp en äldre design av Digg från augusti 2007. Denna mall har många fantastiska användargränssnitt, men mer specifikt låt oss fokusera på sidfoten. Du kommer märka att varje kolumn faktiskt är uppdelad i en datalista element. Dessa kolumner är inställd att visa som block och flyta bredvid varandra med fördefinierade bredder.

De Datavillkor bete sig som rubriker inom listan och visas bara en gång per kolumn. Enligt min mening är detta ett mycket trevligare och renare sätt att bygga dina beskrivningslistor. Det är möjligt att använda mer än en term per lista, men det här förstör ofta din HTML och du kan förlora koden mycket snabbt. De två första kolumnerna innehåller 6-7 länkar listade under varandra som data villkor för att beskriva rubriktexten, men efter det märker du att kolumnerna bryts bort från standardformatet.

Till exempel, under Digg Verktyg & API det finns endast två datadefinitioner. Dessa är faktiskt de 2 stycken som innehåller en intern länk och en mening. Det är verkligen inget fel med den här uppställningen, och det är faktiskt ett mycket kreativt och hållbart system för att bygga sidfotkolumner. Jag är säker på att du surfar på Diggs arkiv hittar du mycket mer fantastiska exempel på listor.

Uppgifter och dosering

Listor är inte alltid bara inbyggda för design stilar. Det finns faktiskt tider där innehåll kräver listobjekt för att bilda en faktisk lista över data. Att göra listor är det perfekta exemplet på dessa fenomen. Det finns dock inte ett stort antal uppgiftshanterare som är inbyggda i webben, så det är svårt att hitta bra exempel.

Flow App är en sådan tjänst med en vacker användarpanel. Om du har den tid jag föreslår att jag anmäler mig till ett gratis konto för att ge appen en demo. Även om du inte planerar att betala är det fortfarande en väldigt rolig webbapp att röra med och du kan till och med dra ut lite designinspiration.

Om du är inloggad sorterar den nedre vänstra menyn din samling listor. Det här är uppgifter som du kan omorganisera, redigera, tagga och kolla så fullständigt. Klicka på den första standardlistan “Det grundläggande” kommer att öppna innehållet i den högra rutan, här är hela liststrukturen byggd med en orörd lista.

Varje objekt innehåller en ganska stor mängd inre sammanhang. Varje stapel ser du gå över presenter Ett listobjekt läggs till i det övergripande
element. Det finns många interna objekt som en redigeringsikon, en avslutningsrutan, en flagga och en skräpikon också. Också i sidans meny länkar under “Fokus” du märker konstruerade objekt som är inställda på en oorderad lista. Det ser bra ut för sin enkelhet.

Dribbble Players List

Tillsammans med många medarbetare är jag en stor Dribbble-missbrukare. Webbplatsen är vackert konstruerad och har några av de bästa grafiska designerna från hela världen. Om du inte är bekant med nätverket är Dribbble ett inbjudet enda socialt nätverk av webbdesigners som delar bilder av deras senaste arbete.

Saker blir intressanta om du uppmärksammar längst ner till höger om dess sidofält. Här har vi en beställd lista med klassen “spelare-lista“. Den innehåller rookies som är de nyaste designersna som inbjudits och som har anmält sig till webbplatsen senast. Oavsett orsak har Dribbble webbutvecklare valt att använda en beställt lista med varje listobjekt som innehåller detaljer om användaren.

Innehållet är faktiskt uppdelat i två segment. en
flytande till höger håller följa / följa länken om du är inloggad för tillfället. Det alternativa elementet visar en
rubrik med klassen “vcard” innehållande användarens namn och avatar. Dessa är båda kopplade till sin personliga Dribbble-profil, tillsammans med en viss kontostatistik.

Horisontella brödsmulor

Det finns några fantastiska exempel och skriftliga bästa metoder för att bygga breadcrumb-navigering. Dessa menyer visar synligt samling av dellänkar du har kollat för att nå den aktuella sidan. Vi har en fantastisk brödsmälthandledning som presenteras på Hongkiat byggd helt med CSS3-tekniker och oorderade listor.

Designen använder ankare länkar som blockelementen för att visa listmenyn. Ankarlänken ges en bakgrundsbild och a minskande z-index egendom så pilarna kommer att visas ovanpå varje samtidiga element.

Kolla även Googles exempel på en av deras supportsidor. Detta är det perfekta sidelementet att integrera i din egen webbplats om du har flera nestade sidor med innehåll. Besökare kommer sannolikt att leta för att komma tillbaka till tidigare sidor utan att kontrollera deras historia.

Det finns inte många alternativ för att bygga en lista över breadcrumb-länkar. Du kan använda en beställd lista så sökrobotar förstår att det finns en order till menyns länkar, men som sagt tidigare kommer det förmodligen inte att göra för mycket av en skillnad när det gäller ranking i SERPS. Om du har mer komplexa behov av brödsmulor, som en titel / beskrivning för varje länk, kan du bättre utnyttja definitionens listelement.

Mer vacker listbaserad användargränssnitt

Utan att gå in på för mycket detaljer är det mitt mål att samla en fantastisk installation av listbaserade gränssnittselement. Det här är mycket lättare sagt än gjort - men Internet har så många alternativ att välja mellan! Det finns gott om utrymme för tillväxt i riken på HTML-listor. Om du dör för mer inspiration, kolla in mini galleriet nedan med några fantastiska exempel.

6wunderkinder

En fantastisk navigationsmeny utformad som knappelement.

Cake Sweet Cake

Cake Sweet Cake har en vacker lista med miniatyrbilder som innehåller några läckra prover av sina bakverk.

Cheesemonger Invitational

Cheesemonger Invitational webbplats har 2 separata
element som flyter för att skapa 1 navigeringsmeny. Det ser väldigt snyggt ut i linje med deras centrerade logotyps grafik.

Threepenny Editor

De sociala medierna längst ner på Threepenny Editors hemsida är alla tillverkade på en lista. Den passar perfekt in i en kolumn i deras hand-and-paper layout tema.

Le Tipi

Ett annat vackert exempel på navigeringsmenyn utformad med bilder och CSS.

Du vet vem

Du vet vem har en fin retro design effekt på deras hemsida. Hemsidan på hemsidan har en liten beställd lista som innehåller miniatyrer av deras senaste projektarbete.

MediaLoot

En oordnad lista som gjorts för MediaLots registreringsplaner, ser lovande ut.

365psd

365psd erbjuder en helt ny Photoshop-mall för nedladdning varje dag. I deras sidofält hittar du en lista med taggar som är inbyggda i en oordnad lista. Det ser perfekt ut i bloggar och arkivsidor där en liten tagglista känns lämplig.

Slutsats

Förhoppningsvis har det här galleriet av kreativa HTML-listor fått dig inspiration för att utforma layoutinnehåll. Det kan vara svårt att spika ner en konkret idé för dina listor på webbsidor, men objektlistor är en stor del av designprocessen och erbjuda konstruktiva relationer mellan märkningstaggar och innehåll.

Det finns förmodligen dussintals andra fantastiska listor som finns på webben, och med den växande mängd webbdesigners som är tillgängliga kommer vi säkert se att detta nummer ökar snabbare än någonsin. Om du känner till någon bra hemsida med fantastiska HTML-listor, var god att erbjuda länkarna i vår kommentar avsnitt nedan. Också om du lägger till några av de stilar som anges ovan till din egen hemsida så skulle vi vilja kolla in det!
Ta med Office 2003-menyer Tillbaka till 2010 med UBitMenu

Ta med Windows 7 Start-menyn till Windows 10 med Classic Shell

Ljus upp Firefox för semestern