|
Audio
|
Uma página web, no fritar dos ovos, é um emaranhado de tags estruturais e semânticas.
Através dessas tags definimos a disposição do layout, organizamos os elementos da interface, aplicamos meta-informações e damos significado semântico aos dados.
O cabeçalho da página engloba informações destinadas a dispositivos, robôs e sistemas diversos.
As tags para Mobile First são um exemplo.
Isto é, temos várias especificações que não são percebidas por quem navega nas páginas, mas são consumidas em situações diversas.
Os dois tipos mais comuns de tags
As tags meta e link são as mais utilizadas ao desenvolvermos projetos mobile.
Combinada com atributos e valores variados, as possibilidades são diversas.
Esses tipos de tags são armazenadas no cabeçalho das páginas HTML.
Logo, não são visualizadas, mas seus reflexos são perceptíveis em diversas situações.
Head versus heading
O cabeçalho das páginas HTML é definido através da tag head.
Já o conjunto de tags que definem a hierarquia de títulos são os “headings”, ou seja, os cabeçalhos.
Dado a proximidade de tradução dessas duas palavras, head e heading, é preciso saber diferenciar.
Head é a tag <head>, irmã da tag <body>.
As headings são as tags de títulos, ou seja, <h1>, <h2>, <h3> … até <h6>.
Portanto, as tags para mobile first estão no cabeçalho, ou head, das páginas HTML.
Elas são utilizadas para as tratativas da responsividade, implementação de PWA, AMP, Open Graph e várias outras tecnologias.
O WordPress, de forma nativa, considera algumas inserções. E outras podem ser feitas através de plugins.
Tags link para mobile first
Considerando as tags do tipo <link>, as mais comuns para o mobile first, são utilizadas para:
- Definir o endereço do manifest para PWA;
- Determinar o endereço dos “favicons” para mobile;
- Estabelecer os endereços dns-prefetch para ajudar no carregamento antecipado de arquivos;
- Indicar o endereço da versão AMP da página.
Tags meta para mobile first
As tags do tipo <meta>, mais comumente utilizadas em projetos mobile first, são utilizadas para:
- Definir o endereço da versão para o Facebook Instant Article;
- Indicar o view port;
- Determinar o theme color desejado;
- Estabelecer as tags Open Graph para melhorar e ter mais controle nos compartilhamentos da página;
- Estabelecer tags Twitter Card para melhorar e ter mais controle nos compartilhamentso no Twitter.
Conclusão
O uso de tags para mobile first é uma forma de irmos além do design responsivo.
É uma camada para personalizar a experiência dos usuários com o nosso projeto em dispositivos móveis.
Considere conhecer, e claro, fazer uso dessas tags e garantir aos seus usuários uma melhor performance, integração social e controle sobre a forma como os conteúdos são compartilhados socialmente.
Comments 1