Si vous chargez WPBeginner aujourd'hui, vous avez peut-être remarqué que nous avons un nouveau design de site. Compte tenu que notre dernier design date de 2012, beaucoup d'entre vous diraient qu'il était temps que nous donnions un coup de jeune à WPBeginner. Je voulais partager avec vous quelques aperçus de notre processus de refonte, ce que nous avons appris, pourquoi cela a pris autant de temps, et surtout ce qu'il y a de nouveau dans le nouveau design.
Un peu d'historique
J'ai lancé WPBeginner en 2009. Au cours des 3 premières années, WPBeginner a subi 4 refontes. Cela consomme beaucoup de ressources qui auraient pu être mieux utilisées pour notre mission principale :
Aider les petites entreprises à croître et à rivaliser avec les grands grâce à nos outils, notre équipe et notre formation.
Après WPBv4, j'ai décidé de me concentrer sur notre mission principale et les résultats sont étonnants.
Au cours des quatre dernières années :
- Nous avons créé plus d'un millier de tutoriels WordPress gratuits sur le blog WPBeginner.
- Nous avons ajouté plus de 500 nouveaux tutoriels vidéo sur notre chaîne YouTube.
- Nous avons ajouté plus de 100 termes dans notre Glossaire WordPress.
- Nous avons lancé OptinMonster – un outil qui convertit les visiteurs du site qui abandonnent en abonnés. Nos formulaires d'optin sont vus plusieurs milliards de fois par mois.
- Nous avons lancé Envira Gallery, la solution de galerie WordPress la plus puissante, pour aider nos utilisateurs à créer facilement des galeries photo et vidéo sans ralentir leurs sites web.
- Nous avons lancé Soliloquy, un plugin de slider WordPress réactif et facile à utiliser qui fait de la performance et de l'expérience utilisateur sa priorité numéro 1.
- Nous avons lancé WPForms, le plugin de formulaire WordPress le plus adapté aux débutants, basé sur vos retours et suggestions.
- Plus tôt cette année, nous avons acquis Yoast Analytics et l'avons renommé MonsterInsights. Nous sommes en train de réécrire entièrement le plugin pour rendre Google Analytics facile pour les débutants.
Collectivement, nos plugins ont été téléchargés plus de 13 millions de fois et sont activement utilisés sur plus de 2 millions de sites web.
Bien que tout cela représente de grandes réalisations, nous avons un nouvel ensemble de défis à relever si nous voulons continuer à nous améliorer et à servir notre mission.
Ceci m'amène à WPBeginner v5.
Conception basée sur les données
Au cours des dernières années, l'utilisation des appareils mobiles a considérablement augmenté pour la plupart des sites web. C'est pourquoi nous avons toujours recommandé à tout le monde de choisir un thème WordPress réactif et adapté aux mobiles lors de la création d'un blog.
C'était un peu ironique car notre propre site web n'était pas réactif. Nous avons reçu beaucoup de critiques sur les réseaux sociaux de la part d'autres concepteurs et développeurs WordPress de la communauté.
Occasionnellement, nous recevions des commentaires de lecteurs demandant pourquoi WPBeginner n'était pas réactif.
Bien que je comprenne l'importance de la conception réactive, il est encore plus important de prendre des décisions basées sur les données lors de la priorisation des tâches dans votre entreprise.
En 2012, lorsque nous avons lancé la conception de WPBv4, moins de 2 % de notre audience était sur mobile.
Aujourd'hui, en 2016, ce nombre est passé à environ 7 %.
C'est encore très bas par rapport à mes autres sites Web comme List25 où plus de 50 % des utilisateurs sont sur mobile.
Mais cela a du sens car la plupart des gens n'installent pas de plugins sur leurs sites Web WordPress via un appareil mobile. La plupart des gens ne modifient pas le code sur mobile. La plupart des gens n'essaient pas de corriger les erreurs WordPress courantes sur mobile.
C'est pourquoi rendre WPBeginner responsive n'était pas notre priorité absolue. Cependant, une fois que l'utilisation mobile a dépassé 5 %, nous avons commencé à planifier la refonte qui a également abordé d'autres défis.
Un autre défi que nous avons rencontré était l'utilisabilité sur le site. Au fur et à mesure que nous ajoutions du contenu, il devenait plus difficile pour les utilisateurs de trouver ce qu'ils cherchaient. Par exemple, nous avions 8 articles parlant de l'accélération de WordPress, mais aucune solution complète étape par étape.
Nous avons examiné les requêtes de recherche les plus tapées dans le formulaire de recherche de WPBeginner pour créer des tutoriels complets étape par étape qui sont maintenant rapidement mis en évidence dans la conception.
Nous avons également rendu la recherche sur WPBeginner plus facile avec une superposition de recherche plein écran dans l'en-tête et une barre de recherche supplémentaire dans la barre latérale.
À l'avenir, nous faciliterons la recherche de ce que les utilisateurs recherchent en créant des portails de contenu qui exploitent de manière créative les balises WordPress.
Nouveautés de WPBv5
La fonctionnalité principale du site est restée la même. Voici quelques changements notables sur le site web :
Nouvelle page « Commencez ici »
Si vous êtes nouveau sur WPBeginner, vous apprécierez la nouvelle page « Commencez ici ».
Conception de site web réactif
Le site web WPBeginner est maintenant 100% réactif, il est donc superbe sur tous les appareils.
Nous avons choisi de conserver le populaire framework Genesis pour construire notre thème enfant personnalisé.
Guides complets
Si vous regardez dans la barre latérale de chaque page, vous verrez une nouvelle section « J'ai besoin d'aide pour... » qui met en évidence des guides complets tels que comment accélérer WordPress, comment améliorer la sécurité de WordPress, comment optimiser le SEO de WordPress, et plus encore.
Meilleure visibilité pour nos produits
Dans le sondage WPBeginner, l'une des questions que j'ai posées était de nommer un produit que nous possédons. Il a été assez surprenant de voir combien de personnes ne connaissaient pas nos produits. Dans la nouvelle conception, nous allons faire un meilleur travail pour mettre en évidence les produits que nous possédons.
Cela commence par une nouvelle page de plugins WordPress premium.
Nous allons également faire tourner les produits dans notre barre latérale ainsi que dans nos publicités par newsletter.
FontAwesome et nouvelle police
Vous remarquerez peut-être l'utilisation de polices d'icônes dans le nouveau design. Elle s'appelle FontAwesome, et je suis un grand fan du travail de Dave Gandy.
Nous utilisons son travail sur tous nos produits et sommes de fiers supporters de FontAwesome.
Fait amusant, vous pouvez en fait ajouter le logo WPBeginner comme une police si vous utilisez FontAwesome ainsi que nos autres propriétés.
Dans la nouvelle conception, nous utilisons maintenant la police Proxima Nova via Typekit.
Nouveau plugin de partage
Par le passé, nous utilisions une variation du plugin Floating Social Bar.
Après les changements de Twitter, Facebook et autres – j'ai estimé qu'il était temps de créer un nouveau plugin de partage pour WPBeginner.
Il récupère avec précision le nombre de partages Twitter, mais plus important encore, il a maintenant un nombre total de partages.
J'ai choisi d'arrêter le comportement flottant et plutôt que les boutons de partage sont maintenant ajoutés au début et à la fin de chaque article. Cela aidera à une meilleure expérience utilisateur sur les écrans de petite taille.
Nouvel eBook et formulaires d'inscription
Au bas de chaque article, vous verrez un nouveau formulaire d'inscription pour télécharger ma boîte à outils WordPress. Cet eBook partage les outils exacts que nous utilisons sur nos sites Web.
Il est différent du blueprint de WPBeginner car celui-ci vous montre uniquement ce que nous utilisons sur WPBeginner.
Le livre électronique de la boîte à outils est plus complet.
J'ai également remplacé le formulaire d'inscription dans la barre latérale par MonsterLinks, un processus d'inscription en 2 étapes. Le formulaire d'inscription dans la barre latérale n'avait pas un taux de conversion suffisant pour justifier l'espace occupé. Donc, maintenant, si vous souhaitez vous abonner par e-mail, vous pouvez le faire en cliquant sur l'icône e-mail dans la barre latérale.
Prochaines étapes
Outre les changements côté client, nous avons apporté de nombreux changements côté serveur qui faciliteront la création de guides plus complets par l'équipe de WPBeginner dans les mois à venir.
Le site d'adhésion aux vidéos WPBeginner va être remanié. Actuellement, il utilise toujours l'ancien thème.
Nous allons le transformer en un système LMS qui réunira le cours vidéo pour débutants et nos plus de 500 vidéos YouTube en un lieu centralisé.
L'objectif de ce site serait d'offrir des cours plus organisés pour permettre aux utilisateurs d'apprendre WordPress rapidement.
Je tiens à vous remercier tous pour votre soutien et vos commentaires.
Cordialement,
Syed Balkhi
Fondateur de WPBeginner
Vipin
Bonjour,
Le design est génial.
En fait, je voulais aussi le même look pour mon site web qui est également lié au commerce des offres et des coupons. J'ai aussi configuré le framework Genesis et le thème enfant Genesis-Simple, mais je ne sais pas comment vous avez obtenu l'option de bascule d'en-tête et les articles d'offres, pouvez-vous me guider
Merci
Vipin Singh
Shola
Eh bien, je ne connaissais pas l'ancien design, mais de toute façon j'adore le nouveau design. Chaque fois que je viens sur ce site, j'ai l'impression que le design de mon site pourrait être comme ça. Merci au thème WPBeginner. Vous faites un excellent travail. Bonne journée.
Support WPBeginner
Salut Shola,
Thanks for the kind words.
Admin
Atul
Ce design plat est très beau sur tous les appareils. Il est beaucoup mieux maintenant.
Aaditya Sharma
Je suis un lecteur régulier de votre site web, le nouveau design du site est une bonne amélioration par rapport au précédent, mais je ne ressens pas un « wow » particulier.
Peut-être que la largeur du site pourrait être augmentée.
Ekesmall
Wow, je suis tellement content de voir le design réactif car il était assez difficile de voir le site Web sur un téléphone portable avant, mais maintenant c'est bien.
Srivalli
Félicitations Syed, la nouvelle mise en page est très soignée et agréable. Au fait, votre nouveau plugin de partage est-il disponible pour d'autres utilisateurs ? Il a l'air très soigné et significatif.
Personnel éditorial
Salut Srivalli,
No the new share plugin is not public yet
Admin
Srivalli
Merci, j'espère que vous le rendrez public bientôt… :)
Businge Brian
C'est vraiment incroyable. J'aime le nouveau design. J'étais ici hier, je me suis réveillé, j'ai consulté mon site Web de tutoriels WordPress préféré et j'ai été rafraîchi par ce que j'ai vu. Vraiment super les gars.
Personnel éditorial
Glad you liked it Businge
Merci pour vos aimables paroles.
Admin
LH Louis
J'adore cette barre de partage flottante. Mashable en a une super aussi !
P.S. J'adorerais avoir des backlinks ici…
Personnel éditorial
Merci.
Si vous parlez de backlinks dans les commentaires – nous les avons supprimés car cela attirait trop de spam.
Admin
Muhammad Imran
Super design, félicitations à l'équipe WB
M Imran
Personnel éditorial
Merci Imran
Admin
Diane
J'adore le nouveau design. Juste par curiosité, que pensez-vous de l'annonce de Google concernant les pop-ups et les classements ? Pour une fois, je suis d'accord avec Google sur ce point. Je n'étais pas sur votre site plus de quelques secondes avant qu'une pop-up n'apparaisse me demandant de m'inscrire (ce que je fais déjà). Je n'ai même pas eu le temps de consulter le contenu et de voir s'il me plaît et on me demande de m'inscrire. C'est devenu une irritation constante en ligne. Y a-t-il un moyen d'ajouter un suivi à OptinMonster, de sorte que si je clique depuis l'une de vos newsletters, la pop-up d'inscription n'apparaisse pas ? Ça, ce serait un argument de vente.
Bref, je digresse (je n'ai pas pu m'en empêcher, la pop-up était VRAIMENT agaçante !!) – votre site est superbe et votre contenu est vraiment fabuleux. Demandez aux visiteurs s'ils veulent s'inscrire après qu'ils aient eu le temps de lire votre contenu et vous constaterez peut-être que vous obtiendrez un taux d'inscription plus élevé...
Personnel éditorial
Salut Diane,
Merci pour votre retour.
J'ai écrit sur les nouvelles règles de Google pour les pop-ups adaptées aux mobiles ici :
http://optinmonster.com/the-new-google-mobile-friendly-rules-for-popups/
Admin
Herwig
J'adore le nouveau design ! Juste une question : votre nouveau plugin de partage est-il disponible quelque part ? Il a l'air vraiment super !
Personnel éditorial
Salut Herwig,
Merci pour vos aimables paroles. Le plugin de partage n'est pas disponible pour le moment car il a été codé sur mesure pour WPBeginner. Nous pourrions le publier à l'avenir, mais il n'est pas encore prêt pour une publication publique.
Admin
Betty Johnston
…OK ! excellent !.. Je vous suis depuis très très longtemps… cette mise à jour est rapide… super UX-UI… clair… (sauf votre logo… un peu flou)… J'adore les couleurs contrastées… et les instructions faciles… Je suis d'accord avec vous ; je n'utilise pas mon Note5 pour réparer quoi que ce soit…. personnellement, je lis tout quand je ne suis pas à mon bureau et ensuite j'applique tout ce dont j'ai besoin depuis mon bureau/ordinateur portable… J'ai hâte de vérifier beaucoup de choses où j'ai besoin d'aide… Merci et félicitations… !!
Personnel éditorial
Thanks for the feedback Betty. We appreciate it
Admin
Salman
Le site est superbe. Mieux que la version précédente.
Pouvez-vous faire une liste de tous les outils et technologies que vous avez utilisés pour créer ce site web et la publier ? Ce serait merveilleux. Merci.
Personnel éditorial
Salut Salman,
Nous avons une liste de tout ce que nous utilisons sur WPBeginner ici : https://014.leahstevensyj.workers.dev/blueprint/
Admin
TeQuan Douglas
Salut, Syed !
Wow… WPBeginner est en fait beaucoup plus rapide qu'il ne l'a jamais été, je dois dire que j'adore ce nouveau design. J'utilise WPBeginner au moins 5 fois par jour, continuez votre bon travail..
Personnel éditorial
Thank you TeQuan
Admin
Brin Wilson
Well done: looks fab – simple, clean and well thought out. Impressive.
Personnel éditorial
Merci Brin
Admin
Lisa
Très bien – félicitations à Syed et à l'équipe et à StudioPress !
Personnel éditorial
Thanks Lisa
Admin
Neil Forrester
Salut Syed,
Excellent travail sur le nouveau design et merci pour tous les tutoriels WordPress. Je consulte votre site régulièrement et je pense que c'est une ressource inestimable.
Meilleurs vœux,
Neil Forrester | pixelfire.com.au
Personnel éditorial
Merci Neil – nous apprécions votre soutien.
Admin
Henri Lotin
Bonjour, chez WPBeginner !
Félicitations à toute l'équipe.
Je me suis plaint il y a des mois que le site n'était pas réactif. Maintenant, je suis servi, et bien servi.
Tous les pouces levés, du Cameroun !
Personnel éditorial
Merci pour votre patience et votre soutien continu Henri. Nous l'apprécions vraiment.
Admin
Izham
J'aime le nouveau design. Au début, j'ai aussi trouvé bizarre pourquoi WPB n'avait pas de design réactif.
Après avoir lu ceci, je comprends maintenant pourquoi.
Excellent travail WPB !
Je suis tombé sur votre blog et il a beaucoup amélioré mon expérience wp.
J'aime la façon dont vous expliquez. Les aperçus qu'ils montrent que votre équipe teste vraiment avant d'écrire à ce sujet. Pas comme certains blogs qui copient-collent et modifient juste pour se classer sur Google.
Je vais vous suivre.
Personnel éditorial
Merci Izham.
Admin
Mike
J'aime le nouveau design. Bien qu'il soit vrai que lorsque je travaille sur mes sites, je ne suis pas sur mobile. Je reçois vos e-mails sur mon mobile, et assez souvent je les enregistre pour les lire dans mon café local. Cela rendra les choses beaucoup mieux. Bonne chance avec le nouveau design.
Personnel éditorial
Thanks Mike – yup that was the most common use-case. People read emails via phone and then come to our site. Hopefully it will be a much better UX now
Admin
Adrienne
Il était temps ! Lol Je lis vos articles dans le train et c'était énervant de devoir redimensionner la page.
Adrienne
Non vraiment, je vous adore !! Continuez comme ça !!
Ben
Salut Syed,
Un nouveau look génial pour une excellente ressource sur tout ce qui concerne WordPress.
J'aime vraiment ce que vous avez fait et le message clair tout au long.
Merci de nous avoir tous informés du processus et de la manière dont vous avez procédé.
Cela pourrait en inspirer certains à faire un rafraîchissement !
Tous mes vœux de succès
Ben
OBINNA DURU
Bonjour WP Beginner, j'ai récemment commencé à travailler avec le CMS WordPress et j'ai trouvé cela très facile car j'utilise la plupart (sinon la totalité) de vos ressources sur le site. Je crée des sites Web pour des clients et j'ai une société d'hébergement gratuite que j'utilise. Je parcours votre site, au moins, pas moins de 8 fois par jour, à la recherche de solutions pour résoudre les problèmes de mes clients. Je parcourais votre site lorsqu'il est soudainement passé de l'ancien design à ce nouveau ! J'aimais mieux l'ancien que celui-ci car l'ancien design affichait un menu de navigation pleine largeur sur mon petit téléphone, ce qui le rendait très facile à naviguer, mais ce nouveau design réduit tous les éléments de navigation dans un « MENU » sur lequel je dois cliquer avant que les autres ne soient affichés ! J'aimerais profiter de cette occasion pour demander : « comment puis-je supprimer la réactivité d'un thème WordPress et le faire afficher un menu de navigation pleine largeur même sur les smartphones. Un de mes clients me le demande, et je ne peux pas résoudre ce problème. Merci et que Dieu vous bénisse.
OBINNA DURU
J'utilise un thème du répertoire de thèmes WordPress et le nom du thème est WP knowledge base. comment puis-je supprimer la réactivité de ce thème particulier, et de tous les thèmes en général, en le faisant afficher un MENU DE NAVIGATION PLEINE LARGEUR même sur les petits écrans de téléphone, exactement comme votre ancien design. Que Dieu vous bénisse.
Support WPBeginner
Salut Obinna,
Merci pour votre retour. La plupart des utilisateurs trouvent le menu de navigation réduit plus facile à utiliser sur les petits écrans. Il est plus facile d'appuyer dessus, et plus d'éléments peuvent être affichés dans le menu.
Si vous souhaitez utiliser un menu pleine largeur, vous pouvez commencer par un thème WordPress qui n'est pas entièrement réactif. Vous pouvez également définir la largeur à l'aide de CSS.
Admin
Mitch
Ravi de voir la mise à jour et tout ce qu'elle apporte.
Je dois dire que je n'avais AUCUNE idée que vous étiez les propriétaires de ces plugins !
Franchement, je pensais que quelqu'un aux scrupules moins que désirables avait repris Yoast Analytics, donc c'est formidable de savoir maintenant que quelqu'un d'aussi réputé que WPBeginner en est le propriétaire !
Scott Buehler
Ça a l'air super et rapide.
Personnel éditorial
Thank you
Admin
Josalone Wordsworth
Je suis ce site discrètement depuis 4 ans, et je suis content que vos nouveaux changements soient pratiques pour ce que vous enseignez aux novices comme moi lors de la création de sites WordPress (mobile first).
Continuez votre excellent travail, vous et votre équipe.
Personnel éditorial
Thanks for the kind words Josalone. We appreciate your support
Admin
Ahmad Awais
Félicitations à l'équipe WPB ! Le nouveau design est très bien. « Il était temps » !
Personnel éditorial
Merci Ahmad pour vos aimables paroles.
Admin
Sidah
Ça a l'air super.
Vous voudrez peut-être rendre le wpbeginner en plus haute résolution ? Ça rend mal sur mon iPhone 6.
Cordialement
Personnel éditorial
Le site actuel n'est pas Retina car nous voulons nous assurer qu'il est rapide partout dans le monde (même sur les connexions plus lentes).
Admin
Dick Motta
J'attends avec impatience les mises à jour. Je veux apporter des changements au site web, mais je me laisse distraire. J'espère pouvoir passer plus de temps à apprendre les procédures WordPress.
Personnel éditorial
Merci
Admin
Parvez Afshar
C'est sympa et créatif – essayez d'en faire le plus beau et le plus convivial. Totalement génial maintenant, félicitations.
Carlito Thomas
J'adore le nouveau design ! Votre logo principal est un peu flou, cependant.
Arief Mardianto
Je fais toujours ce que WPB fait. Vie WPBv5
Stephen
Le nouveau design est simple mais puissant.
Félicitations à vous et à votre équipe Syed.
Personnel éditorial
Thanks Stephen
Admin
Ajay
Mise à niveau exécutée de manière étonnante ! Merci pour ce que vous faites pour la communauté WP
Personnel éditorial
Merci Ajay
Admin
Dawn Groves
Beau travail, Syed. Surtout la description du comment vous l'avez fait. Une autre offre à valeur ajoutée, c'est certain.
Dawn
Personnel éditorial
Thanks Dawn
Admin
Gayle Hardy
Excellent travail ! Félicitations, le site est superbe et toutes vos améliorations sont parfaites. J'apprécie tous les conseils, astuces et instructions faciles à suivre que vous avez partagés au fil des ans et j'ai hâte d'en apprendre davantage sur WP pour les années à venir.
Personnel éditorial
Merci Gayle pour votre soutien continu.
Admin
Herb Trevathan
Beau travail. J'adore Genesis : ) J'utilise souvent vos extraits.
Personnel éditorial
Thanks Herb – appreciate your support
Admin
Suman Gaudel
Content de voir le WPB dans un design réactif.
Personnel éditorial
Cheers
Admin
Sowmay
Où puis-je obtenir votre nouveau plugin de partage social ?
Support WPBeginner
Salut Sowmay,
C'est un plugin personnalisé que nous avons développé pour notre propre usage.
Admin
Pat Fleck
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
Personnel éditorial
Thanks Pat
Admin
Dallas
J'adore le nouveau look du site. Beau travail ! Il semble que votre largeur totale soit d'environ 940px. Y a-t-il une raison spécifique pour avoir choisi une largeur étroite ?
Personnel éditorial
Parce que la plupart de nos images de contenu font 520px de large. Nous voulons nous assurer que notre site reste rapide car beaucoup de nos utilisateurs n'ont pas une connexion Internet rapide. Opter pour une largeur de contenu plus grande et télécharger des images de plus grande taille ralentit encore le site.
Ceci n'est pas perceptible dans la partie occidentale du monde, mais beaucoup d'autres pays ont une connexion Internet très lente.
Admin
Wesley Banks
Si vous n'étiez pas aussi préoccupé par les tailles d'image existantes ou les vitesses Internet lentes, auriez-vous changé la largeur ? J'ai toujours du mal à créer de nouveaux sites, quelle est la meilleure largeur de contenu. Donc, j'aimerais entendre vos réflexions. Merci !
Personnel éditorial
J'aurais conçu à 1140 à ce moment-là car les images plus grandes sont certainement plus belles.
Doug
Beau travail Syed.
Personnel éditorial
Merci Doug
Admin
Andre
Incroyable, tout simplement incroyable !
Personnel éditorial
Merci Andre
Admin
Teresa Maslonka
Félicitations pour la nouvelle refonte, et merci pour vos changements réfléchis. J'ai vraiment hâte d'explorer le site !
Personnel éditorial
Merci Teresa pour vos aimables paroles.
Admin
Sowmay
Syed, j'ai trouvé ce design plus adorable que le précédent.
Personnel éditorial
Merci
Admin
Banna
Le design est joli.
Mais en faisant défiler l'article, la barre latérale me manque. On dirait qu'on a beaucoup d'espace.
Personnel éditorial
Merci pour votre retour Banna. Dans les prochains jours, nous ajouterons des boîtes de défilement pour ajouter du contenu pertinent pour certains articles.
Admin
Adeel Sami
Bonjour, Syed !
Ce design est tout simplement génial — épuré, simple et élégant !
Congrats!
Neal Umphred
Très joli, en effet…
kharid
merci beaucoup pour cet article