Os temas responsivos do WordPress para empresas são a escolha certa?

temas de wordpress responsivos para negócios

Há alguns anos, quando o Google anunciou que a compatibilidade com dispositivos móveis é um fator de classificação, o design móvel ou responsivo da web não é mais uma questão secundária para sites de pequenas e médias empresas.

Os dispositivos móveis hoje representam uma proporção significativa do tráfego da web (53% em 2019).

As empresas que oferecem uma experiência ruim aos usuários móveis correm o risco de perder clientes e receita. Existem várias maneiras de fornecer uma boa experiência móvel, mas projeto ágil é a melhor escolha para PMEs que usam WordPress.

Este tipo de design é less caro, oferece uma experiência unificada e marca coesa em todos os dispositivos, e é melhor para SEO - o design mobile-first é a estratégia de otimização mobile preferida do Google. (Até mesmo seus rastreadores olham para um site a partir de um dispositivo móvel).

1. O que é design responsivo e como ele afeta os temas empresariais do WordPress?

Se você ainda não está familiarizado com o conceito, aqui está uma explicação resumida: é um design que usa consultas de mídia CSS e um design de grade proporcional para alterar a maneira como as páginas aparecem, dependendo do tamanho do dispositivo.

Por exemplo, os elementos que abrangem uma página horizontalmente em um navegador de desktop serão empilhados verticalmente em um navegador de smartphone. As imagens e o tipo são redimensionados para refletir o tamanho da tela do dispositivo.

No centro do design responsivo estão as consultas de mídia CSS.

As folhas de estilo CSS são usadas para controlar a aparência de uma página da web: as cores que ela usa, o layout da página, sua tipografia e assim por diante. As consultas de mídia permitem que um designer aplique seletivamente as regras CSS apenas quando uma determinada condição for atendida. (ou seja, se o tamanho de uma tela se parecer com uma tela de celular, aplique designs apropriados para telefones celulares, mas se for maior, aplique designs para telas maiores ...).

Felizmente, você pode ver como isso é útil para criar designs variados para diferentes layouts de tela. As consultas de mídia permitem que um desenvolvedor diga, por exemplo, se a janela do navegador da web tem uma largura específica, um conjunto específico de regras deve ser aplicado.

Uma consulta de mídia típica se parece com isto:

.my container {
width: 800px;
}
@media (largura máxima: 600px) {
.my_container {
width: 500px;
}
}

No exemplo acima, a largura padrão da classe .my_container é definida como 800px.

Obviamente, não queremos que seja tão largo em um dispositivo mais restrito, então usamos uma consulta de mídia.

A consulta de mídia aqui especifica uma condição - se a largura horizontal do navegador for 600px ou less, a largura de .my_container deve ser 500px. Se for acionado pela condição ser verdadeira, as regras na consulta de mídia têm precedência sobre a regra "padrão".

O design responsivo para temas de negócios explora esses recursos do CSS para alterar a apresentação das páginas da web, dependendo do tamanho da tela do dispositivo, do tamanho da janela do navegador, da orientação do dispositivo e de muitos outros fatores.

2. Estruturas de design responsivo

Unless você já está familiarizado com CSS - e mesmo se estiver - você pode não gostar da ideia de escrever consultas de mídia para todos os aspectos do seu tema WordPress de negócios responsivo, que é onde as estruturas de design entram em jogo.

Uma estrutura de design responsivo cuida de grande parte da complexidade de criar um site que atende a telas de tamanhos variados.

A estrutura de design mais popular é Bootstrap - com as versões de v3.0 em diante totalmente voltadas para dispositivos móveis. O Bootstrap inclui um grande número de recursos que não nos preocupam aqui, mas a chave para a implementação da capacidade de resposta do Bootstrap é sua grade.

Leitura recomendada: Como converter PSD em tema WordPress usando Bootstrap em 5 etapas: um tutorial e Elementor vs Divi - que vale mais o dinheiro?

Em vez de pedir que você escreva suas próprias consultas de mídia, o Bootstrap implementa um sistema que divide uma página HTML em uma grade de linhas e colunas. Em vez de escrever consultas de mídia, os usuários anexam classes ao HTML do tema do WordPress para dividir a página de acordo com a grade.

Para dar um exemplo trivial, pense em uma página da web de duas colunas.

