Home | Mais

Elementos Web

A maioria dos nossos conteúdos é publicado online e nossos elementos web também são muito importantes! Aqui você confere os principais.


A maioria dos conteúdos que produzimos são publicados online e devem ser padronizados, não só por questões de estilo, mas também por determinações em padrões internacionais da web, comumente setados pela W3C para linguagens como o HTML e o CSS.

Essas são linguagens padrão para a criação de webpages, sendo que a aplicação de suas boas práticas é essencial para resultados positivos em estratégias de SEO.

Aqui na Rock, essas práticas são levadas a sério e, por isso, incentivamos que todos os funcionários conheçam o básico dessas linguagens.

Essa seção falará sobre esses elementos, guiando o colaborador da Rock para uma boa linha de padronização.

Textos

Estilização básica

Você deve saber que, ao criar um texto para ser publicado na internet, é interessante se certificar que o mesmo seja bem escaneável, certo?

Um dos métodos que mais colaboram para que seu texto tenha uma boa escaneabilidade é o uso de cabeçalhos. Ele também permite que buscadores, como o Google e o Bing, identifiquem títulos e subtítulos em suas páginas.

Existem seis níveis de cabeçalhos no HTML, divididos do H1 ao H6. O H1 é usado para títulos; H2 para subtítulos; do H3 ao H6, usamos para demais tópicos de um texto. Veja o exemplo a seguir.

<h1>Título de uma página</h1>
<h2>Subtítulo de uma página</h2>
<h3>Subtítulo de terceiro nível</h3>
<h4>Subtítulo de quarto nível</h4>
<h5>Subtítulo de quinto nível</h5>
<h6>Subtítulo de sexto nível</h6>

Além de cabeçalhos, em um texto você possivelmente encontrará parágrafos comuns ou citações. Para cada blog da Rock Content são setadas orientações específicas para a criação desses parágrafos, porém eles geralmente aglomeram ideias sem serem grandes o suficiente para serem cansativos.

Para fazer o uso desses elementos usamos dois tipos de marcações. Veja os exemplos a seguir.

<p>A Rock Content é especialista em Marketing de Conteúdo.</p>
<blockquote>"Eu <3 Marketing de Conteúdo!"</blockquote>

Quanto a cores, tamanhos e famílias de fontes, não recomendamos sua alteração em artigos comuns. O ideal é que, ao perceber que o site ou blog apresente a necessidade da troca de fonte, seja requerida uma mudança na página de estilos (CSS) mestre do site, organizada por um programador.

Listas

Listas são usadas para apresentar passos, grupos ou conjuntos de informação. Sempre dê um contexto para sua lista, com uma breve introdução.

As listas podem ser numeradas ou não. Porém as numere somente quando a ordem de seus elementos realmente importar.

Para separar seus itens utilize ponto e vírgula (;) e finalize com ponto final (.), exceto em índices. Use letra maiúscula em todo início de tópico.

No HTML, listas são criadas a partir das tags li, ol (numeradas) e ul (não numeradas). Veja os exemplos a seguir.

Lista não-numerada:

  • Exemplo 1;
  • Exemplo 2;
  • Exemplo 3.
<ul>
<li>Exemplo 1;</li>
<li>Exemplo 2;</li>
<li>Exemplo 3.</li>
</ul>

Lista numerada:

  1. Exemplo 1;
  2. Exemplo 2;
  3. Exemplo 3.
<ol>
<li>Exemplo 1;</li>
<li>Exemplo 2;</li>
<li>Exemplo 3.</li>
</ol>

Também é um interesse comum na nossa produção de conteúdos listar os subtítulos de um artigo, formando um índice linkado. Para criar esse tipo de índice, indicamos a leitura do post especial de índices.

Formatação

Quando usamos negrito, itálico, sublinhado ou qualquer outro elemento que seja inline, ou seja, que fique dentro de linhas ao invés de blocos, é necessário que seja respeitado o limite da palavra.

Muito complicado? Veja os exemplos a seguir.

"A Rock Content é especialista em Marketing de Conteúdo."

