Briljant gebruik van HTML-lijsten in Web Design

Je kunt goed ontworpen lijsten overal op internet vinden. Ontwerpers gebruiken ze al decennia lang coördineer pagina-informatie en lay-outs, en in het web van vandaag zie je de grote creativiteit in hoe webontwerpers lijsten gebruiken. Deze omvatten navigatiemenu's, profielkoppelingen, archieven, taken / checklists en tal van andere toepassingen!

In dit bericht zal ik verschillende soorten HTML-lijsten introduceren, met tips voor het ontwerpen ervan, met name over hoe voeg een uniek randje toe aan je lijst. Ik zal je ook een paar voorbeelden van websites laten zien met fantastische lijstontwerpen, en uiteindelijk krijg je een lijst met websites met mooi ontworpen HTML-lijsten. Er is geen twijfel meer over hoe u uw overzichtelijke lijsten er uniek laat uitzien, en laten we er vandaag het beste van maken!

De Listing Elements

Webontwerpers springen constant van de ene bandwagon naar de volgende, waardoor de websitestijlen in de loop van de tijd veranderen, maar de lijsten hebben de tand des tijds doorstaan en kunnen heel goed van pas komen bij toekomstige innovatie van het World Wide Web.

Voordat ik de voorbeelden bekijk, wil ik enkele punten behandelen met HTML-lijsten. Er zijn weinig verschillende soorten lijsten die u kunt gebruiken in uw eigen ontwerpwerk. De meerderheid van de webontwerpers concentreert zich op Ongeordende lijsten die worden geopend met een

Bestelde lijsten

Gegevensdefinities

Ongeordende lijsten (
)

Mogelijk een van de meest gebruikte elementen in HTML4 / HTML5-standaarden. Niet-geordende lijsten zullen gegevens op dezelfde manier uitvoeren als een geordende lijst, hoe dan ook zal geen numerieke markeringen aan de zijkant zien. In plaats daarvan krijgt elk item een kleine cirkel of schijf en opgesplitst op een nieuwe regel. Dit pictogram kan ook worden gewijzigd met de property van het type list-style gevonden in CSS.

Hieronder staat de voorbeeldcode van de ongeordende lijst:

  Item 1
 Item 2
 Item 3

Ongeordende lijsten zijn de perfecte remedie voor bouwen navigatielinks. Omdat je het gemakkelijk kunt nest hele lijsten binnen elk lijstitem het is een eenvoudig om subnavigatielinks te maken ook. Nadat u de lijststijl hebt verwijderd, blijft er een leeg itemelement over. Hier kunt u ankerkoppelingen opmaken om als blokelementen op uw pagina te verschijnen, waardoor een navigatie-menuontwerp wordt ingevuld en met een aantal jQuery-code kunt u een mooie koptekst voor uw site samenstellen.

Meestal vindt u ongeordende lijsten in het midden van webartikelen of installatie-instructies. Let op dat Google en andere zoekrobots verwerken uw pagina-inhoud niet anders, dus jouw SEO mag niet worden beïnvloed, ongeacht het type aanbieding dat u kiest.

Bestelde lijsten (
)

Wanneer u een set gegevens moet bestellen, is het mogelijk om uw eigen lay-outraamwerk helemaal opnieuw op te zetten, maar op deze manier moet u elk oplopend nummer handmatig toevoegen, wat vermoeiend kan zijn. Bestelde lijsten zijn geweldig voor genummerde taken op één lijn houden zonder enige fouten. De volgorde van uw interne lijstitems (

) dicteren hoe de gegevens worden gepresenteerd.

Hieronder staat de voorbeeldcode van de geordende lijst:
```
  Item 1
 Item 2
 Item 3
 
 
```
Het is ook mogelijk om verander de teller van gewone nummers in een handvol andere opties. Waaronder alfabetische letters en Romeinse cijfers, om er een paar te noemen. Webontwerpers zouden de geordende lijst gebruiken voor inhoudspecifieke lijsten. Receptgegevens, dagelijkse taken, favorieten, of top / recent ingelogde gebruikers zijn slechts een paar voorbeelden. Vaak zie je het blog reacties opgebouwd met behulp van geordende lijsten om elke opmerking in een genummerde volgorde te houden.

