Você precisa ir além do Design Responsivo em projetos WordPress

Design Responsivo e Mobile First, na prática, são a mesma conversa. Design Responsivo virou commodity há muito tempo. Mobile First deixou de ser tendência e virou premissa de arquitetura. Quem ainda trata os dois como “projeto futuro” está discutindo o piso, não o teto.

Aqui na Apiki, a divisão que vemos no mercado é simples: algumas empresas anteciparam o movimento e usaram a dianteira para fazer melhores negócios. Outras só começaram a correr quando viram o tsunami chegando, ou depois que ele passou por cima. A diferença raramente é orçamento. É decisão técnica tomada no momento certo.

Vale um marco histórico: o Google entrevistou dezenas de executivos de marketing e agências sobre prioridades e perspectivas para 2017, e isso resultou nas “5 questões que os profissionais de marketing devem se fazer em 2017”. A última era “Is my organization building for the mobile screen first?”. Considere a leitura das cinco. A pergunta continua boa. O que mudou é que hoje ela não é mais estratégica, é operacional.

O que é Design Responsivo

É o conceito de desenvolvimento que faz a interface e a experiência do usuário se moldarem aos variados tamanhos de tela dos dispositivos.

Com a implementação do Design Responsivo você mantém um único site, uma única gestão de conteúdo, uma única URL e o mesmo HTML para todos os dispositivos: computadores, tablets, celulares, leitores de tela e qualquer outra coisa.

O CSS detecta o tamanho da tela e adapta a renderização ao formato do dispositivo em questão.

O conceito é commodity. Todo desenvolvimento para a web, no mínimo, deve considerar sua implementação.

Responsivo não é o mesmo que “site mobile separado”

Essa confusão ainda aparece em briefing de projeto, então vale a distinção em uma linha. No Design Responsivo existe um site só, codificado para se adaptar a qualquer tamanho de tela. No modelo de site móvel separado existe uma segunda entidade, construída para dispositivos específicos e não para tamanhos de tela.

A consequência é operacional, e é aí que dói para quem gerencia a máquina:

• Duas bases de conteúdo. Cada publicação precisa ser pensada, revisada e monitorada duas vezes. Com equipe de marketing e múltiplos editores, isso multiplica o gargalo de aprovação.

• Duas superfícies de erro. Dois templates, dois conjuntos de plugins, dois pontos de quebra. O chamado dobra.

• Risco de SEO. URL única facilita o rastreamento e reduz a chance de erro on page. Site separado abre frente para conteúdo duplicado, gestão de canonical e cadeia de 301 que ninguém quer manter.

Não é preferência estética. É custo de manutenção e risco de indexação.

Responsivo se adapta ao dispositivo que ainda não existe

A vantagem estrutural do responsivo é que o layout é projetado a partir do tamanho de tela, não do aparelho. Isso significa que o site continua se comportando bem em telas que não estavam no radar quando o projeto foi entregue: TVs, wearables, o que vier. Site mobile separado envelhece por dispositivo. Site responsivo envelhece por decisão de arquitetura.

O que é Mobile First

Mobile First é o conceito aplicado em projetos web onde o foco inicial da arquitetura e do desenvolvimento é o dispositivo móvel, e só depois o desktop.

A diferença entre responsivo e Mobile First não é de ferramenta, é de ordem. Responsivo pode ser um desktop encolhido. Mobile First é a decisão de definir prioridade de conteúdo, peso de página e hierarquia de interação partindo da tela menor e da conexão pior. Não é layout. É orçamento de performance.

A técnica se popularizou entre profissionais de marketing e tecnologia por um motivo direto: os números sobre Mobile no Brasil são expressivos.

Os números sobre Mobile no Brasil

Temos um número de conexões mobile no Brasil maior do que a população. As vendas de desktop caem ano após ano. As de dispositivos móveis crescem mês após mês.

Alguns recortes que circulavam quando o debate se consolidou, e que ajudam a dimensionar o movimento: em 2015, mais da metade das pesquisas no Google já vinham de dispositivo móvel; segundo o e-Marketer, 56% dos internautas brasileiros acessavam a internet por dispositivo móvel e 93% dos usuários de mobile no Brasil usavam redes sociais pelo aparelho; e 61% das pessoas declaravam ter melhor opinião sobre marcas que oferecem boa experiência móvel. São dados da época, e a direção da curva desde então só se acentuou.

Diversas atividades cotidianas acontecem no mobile: mensagens trocadas, vídeos assistidos, games jogados, transações bancárias efetuadas, mapas consultados e várias outras. Se o seu site é crítico para o negócio, ele é consumido primeiro em uma tela pequena, muitas vezes em rede instável.

O custo de errar a experiência móvel

O Google’s Think Insights para dispositivos móveis apontou que, quando o usuário se frustra no site móvel ou não encontra o que procura, há 61% de chance de sair imediatamente e ir para outro site. Provavelmente o de um concorrente.

