L'hébergement

1. Qu'est-ce qu'un hébergeur Internet ?

A) But de l'hébergement d'un site web

• disponible 24h/24h, 7/7j

• être visible par tous

• avoir une importante bande passante et un espace de stockage.

Héberger un site veut dire le stocker dans un serveur web en uploadant son contenu (dossiers, fichiers, images, etc.) via un logiciel FTP assurant les transferts (download et upload) de fichiers entre client et serveur.

Un serveur n'est qu'un ordinateur connecté à internet 24h/24h et 7j/7J, chargé de transmettre le contenu de votre site aux internautes.
Le principe est simple : un internaute (vous) demande une page via un navigateur (Internet Explorer, Firefox etc.), cette requête (demande) sera transmise au serveur. Un logiciel, généralement 'Apache' va chercher la page demandée dans toute l'arborescence (dossiers, sous-dossiers et fichiers) se trouvant dans le serveur. Une fois trouvée, la page sera transmise au navigateur qui se chargera de sa visualisation.

L'hébergeur s'engage :
Trafic : une bande passante minimale
Disponibilté : le site en ligne 24/24h
Fiabilité (peu de failles de sécurité : virus...)

Responsabilité de l'hébergeur :

Retirer les info illicites lorsqu'elles sont signalées

Déclaration des fichiers de données personnelles (CNIL)

Sur demande du juge, des données peuvent être communiqués (sécurité)

B) Critères de choix

Un hébergeur gratuit peut suffire, tout dépend de ce que l'on veut faire et pour qui...
La plupart des hébergeurs payants offrent des packs tout inclus.

Quelques critères pour choisir son hébergeur Internet :

1. Le coût
2. L’espace de stockage
3. La bande passante / Le trafic
4. Plateforme et serveur Web
5. Achat et transfert de nom de domaine
6. Email
7. Langages de programmation Internet et base de données
8. La sauvegarde des données
9. Le support client
10. Sécurité
11. Référencement, statistiques…
12. Aide à la création de site

Petit glossaire :

La bande passante
Capacité, limite de vitesse à laquelle les données peuvent être transférées entre serveur et le public web.
Quantité d'informations qui transite sur le réseau à un instant donné vers votre site Internet.
Elle est exprimée en Mo par secondes ou en Mbytes par secondes.
Pour un petit site, une bande passante de 1 Mo par seconde suffit.
Pour économiser la bande passante, pensez à réduire le poids de vos pages web, par exemple en limitant la taille des images et en les optimisant pour Internet grâce à des logiciels comme Photoshop.

Le trafic
Volume de données passant entre serveur et le public web sur une période données (un mois) exprimé en Mo.
À ne pas confondre avec le nombre de visites ni avec le nombre de visiteurs.
Il faut tenir compte à la fois des données entrantes, les fichiers que vous transférez par ftp, et des données sortantes, les pages web que les visiteurs téléchargent. On désigne aussi entrant/ sortant  : I/O.
Pour un petit site, un trafic autorisé de 100 Go suffit amplement.
Encore une fois, pensez à optimiser vos pages pour réduire le trafic.

Plateforme et serveur Web
En général, vous avez le choix entre une plateforme Linux/serveur Apache et une plateforme Windows/serveur IIS.
Si votre site Internet comporte uniquement des pages en html, les deux conviennent.
Si vous utilisez le langage Php ou Perl, Linux/Apache est recommandé.
Si vous utilisez le langage Asp* ou .Net, Windows/IIS est nécessaire.
*Asp : ensemble de logiciel développés par Microsoft et utilisé dans la programmation web.

Achat et transfert de nom de domaine
Vérifiez que le transfert du nom de domaine est compris dans l'offre d'hébergement.
Si vous avez déjà acheté votre nom de domaine en passant par un prestataire spécialisé, vous devrez le transférer vers votre hébergeur.

Email
Les hébergeurs proposent souvent de créer un ou plusieurs comptes email associés à votre nom de domaine.
C'est une solution pratique car elle vous permet d'avoir une adresse email personnalisée, associée au nom de votre activité, société ou association par exemple.
Vérifiez que le nombre de comptes email proposé est suffisant pour vos besoins. Si vous êtes une société, pensez qu'il faudra sans doute un compte email par salarié.

Langages de programmation Internet et base de données
La plupart des sites sont faits en langages HTML, parfois en FLASH.
Les langages de programmation comme Php ou Asp permettent d'accéder à une base de données, de stocker des informations sur vos visiteurs ou clients, et de proposer un catalogue de vente en ligne.

La sauvegarde des données
Un hébergement professionnel comprend la sauvegarde des données présentes sur le serveur.
C'est la garantie de préserver votre site en cas de panne grave du serveur.
La sauvegarde s'effectue le plus souvent sur des bandes.
Pour encore plus de sécurité, un système de disques durs montés en RAID est envisageable.
Le "RAID" permet de dupliquer les données en temps réel sur plusieurs disques durs de manière à garantir la pérennité des données si un des disques durs tombe en panne.

