Le responsive design suffit il pour afficher un site sur mobile

Navigation:

  1. Pages Webmaster
  2.  > 
  3. 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.




Google Analytics

Oui mais l'utilisateur aurait dû attendre que les images aient eu le temps de se charger.
Ah oui, mais c'est bien sur, se dit alors le webmaster du dit site, les mêmes images vont être chargées que le client web soit sur un ordinateur ou un mobile, indépendamment du responsive design. Celui-ci ne faisant que redimensionner les éléments du site.
Il convient alors de se demander si il ne serait pas possible de faire un chargement des images, spécifique pour le cas de l'internaute sur mobile (le mobinaute).
On sait aujourd'hui détecter un mobile, il y a des class php pour cela.
On peut également lire le user agent du client Si ce dernier contient les mots clés que sont ipad, iphone, android, blackberry, alors nous avons un mobinaute.
Voila pour la détection.
Ensuite il faut déterminer la taille idéale.
Pour des images insérées dans du texte, on peut déterminer une taille d'image avec par exemple une hauteur.
Soit une hauteur pour une image à destination d'un ordinateur, et une hauteur pour celle à destination du téléphone mobile.
A partir du rapport hauteur largeur de l'image source, on peut calculer la largeur de l'image de destination, connaissant sa hauteur.
L'image est alors crée via imagejpeg (php)

Et voila notre pseudo code est fait.
Si la hauteur source est supérieure à la hauteur voulue
alors je crée l'image de destination avec une hauteur de destination
Si l'utilisateur est en mobile, alors la hauteur de destination est de 200px, sinon elle est de 400px
Connaissant la hauteur de destination et le taux entre la hauteur et la largeur de l'image source, la largeur de l'image de destination est calculée.
l'image est crée si elle n'existe pas déjà, dans un répertoire de miniatures, si besoin.
C'est cette technique qui a été mise en place pour présenter les images du recit de randonnée autour du Vieux Chaillol.
Les images n'ont pas la même taille selon le type de navigateur (desktop ou ipad / ipone / android)
Voir : Tour du Vieux Chaillol



Article écrit par Janol le 23/01/2016
(Hits 2730
- 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

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.058 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.793 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.282 lectures)

Intégrer des images dans un site web
Lorsque sur un site web les images deviennent cliquables, il faut gérer correctement la navigation, au risque de perdre un visiteur
(écrit le 12/11/2009 - 3.426 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.850 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.404 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.899 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.408 lectures)

Site web de qualité
Niveaux et éléments de qualité d'un site web.
(écrit le 15/05/2005 - 20.997 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.935 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.076 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 - 5.984 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