WPBeginner v5 – Novo Design do Site e Próximos Passos

Se você está acessando o WPBeginner hoje, pode ter notado que temos um novo design de site. Considerando que nosso último design era de 2012, muitos de vocês diriam que já era hora de darmos uma renovada no WPBeginner. Eu queria compartilhar com vocês algumas percepções do nosso processo de redesenho, o que aprendemos, por que demorou tanto e, o mais importante, o que há de novo no novo design.

Um Pouco de Contexto

Comecei o WPBeginner em 2009. Nos primeiros 3 anos, o WPBeginner passou por 4 redesenhos. Isso consome muitos recursos que poderiam ter sido melhor gastos em nossa missão principal:

Ajudar pequenas empresas a crescer e competir com os grandes através de nossas ferramentas, equipe e treinamento.

Após o WPBv4, fiz questão de focar em nossa missão principal e os resultados são surpreendentes.

Nos últimos quatro anos:

  • Criamos mais de mil tutoriais gratuitos de WordPress no blog do WPBeginner.
  • Adicionamos mais de 500 novos tutoriais em vídeo em nosso Canal do YouTube.
  • Adicionamos mais de 100 termos em nosso Glossário do WordPress.
  • Lançamos o OptinMonster – uma ferramenta que converte visitantes de sites que estão saindo em assinantes. Nossos formulários de opt-in são vistos vários bilhões de vezes por mês.
  • Lançamos o Envira Gallery, a solução de galeria WordPress mais poderosa, para ajudar nossos usuários a criar facilmente galerias de fotos e vídeos sem desacelerar seus sites.
  • Lançamos o Soliloquy, um plugin de slider responsivo para WordPress fácil de usar que tem o desempenho e a experiência do usuário como sua prioridade número 1.
  • Lançamos o WPForms, o plugin de formulário para WordPress mais amigável para iniciantes, baseado em seus comentários e sugestões.
  • No início deste ano, adquirimos o Yoast Analytics e o renomeamos para MonsterInsights. Estamos no processo de reescrever todo o plugin para tornar o Google Analytics fácil para iniciantes.

Coletivamente, nossos plugins foram baixados mais de 13 milhões de vezes e estão sendo ativamente usados em mais de 2 milhões de sites.

Embora todas essas sejam grandes conquistas, temos um novo conjunto de desafios que precisam ser abordados se quisermos continuar a melhorar e servir nossa missão.

Isso me leva ao WPBeginner v5.

Design com Dados

Nos últimos anos, o uso de dispositivos móveis aumentou significativamente para a maioria dos sites. É por isso que sempre recomendamos que todos escolham um tema responsivo para WordPress compatível com dispositivos móveis ao iniciar um blog.

Isso foi um pouco irônico porque nosso próprio site não era responsivo. Recebemos muitas críticas nas redes sociais de outros designers e desenvolvedores de WordPress da comunidade.

Ocasionalmente, recebíamos comentários de leitores perguntando por que o WPBeginner não era responsivo.

Embora eu entenda a importância do design responsivo, é ainda mais importante que você tome decisões baseadas em dados ao priorizar tarefas em seu negócio.

Em 2012, quando lançamos o design do WPBv4, **menos de 2%** de nosso público estava em dispositivos móveis.

Hoje, em 2016, esse número aumentou para cerca de 7%.

Isso ainda é muito baixo em comparação com meus outros sites como o List25, onde mais de 50% dos usuários estão em dispositivos móveis.

Mas faz sentido porque a maioria das pessoas não instala plugins em seus sites WordPress via dispositivo móvel. A maioria das pessoas não faz alterações de código no celular. A maioria das pessoas não tenta corrigir erros comuns do WordPress no celular.

É por isso que tornar o WPBeginner responsivo não era nossa prioridade máxima. No entanto, assim que o uso de dispositivos móveis ultrapassou 5%, começamos a planejar a reformulação que também abordou outros desafios.

WPBeginnerv5 Responsivo

Outro desafio que enfrentamos foi a usabilidade do site. À medida que adicionamos mais conteúdo, tornou-se mais difícil para os usuários encontrarem o que procuravam. Por exemplo, tínhamos 8 artigos falando sobre como acelerar o WordPress, mas nenhuma solução abrangente passo a passo.

Analisamos as principais consultas de pesquisa digitadas no formulário de pesquisa do WPBeginner para criar tutoriais abrangentes passo a passo que agora são destacados de forma proeminente no design.

Guias Abrangentes WPBv5

Também tornamos a busca no WPBeginner mais fácil com uma sobreposição de pesquisa em tela cheia no cabeçalho e uma barra de pesquisa adicional na barra lateral.

Daqui para frente, facilitaremos para os usuários encontrarem o que procuram, criando portais de conteúdo que aproveitam criativamente as tags do WordPress.