Le support client
Ne négligez pas le support client dans le choix de votre hébergeur.
Une cellule de support client réactive et compétente est essentielle pour répondre aux questions que vous vous poserez au quotidien, pour vous aider à résoudre les problèmes auxquels vous serez confronté.
Les personnes compétentes vous aideront à identifier l'évolution de vos besoins en hébergement au fil du temps, à résoudre les petits problèmes, à faire les mises à jour importantes pour garantir la sécurité de votre site.
Pensez que l'administration d'un serveur web est un métier en soi.

Sécurité
SSL, sous le nom TLS (pour Transport Layer Security). C'est devenu l'un des standards les mieux reconnus, au travers du système d'adressage "https://".
SSL/TLS permet de sécuriser le transport d'informations via le Web.

SSH est un protocole de communication sécurisé par chiffrement des données. Il permet une connexion totalement sécurisée entre votre PC et votre site. Avec SSH vous pouvez accéder à votre site et le gérez à distance comme s'il était branché à votre ordinateur. Vous pouvez également gérer vos fichiers sans passer par un logiciel intermédiaire tel que FTP.
SSH est une véritable plate-forme de sécurisation pour toutes formes de communications électroniques.

C) Type d'hébergement

• Hébergement gratuit
• Hébergement professionnel
• Hébergement mutualisé (en anglais mutualized hosting)
• Hébergement dédié (en anglais dedicated hosting)
• Hébergement dédié virtuel
• Colocation (en anglais housing)
• Cloud


• Hébergement gratuit
Les fournisseurs d'accès à internet (FAI) / Diverses sociétés de création de blog.

Le service d'hébergement est souvent rendu en contrepartie de publicités affichées sur le site, soit dans un coin, soit sous la forme de pop-ups. De plus il y a souvent moins d'espace de stockage...
Il est relativement rare de pouvoir mettre en place un nom de domaine avec ce type d'hébergement.
Possibilité de redirection du site sur un nom de domaine plus court et plus attrayant soit via un hébergeur payant soit un organisme proposant des noms de domaines gratuits (V3.com, new.fr, one.com, bzh.bz, maximum.org…)

• Hébergement payant

L’hébergement mutualisé (parfois hébergement partagé )

• Une "portion" de la machine à disposition
• Moins rapide, plus de risques de sécurité
• Beaucoup moins cher
C’est l’hébergement de base d’un site web qui suffit souvent dans la plupart des cas, c’est une offre packagée et prête à l’emploi. On parle de mutualisation, car le site web partage les ressources d’un serveur avec d’autres sites web. Il existe de nombreuses offres d’hébergement offrant plus ou moins d’espace disque, de bande passante, de bases de données...

L’hébergement dédié

• Une machine entière à disposition 
• Plus rapide, plus disponible, plus de stockage
• Plus cher



Hébergeur OVH (ovh.com)


L’administrateur en est responsable et choisi quels programmes et logiciels y installer. Cette solution demande du temps d’administration et des connaissances. Elle est réservée aux clients ayant une audience importante et un fort contenu dynamique.
Si le serveur est capable de gérer 500 connexions simultanées alors elles seront réservées exclusivement à vos internautes.
Si le serveur dispose d’une bande passante à 10Mb par seconde alors elle sera affectée exclusivement à votre site.

Serveur dédié virtuel également appelé serveur virtuel, en anglais, virtual private server (VPS) ou virtual dedicated server (VDS) est une méthode de partitionnement d'un serveur en plusieurs serveurs virtuels indépendants qui ont chacun les caractéristiques d'un serveur dédié, en utilisant des techniques de virtualisation.  Chaque serveur peut fonctionner avec un système d'exploitation différent et redémarrer indépendamment.
Le seul but du serveur physique devient de gérer et de veiller au bon fonctionnement des serveurs virtuels.
Les principales raisons de partitionner une machine physique en plusieurs serveurs dédiés virtuels sont d'améliorer la sécurité (si une des applications est corrompue ou pose problème, les autres applications se trouvant dans d'autres serveurs dédiés virtuels continueront à fonctionner normalement. Cela permet aussi de réduire le prix de revient et le nombre de serveurs physiques nécessaires.

Colocation ou Housing

• La machine appartient au client
• L'hébergeur fournit l'infrastructure, le réseau, la maintenance, la bande passante ainsi qu'un certain nombre de services et de garanties.
Ce type d'offre permet au client d'installer les serveurs de son choix et d'en avoir la totale maîtrise.

Le Cloud Computing est un concept qui consiste à déporter sur des serveurs distants des stockages et des traitements informatiques traditionnellement localisés sur des serveurs locaux ou sur le poste de l'utilisateur. Le cloud computing est l'accès via le réseau, à la demande et en libre-service, à des ressources informatiques virtualisées et mutualisées.

