Le responsive design suffit il pour afficher un site sur mobile

Navigation: Pages Webmaster > 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.



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 945
- Catégorie : Conception)

Faites passer - Imprimer
Partagez cette page :



Commentaires

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


Autres publications Conception

Info Bulle avec onglet sur un marker
(Ecrit le 07/02/2013 - 3.953 lectures)
Sur les cartes google map, les icônes peuvent présenter une info bulle, avec du contenu html, et des présentations via des onglets. Version 3 de l'api google map.

Recettage de projet web
(Ecrit le 01/02/2011 - 16.353 lectures)
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 ?

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

Javascript et la navigation web
(Ecrit le 17/02/2010 - 10.948 lectures)
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.

Intégrer des images dans un site web
(Ecrit le 12/11/2009 - 3.062 lectures)
Lorsque sur un site web les images deviennent cliquables, il faut gérer correctement la navigation, au risque de perdre un visiteur

Alimenter un fichier kml en continu
(Ecrit le 13/06/2009 - 4.383 lectures)
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.

Faire des liens
(Ecrit le 11/11/2008 - 3.056 lectures)
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)

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

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

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

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

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

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



Tutoriels Webmaster

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.


Qualité :

Si il est préférable de faire un tweet lisible, voyons comment faire pour le générer de manière automatique à partir d'un article.


Pages webmaster Ajoutez à votre page Google

Projet Web NTIC


Annuaire


Thèmes Phortail