{"json_modified": "2016-08-25T03:12:44.887704", "uuid": "52ace14c-7510-4ef8-800c-093efd20b50d", "title": "Mobile first", "url": "/en-US/docs/Web/Apps/Progressive/Responsive/Mobile_first", "tags": ["CSS", "Apps", "HTML"], "translations": [{"uuid": "f05b77af-4e17-46ab-af0f-26b374a4d2dc", "title": "\u30e2\u30d0\u30a4\u30eb\u30d5\u30a1\u30fc\u30b9\u30c8", "url": "/ja/docs/Web/Apps/Design/UI_layout_basics/Mobile_first", "tags": ["CSS", "Apps", "HTML"], "summary": "\u300c<a href=\"/docs/Web/Apps/Planning_your_app\" title=\"/en-US/docs/Web/Apps/Planning_your_app\">Planning your App</a>\u300d\u306e\u8a18\u4e8b\u306e\u4e2d\u3067\u3001\u308f\u305f\u3057\u305f\u3061\u306f\u3001\u3042\u306a\u305f\u304c\u30a2\u30d7\u30ea\u306e\u30b3\u30fc\u30c7\u30a3\u30f3\u30b0\u3092\u59cb\u3081\u308b\u524d\u306b\u6c7a\u3081\u308b\u5fc5\u8981\u304c\u3042\u308b\u3001\u4f01\u753b\u6027\u3068\u6a5f\u80fd\u6027\u306b\u5206\u985e\u3055\u308c\u308b\u6c7a\u5b9a\u306b\u304a\u3044\u3066\u3001\u30c7\u30b9\u30af\u30c8\u30c3\u30d7\u3068\u30e2\u30d0\u30a4\u30eb\u306e\u30c7\u30b6\u30a4\u30f3\u306e\u305f\u3081\u306e\u3044\u304f\u3064\u304b\u306e\u30a2\u30a4\u30c7\u30a2\u3092\u542b\u3081\u3001\u9ad8\u3044\u30ec\u30d9\u30eb\u306e\u753b\u9762\u3092\u63d0\u4f9b\u3057\u307e\u3059\u3002\u3053\u306e\u8a18\u4e8b\u306f\u3001\u30e2\u30d0\u30a4\u30eb\u30d5\u30a1\u30fc\u30b9\u30c8\u306e\u30b3\u30f3\u30bb\u30d7\u30c8\u306b\u6ce8\u76ee\u3057\u3001\u3044\u304f\u3064\u304b\u306e\u95a2\u9023\u3059\u308b\u30a2\u30a4\u30c7\u30a2\u3092\u63d0\u6848\u3057\u307e\u3059\u3002\u6a19\u6e96\u7684\u306a\u30ec\u30a4\u30a2\u30a6\u30c8\u69cb\u6210\u306f\u3001\u30e2\u30d0\u30a4\u30eb\u7aef\u672b\u306e\u305f\u3081\u306e\u3082\u306e\u3067\u3059\u3002\u305d\u3057\u3066\u3001\u30c7\u30b9\u30af\u30c8\u30c3\u30d7\u30d6\u30e9\u30a6\u30b6\u7528\u306e\u30ec\u30a4\u30a2\u30a6\u30c8\u3084\u6a5f\u80fd\u306f\u3001\u305d\u306e\u6a19\u6e96\u7684\u306a\u30ec\u30a4\u30a2\u30a6\u30c8\u69cb\u6210\u306e\u4e0a\u306b\u7a4d\u307f\u91cd\u306d\u3089\u308c\u307e\u3059\u3002\u3053\u306e\u30ac\u30a4\u30c9\u306f\u3001\u30e2\u30d0\u30a4\u30eb\u30d5\u30a1\u30fc\u30b9\u30c8\u306e\u5305\u62ec\u7684\u306a\u5185\u5bb9\u3092\u542b\u3080\u3001\u3044\u304f\u3064\u304b\u306e\u6709\u7528\u306a\u6280\u8853\u306b\u6ce8\u76ee\u3057\u307e\u3059\u3002", "localization_tags": ["inprogress"], "locale": "ja", "last_edit": "2015-07-27T21:03:05", "review_tags": []}], "modified": "2016-08-25T03:12:44", "label": "Mobile first", "localization_tags": [], "locale": "en-US", "id": 80579, "last_edit": "2016-08-25T03:12:43", "summary": "In our <a href=\"/en-US/docs/Web/Apps/Planning_your_app\" title=\"/en-US/docs/Web/Apps/Planning_your_app\">Planning your App</a> article, we provided a high level look into the kinds of planning and functionality decisions you should make before you start coding an app, including some ideas for desktop and mobile design. This article offers some related ideas, looking at the concept of mobile first \u2014 the practice of designing a web site so that the default layout/configuration is for mobile devices, and layouts and features for desktop browsers are then layered on top of that default. This guide looks at a few useful techniques inside the mobile first umbrella.", "sections": [{"id": "First_things_first_\u2014_mobile_as_a_default", "title": "First things first \u2014 mobile as a default"}, {"id": "Mobile_constraints", "title": "Mobile constraints"}, {"id": "Control_mechanisms", "title": "Control mechanisms"}, {"id": "Usage_context", "title": "Usage context"}, {"id": "Mobile_navigation", "title": "Mobile navigation"}, {"id": "Conditional_resource_loading", "title": "Conditional resource loading"}, {"id": "A_simple_example", "title": "A simple example"}, {"id": "Built-in_features_of_the_Mortar_template", "title": "Built-in features of the Mortar template"}, {"id": "HTML_structure", "title": "HTML structure"}, {"id": "Default_mobile_CSS", "title": "Default mobile CSS"}, {"id": "Adding_a_mobile_first_layout", "title": "Adding a mobile first layout"}, {"id": "Feature_detection", "title": "Feature detection"}, {"id": "Modernizr_CSS_and_JS", "title": "Modernizr CSS and JS"}], "slug": "Web/Apps/Progressive/Responsive/Mobile_first", "review_tags": []}