Em telas grandes, queremos que as colunas sejam exibidas uma ao lado da outra. Em telas pequenas, queremos que eles sejam empilhados uns sobre os outros.

design de negócios responsivo em duas colunas

 

Nosso HTML seria assim:

  Esta é a coluna um


Esta é a coluna dois

Com o CSS do Bootstrap Grid incluído na página, esse HTML criaria o layout que estamos procurando.

Quando a página é carregada em uma janela menor do que a especificada para as consultas de mídia embutidas do Bootstrap para colunas médias, elas se empilham umas sobre as outras em vez de estender a página.

Você pode ver exemplos mais complexos de como isso funciona no Documentação de bootstrap.

O Bootstrap não é a única estrutura que fornece uma grade desse tipo; na verdade, existem dezenas, variando de estruturas abrangentes de design da web como Bootstrap e Fundação, para estruturas de grade leves como Simple Grid que não contêm nada além da grade.

Uma abordagem alternativa tem se tornado cada vez mais popular nos últimos anos, uma que contém todas as alterações de marcação para CSS (ou SASS), em vez de encher as páginas HTML com marcação não semântica.

SASS sistemas de grade de design responsivo como Susy e Bourbon Neat alavancar o poder de SASS para criar estruturas que mantêm o código do layout da página onde deveria estar - nos arquivos CSS, permitindo um HTML mais limpo.

A escolha dos desenvolvedores é uma questão de gosto e experiência, mas pessoalmente preferimos SASSsistemas de grade baseados em dados que me permitem escrever páginas da web semânticas que não estão cheias de nomes de classes não-semânticos e aninhamento excessivo de div.

3. Estruturas de tema de design responsivo

Frameworks como Bootstrap e Foundation são ótimos para web designers, mas não ajudam muito os desenvolvedores do WordPress que buscam uma vantagem inicial na construção de novos modelos.

Felizmente, existem muitos frameworks de tema WordPress responsivos que fornecem uma base pré-construída.

1. Gênese

genesis framework para temas de wordpress de negócios

Genesis é um framework de tema extremamente popular da StudioPress (que revisamos completamente aqui) Embora seja voltado mais para desenvolvedores WordPress experientes do que novatos, não é muito difícil entendê-lo se você tiver um conhecimento superficial de PHP e CSS.

Genesis é um design pai a partir do qual é possível criar qualquer número de temas filhos. Se você preferir comprar temas filhos prontos para uso e personalizá-los, o StudioPress oferece muitos temas filhos diferentes adequados para todos os tipos de sites.

Além desse tema, muitas vezes apresentamos temas WordPress altamente avaliados para que você possa tomar uma boa decisão se deseja comprar ou não.

2. Themify Builder

tema de negócios simples por themify

Se você não é um gênio do PHP e CSS, talvez queira considerar um plug-in de construtor de modelo como o Themify.

Em vez de fazer você arregaçar as mangas e mergulhar no código, o Themify Builder oferece uma interface intuitiva de arrastar e soltar para criar temas WordPress totalmente responsivos. Com o Themify, você pode escolher entre uma variedade de temas predefinidos ou criar o seu próprio do zero.

Themify abstrai todos os detalhes de implementação subjacentes ao web design para diferentes tamanhos de tela, tornando mais fácil colocar seu site em funcionamento rapidamente.

3. Componentes

gerador de temas de componentes

Componentes foi uma ótima solução para a criação de temas WordPress responsivos e personalizáveis ​​da Automattic, a empresa por trás do WordPress.com.

Para usar os componentes, você simplesmente escolhe um layout da lista - blog clássico, site de negócios, portfólio, entre outros - e o site dos componentes cuspirá um SASSmodelo baseado em dispositivos móveis e menus para desktop e dispositivos móveis.

Infelizmente, os componentes foram descontinuados.

4. Divi

Divi, que também mencionaremos a seguir como um dos principais temas do WordPress para uso comercial, começou como um tema.

Eventualmente, ele evoluiu para se tornar um tema, um construtor de páginas de arrastar e soltar e agora, com seus últimos lançamentos, também um construtor de tema completo. Neste ponto, Divi é uma estrutura de tema WordPress completa que pode ser usada para criar qualquer tipo de tema que você precise, com sua grande variedade de ferramentas.

4. Temas responsivos de WordPress para negócios

