Uso brilhante de listas HTML em Web Design

Você pode encontrar listas bem projetadas por toda a Internet. Designers têm usado eles há décadas para coordenar informações da página e layouts, e na web de hoje você pode ver a grande criatividade em como os web designers estão usando listas. Estes incluem menus de navegação, links de perfil, arquivos, tarefas / listas de verificação e muitos outros usos!

Neste post vou apresentar diferentes tipos de listas HTML, com dicas sobre como projetá-los, particularmente sobre como adicione uma borda exclusiva à sua lista. Além disso, vou levá-lo através de alguns exemplos de sites com designs de listas fantásticos e, eventualmente, você obterá uma lista de sites com listas HTML bem projetadas. Não há mais dúvidas sobre como fazer com que suas listas simples pareçam únicas, e vamos começar a tirar o máximo proveito delas hoje!

Os elementos da listagem

Web designers estão constantemente pulando de um vagão para o outro, fazendo com que os estilos mudem ao longo do tempo, mas as listas resistiram ao teste do tempo e podem muito bem estar por aí na futura inovação da World Wide Web..

Antes de verificar os exemplos, quero cobrir alguns pontos com listas HTML. Existem alguns tipos diferentes de listas que você pode utilizar em seu próprio trabalho de design. A maioria dos web designers se concentra em Listas não ordenadas que são abertos com um

Listas ordenadas

Definições de dados

Listas não ordenadas (
)

Possivelmente, um dos elementos mais utilizados nos padrões HTML4 / HTML5. As listas não ordenadas irão produzir dados da mesma forma que uma lista ordenada, no entanto você não verá nenhum marcador numérico ao lado. Em vez disso, cada item recebe um pequeno círculo ou disco e dividido em uma nova linha. Este ícone também pode ser alterado com a propriedade de tipo de estilo de lista encontrado em CSS.

Abaixo está o código de exemplo da lista não ordenada:

  Item 1
 Item 2
 Item 3

Listas não ordenadas são o remédio perfeito para a construção links de navegação. Desde que você pode facilmente aninhar listas inteiras dentro de qualquer item da lista é um matéria simples para criar links de sub-navegação também. Depois de remover o estilo da lista, você ficará com um elemento de item em branco. A partir daqui você pode estilizar links âncora para aparecer como elementos de bloco na sua página, preenchendo assim um design de menu de navegação, e com algum código jQuery você pode montar um cabeçalho bonito para o seu site.

Normalmente, você encontrará listas não ordenadas no meio de artigos da Web ou instruções de instalação. Tome nota de que O Google e outros robôs de pesquisa não processam o conteúdo da sua página de forma diferente, então seu O SEO não deve ser afetado, independentemente do tipo de listagem escolhido.

Listas Ordenadas (
)

Quando você precisa solicitar um conjunto de dados, é possível configurar sua própria estrutura de layout a partir do zero, mas dessa forma você precisará adicionar cada número incremental manualmente, o que pode ser cansativo. Listas ordenadas são ótimas para mantendo tarefas numeradas em linha sem quaisquer falhas. A ordem dos seus itens de lista internos (

) ditará como os dados são apresentados.

Abaixo está o código de exemplo da lista ordenada:
```
  Item 1
 Item 2
 Item 3
 
 
```
Também é possível mudar o contador de números regulares para um punhado de outras opções. Esses incluem letras em ordem alfabética e números romanos, para nomear alguns. Web designers usariam lista ordenada para listas específicas de conteúdo. Dados da receita, tarefas diárias, favoritos, ou usuários registrados superiores / recentes são apenas alguns exemplos. Muitas vezes você vai ver comentários do blog construído usando listas ordenadas para manter cada comentário em uma seqüência numerada.

Listas de Definição de Dados (
)

As listas de definições não são mais vistas com frequência (não como se fossem sempre populares). Eles costumavam ser vistos com web designers criando formatos complexos de links ou conteúdo de caixa. o tag de lista de dados (
) é muitas vezes incompreendido pelos codificadores hoje. Em HTML4.01, as listas de dados de especificações foram usadas para itens de par com suas descrições. Estes foram chamados de listas de definição.

Abaixo está o código de exemplo da lista de definição de dados:
```
  Item 1
 Descrição
 Item 2
 Descrição
 Item 3
 Descrição
 
 
```
No entanto, com as novas especificações de HTML5, as listas de dados receberam uma transcrição. Não há diferenças com a sintaxe de como você usa os elementos, mas sua finalidade foi atualizada como um lista de descrição que consiste em um ou mais termos de dados (
) seguido de uma ou mais definições de dados (
).

