Site web adapté à la taille de l'écran

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


Avec la multiplication des objets connectés à l'internet, les sites web se trouvent confrontés à la multiplicité des tailles d'écrans.

Si un site est classiquement développé pour différentes tailles d'écran d'ordinateur, il faut développer une seconde version pour tablette, ainsi qu'une troisième pour s'adapter à la taille d'écran des smartphones.

Avec les CSS responsive, il est désormais possible de séparer réellement le contenu de la présentation, et d'adapter dynamiquement le contenu affiché à de la taille de l'écran. C'est ce que propose Bootstrap.

Bootstrap et les CSS

Bootstrap est un framework qui permet de construire la structure d'un site web en css responsive. Il est à la base de twitter, on parle même de Twitter Bootstrap.

Différents types de structure de site ont été développés (menu, pied de page, carrousel, grille), le framework permet de créer sa propre structure. En fin de création, le framework génère les feuilles de style, les fichiers javascript ainsi que les pages en html 5 avec la structure même du site. A partir de ces pages générées, il ne reste plus qu'à construire la version cible en adaptant l'ergonomie désirée, le design, ainsi que les fonctions. Du coté de l'affichage dynamique, cela s'appuie sur les CSS responsive.

CSS responsive



Largeur ordinateur


Largeur tablette


Largeur smartphone



Le principe de ces feuilles de style est de réagir lorsque la taille de l'écran change.

Différentes tailles d'écran sont donc ciblées dans les css :



  • largeur minimum de 768 px (smartphone)


  • largeur minimum de 992 px (tablette)


  • largeur minimum de 1200 px (ordinateur)

Etant donné que l'écran est divisé en colonnes, il est possible d'afficher 3 colonnes côte à côte sur un ordinateur, seulement deux sur une tablette, et une seule sur un smartphone.

Pour chaque taille d'écran les styles sont générés par le framework et ce au niveau de la taille des objets (police de caractères, bouton, espace, hauteur ...), de telle sorte que l'affichage est réellement adapté à l'écran.

Pour les images, la taille n'est plus absolue en pixel, mais relative.

La largeur minimum est ainsi valorisée à 100 pourcent, alors que la hauteur est valorisée à auto.

Cette caractéristique fait que la taille de l'image est déclarée en feuille de style via une classe.

A ce niveau une astuce doit être trouvée pour ne pas télécharger sur un smartphone une image de plusieurs centaines de kilo-octet alors qu'elle va être affichée sur 400 pixel.

Alternative a Bootstrap



Bootstrap est un framework et permet de faire ce que l'on veut coté présentation. Les CSS responsives sont également prises en compte dans les CMS, de Drupal, SPSP à Wordpress.

Coté outils responsive, citons ZURB Foundation, Skeleton, Kube.





Le présent site a ainsi été révisé avec bootstrap et html5. Il s'affiche ainsi sur toutes les tailles d’écran avec la même version de contenu et de présentation, ce qu'il n'était pas possible de faire avec les versions précédentes d'html et css.



Article écrit par Janol le 06/03/2014
(Hits 3495
- Catégorie : Scripts)

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 Scripts

Script de lecture de pages web et d'aide à la décision
(Ecrit le 12/10/2016 - 431 lectures)
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.

Script de contrôle de page web selon la résolution, le navigateur
(Ecrit le 14/09/2016 - 459 lectures)
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.

Placeholder sous IE
(Ecrit le 24/01/2014 - 2.850 lectures)
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é.

Rendre ses scripts asynchrones pour optimiser le chargement de pages web
(Ecrit le 23/05/2012 - 4.621 lectures)
En plus d'un bon placement de scripts dans la page, il est possible d'accélérer le chargement d'une page en gérant ses scripts de manière asynchrone.

Twitter et les raccourcis d'url
(Ecrit le 22/09/2010 - 4.071 lectures)
Septembre 2010 voit les nouveaux raccourcis d'url se mettre peu à peu en place avec la nouvelle version de twitter. Quels sont alors les impacts sur le développement des pages vis à vis de l'API Twitter.

Interdire le clic droit
(Ecrit le 17/02/2010 - 15.931 lectures)
Empêcher la copie d'images, mais cela seulement en évitant d'utiliser des instructions restrictives.

Script pour lecteur vidéo embarqué
(Ecrit le 04/04/2009 - 5.198 lectures)
Lorsque l'on intègre sur un site web les lignes de code proposées par les sites de plateforme vidéo, le code n'est pas valide selon la syntaxe du W3C. voici donc un code correct.

Personnaliser ses cartes Google Maps : les icones
(Ecrit le 20/03/2008 - 11.025 lectures)
Les icônes google maps sont personnalisables, pour des cartes intégrées dans un site web et qui communiquent ainsi d'avantage. Ce code source est utilisable.

CMS Gestion de contenu
(Ecrit le 15/02/2004 - 7.480 lectures)
La gestion de contenu, ou la Publication Assistée par Internet avec un CMS (Système de gestion de contenu)

Pages statiques ou pages dynamiques
(Ecrit le 15/10/2003 - 6.919 lectures)
Sites web avec Pages statiques ou pages dynamiques, comment ne pas confondre les deux !

Optimiser son code source
(Ecrit le 19/06/2003 - 6.766 lectures)
Peu d'outils web permettent cette option de manière intrinsèque et pourtant il est possible voire conseillé d'optimiser son code source.



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