En français : nuage, informatique dématérialisée, stockage dans les nuages, stockage à distance ou encore infonuagique.
Forme particulière de gérance de l'informatique, puisque l'emplacement des données dans le nuage n'est pas porté à la connaissance des clients. Les utilisateurs ou les entreprises ne sont plus gérants de leurs serveurs informatiques mais peuvent ainsi accéder de manière évolutive à de nombreux services en ligne sans avoir à gérer l'infrastructure sous-jacente, souvent complexe. Les applications et les données ne se trouvent plus sur l'ordinateur local, mais – métaphoriquement parlant – dans un nuage (cloud) composé d'un certain nombre de serveurs distants interconnectés au moyen de liaisons ayant une excellente bande passante indispensable à la fluidité du système. L'accès au service se fait par une application standard facilement disponible, la plupart du temps un navigateur web.






2. Avantages et inconvénients

 

	HEBERGEUR GRATUIT	HEBERGEUR PAYANT
Avantages	*Aucun coût donc aucun risque pour débuter dans la création d’un site. *Intéressant pour les blogs  et sites à des fins non professionnelles *Résiliation du compte possible à tout moment	*Choix de l’espace de stockage *Choix entre un hébergement mutualisé ou un serveur dédié *Possibilité de changer d’options et d’offres en quelques clics *Pas de publicités *Choix libre du nom de domaine *Plusieurs options disponibles  *Support de clientèle disponible en cas de problème technique  *Sécurité informatique accrue grâce aux mises à jour régulières de l'hébergeur.
Inconvénients	*Limitation de l’espace de       stockage *Limitation de la bande passante  *Performances moyennes  *Présence de publicités incontrôlables dans la plupart des cas *Nom de domaine peu intuitif et long *Limitation des fonctionnalités *Pas de garantie sur la pérennité du site *Aucun support clientèle  *Possibilité d'utilisation et de revente à notre insu de nos bases de donnés clients, de nos profils...	*Coût  *Délai à respecter en cas de résiliation
Fournisseurs	Free, Orange, Webou...	OVH, 1and1, Mavenhosting...












TABLEAU COMPARATIF DES OFFRES




Hébergeurs gratuits



Hébergeur	Free (FAI)	Orange (FAI)	Webou	11vm	Rezoo
Espace Disque	10Go	100Mo	250Mo	100Mo	20Mo
Nombre de comptes email			5	Aucun	Aucun
Base de données	1 MySQL	Aucun	1 MySQL	1 MySQL	1 MySQL
Options		Aucun	PHP	PHP	PHP
Trafic		illimité		illimité	illimité
Bande passante			10 000 Mo	100 Mbps	illimité
URL	www.free.fr	pages.perso.orange.fr	www.webou.net	www.11vm-serv.net	www.rezoo.fr







Hébergeurs payants (pour l’offre de base)





Hébergeur	OVH	1and1	Mavenhosting	Easy hébergement	1 hébergement.com
Espace disque	25Go	10 Go	70Go	25Go	illimité
Nombre de comptes email	MySQL illimité	10 de 2Go	illimité	5 de 100Mo	illimité
Base de données	1 MySQL	1 MySQL	MySQL illimité	1 MySQL	illimité
Options	PHP, Perl, Python, C	PHP, Perl, Python, C	PHP, CGI, Perl, RoR	PHP, Perl, Python, C	PHP, Perl, Python, C
Trafic	illimité	illimité	illimité	illimité	illimité
Tarif mensuel	1,99€	1,99€	4,99€	1,99€	4,95€
URL	www.ovh.com	www.1and1.fr	www.mavenhosting.com	www.easy-hebergement.fr	www.1hebergement.com




3. Concrètement, comment je fais pour mettre mon site en ligne ?

L'hébergement est une chose à s'occuper légèrement en amont dans un projet de conception de site Web, compte tenu des délais d'activation du compte hébergeur (de 2 jours à une semaine généralement), sauf pour les blogs (hors CMS) et certains créateurs de sites en ligne, ou on héberge directement chez eux dès le départ.
Après avoir choisi son hébergeur selon ses besoins et contraintes (budgétaires, espace de stockage, site statique ou dynamique, pour quel type de public, l'accessibilité du site pour la maintenance et les maj à faire après, soit par le concepteur soit par le client...), ça se fait en 3 ou 4 étapes.


a) Création et activation du compte hébergé

Dans tous les cas il vous faut une adresse mail valide sur laquelle vous seront envoyées vos infos de compte (login et pwd), les liens d'activation...
A noter chez Free, un site web par compte email secondaire associé, en plus du compte principal.


b) Choix du nom de domaine

Choisir sa formule d'hébergement parmi les nombreux packages proposés, si on a jeté son dévolu sur un hébergeur payant.
Certainement que votre site possède déja un nom, mais il faut lui associer un nom de domaine pour que son adresse URL soit complète. Soit on en a déjà un que l'on veut rediriger vers un nouveau prestataire (pas forcément besoin de transférer ses fichiers vers ce dernier), soit il faut l'acheter, soit dans le cas d'un hébergeur gratuit, choisir l'une des propositions la plus claire et la moins pénalisante possible.


c) Joindre une base de données