Se você preferir simplesmente comprar algo pronto para o seu negócio, você tem milhares para escolher, alguns melhores do que outros. A capacidade de resposta é vista como um recurso "obrigatório" no mercado de temas do WordPress, e quase todos os desenvolvedores afirmam que seu produto é responsivo. No entanto, esse recurso pode ser complicado e até mesmo desenvolvedores experientes podem ter problemas com sua implementação adequada.

Antes de prosseguirmos, você pode querer verificar nosso resumo completo de Temas WordPress para sites empresariais e corporativos.

Dito isso, se você escolher um desses designs populares, que podem ser personalizados para atender às necessidades de seus negócios, você não errará muito.

Divi

divi elegant themes

Divi é um tema WordPress responsivo extremamente popular para negócios (ou qualquer outra coisa, na verdade), um construtor de páginas (Divi Builder), e também um construtor de tema.

O produto vem de Elegant Themes - uma empresa estabelecida que criou muitos dos meus produtos WordPress favoritos. Divi é um tema com "baterias incluídas" - ele vem com todos os recursos que você poderia desejar.

Entre os destaques estão os Divi builder, que permite aos usuários criar layouts sem codificação, dezoito layouts predefinidos para escolher e implementados de forma inteligente capacidade de resposta isso significa que seu site terá uma ótima aparência se visualizado em um PC de mesa com um monitor enorme ou em um smartphone com tela pequena.

Experimente Divi agora e ganhe 10% DE DESCONTO até Setembro 2021

Recomendar Leitura: se você estiver inclinado a usar Divi confira CollectiveRay's Revisão completa da Divi.

Avada

Avada WordPress Business Theme

Avada é outro item muito popular.

O Avada é tão rico em recursos quanto o Divi e é perfeitamente adequado para a construção de sites comerciais que podem se adaptar a vários tamanhos de tela. Como o Divi, o Avada capacita os usuários, sem nenhuma dificuldade de codificação, a construir sites exclusivos.

O criador de página visual Avada (Fusion) é um prazer de usar, e o produto contém qualquer número de toques cuidadosos que o tornam uma excelente escolha para o less proprietário de site WordPress com inclinação técnica.

Leitura recomendada: Mais uma vez, para temas principais, criamos um excelente revisão do tema Avada WordPress para que você possa entender perfeitamente como isso pode ajudá-lo.

Confira o Avada agora

X

x tema responsivo de negócios wp

X é mais um tema WordPress responsivo para negócios que visa torná-lo fácil de colocar em funcionamento com um design bonito e exclusivo que fica ótimo em qualquer dispositivo.

Um dos recursos de destaque do X é seu sistema de extensão.

Em vez de implementar recursos dentro do núcleo do modelo, o X fornece várias extensões de recursos, incluindo uma grade, integração TypeKit, um controle deslizante e plug-ins de galeria. A divisão da funcionalidade em extensões permite que os usuários escolham os recursos de que precisam e evitam carregar seu site com códigos supérfluos que podem levar a problemas de desempenho e segurança.

Confira a demonstração do X agora

Outros modelos para negócios em Themeforest

Se os temas que examinamos aqui não o entusiasmam, não se preocupe, existem centenas de Temas responsivos do WordPress (para todos os tipos de negócios, organizações e em todos os tipos de nichos específicos) para escolher na Themeforest.

Ao escolher um produto da seleção disponível no Themeforest, preste muita atenção às avaliações dos usuários - elas o ajudarão a separar o joio do trigo. Você também deve tomar nota de quão recentemente o item foi atualizado.

Se ele não tiver sido atualizado por vários meses, você deve considerar procurar outro lugar; Temas desatualizados podem causar problemas de compatibilidade e segurança.

5. Por que a capacidade de resposta é a melhor escolha para o seu site comercial?

A capacidade de resposta não é a única maneira de lidar com o tráfego da web móvel.

As alternativas incluem sites móveis dedicados e aplicativos nativos e PWAs (um híbrido entre sites e aplicativos móveis). O problema com cada abordagem é que elas exigem mais trabalho do que um site responsivo.

Se sua empresa escolhe um aplicativo móvel ou PWA, então ela tem que investir em seu design, desenvolvimento, manutenção e promoção. Dinheiro e tempo são divididos entre um site e um aplicativo - ou vários aplicativos para acomodar plataformas móveis populares.

