Outils et bonnes pratiques de développement web

Cet article traite de la maintenance d’un site web. Il est destiné vous rappeler les bases du bon sens et vous faire prendre connaissance de tous les outils qui peuvent vous faire gagner du temps dans votre processus de travail. Il ne se veut pas exhaustif, d’autant qu’il ne couvre pas ce que vous pourriez rencontrer dans une checklist typique de développement web.

Prérequis :

1. Garder son contenu clair et à jour

Après que votre site web ait accumulé des dizaines voire des centaines de pages, le contenu peut devenir vieux et en décalage avec ligne directrice du blog. La maintenance de votre site doit inclure un examen permanent des pages statiques qui peuvent avoir besoin de mises à jour et corrections. Bien sûr, le contenu apparaissant sur des articles ou pages d’actualités se retrouve dépassé mais n’a pas besoin d’être changé. Le mieux est de poster de nouveaux articles pour mettre à jour les informations. Bien sûr, en tant que développeur pour une entreprise ou une agence le contenu n’est probablement pas de votre ressort ; mais si vous êtes seul ou en freelance, la maintenance du contenu de votre site est une routine vitale. Des problèmes peuvent survenir si vos pages de Conditions Générales d’Utilisation et Termes des Services ne sont pas mises à jour et en adéquation avec les plus récents standards de l’entreprise. Revoir ce genre de documents qui apparaissent sur votre site ou application devrait être un élément régulier de votre maintenance. La documentation logicielle associée à un produit ou service peut aussi se retrouver périmée lors de mises à jour. Quand vous avez le temps, votre routine de maintenance devrait aussi comporter des ajouts et des modifications de la documentation, qu’elle soit consultable en ligne ou disponible au téléchargement. Les services que votre entreprise fournit peut requérir des accords entre les deux parties via un contrat légal. Ce document est-il bien à jour ? Gardez votre blog clair. Si vous encouragez vos lecteurs à participer à des conversations sur votre blog, vérifiez bien que vos articles ne contiennent pas de spams dans les commentaires. Par exemple, au minimum, revoyez régulièrement vos posts populaires pour enlever manuellement les commentaires redirigeant vers des sites douteux. Il est aussi indispensable d’analyser les tags que vous utilisez pour classer vos articles. Certains tags pourront êtres supprimés, ajoutés ou modifiés pour mieux refléter le sujet. Simplement un singulier/pluriel ou une faute d’orthographe peuvent changer le rendu. Vous pouvez également revoir votre système de tag et créer un guide stylistique qui décrira votre procédé de tagging, ce qui peut améliorer le procédé lui-même et sa maintenance. Si vous le souhaitez, fermer la section commentaire des articles les plus populaires peut aider à éviter le spam.

2. Réparations, patches et mises à jour

Les tâches de maintenances de site web les plus courantes sont celles liées aux erreurs, bugs, liens morts, et incompatibilités de navigateurs. Des tâches de maintenances liées au serveur peuvent être aussi effectuées, mais nous ne verrons aucune d’entre elles dans cet article. Regardons quelques éléments pour lesquels un développeur pourrait être responsable lors d’une maintenance de site web.

Chasser les liens morts: pas simplement les URLs

Vérifier les liens morts, à la fois internes et externes, est une tâche assez simple car il y a de nombreux outils web et outils désignés pour cette tâche. Mais vérifier les liens peut aller au-delà des URLs ; vous pouvez également vérifier que les images et fichiers externes sont correctement référencés.

Mettre à jour le CMS & les Plugins

