10 outils pour avoir un site web responsive

« Le web responsive », on entend de plus en plus ce terme en matière de webdesign mais pourquoi ?

responsive site web

Quand on crée un site web, autant il y a quelques années il fallait penser à le rendre compatible sur tous les navigateurs (Grrr ie…), mais maintenant il est important d’avoir un site Internet qui soit consultable sur un smartphone ou une tablette, qui peut-être une source de trafic à ne pas négliger.

Si vous travaillez souvent avec un CMS, vous avez à votre disposition des thèmes wordpress responsives à télécharger par exemple, mais d’autres solutions existent. Au final, votre site web doit pouvoir être vu sur plusieurs tailles d’écrans sans changer l’aspect de votre site et en gardant ses fonctionnalités.

Une des manières d’aborder le problème est d’utiliser des outils qui vont vous aider dans la conception d’un site responsive :

Responsive Web Design Sketch Sheets

site responsive

Adobe Edge Inspect

responsive web

Foundation

web responsive

RWD Calculator

responsive web

Responsively Wireframed

outils responsive

Adaptive Images

outils web responsive

Bootstrap

website responsive

Retina Images

responsive iphone

SimpleGrid

site web responsive

Responsinator

site internet responsive

13 Commentaires

  • David

    Bonjour Arnaud,

    Super liste d’outils, que je bookmarke de ce pas, merci !

    Pour ma part, et par rapport à responsinator, j’utilise la vue adaptative de l’extension Web developer pour Firefox et Chrome pour tester les différentes résolutions. Le premier avantage est de pouvoir tester des sites locaux, qui ne sont par définition pas accessibles à responsinator.

    • Arnaud OLIVIER

      Bonjour David,

      Je n’ai jamais tester avec Firefox et Chrome cette vue adaptative, mais je vais voir ce que ça donne.

      • David

        Je te le recommande 🙂
        J’insiste sur le fait qu’il s’agit bien de la vue adaptative de l’extension Web Developper, et pas de la vue adaptative fournie en outil de développement avec le navigateur.
        Elle a l’avantage de montrer toutes les résolutions en une fois, comme avec responsinator.

  • Rodrigue

    Sympa, car difficile une fois que tu as optimisé un design, de devoir le changer pour perdre tout le boulot, une bonne panoplie d’outil, bon pour être honnête je me suis équipé d’un nouveau thème mais sinon je pense que j’aurai suivi de plus près. Thank

    • Arnaud OLIVIER

      Hello Rodrigue,

      C’est jamais facile à rendre son site ou thème responsive, vaut mieux se pencher dessus pendant la création du design.

  • Baptiste

    Merci beaucoup pour cette longue liste d’outils indispensable pour créer un site responsive ! Pour ma part, j’ai commencé avec Responsinator mais c’est loin d’être simple 🙂

    • Arnaud OLIVIER

      La première prise en main est jamais facile mais avec un peu de temps ça va 😀

  • Lionel

    Ce qui est dur c’est de rendre compatible son site existant qui n’est pas responsive… Il faut vraiment prendre son courage à deux mains !

    • Arnaud OLIVIER

      Oui c’est comme rendre compatible son site avec toutes les versions d’ie…vaut mieux se pencher sur le problème dés le départ 🙂

  • RSeb

    Merci pour cette liste, j’ai utilisé récemment Twitter Bootstrap Responsive, très facile à prendre en main, un gain de temps et un résultat très clean, à coupler avec php-mobile-detect pour ne pas charger certains blocs pour les mobiles et tablettes…

  • Merci pour ces outils, j’ai un site mais jusqu’à présent je n’ai pas pensé à le rendre responsive, mais cet article m’a fait changer d’avis sur ce sujet.

  • DomB

    Deux outils dignes d’intérêt à mon sens pour faire du rwd : Viewport Resizer (http://lab.maltewassermann.com/viewport-resizer/), le meilleur bookmarklet pour tester le comportement responsive de n’importe quel site, et TOWeb (http://www.lauyan.com), un logiciel – français – qui présentait peu d’intérêt jusqu’alors mais la dernière version fait des sites rwd plutôt sympas.

  • Postmaster

    Merci pour tout ces outils je suis en train de rendre mon site web responsive et c est pas une mince affaire.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *