La rédaction du cahier des charges web : les fondamentaux

« ça y est, c’est validé ! Il nous faut un (nouveau) site Internet ! »

Avant de faire le tour des agences web et demander des devis, il vous faut passer par une étape indispensable : la rédaction du cahier des charges web.
Il s’agit d’un document de spécifications web, qui permettra à votre projet de bien fonctionner et surtout vous donnera la meilleure chance de réaliser un projet, qui répond aux objectifs de vos visiteurs et de votre entreprise.

Nous allons voir ensemble les élements clés ,qui doivent absolument être présents dans votre CDC (cahier des charges) et pourquoi ils sont importants.

Le Projet

Cette section doit donner un aperçu du projet et la carte d’indentité de votre entreprise.

Un aperçu pourrait inclure les paragraphes suivants :

À propos de votre organisation

Il s’agit d’un court paragraphe sur votre entreprise, son histoire, ses dates clés, ses produits. N’hésitez pas à donner quelques chiffres financiers (le CA, le marché visé, le taux  de croissance…). Enfin, n’oubliez pas de mentionner votre marché (concurrents directs et indirects).

Quels sont les objectifs du nouveau site ?

Pourquoi souhaitez-vous créer votre site Internet ?

Est-ce uniquement dans un souci de visibilité (faire connaître votre entreprise ou améliorer sa notoriété) ou est-ce dans l’optique d’augmenter les leads générés ?

Est-il destiné à vendre des produits/services, à fidéliser vos clients ? N’hésitez pas à donner plusieurs objectifs en les classant par ordre d’importance.

Vos cibles

Quel public est visé par le site ? Est-ce du B2B ou du B2C ? Vous adressez-vous à des prospects, des clients, des investisseurs potentiels, la presse ?
Plus la cible sera détaillée, mieux ce sera pour la création de personas – besoins, comportements (un article sur les personas Web est en cours).

Dates et budget

Si vous avez un objectif temporel, c’est important de la préciser imédiatement : certaines agences ne pourront pas vous faire un site Internet en urgence si la charge de travail du moment est trop lourde. Il en est de même pour le budget : si votre budget est limité, n’hésitez pas à être transparent auprès de l’agence web. Celle-ci pourra alors vous proposer ce qu’il se fait de mieux en rapport avec votre budget.

 

Le site

Le Webdesign et l’expérience utilisateur

Nous vous conseillons, dores et déjà, de montrer à l’agence digitale votre logo et votre charte graphique, si vous en avez une. (Si vous n’en avez pas, n’hésitez pas à donner le nom de certaines typographies et couleurs souvent utilisées par l’entreprise, afin d’assurer une cohérence visuelle).

Donner vos objectifs graphiques pour le site. N’hésitez pas à fournir à l’agence une liste de sites Internet qui vous plaisent (en précisant pourquoi ils ont attiré votre attention).

Le plan du site

Le plan du site (ou arborescence) est généralement fourni sous forme de diagramme, qui montre la structure hiérarchique des pages du site Web.  Il est indispensable à l’agence web, car c’est grâce à ce plan du site qu’elle va pouvoir prévoir le nombre de pages / gabarits à designer et à développer.

Cahier des charges - plan du site

Les fonctionnalités attendues

Lister, dans cette partie, les fonctionnalités que vous souhaitez intégrer dans votre site.

Voici une liste non exhaustive de fonctionnalités :

  • un module d’actualité
  • un slider d’images
  • un blog
  • des formulaires de contact / ou d’inscription
  • le téléchargement de documents
  • une inscription à la newsletter
  • Google Maps
  • un agenda
  • un module de SEO
  • une partie sur la sécurisation du site
  • des animations particulières (parallaxe, …)
  • des liaisonsavec des applications tierces
  • un chatbot
  • du multi-langues
  • un moteur de recherche

Pour résumer

Un cahier des charges détaillé peut faire la différence entre le succès et l’échec d’un projet Web. Il permettra d’avancer plus rapidement dans la bonne direction.

Par ailleurs, il vous aidera à formaliser clairement vos objectifs à toute équipe interne ou externe impliquée dans le projet.

Une fois cette étape réalisée, n’hésitez pas à voir ce qui vous attend par la suite !

 

 

Comment optimiser le temps de chargement de son site web ?

Au sein d’une agence web, on parle beaucoup de temps de chargement des sites Internet, mais est-ce vraiment important ?

La réponse est simple : oui !

Surtout si l’on sait qu’un délai d’une seconde dans le temps de chargement de la page représente :

  • 11 % moins de pages vues,
  • une diminution de 16 % de la satisfaction de la clientèle,
  • 7% de perte de conversions.

Quelques secondes supplémentaires ont donc un impact énorme sur votre capacité à attirer les visiteurs, à générer du lead et à réaliser des ventes.

