• A la une
  • Catégories
  • Dossiers
  • Rédacteurs
  • +

Responsive Webdesign : 30 exemples de sites web adaptables

par Vincent Ginetle 06/04/2012

Le responsive webdesign continue son chemin sur la toile et commence à devenir de plus en plus présent au coeur des interfaces web.

Le responsive webdesign

Petit rappel sur la notion du web responsive :

La notion de Responsive Web Design regroupe différents principes et technologies mais il indique globalement qu'un site est conçu pour s'adapter aux différentes tailles d'écran et aux différents terminaux permettant d'afficher le site (navigateur, tablette, mobile, télé connectée, ...)

source : http://fr.wikipedia.org/wiki/Responsive_Web_Design

Aujourd'hui le responsive et les Medias Queries sont une réponse aux enjeux que le web connaît actuellement avec la progression des mobiles et des tablettes qui ont fait évoluer notre manière de concevoir un site web. Nos interfaces ne sont plus figées et doivent dorénavant s'adapter à n'importe quel support qui permet de consulter un site web. 

Si vous êtes intéressé par le web design responsive, je vous conseille la lecture du très bon livre Responsive Webdesign par Ethan Marcotte qui permet une approche efficace et une mise en pratique du responsive.

Nous reviendrons prochainement sur les outils pour créer un web design responsive avec un tour d'horizon des outils tels que Foundation et Twitter Bootstrap que nous utilisons régulièrement avec Dezup, notre agence interactive.

Découvrez notre sélection non exhaustive de 30 webdesign responsive. Amusez-vous à redimensionner vos navigateurs :)

3200 Tigres - Doublons sa population d'ici 2022 | WWF

3200tigres WWF

Simon Collison | Colly | The Celebrated Miscellany

Shawn Johnston

Seesparkbox.com

Andersson Wise

anderssonwise

 

CSS-Tricks

css-tricks

Adaptive Images in HTML

A Flexible Grid

Webdagene 2012 | Norges viktigste webkonferanse

webdagene

Bryan Connor

Phollow.me - Archives

Robot…or Not?

Team tree house

Web Event Lyon

Site web créé par l'agence du BlogDuWebdesign Dezup :)

Contemporary Design – Holidays Apart

Latest | Bahston Film Critic

bahstonfilmcritic responsive

United Pixelworkers Welcome

omdrl.org

Sweethatclub.org

Forefathers Group | The New Design Frontier

forefathersgroup

Launch Kit | Rocket Powered Custom Websites

The Happy Bit | Simple, smart web design

Beyond tellerrand conference

El Sendero del Cacao - Accueil

cacaotour

Foundation: Rapid Prototyping

foundation

Jon White

jonwhitestudio

Kulturbanause blog

Kisko Labs

kiskolabs

Leica explorer

Panchopistolas.com

  • Partager l'article en 1 clic !

    N'hésitez pas à aider le BlogDuWebdesign
Avatar_thumbAuteur : Vincent voir son blog

Passionné par le Web, les Arts Graphiques et les installations numériques, je travaille actuellement dans l'agence Dezup que nous avons créé avec l'équipe du BlogDuWebdesign.

Devenez membre !

Rejoignez la communauté des créatifs du web !
- Partagez vos créations
- Gagnez en visibilité
- Créez votre blog facilement
> En savoir plus

Créer mon compte