On vous propose généralement de créer dans la foulée une base de données (nom de la DB, login et pwd), principalement dans le cas d'un site dynamique, mais il vaut mieux le prévoir, si on pense faire évoluer son site ( forum, newsletter, données de formulaire de contact à récupérer, livre d'or...). A noter que la plupart de ces fonctions peuvent être hébergées par d'autres sites, qui fournissent ce service gratuitement.


d) Transfert de ses fichiers

Après activation du compte (et des pages persos dans le cas d'une FAI), il suffit de transférer ses fichiers via un logiciel FTP gratuit: celui offert par l'hébergeur, celui de DW, ou directement en WebFTP ( ftp://ftp.mozilla.org/, http://ftpperso.sfr.fr/, ftp://ftp.chez.com, http://ftpperso.free.fr/) ou un autre à télécharger et à installer (comme Filezilla, CuteFTP, Cyberduck pour Mac.... ). Il faut en revanche penser à récuperer les infos du serveur FTP de votre hébergeur pour la configuration du compte FTP lié à chacun de vos sites que vous voulez transférer.
Le nom de l'hôte du serveur FTP est en effet différent selon votre hébergeur, par ex.: ftpperso.free.fr, ftpperso.sfr.fr, ftp.chez.com, perso-ftp.orange.fr...



Sous DW CS5.5, il faut aller dans Site-->Gérer vos sites-->Editer-->Serveur pour rentrer ces infos :
Renseigner les champs Nom du serveur, Adresse FTP. le Username pour se connecter au compte FTP, choisir le port 21 et le mode FTP pour la connexion, parfois rajouter l'adresse URL du serveur FTP (par ex.http://ftp.chez.com/), ainsi que le mode passif dans plus d'options, pour contourner un éventuel pare-feu.
Le pwd pour raison de sécurité ne le rentrer que lors du lancement de la connexion proprement dite quand on clique sur connect par la suite.


Nb : Pour DW CS4, il faut aller dans Site-->Gérer vos sites-->Modifier-->dans l'onglet Avancé-->Infos distantes-->Accès: FTP
Renseigner l'hôte FTP, le répertoire FTP, le Username, le mode passif.



Exemple de configuration d'un client-serveur FTP (exemple de Filezilla)

Téléchargement et installation

Filezilla permet de mettre rapidement et facilement des données en ligne en vue de mettre des photos ou des fichiers sur internet, pour créer des galeries photos, un forum ou un site web. Contrairement au WebFTP où l'interface est assez pauvre graphiquement, les options de gestion peu nombreuses, et où le nombre de fichiers que l'on peut envoyer simultanément, ainsi que leur poids, est très limité, ce logiciel offre la possibilité à travers une interface assez intuitive: de créer des dossiers, de renommer ou de supprimer des fichiers directement sur le serveur distant ainsi que de modifier les permissions d'accès (le fameux chmod ou change mode) des fichiers en lecture, écriture...tel que le .htaccess (fichier que l'on place dans le répertoire qu'on veut protéger en général.




Téléchargez la dernière version de Filezilla en "setup.exe": Filezilla sur SourceForge. Suivez les instructions d'installation par défaut et lancez l'application. A la difference du .Zip, le programme d'installation vous permettra de choisir la langue francaise si elle existe ( Menu Edit, Settings, Language, Francais).


Configurer un compte FTP dans Filezilla

Aller dans le menu Fichier --> Gestionnaire des sites
Cliquez sur nouveau site (en bas à gauche). Attribuer un nom correspondant à votre site pour la connexion (2). (Vous pourrez ensuite y acceder via le petit ordinateur en haut à gauche).




Maintenant, il faut rentrer les renseignements fournis par votre hébergeur (vous les retrouverez dans votre espace client en ligne en general).




Rentrer l'adresse de votre serveur FTP, comme vu précedemment (par ex. perso-ftp.orange.fr...) au niveau de l'hôte (3), dans le champ du port mettre 21, c'est celui attribué par défaut pour le FTP.
Protocole FTP (File Transfer Protocol) à sélectionner, les autres options concernent le cryptage et le tranfert sécurisé des données.
Il faut sélectionner normal (et non anonyme) pour le choix du logon type (4), ce qui permettra de demander une authentification pour la connexion à votre serveur FTP.
Votre login nom d'utilisateur (5).
Votre mot de passe (recommandé de le renseigner que lors de la connexion, sinon tjrs visible).
Dans les parametres avancés, cocher le mode passif (pour le pare-feu).
Cliquez sur "Enregistrer et Quitter" (6), pour que la configuration, pour cette connexion, soit prise en compte.


Transfert des fichiers sur votre serveur distant (et donc chez votre hébergeur)

Votre site apparaitra toujours dans le Gestionnaire des sites, menu déroulant à côté du petit ordinateur.
En cliquant dessus, vous activez la connexion pour accéder à votre serveur distant. Une fois dans le répertoire de votre serveur, vide par défaut, faire glisser les fichiers que vous désirez transférer depuis l'arborescence de votre PC (Site Local à gauche) jusqu'à la fenêtre de droite, qui représente votre serveur (Site Distant).
Voilà les différentes parties qui devraient composer votre écran :





1) Tout en haut, les étapes de connexion (si c'est vert, ok, si c'est rouge...allo Houston !)
2) Fenêtre de gauche en 2 parties sur le Site Local, les dossiers et fichiers de votre ordinateur
3) A droite, les dossiers et fichiers de votre site sur le Serveur Distant
4) La fenêtre tout en bas, l'état de téléchargements des fichiers sur le serveur ou l'inverse, qui permet de vérifier si tous les fichiers sont bien passés (particulierement utile dans le cas des plugins de CMS à installer).