Si vous utilisez un système de gestion de contenu populaire, il y a de grandes chances que vous ayez besoin de le mettre à jour à un moment ou un autre. Ce sera nécessaire pour de nombreuses raison – peut-être que la version précédente a des failles de sécurité, contient du code inefficace, ou simplement ne fonctionne plus correctement. WordPress est l’une des plateformes multisite les plus utilisées, et est majoritairement utilisée comme système de gestion de contenu multi-fonctions. Comme il y a des milliers de plugins WordPress disponibles, il y a aussi inévitablement des centaines de plugins qui ne sont plus supportés. Les plugins non-supportés les plus vieux, qui n’ont pas été mis à jour par l’auteur afin d’être compatible avec la plus récente version de WordPress, pourraient menacer la sécurité de votre site. Heureusement, dans les récentes version de WordPress, mettre à jour votre installation est aussi facile que quelque clics. Aussi, votre tableau de bord vous informera quand des mises à jour de vos plugins seront disponibles. Votre page de plugins vous donne aussi la possibilité de voir les détails des récents changements d’un plugin. Donc, si votre site est sous WordPress, mettre à jour votre WordPress et les plugins qui y sont liés devrait être en top priorité de votre liste de choses à faire pour la maintenance du site. Il est important de noter que la version mise à jour de votre système de gestion de contenu ne supportera pas nécessairement tous les ajustements et les plugins que vous avez soigneusement installés et customisés lors du lancement de votre site web. Donc, dans votre routine de maintenance, assurez-vous de trouver les plus récentes versions de vos plugins, ou bien remplacez les par des alternatives raisonnables avant de mettre à jour votre CMS (content management system = système de gestion de contenu).

3. Tester la compatibilité de navigateurs

Ensuring all aspects of your website or web application are functioning properly in the most commonly-used browsers should be an ongoing part of your maintenance routine. While valid, semantic code will give you the best chance for cross-browser success, there is still the need to do manual and, if necessary, automated checks to ensure optimal compatibility.

Compatibilité avecles navigateurs moins utilisés

Pour ceux qui n’ont jamais fait de développement web pro, mettez-vous cela en tête : les clients vous demdanderont la lune niveau compatibilité navigateur. Si le client a Internet Explorer 6.0, attendez-vous à devoir faire un site compatible IE6, y compris avec un CSS au pixel près.

Des outils et des méthodes existent ; les avis divergent toutefois quant auxquelles adopter.

Ensuring your site’s compatibility with IE6/7/8 and Firefox 2/3 on a PC is commonplace in website maintenance. But don’t forget to check some of the recent releases of lesser-used browsers like Opera, Chrome, and Safari. Firefox, Opera, and Safari should also be checked, if possible, on a Macintosh, because there is the potential for variations in rendering. I’ve personally seen CSS layout quirks that occur in Safari on a Mac, but do not appear in Safari on a PC. Ce phénomène peut se retrouver pour n’importe quel navigateur, bien entendu. Ne considérez donc rien comme acquis.

Test Automatique des Applications

Selenium Web Application Testing System is a suite of tools specifically for testing web applications. The suite includes Selenium IDE (a Firefox plugin), Selenium Remote Control (which automates the process), and Selenium Grid (which allows concurrent tests on multiple platforms).

Test de compatibilité en ligne

Browsershots is probably the most popular tool for viewing screenshots of your website in multiple browsers and on multiple platforms.

Adobe BrowserLab “Preview and test your web pages on leading browsers and operating systems — on demand. Adobe BrowserLab makes it easier and faster than ever before to see how your designs appear to your customers and audience. Get your results in real time, from virtually any computer connected to the web.” Further reading:

4. Au-delà de la validation de votre site selon des standards W3C

Typically, website maintenance might consist of continued validation of pages, usually after features are added or content is updated. Validation might include both markup and styles. There are things, however, that can be done beyond just simple validation of pages, since “valid” code does not necessarily equate to “good” code.

Pour un XHTML plus propre et clair

Are there components in your markup that can be reduced in size? When you first coded the site, you may have suffered from a problem called “divitis“. This basically means there are <div> tags in your code that could easily be removed because they don’t serve a purpose. A perfect example is the <div> wrapped around a navigation section, like this:

<div>
  <ul>
    <li><a href="home">Home</a></li>
    <li><a href="about">About</a></li>
    <li><a href="services">Services</a></li>
    <li><a href="products">Products</a></li>
    <li><a href="contact">Contact</a></li>
  </ul>