Cela signifie qu’avoir un site rapide est essentiel (non seulement pour bien se classer avec Google, mais pour garder de bons taux de conversion).

Comment un temps de chargement rapide influence les conversions ?

Les sites lents tuent les conversions.

En fait, 47 % des utilisateurs web s’attendent à ce que les sites Web se chargent en deux secondes ou moins. Et 40 % abandonnent une page qui prend trois secondes ou plus. Si votre site prend plus de trois secondes à charger, vous perdez déjà près de la moitié de vos visiteurs avant même qu’ils arrivent sur votre site.

Rien que cela est un coup énorme à vos conversions potentielles.
Et pour les visiteurs qui décident de rester, vos temps de chargement lents peuvent les dissuader de revenir à l’avenir. Dans un sondage, 79 % des clients ont dit qu’ils ne retourneraient pas sur un site où le chargement est lent.

Dans ce même sondage, 52 % des acheteurs ont dit que le chargement rapide des pages est important pour leur fidélité au site et 44 % ont dit qu’ils parlent à leurs amis des expériences médiocres du site. Ce sondage a également révélé qu’un retard d’une seconde peut réduire la satisfaction de la clientèle d’environ 16 %.

Comment la vitesse de votre site influence la visibilité de votre site ?

Maintenant que Google prend la vitesse en considération lors du classement des sites, vos temps de chargement peuvent également influencer la facilité avec laquelle les utilisateurs peuvent vous trouver en premier lieu. Cela est particulièrement vrai maintenant qu’il est en train de déployer son indice mobile-first. Depuis décembre 2017, le moteur de recherche a commencé à classer tous les résultats de recherche en fonction des versions mobiles des pages.

Pour la première fois en 2015, les recherches sur mobile ont dépassé les recherches sur ordinateur, et sa part de la recherche globale ne cesse de croître.

Cela signifie qu’il est dans l’intérêt de Google de répondre à ses résultats de recherche d’une manière optimum pour les utilisateurs mobiles. Ils ne veulent pas diriger leurs utilisateurs vers des sites, qui ne se chargeront pas ou qui fonctionnent mal sur leurs appareils.

Pourquoi mon site est lent ?

Vous avez effectué un test de vitesse du site et constaté que votre temps de chargement est assez lent. (Si vous ne savez pas comment faire un test de vitesse du site, je vous conseille cet outil en ligne).

Il pourrait y avoir un certain nombre de raisons pour lesquelles le temps de chargement de votre site est long. Cela peut être dû au temps de chargement du serveur, à la taille des images, au nombre de redirections que vous avez,…

En fait, il y a toute une série de mesures à prendre pour améliorer la vitesse des pages. Nous en examinons ci-dessous quelques unes.

1. Minimiser les requêtes HTTP

Selon Yahoo, 80% du temps de chargement d’une page Web est passé à télécharger les différentes parties de la page, comme des images, des feuilles de style et des scripts. Une requête HTTP est réalisée pour chacun de ces éléments, donc plus il y a de composants sur la page, plus il faut de temps pour que la page se charge.

2. Réduire et combiner les fichiers

Le meilleur endroit pour commencer votre optimisation est avec vos fichiers HTML, CSS et Javascript. Ce sont des fichiers extrêmement importants, car ils déterminent l’apparence de votre site. Ils ajoutent également au nombre de requêtes, que votre site fait automatiquement chaque fois qu’un utilisateur le visite.

Vous pouvez réduire ce nombre en  « minifiant » (réduire la taille du code) et en combinant vos fichiers, ce qui minimise la taille de chaque fichier ainsi que le nombre total de fichiers.

3. Utiliser un chargement asynchrone pour les fichiers CSS et Javascript

Une fois que vous avez « minifié » et combiné certains de vos fichiers, vous pouvez également optimiser la façon dont ils se chargent sur vos pages. Les scripts comme CSS et Javascript peuvent être chargés de deux manières différentes : Synchrone ou Asynchrone. Si vos scripts se chargent de manière synchrone, ils se chargent un à la fois, dans l’ordre où ils apparaissent sur la page. Si vos scripts chargent de manière asynchrone,  certains d’entre eux se chargeront simultanément.

Par conséquent, le chargement asynchrone de fichiers peut accélérer le chargement de vos pages ,car lorsqu’un navigateur charge une page, elle se déplace de haut en bas.

4. Activer la mise en cache du navigateur

Lorsque vous visitez un site Web, les éléments de la page visitée sont stockés sur votre disque dur, dans un cache (ou stockage temporaire).

Cela signifie que la prochaine fois que vous visitez le site, votre navigateur peut charger la page sans avoir à envoyer une autre requête HTTP au serveur.