Gegevensdefinitie lijsten (
)

Definitielijsten worden niet vaak meer gezien (niet zoals ze ooit populair waren). Ze werden vroeger gezien door webontwerpers die complexe formaten van links of doosinhoud creëerden. De data lijst tag (
) wordt tegenwoordig vaak verkeerd begrepen door codeerders. In de HTML4.01-specificaties werden gegevenslijsten gebruikt combineer items met hun beschrijvingen. Dit werden definitielijsten genoemd.

Hieronder ziet u de voorbeeldcode van de gegevensdefinitielijst:
```
  Item 1
 Omschrijving
 Item 2
 Omschrijving
 Item 3
 Omschrijving
 
 
```
Met de nieuwe HTML5-specificaties hebben gegevenslijsten een transcriptie gekregen. Er zijn geen verschillen met syntaxis in de manier waarop u de elementen gebruikt, maar hun doel is bijgewerkt als een beschrijvingslijst die uit een of meer gegevenstermen bestaat (
) gevolgd door een of meer gegevensdefinities (
).

Een sterk voorbeeld uit het artikel van de HTML5 Doctor is een metadata opgemaakte lijst. Binnen een single dl lijstelement zou je een term definiëren, zoals uw naam, dan elke volgende definitielabel kan gegevens beschrijven over u, mogelijk uw leeftijd, beroep, huidige stad / stad, enz. Uiteindelijk elke set gegevens met sleutel / waarde-paren past mooi in een beschrijvingslijst. U kunt meer dan één gegevensterm in een lijst gebruiken, maar W3C verklaart dat elke term zou uniek moeten zijn in de lijst.

Nu we de 3 populaire lijststijlen hebben vastgelegd, laten we enkele voorbeelden bekijken! Webontwerpers zijn de afgelopen jaren heel creatief geworden met hun lijsten. Ik heb 7 van mijn favoriete websites hieronder gecatalogiseerd met een specifieke focus op hun creatief gebruik van lijsten.

Eenvoudige ongeordende lijstnavigatie

Navigatiemenu's zijn veel eenvoudiger te bouwen met moderne CSS-technieken. Dit is de reden waarom ongeordende lijsten en zelfs geordende lijsten een populaire optie zijn geworden. Een van mijn favoriete voorbeelden hiervan is te vinden op de social media-blog, Mashable.

Naar de bovenkant van hun koptekst zult u 2 hoofdreeksen van links opmerken. Direct naar de top van hun logo staat een kleine ongeordende lijst met community-links zoals Topverhalen, Trending Topics en People. De ontwerper heeft een slanke zweefstijl gecreëerd met een solide achtergrond en kleurenschema.

Direct daaronder zie je hun subnavigatielinks. Dit navigatiemenu leidt naar blogcategorieën zoals Social Media of Tech. Beide ongeordende lijsten zijn opgenomen in a HTML5
element om alles in overeenstemming te houden met de sjabloon. De hovereffecten die hier worden toegevoegd, tonen een afgeronde hoek rond het subnavigatiemenu. Elke koppeling wordt weergegeven als een blokelement en neemt een groot deel van het subnavigatiemenu in beslag.

Listing Softwarefuncties

Dit is mogelijk een van mijn favoriete voorbeelden van gestileerde lijsten. Webontwikkelaars en softwarebedrijven gebruiken deze in hun eigen webdesign. Mijn voorbeeld concentreert zich op de pagina van de Things Things van de Cultuurcode, een takenlijst-app. Ze hebben een gebouwd geformatteerde reeks items en functies je kunt dingen vinden.

De hele verzameling is vervat in een
tag die zowel de linker- als de rechterkolom bevat. Binnenin zijn de drijvend
elementen met links en rechts klasse, respectievelijk. De inhoud van het lijstitem is eigenlijk opgedeeld in segmenten en CSS wordt gebruikt om alles uit te lijnen.

