Un exemple de ce que l’on peut faire avec Gutenberg, le nouvel éditeur de WordPress

agence-wordpress-editeur-gutenberg-gratuit

Ca y est, WordPress 5.0.1 est sorti et c’est la révolution ! Son nouvel éditeur interactif et dynamique va-t-il tenir ses promesses ? Quelques exemples de ce que l’on va pouvoir créer à partir de Gutenberg.


Bien sûr, un joli paragraphes avec des mots dedans.
Et juste au dessus, un séparateur…

On pourra immédiatement attribuer taille de police et couleurs sur n’importe quel paragraphe…

Ca y est, WordPress 5 est sorti et c’est la révolution ! Son nouvel éditeur interactif et dynamique va-t-il tenir ses promesses ? Quelques exemples de ce que l’on va pouvoir créer à partir de Gutenberg.

Avec un texte par dessus !

Je peux changer la couleur
de la BANNIÈRE

Un titre

Un sous-titre

Un sous-sous titre

Un sous-sous-sous titre ? On s'arrêtera là, finalement !
[Ceci est un texte préformaté]

contact-agence-web
Une image simple, avec une légende
contact-agence-web
Miniature

Sur simple demande par mail, nous vous adressons les codes du site
et nous vous expliquons comment faire.


tourisme-site-wordpress-paris-poitiers-bordeaux
L’image est en pleine page
Enfin un joli tableau !Cellule 1Cellule 2Cellule 3
Et tout est automatique LoveLoveLove
Love

Ajouter une galerie d’images

Et enfin, des colonnes pour écrire des textes agréables à lire et non des textes à rallonge qui sont illisibles et peu recommandés pour les personnes handicapées.

Et la magie opère si l’on attribue également un fond de couleur sur l’une des colonnes…

C’est plus agréable de lire sur deux colonnes, vous ne trouvez pas ?
Fluide, fonction du nombre de caractères et lignes…

C’est plus agréable de lire sur deux colonnes, vous ne trouvez pas ?

Avez-vous noté que l’on vient d’enrichir cette histoire… À votre tour, maintenant !

Sur simple demande par mail, nous vous adressons les codes du site
et nous vous expliquons comment faire.

Gutenberg, le nouvel éditeur de WordPress

agence-wordpress-editeur-gutenberg

Avec la sortie de WordPress 5.0.1, c’est la révolution de son éditeur qui est au cœur de cette version tant attendue par les experts. La rédaction des articles et des pages est plus souple, créative et interactive que par le passé. Découvrons-la ensemble…

Le nouvel éditeur de WordPress se veut plus moderne et dans l’air du temps des nouvelles plate-formes de contenus (Medium, Paper de Dropbox, Note…) qui ont désormais le vent en poupe. L’innovation pousse au changement… inexorablement.

Qu’est-ce qui change avec la nouvelle version de WordPress 5.0 ?

Ce nouvel éditeur va vous permettre de gérer et de créer des contenus de façon très visuelle en renforçant la cohérence entre ce que vous concevez en coulisse et ce que vous voyez à l’écran.

Outre les options textuelles traditionnelles (alignement, gras, italique, listes à puces, etc…), ce nouvel éditeur innove grâce à de nombreuses options que l’on utilise à travers le concept de blocs (voir ci-dessous).

Proposition d’insertion d’un élément dans l’article

Qu’apporte ce fameux Gutenberg ?

Les équipes de WordPress ne cessent de travailler sur les modules internes pour rendre la publication de contenus plus fluide et simple pour l’utilisateur.

Par le passé, nous nous sommes souvent arrachés les cheveux à cause de shortcodes et bouts de codes à intégrer, qui rendaient la maintenance de nos pages souvent délicate voire bancale…

La notion de « widgets » devrait disparaître dans le futur pour permettre d’ajouter des contenus intelligents à des endroits mieux choisis et ne pas trouver forcément présentes les éternelles et mêmes informations dans la barre latérale à la lecture d’un article, par exemple. Nous allons pouvoir jouer avec nos blocs et optimiser les informations en fonction des attentes de nos lecteurs et publics.

Une des plus grandes forces de cette mise-à-jour repose sur l’intégration de contenus enrichis, sans devoir passer systématiquement par l’ajout d’extensions, l’enjeu étant de simplifier ainsi la mise-en-avant d’éléments importants : images, galeries, vidéos, tableaux, boutons, tout en ayant la main sur la personnalisation de certains de ces derniers (en cours de développement).