Um exemplo forte do artigo do Doctor do HTML5 é um lista formatada de metadados. Dentro de um único dl elemento de lista que você faria definir um termo, como o seu nome e, em seguida, cada tag de definição poderia descrever dados sobre você, possivelmente sua idade, ocupação, cidade atual / cidade, etc. qualquer conjunto de dados com pares de chave / valor se encaixa bem em uma lista de descrição. Você pode usar mais de um termo de dados em uma lista, mas o W3C cada termo deve ser único na lista.

Agora que encontramos os 3 estilos de listas populares, vamos passar para alguns exemplos! Web designers ficaram muito criativos com suas listas nos últimos anos. Eu cataloguei 7 dos meus sites favoritos abaixo com foco específico em seu uso criativo de listas.

Navegação de lista não ordenada simples

Os menus de navegação são muito mais simples de construir com técnicas CSS modernas. É por isso que listas não ordenadas e até mesmo listas ordenadas se tornaram uma opção popular. Um dos meus exemplos favoritos aparece no blog de mídia social, Mashable.

Em direção ao topo do cabeçalho, você notará dois conjuntos principais de links. Diretamente na parte superior do logotipo, há uma pequena lista não ordenada contendo links da comunidade, como Principais notícias, Tópicos de tendências e Pessoas. O designer criou um estilo elegante que apresenta um fundo sólido e um esquema de cores.

Diretamente abaixo, você verá seus links de sub-navegação. Este menu de navegação leva a categorias de blog, como Social Media ou Tech. Ambas as listas não ordenadas estão contidas em um HTML5
elemento para manter tudo alinhado com o modelo. Os efeitos de foco adicionados aqui exibem um canto arredondado ao redor do menu de sub-navegação. Cada link é exibido como um elemento de bloco e ocupa muito espaço no menu de sub-navegação.

Listando Recursos do Software

Este é possivelmente um dos meus exemplos favoritos de listas estilizadas. Desenvolvedores da Web e empresas de software usam isso em seus próprios projetos corporativos. Meu exemplo se concentra na página das Coisas do Código de Cultura, um aplicativo de lista de tarefas. Eles construíram um conjunto formatado de itens e recursos você pode encontrar em coisas.

Toda a coleção está contido dentro de um
tag que contém as colunas esquerda e direita. Dentro estão os flutuando
elementos com classe esquerda e direita, respectivamente. O conteúdo do item da lista é realmente dividido em segmentos e CSS é usado para alinhar tudo.

Imagens são adicionadas como Tag diretamente no código e posicionado em relação ao seu contendo
. o Forte Tag são usados para cada um dos pontos de cabeçalho que aparecem em texto mais escuro e, logo após, a descrição é adicionada.

Os elementos foram bem organizados e admiro muito a ética de trabalho do Culture Code. Eles provaram para oferecer projetos fantásticos ao longo dos anos, especialmente para as coisas. Se você verificar qualquer diretório de ícone, como o Icon Finder, é bastante simples escolher um conjunto de brindes e, a partir daqui, você pode criar um design e codificar um estilo semelhante de lista em CSS..

Se você estiver interessado ainda mais em seu design, a página Coisas para iPhone na verdade usa uma lista de descrições. Cada ícone é definido como um termo de definição e as descrições são colocadas à direita. Essa não é a maneira recomendada de usar essas tags, mas funciona bem em algumas circunstâncias!

Categorias de blog e tags

Os usuários do WordPress estão muito familiarizados com o sistema de categorias / tags. Ele funcionou bem na maioria das formas de mídia social até agora, mas é originalmente derivado da blogosfera. As tags são ótimas para exibir alguns artigos de nicho relacionados ao tópico. As categorias são muito mais amplas e usadas para abranger a maior parte de seus artigos.

O melhor exemplo que posso pensar é na Smashing Magazine e no novo design da sua homepage. No topo, você notará uma guia rotulada “Revista” com um pequeno ícone de etiqueta pendurado ao lado. Passe o mouse sobre isso para exibir uma lista oculta de categorias, como codificação, design, gráficos, etc. Cada um deles também é estilizado com um efeito de destaque CSS3 hover para aparecer como botões brilhantes.