Afbeeldingen worden als toegevoegd labels rechtstreeks in de code en gepositioneerd ten opzichte van hun bevattende
. De sterk labels worden gebruikt voor elk van de header-punten die in donkerdere tekst worden weergegeven en direct hierna wordt de beschrijving toegevoegd.

De elementen zijn prachtig samengevoegd en ik waardeer de werkethiek van Culture Code enorm. Ze hebben bewezen dat ze in de loop der jaren fantastische ontwerpen hebben gemaakt, vooral voor Things. Als u een map met pictogrammen zoals Icon Finder bekijkt, is het vrij eenvoudig om een set freebie uit te zoeken, en vanaf hier kunt u een ontwerp mockupen en een vergelijkbare lijst in CSS coderen.

Als je verder geïnteresseerd bent in hun ontwerp, gebruikt de Things for iPhone-pagina eigenlijk een beschrijvingslijst. Elk pictogram is ingesteld als een definitieterm en de beschrijvingen zijn aan de rechterkant geplaatst. Dit is niet de aanbevolen manier om deze tags te gebruiken, maar het werkt in bepaalde omstandigheden wel goed!

Blogcategorieën en tags

Gebruikers van WordPress zijn zeer bekend met het systeem van categorieën / tags. Het heeft tot nu toe goed gewerkt in de meeste vormen van sociale media, maar het is oorspronkelijk afgeleid van de blogosfeer. Tags zijn geweldig voor het weergeven van een paar niche-artikelen met betrekking tot het onderwerp. Categorieën zijn veel breder en worden gebruikt om het grootste deel van uw artikelen te omvatten.

Het beste voorbeeld dat ik kan bedenken is Smashing Magazine en het opnieuw ontwerpen van hun nieuwe startpagina. Bovenaan zie je een tabblad met het label “Tijdschrift” met een klein label op de zijkant. Beweeg je muis over dit om een verborgen lijst met categorieën weer te geven, zoals codering, ontwerp, afbeeldingen, enz. Elk is ook gestyled met een fraai CSS3-zweefeffect om als glanzende knoppen te verschijnen.

Als u naar de code kijkt, ziet u dat ze dit vak in het linkerkolomgebied hebben geplaatst. Het heeft een Geen weergeven; stijl voor verschijnen verborgen tot geactiveerd. De ongeordende lijst wordt ingesteld met elk lijstitem dat een ankerlink bevat, maar als alternatief deze links worden inline weergegeven en op twee regels verbroken voor de benodigde ruimte.

Voettekstkolommen met definitielijsten

Ik was altijd een grote fan van het klassieke Digg-ontwerp. Het bevatte alles wat je zou verwachten van een nieuwssite met geweldige sociale mogelijkheden. Een heel interessant stuk naar hun oude ontwerp is de voettekstkolommen instellen met behulp van definitielijsten.

Helaas heeft de Digg-crew al v4 design live gelanceerd, maar het internet is een nostalgische plek en met de Wayback Internet Archives kunnen we vanaf augustus 2007 een ouder ontwerp van Digg tevoorschijn toveren. Deze template heeft veel fantastische elementen van de gebruikersinterface, maar meer specifiek laten we ons concentreren op het footer-gebied. U zult opmerken dat elke kolom eigenlijk in a is onderverdeeld data lijst element. Deze kolommen zijn stel in als blokken en zweef naast elkaar met vooraf gedefinieerde breedten.

De data termen gedragen zich als headers binnen de lijst en verschijnen maar één keer per kolom. Naar mijn mening is dit een veel leukere en schonere manier om je beschrijvingslijsten samen te stellen. Het is mogelijk om meer dan één term per lijst te gebruiken, maar dit verpest je HTML vaak en je kunt de code heel snel uit het oog verliezen. De eerste twee kolommen bevatten 6-7 links onder elkaar weergegeven als data-termen voor het beschrijven van de koptekst, maar hierna zul je zien dat kolommen zich verwijderen van de standaard opmaak.

