CSS & Webdesign » Bonnes Pratiques

Guide de bonnes pratiques HTML & CSS par Google

Bruno Bichet — Thu, 03 May 2012 13:58:58 +0000

Soyez cohérent. C’est la conclusion que nous propose Google dans ce guide des bonnes pratiques de codage à l’usage des développeurs web et autres intégrateurs HTML et CSS. Lorsque vous reprenez du code, il est important de tenir compte du style d’écriture d’origine. Si votre prédécesseur utilise des espaces de part et d’autre des opérateurs arithmétiques, faites de même. Si les commentaires sont encadrés de symboles pour dessiner un bloc, faites de même aussi. Soyez cohérent.

Pour nous aider à choisir une conventions de codage pour les langages HTML et CSS, Google propose une liste de suggestions pour que tous les membres d’un projet partagent le même vocabulaire. L’idée est de se concentrer sur ce que l’on a à dire plutôt que sur comment le dire. Via le blog des nouvelles technologies.

→ Lire Google HTML/CSS Style Guide

Articles sur le même sujet

Recommandations pour développeurs web front-end

Bruno Bichet — Thu, 26 Apr 2012 16:12:07 +0000

Front-End Development Guidelines — Ce document regroupe un ensemble de bonnes pratiques et de recommandations pour les développeurs web : accessibilité, Javascript (& jQuery), HTML et CSS (& CSS3). Cerise sur le gâteau, vous aurez en prime des ressources complémentaires pour aller plus loin. Les liens qui suivent peuvent aider à la standardisation du code. Ils permettent de s’assurer que les fonctionalités CSS3 et HTML5 pourront être utilisées sur un grand nombre de navigateurs.

jQuery — Javascript sans grumeau
jQuery UI — Est à UX/UI ce que jQuery est à JavaScript
Modernizr — Détectez les fonctionnalités, pas le navigaeur !
RespondJS — Responsive web design dans les vieux navigateurs.
@font-face Generator – Les polices de caractère pour tous, partout.
RaphaelJS — Simplifie le dessin vectoriel dans les navigateurs.
HTML5 Boilerplate — L’alpha de vos projects web même si on pourrait encore faire le ménage.
Twitter Bootstrap — Prototypez rapidement vos applications web.

Merci à @picodix pour le lien o/

Articles sur le même sujet

Opquast : dites « bonjour » à M. Référent Accessibilité

Bruno Bichet — Thu, 16 Sep 2010 06:52:20 +0000

Je m’étais inscrit il y a déjà ~~quelques temps~~ très longtemps pour suivre les contributions pour la nouvelle version du référent accessibilité pour les sites web édité par Opquast sous la houlette de Elie Sloïm de l’équipe Temesis. Si je connais Opquast depuis son lancement, je me rend compte que je l’ai peu consulté : j’ai l’impression de faire de l’accessibilité comme Jourdain faisait de la prose, mais la plupart du temps, lorsque je prends connaissance d’une bonne pratique, je me rends compte que les miennes sont perfectibles. Vous aussi ? Faites comme moi et commencez donc par télécharger une copie des 217 bonnes pratiques pour la conception de sites web de qualité.

Vidéo de présentation Opquast

Opquast : les bonnes pratiques 2010. Envoyé par Opquast.

217 bonnes pratiques pour mieux «Web développer»

Ces bonnes pratiques sont classées selon une vingtaine de thématiques sur trois niveaux de sensibilité. Elles sont accompagnées d’une courte description menant à une fiche individuelle : numéro, description, date de création, niveau d’automatisation, objectif, solution technique, moyen(s) de contrôle, plus les tags associés.

18 thématiques pour cadrer vos bonnes pratiques

Alternatives,
Code,
Contact,
Contenus,
E-commerce,
Espaces publics,
Fichiers et multimédia,
Formulaires,
Hyperliens,
Identification,
Internationalisation,
Navigation,
Newsletter,
Présentation,
Serveur et performances,
Syndication,
Sécurité et confidentialité,
Tableaux.

Exemples de bonnes pratiques pour l’intégrateur web

Selon votre coeur de métier, il est possible de se concentrer sur les bonnes pratiques liées au design, à l‘intégration HTML/CSS, au référencement, aux contenus ou à l’e-commerce (liste non exhaustive).

La bonne pratique numéro 206 indique que Le site propose une ou plusieurs feuilles de style dédiées aux terminaux mobiles
La bonne pratique numéro 194 indique que Les liens d’accès aux versions traduites pointent directement vers la traduction de la page courante.
La bonne pratique numéro 120 indique que Les hyperliens de même nature ont des couleurs, des formes et des comportements identiques sur toutes les pages.
La bonne pratique numéro 118 indique que La soumission d’un formulaire est suivie d’un message indiquant la réussite ou non de l’action souhaitée

Opquast Reporting

L’inscription à Opquast Reporting permet de suivre gratuitement jusqu’à 3 projets de sites web en proposant une liste des bonnes pratiques à cocher au fur et à mesure de l’avancement de la mise en conformité de votre site.

Il est possible d’ajouter des collaborateurs, de rédiger et partager des notes privée ou des documents, ou encore de voir le pourcentage de bonnes pratiques déjà mises en place grâce à une barre de progression.

Une version Pro à partir de 2,5€ par mois vous permettra de suivre jusqu’à 10 projets avec 5 collaborateurs en bénéficiant d’une synthèse détaillée. Voir les autres offres Opquast.

En bref

Opquast est un outil original pour mettre en oeuvre — là tout de suite — les bonnes pratiques qui permettront à tous les visiteurs de profiter de votre site dans les meilleures conditions, à votre rythme et en fonction de vos priorités.

Lire le blog consacré à Opquast pour en savoir plus.

PS : le flux RSS disponible à l’adresse http://checklists.opquast.com/dailybp/feed permet d’afficher une bonne pratique par jour !

Articles sur le même sujet

10 bonnes pratiques pour des formulaires HTML efficaces

Bruno Bichet — Thu, 02 Jul 2009 14:40:31 +0000

Les formulaires sont indispensables pour recueillir les informations issues des utilisateurs. Leur mise en place nécessite quelques précautions que nous rappelle bbxdesign avec les 10 bonnes pratiques pour réaliser un formulaire d’après la conférence de Luke Wrobleski.

Aller droit au but (Path to completion),
Alignement des labels (Label alignment),
Aide et astuces (Help & tips),
Validation (Inline validation),
Actions primaires et secondaires (Primary & Secondary actions),
Actions en cours (Actions in progress),
Erreurs (Errors),
Input inutiles (Unnecessary inputs),
Organisation du formulaire (Form organization),
Engagement graduel (Gradual engagement).

Téléchargez la conférence audio The Value of Web Forms and Design Constraints au format mp3 (27.9 MB).

Autres ressources pour les formulaires HTML

JotForm — création de formulaires en ligne,
webjackalope — 12 exemples de formulaires d’inscription pour fainéant.
Fred Cavazzza en forms — Tout ce que vous avez voulu savoir sur les formulaires par un maitre du genre.

Stay tuned and mind the gap!