Este design, no entanto, permite que as PMEs mantenham uma base de código e dediquem recursos para criar o melhor site que puderem. Existem circunstâncias em que os aplicativos nativos são a melhor escolha, mas para a maioria das PMEs, a capacidade de resposta é um uso melhor dos recursos.

Imagine um cliente em potencial que procura um serviço que sua empresa oferece enquanto usa o iPhone. Ela encontra o que quer e marca para mais tarde.

Naquela noite, ela abre o favorito em seu computador desktop, e o site parece terrível porque ela adiciona a versão móvel aos favoritos. Este cenário não é tão ruim quanto se o site não tivesse nenhuma versão para celular, e ela foi forçada a lidar com a versão para desktop não modificada em seu telefone - ninguém gosta de beliscar e deslizar para encontrar o que deseja - mas um design deste iria permitir que o mesmo site e os mesmos links funcionem conforme planejado em ambos os dispositivos.

Ter um site que responde ao dispositivo do usuário também permite que as empresas forneçam uma marca coesa em todos os pontos de contato.

O site terá a mesma aparência, embora adaptado, e fornecerá a mesma navegação, a mesma aparência e a mesma experiência. As pequenas empresas com orçamentos limitados geralmente não têm os recursos para manter a qualidade consistente em várias versões de sites e aplicativos.

Capacidade de resposta significa que eles não precisam.

Assim como os usuários não devem ter uma experiência fragmentada, é melhor para o tráfego de pesquisa se houver um local on-line canônico para uma empresa. De acordo com o Google, as vantagens do design responsivo incluem:

  • Manter o conteúdo da sua área de trabalho e celular em um único URL, o que torna mais fácil para os usuários interagirem, compartilharem e se vincularem aos algoritmos do Google para atribuir as propriedades de indexação ao seu conteúdo.

  • O Google pode descobrir seu conteúdo com mais eficiência, pois não precisaríamos rastrear uma página com os diferentes agentes de usuário do Googlebot para recuperar e indexar todo o conteúdo.

O Google pode dizer se os usuários tiveram uma boa experiência em seu site. Se você não oferecer um site otimizado para celular, as taxas de rejeição para usuários de celular dispararão. A maioria deles vai voltar para o mecanismo de pesquisa. O Google sabe quando um usuário retorna imediatamente ao SERPs após clicar em um resultado e usa as taxas de rejeição como um sinal de classificação.

Finalmente, para usuários do WordPress, a capacidade de resposta é o método mais fácil e barato de fornecer uma boa experiência para usuários móveis. Muitos dos melhores temas premium são projetados para serem responsivos e o custo de adaptação de um tema existente para responsividade pode ser significativamente less do que o custo de desenvolver um aplicativo nativo.

Dadas essas vantagens, para proprietários de pequenas e médias empresas que usam temas WordPress, o design responsivo é de longe o melhor caminho a seguir em um mundo onde o uso da web móvel só vai crescer.


Sobre o autor
David Attard
Autor: David AttardSite: https://www.linkedin.com/in/dattard/
David tem trabalhado na ou em torno da indústria online / digital nos últimos 18 anos. Ele tem vasta experiência nas indústrias de software e web design usando WordPress, Joomla e nichos ao seu redor. Como consultor digital, seu foco é ajudar as empresas a obter uma vantagem competitiva usando uma combinação de seu website e plataformas digitais disponíveis hoje.

Mais uma coisa... Você sabia que as pessoas que compartilham coisas úteis como esta postagem também parecem FANTÁSTICAS? ;-)
. deixe um útil comente com suas ideias, depois compartilhe com seu (s) grupo (s) do Facebook, que considerariam isso útil e vamos colher os benefícios juntos. Obrigado por compartilhar e ser legal!

Divulgação: Esta página pode conter links para sites externos de produtos que amamos e recomendamos de todo o coração. Se você comprar produtos que sugerimos, podemos receber uma taxa de referência. Essas taxas não influenciam nossas recomendações e não aceitamos pagamentos por análises positivas.

Autor (es) em destaque em:  Logotipo da revista Inc   Logotipo do Sitepoint   Logotipo do CSS Tricks    logotipo do webdesignerdepot   Logotipo WPMU DEV   e muitos mais ...