Novidades no WPBv5

A funcionalidade principal do site permaneceu a mesma. Aqui estão algumas mudanças notáveis no site:

Nova Página Comece Aqui

Se você é novo no WPBeginner, apreciará a nova página Comece Aqui

Design de Site Responsivo

O site WPBeginner agora é 100% responsivo, então fica ótimo em todos os dispositivos.

Optamos por manter o popular framework Genesis para construir nosso tema filho personalizado.

Guias Abrangentes

Se você olhar na barra lateral de cada página, verá uma nova seção "Preciso de ajuda com..." que destaca guias abrangentes como como acelerar o WordPress, como melhorar a segurança do WordPress, como otimizar o SEO do WordPress, e mais.

Melhor Visibilidade para Nossos Produtos

No censo do WPBeginner, uma das perguntas que fiz foi nomeie um produto que possuímos. Foi surpreendente quantas pessoas não sabiam sobre nossos produtos. No novo design, faremos um trabalho melhor em destacar os produtos que possuímos.

Isso começa com uma nova página de plugins premium para WordPress.

Também rotacionaremos os produtos em nossa barra lateral e em nossos anúncios de newsletter.

FontAwesome e Nova Fonte

Você pode notar o uso de fontes de ícones no novo designer. Chama-se FontAwesome, e sou um grande fã do trabalho de Dave Gandy.

Usamos o trabalho dele em todos os nossos produtos e somos orgulhosos apoiadores do FontAwesome.

Curiosidade: você pode adicionar o logo do WPBeginner como uma fonte se você usar FontAwesome, assim como em nossas outras propriedades.

No novo design, estamos usando a fonte Proxima Nova através do Typekit.

Novo Plugin de Compartilhamento

No passado, usávamos uma variação do plugin Floating Social Bar.

Após as mudanças do Twitter, Facebook e outros – senti que era hora de criar um novo plugin de compartilhamento para o WPBeginner.

Ele puxa com precisão a contagem do Twitter, mas mais importante, agora tem uma contagem total de compartilhamentos.

Novo Plugin de Compartilhamento

Optei por parar o comportamento flutuante e, em vez disso, os botões de compartilhamento agora são adicionados no início e no final de cada postagem. Isso ajudará a melhorar a experiência do usuário em telas menores.

Novo eBook e Formulários de Inscrição

Na parte inferior de cada postagem, você verá um novo formulário de inscrição para baixar meu kit de ferramentas WordPress. Este eBook compartilha as ferramentas exatas que usamos em nossos sites.

É diferente do blueprint do WPBeginner porque este mostra apenas o que usamos no WPBeginner.

O eBook do kit de ferramentas é mais abrangente.

Eu também substituí o formulário de inscrição na barra lateral por MonsterLinks, um processo de inscrição em 2 etapas. O formulário de inscrição na barra lateral não gerou conversões com uma taxa alta o suficiente para justificar o espaço. Portanto, agora, se você quiser se inscrever por e-mail, pode fazê-lo clicando no ícone de e-mail na barra lateral.

Opção de Barra Lateral WPBv5

O que vem a seguir

Além das mudanças no front-end, fizemos muitas mudanças no back-end que facilitarão para a equipe do WPBeginner criar guias mais abrangentes nos próximos meses.

O site de assinatura de vídeos WPBeginner passará por uma reformulação. Atualmente, ele ainda usa o tema antigo.

Vamos transformar isso em um sistema LMS que reunirá o curso de vídeos para iniciantes e nossos mais de 500 vídeos do YouTube em um local centralizado.

O objetivo desse site seria oferecer cursos mais organizados para facilitar que os usuários aprendam WordPress rapidamente.

Quero agradecer a todos pelo apoio e feedback.

Atenciosamente,
Syed Balkhi
Fundador do WPBeginner

Aviso: Nosso conteúdo é apoiado pelos leitores. Isso significa que, se você clicar em alguns de nossos links, poderemos ganhar uma comissão. Veja como o WPBeginner é financiado, por que isso importa e como você pode nos apoiar. Aqui está nosso processo editorial.

O Kit de Ferramentas Definitivo para WordPress

Obtenha acesso GRATUITO ao nosso kit de ferramentas - uma coleção de produtos e recursos relacionados ao WordPress que todo profissional deve ter!

Interações do Leitor