<div>

In the above code, in most cases, the <div> element is unnecessary. If a CSS enhancement is needed on the entire navigation section, this can be done on the <ul> element, since it too is a block-level element. Of course, there could be a reason that the outer <div> is needed, but the code would generally be just as flexible without that element. What about too many attributes? This is not as bad as having too many <div> elements, but code can start to look cleaner and be easier to manage if you avoid habitually putting classes and IDs on virtually every element. Using inheritance principles in CSS, instead of direct targeting of each individual element can trim your code down to a more manageable level. It should be noted, however, that in some cases, while removing attributes could improve the performance of your markup, it could have negative effects on the performance of your CSS, albeit at very small levels. Further reading:

Améliorer la qualité de son JavaScript

If you’ve created a lot of custom JavaScript, possibly in conjunction with a JavaScript library, your code might benefit from improvements. You can test the quality of your JavaScript code using Douglas Crockford’s JSLint, which he calls “the code quality tool.” I wouldn’t classify JSLint as a “validator”, because what is valid in JavaScript is not always what is best. In fact, many JavaScript techniques are now understood to cause major performance issues. So consider whether you can include quality testing of JavaScript code as part of your regular website maintenance routine. Further reading:

Warning! JSLint Will Hurt Your Feelings

Nettoyer et optimiser son CSS

After years of development, CSS files can become bloated, hard to maintain, and unreadable. Along the way, you may have learned to produce stronger code, so any future additions would be acceptable, but what about going back to optimize and refactor older CSS code? Many CSS files, over time, will develop redundancies that hinder speed. There are a number of tools available to help with this task, all of which should be used with care. Before doing any optimizing, be sure to have backups of all CSS files, because automated tools, if used improperly, can render your code unusable. W3C CSS Validation Service Before doing any CSS optimization, you should first check to ensure your CSS is valid. Errors in your CSS code could cause problems when doing any automated optimization or refactoring. Clean CSS This online CSS optimizer offers many different options and displays details of all changes made. Dust-Me Selectors (thanks, jeyaONE) This useful Firefox plugin will tell you which CSS selectors are no longer in use, so you can safely remove them. You also have the option to do all optimization manually, to ensure no problems occur. Of course, many optimization techniques cannot be automated. One example is combining multiple CSS files to minimize HTTP requests. Also, you may decide to change class names and ID names to reflect more appropriate conventions. (e.g. using the class name “promo-box” would be more appropriate than “blue-box”, since the color of the box could change). Further reading:

5. Améliorer l’accessibilité

If you’ve validated your markup and used best-practices coding techniques, then it’s likely that your site’s content is, generally speaking, accessible to users that are visiting your page using a screen reader or other assistive technology. But, since newly added content could affect the accessibility of your site, accessibility testing should be an ongoing process.

Outils pour tester l’accessibilité

You can do ongoing checks for accessibility using a few tools, some examples of which are shown below. WAVE – Web Accessibility Evaluation Tool “WAVE is a free web accessibility evaluation tool provided by WebAIM. It is used to aid humans in the web accessibility evaluation process. Rather than providing a complex technical report, WAVE shows the original web page with embedded icons and indicators that reveal the accessibility of that page.” A-Prompt – Web Accessibility Verifier “A-Prompt (Accessibility Prompt) is a software tool designed to help Web authors improve the usability of Web pages created in HTML format. A-Prompt first evaluates an HTML Web page to identify barriers to accessibility by people with disabilities. A-Prompt then provides the Web author with a fast and easy way to make the necessary repairs.” Besides using the tools shown above, a simple way to perform ongoing accessibility tests on your web pages is to view them with styles and JavaScript disabled. This will give you a general idea of what content will be accessible through assistive technology.

Tester l’accessibilité mobile

