Responsive-web-design

Le Responsive Web Design 

 

Qu’est-ce que c’est et comment l’utiliser ?

Le Responsive web design (RWD) ou conception adaptative (ou réactive) est une approche de conception de site Web dans laquelle un site est conçu pour s’adapter à la navigation avec un minimum de redimensionnement. Un système qui modifie sa propre structure, son comportement ou ses ressources en fonction de la demande. Par exemple pour s’adapter aux différentes tailles d’écran ou aux différents terminaux permettant d’afficher le site (navigateur, tablette, mobile, écran télé etc.).

Si vous n’avez pas encore intégré ce concept dans vos créations web ou êtes tout simplement à la recherche d’un peu d’inspiration, voici 10 excellents exemples de conception de sites Web Responsive et des adresses pour tester en ligne vos sites.

Le Responsive web design ou web design adaptatif

Cette méthode de conception de sites internet aurait d’abord été proposé par Ethan Marcotte* et inspirée de l’architecture adaptative, domaine en pleine évolution de la pratique architecturale et de la recherche qui permet aux bâtiments d’adapter leurs formes, couleurs, éclairages en fonction des conditions environnementales réelles via des capteurs (par exemple les vitres qui s’assombrissent par rapport à la luminosité).

En design ce n’est pas seulement un concept lié aux problèmes de résolutions d’écran et d’images automatiquement redimensionnables, mais plutôt une nouvelle façon de penser le design, en explorant des techniques CSS et des principes généraux de design, comme les grilles fluides, les images flexibles et les media queries.

Avec l’augmentation croissante des ventes et l’usage régulier des smartphones, PDA, tablettes tactiles et ordinateurs portables, les sites Web sont consultés dans différentes tailles d’écran. Les sites créés  sur le principe du Design responsive ont tendances à se multiplier.

Les explications techniques ici :

10 exemples :

Découvrez en 10 exemples, qu’il est possible d’offrir une navigation de qualité quelle que soit la taille, la résolution ou l’orientation de l’écran qui affiche le site.

food sense

Exemple Responsive Design

 

Exemple Responsive Design

 

 

hanging up the moon

Exemple Responsive design

 

Exemple Responsive Design

 

 

Sunday Best Designs

Exemple Responsive Design

 

Exemple Responsive Design

 

 

 

Fork

Exemple Responsive Design

 

Exemple Responsive Design

 

 

Full Frontal

Exemple Responsive Design

 

Exemple Responsive Design

 

 

10K Apart

Exemple Responsive Design

 

Exemple Responsive Design

 

 

More Hazards More Heroes

Exemple Responsive Design

 

Exemple Responsive Design

 

 

 

warface

Exemple Responsive Design

 

Exemple Responsive Design

 

 

 

Bloom

Exemple Responsive Design

 

Exemple Responsive Design

 

 

Forefathers

Exemple Responsive Design

 

Exemple Responsive Design

 

Frontend 2011

Exemple Responsive Design

 

 

Exemple Responsive Design

 

Sources:

The Best Designs
unmatchedstyle
Awwwards

Des adresses pour tester vos sites :

responsive.is

Responsivator

 

Pour en savoir plus :

smashingmagazine

 

*Ethan Marcotte est un designer/développeur passioné par le code et le design de qualité. Il vit à Boston, sa clientèle inclue :  New York Magazine, l’université Stanford, The Boston Globe, le festival du film Sundance  et le World Wide Web Consortium (W3C). Ethan est contributeur et éditeur technique chez A List Apart, le magazine pour les créateurs de site Web. 

Découvrez nos offres !

Profitez vite de notre offre de bienvenue : nom de domaine et hébergement offert pendant 1 an. Demandez immédiatement un devis personnalisé, gratuit et sans engagement !

Découvrez nos offres !