A la fin de vos transferts, n'oubliez pas de vous déconnecter de votre serveur grâce au petit ordi barré, à côté de la croix.




En ligne, vous pourrez visualiser vos photos/fichiers en tapant directement l'adresse dans votre navigateur: http://login.free.fr, http://login.perso.sfr.fr/, http://login.chez.com/...

N.B: Si vous mettez plein de trucs pêle-mêle (photos, mp3,...), n'ayant aucun lien entre eux sur votre serveur distant, une simple liste de tous vos fichiers, s'affichera sur un fond blanc.
Pour avoir un menu, ou une mise en forme, il faut que vous ayez une page index.html ou .php.

Pour améliorer un peu la présentation de votre site une fois les fichiers mis dessus et qui sont destinés au téléchargement, créer un fichier index.html et mettez quelque chose de ce style dedans :



Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD Xhtml 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>Bienvenue sur mon site de téléchargement!</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>

<a href="monfichier.zip">Nom du fichier</a>

<a href="monfichier2.zip">Nom du fichier2</a>

</body>
</html>
Le <a href="monfichier.zip">Nom du fichier</a>, étant le lien vers votre fichier.
Si vous l'avez mis dans un dossier, par exemple telechargement, le lien sera <a href="telechargement/monfichier.zip">Nom du fichier</a>.
-->
Après, mettre cette page index.html à la racine de votre site (pas dans un dossier).




Webographie :

http://www.hebergement-conseils.com/articles/notions_essentielles_sur_l_hebergement.html

damien.nouvels.net/cours/sites-web/6_HebergementDeSiteWeb.pdf

http://www.buvetteetudiants.com/cours/15/tous-ce-qu-il-faut-savoir-sur-l-hebergement-de-sites-web

http://fr.wikipedia.org/wiki/H%C3%A9bergeur_web

http://fr.wikipedia.org/wiki/Serveur_informatique

http://www.journaldunet.com/developpeur/tutoriel/sec/050719-difference-ssl-tls-ssh.shtml

http://www.100pour100net.com/services/dossier-du-mois/bien-choisir-son-nom-de-domaine

http://fr.wikipedia.org/wiki/Serveur_d%C3%A9di%C3%A9_virtuel

http://fr.wikipedia.org/wiki/Cloud_computing

Read More

Responsive Web Design

Responsive Web Design

conception de sites web adaptatifs

Introduction

Le Responsive Design répond à la problématique d’une nouvelle utilisation du web.
Alors qu’auparavant, on consultait un site depuis son ordinateur, on utilise aujourd’hui d’autres supports. En quelques années, le nombre d’appareils et de résolutions servant à consulter des sites web ont tout simplement explosé : ordinateurs, Smartphones, tablettes, web TV, format portrait, paysage, etc.
Le problème est qu’on ne peut pas, ou du moins ce ne serait pas très pratique, développer autant de versions d’un site qu’il y a de résolutions différentes. La solution à ce problème grandissant s’est donc imposée d’elle-même : le Responsive Design (conception de sites web adaptatifs).

Caractéristiques - Les media queries CSS3

La spécification CSS3 Media Queries définit les techniques pour l'application de feuilles de styles en fonction des périphériques de consultation utilisés pour du HTML. On nomme également cette pratique Responsive Web Design, pour dénoter qu'il s'agit d'adapter dynamiquement le design à l'aide de CSS.

Ces bonnes pratiques permettent d'exploiter encore plus les avantages de la séparation du contenu et de la présentation : l'intérêt est de pouvoir satisfaire des contraintes de dimensions, de résolutions et d'autres critères variés pour améliorer l'apparence graphique et la lisibilité d'un site web.

Approche historique

Avec CSS2 et HTML4, il était déjà possible de spécifier un média de destination pour l'application d'une ou plusieurs feuilles de style. C'est ainsi que l'on a pu associer des règles CSS complémentaires pour l'impression, modifiant la mise en page, favorisant tel élément ou faisant disparaître un autre inutile à la sortie sur papier, par exemple un menu de navigation. La balise <link> est alors dupliquée pour autant de feuilles de style que nécessaire, et comporte un attribut media précisant le contexte dans lequel les styles doivent être appliqués :

<!doctype html>
<head>
<meta charset="utf-8">
<title>Media Queries !</title>
<link rel="stylesheet" media="screen" href="screen.css" type="text/css" />
<link rel="stylesheet" media="print" href="print.css" type="text/css" />
</head>
<body>
...
</body>
 
