{"id":679,"date":"2015-12-23T15:45:26","date_gmt":"2015-12-23T14:45:26","guid":{"rendered":"https:\/\/graphiste.com\/blog\/?p=679"},"modified":"2015-12-23T15:45:26","modified_gmt":"2015-12-23T14:45:26","slug":"un-guide-pratique-pour-un-design-responsive-qui-privilegie-le-mobile","status":"publish","type":"post","link":"https:\/\/graphiste.com\/blog\/un-guide-pratique-pour-un-design-responsive-qui-privilegie-le-mobile\/","title":{"rendered":"Guide pratique\u00a0: faire un design responsive mobile-first"},"content":{"rendered":"

L\u2019approche mobile-first consiste \u00e0 penser d\u2019abord au mobile. C\u2019est l’une des meilleures strat\u00e9gies pour cr\u00e9er soit un design responsive<\/a> soit un design adapt\u00e9.<\/p>\n

 <\/p>\n

\"image082\"<\/p>\n

Cet article est une traduction du blog de UXpin<\/a>.<\/p>\n

L\u2019approche mobile-first est un principe d’am\u00e9lioration progressive.<\/strong> C\u2019est l’id\u00e9ologie que le design mobile, qui est plus dur, devrait \u00eatre fait en premier. Une fois les questions de design mobile r\u00e9gl\u00e9es, la conception sur d’autres appareils sera plus facile. Le plus petit des designs aura seulement les caract\u00e9ristiques essentielles, donc en premier lieu vous devez concevoir le c\u0153ur de votre UX.<\/p>\n

La seconde approche est une d\u00e9gradation progressive.<\/strong> Elle int\u00e8gre toutes les complexit\u00e9s d\u00e8s le d\u00e9but, puis enl\u00e8ve une \u00e0 une lorsque vient la conception pour des appareils plus petits. Le probl\u00e8me avec la d\u00e9gradation progressive est que quand vous mettez au point un design complet depuis le d\u00e9but, le noyau et les \u00e9l\u00e9ments compl\u00e9mentaires fusionnent et deviennent plus difficiles \u00e0 distinguer et \u00e0 s\u00e9parer. La philosophie enti\u00e8re court le risque de traiter le design mobile plus comme une r\u00e9flexion apr\u00e8s coup puisque vous \u00abr\u00e9duisez\u00bb l’exp\u00e9rience.<\/p>\n

Nous vous recommandons fortement d\u2019opter pour l’am\u00e9lioration progressive dans votre approche mobile-first. Dans cet article, nous allons vous pr\u00e9senter des conseils et des techniques, puis finir avec une le\u00e7on pratique dans laquelle nous construisons un site hypoth\u00e9tique de fa\u00e7on mobile-first.<\/p>\n

 <\/p>\n

Mobile-First = Content-First<\/h2>\n

Si votre site est bon sur un appareil mobile, il se traduira mieux sur tous les autres appareils. Cependant, l\u2019approche mobile-first est aussi une approche qui privil\u00e9gie le contenu. Le mobile a de nombreuses limites comme la taille de l’\u00e9cran ou la taille de la bande passante par exemple.<\/p>\n

Concevoir quelque chose en prenant en compte ces param\u00e8tres vous oblige \u00e0 \u00e9tablir des priorit\u00e9s pour votre contenu.<\/p>\n

L\u2019approche mobile-first conduit \u00e0 un design qui est plus ax\u00e9 sur les contenus et donc centr\u00e9 sur l’utilisateur. Le c\u0153ur du site est le contenu car les utilisateurs sont l\u00e0 pour \u00e7a.<\/p>\n

Les utilisateurs de mobiles exigent parfois un contenu diff\u00e9rent des utilisateurs d\u2019ordinateurs. Le contenu sp\u00e9cifique pour chaque appareil peut \u00eatre \u00e9valu\u00e9 en consid\u00e9rant le contexte dans lequel l\u2019utilisateur appr\u00e9ciera davantage le contenu. La meilleure fa\u00e7on de planifier \u00e0 l’avance est de cr\u00e9er des sc\u00e9narios d’utilisateurs.<\/p>\n

\"image0211\"<\/p>\n

Un autre avantage de l\u2019approche mobile-first<\/a> est que les points d’arr\u00eat d\u2019un petit \u00e9cran s\u2019adaptent mieux autour du contenu. Encore une fois, l’alternative est pire. Compresser un design d\u00e9j\u00e0 existant et imposant dans un cadre minuscule. Mais avec l\u2019approche mobile-first, les points d’arr\u00eat se d\u00e9veloppent naturellement autour du contenu, vous n\u2019avez donc pas \u00e0 faire des modifications g\u00eanantes.<\/p>\n

 <\/p>\n

Le processus du design dans une approche Mobile-First<\/h2>\n

Nous allons d\u00e9crire un processus qui aidera les designers.<\/p>\n

Comme d’habitude, la maquette est une \u00e9tape recommand\u00e9e \u00e0 faire au d\u00e9but pour structurer le plus efficacement possible votre mise en page. Pour la maquette ou le prototype, on commence par la taille la plus petite.<\/p>\n

\"image056\"<\/p>\n

Cette mise en page est la bonne taille pour vous, ainsi vous pourrez garder uniquement le contenu \u00e0 l\u2019esprit.<\/p>\n

Notre proc\u00e9dure suit les \u00e9tapes suivantes<\/p>\n

1. Inventaire du contenu \u2013<\/strong> C\u2019est une feuille de calcul ou un \u00e9quivalent contenant tous les \u00e9l\u00e9ments que vous souhaitez inclure.<\/p>\n

\"image0212\"<\/p>\n

2. Hi\u00e9rarchie visuelle \u2013<\/strong> Pr\u00e9cisez la priorit\u00e9 des \u00e9l\u00e9ments dans l’inventaire du contenu et d\u00e9terminez comment afficher en \u00e9vidence les \u00e9l\u00e9ments les plus importants.<\/p>\n

3. Design avec les plus petits points d’arr\u00eat puis augmentez l\u2019\u00e9chelle –<\/strong> Construire la maquette mobile d’abord, puis l’utiliser comme mod\u00e8le pour les tailles plus \u00e9lev\u00e9es. D\u00e9veloppez l’\u00e9cran jusqu’\u00e0 avoir trop d’espaces blancs.<\/p>\n

4. Agrandir les cibles tactiles \u2013<\/strong> Les doigts sont beaucoup plus larges que la pr\u00e9cision au pixel pr\u00e8s des curseurs de souris. Ils ont donc besoin d’\u00e9l\u00e9ments plus larges pour pouvoir appuyer. Au moment d\u2019\u00e9crire cet article, Apple recommande un carr\u00e9 de 44 pixels pour les cibles tactiles. Donnez \u00e0 vos hyperliens beaucoup d’espace et agrandissez l\u00e9g\u00e8rement les boutons.<\/p>\n

5. Ne pas compter sur les survols \u2013<\/strong> Cela va sans dire, mais les designers comptent souvent sur le survol et les effets li\u00e9s dans leur travail interactif. Si vous songez au mobile, ne le faites pas. Il n’y a pas encore de survol pour les doigts.<\/p>\n

6. Pensez \u00abapplication\u00bb –<\/strong> Les utilisateurs de mobiles sont habitu\u00e9s au mouvement et \u00e0 un minimum de contr\u00f4le sur leur exp\u00e9rience. Pensez \u00e0 un menu off-canvas, des widgets extensibles, des appels AJAX ou d’autres \u00e9l\u00e9ments sur l’\u00e9cran avec lesquels les utilisateurs peuvent interagir sans rafra\u00eechir la page.<\/p>\n

7. \u00c9vitez les grands graphiques –<\/strong> Des photos au format paysage et des graphiques complexes ne se pr\u00e9sentent pas bien lorsque l’\u00e9cran n\u2019est pas tr\u00e8s grand. R\u00e9pondez aux utilisateurs mobiles avec des images qui sont lisibles sur leurs \u00e9crans de poche.<\/p>\n

8. Testez sur un dispositif existant –<\/strong> Rien ne vaut de d\u00e9couvrir par vous-m\u00eame si un site web est utilisable (ou non). \u00c9loignez-vous de votre bureau ou de votre ordinateur portable et chargez votre produit sur un vrai t\u00e9l\u00e9phone ou une tablette. D\u00e9couvrez les pages, le site est-il facile pour la navigation ? Comment est le temps de chargement ? Les textes et les graphiques sont-ils faciles \u00e0 lire ?<\/p>\n

Ceci est juste un sch\u00e9ma de base. Pour le guide complet du processus, t\u00e9l\u00e9chargez \u00ab\u00a0Content Wireframing for Responsive Design\u00a0\u00bb<\/a>.<\/p>\n

 <\/p>\n

Tutoriel pour un design mobile-first<\/h2>\n

\u00c9tant donn\u00e9 que les diff\u00e9rents appareils ont besoin de diff\u00e9rentes configurations en fonction de leur taille d’\u00e9cran et de l’orientation, il est logique de concevoir plusieurs arrangements pour vos utilisateurs. Heureusement, vous pouvez faire vos propres variations responsives<\/a> ou adapt\u00e9es en utilisant UXPin<\/a>.<\/p>\n

Nous allons cr\u00e9er un exemple et d\u00e9crire comment mettre \u00e0 l\u2019\u00e9chelle le contenu \u00e0 partir d’un smartphone pour des \u00e9crans de tablette et d\u2019ordinateur.<\/p>\n

D\u00e9finissez vos priorit\u00e9s de contenu<\/h3>\n

Une \u00abapproche mobile-first\u00bb diff\u00e8re de l\u2019approche qui consiste \u00e0 penser d\u2019abord \u00e0 l\u2019ordinateur. En effet, nous ajoutons des informations \u00e0 chaque fois que nous faisons \u00e9voluer la taille de l\u2019\u00e9cran. Penser mobile ne signifie pas qu\u2019il faut \u00e9liminer des informations. Vous devez simplement classer les informations dans une cat\u00e9gorie primaire, secondaire et tertiaire.<\/p>\n

Dans cet exemple, nous savons que la page d’accueil devrait avoir certains \u00e9l\u00e9ments, comme le nom de la soci\u00e9t\u00e9 et des liens vers des produits. Un blog ne serait pas mal non plus. Mais comme nous l’avons dit, tout \u00e7a ne tiendra pas sur l\u2019\u00e9cran d\u2019un smartphone, donc nous devons fixer des priorit\u00e9s en fonction de l’objectif du site : la vente de v\u00e9los.<\/p>\n

    \n
  1. Le plus r\u00e9cent mod\u00e8le de v\u00e9lo<\/li>\n
  2. Le v\u00e9lo qui se vend le plus<\/li>\n
  3. “Trouvez le v\u00e9lo parfait” bouton CTA<\/li>\n
  4. Nom de l’entreprise<\/li>\n
  5. Navigation<\/li>\n
  6. Recherche<\/li>\n
  7. Deuxi\u00e8me v\u00e9lo le plus vendu<\/li>\n
  8. Les ch\u00e8ques-cadeaux<\/li>\n
  9. Un t\u00e9moignage<\/li>\n
  10. Le dernier message du blog<\/li>\n<\/ol>\n

    En se basant sur cette liste, nous pouvons nous dire que notre travail permettra de r\u00e9soudre un probl\u00e8me de conception pour obtenir des ventes.<\/p>\n

     <\/p>\n

    Vue d\u2019un smartphone<\/h2>\n

    \"image0312\"<\/p>\n

    En pensant d\u2019abord aux mobiles, on se force \u00e0 penser \u00e0 ce qui est vraiment important. Dans cette vue de smartphone, le v\u00e9lo le plus vendu et le mod\u00e8le le plus r\u00e9cent m\u00e8neront directement \u00e0 la vente. Donc nous pouvons laisser d’autres \u00e9l\u00e9ments tels que des ch\u00e8ques-cadeaux, les mod\u00e8les moins populaires et les derni\u00e8res news pour les pages int\u00e9rieures. Le dernier bout d\u2019appel \u00e0 l’action est particuli\u00e8rement visible et facile \u00e0 toucher avec une seule pression du doigt.<\/p>\n

     <\/p>\n

    Vue d\u2019une tablette<\/h2>\n

    \"image092\"<\/p>\n

    Lorsque nous concevons pour une taille d\u2019\u00e9cran de tablette, nous sommes en mesure d’ajouter de l’information secondaire comme des autres produits.<\/p>\n

    Nous pouvons \u00e9galement \u00e9tendre la navigation en haut de la page et ajouter du contenu qui encourage les ventes de mani\u00e8re d\u00e9tourn\u00e9e avec le t\u00e9moignage.<\/p>\n

    Parce que d’autres options sont disponibles, cela peut \u00eatre \u00e9tonnamment plus difficile de d\u00e9cider les \u00e9l\u00e9ments \u00e0 inclure dans l\u2019interface utilisateur pour smartphone. La diff\u00e9rence entre les \u00e9l\u00e9ments secondaires et tertiaires est floue et la tentation est forte de tout inclure.<\/p>\n

    R\u00e9sistez \u00e0 l’envie. Utilisez la liste de priorit\u00e9 des contenus. Comme les smartphones, l’espace est encore limit\u00e9.<\/p>\n

     <\/p>\n

    Vue d\u2019un ordinateur<\/h2>\n

    \"image065\"<\/p>\n

    Enfin, la vue d\u2019un ordinateur de bureau peut supporter autant d’informations que vous jugez importantes. C\u2019est l’endroit o\u00f9 la page d’accueil peut accueillir toutes les informations et voir si l\u2019ajustement convient ou non.<\/p>\n

    Remarquez que nous avons ajout\u00e9 du contenu suppl\u00e9mentaire :<\/p>\n

      \n
    • Les ch\u00e8ques-cadeaux<\/li>\n
    • T\u00e9moignages de nos clients<\/li>\n
    • Article de blog qui pr\u00e9sente le nouveau v\u00e9lo Lightning Bolt<\/li>\n<\/ul>\n

       <\/p>\n

      Concevoir une maquette pour chaque appareil vous-m\u00eame<\/h2>\n

      Si vous utilisez UXPin, il est assez facile de cr\u00e9er diff\u00e9rentes configurations pour ces vues.<\/p>\n

        \n
      • Ouvrez un prototype UXPin.<\/li>\n
      • Appuyez sur “ajouter version responsive” en haut \u00e0 droite de votre maquette.<\/li>\n<\/ul>\n

        \"image0413\"<\/p>\n

        Choisissez une taille pr\u00e9d\u00e9finie ou entrer vos propres dimensions.<\/p>\n

        \"image074\"<\/p>\n

        Vous n’\u00eates pas oblig\u00e9 de tout recr\u00e9er \u00e0 partir de z\u00e9ro. Choisissez une taille \u00e0 partir de laquelle copier les \u00e9l\u00e9ments de votre design.<\/p>\n

        \"image0112\"<\/p>\n

        Et c’est tout. Basculez entre les diff\u00e9rentes vues en appuyant sur les diff\u00e9rentes onglets au-dessus de votre maquette et ajustez les \u00e9l\u00e9ments en fonction de vos besoins.<\/p>\n

         <\/p>\n

        Vous savez maintenant quoi faire. Que pensez-vous de cette approche\u00a0? Etes-vous d\u2019accord avec les \u00e9tapes pr\u00e9sent\u00e9es\u00a0? R\u00e9agissez et partagez vos exp\u00e9riences en nous laissant un petit commentaire\u00a0!<\/p>\n","protected":false},"excerpt":{"rendered":"

        L\u2019approche mobile-first consiste \u00e0 penser d\u2019abord au mobile. C\u2019est l’une des meilleures strat\u00e9gies pour cr\u00e9er soit un design responsive soit un design adapt\u00e9.   Cet article est une traduction du blog de UXpin. L\u2019approche mobile-first est un principe d’am\u00e9lioration progressive. C\u2019est l’id\u00e9ologie que le design mobile, qui est plus dur, devrait \u00eatre fait en premier. […]<\/p>\n","protected":false},"author":5,"featured_media":19677,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[27],"tags":[],"class_list":["post-679","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-webdesign"],"acf":[],"yoast_head":"\nGuide pratique\u00a0: faire un design responsive mobile-first - Graphiste Blog<\/title>\n<meta name=\"description\" content=\"L\u2019approche mobile-first consiste \u00e0 penser d\u2019abord au mobile. C\u2019est l'une des meilleures strat\u00e9gies pour cr\u00e9er soit un design responsive soit un design\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/graphiste.com\/blog\/un-guide-pratique-pour-un-design-responsive-qui-privilegie-le-mobile\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Guide pratique\u00a0: faire un design responsive mobile-first - Graphiste Blog\" \/>\n<meta property=\"og:description\" content=\"L\u2019approche mobile-first consiste \u00e0 penser d\u2019abord au mobile. C\u2019est l'une des meilleures strat\u00e9gies pour cr\u00e9er soit un design responsive soit un design\" \/>\n<meta property=\"og:url\" content=\"https:\/\/graphiste.com\/blog\/un-guide-pratique-pour-un-design-responsive-qui-privilegie-le-mobile\/\" \/>\n<meta property=\"og:site_name\" content=\"Graphiste.com\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/graphistesfreelances\" \/>\n<meta property=\"article:published_time\" content=\"2015-12-23T14:45:26+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2015\/12\/une-graphiste-article-guide-responsive-design-webdesign-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"850\" \/>\n\t<meta property=\"og:image:height\" content=\"423\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Thomas Lazzaroni\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@totolazza\" \/>\n<meta name=\"twitter:site\" content=\"@Graphistecom\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thomas Lazzaroni\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/graphiste.com\/blog\/un-guide-pratique-pour-un-design-responsive-qui-privilegie-le-mobile\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/graphiste.com\/blog\/un-guide-pratique-pour-un-design-responsive-qui-privilegie-le-mobile\/\"},\"author\":{\"name\":\"Thomas Lazzaroni\",\"@id\":\"https:\/\/graphiste.com\/blog\/#\/schema\/person\/cc3b0a678aeffcae19ecc599eaf679e5\"},\"headline\":\"Guide pratique\u00a0: faire un design responsive mobile-first\",\"datePublished\":\"2015-12-23T14:45:26+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/graphiste.com\/blog\/un-guide-pratique-pour-un-design-responsive-qui-privilegie-le-mobile\/\"},\"wordCount\":1689,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/graphiste.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/graphiste.com\/blog\/un-guide-pratique-pour-un-design-responsive-qui-privilegie-le-mobile\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2015\/12\/une-graphiste-article-guide-responsive-design-webdesign-1.jpg\",\"articleSection\":[\"Webdesign\"],\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/graphiste.com\/blog\/un-guide-pratique-pour-un-design-responsive-qui-privilegie-le-mobile\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/graphiste.com\/blog\/un-guide-pratique-pour-un-design-responsive-qui-privilegie-le-mobile\/\",\"url\":\"https:\/\/graphiste.com\/blog\/un-guide-pratique-pour-un-design-responsive-qui-privilegie-le-mobile\/\",\"name\":\"Guide pratique\u00a0: faire un design responsive mobile-first - Graphiste Blog\",\"isPartOf\":{\"@id\":\"https:\/\/graphiste.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/graphiste.com\/blog\/un-guide-pratique-pour-un-design-responsive-qui-privilegie-le-mobile\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/graphiste.com\/blog\/un-guide-pratique-pour-un-design-responsive-qui-privilegie-le-mobile\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2015\/12\/une-graphiste-article-guide-responsive-design-webdesign-1.jpg\",\"datePublished\":\"2015-12-23T14:45:26+00:00\",\"description\":\"L\u2019approche mobile-first consiste \u00e0 penser d\u2019abord au mobile. C\u2019est l'une des meilleures strat\u00e9gies pour cr\u00e9er soit un design responsive soit un design\",\"breadcrumb\":{\"@id\":\"https:\/\/graphiste.com\/blog\/un-guide-pratique-pour-un-design-responsive-qui-privilegie-le-mobile\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/graphiste.com\/blog\/un-guide-pratique-pour-un-design-responsive-qui-privilegie-le-mobile\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/graphiste.com\/blog\/un-guide-pratique-pour-un-design-responsive-qui-privilegie-le-mobile\/#primaryimage\",\"url\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2015\/12\/une-graphiste-article-guide-responsive-design-webdesign-1.jpg\",\"contentUrl\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2015\/12\/une-graphiste-article-guide-responsive-design-webdesign-1.jpg\",\"width\":850,\"height\":423},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/graphiste.com\/blog\/un-guide-pratique-pour-un-design-responsive-qui-privilegie-le-mobile\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/graphiste.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Webdesign\",\"item\":\"https:\/\/graphiste.com\/blog\/webdesign\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Guide pratique\u00a0: faire un design responsive mobile-first\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/graphiste.com\/blog\/#website\",\"url\":\"https:\/\/graphiste.com\/blog\/\",\"name\":\"Graphiste.com\",\"description\":\"graphiste\",\"publisher\":{\"@id\":\"https:\/\/graphiste.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/graphiste.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/graphiste.com\/blog\/#organization\",\"name\":\"Graphiste.com\",\"url\":\"https:\/\/graphiste.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/graphiste.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2022\/07\/logo-blog-graphiste.svg\",\"contentUrl\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2022\/07\/logo-blog-graphiste.svg\",\"width\":1,\"height\":1,\"caption\":\"Graphiste.com\"},\"image\":{\"@id\":\"https:\/\/graphiste.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/graphistesfreelances\",\"https:\/\/x.com\/Graphistecom\",\"https:\/\/www.linkedin.com\/company\/graphiste-com\/\",\"https:\/\/fr.pinterest.com\/Graphiste_Com\",\"https:\/\/www.instagram.com\/graphiste_com\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/graphiste.com\/blog\/#\/schema\/person\/cc3b0a678aeffcae19ecc599eaf679e5\",\"name\":\"Thomas Lazzaroni\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/graphiste.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/7306fb87b7017ab0955d07c2f2b771ac79e91965a2fca514df0c043f7c087fd2?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/7306fb87b7017ab0955d07c2f2b771ac79e91965a2fca514df0c043f7c087fd2?s=96&d=mm&r=g\",\"caption\":\"Thomas Lazzaroni\"},\"description\":\"Depuis plus de 10 ans, je contribue \u00e0 faire rayonner nos sites en imaginant des strat\u00e9gies qui renforcent notre visibilit\u00e9 et notre position de r\u00e9f\u00e9rence.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/thomaslazzaroni\/\",\"https:\/\/x.com\/totolazza\"],\"url\":\"https:\/\/graphiste.com\/blog\/author\/thomas\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Guide pratique\u00a0: faire un design responsive mobile-first - Graphiste Blog","description":"L\u2019approche mobile-first consiste \u00e0 penser d\u2019abord au mobile. C\u2019est l'une des meilleures strat\u00e9gies pour cr\u00e9er soit un design responsive soit un design","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/graphiste.com\/blog\/un-guide-pratique-pour-un-design-responsive-qui-privilegie-le-mobile\/","og_locale":"fr_FR","og_type":"article","og_title":"Guide pratique\u00a0: faire un design responsive mobile-first - Graphiste Blog","og_description":"L\u2019approche mobile-first consiste \u00e0 penser d\u2019abord au mobile. C\u2019est l'une des meilleures strat\u00e9gies pour cr\u00e9er soit un design responsive soit un design","og_url":"https:\/\/graphiste.com\/blog\/un-guide-pratique-pour-un-design-responsive-qui-privilegie-le-mobile\/","og_site_name":"Graphiste.com","article_publisher":"https:\/\/www.facebook.com\/graphistesfreelances","article_published_time":"2015-12-23T14:45:26+00:00","og_image":[{"width":850,"height":423,"url":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2015\/12\/une-graphiste-article-guide-responsive-design-webdesign-1.jpg","type":"image\/jpeg"}],"author":"Thomas Lazzaroni","twitter_card":"summary_large_image","twitter_creator":"@totolazza","twitter_site":"@Graphistecom","twitter_misc":{"\u00c9crit par":"Thomas Lazzaroni","Dur\u00e9e de lecture estim\u00e9e":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/graphiste.com\/blog\/un-guide-pratique-pour-un-design-responsive-qui-privilegie-le-mobile\/#article","isPartOf":{"@id":"https:\/\/graphiste.com\/blog\/un-guide-pratique-pour-un-design-responsive-qui-privilegie-le-mobile\/"},"author":{"name":"Thomas Lazzaroni","@id":"https:\/\/graphiste.com\/blog\/#\/schema\/person\/cc3b0a678aeffcae19ecc599eaf679e5"},"headline":"Guide pratique\u00a0: faire un design responsive mobile-first","datePublished":"2015-12-23T14:45:26+00:00","mainEntityOfPage":{"@id":"https:\/\/graphiste.com\/blog\/un-guide-pratique-pour-un-design-responsive-qui-privilegie-le-mobile\/"},"wordCount":1689,"commentCount":0,"publisher":{"@id":"https:\/\/graphiste.com\/blog\/#organization"},"image":{"@id":"https:\/\/graphiste.com\/blog\/un-guide-pratique-pour-un-design-responsive-qui-privilegie-le-mobile\/#primaryimage"},"thumbnailUrl":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2015\/12\/une-graphiste-article-guide-responsive-design-webdesign-1.jpg","articleSection":["Webdesign"],"inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/graphiste.com\/blog\/un-guide-pratique-pour-un-design-responsive-qui-privilegie-le-mobile\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/graphiste.com\/blog\/un-guide-pratique-pour-un-design-responsive-qui-privilegie-le-mobile\/","url":"https:\/\/graphiste.com\/blog\/un-guide-pratique-pour-un-design-responsive-qui-privilegie-le-mobile\/","name":"Guide pratique\u00a0: faire un design responsive mobile-first - Graphiste Blog","isPartOf":{"@id":"https:\/\/graphiste.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/graphiste.com\/blog\/un-guide-pratique-pour-un-design-responsive-qui-privilegie-le-mobile\/#primaryimage"},"image":{"@id":"https:\/\/graphiste.com\/blog\/un-guide-pratique-pour-un-design-responsive-qui-privilegie-le-mobile\/#primaryimage"},"thumbnailUrl":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2015\/12\/une-graphiste-article-guide-responsive-design-webdesign-1.jpg","datePublished":"2015-12-23T14:45:26+00:00","description":"L\u2019approche mobile-first consiste \u00e0 penser d\u2019abord au mobile. C\u2019est l'une des meilleures strat\u00e9gies pour cr\u00e9er soit un design responsive soit un design","breadcrumb":{"@id":"https:\/\/graphiste.com\/blog\/un-guide-pratique-pour-un-design-responsive-qui-privilegie-le-mobile\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/graphiste.com\/blog\/un-guide-pratique-pour-un-design-responsive-qui-privilegie-le-mobile\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/graphiste.com\/blog\/un-guide-pratique-pour-un-design-responsive-qui-privilegie-le-mobile\/#primaryimage","url":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2015\/12\/une-graphiste-article-guide-responsive-design-webdesign-1.jpg","contentUrl":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2015\/12\/une-graphiste-article-guide-responsive-design-webdesign-1.jpg","width":850,"height":423},{"@type":"BreadcrumbList","@id":"https:\/\/graphiste.com\/blog\/un-guide-pratique-pour-un-design-responsive-qui-privilegie-le-mobile\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/graphiste.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Webdesign","item":"https:\/\/graphiste.com\/blog\/webdesign\/"},{"@type":"ListItem","position":3,"name":"Guide pratique\u00a0: faire un design responsive mobile-first"}]},{"@type":"WebSite","@id":"https:\/\/graphiste.com\/blog\/#website","url":"https:\/\/graphiste.com\/blog\/","name":"Graphiste.com","description":"graphiste","publisher":{"@id":"https:\/\/graphiste.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/graphiste.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/graphiste.com\/blog\/#organization","name":"Graphiste.com","url":"https:\/\/graphiste.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/graphiste.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2022\/07\/logo-blog-graphiste.svg","contentUrl":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2022\/07\/logo-blog-graphiste.svg","width":1,"height":1,"caption":"Graphiste.com"},"image":{"@id":"https:\/\/graphiste.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/graphistesfreelances","https:\/\/x.com\/Graphistecom","https:\/\/www.linkedin.com\/company\/graphiste-com\/","https:\/\/fr.pinterest.com\/Graphiste_Com","https:\/\/www.instagram.com\/graphiste_com\/"]},{"@type":"Person","@id":"https:\/\/graphiste.com\/blog\/#\/schema\/person\/cc3b0a678aeffcae19ecc599eaf679e5","name":"Thomas Lazzaroni","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/graphiste.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/7306fb87b7017ab0955d07c2f2b771ac79e91965a2fca514df0c043f7c087fd2?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7306fb87b7017ab0955d07c2f2b771ac79e91965a2fca514df0c043f7c087fd2?s=96&d=mm&r=g","caption":"Thomas Lazzaroni"},"description":"Depuis plus de 10 ans, je contribue \u00e0 faire rayonner nos sites en imaginant des strat\u00e9gies qui renforcent notre visibilit\u00e9 et notre position de r\u00e9f\u00e9rence.","sameAs":["https:\/\/www.linkedin.com\/in\/thomaslazzaroni\/","https:\/\/x.com\/totolazza"],"url":"https:\/\/graphiste.com\/blog\/author\/thomas\/"}]}},"_links":{"self":[{"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/posts\/679","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/comments?post=679"}],"version-history":[{"count":0,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/posts\/679\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/media\/19677"}],"wp:attachment":[{"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/media?parent=679"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/categories?post=679"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/tags?post=679"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}