Par exemple : ajouter une lettrine, changer la taille d’une image (une photo à 25%, c’est plus intelligent qu’un calcul en pixels !), ajouter des couleurs sur certains blocs etc…

Un temps d’adaptation nécessaire

Ce joli tableau de l’innovation étant dressé, il est important de rester très prudent et ne pas se précipiter sur le bouton de mise-à-jour de cette nouvelle version et d’attendre quelques temps les éventuels patchs correctifs qui ne tarderont probablement pas à mis en place par les équipes de développement.

Ce nouvel éditeur s’inscrit dans un changement de grande ampleur et il faut s’assurer qu’il ne vienne pas rompre et déstructurer les pages de certains sites WordPress actuels. Cela fait partie du jeu, innover, tester, déployer et tester de nouveau.

Chaque site internet a été construit à partir des besoins et des souhaits différents de nos clients, et chaque site relève d’une combinaison d’extensions et de thèmes étudiée minutieusement. Mettre à jour WordPress demande donc du soin et de l’attention toute particulière et il ne faut pas faire n’importe quoi.

Cependant, il est impossible pour une équipe de tester toutes les configurations existantes et il est d’usage de demander aux utilisateurs de faire remonter les problématiques rencontrées.

Dans notre agence, nous sommes au faîte des différents développements apportés à WordPress et nous ne choisissons jamais les modules intégrés par hasard. Grâce à la communauté des développeurs et grâce aux conférences auxquelles nous assistons (et donnons), nous établissons un périmètre de sécurité et de veille technologique nécessaire afin de garantir une grande réactivité face à ces évolutions.

L’utilisateur final – Vous, Moi – va donc devoir apprendre ces nouvelles notions et adopter ce nouvel éditeur. C’est une étape de l’histoire incontournable tant sur l’évolution des habitudes que dans l’aptitude au changement. Et tout va bien se passer.

Même pas peur !

Rappelons que l’on peut toujours annuler ce que l’on vient de faire (petite flèche en haut à gauche – en mode éditeur), WordPress n’a pas abandonné l’option de révisions des articles (revenir à la version précédente) et lorsque vous rédigez, seule la publication en cours d’édition est concernée, ce n’est pas l’ensemble de votre site qui va être totalement chamboulé, rassurez-vous.

Les grands avantages de cette évolution

À nous de jouer le jeu et de profiter de ces nouvelles options pour enrichir nos contenus : ajout de photos, vidéos, personnalisation des boutons et structure plus nette des articles.

Cela va dans le bon sens (très bon) d’une optimisation de votre présence dans les moteurs de recherche et donc de votre référencement naturel.

Organiser vos contenus et ajouter des éléments à forte valeur ajoutée vous permettra également de mettre en lumière toutes les informations importantes à partager avec vos lecteurs. Ils vous en seront reconnaissants.

Jetez un oeil à cette mise-en-page que nous avons créée pour vous montrer quelques exemples de contenus avec Gutenberg.

Afin de vous accompagner dans cette découverte, Colormyweb vous propose de tester directement Gutenberg. Nous avons conçu un site de démonstration rien que pour vous (sur demande).

Alors n’attendez-plus ! Passez à l’action et découvrez vite le nouvel éditeur de WordPress !

Sur simple demande par mail, nous vous adressons les codes du site
et nous vous expliquons comment faire.

Un premier BootCamp très réussi

bootcamp-wordpress-agence

La semaine dernière, une petite équipe s’est réunie dans le sud-ouest de la France pour travailler ensemble et créer une nouvelle émulation dans la communauté WordPress : le premier WordCamp ou BootCamp.

Deux sujet principaux étaient abordés : la traduction (l’écosystème dans son ensemble et la découverte de toutes ces petites fourmis qui s’activent pour traduire WordPress et ses composants dans toutes les langues) et la professionnalisation (certification).

Des profils très différents étaient présents : du développeur au designer, en passant par le créateur de superbes bougies naturelles…

Un moment inoubliable et riche d’échanges.

Nous remercions infiniment les sponsors sans lesquels cet évènement n’aurait pas pu avoir lieu.

– PlanetHoster @planethoster
– Novaldi @novaldi64
– NeticPro @wpchannel
– WPalacarte @wp_alacarte
– WPfr @wpfr
– WPMX @WPMXday

Et en résumé

[Revue de presse] Beaver Builder, le constructeur de page WordPress complet

[revue de presse – 26 novembre 2015] – Extension WordPress / outil / front-end

Beaver Builder est un constructeur de pages WordPress qui se démarque de ses concurrents par sa facilité d’utilisation et sa précision. Outre une documentation riche et un support très réactif, l’outil est ergonomique et accessible sans forcément posséder une connaissance approfondie des classes CSS (même si à terme, cette exigence permet d’être plus autonome).

