Voici une petite liste de template vierges, reconnus pour leurs qualités (code, bonnes pratiques etc) getskeleton. html5boilerplate initializr qui est une version un peu allégée du précédent Pour créer un thème wordpress: underscores.me Ou le générateur de thème : wpthemegenerator
Si vous utilisez le plugin SEO by Yoast, il y a de fortes chances pour que vous utilisiez le champ meta-description pour améliorer la description de votre page ou article dans les résultats de recherche. Pour des questions d’ergonomie, il peut-être parfois plus adéquate d’afficher ce texte, souvent plus explicite que l’extrait par défaut de […]
Si vous codez votre propre thème wordpress, vous aurez certainement besoin de mettre en évidence l’élément de menu de la page en cours. Cela permet à l’utilisateur de mieux se repérer sur le site. Par défaut, wordpress génère pour chaque page en cours une classe .current-menu-item sur l’élément de menu actif. Il vous suffit donc […]
Ce mémo est une adaptation de l’article posté par l’agence Themetry. A peu près tous les sites ont un footer disposant de blocs de contenu : des sous menus, des liens, un logo, un calendrier ou tout autre élément décoratif. C’est particulièrement vrai sur les thèmes premium des CMS tels que wordpress. Des sidebar ou […]
Voici un exemple de page oblique crée uniquement en html/css. C’est le genre de design que l’on voit souvent sur des images, portfolio ou présentation de thèmes. Rarement codées puisque très difficiles à maintenir, notamment le côté responsive qui est impossible à réaliser, ca reste néanmoins un exercice intéressant. Le rendu en tout cas est […]
Pour un mega-menu classique, en version dropdown, on trouve d’innombrables plugins wordpress très efficaces. Vous en avez déjà une longue liste sur wpmudev par exemple. Notre but ici n’est pas d’avoir un « dropdown-menu » ( menu déroulant ) gigantesque, mais bien un sous menu qui prend toute la largeur de l’écran avec un effet d’opacité ou […]
Voici un exemple de grille flex, trouvée sur le CodePen de Ruslan Pivovarov. Reprenant la logique bootstrap, elle comporte la base d’une disposition en 12 colonnes et permet de structurer sa page très facilement. Pour l’utiliser, il faut se servir du « container » pour englober son contenu. A l’intérieur on glisse autant de row que nécessaire. […]
Les infographies sont partout, du bloc au site plus sérieux, et nous sommes peu nombreux à rendre cette image descriptive accessible. Pour rendre une infographie ou toute autre image complexe accessibles, une simple alternative textuelle ne suffit pas. Les infographies sont là généralement pour regrouper tout un tas d’informations de manière ludique visuelle et concise. […]
Voici quelques exemples de diagonales, faites de différentes manières. Il est en effet possible de créer ce genre de design à l’aide d’images ou de svg qu’on insère au début et à la fin de chaque bloc. On peut aussi le faire avec des div coupés en triangles, placés en dur ou en pseudo élément. […]
Cerberus e-mail-button-generator buttons.cms backgrounds.cm/ putsmail.com htmlemailcheck.com email-layout-calculator fly-bird outlook-fix code Pen inliner-v2 inline-css css-inliner htmlemail.io roadie responsive-grid-master emailframe.work https://www.base64-image.de/ http://kalinka.tardate.com/ ical.marudot.com Avec ça, vous devriez vous en sortir pour obtenir un email lisible partout ! Enfin pour terminer, faites un tour du côté de l’excellent caniemail réalisé entre autre par Remi Parmentier. Visitez aussi blog.edmdesigner.com […]