If you haven’t yet set up a mobile version of your website, there are a number of books and online resources that can assist you in this regard. If your mobile site is already up and running, you can continue to run tests on newly-added content and make adjustments as required. Below are a few helpful resources to assist you in making your site accessible to mobile devices. Mobile Web Design by Cameron Moll “Much has been written about mobile devices. Plenty has been written about developing websites for the so-called ‘standards era’ of the web. However, little has been written about the two colliding. This resource aims to fill that void.” 5 free ways to create a mobile version of your website This article discusses a few free services that will assist in creating a mobile version of your website. Further reading:

6. CSS3 & HTML5 : améliorations

Although it is true that not all currently-used browsers support CSS3 and HTML5, new techniques in those areas can still be applied to work in newer browsers that offer support. During site maintenance, you can assess what areas of your website could be enhanced using specific CSS3 and HTML5 techniques. Of course, you would ensure that any modifications in this area will degrade gracefully in browsers that don’t support those new techniques. Progressive techniques, based upon CSS3 and HTML5, may help you finally get rid of the old code and all JS/(X)HTML/CSS-hacks that you had to use when the site was launched. CSS3.info Everything you need to know about CSS3. HTML5 Gallery A showcase of sites using HTML5 markup. Yes, You Can Use HTML 5 Today! In this article on SitePoint, Bruce Lawson describes how HTML 5 techniques can be implemented in a cross-browser fashion using some JavaScript workarounds to support Internet Explorer. 5 CSS3 Design Enhancements That You Can Use Today This article on Webdesigner Depot describes 5 CSS3 design techniques that can be used without harming the user experience. Further reading:

7. Optimiser pour la vitesse

A somewhat bizarre trend in recent modern web development is the seeming obsession with optimizing pages for speed — in spite of the continued rise in internet connection speeds worldwide. Although more people than ever before are on high-speed connections, more developers than ever before are concerned about the speed at which their pages load. Analysis of a website’s performance during website maintenance may instigate a desire to make changes that will improve the speed at which pages load. If you’d like to include website speed optimization techniques into your maintenance routine, the following resources could prove useful.

Livres

High Performance Web Sites: Essential Knowledge for Front-End Engineers This book, by Steve Souders, is the ultimate guide to optimizing a website’s load time, offering 14 specific techniques that can help you serve pages to your users quickly and efficiently.

Even Faster Web Sites: Performance Best Practices for Web Developers This is Steve Souders’ follow-up to High Performance Websites, providing a further 14 tips and techniques for improving website speed.

Outils et Plugins pour navigateurs

6 Tools To Find Out Website Load Speed This article describes six different tools for testing the load speed of web pages, including Yahoo! YSlow, Google Page Speed, Internet Explorer’s Pagetest, and more. 15 Tools to Help You Develop Faster Web Pages Jacob Gube of Six Revisions gives an overview of 15 different tools that can help you analyze and improve the speed of your website.

8. Ajouter des commentaires à du nouveau (et du vieux) code

If you’ve validated your code, and cleaned up unnecessary sections as outlined earlier, could your code benefit from further optimization? If time allows, during website maintenance, including comments in your XHTML, CSS, and JavaScript could improve the speed at which you make site updates in the future.

Commenter les balises

In some cases, comments won’t contribute a lot. For example, a <div> element with an ID of “sidebar” may not require a comment above it that says “This is the sidebar” — that’s obvious from the well-named ID. But your code could be easier to read with comments added to the bottom of sections where there are a lot of nested <div> tags. The lower portion of your HTML code might look like this:

</div>

      </div>

    </div>

  </div>  

  <div id="footer">

  </div>

</div>

</body>
</html>

It might be difficult to make any major changes to this code without quickly being able to match the closing <div> tags to their opening tags. The same code would be easier for both front-end and back-end programmers with comments added, as shown below:

</div><!-- /content-inner -->

      </div><!-- /content-inside -->

    </div><!-- /content-left -->

  </div><!-- /main content -->  

  <div id="footer">

  </div><!-- /footer -->

</div><!-- /container -->

</body>
</html>

Commenter le JavaScript