Afin de me concentrer sur mon cœur de métier, je n’ai pas toujours le temps de construire des pages codées et j’ai besoin d’aller à l’essentiel : concevoir et designer. J’ai trouvé l’outil qu’il me faut.

J’ai opté pour Beaver Builder depuis plusieurs mois maintenant et son évolution est exemplaire dans l’écosystème WordPress. L’un de ses points forts, c’est qu’il permet de concevoir des maquettes comme je pourrais le faire pour le print.

Beaver Builder est accessible pour les « débutants plus » déjà un peu à l’aise à utiliser WordPress.  Mais l’outil va aussi beaucoup plus loin et peut servir de base pour des projets de type UX Design, maquettes, prototypages et sites aboutis. Car il est très complet.

découvrir beaver builder

constructeur de page pour WordPress

Caractéristiques

Si vous n’êtes pas encore familier avec les constructeurs de pages, je vous invite à découvrir la vidéo de présentation que j’ai réalisée pour vous.

Sachez qu’une version de démonstration est disponible en ligne et le téléchargement d’une version allégée possible.

Beaver Builder est un outil front-end

Beaver Builder est une extension qu’on installe de façon classique sur un site WordPress.Éditeur front-end, Beaver Builder vous permet de construire votre page en temps réel sur votre site web. Vous pouvez voir les résultats immédiatement.

Net avantage par rapport à ses concurrents qui proposent souvent une mise en page dans les coulisses (appelées communément back-end ou back-office). Tant que vous ne publiez pas le travail en cours, vos modifications ne sont pas enregistrées.

Beaver Builder est compatible avec la majorité des thèmes WordPress

Il est évidement impossible de tester cette compatibilité avec les milliers de thèmes existants mais si votre thème d’origine a une très bonne réputation et que son éditeur a bien codé ce dernier, peu de surprises d’incompatibilité. Et puis le support de Beaver Builder est très réactif. La team a procédé à de très nombreux tests jusqu’à présent très concluants.

Beaver Builder est très complet

Avec une prise en charge de 24 modules et 14 modèles de page d’accueil pré-maquettées ainsi que 13 modèles de page de contenu et bien sur, une page vierge, vous pouvez commencer à travailler. Laissez ensuite votre créativité s’exprimer.

Si vous souhaitez plus de fonctionnalités, Beaver Builder est compatible avec vos autres extensions et un de ses atouts majeurs est la prise en compte de ces fonctionnalités dans sa propre grille d’outils. Ainsi, vous installez WooCommerce, Beaver Builder se charge de récupérer les widgets, il ne vous reste plus qu’à les glisser où vous souhaitez.

Coté contenu, vous pouvez sélectionner le type de publications que vous souhaitez personnaliser avec l’outil : les pages, les articles, les produits.

La force du design : les gabarits, les templates et les modules

L’une des grandes forces de Beaver Builder est sa proposition incluse dans l’outil : les gabarits et templates (ou demos).

Quel bonheur de pouvoir concevoir ses propres gabarits et des les exporter, donc les exploiter ! Grâce à cela, je peux constituer mes propres bibliothèques et fragments de design à utiliser pour un autre site par exemple.

Un petit bémol dans la version actuelle et pour laquelle j’ai proposé à l’équipe une possibilité. En l’état actuel de l’extension, nous devons tout importer/exporter en un seul lot et l’option d’export d’un seul gabarit n’est pas disponible. Il faudra supprimer les gabarits qui ne vous intéressent pas à la main sur le nouveau site, par exemple.

Des homepages adaptées

Par défaut, les pages d’accueil (dites homepage) sont en pleine page.

L’éditeur propose des idées de contenus pour les types classiques de sites : corporate, photographie, e-commerce… Ce sont des propositions et pistes de départ que vous pourrez modifier.

Des fragments sont proposés pour cibler un type de page : à propos, contact, portfolio…

Et vous pouvez tout mixer. Un outil, des possibilités.

Des modules personnalisables

Chaque aspect graphique du module est personnalisable : alignement, images, icônes, liens, animations, padding et marges.