Olhando para o código, você notará que eles colocaram essa caixa na área da coluna esquerda. É dado um Mostrar nenhum; estilo para aparecem escondidos até serem acionados. A lista não ordenada é definido com cada item da lista que contém um link de âncora, mas como alternativa esses links são exibidos em linha e quebraram em duas linhas para o espaço necessário.

Colunas do rodapé com listas de definição

Eu sempre fui um grande fã do design clássico do Digg. Ele apresentava tudo que você esperaria de um site de notícias com grande capacidade social. Uma peça realmente interessante para o seu design antigo é a configuração de colunas de rodapé usando listas de definição.

Infelizmente a equipe do Digg já lançou o v4 design live, mas a internet é um lugar nostálgico e com o Wayback Internet Archives podemos criar um design mais antigo do Digg a partir de agosto de 2007. Esse modelo apresenta muitos elementos fantásticos da interface do usuário, mas Mais especificamente, vamos nos concentrar na área de rodapé. Você notará que cada coluna está realmente quebrada em um elemento da lista de dados. Essas colunas são definido para exibir como blocos e flutuar ao lado do outro com larguras predefinidas.

o termos de dados se comportam como cabeçalhos dentro da lista e só aparecem uma vez por coluna. Na minha opinião, esta é uma maneira muito mais agradável e mais limpa de construir suas listas de descrição. É possível usar mais de um termo por lista, mas isso geralmente atrapalha seu HTML e você pode perder o código rapidamente. As duas primeiras colunas contêm 6-7 links listados abaixo uns dos outros como termos de dados para descrever o texto do cabeçalho, mas depois disso você perceberá que as colunas se separam da formatação padrão.

Por exemplo, por baixo Ferramentas do Digg e API há somente duas definições de dados. Estes são, na verdade, os dois parágrafos que contêm um link interno e uma sentença. Certamente não há nada de errado com essa marcação, e é realmente um sistema muito criativo e sustentável para a construção de colunas de rodapé. Tenho certeza de que, se você navegar nos arquivos das páginas do Digg, encontrará exemplos fantásticos de listas.

Tarefas e To-dos

As listas nem sempre são incorporadas apenas para estilos de design. Na verdade, existem momentos em que o conteúdo requer itens de lista para formar uma lista real de dados. As listas de tarefas são o exemplo perfeito desses fenômenos. No entanto, não há muitos gerentes de tarefas construídos na web, por isso é difícil encontrar ótimos exemplos.

O Flow App é um desses serviços com um belo painel de usuários. Se você tiver tempo, sugiro inscrever-se para uma conta gratuita para dar uma demonstração ao aplicativo. Mesmo se você não planeja pagar, ainda é um aplicativo da web muito divertido de se mexer e você pode até mesmo extrair alguma inspiração de design.

Se você estiver logado, o menu inferior esquerdo classifica sua coleção de listas. Essas são tarefas que você pode reorganizar, editar, marcar e verificar como concluídas. Clicando na primeira lista padrão “O básico” vai abrir o conteúdo no painel da direita, aqui toda a estrutura da lista é construída com uma lista não ordenada.

Cada item contém uma quantidade bastante grande de contexto interno. Cada barra que você vê atravessando apresenta um item de lista adicionado ao total
elemento. Há muitos objetos internos, como um ícone de edição, uma caixa de seleção de conclusão, um sinalizador e um ícone de lixeira também. Também nos links do menu lateral abaixo “Foco” você notará itens construídos configurados em uma lista não ordenada. Parece fantástico pela sua simplicidade, com certeza.

Lista de jogadores do Dribbble

Junto com muitos colegas designers eu sou um grande viciado em Dribbble. O site é construído de forma bonita e apresenta alguns dos melhores designers gráficos de todo o mundo. Se você não estiver familiarizado com a rede, o Dribbble é uma comunidade social apenas para convidados de designers da Web que compartilham fotos de seus trabalhos mais recentes.

As coisas ficam interessantes se você voltar sua atenção para o canto inferior direito de sua área lateral. Aqui temos uma lista ordenada com a turma “lista de jogadores“. Ele apresenta novatos que são os mais novos designers convidados e que assinaram o site mais recentemente. Por alguma razão, o desenvolvedor web do Dribbble escolheu usar um lista ordenada com cada item da lista contendo detalhes sobre o usuário.

