Intégrer des images dans un site web

Navigation:

  1. Pages Webmaster
  2.  > 
  3. Conception


Lorsque sur un site web les images deviennent cliquables, il faut gérer correctement la navigation, au risque de perdre un visiteur


Sur un site web, il est de bon ton de proposer des images, cela rends la lecture d'articles agréable et sur certains sites, les images sont même une valeur ajoutée.

Mais que ce passe t'il lorsque les images sont cliquables.

Gérer les images en vignette


Regardons le cas suivant, rencontré dernièrement en validant des sites de l'annuaire thématique.
Le site web propose des articles, illustré de photos de choix. Celles ci sont affichées sous forme de vignettes et donc cliquables pour profiter de la photo en taille réelle. Jusque là tout est très bien.

Sauf que lorsque que l'on clique sur la vignette en question, on affiche directement la photo dans le navigateur. Il n'y a plus de lien sur lesquels cliquer, bon nombre d'internautes ferment alors l'onglet dans l'idée de revenir sur le site, et précisément sur la page qui contenait la vignette. En fermant l'onglet, c'est le site lui même que l'internaute a fermé.
Quelle url ? quelle page ? Trop de questions font que l'internaute change généralement de sujet et ne cherche pas faire l'effort de reprendre le processus qui l'a amené jusqu'au site en question.

Comment ouvrir les images en taille réelle ?


Vous avez compris qu'il ne faut pas que l'internaute perde de vue la navigation qu'il est en train de faire. Pour cela, il convient de ne pas afficher les images directement, mais indirectement dans des pages web.
Une vignette cliquable affiche alors une page contenant les menus de navigation, y compris ceux permettant de retourner à l'article, et bien entendu l'image en taille réelle.
Il existe des solution d'affichage en ajax, mais ce n'est pas le propos de cet article, plus orienté sur la navigation.

Avec une navigation correcte et orientée sur le besoin de l'internaute, la visite du site est poursuivie, qu'il y ait des vignettes, des images taille réelles.



Article écrit par Janol le 12/11/2009
(Hits 3458
- Catégorie : Conception)

Faites passer - Imprimer

Commentaires

Cet article n'a pas encore été commenté.
Vous pouvez vous exprimer en remplissant le formulaire ci-dessous.


Autres publications Conception

Le responsive design suffit il pour afficher un site sur mobile
Optimiser un site web avec du responsive design est un pas de plus fait vers l'utilisateur final
Pour autant, si une page du site a un poids de plusieurs méga, l'utilisateur risque, si il est sur un téléphone mobile, de partir avant que la page ne soit complétement chargée.
(écrit le 23/01/2016 - 2.893 lectures)

Recettage de projet web
Comment faire le recettage d'un projet web ? Les tests de recette sur un projet internet sont ils différents des tests réalisés pour un projet classique ?
(écrit le 01/02/2011 - 18.137 lectures)

Twitter va s'afficher partout
Twitter a annoncé une nouveauté, pas du tout attendue par les webmasters, la possibilité de twitter depuis n'importe où, sur le web
(écrit le 16/03/2010 - 5.832 lectures)

Javascript et la navigation web
Utiliser javascript comme un lien interne est il une bonne chose pour la navigation web, le référencement ?
Comment concevoir correctement ses pages web.
(écrit le 17/02/2010 - 11.326 lectures)

Alimenter un fichier kml en continu
Un fichier kml n'est qu'un fichier xml, donc structuré donc modifiable à la volée. Le résultat donne une carte Google Earth qui présente un flux de données mais de manière automatique.
(écrit le 13/06/2009 - 4.888 lectures)

Faire des liens
Faire les liens et la base de l'internet et donc du référencement de sites, voyons le cas des pages dont on ne veut pas que le lien soit suivi (rel=nofollow)
(écrit le 11/11/2008 - 3.439 lectures)

Cliquez ici ou là
L'internaute est un imbécile, il faut lui dire où cliquer ! ah bon ?
(écrit le 24/10/2008 - 6.944 lectures)

Liens hypertexte
Le lien hypertexte, élément de base de la page web, pour l'internaute comme pour le référenceur, et pourtant...
(écrit le 28/09/2005 - 7.433 lectures)

Site web de qualité
Niveaux et éléments de qualité d'un site web.
(écrit le 15/05/2005 - 21.060 lectures)

Kit graphique ou script
Pour faire un site web, faut il choisir un kit graphique ou bien un script ?
(écrit le 15/12/2004 - 16.955 lectures)

Liens relatifs liens absolus
Bien gérer ses liens et ses répertoires, c'est éviter les erreurs 404 page non trouvée
(écrit le 06/10/2004 - 10.096 lectures)

Conception et référencement de site
Penser à la visibilité d'un site dès la phase de conception.
(écrit le 23/09/2004 - 6.006 lectures)



Tutoriels Webmaster

Référencement :

Comment Google Analytics et la Search console Google fonctionnent. Quelle est la différence entre ces outils ? Est ce qu'ils interagissent entre eux ?


Scripts :

Internet a deux caractéristiques principales : Cela bouge beaucoup et cela bouge vite. Le webmaster se doit d'être actif, voire réactif, et de disposer de l'information rapidement. Un simple script en python peut l'aider.


Scripts :

Comment contrôler visuellement que l'affichage de différentes pages web se fait correctement avec les différentes configurations de navigateur, et résolution d'affichage. Le Webdriver de Sélénium permet via un script d'automatiser la captures de telles pages, pour contrôler en un coup d'oeil le résultat.


Conception :

Optimiser un site web avec du responsive design est un pas de plus fait vers l'utilisateur final
Pour autant, si une page du site a un poids de plusieurs méga, l'utilisateur risque, si il est sur un téléphone mobile, de partir avant que la page ne soit complétement chargée.


Outils :

Comment gérer les erreurs 404 not found sur le fichier browserconfig.xml, alors que celui ci est demandé par le navigateur.


Scripts :

Les feuilles de style d'un site web permettent d'adapter l'affichage à la taille de l'écran. Voyons comment faire pour un site qui s'affiche aussi bien sur un ordinateur, une tablette qu'un téléphone intelligent (smartphone).


Scripts :

L'attribut Placeholder, permettant en HTML5 de renseigner le label d'un champs input, ne fonctionne pas sous Internet Explorer. Voici un script JavaScript simple et efficace à insérer pour contourner ce manque de fonctionnalité.


Sécurité :

Poster un spam sur un forum est pour certains acteurs du web un exercice amusant. Pour d'autres c'est un moment de réflexion obligatoire pour éviter de se faire spammer.
Voyons quelles sont les solutions pour éliminer les posts des spameurs tout en gardant ceux des internautes.


Pages webmaster
Actu Webmaster

Thèmes Phortail