24 modules sont disponibles, classés en trois catégories : Extensions de base (texte, titres, images, vidéos et séparateurs, Extensions avancées et des Widgets WordPress.

Ce qui fait la popularité de l’outil est son panel de fonctionnalités avancées, 19 au total et à titre d’exemple :

  • Call to actions
  • Accordéon
  • Galeries d’images
  • Cartes
  • Tableau de prix
  • Diaporama
  • Témoignages…

Le groupe WordPress Widgets reprend tous les widgets des autres extensions de votre site.

Prix des abonnements

Beaver Builder est disponible sous trois licences annuelles (renouvellement dégressif)

  • Standard – $99 (n’inclut pas le thème proposé)
  • Pro – $199
  • Agency – $399 (marque blanche)

Beaver Builder est également prêt pour le SEO

L’optimisation des sites internet afin de pouvoir être correctement reconnus par les moteurs de recherche est un aspect important à prendre en compte. Vous avez besoin que votre site apparaisse dans les pages de résultats des moteurs de recherche (SERPs).

Builder utilise les meilleurs standards de référencement comme la compression de code et schema.org pour assurer une bonne optimisation.

Après avoir audité et retravaillé des contenus pour des clients et modifié des pages avec ou sans l’outil, aucune différence (donc ni mauvaise) n’a été relevée et aucune incidence sur des éventuels déclassements.

Beaver Builder est traduit en français

Il n’est donc pas nécessaire d’intégrer une extension supplémentaire de traduction.

Beaver Builder est 100% Responsive

À l’heure où Google nous annonce que le volume de recherche sur mobile exploserait en 2015, il est devenu incontournable de réaliser des sites qui s’adaptent à tous les supports.

Beaver Builder déclaré mobile-friendly par Google. Un nouveau bon point pour l’éditeur de cet outil.

Beaver Builder propose une gestion Multisites

Vous gérez un réseau de plusieurs sites Beaver Builder prend en charge les installations multi-sites, ce qui vous permettra d’économiser beaucoup d’effort pour gérer des projets en réseau.

Banner - 468 x 60

Le mot de la fin…

Certains développeurs et codeurs puristes souhaitent tout coder, maitriser chaque ligne. Pourquoi pas.

Il y a 20 ans, on codait tout de A à Z. Puis des process innovants sont apparus, permettant de gagner du temps.

Puis des CMS sont également apparus, comme WordPress balayant les sites codés page par page. Exit Dreamweaver (que je remercie, j’ai beaucoup appris grâce à lui).

Le temps de l’innovation, le temps aussi des questions de fond. À l’heure de la mobilité, d’une abondance de contenus.

Où placer le curseur ?

Je ne souhaite pas entrer dans le débat des développeurs qui dénigrent souvent le potentiel de ce type d’outils.

Certains constructeurs sont lourds, laissent en effet des traces de code et shortcodes au moment de la désinstallation etc… Mais Beaver Builder tient de vraies promesses.

Je leur réponds que ces outils ont pourtant bel et bien été conçus par des développeurs talentueux et non des amateurs et que de l’autre côté du miroir, un code très propre avec un design « dégueulasse » n’est pas souhaitable non plus.

Il est vraiment temps de s’unir sur des problématiques communes d’ergonomie, d’accessibilité pour offrir ce qui me semble être le plus important dans la conception de sites internet : une expérience utilisateur riche. Un site qui fonctionne c’est très bien, un site qui est beau, fluide et qui fonctionne, c’est encore mieux, non ?


Un nouvel article a été publié en tant que billet invité sur le site de http://wpformation.com

[News] Google applique la tendance "Mobile-Friendly" dans sa nouvelle mise-à-jour

Avec la nouvelle mise à jour de son algorithme prévue le 21 avril prochain, Google applique la tendance « Mobile-Friendly », tendance qui aura évidemment des répercussions sur les résultats des SERPs et le référencement naturel.

Selon les spécialistes français et webmasters de Google, cette mise-à-jour devrait avoir un impact encore plus important dans la vie du Web, que les deux précédentes, Panda et Pingouin. Elle marque la compatibilité mobile comme critère de classement.

Vous pouvez découvrir le hangout qui a eu lieu sous forme de questions/réponses. Ci-après, ce qu’on pourra retenir.

 

La mise à jour « Mobile Friendly » va essentiellement se concentrer sur les résultats mobiles. Google souhaite récompenser les sites offrant la meilleure expérience utilisateur aux internautes. Et nous en sommes ravis.

Cela favorisera donc les sites optimisés pour tous leurs écrans.

Ce nouvel algorithme ne privilégiera pas plus les versions dédiées d’un site « spécialement conçues pour mobiles » car ce sont bien les pages en tant qu’items qui sont concernées et mises en avant dans les SERPs, quelque soit la méthode utilisée (responsive-design, applications, sites mobiles dédiés).

À retenir :

1. Une mise à jour mondiale

Le déploiement de la mise-à-jour est prévue dans tous les pays du monde et devrait être assez rapide même s’il faut attendre quelques jours avant d’en ressentir les effets dans les résultats.

2. Ce sont les résultats obtenus dans les recherches passées sur les smartphones qui sont concernés

Toutes les versions de Google Search ne sont pas concernées par cette mise à jour, qui se concentrera sur les recherches passées sur les mobiles et donc les résultats issus de ces recherches.

Aucun changement n’est à prévoir pour les tablettes.

3. Et les sites qui ne sont pas adaptés aux mobiles ?

La mise à jour « Mobile Friendly » ne va pas dévaluer les sites non-responsives. Cependant, l’effet de la MAJ est indirect : les sites qui adoptent une stratégie UX et placent l’utilisateur au centre de leur développement seront gagnantes et par effet domino, celles qui ne le sont pas risquent de dégringoler et être moins visibles.

4. Granularité et logique de contenu…

Le label « Mobile Friendly » ne sera pas attribué à l’intégralité de votre site mais Google continue cette logique de « contenu first » et analysera chaque page afin d’en attribuer le critère.

Aussi et en fonction de votre cœur d’activité, le plus important est de véritablement prendre soin de votre contenu-phare.

5. L’analyse de la page, en temps réel

Google analysera les pages indexées à chaque crawl et le label « Mobile Friendly » sera alors attribué en temps réel.

Conclusion

L’analyse de l’algorithme ne sera pas nuancée : la page est optimisée ou elle ne l’est pas.

Google continue évidemment à prendre en compte la rapidité d’affichage des pages qui demeure un critère très important.

Outils pour vous aider.

Comment vérifier que votre site est « Mobile-Friendly » ?

J’ai vérifié mon propre site et suis heureuse d’annoncer que Google l’aime bien 🙂

Et le votre ?

mobile-friendly-test
Test Google

 

[Video] Design, ergonomie et lisibilité des sites internet, WordPress Camp Paris

Voici la vidéo – sur la chaine WordPress Internationale – de ma conférence « Design, ergonomie et lisibilité des sites internet » donnée au WordPress Camp Paris en janvier dernier.

La qualité web est une affaire transverse qui touche à la fois les notions de visibilité (et lisibilité), de perception (l’ergonomie) et de technique (bon fonctionnement) dans le but de délivrer des contenus et des services de qualité qu’attendent les visiteurs.
L’occasion de rappeler qu’elles peuvent être les bonnes habitudes à prendre pour améliorer l’expérience utilisateur et renforcer la qualité attendue, à travers de bonnes pratiques graphiques, typographiques et fonctionnelles.
In fine, le rappel que nous réalisons les sites pour les gens : USER and Qualité first 🙂

Slides disponibles

Vous pouvez  également télécharger les slides de la présentation.

Présentation de ma conférence au WordPress Camp Paris

Le WordCamp 2015 s’est achevé dimanche et il aura accueilli près de 300 personnes !
Une occasion unique pour la communauté WordPress française (mais pas seulement, nous avons eu la grande chance de recevoir plusieurs amis étrangers) d’assister à des conférences, de pouvoir participer à des échanges, de voir émerger de nouveaux projets dans une atmosphère joyeuse et studieuse.

Pour ma part, l’occasion de donner une conférence sur un sujet transversal qui touche tant au design, qu’à l’ergonomie des sites internet.

J’ai préparé cette conférence pendant plusieurs semaines et cela n’a pas été simple de devoir élaguer et trier dans mes données et recherches, tant le sujet est vaste et intéressant (notamment sur les sciences cognitives…).

Je me suis donc restreinte à balayer le plus de pistes pour partager cet objectif avec la communauté : comment tendre le plus possible vers une exigence de qualité dans la conception des sites que nous réalisons.

Retrouvez la présentation de cette conférence ici :

Et puis pourquoi se priver de compliments ?

Allez, quelques petits tweets 🙂

Retour sur notre interview à la WordPress Camp…

La WordPress Camp est un peu loin maintenant mais elle demeure un très agréable souvenir.
Beaucoup de rencontres dont une s’est soldée autour d’une interview préparée par nos amis français et bien sur Casper, l’un des co-fondateurs de la WP Camp Europe dont voici le lien.

http://marketpress.com/2014/ladies-panel-interview-wordcamp-paris/

Amusez-vous !

WordCamp Paris – Interview – Aloisia Gabat / Jenny Beaumont / Frederique Game from MarketPress on Vimeo.


Un peu plus loin sur les réseaux sociaux…