90 CommentsLeave a Reply

  1. Olá,

    O design ficou incrível.

    Na verdade, eu também queria o mesmo visual para o meu site, que também está relacionado a negócios de ofertas e cupons. Eu também configurei o framework genesis e o tema filho genesis-simple, mas não sei como você conseguiu a opção de alternância de cabeçalho e a postagem de oferta, você pode me guiar?

    Obrigado
    Vipin Singh

  2. bem, eu não sabia o design antigo, mas de qualquer forma eu amo o novo design. sempre que venho a este site, sinto que o design do meu site pode ser assim. obrigado tema wpbeginner. vocês estão fazendo um ótimo trabalho. tenha um bom dia.

  3. Sou leitor regular do seu site, o novo design do site é uma boa melhoria em relação ao anterior, mas não me sinto impressionado.

    Talvez a largura do site possa aumentar.

  4. Uau, estou tão feliz em ver o design responsivo porque era bastante difícil visualizar o site no celular antes, mas agora está bom.

  5. Parabéns Syed, o novo layout parece muito limpo e agradável. A propósito, seu novo Plugin de Compartilhamento está disponível para outros usuários? Parece muito limpo e significativo.

  6. Isso é realmente incrível. Eu gosto do novo design. Estive aqui no último dia, acordei, verifiquei meu site favorito de tutoriais do WordPress e fiquei refrescado com o que vi. Ótimos caras.

  7. Adorei essa barra flutuante de compartilhamento. O Mashable tem uma ótima também!

    P.S. Adoraria ter backlinks aqui...

  8. Adorei o redesign. Só por curiosidade, o que você acha do anúncio do Google sobre pop-ups e rankings? Pela primeira vez, estou com o Google nisso. Eu não estava no seu site há mais de alguns segundos antes de um pop-up aparecer me pedindo para assinar (eu já assino). Eu nem tive tempo de conferir o conteúdo e ver se gosto e já estou sendo convidado a assinar. Isso se tornou um incômodo constante online. Existe alguma maneira de você adicionar rastreamento ao opt in monster, para que se eu estiver clicando em um dos seus newsletters, o pop-up de assinatura não apareça? Agora, isso seria um diferencial.
    De qualquer forma, me desviei (não pude evitar, o pop-up foi REALMENTE irritante!!) – seu site está ótimo e seu conteúdo é realmente fabuloso. Pergunte aos visitantes se eles querem assinar depois que eles tiverem tempo de ler seu conteúdo e você poderá descobrir que terá uma taxa de adesão maior...

  9. Adorei o novo design! Só uma pergunta: seu novo plugin de compartilhamento está disponível em algum lugar? Ele parece ótimo!

    • Olá Herwig,

      Obrigado pelas palavras gentis. O plugin de compartilhamento não está disponível no momento porque foi codificado sob medida para o WPBeginner. Podemos lançá-lo no futuro, mas ainda não está pronto para lançamento público.

      Admin

  10. ...OK! excelente!.. Acompanho vocês há muito tempo… esta atualização é rápida … super UX-UI… claro… (exceto o seu logo… um pouco borrado)… Adoro as cores contrastantes… e as instruções fáceis… Concordo com você; eu não uso meu Note5 para consertar nada…. pessoalmente, eu leio tudo quando não estou no meu escritório e então aplico o que preciso do meu desktop/laptop… Estou ansioso para verificar muitas coisas onde preciso de ajuda… Obrigado e Parabéns…!!

  11. O site está ótimo. Melhor que a versão anterior.

    Você pode fazer uma lista de todas as ferramentas e tecnologias que você usou para criar este site e publicá-las? Isso seria maravilhoso. Obrigado.

  12. Olá, Syed!

    Uau… O WPBeginner está realmente muito mais rápido do que sempre foi, devo dizer que adoro este novo design. Eu uso o WPBeginner pelo menos 5 vezes por dia, continuem o bom trabalho..

  13. Olá Syed,

    Ótimo trabalho no novo design e obrigado por todos os tutoriais do WordPress. Eu consulto seu site regularmente e acredito que é um recurso inestimável.

    Com os melhores cumprimentos,
    Neil Forrester | pixelfire.com.au

  14. Olá, no WPBeginner!

    Parabéns a toda a equipe.

    Reclamei meses atrás que o site não era responsivo. Agora fui atendido, e bem atendido.

    Tudo de bom, de Camarões!

  15. Eu gosto do novo design. No início, eu também achei estranho por que o WPB não tinha um design responsivo.

    Depois de ler isto, agora entendo o porquê.

    Ótimo trabalho WPB!

    Eu me deparei com o seu blog e ele melhorou muito minha experiência com o wp.

    Eu gosto da maneira que vocês explicam. As percepções deles são verdadeiras, mostrando que sua equipe realmente testou antes de escrever sobre isso. Não é como alguns blogs que apenas copiam e colam e editam apenas para ranquear no Google.

    Eu vou seguir vocês.

  16. Gostei do novo design. Embora seja verdade que, quando estou trabalhando nos meus sites, não estou no celular. Eu recebo seus e-mails no meu celular e, muitas vezes, os salvo para ler na minha cafeteria local. Isso tornará as coisas muito melhores. Boa sorte com o novo design.

  17. Olá Syed,

    Um ótimo visual novo para um ótimo recurso sobre tudo relacionado ao WordPress.

    Realmente gostei do que vocês fizeram e com mensagens claras em todo o site.

    Obrigado por nos informar sobre o processo e como vocês fizeram as coisas.

    Pode inspirar alguns a fazerem uma renovação!

    Tudo de bom

    Ben

  18. Olá, WP Beginner, comecei recentemente a trabalhar com o WordPress CMS e achei muito fácil porque uso a maioria (se não todos) dos materiais do seu site. Eu crio sites para clientes e tenho uma empresa de hospedagem gratuita que uso. Eu navego pelo seu site, pelo menos, não menos de 8 vezes por dia, procurando soluções para resolver os problemas dos meus clientes. Eu estava navegando pelo seu site quando ele mudou repentinamente do design antigo para este novo! Eu gostei mais do antigo do que deste porque o design antigo exibia um menu de navegação em tela cheia no meu pequeno celular, tornando muito fácil navegar, mas este novo design encolhe todos os itens de navegação em um "MENU" que eu preciso clicar antes que o resto seja exibido! Eu gostaria de aproveitar esta oportunidade para perguntar: "como posso remover a responsividade de um tema WordPress e fazê-lo exibir um menu de navegação em tela cheia mesmo em smartphones? Um dos meus clientes tem pedido isso, e eu não consigo resolver esse problema. Obrigado e Deus abençoe.

    • Eu uso um tema do diretório de temas do WordPress e o nome do tema é WP knowledge base. como posso remover a responsividade desse tema em particular, e de todos os temas em geral, fazendo com que ele exiba um MENU DE NAVEGAÇÃO EM TELA CHEIA mesmo em telas pequenas de celular, exatamente como era o seu design anterior. Deus abençoe.

    • Olá Obinna,

      Obrigado pelo feedback. A maioria dos usuários acha o menu de navegação recolhido mais fácil de usar em telas menores. É mais fácil de tocar e mais itens podem ser exibidos no menu.

      Se você quiser usar um menu em tela cheia, pode começar com um tema do WordPress que não seja totalmente responsivo. Você também pode definir a largura usando CSS.

      Admin

  19. Que ótimo ver a atualização e tudo o que ela traz.
    Tenho que dizer, eu NÃO fazia ideia de que vocês eram os donos desses plugins!
    Francamente, eu achava que alguém com escrúpulos menos desejáveis tinha assumido o Yoast Analytics, então é ótimo saber agora que alguém tão respeitável quanto o WPBeginner é o dono!

  20. Tenho acompanhado este site discretamente nos últimos 4 anos, fico feliz que suas novas mudanças sejam práticas para o que você ensina a novatos como eu ao construir sites em WP (mobile first).
    Por favor, continuem com o ótimo trabalho, você e sua equipe.

  21. Ansioso pelas atualizações. Quero fazer mudanças no site, mas de alguma forma me distraio. Espero poder dedicar mais tempo aprendendo os procedimentos do WP.

  22. Ótimo trabalho! Parabéns, o site está ótimo e todas as suas atualizações fazem todo o sentido. Agradeço todas as dicas, truques e instruções fáceis de seguir que você compartilhou ao longo dos anos e espero aprender mais sobre WP nos próximos anos.

  23. I agree with Adeel. It looks like you have put a lot of thought into the re-design. Also good to see that the site is now responsive :)

  24. Eu amo o novo visual do site. Bom trabalho! Parece que sua largura total é de cerca de 940px. Houve algum motivo específico para escolher uma largura menor?

    • Porque a maioria das nossas imagens de conteúdo têm 520px de largura. Queremos ter certeza de que mantemos nosso site rápido porque muitos de nossos usuários não têm internet rápida. Usar uma largura de conteúdo maior e fazer upload de imagens de tamanho maior diminui ainda mais a velocidade do site.

      Isso não é perceptível na parte ocidental do mundo, mas muitos outros países têm internet muito lenta.

      Admin

      • Se você não se importasse tanto com os tamanhos de imagem existentes ou com velocidades de internet lentas, você teria mudado a largura? Eu sempre luto ao criar novos sites sobre qual é a melhor largura de conteúdo. Então, adoraria ouvir qualquer insight. Obrigado!

  25. Parabéns pelo novo redesign e obrigado pelas suas mudanças atenciosas. Estou realmente animado para explorar o site!

Deixar uma resposta

Obrigado por escolher deixar um comentário. Por favor, tenha em mente que todos os comentários são moderados de acordo com nossa política de comentários, e seu endereço de e-mail NÃO será publicado. Por favor, NÃO use palavras-chave no campo do nome. Vamos ter uma conversa pessoal e significativa.