Bijvoorbeeld onder Digg Tools & API er zijn slechts twee gegevensdefinities. Dit zijn eigenlijk de 2 paragrafen die een interne link en een zin bevatten. Er is zeker niets mis met deze markup, en het is eigenlijk een zeer creatief en duurzaam systeem voor het bouwen van voetteksten. Ik weet zeker dat als je de archieven van Digg's pagina's bezoekt, je nog veel meer fantastische voorbeelden van lijsten zult vinden.

Taken en taken

Lijsten zijn niet altijd alleen opgenomen voor ontwerpstijlen. Er zijn eigenlijk tijden waar inhoud vereist lijstitems om een echte lijst met gegevens te vormen. Takenlijsten zijn het perfecte voorbeeld van deze verschijnselen. Er zijn echter niet veel taakmanagers ingebouwd in het web, dus het is moeilijk om goede voorbeelden te vinden.

Flow App is zo'n service met een prachtig gebruikerspaneel. Als je tijd hebt, raad ik je aan je aan te melden voor een gratis account om de app een demo te geven. Zelfs als je niet van plan bent om te betalen, is het nog steeds een erg leuke web-app om mee te rotzooien en je kunt zelfs wat ontwerpinspiratie eruit halen.

Als u bent ingelogd, sorteert het menu linksonder uw verzameling lijsten. Dit zijn taken die u kunt herschikken, bewerken, labelen en controleren als voltooid. Klik op de eerste standaardlijst “De basis” opent inhoud in het rechterdeelvenster, hier wordt de volledige lijststructuur opgebouwd met een ongeordende lijst.

Elk item bevat een vrij grote hoeveelheid innerlijke context. Elke balk die je tegenkomt presenteert één lijstitem toegevoegd aan het totaal
element. Er zijn ook veel interne objecten zoals een bewerkingspictogram, een aanvinkvakje, een vlag en een prullenbak. Ook in het zijmenu links eronder “Focus” je zult het merken geconstrueerde items ingesteld op een ongeordende lijst. Het ziet er fantastisch uit voor zijn eenvoud.

Dribbble spelerslijst

Samen met veel collega-ontwerpers ben ik een enorme dribbelverslaafde. De website is prachtig gebouwd en heeft een aantal van de beste grafische ontwerpers van over de hele wereld. Als u niet bekend bent met het netwerk, is Dribbble een alleen-uitnodigingssocial community van webontwerpers die hun nieuwste werk delen.

Dingen worden interessant als u uw aandacht richt op de rechterbenedenhoek van het zijbalkgebied. Hier hebben we een geordende lijst met de klas “spelers-lijst“. Het bevat rookies die de nieuwste ontwerpers zijn die uitgenodigd zijn en die zich recentelijk hebben aangemeld op de website. Om welke reden dan ook heeft de webontwikkelaar van de Dribbble ervoor gekozen om een geordende lijst met elk lijstitem met details over de gebruiker.

Innerlijke inhoud is eigenlijk opgedeeld in twee segmenten. EEN
naar rechts zwevend houdt de link volgen / niet volgen vast als u momenteel bent aangemeld. Het alternatieve element geeft a weer
kop met de klas “vcard” met de gebruikersnaam en avatar van de gebruiker. Deze zijn beide gekoppeld aan hun persoonlijke Dribbble-profiel, samen met enkele accountstatistieken.

Horizontale broodkruimels

Er zijn enkele fantastische voorbeelden en geschreven praktische tips voor het bouwen van broodkruimelnavigatie. Deze menu's tonen zichtbaar de verzameling van sublinks die u hebt doorlopen om de huidige pagina te bereiken. We hebben een fantastische broodkruimel-tutorial op Hongkiat die volledig is gebouwd met CSS3-technieken en ongeordende lijsten.

Het ontwerp maakt gebruik van anker links als de blokelementen om het lijstmenu weer te geven. De ankerlink krijgt een achtergrondafbeelding en een vermindering z-index eigenschap zodat de pijlen bovenop elk gelijklopend element worden weergegeven.