Repare que o negrito não abrange o ponto final da frase. Essa divisão é importante pois o elemento destacado é "Marketing de Conteúdo", e não "Marketing de Conteúdo.".

Quando o destaque é para o parágrafo inteiro, todos os elementos da frase entram nas tags de estilo, como no exemplo a seguir.

"A Rock Content é especialista em Marketing de Conteúdo."

Nesse caso o ponto final (.) recebeu a estilização do negrito.

Links

Links também são elementos inline e, quando estão dentro de parágrafos, não abrangem pontuações que estão ao seu redor.

Para se criar um link, usamos obrigatoriamente os elementos href e title para setar, respectivamente, o endereço e o título de um link. Quanto aos títulos, é importante que o mesmo seja bem descritivo e contenha apenas uma frase.

Caso necessite que um link abra em uma nova aba, utilize o complemento target="_blank". Veja os exemplos a seguir.

Link que abre na mesma aba:

<a href="LINK" title="TITULO DO LINK">TEXTO LINKADO</a>

Link que abre numa nova aba:

<a href="LINK" title="TITULO DO LINK" target="_blank">TEXTO LINKADO</a>

Imagens

As imagens da Rock Content remontam sua identidade visual e fazem conexão com o meio (site, blog, redes sociais etc.) em que estão distribuídas. Além desses meios, também dispomos de diversos canais (Marketing de Conteúdo, Saia do Lugar etc.), portanto, as imagens de cada uma dessas combinações têm diferentes contextos, mas todas devem respeitar as regras básicas a seguir.

Quanto às especificações técnicas, todo o material divulgado online deve ser salvo com cores RGB e densidade de 72 DPIs. Quanto aos formatos, usamos principalmente JPG, PNG e SVG.

  • JPG - Em casos que a imagem não requer transparência;
  • PNG - Em casos que a transparência se faz necessária ou que uma imagem bitmap precisa apresentar uma qualidade superior ao JPG;
  • SVG - Para logotipos;

Deve-se priorizar sempre o uso de imagens leves e que sejam acessíveis.

Alt text

O Alt text deve ser aplicado a todas as imagens que são publicadas no nosso ambiente online, mas especificamente em sites e blogs.

Essa é uma maneira de garantir que os mecanismos de buscas entendam o que determinada imagem mostra, bem como ajudar pessoas que possuem problemas visuais a entender o que cada imagem representa.

O Alt text deve descrever a imagem em até duas frases (aproximadamente 300 caracteres). Para mais informações sobre o uso do alt text, acesse sua seção.

Especificação técnica dos vídeos

Os vídeos da Rock Content são comumente publicados através do YouTube ou Vimeo, portanto as regras para o uso desse elemento variam de acordo com a plataforma de publicação.

É ideal, entretanto, que a largura de um player de vídeo ocupe 100% do elemento em que o vídeo se encontra. A autorreprodução não é indicada e os botões para controle do vídeo devem sempre estar bem destacados.

Quanto às especificações técnicas, seguem os padrões:

1080p
Resolução: 1920 x 1080
Taxas de bits do vídeo
Máxima: 6000 Kbps
Recomendada: 4500 Kbps
Mínima: 3000 Kbps

720p
Resolução: 1280 x 720
Taxas de bits do vídeo
Máxima: 4000 Kbps
Recomendada: 2500 Kbps
Mínima: 1500 Kbps

Configurações do codificador

Codec de vídeo: H.264, 4.1
Frame rate: de preferência 30fps
Frequência de keyframe: não exceder 4 segundos
Codec de áudio: AAC ou MP3
Codificação de taxa de bits: CBR

Proporção de pixel: Quadrada
Tipos de frames: Verificação progressiva, dois quadros B, um quadro de referência
Codificação de entropia: CABAC
Taxa de amostragem de áudio: 44.1 KHz
Taxa de bits de Bitrate de áudio: 128 Kbps estéreo

Outros elementos

Botões

Botões devem sempre apresentar ações e não devem ter mais que uma frase. A linguagem deve ser clara e concisa, evitando rodeios. A primeira letra deve ser sempre maiúscula.

Formulários