O conteúdo interno é dividido em dois segmentos. UMA
flutuando para a direita contém o link seguir / deixar de seguir se você está logado no momento. O elemento alternativo exibe um
cabeçalho com a classe “vcard” contendo o nome do usuário e avatar. Ambos estão ligados ao seu perfil pessoal do Dribbble, juntamente com algumas estatísticas da conta.

Breadcrumbs horizontais

Existem alguns exemplos fantásticos e práticas recomendadas por escrito para construir navegação de navegação. Estes menus exibem visivelmente coleção de sub-links que você percorreu para alcançar a página atual. Temos um fantástico tutorial de breadcrumbs apresentado no Hongkiat, totalmente construído com técnicas CSS3 e listas desordenadas.

O design usa links de âncora como os elementos de bloco para exibir o menu da lista. O link de âncora é dado uma imagem de fundo e um diminuindo z-index propriedade para que as setas sejam exibidas na parte superior de cada elemento concorrente.

Além disso, confira o exemplo do Google em uma de suas páginas de suporte. Este é o elemento de página perfeito para incorporar em seu próprio site se você tiver várias páginas aninhadas de conteúdo. Os visitantes provavelmente voltarão às páginas anteriores sem verificar seu histórico.

Não há muitas alternativas para criar uma lista de links de breadcrumb. Você poderia usar uma lista ordenada para rastreadores de mecanismo de pesquisa entendem que há uma ordem para os links de menu, no entanto, como dito antes, provavelmente não fará muita diferença quando se trata de classificação no SERPS. Se você tiver necessidades mais complexas de breadcrumbs, como um título / descrição para cada link, é melhor utilizar o elemento de lista de definição.

Interface de usuário mais bonita baseada em lista

Sem entrar em muitos detalhes, é meu objetivo coletar uma fantástica configuração de elementos de interface baseados em listas. Isto é muito mais fácil dizer do que fazer - mas a Internet tem tantas opções para escolher! Há muito espaço para crescimento no domínio das listas HTML. Se você está morrendo por mais inspiração, confira a mini galeria abaixo com alguns exemplos fantásticos.

6wunderkinder

Um fantástico menu de navegação estilizado como elementos de botão.

Bolo bolo doce

Bolo Doce Bolo apresenta uma bela lista de imagens em miniatura contendo algumas deliciosas amostras de seus trabalhos de padaria.

Cheesemonger Invitational

O site Cheesemonger Invitational apresenta 2
elementos flutuantes para criar um menu de navegação. Parece realmente puro, de acordo com o gráfico do logotipo centralizado.

O editor de trezentos

Os links de mídia social na parte inferior do site do Editor de Threepenny são todos elaborados sob uma lista. Ele se encaixa perfeitamente em uma coluna do tema de layout de mãos e papel.

Le Tipi

Outro belo exemplo de menu de navegação estilizado com imagens e CSS.

Você sabe quem

Você sabe quem apresenta um efeito de design retro extravagante em seu site. A parte inferior da home page tem uma pequena lista ordenada que contém miniaturas do seu último trabalho de projeto.

MediaLoot

Uma lista não ordenada feita para os planos de inscrição do MediaLoot, parece promissora.

365psd

O 365psd oferece um novo modelo do Photoshop para download todos os dias. Em sua barra lateral, você encontrará uma lista de tags incorporadas em uma lista não ordenada. Isso parece perfeito em blogs e páginas de arquivos em que uma pequena lista de tags é apropriada.

Conclusão

Espero que esta galeria de listas criativas em HTML tenha lhe dado alguma inspiração para criar conteúdo de layout. Pode ser difícil encontrar uma ideia concreta para suas listas em páginas da Web, mas as listas de itens são uma grande parte do processo de design e oferecer relações construtivas entre tags de marcação e conteúdo.

Existem provavelmente dezenas de outras listas fantásticas encontradas na web, e com a crescente quantidade de web designers disponíveis, certamente veremos que esse número aumenta mais rápido do que nunca. Se você conhece algum ótimo site com ótimas listas HTML, sinta-se à vontade para oferecer os links em nossa seção de comentários abaixo. Além disso, se você adicionar qualquer um dos estilos listados acima em seu próprio site, adoraríamos conferir!
Traga os Menus do Office 2003 de volta para 2010 com o UBitMenu

Traga o menu Iniciar do Windows 7 para o Windows 10 com o Classic Shell

Ilumine o Firefox para os feriados