{"json_modified": "2016-06-28T06:21:19.507524", "uuid": "5ec37b30-8dd1-46f7-b3cb-9c5117b0a5a9", "title": "Responsive design", "url": "/en-US/docs/Web/Guide/Responsive_design", "tags": ["Mobile", "Responsive Design", "Apps", "Web Development"], "translations": [{"uuid": "3d1aa902-8d89-493e-bbc2-597235b1e494", "title": "\u0627\u0633\u062a\u062c\u0627\u0628\u0629_\u062a\u0635\u0645\u064a\u0645", "url": "/ar/docs/Web_Development/Mobile/%D8%A7%D8%B3%D8%AA%D8%AC%D8%A7%D8%A8%D8%A9_%D8%AA%D8%B5%D9%85%D9%8A%D9%85", "tags": [], "summary": "As a reaction to the problems associated with the <a href=\"/en-US/docs/Web_Development/Mobile/Separate_sites\" title=\"Web development/Mobile/Separate sites\">separate sites</a> approach to developing Web sites for both mobile and desktop, a relatively new idea (which is actually <a href=\"https://www.alistapart.com/articles/dao/\">quite old</a>) is growing in popularity: ditch user-agent detection, and instead make your page respond on the client-side to the browser\u2019s capabilities. This approach, introduced by Ethan Marcotte in his article for <a href=\"https://alistapart.com\" title=\"https://alistapart.com\">A List Apart</a>, came to be known as <a href=\"https://www.alistapart.com/articles/responsive-web-design/\" style=\"line-height: 1.572;\">Responsive Web Design</a>. Like the separate sites approach, responsive Web design has positive and negative aspects.", "localization_tags": [], "locale": "ar", "last_edit": "2013-09-21T14:43:02", "review_tags": []}, {"uuid": "9aa5fa1d-43f2-4d40-adef-57b9901864fa", "title": "Disseny sensible (Responsive design)", "url": "/ca/docs/Web_Development/Mobile/Responsive_design", "tags": [], "summary": "Com una resposta als problemes associats a l'enfoc de desenvolupament basat en dos <a href=\"/en/Web_Development/Mobile/Separate_sites\" title=\"en/Web development/Mobile/Separate sites\">dissenys web separats</a> per a cada plataforma, m\u00f2bil i escriptori, una idea relativament nova (de fet <a class=\"external\" href=\"https://www.alistapart.com/articles/dao/\">no tant</a>) ha crescut en popularitat: oblidar-se de la detecci\u00f3 del <em>user-agent</em> des del servidor, i sustituir-ho per una plana que respongui del costat del client a les possibilitats del navegador. Aquest enfoc del problema s'ha convingut en anomenar-lo <a class=\"external\" href=\"https://www.alistapart.com/articles/responsive-web-design/\">disseny web sensible</a>. Igual que l'enfoc dels dissenys separats, el disseny web sensible t\u00e9 els seus avantatges i inconvenients.", "localization_tags": [], "locale": "ca", "last_edit": "2013-03-09T15:33:27", "review_tags": []}, {"uuid": "949ba54d-8c9c-4f8c-8387-c98e314552de", "title": "Responsive Design", "url": "/de/docs/Web_Development/Mobile/Responsive_design", "tags": [], "summary": "<span class=\"long_text\" id=\"result_box\" lang=\"de\"><span class=\"hps\">Als Reaktion auf</span> <span class=\"hps\">die Probleme mit dem</span> <span class=\"hps\">getrennten\u00a0</span><span class=\"hps\">Ansatz zur Entwicklung von</span> <span class=\"hps\">Web-Sites f\u00fcr</span> <span class=\"hps\">mobile und</span> <span class=\"hps\">Desktop</span><span>,</span> wird <span class=\"hps\">eine relativ neue Idee</span> <span class=\"hps\">(was ist eigentlich</span> <span class=\"hps\">ziemlich alt</span><span>)</span> <span class=\"hps\">immer beliebter</span><span>:</span> <span class=\"hps\">Graben</span> <span class=\"hps\">User-Agent</span><span>-Erkennung,</span> <span class=\"hps\">und stattdessen</span> </span><span class=\"long_text\" id=\"result_box\" lang=\"de\"><span class=\"hps\">reagieren </span></span><span class=\"long_text\" id=\"result_box\" lang=\"de\"><span class=\"hps\">die Seiten</span>\u00a0 <span class=\"hps\">auf</span> <span class=\"hps\">der Client-Seite</span> <span class=\"hps\">in den Browser</span><span>-Funktionen.</span> <span class=\"hps\">Dieser Ansatz, der</span> <span class=\"hps\">von Ethan</span> <span class=\"hps\">Marcotte</span> <span class=\"hps\">in</span> <span class=\"hps\">seinem Artikel</span> <span class=\"hps\">f\u00fcr A</span> <span class=\"hps\">List Apart</span> <span class=\"hps\">kam, wird als</span> <span class=\"hps\">Responsive</span> <span class=\"hps\">Web Design</span> <span class=\"hps\">bekannt sein.</span> <span class=\"hps\">Wie der</span> <span class=\"hps\">getrennten Plattform</span> <span class=\"hps\">Ansatz</span> <span class=\"hps\">hat</span> <span class=\"hps\">ansprechende</span> <span class=\"hps\">Webdesign</span> <span class=\"hps\">positive und negative Aspekte</span><span>.</span></span>", "localization_tags": [], "locale": "de", "last_edit": "2013-06-04T23:31:03", "review_tags": []}, {"uuid": "08ccb496-0a02-4cdf-b8a2-c60dadf83b3c", "title": "Dise\u00f1o adaptable (\u00abresponsivo\u00bb)", "url": "/es/docs/Web_Development/Mobile/Dise%C3%B1o_responsivo", "tags": [], "summary": "Aunque no se propuso inicialmente como un m\u00e9todo para crear sitios para los m\u00f3viles, el dise\u00f1o flexible ha ganado recientemente mucha atenci\u00f3n como una forma de dar los primeros pasos para el desarrollo de sitios que sean compatibles y amigables con los m\u00f3viles en vez de tener un sitio separado para los mismos.", "localization_tags": [], "locale": "es", "last_edit": "2013-11-17T02:58:09", "review_tags": []}, {"uuid": "e3abc8f4-8ba5-4a89-895b-4a8d03f4f001", "title": "Responsive design", "url": "/fr/docs/Web_Development/Mobile/Responsive_design", "tags": ["Mobile", "D\u00e9veloppement", "Responsive Design", "Web"], "summary": "En r\u00e9action aux probl\u00e8mes engendr\u00e9s par l'approche consistant \u00e0 d\u00e9velopper en tant que <a href=\"/en/Web_Development/Mobile/Separate_sites\" title=\"en/Web development/Mobile/Separate sites\">sites distincts</a> des sites web destin\u00e9s \u00e0 la fois aux t\u00e9l\u00e9phones et aux ordinateurs, une id\u00e9e relativement nouvelle (en fait, <a class=\"external\" href=\"https://www.alistapart.com/articles/dao/\">d\u00e9j\u00e0 ancienne</a>) devient populaire : au lieu d'utiliser la d\u00e9tection de l'user-agent, faire en sorte que votre page appelle, c\u00f4t\u00e9 client, aux fonctionnalit\u00e9s du navigateur. Cette approche s'est fait connaitre sous le nom de <a class=\"external\" href=\"https://www.alistapart.com/articles/responsive-web-design/\">Responsive Web Design</a> ou site web adaptatif. Comme pour les sites distincts, cette approche a des aspects tant positifs que n\u00e9gatifs.", "localization_tags": [], "locale": "fr", "last_edit": "2015-03-18T10:09:57", "review_tags": []}, {"uuid": "9899e726-99dd-43c6-9e8b-e478f43f0fb1", "title": "Design Sensibile", "url": "/it/docs/Web_Development/Mobile/Design_sensibile", "tags": [], "summary": "Come risposta ai problemi associati all'approccio per <a href=\"/en-US/docs/Web_Development/Mobile/Separate_sites\">siti separati</a> nel campo del Web design per mobile e desktop, un'idea relativamente nuova (che \u00e8 <a href=\"https://www.alistapart.com/articles/dao/\">abbastanza datata</a>) sta aumentando la sua popolarit\u00e0: evitare il rilevamento user-agent, e creare invece una pagina che risponda client-side alle capacit\u00e0 del browser. Questo approccio, introdotto da Ethan Marcotte nel suo articolo dal titolo <a href=\"https://alistapart.com\">A List Apart</a>, \u00e8 oggi conosciuto come <a href=\"https://www.alistapart.com/articles/responsive-web-design/\">Web Design Sensibile</a>. Come l'approccio a siti separati, il Web Design sensibile possiede aspetti positivi e negativi.", "localization_tags": [], "locale": "it", "last_edit": "2013-11-24T08:28:47", "review_tags": []}, {"uuid": "eda5eb14-e9dd-45ea-b21f-e14acc201f0d", "title": "\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u30c7\u30b6\u30a4\u30f3", "url": "/ja/docs/Web_Development/Mobile/Responsive_design", "tags": [], "summary": "\u30e2\u30d0\u30a4\u30eb\u5411\u3051\u3068\u30c7\u30b9\u30af\u30c8\u30c3\u30d7\u5411\u3051\u306e Web \u30b5\u30a4\u30c8\u306e\u958b\u767a\u306b\u5bfe\u3059\u308b <a href=\"/ja/docs/Web_Development/Mobile/Separate_sites\" title=\"Web development/Mobile/Separate sites\">\u5206\u96e2\u3057\u305f</a> \u624b\u6cd5\u306b\u95a2\u9023\u3059\u308b\u554f\u984c\u306b\u5bfe\u3059\u308b\u53cd\u5fdc\u3068\u3057\u3066\u3001\u6bd4\u8f03\u7684\u65b0\u3057\u3044 (\u5b9f\u969b\u306f <a href=\"https://www.alistapart.com/articles/dao/\">\u3068\u3066\u3082\u53e4\u3044</a>) \u30a2\u30a4\u30c7\u30a3\u30a2\u304c\u4eba\u6c17\u3092\u96c6\u3081\u59cb\u3081\u3066\u3044\u307e\u3059\u3002\u30e6\u30fc\u30b6\u30fc\u30a8\u30fc\u30b8\u30a7\u30f3\u30c8\u3067\u306e\u5224\u5225\u3068\u306f\u5225\u308c\u3092\u544a\u3052\u3001\u304b\u308f\u308a\u306b\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u5074\u306e\u30d6\u30e9\u30a6\u30b6\u306e\u6a5f\u80fd\u3067\u30da\u30fc\u30b8\u3092\u5bfe\u5fdc\u3055\u305b\u307e\u3057\u3087\u3046\u3002\u3053\u306e\u624b\u6cd5\u306f Ethan Marcotte \u306e\u30d6\u30ed\u30b0\u8a18\u4e8b <a href=\"https://alistapart.com\" title=\"https://alistapart.com\">A List Apart</a> \u3067\u7d39\u4ecb\u3055\u308c\u3001<a href=\"https://www.alistapart.com/articles/responsive-web-design/\" style=\"line-height: 1.572;\">\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6 Web \u30c7\u30b6\u30a4\u30f3</a> \u3068\u3057\u3066\u77e5\u3089\u308c\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3057\u305f\u3002\u5206\u96e2\u3057\u305f\u30b5\u30a4\u30c8\u958b\u767a\u624b\u6cd5\u3068\u540c\u69d8\u306b\u3001\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6 Web \u30c7\u30b6\u30a4\u30f3\u306b\u3082\u77ed\u6240\u304c\u3042\u308a\u307e\u3059\u3002", "localization_tags": [], "locale": "ja", "last_edit": "2013-10-21T05:59:03", "review_tags": []}, {"uuid": "7fe8ad9d-09f6-4bcb-a6ba-f0177f215c78", "title": "Design Responsivo", "url": "/pt-BR/docs/Web_Development/Mobile/Design_responsivo", "tags": [], "summary": "Como uma rea\u00e7\u00e3o aos problemas associados com a abordagem de\u00a0<a href=\"/pt-BR/docs/Web_Development/Mobile/Sites_separados\" title=\"Web development/Mobile/Separate sites\">sites separados</a>\u00a0para desenvolvimento de sites para celular e desktop, uma ideia relativamente nova (que \u00e9 atualmente\u00a0<a href=\"https://www.alistapart.com/articles/dao/\">bastante antiga</a>) est\u00e1 crescendo em popularidade: abandona a detec\u00e7\u00e3o do agente de usu\u00e1rio, e em vez disso faz sua pag\u00edna responder no lado cliente aos recursos do navegador. Esta abordagem, introduzida por Ethan Marcotte em seu artigo para\u00a0<a href=\"https://alistapart.com\" title=\"https://alistapart.com\">A List Apart</a>, veio a ser conhecido como\u00a0<a href=\"https://www.alistapart.com/articles/responsive-web-design/\" style=\"line-height: 1.572;\">Responsive Web Design</a>. Como a abordagem de sites separados, WebDesgin Responsivo tem aspectos positivos e negativos.", "localization_tags": [], "locale": "pt-BR", "last_edit": "2013-06-29T19:46:30", "review_tags": []}, {"uuid": "ee1a516b-bf52-4ea3-b0e5-77269d4c445e", "title": "\u0410\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u044b\u0439 \u0434\u0438\u0437\u0430\u0439\u043d", "url": "/ru/docs/Web_Development/Mobile/Responsive_design", "tags": [], "summary": "As a reaction to the problems associated with the <a href=\"/en-US/docs/Web_Development/Mobile/Separate_sites\" title=\"Web development/Mobile/Separate sites\">separate sites</a> approach to developing Web sites for both mobile and desktop, a relatively new idea (which is actually <a href=\"https://www.alistapart.com/articles/dao/\">quite old</a>) is growing in popularity: ditch user-agent detection, and instead make your page respond on the client-side to the browser\u2019s capabilities. This approach, introduced by Ethan Marcotte in his article for <a href=\"https://alistapart.com\" title=\"https://alistapart.com\">A List Apart</a>, came to be known as <a href=\"https://www.alistapart.com/articles/responsive-web-design/\" style=\"line-height: 1.572;\">Responsive Web Design</a>. Like the separate sites approach, responsive Web design has positive and negative aspects.", "localization_tags": [], "locale": "ru", "last_edit": "2013-08-06T18:38:29", "review_tags": []}, {"uuid": "7d22de7c-18f7-4dcd-9065-b9d107f9d6a3", "title": "\u54cd\u5e94\u5f0f\u8bbe\u8ba1", "url": "/zh-CN/docs/Web_Development/Mobile/Responsive_design", "tags": [], "summary": "\u5728\u89e3\u51b3\u5bf9\u684c\u9762\u548c\u79fb\u52a8\u73af\u5883\u5f00\u53d1\u7f51\u7ad9\u8fd9\u4e2a\u95ee\u9898\u4e0a\uff0c\u4e0e<a href=\"/en/Web_Development/Mobile/Separate_sites\" title=\"en/Web development/Mobile/Separate sites\">\u5206\u79bb\u7f51\u7ad9</a>\u7684\u65b9\u6cd5\u76f8\u53cd\uff0c\u4e00\u79cd\u76f8\u5bf9\u8f83\u65b0\uff08\u5176\u5b9e\u76f8\u5f53<a class=\"external\" href=\"https://www.alistapart.com/articles/dao/\">\u53e4\u8001</a>\uff09\u7684\u65b9\u6cd5\u6e10\u6e10\u6d41\u884c\u8d77\u6765\uff1a\u6452\u5f03\u7528\u6237\u4ee3\u7406\u68c0\u6d4b\uff0c\u800c\u662f\u5728\u5ba2\u6237\u7aef\u6839\u636e\u6d4f\u89c8\u5668\u7684\u80fd\u529b\u8fdb\u884c\u9875\u9762\u53d8\u5316\u3002\u8fd9\u79cd\u65b9\u6cd5\u6700\u65e9\u662f\u7531Ethan Marcotte\u5728\u4ed6\u4e3a<a class=\"external\" href=\"https://www.alistapart.com/\">A List Apart</a>\u6240\u5199\u7684\u6587\u7ae0\u4e2d\u63d0\u51fa\u7684\uff0c\u4e5f\u5c31\u662f\u6211\u4eec\u6240\u719f\u77e5\u7684<a class=\"external\" href=\"https://www.alistapart.com/articles/responsive-web-design/\">\u54cd\u5e94\u5f0f\u8bbe\u8ba1</a>\u3002\u548c\u5206\u79bb\u7f51\u7ad9\u8bbe\u8ba1\u65b9\u5f0f\u4e00\u6837\uff0c\u54cd\u5e94\u5f0f\u8bbe\u8ba1\u4e5f\u6709\u81ea\u5df1\u7684\u4f18\u52bf\u548c\u5f0a\u7aef\u3002", "localization_tags": [], "locale": "zh-CN", "last_edit": "2013-11-14T22:22:22", "review_tags": []}], "modified": "2016-06-28T06:21:19", "label": "Responsive design", "localization_tags": [], "locale": "en-US", "id": 5367, "last_edit": "2016-06-28T06:21:18", "summary": "With Web users increasingly using mobile devices to browse Web sites and apps, Web designers and developers need to be sure that their creations look as good and work as well on mobile devices as on traditional desktop computers.", "sections": [{"id": "The_advantages", "title": "The advantages"}, {"id": "The_drawbacks", "title": "The drawbacks"}, {"id": "Strategies_for_responsive_design", "title": "Strategies for responsive design"}, {"id": "When_it_is_right_to_choose_this_option", "title": "When it is right to choose this option"}, {"id": "Examples", "title": "Examples"}, {"id": "Approaches_to_mobile_Web_development", "title": "Approaches to mobile Web development"}, {"id": "Minimum_requirements_for_Firefox_Marketplace", "title": "Minimum requirements for Firefox Marketplace"}, {"id": "See_also", "title": "See also"}, {"id": "Overviews", "title": "Overviews"}, {"id": "Techniques", "title": "Techniques"}, {"id": "Tools", "title": "Tools"}, {"id": "Original_document_information", "title": "Original document information"}], "slug": "Web/Guide/Responsive_design", "review_tags": []}