Responsive Webdesign, assaisonnement généralisé

Ethan Marcotte, l’inventeur du Responsive web design

Ethan Marcotte , web designer, développeur, conférencier et auteur, vit à Boston, dans le Massachusetts, et se passionne pour un beau design, code élégant, et l'intersection des deux. Il est un conférencier populaire et expérimenté, ayant été présenté lors d'un événement Apart, Atelier Carsonified et South by Southwest, et co-anime l'Handcrafted CSS série de séminaires avec Dan Cederholm.

Son livre "REPONSIVE WEB DESIGN" (éditions Marcotte) vous fait visiter en moins de 100 pages toutes la gamme du Design responsive.

Un design adaptable au support

La notion de Web adaptatif repense la manière de concevoir les parcours de navigation sur Internet, puisqu'il ne s'agit plus de concevoir autant de parcours qu'il y a de famille de terminaux mais de concevoir une seule interface auto-adaptable. Ainsi, les sources d'information et les socles techniques ne sont pas dupliqués. Cela engendre des économies d'échelles dans la conception et la maintenance de sites internet bénéficiant de ce mode de conception.

Le site Openspice.eu est réfléchi dans ce sens. Un graphisme simple se voulant ergonomique et surtout lisible dans tous les machines. 

Point technique

Un site web pensé sur le principe utilise la technologie CSS3 media queries, une extension de la règle @media pour adapter la mise en page à l'environnement de consultation grâce à une grille fluide dans laquelle se casent les différents contenus de la page.

• Media queries permet à la page d'utiliser des règles CSS différentes en fonction des caractéristiques du terminal de consultation. Le plus communément il s'agit des règles appliquées en fonction de la largeur du terminal. Ces différentes largeurs sont appelées "points de rupture" et correspondent à un besoin de modifier la mise en page à partir d'un certain seuil critique pour la facilitation de la navigation et de la lecture du contenu.
• Le concept de grille fluide consiste en un dimensionnement relatif des différents blocs de la page. Les unités relatives comme les pourcentages ou les EMs sont assez adaptées pour cela, beaucoup plus que les unités absolues comme les pixels ou les points⁶.
• Les images ayant un besoin de flexibilité sont également redimensionnées en unité relative, afin de prévenir un éventuel débordement du contenu en dehors de son élément conteneur.

Pourquoi 2013 est l'année du design Web Responsive

2012 a été une année très inhabituel dans le marché des PC. Pour la première fois depuis 2001, les ventes de PC devraient être inférieurs à ce qu'ils étaient l'année précédente .

Alors, qui sont les consommateurs qui achètent des appareils? Comprimés, pour une chose.

Les ventes de tablettes devraient dépasser les 100 millions cette année. Leurs chiffres de ventes pourraient dépasser les ordinateurs portables l'année prochaine . Smartphones, bien sûr, sont aussi une denrée rare, la majorité des abonnés mobiles aux États-Unis maintenant propres smartphones, les téléphones ne sont pas métrages.

Web ou Apps? Pourquoi pas les deux.

Pour ceux d'entre nous qui créent des sites Web et des services, tout cela mène à une conclusion singulière: Un million d'écrans ont fleuri, et nous avons besoin de construire pour chacun d'eux.

En termes simples, un design web utilise des «répondre aux questions des médias" pour comprendre ce que la résolution de l'appareil c'est d'être servi sur. images flexibles et les réseaux de fluides, puis de taille correcte pour s'adapter à l'écran. Si vous consultez cet article sur un navigateur de bureau, par exemple, essayez de faire votre fenêtre de navigateur plus petit. Les images et le contenu des colonnes se rétracte, puis la barre latérale disparaîtra complètement.Sur notre site, vous verrez reculer la mise en page trois colonnes, à deux colonnes, une colonne singulière de contenu.

Dans le cas de Mashable, nous avons également de détecter le type d'appareil et de changer le comportement du site en conséquence. Sur les appareils tactiles, par exemple, nous activons le glisser entre les colonnes. (Techniquement, la détection de fonctionnalités périphériques peuvent être dénommés «conception adaptative», plutôt que «sensibles», mais de plus en plus les deux approches sont utilisées en tandem.)

Les avantages sont évidents: Vous construisez un site une fois, et il fonctionne de manière transparente sur des milliers d'écrans différents.

Les limites du Responsive Webdesign

• adapté à la résolution, mais pas à l'écran
• des problèmes de maintenance
• le problème de la connexion des Smartphones
• le problème de l'affichage des publicités

La suite sur "Quatre limites très gênantes du Responsive Web Design"

[ Sources: Ethan Marcotte, Le Journal du net, Wikipedia, Marshable ]

 Debdesgin me

Web 1.0 >> 1990-2002

Exemple en ligne >> ici

Web 2.0 >> 2002 - 2012

Evolution du Webdesign