20Commentaires

  • Avatar_thumb
    Etienne

    le 06/04/2012 | #1

    Plop,

    Chouette showcase !
    Si tu as le temps, jettes un coup d'oeil à mon nouveau portfolio, conçu de manière flexible également ;)

  • Avatar_thumb
    chak

    le 06/04/2012 | #2

    Encore une belle liste de site. Mais un GROOOOOS coup de coeur pour http://webdagene.no/ :D un très bon boulot !!

  • Avatar_thumb
    Antoine PLU

    le 06/04/2012 | #3

    Je pense que Smashing Mag est également un très bon exemple de Responsive.

  • Avatar_thumb
    Philippe

    le 06/04/2012 | #4

    Merci, superbe liste !

  • Avatar_thumb
    Vincent Ginet

    le 06/04/2012 | #5

    @Etienne très beau portfolio, la navigation est original et bien fluide.

    @AntoinePlu Oui j'ai aussi pensé à Smashing Mag, mais je me suis dit que tout le monde le connaissait déjà donc trop attendu. J'ai préférer en mettre un moins connu à la place, mais tu as raison de le préciser ;)

  • Avatar_thumb
    La Veilleuse Graphique

    le 13/04/2012 | #6

    En guise d'exemple de responsive design made in France, je vous conseille ce blog très bien pensé : http://blog.bastienpenalba.fr/

  • Avatar_thumb
    Antoine Lefeuvre

    le 16/04/2012 | #7

    Merci pour cette sélection !

    A noter que Foundation est plus qu'un simple exemple de site responsive. C'est un framework de prototypage et développement front-end qui est justement responsive. C'est un équivalent / concurrent à Twitter Boostrap.

    J'ai d'ailleurs créé un bookmarklet pour Foundation qui permet d'afficher la grille typographique http://www.novius-labs.com/bookmarklet-pour-afficher-grille-foundation,46.html.

  • Avatar_thumb
    Angie

    le 15/06/2012 | #8

    Merci pour cette belle sélection !

    je vous propose de jeter un oeil au site du designer sacha lakic qui a été créé également en responsive design.
    http://www.lakic.com/

    Bonne journée !

  • Avatar_thumb
    nanobak

    le 24/10/2012 | #9

    Salut a tous !
    Tout d'abord je voulais vous remerciez pour ce partage très enrichissant !
    Mais je tenait à vous informer également que votre article a été copier mot à mot sur un autre site :
    http://www.ninjacreation.com/index.php/gp/mwebdesign/57-respectwebdesign

    Voila a bientôt ;)

  • Avatar_thumb
    Dagobert Renouf

    le 24/03/2013 | #10

    Jolie liste,
    merci pour l'inspiration!

    C'est plus de boulot mais pourquoi ne pas présenter les différentes mises en page sur la même image comme ici? http://designmodo.com/responsive-design-examples/

    Dagobert

  • Avatar_thumb
    marc thiele

    le 28/03/2013 | #11

    Thanks for mentioning my site here. I updated this years version a little bit. New navigation, different approach of the speaker grid display at mobile devices, new fonts etc. Hope you like it …

    /marc

  • Avatar_thumb
    Tchokos

    le 15/04/2013 | #12

    Hello,

    Un menu responsive (sans js), qui prend 3 positions différentes, très intéressant :
    Grand écran > En haut en ligne
    Moyen écran > Sur le côté en colonne
    Petit écran > En bas avec un lien en haut qui pointe dessus.

    Voir le résultat sur http://www.sitadapt.com

  • Avatar_thumb
    James Roberts

    le 18/05/2013 | #13

    These are truly beautifully created Responsively designed websites. A website I found for Carrera Racing is also crazy easy on the eyes. http://carreraworld.com/en/

    Thank you for this nice portfolio.

  • Avatar_thumb
    piece mobile

    le 21/06/2013 | #14

    Merci pour cet article et merci pour les nombreuses ressources c'est exactement le genre d’outils que je recherchais . Cordialement

  • Avatar_thumb
    Mon mobile

    le 01/07/2013 | #15

    un grand merci pour cette sélection des themes responsive,j'avais vraiment besoin d'un site qui regroupe les meilleurs theme responsive mais le probléme majeur de ses themes responsives ne sont pas gratuit . merci encore une fois pour cet article très complet qui ma aidé de trouver des theme. Amicalement

  • Avatar_thumb
    coloriage de filles

    le 29/08/2013 | #16

    Très bons sites sur les thèmes responsive. Merci pour cette très belle sélection de thèmes , un très joli travail, car j’avais besoin d’un site qui réunissait les meilleurs thémes responsive pour mon nouveau site! merci pour ce travail très agréable. A bientôt

  • Avatar_thumb
    Sylvain

    le 02/10/2013 | #17

    Bonjour,
    Merci pour ces exemples.
    Je souhaite ajouter à la liste le site de Carrefour Spectacles ( http://www.spectacles.carrefour.fr) car il est rare de voir un site e-commerce de cette importance passer le cap du responsive design ( et Français en plus ).

  • Avatar_thumb
    Hicham

    le 27/11/2013 | #18

    Bonjour, je vous demande de jeter un coup d’œil sur ce site et me donner certains conseils www.iklammedia.ma. le framework utilisé est KUBE.

  • Avatar_thumb
    Penticton

    le 25/01/2014 | #19

    Un grand merci pour cette sélection des themes responsive,j'avais vraiment besoin d'un site qui regroupe les meilleurs theme responsive mais le probléme majeur de ses themes responsives ne sont pas gratuit.

  • Avatar_thumb
    alex

    le 07/08/2014 | #20

    J ai cree easyandroid.be sur ce principe.
    Votre avis ?

Ecrire un commentaire

captcha

twitter birdtwitter birdtwitter birdtwitter birdtwitter bird
twitter bird
Ouvrir