L'attribut media peut prendre (depuis CSS2) les valeurs suivantes :

Screen  (écrans)
Handheld (périphériques mobiles ou de petite taille)
Print (impression)
Aural (CSS 2.0) / speech (CSS 2.1) (synthèses vocales)
Braille (plages braille)
Embossed (imprimantes braille)
Projection (projecteurs ou présentations avec slides)
Tty (terminal, police à pas fixe)
Tv (téléviseur)
All (tous les précédents)

Une impression braille (embossed)

Ces directives peuvent parfaitement être intégrées au sein même d'une feuille de style grâce à une règle @media suivie directement du type. La syntaxe sera alors légèrement différente :

@media print {
  #menu, #footer, aside {
    display:none;
  }
  body {
    font-size:120%;
    color:black;
  }
}

Note : d'autres variantes peuvent exister avec la règle @import, cependant celle-ci pose quelques problèmes de performance sur d'anciens navigateurs et se voit ignorée lorsqu'elle est utilisée en combinaison avec les media queries sur Internet Explorer versions inférieures à 8.

Or, les médias peuvent être très variés, surtout en ce qui concerne les écrans. De surcroît, tout dépend du support de l'interprétation de ces définitions. Rien n'oblige un périphérique ou un navigateur à appliquer ce qui semblerait le plus indiqué. Par exemple, la règle media handheld est ignorée par la grande majorité des navigateurs mobiles, y compris par Safari Mobile sur iOS qui se considère comme un média screen.

Syntaxe des Media Queries CSS3

La philosophie des Media Queries (ou requêtes de media) en CSS3 est d'offrir un panel de critères plus vaste et plus précis, à l'aide de propriétés et de valeurs numériques, ainsi que de combinaisons multiples de ces mêmes critères. Le but est de cibler plus finement les périphériques de destination en fonction de leurs capacités intrinsèques.

L'écriture de ces requêtes est relativement explicite  : une media query est une expression dont la valeur est toujours vraie ou fausse. Il suffit d'associer les différentes déclarations possibles avec un opérateur logique pour définir l'ensemble des conditions à réunir pour l'application des styles compris dans le bloc adjacent.

Les opérateurs logiques peuvent être :

And (et)
Only (uniquement)
Not (non)

Pour obtenir l'équivalent du "ou", il suffit d'énumérer différentes media queries à la suite, séparées par des virgules : si l'une d'entre elles est valable, alors l'ensemble de la règle sera appliquée.

En général, on combine ensemble un type de média (screen, all...) et une expression grâce à and, bien qu'une expression seule puisse être utilisée. L'expression est toujours écrite entre parenthèses.

Les deux exemples suivants ciblent les écrans de largeur inférieure à 640 pixels grâce à la règle max-width associée à la valeur 640px.

<link rel="stylesheet" media="screen and (max-width: 640px)" href="smallscreen.css" type="text/css" />
@media screen and (max-width: 640px) {
  .bloc {
    display:block;
    clear:both;
  }
}
Les combinaisons peuvent être multiples. Ici l'on s'adresse à un écran dont la résolution en largeur est comprise entre 200 et 640 pixels :

@media screen and (min-width: 200px) and (max-width: 640px) {
  .bloc {
    display:block;
    clear:both;
  }
}

Fonctionnalités

La plupart des critères (ou fonctionnalités) peuvent être préfixés par min- et max- lorsqu'elles acceptent des valeurs numériques pour définir des valeurs minimales ou maximales à respecter.

