Les cahiers de l’ant diagnostic
•
0 j'aime•102 vues
Support de présentation pour l'atelier Diagnostic de site Internet
Recommandé
Recommandé
Contenu connexe
Similaire à Les cahiers de l’ant diagnostic
Similaire à Les cahiers de l’ant diagnostic (20)
Plus de Emilie Rochat
Plus de Emilie Rochat (7)
Les cahiers de l’ant diagnostic
- 2. LES CAHIERS DE L’ANT DIAGNOSTIC DE SITE INTERNET Lundi 17 novembre Pearltree : http://www.pearltrees.com/emilierochat/atelier- diagnostic-internet/id12994866 PARTICIPANTS : Frédérique LUROL, château de Monte-Cristo Marc LESTEVEN, CCBS Louis DE MARTINO, Musée de la Grenouillère Elisa BARBIER, OTPDI
- 3. DIAGNOSTIC DE SITE INTERNET 1ère partie : Diagnostic de site Internet 2ème partie : Le site web « idéal » , préconisations - Focus : CNIL et Accessibilité- Les tendances du web en images
- 4. UN DIAGNOSTIC ? POURQUOI FAIRE ? Pour faire le point ! Parce que vous êtes en projet de refonte de site. Pour identifier vos faiblesses et les points à améliorer pour répondre aux attentes des internautes.
- 5. LES CRITÈRES DU DIAGNOSTIC Grille de diagnostic réalisée à partir de diagnostics proposés par le Nouveau Paris Ile de France et la société Touristic. 43 questions portant sur : la connexion sur le site Internet, le contenu et la navigation.
- 6. LE SEO Search Engine Optimisation Les règles : Balise <title> Mots clés dans le nom de domaine Densité de mots clés par page http://www.webconfs.com/keyword-density-checker.php Balises <meta name = description> et <meta name = keywords> Balises <h1> L’attribut <alt> pour les images doit être renseigné Une description pour les liens Diversité et qualité de vos liens / backlinks
- 7. DIAGNOSTIC DE SITE INTERNET 2ème partie : Le site web « idéal » , préconisations Petit tour de sites Internet « modèles »
- 8. PRÉCONISATIONS POUR UN SITE WEB IDÉAL 1. Le contenu 2. Le webdesign 3. Le multi écrans « Pensez responsive » ! 4. Le plan du site (sitemap) 5. Le référencement 6. Une navigation facile, optimisez votre footer ! 7. Actualisez régulièrement votre site 8. Fidéliser vos internautes ! 9. Pensez aux stats !
- 9. Un cookie c’est quoi ? C’est une information déposée sur votre disque dur par le serveur du site que vous visitez. La réglementation prévoit que les sites internet doivent recueillir votre consentement avant le dépôt de ces cookies, vous indiquer à quoi ils servent et comment vous pouvez vous y opposer. Que devez-vous faire ? Appelez votre webmestre pour mettre votre site en conformité ! LA CNIL ET LES COOKIES
- 11. L’ACCESSIBILITÉ Un site accessible est un site qui peut être lu par tout le monde. Votre site est accessible s’il répond aux besoins de ces personnes : ceux qui ne sont pas capables de voir, entendre, bouger ou qui ne peuvent pas accéder à l'information de manière classique ; ceux qui ont des difficultés pour lire ou comprendre un texte les dyslexiques par exemple) ; ceux qui ne peuvent pas utiliser de clavier ou de souris ; ceux qui utilisent un lecteur d'écran, un petit écran à faible résolution ou une connexion Internet lente ; ceux qui ne parlent pas la langue dans laquelle le document est écrit ; ceux qui sont dans des situations où leurs yeux, leurs oreilles ou leurs mains sont occupés (par exemple en conduisant ou en travaillant sur des chantiers bruyants) ; ceux qui ont un navigateur différent du vôtre, un navigateur audio par exemple, ou un système d'exploitation différent.
- 13. DIAGNOSTIC DE SITE INTERNET Et en images ça donne……
- 18. DIAGNOSTIC DE SITE INTERNET Petit tour de sites Internet « modèles » Inspirez-vous !
- 21. https://mvmt.org/ LES GALERIES GRID ANIMÉES
- 22. LE FLAT DESIGN
- 23. http://ecards.strasbourg.eu/ LES GRANDES PHOTOS / VIDÉOS
- 28. COUP DE CŒUR : VISITPROVENCE.COM
- 29. MERCI DE VOTRE ATTENTION ET PLACE AUX QUESTIONS !
- 30. L’ANT C’EST AUSSI… Des ateliers : 1 Optimisez votre relation clients par l’e-mail 2 Créez un album de photos en ligne 3 Le référencement sur Google 4 Soignez votre e-réputation 5 Diagnostic de site Internet Inscrivez-vous : http://bit.ly/1f51TVd
Notes de l'éditeur
- Pourquoi faire un diagnostic ? Le site est la vitrine de votre entreprise. Il doit donner envie aux visiteurs de venir vous voir le site doit être facilement accessible, agréable à consulter et qu’il réponde aux attentes de ses visiteurs de façon claire et précise. si vous envisagez une refonte de votre site Internet diagnostiquer votre site Internet peut vous permettre de faire le point tout simplement, est ce que votre site répond aux attentes actuelles des internautes (sites mobiles, accessible sur tous les types de supports), Mettez vous à la place de vos internautes, qu’est ce que vous souhaiteriez voir sur le site ? Qu’est ce que vous en attendez ? Inspirez-vous d’autres sites Internet. Pour réaliser un diagnostic vous pouvez passer par des sociétés dont les tarifs sont divers et variés ou réalisez votre diagnostic vous-même à l’aide d’une grille de critères que je vais vous fournir; N’hésitez pas à faire appel à votre entourage, collègues, amis, familles. Vous pouvez aussi mettre des sondages sur votre site actuel et demandez l’avis de vos internautes. L’idée est de réussir à prendre du recul, d’autant plus si c’est vous qui avez fait le site. Il faut réussir à avoir un esprit critique et analyser son site de façon objective. Tarif audit de site sur abondance.com : 2 500 €
- 2/ la connexion au site est immédiate : de nombreuses études montrent qu’au-delà de 3 secondes d’attente on perd 40% du trafic et 100% au-delà de 6-7 secondes d’attente 4/ LE SEO : c’est l’optimisation de votre site pour les moteurs de recherche, ce sont des techniques pour que Google par exemple comprenne votre site Internet. Si vous ne trouvez pas votre site sur Google, vous pouvez le lui soumettre : https://www.google.com/webmasters/tools/submit-url?continue=/addurl&pli=1 Le nommage des pages : pour nommer vos pages les seuls caractères autorisés sont . - ou _ Pour les liens internes taper dans google : site:www.monsite.fr pour connaître les pages indexées par Google Pour les liens entrants, la popularité du site : taper l’url dans le moteur de recherche
- Les règles SEO : 1 la balise title 2 le nom de domaine contient-il des mots clés ? De même si vous avez des fichiers (pdf) que vous proposez en téléchargement n’hésitez pas à leur mettre des mots clés 3 la densité de mots clés par page : la densité est le nombre de fois où vous répétez un mot clé sur la même page, par exemple une densité de 2% signifie que votre mot clé apparaît 2 fois tous les 100 mots. Par contre ne pas dépasser 2% car ce serait considéré comme du spam. http://www.webconfs.com/keyword-density-checker.php 4 les balises « meta name= description » et « meta name = keywords » 5 la balise <h1> ce sont les titres 6 l’attribut <alt> de la balise <img>, ça affiche une info bulle lorsque le pointeur de la souris passe au-dessus de l’image 7 les liens vous pouvez ajouter des mots clés dans les balises de vos liens 8 la diversité de vos liens et la qualité, éviter d’envoyer vos visiteurs faire des sites louches, peu connus, au contraire essayer de faire des liens avec des sites connus 9 la qualité du contenu 10 les backlinks, ce sont les liens en retour, les sites qui pointent vers le vôtre, plus vous en aurez mieux ce sera
- Le contenu est roi dans le tourisme Sans grande surprise le contenu est le nerf de la guerre dans le tourisme. Il s'agit à la fois de créer le déclic, d'inspirer le touriste potentiel, et de lui fournir un contenu "pratico-pratiques". Le site Internet doit en effet permettre au consommateur de se projeter dans ses futures vacances et lui permettre de préparer au mieux son séjour. Les contenus doivent être adaptés à Internet : plus courts que sur du papier, aérés. Ils doivent permettre une lecture en diagonale. Enfin les photos sont essentielles. Elles ne sont pas là simplement pour décorer, mais elles doivent faire découvrir un territoire et lui donner du sens. Il est par exemple judicieux de montrer des touristes se livrant à des activités dans la destination, et pas simplement de jolis paysages sans âme qui vive... Web design Le graphisme et surtout les photos tiennent une place de choix dans le tourisme. Le consommateur a besoin de voir pour se projeter dans ses futures vacances. La tendance est de proposer un design immersif, c'est-à-dire de proposer une véritable expérience (touristique) en plongeant les internautes au coeur de la destination au moyen entre autre d'une utilisation judicieuse des photos, des vidéos, etc. C’est ce qu’on appelle le storytelling, vos photos doivent raconter une histoire, n’hésitez pas a faire des mises en situation, prendre des gens en action, lors d’une visite par exemple Le multi-écrans Les touristes sont désormais massivement équipés de smartphones et utilisent de plus en plus les outils mobiles pour se connecter à Internet. Les consommateurs préparent donc de plus en plus leurs vacances au moyen des tablettes et des téléphones portables. Il ne s'agit plus simplement de proposer des services en situation mobilité (géolocalisation par exemple), mais de s'assurer que l'internaute accède de manière satisfaisante à l'information sur différents types d'écran : ordinateur fixe ou portable, tablette, téléphone..., et s'y possible proposer une ergonomie et des services spécifique liés à la nature de l'écran. Le référencement 80% de votre trafic peut être généré par les moteurs de recherche. Les 10 premiers résultats reçoivent 80% de trafic par rapport aux pages 2 et 3. Plus de 60% des recherches s’effectuent sur plus de 2 mots clés. Moins votre société ou votre site a une notoriété spontanée, plus le référencement est important, puisqu’il deviendra votre principal canal de recrutement de nouveaux visiteurs / clients. Concernant la navigation : L’internaute doit pouvoir accéder à l’information en 3 clics. 1: Barre de navigation La barre de navigation : un repère dans le site. La barre de navigation est un élément essentiel pour l'internaute. Elle lui procure une vue globale du site et lui montre l'ensemble des rubriques. Ainsi l'internaute peut circuler facilement en fonction de ses besoins. 2. Les menus déroulants. A partir de la barre de navigation, il est possible de créer des menus déroulants . Le principe est de faire apparaître au survol de la souris sur une rubrique, une zone contenant des liens hypertextes vers les sous-rubriques. 3. Les Onglets. Les onglets de la barre de navigation font partie de l'environnement que connaît bien l'internaute. Ils les identifient dès l'ouverture en haut de la page. 4. Les Rollovers. Le rollover est une fonction qui modifie l'aspect d'un élément graphique dans sa forme, sa couleur ou son animation lorsqu'il est survolé par le pointeur de la souris. Si la barre de navigation est exclusivement composée d'icônes, la navigation devient plus risquée. L'utilisateur est plongé dans le doute, dans la confusion, s'il n'identifie pas immédiatement ce que l'icône symbolise. Avant d'utiliser ce type de menu, mieux vaut avoir tester la compréhension des icônes auprès d'un large public. Par exemple, un bouton "page suivante" ou "page précédente" n'apporte aucune information à l'internaute. Pour lui, l'emplacement de la page n'a aucune importance. Ce qui l'intéresse c'est ce qu'elle contient. Une flèche seule en bas de page ou d'article n'est peut-être pas suffisamment explicite. La combinaison du graphisme et du texte "Haut de page" enlève toute ambiguité. Actualiser votre site Ca alimente les moteurs de recherche, friands de contenus nouveaux (c’est pour ça que facebook notamment est toujours dans les premiers résultats sur google) Fidéliser vos internautes Proposer leur de laisser leurs coordonnées pour les abnner à vos lettres d’information par exemple, proposer des liens pour qu’ils vous suivent sur les différentes réseaux sociaux sur lesquels vous êtes présents) Pensez aux stats ! A quoi bon faire tous ces efforts si vous n’en mesurez pas les retombées ! Google analytics est l’outil le plus complet actuellement pour étudier ses statistiques mais la plupart des hébergeurs payants proposent ce service. Et aussi…… La personnalisation des sites web L’étude souligne que la personnalisation des sites Internet est une tendance importante pour les organismes de gestion de destination. Il s’agit de proposer des outils et des services pour personnaliser l'expérience utilisateur. Cela passe tout d’abord par des fonctions de recherche, des rubriques personnalisées sur le site web, mais aussi des outils d’aide à la planification d’un séjour. L'Estonie propose en plusieurs langue un outil pour planifier un séjour (Trip Planner). => Pearltrees Ce billet ne soulève qu'une infime partie des idées et des tendances de cette étude. Vous trouverez de nombreux conseils pratiques ponctués d'exemples dans le tourisme et dans d'autres secteurs d'activité. C'est LE document à lire et à décortiquer soigneusement : The Digital Tourism Brand Index. Bonne lecture ! http://www.downgraf.com/wp-content/uploads/2013/04/26-Things-to-Note-Before-You-Develop-a-Website1.jpg
- En pratique, un message doit apparaître quand Un cookie est une information déposée sur votre disque dur par le serveur du site que vous visitez. Il contient plusieurs données : le nom du serveur qui l'a déposée ; un identifiant sous forme de numéro unique ; éventuellement une date d'expiration… Ces informations sont parfois stockées sur votre ordinateur dans un simple fichier texte auquel un serveur accède pour lire et enregistrer des informations. vous vous connectez au site pour la première fois pour vous indiquer comment accepter ou au contraire refuser les cookies. A quoi servent les cookies ? Les cookies ont différentes fonctions. Ils peuvent permettre à celui qui l'a déposé de reconnaître un internaute, d'une visite à une autre, grâce à un identifiant unique. Certains cookies peuvent aussi être utilisés pour stocker le contenu d'un panier d'achat, d'autres pour enregistrer les paramètres de langue d'un site, d'autres encore pour faire de la publicité ciblée. Qui peut déposer des cookies et y accéder ? Un site internet peut uniquement relire et écrire les cookies qui lui appartiennent. Mais, il faut être conscient qu'une page sur internet contient souvent des informations issues de différents sites, notamment via les bandeaux publicitaires. De ce fait des cookies peuvent être déposés et relus par des sites autres que celui auquel vous accédez directement... Par exemple, si vous naviguez sur un site d'information, il est possible que d'autres sites comme par exemple des régies publicitaires récupèrent des informations sur votre navigation. Pour cela, il suffit que la régie publicitaire dépose un cookie sur le site d'information que vous consultez. Comment fonctionnent ces cookies publicitaires ? Les cookies publicitaires enregistrent des informations sur la navigation des internautes, et peuvent en déduire leurs centres d'intérêts ou encore leur parcours sur le site web. Ils permettent ensuite aux sociétés de personnaliser la publicité que l'internaute va voir apparaître en fonction des actions effectuées sur le site visité mais aussi sur d'autres sites ayant recours à la même régie publicitaire. Les boutons de partage des réseaux sociaux (" J'aime " de Facebook, " +1 " de Google, etc.) vont permettre de vous suivre de la même manière et de vous proposer de la publicité ciblée. Comment fonctionnent les boutons des réseaux sociaux comme le j’aime de facebook ? Quand vous vous rendez sur une page internet sur laquelle se trouve un de ces boutons, le réseau social peut associer cette visualisation à votre profil. Et cela même si vous ne cliquez pas sur le bouton et si vous n'êtes pas connecté sur ce réseau ! Le réseau social peut ainsi adapter sa publicité par rapport aux sites que vous avez visités et vous proposer des " groupes " adaptés aux centres d'intérêt déduits de votre navigation sur internet. Il peut aussi vous proposer de devenir fan de la page web que vous visitez le plus. Comment savoir si des cookies ont été déposés pendant votre navigation Les experts de la CNIL ont développé un outil que vous pouvez installer en quelques clics qui s'appelle CookieViz. Il vous permettra de visualiser en temps réel l'ampleur du phénomène des cookies ainsi que le nombre impressionnant d'acteurs qui interviennent pour analyser votre navigation. Mettre son site en conformité : La loi s'applique quel que soit le type de terminal utilisé et concerne par exemple, les traceurs déposés sur les ordinateurs, smartphones, tablettes numériques et consoles de jeux vidéos connectées à Internet. Quelles sont vos obligations légales : Avant de déposer ou lire un cookie, les éditeurs de sites ou d'applications doivent : informer les internautes de la finalité des cookies obtenir leur consentement fournir aux internautes un moyen de les refuser. La durée de validité de ce consentement est de 13 mois maximum. Certains cookies sont cependant dispensés du recueil de ce consentement. Qui est concerné ? L'obligation de recueil du consentement s'impose aux responsables de sites, aux éditeurs d'applications mobiles, aux régies publicitaires, aux réseaux sociaux, aux éditeurs de solutions de mesure d'audience qui ont l'entière responsabilité de se mettre en accord avec la loi. Quels cookies sont concernés ? Les cookies nécessitant une information préalable et une demande de consentement, sont, par exemple : les cookies liés aux opérations relatives à la publicité ; les cookies des réseaux sociaux générés par les boutons de partage de réseaux sociaux lorsqu'ils collectent des données personnelles sans consentement des personnes concernées ; certains cookies de mesure d'audience. Quels cookies sont exemptés : Sont exemptés du recueil du consentement les traceurs strictement nécessaires à la fourniture d'un service expressément demandé par l'utilisateur. Ainsi, par exemple, les traceurs suivants ne requièrent pas de consentement : les cookies de " panier d'achat " pour un site marchand ; les cookies " identifiants de session ", pour la durée d'une session, ou les cookies persistants limités à quelques heures dans certains cas ; les cookies d'authentification ; les cookies de session créés par un lecteur multimédia ; les cookies de session d'équilibrage de charge (" load balancing ") ; certaines solutions d'analyse de mesure d'audience (analytics) ; piwik est exempté mais si vous utilisez google analytics => http://www.cnil.fr/vos-obligations/sites-web-cookies-et-autres-traceurs/outils-et-codes-sources/la-mesure-daudience/ les cookies persistants de personnalisation de l'interface utilisateur. Si votre site utilise des boutons de partage : L’outil social share privacy, disponible sur les principaux CMS et en jquery permet de recueillir le consentement des internautes et de se mettre en conformité avec la législation.
- Src guide du W3C Posez-vous la question suivante : est-ce que tous les visiteurs vont pouvoir voir mon site de la même façon ? Ces internautes qui sont-ils ? Pourquoi faire un site accessible ? Bien que ce soit un travail fastidieux et complexe, rendre son site accessible est une stratégie payante. Pourquoi ? Parce que rien qu’en France 20 millions de pers sont concernés par une situation de handicap. L’objectif de l’accessibilité est de rendre le web accessible à tout le monde, quelle que soit leur matériel ou logiciel, leur culture, leur langue, leurs aptitudes physiques ou mentales. Il y a donc une autorité qui existe le W3C qui est l’autorité des standards du web. Ils ont émis une liste de 61 recommandations permettant de rendre le web accessible Aujourd’hui seulement 5% des sites sont accessibles Un des moyens mis en place par le W3C (World Wide Web Consortium) est le groupe de travail WAI (Web Accessibility Initiative), en charge de proposer des solutions techniques pour rendre accessible le web aux handicapés. Dans leur présentation sur l'accessibilité du web (en), le WAI explique qu'il est important de créer des sites accessibles à tous pour que chacun puisse comprendre, naviguer et interagir avec le web. Car le web devient incontournable. Le site du W3C propose des outils pour vérifier par exemple si le langage de votre site est accessible Il y a différents points à vérifier, ça passe par la navigation, les liens, si vous avez bien renseigné les balises alt, les balises de description, d’une image par exemple, Il faut savoir qu’effectivement rendre son site accessible a un coût, mais qu’en suivant ces spécifications vous allez améliorer également la lisibilité de votre contenu à vos internautes On retrouve aussi des recommandations communes avec les règles du SEO L’accessibilité concerne également les seniors, sachant qu’ils deviendront le 1er groupe de consommateur d’ici 2020 ça fait réfléchir (pourquoi les seniors ? Perte de faculté auditive, visuelle (80% portent des lunettes). http://www.journaldunet.com/ebusiness/expert/58704/accessibilite-numerique---bonne-ou-mauvaise-nouvelle.shtml http://openclassrooms.com/courses/faire-un-site-web-accessible http://www.accessiweb.org/ http://references.modernisation.gouv.fr/rgaa-accessibilite
- Le site de l’agglomération de Nîmes Métropole a reçu le label de site accessible
- On vient de passer en revue tous les éléments pour faire de vos sites un site idéal, voyons ce que ca donne en image
- Alors que pensez-vous de ce site ? Les coordonnées de la structure sont indiquées dès la page d’accueil, on sait chez qui on est grâce au nom de la société qui figure dès la page d’accueil et la photo des yorkshire, plus que suggestive Mettez vous dans la peau de qlq’un qui veut acheter un yorkshire, est ce que vous souhaitez cliquer et visiter ce site pour en savoir plus ? L’exemple de site à ne pas faire et qui sert à illustrer justement tout ce que nous venons de voir Voici le site de l’élevage de yorkshire de la Villardière, on voit bien que le webmestre s’est fait plaisir, mais dites-vous bien que ce qui vous plait à vous ne plait pas forcément aux autres ! Vous l’aurez compris cette diapositive illustre ce qu’il ne faut pas faire donc on évite les yorkshire
- Est ce que vous préferez ce site ? Le design est plus classe, moins kitsh il y a un texte de présentation, le titre « une passion familiale » laisse penser que les bébés yorkshire sont élevés avec amour, qu’ils sont biens, et que vous y trouverez votre bonheur
- Nous venons de le voir avec les yorkshire attention à vos choix de photos ! Utiliser les photos c’est bien, c’est même très bien mais encore faut-il qu’elles soient de bonne qualité ! Si vous avez beaucoup de photos, pensez à une galerie ou un carrousel d'image qui vous permettront de présenter vos différents produits ou solutions, mais le contenu textuel devra accompagner ces photos. Concernant le texte : ni trop ni trop peu Pensez à votre page d’accueil, vous pouvez vous présenter succintement. En évitant quand même les mots comme "Bienvenue", "Salut à tous", ou encore "Bonjour", qui donnent un coté amateur à votre site. Je ne vous dis pas d'être impoli bien entendu, mais l'accueil du site doit être assez impersonnel, vous devrez présenter votre entreprise et vos valeurs. De même, le contenu texte est essentiel dans un site web pour son référencement. Mais soyez attentif à ne pas "saouler" vos visiteurs. Trop d'informations tue l'information.
- Le site I love Chablis Attention au choix des couleurs ! Rester simple ! Il y a une règle à suivre car elle a fait ses preuves, c’est celle des 60-30-10 : Les teintes de votre couleur maîtresse doivent couvrir 60% de votre espace Votre 2ème couleur doit couvrir 30% du design de votre page web et créer un contraste fort avec la 1ère couleur afin d’attirer l’attention sur des éléments que vous souhaitez mettre en avant La couleur complémentaire qui recouvre les 10% sert à accentuer des éléments stratégiques tels que les boutons et autres appels à action. Chaque couleur est associée à une émotion particulière. En voici les plus courantes : CouleurSensationExemple Bleu Confiance, intelligence Facebook, Intel, Nokia Rouge Energie, passion Coca-cola, Kellog’s, Nintendo Orange Créativité, communication Orange (fastoche) Vert Naturel, stabilité Starbuck’s, Perrier Jaune Joie, amitié Hertz, Wix, La Poste Noir Puissance, élégance L’Oréal, Nike http://www.code-couleur.com/signification/index.html Outils pour aider à composer sa palette : Coulourco adobe kuler et eyedropper, ce dernier est une extension de google chrome, avec une pipette vous pouvez capturer n’importe quelle couleur sur un site web Les couleurs neutre :crème, gris, beige, ce sont des couleurs douces, en webdesign elles transmettent une atmosphère serine, calme et naturelle Les couleurs néon : peuvent faire partie de vos 30%, bleu turquoise, fushia : vous pouvez donner de l’énergie à votre design, une touche jeune et sophistiquée. Cette tendance est très à la mode aujourd’hui Les couleurs pastels : ce sont des couleurs féminines, douces et agréables visuellement. Elles sont idéales pour séduire vos visiteurs en douceur, avec élégance Les combinaisons monochromes : il s’agi d’utiliser différentes couleurs appartenant à la même teinte. Ce style inspire confiance et oriente la concentration du visiteur sur les éléments pertinents.
- Maintenant nous allons voir les tendances du web 2014 On l’a vu l’esthétisme est primordial pour un site web car c’est la premiere impression que va avoir votre visiteur, si dès la premiere connexion votre internaute est attiré par votre site web, s’il y trouve l’info qu’il y cherche c’est gagné L’esthétique d’internet varie en fonction d’une large variété de paramètres allant des changements technologiques, aux chois esthétiques des géants de l’informatique en passant par la compréhension des besoins des internautes et l’influence des réseaux sociaux nouvelle génération Je vous ai composé un panorama de sites aux design tendance, ils ont tous été récompensés aux Awwwards Les awwwards : le jury est composé de cinq professionnels du web et du monde entier ! Bloggers, designers ou fondateurs d’agences Internet reconnues, ils vont tour à tour attribuer une note sur 10 à chacun des sites nominés. Ergonomie, originalité du design et contenus captivants sont les mots-clés pour décrocher le titre tant convoité ! Mais le vote du public compte aussi ! Vous pouvez donc aller voter pour notre projet, nous comptons sur vous pour nous soutenir !
- https://streetart.withgoogle.com/fr/#home Le long scrolling ou défilement en continu Ce site illustre un exemple de longscrolling, le longscrolling est très utilisé notamment pour répondre aux exigences des internautes qui sont de plus en plus nombreux à naviguer sur leurs tablettes ou smartphones. N’ayez plus peur de faire des pages a rallonge ! Les sites les plus populaires fonctionnent comme ca : facebook, twitter, tumblr ou pinterest Si vous vous demandez si votre site doit utiliser le longscrolling, aller voir vos stats de fréquentation, si la majotrité de vos internates utilisent un mobile, smartphone ou tabklette, oui ça peut être une solution Si vous avez une panoplie d’informations à donner dès la page d’accueil ou si vous actualisez régulièrement votre site et que vous voulez présenter vos infos de façon antichronologique, comme les blogs par exemple
- http://a-l-ecole-du-petit-vivier.education.gouv.fr/ Récompensé également par les Awwwards
- https://mvmt.org/ Il y en a de plus en plus sur le web, ce sont des galeries d’images, juxtaposées les unes aux autres et qui s’animent au survol de la souris, Ce design permet d’afficher plusieurs facettes de votre entreprise
- Le site web du canton du Jura Il n’est pas dans les nominés awwwards mais il illustre bien le flat design ou le design plat L’objectif est d’épurer l’interface afin d’orienter le visiteur à l’aide d’icones simples et colorées C’est windows qui a lancé le flatdesign
- http://ecards.strasbourg.eu/ Utiliser une grande image en arrière plan est un excellent moyen pour capter l’attention de vos visiteurs. C’est indémodable, utiliser de grandes photos en fond existe depuis un moment, on voit de plus d’animations ou de vidéos d’ailleurs C’est une tendance qui va rester un bon moment, une valeur sûre Un seul bémol attention à vos choix de photos, les internautes veulent de l’authenticité ! Pas de mannequins 3 suisses avec un sourire colgate, ca ca ne marche plus !
- http://www.lesdunesdeflandre.fr/dune-fossile Bel exemple d’animation en fond Les animations font leur grand retour, elles permettent de mettre l’accent sur des éléments importants
- http://therealawards.com/ Le split screen c’est quand vous coupez votre écran en deux parties symétriques Cela permet de créer un effet de contraste sur la page. Cet effet de contraste est bien souvent amplifié par une navigation en scroll inversé (chacune des parties se scroll simultanément dans des sens contraires) ce qui donne un rendu vraiment original. Ce type de site web, très graphique, convient parfaitement aux marques qui ont une forte identité visuelle car il permet de la mettre en exergue. Les sites qui ont principalement du contenu texte ne sont donc pas appropriés pour le split screen, dont le but est de créer un contraste entre deux (grandes) images afin de créer un effet visuel. A l’heure où l’image compte autant que le contenu dans la création de site internet, la tendance du split screen se généralise et est de plus en plus appréciée par les designers et les internautes.
- http://www.operadeparis.fr/ On l’a dit le responsive web design n’est plus une tendance je dirais que c’est un incontournable À moins que votre site propose une application mobile ou une version adaptée aux supports mobiles En France la moitié des internautes sont des mobinautes cad qu’ils surfent sur leurs mobiles
- http://lesberges.paris.fr/ Les grands textes sont également plébiscités Un accueil chaleureux, une citation permettent à vos visiteurs de s’imprégner de l’ambiance de votre site en un coup d’oeil
- C’est mon coup de coeur Visit provence est intéressant car il propose plusieurs design, en page d’accueil vous avez un design avec une très grande vidéo en fond, des bruits qui vous plonge tt de suite dans l’ambiance, les cigales, la mer on a du flat design, des grands textes Par contre il n’est pas responsive mais a une version adaptée au mobile C’est vous dire combien ce petit bijou a du coûter ! car c’est un bel exemple de mélange entre accessibilité et webdesign