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 côté 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 pour cent, 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 côté 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 17988 - Catégorie : Scripts)
Faites passer - Imprimer
Commentaires
Cet article n'a pas encore été commenté.
Vous pouvez vous exprimer en remplissant le formulaire ci-dessous.
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
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.
(écrit le 12/10/2016 - 14.717 lectures)
Script de contrôle de page web selon la résolution, le navigateur
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 capture de telles pages, pour contrôler en un coup d'oeil le résultat.
(écrit le 14/09/2016 - 10.882 lectures)
Placeholder sous IE
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é.
(écrit le 24/01/2014 - 13.427 lectures)
Rendre ses scripts asynchrones pour optimiser le chargement de pages web
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.
(écrit le 23/05/2012 - 6.688 lectures)
Twitter et les raccourcis d'url
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.
(écrit le 22/09/2010 - 5.569 lectures)
Interdire le clic droit
Empêcher la copie d'images, mais cela seulement en évitant d'utiliser des instructions restrictives.
(écrit le 17/02/2010 - 17.802 lectures)
Script pour lecteur vidéo embarqué
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.
(écrit le 04/04/2009 - 6.811 lectures)
Personnaliser ses cartes Google Maps : les icones
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.
(écrit le 20/03/2008 - 13.978 lectures)
CMS Gestion de contenu
La gestion de contenu, ou la Publication Assistée par Internet avec un CMS (Système de gestion de contenu)
(écrit le 15/02/2004 - 8.864 lectures)
Pages statiques ou pages dynamiques
Sites web avec Pages statiques ou pages dynamiques, comment ne pas confondre les deux !
(écrit le 15/10/2003 - 8.331 lectures)
Optimiser son code source
Peu d'outils web permettent cette option de manière intrinsèque et pourtant il est possible voire conseillé d'optimiser son code source.
(écrit le 19/06/2003 - 8.111 lectures)
Tutoriels Webmaster
Référencement :
Depuis l'arrivée de l'intelligence artificielle dans nos vies, bien des domaines sur internet se posent des questions, les webmaster sont ainsi concernés, se demandant si l'indexation de leur site par GPTBot est profitable.
Référencement :
Comment analyser les pages de la search console qui sont répertoriées par Google comme explorées mais non indexées. Faut-il demander leur indexation ou n'y aurait-il pas quelque chose de mieux à faire.
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 capture 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, s'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).
Pages webmaster
Actu Webmaster
Thèmes Phortail