What about large sections of JavaScript that include nested loops that might be confusing long after you’ve written the code? It would be ideal to put comments in the code when writing it, but that’s not always done. You can review complicated sections of JavaScript code and add relevant comments that will help you, when doing updates, to identify code more efficiently. Doing this type of maintenance might also help remind you to comment your code during actual development time in the future.

Commenter et organiser le CSS

CSS code can also be analyzed to see if improvements can be made by commenting or other organizational changes. I personally like to include global styles near the top of my CSS files, while indenting sections of CSS to correspond with the indenting of the HTML tags that they match up with. Below is an example of commented and indented CSS:

/* FOOTER STYLES BEGIN HERE */

#footer {
  color: #A3A2A0;
  border-top: 1px solid #eee;
  min-width: 820px;
  height: 78px;
  font-size: .92em;
  line-height: 1.4;
  background-color: #fff;
}

   #footer p {
    float: left;
    width: 145px;
    margin-top: 5px;
   }

     #footer p span {
      width: auto;
      float: right;
      padding: 15px 25px 0 0;
     }

/* FOOTER STYLES END HERE */

Of course, when it comes to code improvements, what works best for your maintenance schedule and overall coding habits will be up to you. During site maintenance, your website may benefit from implementing some of these methods of commenting and organizing.

9. SEO (Search Engine Optimisation – Optimisation pour les moteurs de recherche)

As a front-end coder or designer for an agency or other company, you probably will not be responsible for SEO-related updates. If, however, this is a personal project or your own personal website, then you may need to do ongoing SEO maintenance. Semantic, well-structured markup will automatically gain SEO benefits from the start — even without any specific search engine optimization techniques having been implemented. But, as time goes on, the integration of specific SEO methods may be required to boost your site in search rankings for particular search terms and phrases. So, specific SEO optimization practices — optimizing keyword phrases, improving title tags, adding meta descriptions, writing good page titles, and optimizing internal link structure — are other items that could be added to a website maintenance to-do list. Further reading:

10. Website Analytics & Conversions

Analysis of site traffic, bounce rates, traffic sources, and other web analytics-related statistics should be a regular part of a site’s ongoing maintenance. Of course, in an agency or corporate environment this area would fall under marketing or SEO. For a personal project, however, unless you’re outsourcing this type of work, you’ll need to continually analyze your site statistics to see where improvements can be made.

Améliorer les zones “Call To Action » (zones d’action)

If you experience lower conversion rates than you’d like, your site could benefit from an adjustment in call to action buttons or similar components of your site. Wherever a user is located on your website, there should be a clear path to the services or products you offer. During site maintenance, changes could be made to ensure users are finding the most important parts of your website quickly and efficiently.

Outils d’analyse

A number of free analytics tools are available, the most popular of which is Google Analytics, which is very easy to install. Most likely you’ve installed it on your website, but are you doing the necessary ongoing analysis? You can look at keywords that are helping users find your website, and add new content according to those keywords. I once wrote an article for my own website based purely on a key phrase that was regularly used to find my site through Google. Now, since I wrote an article that specifically deals with the content of that key phrase, that page is the most visited page on my site. Google Analytics Google Analytics is the premiere website statistics analysis tool. Analytics Toolbox: 50+ More Ways to Track Website Traffic This article on Mashable.com offers a list of more than 50 tools for tracking and analyzing website statistics. Further reading:

11. Considérer le Feedback des utilisateurs

A high-traffic, successful website should have clear methods for users to provide feedback. The most basic of these is the contact form or email address on the contact page. You could also collect feedback through social networking, polls, surveys, and blog post comments. Whatever means you’re using to receive input on the functionality and usability of your site, your ongoing maintenance routine could incorporate many of the suggestions you receive. Some suggestions for improvement could be simple bug and error fixes, or compatibility problems. These could be itemized and corrected in a relatively short time. Other suggestions received, however, could require significant layout changes or page restructuring, so would have to be factored into long-term maintenance. Whatever the case may be, obtaining and acting on feedback from users will allow your website to grow and thrive, and will give evidence to your users that customer service is your priority.

Outils et bonnes pratiques de développement web