Some a isso a distribuição: se a operação de conteúdo e social já leva tráfego móvel para o site, cada link compartilhado que cai em uma página mal adaptada vira taxa de rejeição alta, conversão baixa e público irritado. Você paga pela mídia e entrega a sessão para o botão de voltar.

Velocidade é parte do design, não um ajuste no fim

A recomendação clássica dos desenvolvedores do Google PageSpeed já era clara: o conteúdo acima da dobra em dispositivo móvel deveria carregar em menos de 1 segundo, e a página inteira em menos de 2 segundos. Carregar um site pensado para desktop dentro de um celular normalmente não chega perto disso.

Hoje essa conversa tem nome e medição pública: Core Web Vitals. LCP para o tempo até o maior elemento visível renderizar, CLS para estabilidade visual, INP para a resposta da interface à interação. Antes deles, TTFB, que expõe a camada de servidor, cache e edge. É a mesma exigência de 2015, agora com métrica de campo em vez de opinião.

O ponto de gestão é este: performance móvel não se resolve com plugin no fim do projeto. Ela se decide na arquitetura do tema, no peso do JavaScript de terceiros, na estratégia de cache e na hospedagem. Não é plugin. É arquitetura.

Qual a grande dificuldade em adotar o conceito

Mindset.

Constatamos isso na prática, em horas de bate-papo, milhares de milhas percorridas e visitas a mais de 130 agências digitais pelo Brasil inteiro em 2016. Uma experiência enriquecedora.

Percebemos que boa parte dos profissionais envolvidos em projetos digitais ainda tinha dificuldade em pensar a solução partindo do mobile. O desenho nascia no desktop e o mobile virava adaptação. A imagem abaixo ilustra a maneira correta de pensar e aplicar o conceito.

Em times com equipe de marketing estruturada, o mindset esbarra em outro obstáculo: fila. A campanha depende de uma landing page, a landing page depende da TI interna, e a TI interna tem outra prioridade no board. O conceito não falha por desconhecimento. Falha por falta de capacidade de execução.

O surgimento de novas tecnologias e recursos

Com todo mundo caminhando para a direção mobile, foi natural o surgimento de tecnologias específicas para esse cenário.

No lado do Google, Accelerated Mobile Pages e Progressive Web Apps. O AMP nasceu para entregar páginas móveis muito mais rápidas que o padrão da época, e foi adotado também por Twitter, LinkedIn, Pinterest e outras plataformas.

No lado do Facebook, o Instant Article, que segundo a própria rede social entregava artigos 10x mais rápidos que sites móveis padrão, com 20% mais leitura e taxa de abandono 70% inferior.

Parte desse arsenal envelheceu, e alguns desses formatos perderam protagonismo. O princípio por trás deles, não. A promessa era sempre a mesma: reduzir peso, cortar bloqueio de renderização e entregar conteúdo rápido em rede ruim. Hoje essa promessa se cumpre dentro do próprio site, com Core Web Vitals medidos em campo, e não em um formato proprietário de terceiro.

O que isso significa para quem opera um site WordPress em escala

Design Responsivo entrega adaptação. Mobile First entrega prioridade. Nenhum dos dois entrega ritmo. E ritmo é o que trava a operação de marketing.

Na prática, o que vemos em times de mid-market e enterprise:

• O tema é responsivo, o conteúdo novo não é. Cada bloco publicado por um editor diferente reintroduz imagem sem otimização, embed pesado e quebra de layout em viewport pequeno. Sem checklist e sem revisão, o site regride a cada publicação.

• Scripts de terceiros comem o ganho. Tags de mídia, chat, teste A/B e pixel entram por decisão de marketing e saem no INP. Governança de tags é tão determinante quanto o código do tema.

• Ninguém mede depois do go live. O projeto é entregue dentro da meta e degrada em silêncio nos meses seguintes. Sem monitoramento contínuo de Core Web Vitals, a queda só aparece quando o tráfego cai.

• A fila entre marketing e TI vira o gargalo real. Não é o conceito que atrasa a campanha. É o ticket parado.

É por isso que tratamos manutenção de WordPress como operação contínua, não como projeto com data de entrega. Medimos. Testamos. Validamos. Escalamos.

Conclusão

Mobile First não é mais o próximo passo. É a linha de base. O próximo passo é sustentar o resultado com medição contínua, orçamento de performance e uma operação que publica sem depender da fila interna de desenvolvimento.

Em fevereiro de 2017 lançamos o novo site da Apiki com o conceito de Mobile First. Desde então, a régua subiu: hoje o critério não é “o layout se adapta?”, e sim “os Core Web Vitals se sustentam em campo, publicação após publicação?”.

Se o seu site é crítico para o negócio e você não sabe responder essa segunda pergunta com dado, é um bom momento para um diagnóstico da operação WordPress. Fale com nosso time.

Como estão suas iniciativas para esse cenário? Conte para a gente nos comentários.