5. Réduire la taille des images

Les images peuvent jouer un rôle majeur dans la vitesse de votre site. Ce sont souvent de très gros fichiers, ce qui peut ralentir le temps de chargement des pages. Mais les supprimer complètement n’est pas une option, car les images sont nécessaires à l’attractivité de votre site. Cela signifie donc que la compression des images est essentielle.

Vous pouvez voir l’impact de la taille de vos images sur n’importe laquelle de vos pages avec un outil comme Pingdom. Exécutez un test de vitesse de page, puis examinez les « demandes par type de contenu ».

6. Prioriser le contenu au-dessus de la ligne de flottaison (lazy loading)

Nous vous recommandons de n’utilisez qu’une feuille de style CSS et pas de CSS en ligne.  Vous pouvez améliorer l’expérience utilisateur en chargeant plus rapidement votre section « above the fold » (haut de la page – la partie que l’on voit sans avoir à scroller), même si le reste de la page prend quelques secondes à charger.

Ceci est appelé « lazy loading ». C’est particulièrement utile pour les pages avec beaucoup de contenu sous la ligne de flottaison.

7. Réduire le nombre de plugins que vous utilisez sur votre site

Comme vous vous en doutez,  les plugins peuvent faire beaucoup pour améliorer votre site WordPress. Vous pouvez les utiliser pour ajouter des fonctionnalités personnalisées, nettoyer votre code, améliorer l’expérience utilisateur, et bien plus encore. De plus, ils sont extrêmement faciles à installer.  Cette facilité nous donne envie de continuer à en ajouter, sans tenir compte des inconvénients potentiels.

Malheureusement, avoir trop de plugins installés peut causer quelques problèmes.

Ils peuvent ralentir votre site, créer des problèmes de sécurité, et même causer des plantages et d’autres difficultés techniques. De plus, la maintenance du site et les mises à jour peut être fastidieuses lorsque vous avez beaucoup.

 

Il existe bien évidemment de nombreux points d’attention lorsqu’il s’agit d’optimiser le temps de chargement de son site Internet. Maisle plus sûr moyen et de faire appel à un professionnel.

A l’agence digitale KN, cette optimisation est une mission courante et importante pour le futur utilisateur.

Webdesign : animations et dégradés avec le CSS3

Le webdesign joue, en effet, un rôle essentiel dans l’attractivité d’un site. Les animations et dégradés rendent les pages interactives mais surtout attractives. En effet, les clients et prospects doivent avoir envie d’explorer et de revisiter le plus souvent possible le site Web que vous concevez.  Pour cela, n’hésitez pas à utiliser le CSS3 Generator !

Voici les animations et les dégradés propres au CSS3 Generator. Vous trouverez aussi des liens vers des sites ressources pour vous aider à coder plus rapidement.

1 – Webdesign : les animations avec le CSS3

Les animations CSS sont enfin disponibles dans tous les principaux navigateurs, même dans IE (depuis la version 10).

Deux façons de créer des animations CSS

Une façon très simple

Elle se fait en animant les changements de propriétés CSS avec la déclaration de transition. Avec les transitions, vous pouvez créer des effets de survol ou de souris, ou vous pouvez déclencher l’animation en changeant le style d’un élément avec JavaScript. 

Une façon un peu plus compliquée mais intéressante

Un peu plus compliquée, cette façon implique la description de moments spécifiques de l’animation avec le code @keyframe. Cela vous permet d’avoir des animations répétitives, qui ne dépendent pas des actions de l’utilisateur, ni de JavaScript pour être déclenchées.

Un conseil

Je vous conseille le site CSS3 Generator pour se simplifier la tâche et perfectionner l’art du copié/collé !

Voir le site

 

2 – Webdesign : les dégradés avec le CSS3

Lors du Webdesign, l’utilisation de dégradés est assez courante. Les dégradés CSS donnent aux webdesigners le pouvoir de créer des transitions fluides entre les couleurs sans avoir à recourir aux images. Par conséquent, cela évite de surcharger le poids d’une page et permet d’accélérer le temps de chargement.

Disponibles maintenant presque partout 

Les dégradés CSS ont également fière allure sur les écrans Rétina (HD). En effet, ils sont générés à la volée. Ils sont linéaires ou radiaux. En même temps, ils peuvent être configurés pour se répéter. Ils existent depuis un certain temps. Mais, après quelques changements mineurs de syntaxe, ils sont enfin disponibles maintenant presque partout, sans préfixe !

Un exemple

Voici un site pour générer vos dégradés:

Gradient Editor

En résumé,

En webdesign, les animations et dégradés permettent une attractivité intéressante et sont attractifs pour les internautes. Les réaliser en utilisant le CSS3 Generator permet une facilité que les développeurs devraient apprécier !