Bekijk ook het voorbeeld van Google op een van hun ondersteuningspagina's. Dit is het perfecte pagina-element om op te nemen in uw eigen website als u dat heeft meerdere geneste pagina's met inhoud. Bezoekers zullen waarschijnlijk proberen terug te gaan naar de vorige pagina's zonder hun geschiedenis te controleren.

Er zijn niet veel alternatieven voor het samenstellen van een lijst met broodkruimelkoppelingen. Je zou een geordende lijst dus kunnen gebruiken Crawlers van zoekmachines begrijpen dat er een bestelling is naar de menulinks, maar zoals eerder vermeld, maakt dit waarschijnlijk niet zoveel verschil als het gaat om ranglijsten in SERPS. Als u meer complexe behoeften hebt voor broodkruimels, zoals een titel / beschrijving voor elke koppeling, kunt u beter gebruikmaken van het definitielijstelement.

Meer mooie lijst-gebaseerde gebruikersinterface

Zonder in te gaan op te veel details, is het mijn doel om een fantastische set-up van op lijst gebaseerde interface-elementen te verzamelen. Dit is veel gemakkelijker gezegd dan gedaan - maar het internet heeft zoveel opties om uit te kiezen! Er is volop ruimte voor groei op het gebied van HTML-lijsten. Als je op zoek bent naar meer inspiratie, bekijk dan de minigalerie hieronder met enkele fantastische voorbeelden.

6wunderkinder

Een fantastisch navigatie-menu in de vorm van knopelementen.

Cake Sweet Cake

Cake Sweet Cake heeft een prachtige lijst met miniatuurafbeeldingen met enkele heerlijke voorbeelden van hun bakkerijwerken.

Cheesemonger Invitational

De Cheesemonger Invitational-website bestaat uit 2 afzonderlijke
elementen zwevend om 1 navigatiemenu te maken. Het ziet er echt netjes uit in overeenstemming met hun gecentreerde logo-afbeelding.

De drievoudige redacteur

De links naar sociale media onderaan in de website van de Threepenny-editor staan allemaal onder een lijst. Het past perfect in een kolom van hun praktische lay-outthema.

Le Tipi

Nog een mooi voorbeeld van een navigatiemenu dat is gestyled met afbeeldingen en CSS.

Je weet wie

You Know Who heeft een leuk retro-designeffect op hun website. Het onderste deel van de startpagina heeft een kleine geordende lijst met miniaturen van hun nieuwste projectwerk.

MediaLoot

Een ongeordende lijst gemaakt voor de aanmeldingsplannen van MediaLoot ziet er veelbelovend uit.

365psd

365psd biedt een gloednieuwe Photoshop-sjabloon die u elke dag kunt downloaden. In hun zijbalk vindt u een lijst met tags die zijn ingebouwd in een ongeordende lijst. Dit ziet er perfect uit in blogs en archiefpagina's waar een kleine taglijst geschikt lijkt.

Conclusie

Hopelijk heeft deze galerij met creatieve HTML-gestileerde lijsten u inspiratie gegeven voor het ontwerpen van lay-outcontent. Het kan lastig zijn om een concreet idee vast te leggen voor uw lijsten op webpagina's, maar itemlijsten vormen een groot deel van het ontwerpproces en bieden constructieve relaties tussen markup-tags en inhoud.

Er zijn waarschijnlijk tientallen andere fantastische lijsten gevonden op het web en met de groeiende hoeveelheid webontwerpers die beschikbaar is, zien we zeker dat dit aantal sneller stijgt dan ooit. Als je een geweldige website kent met geweldige HTML-lijsten, voel je dan vrij om de links in onze commentaarsectie hieronder aan te bieden. Ook als u een van de bovenstaande stijlen toevoegt aan uw eigen website, willen we deze graag bekijken!
Breng Office 2003-menu's terug naar 2010 met UBitMenu

Breng Windows 7 Start Menu naar Windows 10 met Classic Shell

Fleur Firefox op voor de feestdagen