Um dos grandes desafios em trabalhar com web é acompanhar as novidades tecnológicas que aparecem e desaparecem, se renovam e superam em uma velocidade impressionante. Há tantas ferramentas e plataformas que se multiplicam todos os dias que é difícil conhecer todas (talvez humanamente impossível também). Mas estar atento às dicas essenciais já basta para se manter atualizado o suficiente. Confira algumas dicas de web design que se destacam entre a multidão de novidades:

HTML 5

01. Escolha um estilo de código

O HTML5 permite que a marcação seja escrita em maiúsculas, minúsculas ou uma mistura delas. Além disso, ninguém é obrigado a criar todos os atributos em elementos como <img>. Você pode até omitir o atributo type quando usar <style>, <link> ou <script>. O estilo é uma escolha sua, mas se está trabalhando com uma equipe, verifique se todos estão em sintonia. E ainda há um número de elementos e atributos que estão ultrapassados em HTML5, como<big>, <center> e <font>. Melhor deixá-los para lá.

02. Leia as specs

As especificações são uma parte importante. A versão de HTML5 é mantida tanto pela WHATWG (o principal padrão de especificação e a W3C (HTML5). Se você não tem certeza sobre qual especificação ler, o especialista Oli Studhilme escreveu um pouco sobre o assunto no HTML5 Doctor (leia aqui). Ler as specs é a única maneira de entender, de fato, alguns elementos e APIs. Elas também contribuem para uma leitura rápida sobre os fundamentos para projetar HTML5.

03. Planeje sua marcação

Depois de ler as especificações, você entenderá melhor a estrutura de um documento, com os Document Outlines (saiba mais aqui). Pense neles como o equivalente às visualizações de documentos do Microsoft Word. Usar o conceito de documento outline vai ajudar a criar uma marcação bem estruturada. No processo de criação do design, é possível criar uma lista alinhada à página, o que vai obrigá-lo a pensar os níveis de títulos que devem ser usados e quais elementos serão colocados em cada lugar. Por isso, ter blocos de conteúdo organizados faz toda a diferença.

04. Escolha o elementos certo

Falamos antes sobre elementos que estão ultrapassados na quinta versão do HTML. Mas não se preocupe, ainda há 30 novos elementos que foram adicionados e muitos outros que ainda serão definidos. Por isso, pode ser difícil escolher o elemento certo para cada projeto. Para resolver voltamos à premissa de usar um elemento para descrever o significado do conteúdo, e não a sua aparência. Pense com cuidado sobre o significado disso antes de adicionar elementos. Consulte de novo o HTML5 Doctor para ajudar a escolher os certos.

05. Guerra de codecs

Você já deve ter ouvido falar que o HTML5 vai matar o Flash. Isso tem se espalhado largamente por conta do vídeo e áudio em HTML5. Não ter que depender de plug-ins para executar conteúdo de mídia é um grande passo para uma web aberta, mas ter que lidar com tecnologias competitivas não é. Quando criar conteúdo multimídia para o seu site codifique seus arquivos múltiplas vezes e inclua opções para browser com capacidades inferiores. Um artigo de Kroc Camen chamado ‘Video for Everybody” (Vídeo para todos) é um ótimo começo sobre como lidar com isso (acesse o artigo aqui).

CSS

01. Crie soluções independentes

Desenvolva qualquer efeito de CSS, 3D, rolagens ou transições fora do documento principal. Assim, é possível criar uma solução individual e organizada que poderá até ser usada depois em outros projetos. Fazer experimentos desorganizados dificulta a verificação caso alguma coisa não esteja funcionando como esperado.

02. Ordem relevante

Todo mundo sabe que tentar editar códigos CSS de outra pessoa é complicado. Sempre use múltiplas linhas CSS com as declarações ordenadas por relevância. Dessa forma, seu código poderá ser entendido por você ou qualquer outro envolvido no projeto.

03. Saiba seu papel

Mantenha classes bem focadas nas suas funções. Cada classe deve ter uma única responsabilidade, totalmente contida dentro dela. Deixe todos os atributos envolvidos nessa função em vez de tentar atribuir múltiplas responsabilidades.

04. Nomes

Use hífen nos seletores de nomeação. Por exemplo: isto-eh-bom{}, isto_eh_ruim{}, istoEhMuintoRuim{}. Isso ajuda a manter o seletor de nome legível e geralmente mais simples.

05. Prefixos

Os prefixos de fabricantes de navegadores devem desaparecer quando o CSS3 se tornar um padrão e for adotado pelos browsers. Por enquanto, use todos os prefixos onde são aplicáveis. Sempre termine com uma declaração genérica, sem prefixo.

Responsivo

01. Significado

Por definição, um web site responsivo usa layouts flexíveis e media queries para moldar e adaptar-se ao seu ambiente de visualização. É importante notar que o web design responsivo não é nem um nem outro. Você deve encontrar harmonia em ambas as técnicas e quando o fizer, irá criar layouts responsivos da melhor maneira.

02. Media queries

Os seus breakpoints de media query devem ser escolhidos de acordo com as necessidades do seu site. Há muitas resoluções de telas e não se deve incluir os breakpoints para todas as variações existentes. Há muitas resoluções de telas na tentativa de realizar isso. Comece com resoluções bem básicas de dimensões e adicione a elas breakpoints de acordo com as necessidades do seu projeto.

03. Mobile-first

Em resumo, mobile first significa desenvolver para telas pequena primeiro e depois para desktops. Isso vai contra a abordagem tradicional no qual web designers precisam ter um site no desktop e depois cortar alguns bits para conseguir um site mobile. As restrições de plataforma fazem com que você trabalhe a hierarquia do conteúdo, então essa abordagem é perfeita para design responsivo.

04. Derrube pixels

Elimine atributos com declarações fixas de pixel em HTML e no seu CSS. Imagens, em particular, precisam carregar e a melhor forma de fazer isso é declarar a porcentagem de tamanho no elemento <img>. Também é sábio criar classes CSS com tamanho em percentual, então você pode simplesmente incluir <img> ou outras tags  HTML.

05. Confie no JavaScript

Às vezes você tem pouco controle sobre a marcação do seu site. Isso só não acontece quando você está construindo um tema para CMS como WordPress, por exemplo. Escrever um script para remover um tamanho fixado ou atributos de estilo de tags HTML é fácil e rápido em um jQuery. Use e abuse. Isso vai garantir que o seu conteúdo será fluído.

SEO

01. Tags únicas

Use tags de títulos únicos e descrições para cada página do seu website, o que é óbvio para muita gente, mas é importante. Tente incluir suas palavras-chave de SEO enquanto cria textos. Mantenha as tags de títulos com no máximo 70 caracteres e as descrições cm pelo meno 155. Não use meta palavras-chave, elas ajudam concorrentes a encontrarem suas palavras.

02. 301 redirecionamentos

Se mudar para um novo websites ou URL use o recurso 301 redirecionamentos para novas páginas. O mesmo vale para quem tem múltiplos domínio: use apenas um como principal e redirecione os outros. Isso vai gerar backlinks e evitar a duplicação. Serviços com o Open Site Explorer ou Majestic SEO podem ajudar.

03. Link interno

Faça bom uso de links internos. Quando se cria um bom visual para um site, às vezes, esquecemos quais páginas são importantes e como referenciá-las. Garanta que seus links internos irão suportar as páginas mais importantes.

04. Use microdata

Tire vantagem de cada pedaço do Google usando microdados. Já viu estrelas de classificação em uma lista orgânica? Esse é um exemplo ótimo que pode melhorar suas taxas de cliques. Você pode acompanhar estimativas, vídeos, pessoas, produtos e muitas outras coisas. Viste schema.org para saber mais.

05. Pensamento social

Mecanismo de busca estão valorizando sinais sociais, então abuse de redes sociais. Tenha certeza de que sue conteúdo será fácil de compartilhar e promover. Concentre-se em conseguir compartilhamento e retuítes, em vez de apenas conseguir mais seguidores e “curtir”.