• Support de cours 2015-2016

Cours n°3 : suite des principes des CSS

Rappels 

Lors du cours précédent nous avons présenté : 

  • comment appliquer des CSS dans une page web (style en ligne ou appel de fichiers externes)
  • le comportement par défaut des éléments inline/en ligne et block 
  • les méthodes pour appliquer des CSS à des éléments d'une page web (sélecteur universel, sélecteur de contexte, sélecteur d'id, sélecteur de class)
  • une introduction aux notions de positionnements et de flux 
Nous allons à l'occasion de cette séance nous focaliser sur plusieurs aspects techniques des CSS (marges, propriété position, propriété float) puis nous évoquerons différents framework CSS qui facilitent et améliorent la qualité des intégrations CSS avant d'aborder les notions permettant d'adapter un site web aux tablettes et smart phones. 


1. Marges intérieures et extérieures

Pour chaque élément html (de type block) on peut définir l'espacement qui le séparera des autres éléments (margin) et les espacements intérieurs dont il peut bénéficier (padding).

1.1. Déclaration des tailles

Les tailles de ces marges peuvent se déclarer en pixels (px), en em, en %, etc. Tout dépend si l'on veut qu'elles soient fixes ou proportionnelles.

On peut détailler les tailles des marges à l'aide des suffixes -top (haut), -right (droite), -bottom (bas),-left (gauche), ou synthétiser les quatre d'un seul coup (la première valeur étant celle du haut, puis on tourne dans le sens des aiguilles d'une montre).

 margin:2px 5px 2em 0;  

revient à :

 margin-top:2px;   margin-right:5px;   margin-bottom:2em;   margin-left:0;  

Si on ne met que deux valeurs, la 1ère s'appliquera au haut et au bas, la seconde à droite et à gauche.

 padding:2px 5px;  

revient à :

 padding-top:2px;   padding-bottom:2px;   padding-right:5px   padding-left:5px;  

1.2. Le modèle des boites

D'après le "box model", lorsqu'on attribue une taille à un élément de type block (à l'aide d'un width ou d'un height), les marges viennent s'ajouter à cette taille.

Notez aussi le très pratique margin:auto qui permet, dans le cas d'un bloc muni d'une largeur, de centrer horizontalement un élément.

Code CSS

p {   width:200px;   padding:40px;   margin:auto;   }  

Le paragraphe aura une largeur totale de 200 + 2*40 = 280 pixels et sera centré dans son élément parent.


A noter que les éléments de type inline ne peuvent pas se voir affecter de hauteur, de largeur et de marges verticales. 

2. Notion de flux

Le flux d'un document pourrait se définir comme étant le comportement naturel d'affichage des éléments d'une page web.

Autrement dit, les éléments se succèdent dans l'ordre où ils sont déclarés dans le code HTML avec la différence entre les éléments block et inline :

  • Les éléments de type block (h1, p, ul, ol, dl, table, blockquote, etc.)
  • Les éléments de type inline (a, img, strong, abbr, etc.)

Un élément de type block peut s'identifier à une brique, à un gros "bloc" d'informations qu'on va pouvoir manipuler aisément. Il se différencie des éléments de type en ligne sur différents points, dont ceux-ci :

  • Il occupe l'entierté de la largeur de son conteneur
  • Il permet l'attribution de marges verticales
  • Il permet la modification de sa hauteur et largeur

Expérience : ce qui ne fonctionne pas sur un élément "inline" : hauteur et marge verticales.

http://codepen.io/semantiqueweb/pen/vNdVjO

3. La propriété position

La propriété position porte merveilleusement bien son nom puisqu'elle va nous permettre de gérer les… positions.

C'est la propriété vers laquelle l'on se doit de se tourner en premier lieu dès que l'on considère une mise en page pour laquelle les possibilités du flux ne suffisent plus, et c'est là toute la raison d'être de cette puissante propriété.

3.1. La position relative

La position relative (position:relative) permet de décaler un élément par rapport à une position de référence : celle qu'il avait dans le flux. cf http://codepen.io/semantiqueweb/pen/JYpmZq

Les éléments qui le suivent et le précèdent ne sont pas influencés par ce décalage puisqu'ils considèrent que l'élément est toujours dans le flux à sa position initiale. En pratique, ce comportement est rarement recherché bien qu'il puisse s'avérer utile dans certains cas.

Attribuer à un élément une position relative peut par contre être pratique, voire indispensable, dans d'autres situations dont les plus courantes sont sans nul doute les suivantes:

  • Servir de référent à un élément enfant positionné en absolu (rappelons qu'un élément positionné absolument grâce aux propriétés top, left, … le fera par rapport à la fenêtre du navigateur à défaut d'avoir un parent lui-même positionné)
  • Bénéficier de la possibilité d'utiliser la propriété z-index pour gérer des superpositions d'éléments (propriété inopérante pour des éléments du flux)

3.2. La position absolue

La position absolue (position:absolute) permet de ne pas dépendre de l'ordre dans lequel les éléments HTML sont déclarés dans le code, contrairement aux flottants que nous verrons plus tard.

La position absolue s'affranchit définitivement du cordon liant jusqu'alors intimement contenu et présentation. L'élément étant totalement extrait du flux, il ne dépend plus du tout des éléments qui le côtoient.

Il faut voir le positionnement absolu comme étant une méthode radicale (mais puissante) qui retire tout à fait un élément du flux: il n'existe pour ainsi dire plus aux yeux des éléments qui, eux, restent dans le flux.

Rappelons un point important concernant ce mode de positionnement : un élément positionné en absolu se réfère non pas à son parent direct, mais au premier ancêtre positionné (en relatif) qu'il rencontre. cf http://codepen.io/semantiqueweb/pen/ZbrqVM

L'élément, n'étant plus dans le flux naturel, perd une de ses caractéristiques majeures qui est celle de recouvrir la totalité de la largeur disponible de l'élément parent.

Il est capital de noter qu'un élément bénéficiant d'une position absolue ne bougera pas de sa position initiale tant que l'une des propriétés top, bottom, left ou right n'a pas été précisée; il s'agit d'ailleurs là d'un comportement appliquable à toutes les positions.

3.3. La position fixe

Le positionnement fixe (position:fixed) s'apparente au positionnement absolu, à l'exception des points suivants:

  • Lorsque le positionnement est précisé (top, right, …), l'élément est toujours positionné par rapport à la fenêtre du navigateur
  • L'élément est fixé à un endroit et ne pourra se mouvoir, même lors de la présence d'une barre de défilement. En d'autres termes, la position intiale est fixée au chargement de la page, le fait qu'une éventuelle scrollbar puisse être utilisée n'a aucune influence sur le positionnement de l'élément: il ne bouge plus de la position initialement définie.

3.4. La position statique

La position statique (position:static) correspond simplement à la valeur par défaut d'un élément du flux. Il n'y a que peu d'intérêt à la préciser, si ce n'est dans le but de rétablir dans le flux un élément en particulier parmi une série qui serait positionnée hors du flux.

4. La propriété float

La propriété float demeure sans doute, malgré des qualités intrinsèques évidentes, la propriété la plus mal comprise mais surtout, la plus mal employée des CSS. Sa simplicité d'utilisation apparente recèle pourtant certaines subtilités fondamentales et lui confère malheureusement un choix inconsciemment systématique pour toute disposition d'éléments en plusieurs colonnes.

4.1. Rôle & détournement des flottants

La propriété float existe avant tout pour répondre à un besoin typographique précis: la création d'habillages. Un habillage est une pratique courante dans le média print consistant à "enrouler" un texte autour d'un élément (graphique ou texte); il était normal de retrouver cette ouverture de mise en page dans notre média favori.

À l'instar du positionnement absolu, un élément flottant adopte par défaut la largeur qu'occupe son contenu. Le principe de base est simple: un élément flottant est ôté partiellement du flux et placé à l'extrême gauche (float:left) ou droite (float:right) de son conteneur, forçant par la même occasion tout contenu du flux qui suit à l'envelopper. Deux objets flottants dans la même direction se rangeront côte à côte, seul un contenu demeuré dans le flux qui les succède immédiatement initiera l'habillage. C'est justement ce caractère hâtif de disposition adjacente de blocs qui est la cause d'une mauvaise et sur-utilisation de cette propriété trop souvent écartée de son application originale.

cf http://codepen.io/semantiqueweb/pen/YyvRwb

4.2. Nettoyer les flottants

Méthode 1 :

La propriété clear s'utilise conjoitement aux float et permet à un élément (qui peut être d'ailleurs lui-même flottant) de ne plus subir le comportement d'habillage dicté par un objet flottant qui le précède directement et, par conséquent, de se caler en-dessous de ce dernier. Le clear autorise un nettoyage des flottants exclusivement à gauche (clear:left), à droite (clear:right) ou les deux simultanément (clear:both).

Méthode 2 : 
Pour annuler les flottements il est également possible de déclarer en CSS les propriétés suivantes pour le conteneur des éléments flottants : 
  • déclaration d'une largeur
  • déclaration de la propriété overflow avec pour valeur : visible ou hidden.

4.3. Exemple Image & texte côte à côte

Je souhaite disposer sur un espace de 300px de large un bout de texte et une image côte à côte sur base du marquage HTML suivant:

<p>
    <img alt="" src="kiwiz.png" width="100" height="130" />
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
    do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    Ut enim ad minim veniam, quis nostrud exercitation ullamco
    laboris nisi ut aliquip ex ea commodo consequat. Duis aute
    irure dolor in reprehenderit in voluptate velit esse cillum
    dolore eu fugiat nulla pariatur.
</p>

Le résultat auquel j'aimerais arriver sans avoir à modifier mon code HTML est le suivant:

Capture d'écran: colonne de texte aligné à droite avec une illustration sur la droite

À nouveau, grâce aux positions et aux propriétés du flux, je vais rapidement arriver au résultat escompté: il me suffira simplement d'utiliser ma boîte p comme référent pour positionner mon image en ayant préalablement réduit la zone où mon texte pourra s'étendre:

p {position:relative; width:180px; padding-right:120px; text-align:right;}
p img {position:absolute; right:0;}

cf http://codepen.io/semantiqueweb/pen/JYpeGo

4.4. Exemple de mise en forme du header d'une page

Un cas classique avec plusieurs éléments flottants : http://codepen.io/semantiqueweb/pen/YyeRGp

5. Conclusions sur les positions et les flux

La disposition des éléments en CSS est définitivement l'un des aspects de ce langage les plus subtils et mal compris. En attendant une implémentation raisonnable des différentes possibilités du display, ce sont essentiellement les propriétés position et float qui feront office de ténors en la matière.

Il n'est pas toujours aisé dans un apprentissage comme celui du positionnement CSS de savoir pour quels choix opter et dans quels cas. Aussi, une marche à suivre simple pourrait être appliquée dans le choix d'une méthode à privilégier:

  1. Je laisse tant que faire se peut les éléments dans le flux et tire parti de ses bénéfices (décalages grâce aux marges, recouvrement par un bloc de toute la largeur d'un parent, etc.)
  2. J'ai besoin de sortir un élément du flux :
    1. Si j'ai le contrôle du contenu de ma page ou que je suis assuré que mon élément hors flux sera systématiquement moins long que ce qui demeure dans le flux, je privilégie la propriété adéquate: position
    2. Si je n'ai aucun contrôle fiable sur des longueurs de contenu totalement inconnues et variables, j'opte pour des placements à base de flottants exclusivement sur les éléments qui l'imposent

Nous voyons donc que le seul cas où l'utilisation de flottants pour créer du multi-colonnage est plus adaptée est lorsque nous ne pouvons prédire quelle sera la plus haute des colonnes et qu'à celles-ci succèdent d'autres contenus.

Utilisez à bon escient les outils dont vous disposez et n'optez jamais pour une solution sans en évaluer les avantages et inconvénients; la réflexion de structuration de l'information va au-delà d'un balisage sémantique…

5.1. Pour aller plus loin

6. Les Framework CSS

Avantages des framework CSS

  • gérer la compatibilité sur les différents navigateurs (reset CSS)
  • faciliter le positionnement CSS (« grille » CSS)
  • faciliter la gestion des résolution d’écrans multiples à l’heure de la mobilité (responsive design)

Cela permet donc de vous libérer de contraintes techniques peu intéressantes et de vous consacrer pleinement au design de votre site.

Les solutions disponibles
Il existe maintenant de nombreux framework disponibles sur le marché. L’idéal est d’en essayer quelques uns pour voir lequel correspond le mieux à vos habitudes et votre projet. Il faut notamment voir de quelles fonctions vous aurez besoin, car les framework sont plus ou moins simples et légers.

Knacss : sans doute le plus léger. Il a été créé par Raphaël Goetter, fondateur d’Alsacreations dont nous avons déjà dit du bien dans ces pages. Il se compose en fait d’une simple feuille CSS à intégrer dans vos projets et qui vous servira de base. Vous pourrez trouver le code commenté (utile pour comprendre et apprendre) et aussi une galerie de réalisations utilisant Knacss.

Blueprint CSS : là c’est un framework plus complet, qui permet de gérer une grille, mais également la typographie et les formulaire. Vous pourrez trouver sur le site des démos ainsi qu’un lien vers le wiki où vous trouverez des tutoriaux, des plugins et des thèmes.

960 Grid System : vous trouverez sensiblement les mêmes fonctionnalités qu’avec Blueprint. A noter que dans le « package » se trouve des plugins pour Photoshop et Fireworks.

Kube : Peut être un peu plus simple d’accès, il propose des positionnements en grille avancés. Vous pourrez trouver un tutoriel en français sur la ferme du web.

Bootstrap : un framework CSS très complet développé par Twitter. Vous trouverez un tutoriel très complet sur le site du zéro.

Si vous voulez une vue de l’ensemble des framework CSS, vous pouvez visiter ce lien qui vous donnera une liste quasi exhaustive de framework, et ce qu’ils proposent comme fonctionnalités.

7. Notions de responsive design

7.1. Ébauche de définition

Le Responsive Web design est une approche de conception Web qui vise à l'élaboration de sites offrant une expérience de lecture et de navigation optimales pour l'utilisateur quelle que soit sa gamme d'appareil (téléphones mobiles, tablettes, liseuses, moniteurs d'ordinateur de bureau).

Une expérience utilisateur "Responsive" réussie implique un minimum de redimensionnement (zoom), de recadrage, et de défilements multidirectionnels de pages.

Le terme de "Responsive Web design" a été introduit par Ethan Marcotte dans un article de A List Apart publié en mai 2010. Il décrira par la suite sa théorie et pratique du responsive dans son ouvrage "Responsive Web Design" publié en 2011. Celle-ci se limite à des adaptations côté client (grilles flexibles en pourcentages, images fluides et CSS3 Media Queries).

7.2. Site dédié, application ou responsive ?

Nous disposons actuellement de trois moyens pour véhiculer le contenu web sur des appareils connectés : un site dédié, une application native et une version responsive de site web.

Sachez que chaque solution a des avantages et des inconvénients : selon vos besoins et contraintes (notamment de budget et de délais), il pourra être parfaitement pertinent d'opter pour l'une ou l'autre.

Un site dédié

Un projet de site dédié consiste à concevoir deux ou plusieurs entités différentes selon le dispositif visé : un site principal, un site pour smartphones, un site pour tablettes, etc.

Généralement, un test initial côté serveur détecte le type d'appareil et renvoie vers une adresse web dédiée (m.monsite.com par exemple).

Les avantages des sites web dédiés sont :

  • La possibilité d'affiner précisément la structure du site et ses contenus en regard du périphérique utilisé
  • La possibilité de cibler et de s'adapter à des fonctionnalités variées (notamment le touch)
  • Peut être une alternative "rapide", en attendant une refonte complète (et responsive) de son site web

Mais un site dédié n'est pas exempt d'inconvénients :

  • Le contenu dupliqué ("duplicate content")
  • La maintenance de plusieurs versions de site et de plusieurs adresses web (moins facilement indexables par un moteur de recherche)
  • La détection côté serveur ("UA sniffing") souvent biaisée ou non à jour
Une application native

Une application native est un produit développé spécifiquement dans divers "langages" (iOS, Android, WindowsPhone) et qui se télécharge et se référence au sein d'un "Store" (AppStore, Google Play, Windows store).

Cela lui confère certains avantages :

  • La prise en charge facilitée de fonctionnalités natives (touch, accéléromètre, notifications, GPS, etc.)
  • Un installation possible sur son périphérique
  • Une totale "acclimatation" au périphérique (ergonomie, performances, densité de pixels)
  • La présence de sa marque sur l'AppStore (pour ne citer que lui) et de pouvoir disposer d'un "raccourci" sur le smartphone de l'utilisateur

… Mais aussi certains inconvénients :

  • Un développement spécifique dans plusieurs langages (propres à iOS, Android, WindowsPhone, etc.)
  • Le coût du développement, des licences, et de la maintenance pour chaque système d'exploitation
  • Un contenu non indexable par un moteur de recherche web classique
  • La mise à jour de l'application nécessite une action de l'utilisateur
Une version responsive

À l'heure où des centaines de tailles et formats d'écrans différents se connectent à chaque instant, la méthode du Responsive Web design apparaît comme la "solution de facilité" en vertu de son objectif principal : s'adapter à tout type d'appareil de manière transparente pour l'utilisateur

  • Des coûts et des délais généralement inférieurs aux techniques citées précédemment
  • Une maintenance de projet facilitée (une seule feuille de style, un seul fichier HTML, etc.)
  • Une mise à jour transparente et un déploiment multi-plateformes
  • Le Responsive peut être envisagé après la conception initiale du site (même si ce n'est pas l'idéal)

L'un des avantages indéniables depuis quelques temps est que Google met en avant les sites "adaptés au mobile" au sein de ses résultats de recherche :

Les inconvénients ne sont cependant pas nuls :

  • De bonnes connaissances techniques, et une veille technologique constante, sont indispensables
  • Il est nécessaire de prévoir des tests nombreux et variés tout au long du projet ("device labs", simulateurs)
  • Il est difficile de contourner les limites ergonomiques et de performances des navigateurs web
  • Faire du responsive, c'est… plus long que de ne rien faire (25% du temps supplémentaire)

Au final, le Responsive Web design n'est qu'un moyen parmi d'autres de parvenir à ses objectifs mais ne doit pas être considéré comme la seule éventualité ni comme une "solution magique" à tous les problèmes.

D'ailleurs, il est fréquent qu'un cumul de différentes méthodes soit employé : par exemple un site à la fois dédié et responsive, ou un site responsive garni de certaines détections côté serveur (on parle alors de RESS), etc.

Le site mediaqueri.es est une excellente ressource pour découvrir d'autres sites web responsive à travers un annuaire.

7.3. Responsive, Adaptatif ou Liquide ?

En France, et selon Wikipedia, le Responsive Web Design est un synonyme de "site web adaptatif". Techniquement, il conviendrait de distinguer les sites web Statiques, Liquides, Adaptatifs et Responsive :

Un design "Static"

Un design statique (ou fixe) se réfère à des dimensions figées (par exemple 960px) quelle que soit la surface de l'écran. La grande majorité des sites web était construite sur cette base avant l'arrivée du Responsive Web Design dans les années 2010.

Un design "Liquid"

Un site web Liquide (ou fluide) est un site web dont toutes les largeurs de colonnes sont exprimées en unités variables (pourcentages, em, vw, etc.) et qui s'adapte généralement automatiquement à la taille de fenêtre, jusqu'à une certaine mesure.

Démo design Liquide

Un design "Adaptive"

Un design Adaptatif est une amélioration du design statique : les unités de largeur sont fixes, mais différentes selon la taille de l'écran, qui est détectée via CSS3 Media Queries.

Un tel design tient uniquement compte des principaux points de rupture (320px, 480px, 768px, 1024px, etc.) et adapte le gabarit en conséquence. Au final, on se retrouve avec autant de gabarits fixes que de points de ruptures.

Démo design Adaptatif

Un design "Responsive"

Un site web Responsive est une amélioration du design liquide associé à des méthodes CSS3 Media Queries permettant de modifier les styles (ré-organisation de la page par exemple) selon certains critères, pour s'adapter complètement à la taille d'écran, quel que soit le point de rupture.

Démo design Responsive

En résumé

Le site liquidapsive.com propose de tester visuellement ces différents types de design.

7.4. et techniquement, le RWD ça implique quoi ?

Depuis sa première appellation en 2010, le Responsive Web design a quelque peu évolué. Il nécessite actuellement - en général - les technologies et méthodes suivantes :

  • Une grille fluide, où les largeurs des éléments de structure sont débarrassées des unités de pixels
  • Des images, des médias et des contenus flexibles
  • Une adaptation de l'affichage au Viewport du terminal
  • Des CSS3 Media Queries permettant d'appliquer différentes règles de styles CSS selon la taille, l'orientation ou le ratio du device
  • Éventuellement des adaptations conditionnelles (menu de navigation) côté client, basées sur JavaScript ou jQuery
  • Une philosophie "Mobile First" et "Enrichissement progressif" facilitant l'accessibilité, la compatibilité et la performance des pages produites
  • De plus en plus souvent de parties détectées et générées côté serveur (RESS), là aussi notamment pour accélérer l'affichage de certains composants ou ressources.

7.5. Le récapitulatif en une image ? 

responsive/adaptive/mobile dédié pour quelle utilisation ?

==> voir l'image en plus grand

7.6. Ressources

Article par sur http://www.alsacreations.com/article/lire/1615-cest-quoi-le-responsive-web-design.html


8. Exemple d'adaptations aux mobiles et tablettes d'un site classique

Sur un site dont l'intégration HTML n'a pas été prévue pour s'adapter aux mobiles et smart phone, comme lors de la création d'un site directement responsive les procédures sont assez similaires :

  • Modification (unique) du code HTML pour ajouter la balise : <meta name="viewport" content="width=device-width, maximum-scale=1.0" />, cette balise permet aux navigateurs de ne pas appliquer par défaut le redimensionnement de la page en conservant son homotétie
  • Ajout de code CSS (à la fin du code CSS si c'est une adaptation de site existant, et plutôt en début du code CSS dans le cas d'un site codé avec l'approche mobile first)

8.1. Ajout du code CSS

Nous pouvons utiliser pour appliquer un code CSS différentes conditions :

  • des conditions de largeur d'écran disponibles en pixels
    • @media (max-width: 1000px) {/* ici votre code CSS */}
  • des formats d'affichage (paysage/portraits)

Même s'il existe toujours des adaptations, on peut s'aider de feuille de style type (code CSS proposé sur le site http://www.alsacreations.com/astuce/lire/1177-une-feuille-de-styles-de-base-pour-le-web-mobile.html) pour adapter un site pour mobile et tablettes comme celle-ci (il ne s'agit que d'un exemple mais les principes sont toujours similaires) :

@media (max-width: 1000px) {
    * {
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;
    }
    
    /* passer body (et tous les éléments de largeur fixe) en largeur automatique */

    body {
        width: auto;
        margin: 0;
        padding: 0;
    }
    
    /* fixer une largeur maximale de 100% aux éléments potentiellement problématiques */

    img,
    table,
    td,
    blockquote,
    code,
    pre,
    textarea,
    input,
    iframe,
    object,
    embed,
    video {
        max-width: 100%;
    }
    
    /* conserver le ratio des images */

    img {
        height: auto;
    }
    
    /* gestion des mots longs */

    textarea,
    table,
    td,
    th,
    code,
    pre,
    samp {
        -webkit-hyphens: auto; /* césure propre */
        -moz-hyphens: auto;
        hyphens: auto;
        word-wrap: break-word; /* passage à la ligne forcé */
    }
    
    code,
    pre,
    samp {
        white-space: pre-wrap; /* passage à la ligne spécifique pour les éléments à châsse fixe */
    }
    
    /* Passer à une seule colonne (à appliquer aux éléments multi-colonnes (remplacer    "element1,element2" par les éléments à cibler) */

    element1,
    element2 {
        float: none;
        width: auto;
    }
    
    /* masquer (éventuellement) les éléments superflus (nécessite d'ajouter cette class hide_mobile aux éléments HTML à cacher) */

    .hide_mobile {
        display: none !important;
    }
    
    /* Un message personnalisé apparaissant spécifiquement */

    body:before {
        content: "Version mobile du site";
        display: block;
        text-align: center;
        font-style: italic;
        color: #777;
    }
}

> Voici un exemple d'adaptation du site http://interco.aquitaine.fr/ : http://codepen.io/semantiqueweb/pen/JYZQRe

  • dans la colonne html on a repris le contenu HTML de la page http://interco.aquitaine.fr/
  • puis a été ajouté la balise <meta name="viewport" content="width=device-width, maximum-scale=1.0" /> dans la partie <head></head> de la page
  • Dans le code CSS ont été mis en place
    • le code de la feuille de style type présenté ci dessus avec le conditionnement d'affichage pour des écrans de moins de 1000px de large
    • le code suivant spécifiquement mis en place pour ce site web afin d'ajuster certains autres éléments :
@media only screen and (max-width: 1000px)  
{ 
	*{max-width:100%; height:auto!important; float:none} 
	#menudroite{display:none} 
	#navigation{background:#000 none!important; padding-bottom:10px} 
	.menusearch{display:none} 
} 

Il reste du travail à produire pour ajuster l'affichage sur mobile et tablette, mais les principes sont les mêmes :

  • suppression des largeurs/hauteurs fixes
  • suppression des flottements, des positions absolues
  • centrage des éléments
  • éventuellement affichage/masquage de certains éléments spécifiques
  • ajustement des tailles de police
+ travail sous différentes conditions d'affichage (moins de 768px, moins de 480px,...) ou de type d'affichage (landscape) 

8.2. Pour aller plus loin 

9. De la pratique...