Vérifier, contrôler et valider ses productions
Avant de publier des contenus en ligne, et sans attendre le dernier moment, il est important de controler et valider l’ensemble des contenus, aussi bien au niveau des textes, des images, des formats que du code en lui même et de son optimisation.
Ces tâches bien qu’elles soient toujours plus nombreuses, parfois chronophages, et souvent fastidieuses, s’avèrent nécessaires et incontournables pour qui souhaite servir aux mieux les divers internautes et autres utilisateurs.
Pour nous aider, à assouplir ce travail, il existe deux approches qui, bien que différentes, restent complètement complémentaires et cumulables. La première approche s’appuie sur des outils totalement tierces et externes, bien souvent ce sont des outils en ligne, alors que la seconde consiste à mettre en place une série de tâches automatisées, tournant aussi bien sous Gulp, Grunt que NPM, et qui executeront des vérifications à divers niveaux de nos sites et applications web lorsque nous le souhaitons.
De quelles vérifications parlons nous ?
La première des vérifications, qui d’ailleurs est souvent négligée, est de s’assurer de la qualité d’écriture des contenus, à savoir que ceux ci soient écrits dans une langue neutre, sans erreur grammaticale ni faute d’orthographe (à ce sujet si vous en recontrez sur le site de Puce et Média, n’hésitez surtout pas à nous les remonter, on vous en remercie par avance).
Pour le reste des principales vérifications nous allons les séparer en deux catégories, contenu et contenant. Les deux ne faisant pas référence au même profil de validation, ni au mêmes types d’outils. Ces deux petites listes sont données à titre indicatif, afin de se faire une idée sur ce dont nous parlons. N’hésitez pas à vous rapprocher d’une liste beaucoup plus exhaustive comme par exemple The ultimate website launch checklist ou encore de l’excellent ouvrage Qualité Web, les bonnes pratiques pour améliorer vos sites.
Vérifier le contenu et sa cohérence
- Posséder les droits du contenu (concept, texte, images, typos…)
- Vérifier l’ensemble des liens (entrants et sortants)
- S’assurer de l’adaptation de qualité des images aux périphériques
- Respect des couleurs et de la charte graphique
- Valider la pertinence et la cohérence des contenus
- Ce contenu a-t-il une valeur ajoutée par rapport au reste des contenus
S’assurer de la bonne mise forme
- Vérifier la structure employée (HTML, balises et attributs)
- Valider la portabilité des feuilles de styles sur tout lecteurs
- Confirmer la distribution sur plusieurs périphériques
- Valider l’accéssibilité générale des contenus (navigation, information…)
- Optimiser le service des pages (compression, mise en cache…)
- Posséder une feuille de style dédiée à l’impression
- Confirmer la bonne utilisation des métadonnées
- S’assurer des performances de mise à disposition des contenus
Quelques outils dont nous pouvons nous rapprocher
Il est important de prendre note que l’ensemble des outils proposés par ce tableau n’est d’une part aucunement exhaustif, mais également et d’autre part, cet ensemble ne fait référence qu’à des outils qui soient disponibles gratuitement. Il existe une large liste d’outils qui sont des outils payants, qui sont de très bonnes manufactures mais qui ne sont pas approchés par cet article.
Nous pourrons au fur et à mesure explorer leur utilisation et leur complémentarité au travers d’articles plus verticaux.
| Outils | Type | Fonction | Description | |
|---|---|---|---|---|
| Accessibility Guidelines |  | Accessibility | Online | Making work accessible creates a better experience across the board. Use this checklist to help build accessibility into your process no matter your role or stage in a project. |
| Accessibility Verification |  | Accessibility | NPM | accessibility-developer-toolsaccessibility |
| AChecker |  | Accessibility | Online | This tool checks single HTML pages for conformance with accessibility standards to ensure the content can be accessed by everyone. See the Handbook link to the upper right for more about the Web Accessibility Checker. |
| Browser Shots |  | Browsers | Online | Browsershots makes screenshots of your web design in different operating systems and browsers. It is a free open-source online web application providing developers a convenient way to test their website's browser compatibility in one place. When you submit your web address, it will be added to the job queue. A number of distributed computers will open your website in their browser. Then they will make screenshots and upload them to our central dedicated server for your review. |
| Can I use |  | HTML, CSS and JS | Online | Can I use provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers. |
| CSS Lint |  | CSS | Online | CSS Lint points out problems with your CSS code. It does basic syntax checking as well as applying a set of rules to the code that look for problematic patterns or signs of inefficiency. The rules are all pluggable, so you can easily write your own or omit ones you don't want. |
| CSS Optimisation | | CSS | NPM | grunt-contrib-cssmingulp-clean-cssgrunt-uncssgulp-uncss |
| CSS Validation Service |  | CSS | Online | The W3C CSS Validation Service is a free software created by the W3C to help Web designers and Web developers check Cascading Style Sheets (CSS). It can be used on this free service on the web, or downloaded and used either as a java program, or as a java servlet on a Web server. Do you need it? If you are a Web developer or a Web designer, this tool will be an invaluable ally. Not only will it compare your style sheets to the CSS specifications, helping you find errors, typos, or incorrect uses of CSS, it will also tell you when your CSS poses some risks in terms of usability. |
| Dr. Watson |  | Different verifications | Online | Dr. Watson for Windows is a program error debugger that gathers information about your computer when an error (or user-mode fault) occurs with a program. Technical support groups can use the information that Dr. Watson obtains and logs to diagnose a program error. When an error is detected, Dr. Watson creates a text file (Drwtsn32.log) that can be delivered to support personnel by the method they prefer. You also have the option of creating a crash dump file, which is a binary file that a programmer can load into a debugger. |
| Feed Validation Service |  | Feed | Online | This is a validator for syndicated feeds. It works with RSS 0.90, 0.91, 0.92, 0.93, 0.94, 1.0, and 2.0. It also validates Atom feeds. To use it, simply enter the address of your feed and click Validate. If the validator finds any problems in your feed, it will give you messages for each type of problem and highlight where the problem first occurs in your feed. If you're unsure what a message means, click the 'help' link next to the message for a fuller explanation. |
| Files Optimisation | | Files | NPM | gulp-zopfligrunt-contrib-zopfligulp-zipgrunt-contrib-compress-staginggrunt-contrib-compressgulp-concatgrunt-contrib-concatgrunt-unusedgulp Delete files and foldersvinyl-paths |
| GTMetrix |  | Performance | Online | Analyze your site’s speed and make it faster. GTmetrix gives you insight on how well your site loads and provides actionable recommendations on how to optimize it. |
| Hera |  | Accessibility | Online | HERA is a tool to check the accessibility of Web pages accoridng to the specification Web Content Accessibility Guidelines(WCAG 1.0). HERA performs a preliminary set of tests on the page and identifies any automatically detectable errors or checkpoints met, and which checkpoints need further manual verification. Manual revision is always needed to test whether a page is accessible. To be able to do this testing it is normally necessary to know the Accessibility Guidelines, how users work with assistive technology, and have some practical understanding of web page design. |
| HTML Optimisation | | HTML | NPM | gulp-cleanhtmlgulp-htmlcleangulp-htmltidygrunt-contrib-cleangrunt-htmlclean |
| HTML Validation | | HTML | NPM | grunt-html-valgrunt-htmlgrunt-html-validatorgulp-html-validatorgulp-htmlgulp-w3cjsgulp-htmlhintgrunt-check-pagescheck-pages |
| HTML5 Accessibility |  | Accessibility | Online | Get the current accessibility support status of HTML5 features across major browsers. Editor’s draft, December 2017 |
| Humaan's QA |  | Checklist | Online | Humaan's QA checklist for launching a website. Feel free to use this for yourself, published under a Creative Commons Sharealike license. |
| Image Optimisation | | Image | NPM | grunt-contrib-imageminimageoptim-cligulp-imagemingulp-tinypngtinifygrunt-responsive-images-sbcustomgrunt-responsive-images-extendergrunt-clowncargrunt-image-resizegrunt-webp-compressgulp-webpimagemin-webp base-64gulp-base64gulp-css-base64gulp-inline-base64 |
| Le validateur HTML du WDG |  | HTML | Online | The WDG HTML Validator is similar in many ways to the W3C HTML Validation Service. Most of the previous differences between the two validators have disappeared with recent development of the W3C validator. The errors reported are the same in virtually all cases. However, some minor differences may arise. |
| Minify HTML | | HTML | NMP | gulp-htmlmingrunt-contrib-htmlmin |
| Minify JavaScript | | Files | NMP | grunt-contrib-uglifygrunt-closure-compilergulp-uglifygulp-closure-compilergulp-concat-jsgrunt-contrib-jshintjshint-html-reporter |
| Mixed content |  | Mixed Content | Online | Testez votre site internet ou votre boutique e-commerce à la recherche de mixed content. Le contenu mixé peut empêcher la connexion sécurisée avec le protocole HTTPS. En 1 clic, vérifier si votre site contient des contenus mixes tel que des scripts / styles ou images… |
| Mobile Checker |  | Mobile Checker | Online | The Mobile Checker is a tool for Web developers who want to make their Web page or Web app work better on mobile devices. |
| Nu HTML Checker |  | HTML | Online | The Nu Html Checker (v.Nu) is an ongoing experiment in better HTML checking, and its behavior remains subject to change. In particular, because new types of error checks continue to be actively added to the checker, there is no guarantee provided that if the checker reports zero errors for a particular document at one point in time, it will report zero errors for that same document at some later point in time. |
| PhpSecInfo |  | Security | Online | PhpSecInfo provides an equivalent to the phpinfo() function that reports security information about the PHP environment, and offers suggestions for improvement. It is not a replacement for secure development techniques, and does not do any kind of code or app auditing, but can be a useful tool in a multilayered security approach. |
| Pingdom |  | Performance | Online | Pingdom offers cost-effective and reliable uptime and performance monitoring for your websites. We use more than 70 global polling locations to test and verify our customers’ sites 24/7, all year long. With Pingdom you can monitor your website’s uptime, performance, and interactions for a better end-user-experience. Your customers will thank you. |
| Robots.txt Checker |  | Web Server | Online | Robots.txt files (often erroneously called robot.txt, in singular) are created by webmasters to mark (disallow) files and directories of a web site that search engine spiders (and other types of robots) should not access. This robots.txt checker is a 'validator' that analyzes the syntax of a robots.txt file to see if its format is valid as established by Robot Exclusion Standard (please read the documentation and the tutorial to learn the basics) or if it contains errors. |
| SSL Checker |  | SSL | Online | This SSL Checker will help you diagnose problems with your SSL certificate installation. You can verify the SSL certificate on your web server to make sure it is correctly installed, valid, trusted and doesn't give any errors to any of your users. To use the SSL Checker, simply enter your server's hostname (must be public) in the box below and click the Check SSL button. If you need an SSL certificate, check out the SSL Wizard. |
| SSL Decoder |  | SSL | Online | This site checks the SSL/TLS configuration of a server. In shows you the full certificate chain, including all kinds of information about every certificate, as well as connection information like ciphersuites and protocol support. |
| SSL Server Test |  | SSL | Online | This free online service performs a deep analysis of the configuration of any SSL web server on the public Internet. Please note that the information you submit here is used only to provide you the service. We don't use the domain names or the test results, and we never will. |
| Test an SSL Web Server |  | SSL | Online | Is your secure web server configured correctly? Misconfigurations can slow down your users' experience at best, and prevent them from reaching your site entirely at worst. Use this free SSL / TLS server tester to conduct a thorough analysis of your SSL web server performance. |
| Test everything |  | Web site tests | Online | Propose un panel d'outils permettant de tester un grand nombre de points sur l'intégralité du site. |
| The ultimate website launch checklist |  | Checklist | Online | We launched the original website launch checklist back in 2009 and, as is rapidly becoming tradition, have revisited it to check it's still relevant, valuable and useful. So, take a look and make sure you're ready to launch in style. |
| W3C Markup Validation Service |  | HTML | Online | This validator checks the markup validity of Web documents in HTML, XHTML, SMIL, MathML, etc. If you wish to validate specific content such as RSS/Atom feeds or CSS stylesheets, MobileOK content, or to find broken links, there are other validators and tools available. As an alternative you can also try our non-DTD-based validator. |
| Wappalyzer |  | Web analyser | Online | Wappalyzer is an open-source, platform independent utility capable of identifying 1,155 different web technologies. It was created by Elbert Alias in 2009, has received contributions from hundreds of developers worldwide and enjoys an active user base of a million people. |
| Web Page Test |  | Performance | Online | Run a free website speed test from multiple locations around the globe using real browsers (IE and Chrome) and at real consumer connection speeds. You can run simple tests or perform advanced testing including multi-step transactions, video capture, content blocking and much more. Your results will provide rich diagnostic information including resource loading waterfall charts, Page Speed optimization checks and suggestions for improvements. |
| Web Performance | | Performance | NPM | gulp-sitespeediogulp-webpagetestgrunt-web-performance |
| WebAIM Wave |  | Accessibility | Online | WebAIM provides a number of web accessibility products and services. The WAVE accessibility evaluation tool is administered by WebAIM. This free, online tool provides visual feedback of a page's accessibility. WebAIM web accessibility services include accessibility training, web site monitoring & reporting, certification, consulting, accessible site design, and accessibility repairs. |
| WebSite Optimization |  | Optimization | Online | Try our free web site speed test to improve website performance. Enter a URL below to calculate page size, composition, and download time. The script calculates the size of individual elements and sums up each type of web page component. Based on these page characteristics the script then offers advice on how to improve page load time. The script incorporates the latest best practices from Website Optimization Secrets, web page size guidelines and trends, and web site optimization techniques into its recommendations. |
| XML well-formedness checker and validator |  | XML Validator | Online | Use this form to check an XML document for well-formedness and (optionally) DTD-validity. External entity references are included, even when not validating. If the document is well-formed, the parser outputs the corresponding canonical XML. |
Aller plus loin
Even Faster Web Sites
Steve Souders
Souders' previous book, the bestselling High Performance Web Sites, shocked the web development world by revealing that 80% of the time it takes for a web page to load is on the client side. In Even Faster Web Sites, Souders and eight expert contributors provide best practices and pragmatic advice for improving your site's performance in three critical categories : JavaScript-Get advice for understanding Ajax performance, writing efficient JavaScript, creating responsive applications, loading sc...
High Performance Web Sites
Steve Souders
The rules in High Performance Web Sites explain how you can optimize the performance of the Ajax, CSS, JavaScript, Flash, and images that you've already built into your site -- adjustments that are critical for any rich web application. Other sources of information pay a lot of attention to tuning web servers, databases, and hardware, but the bulk of display time is taken up on the browser side and by the communication between server and browser. High Performance Web Sites covers every aspect of...
Qualité web - Les bonnes pratiques pour améliorer vos sites
Élie Sloïm, Laurent Denis, Muriel de Dona, Fabrice Bonny
Accessibilité, référencement, performance, navigation, sécurité... les bonnes pratiques du web enfin réunies dans un seul livre ! aujourd'hui, grâce à une multitude d'outils et de technologies qui rendent l'opération de plus en plus simple et intuitive, tout le monde ou presque peut réaliser un site internet. mais cela ne signifie pas pour autant que tout le monde sait concevoir un site qui réponde à toutes les exigences de qualité, d'accessibilité, de performance et d'ergonomie fa...