Os formulários devem ser concisos e devem contar com introduções que os expliquem. Nunca pergunte por informações que sejam de cunho pessoal, como o gênero de nossos visitantes.

Tags para Redes Sociais

As tags Open Graph existem atualmente para que plataformas de Mídias Sociais mais famosas, como Facebook e Twitter, consigam enxergar o conteúdo de uma página de maneira organizada e com o máximo de detalhes possível.

Veja o exemplo a seguir:

<!-- Facebook e LinkedIn -->
  <meta property="fb:app_id" content="XXXXX">
  <meta property="og:title" content="TÍTULO">
  <meta property="og:site_name" content="NOME DO SITE">
  <meta property="og:url" content="URL DA PÁGINA">
  <meta property="og:description" content="DESCRIÇÃO">
  <meta property="og:type" content="website">
  <meta property="og:image" content="IMAGEM DE COMPARTILHAMENTO" />
<!-- Twitter -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:site" content="@PERFIL_NO_TWITTER">
  <meta name="twitter:creator" content="@PERFIL_NO_TWITTER">
  <meta name="twitter:title" content="TÍTULO">
  <meta name="twitter:description" content="DESCRIÇÃO">
  <meta name="twitter:image" content="IMAGEM DE COMPARTILHAMENTO">

É importante observar que descrições têm o limite de 260 caracteres.

Uso de imagens e referências em cada canal

O nosso campo de atuação é bem amplo, e existem diversos canais pelos quais nos comunicamos com o nosso público. Sendo assim, é importante que os elementos visuais apresentem uma unidade para que a nossa marca seja facilmente reconhecida. Um estudo realizado pela Ethos3 – We Live In A Visual World – apontou que uma pessoa retém, em média, 80% do que vê. Sendo assim, é primordial que haja uma atenção especial com a forma como o público enxerga a nossa marca.

Para a nossas comunicação, adotamos uma linguagem de ilustração vetorial que flerta com o "flat design” por sua simplicidade. Porém nos valemos de sombras e degradês para gerar profundidades e texturas.

Acreditamos que esse tipo de interferência dá ao nossos materiais um ar autêntico e sofisticado. Pensando em uma comunicação direta com diversas personas, evitamos o uso de elementos muito infantilizados. Os elementos geralmente são destacados e ajudam a ilustrar o título (que também aparece na imagem). Tentamos manter os elementos simples, quase icônicos, pois é importante que sejam facilmente reconhecidos e memorizados pelo público.

Procuramos variar as cores das imagens dos posts para que eles sejam facilmente distinguíveis. Não seguimos uma escala de cores específica nesse caso.

É importante frisar que  produção destas ilustrações são autorais. Utilizamos moderadamente o banco de imagens freepik.com para otimizar o tempo com elementos mais complexos, mas ainda assim fazemos alterações para customizar o material e deixá-lo mais próximo do nosso estilo.

Sempre buscamos referências no que vem sido produzido pela Google através do Google Material Design, em seus blogs e em sua comunicação interna. A rede social para artistas Dribbble também é fonte de inspiração diária.

Essas imagens ilustram nossos posts do blog Marketing de Conteúdo e capas de ebooks. As mesmas imagens aparecem também nos compartilhamentos em redes sociais e landing pages (por meio de automações). Variações com um CTA também são geradas.

Para demais imagens — como animações, eventos, divulgações de webinars, palestras, lives no Facebook, ações pontuais etc. — procuramos não destoar tanto da linguagem descrita posteriormente, mas como nesses casos às vezes lidamos com fotos reais, temos um pouco mais de liberdade para criação, como pode ser visto nos exemplos a seguir.

Evitamos utilizar muitas cores e degradês em animações pois estas interferência aumentam muito o tamanho do arquivo.

Para o blog Saia do Lugar, a linguagem adotada é completamente diferente. Utilizamos fotografias reais encontradas em bancos de imagens gratuitos (como o JumboPic) ou no banco pago depositphoto.com. Procuramos tratar levemente as fotos com um filtro reduzindo um pouco a saturação.


Outros capítulos dessa seção:

  1. Elementos Web
  2. Manual da Marca
  3. Dicionário