Color (support de la couleur, bits/pixel)
Color-index (périphérique utilisant une table de couleurs indexées)
Aspect-ratio (ratio du périphérique de sortie, par exemple 16/9)
Device-aspect-ratio (ratio de la zone d'affichage)
Device-height (dimension en hauteur du périphérique)
Device-width (dimension en largeur du périphérique)
Grid (périphérique bitmap ou grille, par exemple  lcd)
Height (dimension en hauteur de la zone d'affichage)
Monochrome (périphérique monochrome ou niveaux de gris, bits/pixel)
Orientation (orientation du périphérique, portait ou paysage)
Resolution (résolution du périphérique)
Scan (type de balayage des téléviseurs, progressive ou interlace)
Width (dimension en largeur de la zone d'affichage)

Les dimensions pourront être évaluées avec des unités (px, em). Les ratio avec des fractions (entier/entier). Une résolution sera définie en dpi (points par pouce) ou en dpcm (points par centimètres).
Certaines de ces propriétés peuvent être testées d'une façon raccourcie sans valeur, par exemple (color) qui sera équivalent à (min-color: 1) ou considérée comme vraie pour une valeur différente de 0. La fonctionnalité monochrome n'est pas uniquement booléenne avec la syntaxe raccourcie (monochrome), on peut aussi considérer un nombre de niveaux de gris, par exemple (min-monochrome: 2) pour 2 bits par pixel.

Concevoir les gabarits

Une fois les groupes d’appareils identifiés, il faut prévoir comment les pages s’agenceront pour chacun d’eux.
Commencez par la version mobile, la conception se focalisera sur l'essentiel car il n'y a pas suffisamment de place pour le superflu. Les versions plus spacieuses bénéficieront des choix opérées pour la version mobile.
Il est impératif de concevoir le site avec une grille et des blocs. Cette conception modulaire permet de recomposer la page selon la largeur de l’écran. Le maquettage papier de l’interface ce prête bien à cette exercice : on manipule librement les contenus pour les repositionner ou les laisser de coté.
Les blocs doivent être cohérents en termes de contenu. Cela évitera d’éclater l’information en passant d’un appareil à un autre. Une fois constitués, ces blocs seront déplacés, allégés ou même supprimés selon la résolution.

Voyez comment le site Think Vitamin se recompose entre la version classique et mobile :

La hiérarchie de l’information joue ici un rôle important. Il est nécessaire d’identifier les contenus qui seront prioritaires en fonction des appareils : la barre latérale a-t-elle toujours un rôle sur mobile ? Le header peut-il être minimisé, voire disparaître ? Faut-il mieux arriver sur la page par le contenu et proposer une navigation secondaire en fin de page ? Il ne s’agit pas simplement d’empiler ces boîtes les unes au dessus des autres dans une colonne unique pour les résolutions mobiles, mais d’évaluer la pertinence du contenu en fonction du contexte.
Il faut simplifier la navigation, alléger le contenu, minimiser les images. L’e-reader avec affichage en niveaux de gris doit aussi offrir une restitution convenable du site. Le Responsive Design doit donc être appliqué dans cette idée.

Clean Air Works adapte son menu de navigation sous forme de boutons adaptés au tactile :

Les ajustements de positionnement : libérez de la place !

En général, une page web se compose : un en-tête (parfois avec divers liens), un corps avec une barre latérale, une partie principale et un pied de page :
Le but du Responsive Design consiste surtout à réarranger les différents éléments de façon à ce que le rendu sur petits écrans reste lisible, le placement de la barre latérale ailleurs (souvent en ligne, au dessus ou au dessous de la partie centrale)

Réduction des marges (margin, padding)

Remplacement des largeurs fixes par des largeurs relatives (100% ou 98% avec une marge de 1% pour centrer le tout sans coller sur les côtés)

Pour les images : ne pas utiliser de largeurs et hauteurs en pixels (pouvant dépasser de leur cadre) mais utiliser ceci :

width: 100%; height: auto;

Ainsi, les images occuperont la largeur complète et la hauteur sera adaptée de façon à conserver les proportions.

Les menus déroulants seront déroulés, ou supprimés.
Un effet de survol (: hover) n’est pas utilisable sur un écran tactile.

Les ajustements de décors

Maintenant que les éléments sont positionnés on peut modifier les styles de décoration. On effectuera par exemple ce genre de modifications :

Adaptation de la taille de police. Vu que le contenu peut être zoomé

User-scalable=yes 

Il n’est en général pas nécessaire d’adapter la taille de police pour chaque type d’écran : les navigateurs mobiles ont des règles et des styles qui suffisent en théorie à faire un rendu lisible de la page.

Au service des mobiles

Dans la majorité des cas, on utilise les media queries pour produire des améliorations spécifiques à l'affichage sur les mobiles, qui sont directement concernés par des critères sur les dimensions de l'écran (en terme de résolution et d'espace disponible) et sur l'utilisation tactile. Les périphériques sous iOS (iPhone, iPod, iPad...) supportent relativement bien les media queries.

La fonctionnalité orientation a été introduite pour des périphériques pouvant être orientés, par exemple l'iPad. On peut alors déclarer une feuille de style spécifique pour ajuster l'affichage :

<link rel="stylesheet" media="(orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="(orientation:landscape)" href="paysage.css">
 

Certains navigateurs classiques l'implémentent également en version bureau et calculent le ratio hauteur/largeur pour simuler un affichage "orienté".

Autres exemples:

Impression sur un support plus large que 5 pouces

print and (min-width: 5in) 

Ecrans possédant un ratio 16/9 ou 16/10 
 
tv, (device-aspect-ratio: 16/9), (device-aspect-ratio: 16/10)
 

Support et alternatives

Les navigateurs sont inégaux face aux media queries, mais cela tend à s'améliorer:
Mozilla Firefox : 3.5+
Internet Explorer : 9+
Google Chrome : 5+
Opera : 10.5+, Opera Mobile : 10+, Opera Mini : 5+
Apple Safari : 4+ et iOS (mobile) 3.2+
Android : 2.1+
WebKit en général

Globalement, si un navigateur ne les supporte pas du tout, il continuera à appliquer la règle concernant le type de média qui figure en début de chaîne.

<link rel="stylesheet" media="screen and (max-width: 640px)" href="smallscreen.css" />

On peut choisir d'exclure tous ceux ne supportant pas les media queries en utilisant comme préfixe de déclaration l'opérateur only.

<link rel="stylesheet" media=" only screen and (color)" href="styles.css" />

Le retardataire le plus marquant est encore une fois Internet Explorer. Il existe quelques alternatives en JavaScript néanmoins pour ce navigateur et les plus anciens, telles que des plugins jQuery (MediaQueries) ou une librairie JavaScript nommée Respond.js qui apporte un support minimaliste des media queries par la lecture de la feuille de style et des propriétés du document HTML pour IE 6 à 8, Firefox 1 à 3 et Safari 2.

Avantages du Responsive Design

Cette technique permet d'offrir plus de réactivité au site web qui s'adapte alors aux différentes résolutions d'écrans disponibles. Cela permet d'universaliser l'affichage d'un site web en utilisant les nouvelles règles et propriétés de CSS3 acceptées par la grande majorité des navigateurs.

Les colonnes et les images s'ajustent, se redimensionnent et se déplacent automatiquement selon que la résolution d'écran l'exige. Cette technique permet une ergonomie optimale en sauvegardant intacte la qualité de l'information du site web.

Avec le Responsive Design, plus de souci de redirection de lien. Une fois mis en place, il y a très peu de maintenance à réaliser et le coût de développement est plus intéressant qu'un site mobile spécialisé.
Avec le Responsive Design, c'est l'assurance d'une URL unique : parfait pour les campagnes de promotion. On n'ignore pas notamment l'intérêt crucial dans le secteur commercial. En effet, le non ajustement du site au support de navigation peut affecter grandement l'expérience achat du “mobinaute“.
Le lien unique avec le site original permet au support mobile de respecter la même structure d'information que le site complet réduisant par la même le temps nécessaire d'adaptation au nouveau format. Le site s'affiche automatiquement en fonction de l'écran sans demander de quelle manière l'utilisateur souhaite naviguer.

 

Inconvénients du Responsive Design

Si les avantages sont nombreux, on distingue tout de même certains inconvénients.
Le temps de téléchargement est plus long
Il faut sans cesse faire attention au temps de chargement, à ne pas laisser d’éléments invisibles ou de scripts inutilisés. Il ne faut pas oublier que les gens sont impatients ! Si votre site met trop de temps à charger sur un appareil mobile, il y a de fortes chances qu’il ne se charge jamais dû à un signal réseau trop faible ou à un manque de mémoire.
Plus de connaissances, plus de technique
Pour faire du Responsive Design, il y a beaucoup de choses à connaître car il ne suffit pas de connaître les media-queries CSS3 sur le bout des doigts ainsi qu’une ou deux astuces. On est souvent confronté aux spécificités de certaines plates formes.
Plus de code, plus de mises à jour
Pour adapter le contenu et la mise en page à la majorité des supports, il faut plus de code ce qui entraîne donc des temps de mises à jour plus élevés…
Le cas des images
La question des images à redimensionner ou à cacher est délicate. Il ne faut pas pour autant perdre la force du concept et il faut que le site se charge vite… Redimensionner des images consomme plus de performance CPU* et de mémoire.
*Central Processing Unit “Unité centrale de traitement“ est le composant de l'ordinateur qui exécute les programmes informatiques.
Responsive Design et le référencement*
Concernant le référencement de site Responsive Design, cela ne génère aucun problème. C'est l'option idéale si l'on souhaite proposer son site sous différentes versions. Les prévisualisations d'images d'une certaine largeur dans les pages de résultats d'un moteur de recherche représentent un atout considérable pour le référencement naturel.
L’indexation est bien meilleure avec le Responsive Design, ce dernier s'adaptant à tous les supports d'affichage.
De plus, sachant que chaque page du site à une adresse unique peu importe la version, les liens entrants se dirigent tous vers une même URL facilitant le référencement. Cela permet de réaliser des économies d'échelles considérables puisqu'une seule modification est alors nécessaire.
* Faire un lien d'une page A vers une ressource B, c'est y faire référence et donc référencer la ressource B depuis la page A.

Conclusion

Le Responsive Design est sans nul doute une évolution du webdesign plus que nécessaire à l’heure où notre façon de naviguer et d’interagir avec le monde connecté se transforme.
Il est une solution efficace afin d'offrir une expérience utilisateur en adéquation avec l'usage souhaité. C'est une évolution majeure du web design invitant les concepteurs à un nouveau défi ergonomique et assurant aux utilisateurs une expérience enrichie. Pour ce qui est des inconvénients dégagés par cette technique, cela implique plus d'investissement au niveau de la conception et du développement du site.

Ressources

http://fr.wikipedia.org/wiki/Responsive_Web_Design
http://www.w3.org/TR/CSS21/media.html
http://www.w3.org/TR/css3-mediaqueries/http://www.alsacreations.com/article/lire/930-css3-media-queries.html

http://designspartan.com/info_generale/responsive-design-definition-fonctionnement-ressources-et-tutoriels/

http://www.ergonomie-interface.com/conception-maquettage/responsive-webdesign-adapter-resolutions/
http://lehollandaisvolant.net/index.php?d=2012/11/24/20/37/08-css-faire-un-theme-mobile-avec-html5-et-responsive-design

http://www.commentcamarche.net/faq/34876-responsive-design-avantages-et-inconvenients

Read More