{ "_description": "Generated from data/ — edit the sources, not this file. The agent access guide explains the evidence boundary of every field.", "schemaVersion": "1.0.0", "kind": "entry", "locale": "en", "id": "mobile-first", "name": { "zh": "移动优先", "en": "Mobile-First" }, "page": "https://designvocabulary.com/en/entries/mobile-first/", "self": "https://designvocabulary.com/en/entries/mobile-first.json", "alternates": { "zh-CN": "https://designvocabulary.com/zh/entries/mobile-first.json", "en": "https://designvocabulary.com/en/entries/mobile-first.json" }, "site": { "catalogSchemaVersion": "0.1.0", "entries": 158, "index": "https://designvocabulary.com/en/entries/index.json", "query": "https://designvocabulary.com/api/query?lang=en", "guide": "https://designvocabulary.com/en/agents/", "llms": "https://designvocabulary.com/llms.txt" }, "provenance": { "sourceBacked": [ "entry.definition" ], "editorial": [ "entry.boundary", "entry.signature", "entry.when", "entry.when_not", "entry.tradeoff", "entry.comparison", "entry.rules", "entry.relations", "entry.implementationNote", "entry.philosophy" ], "scope": "Definitions reference these sources. Digital specimens, selection advice, relationships, and recipes are editorial work and have not been validated through user research.", "editorialStatus": "drafted", "specimenData": "fictional", "specimenNote": "Original fictional specimens. Definitions cite sources; usage advice and recipes are editorial.", "sources": [ { "id": "mobilefirst-lukew-2009", "url": "https://www.lukew.com/ff/entry.asp?933", "title": "LukeW · Mobile First", "checkedAt": "2026-10-20", "archive": { "status": "unconfirmed", "confirmed": false, "url": null, "capturedAt": null, "lookupUrl": "https://web.archive.org/web/20261020*/https://www.lukew.com/ff/entry.asp?933" } }, { "id": "mobilefirst-lukew-book", "url": "https://www.lukew.com/resources/mobile_first.asp", "title": "LukeW · Mobile First (A Book Apart, 2011)", "checkedAt": "2026-10-20", "archive": { "status": "unconfirmed", "confirmed": false, "url": null, "capturedAt": null, "lookupUrl": "https://web.archive.org/web/20261020*/https://www.lukew.com/resources/mobile_first.asp" } }, { "id": "mobilefirst-marcotte-rwd", "url": "https://alistapart.com/article/responsive-web-design/", "title": "A List Apart · Responsive Web Design (Ethan Marcotte)", "checkedAt": "2026-10-20", "archive": { "status": "unconfirmed", "confirmed": false, "url": null, "capturedAt": null, "lookupUrl": "https://web.archive.org/web/20261020*/https://alistapart.com/article/responsive-web-design/" } } ], "lists": [], "ordered": false, "listDisclaimer": "Seat numbers are editorial positions, not scores, rankings, or popularity measurements. A list that is not filled is left as it is." }, "entry": { "id": "mobile-first", "type": "philosophy", "name": { "zh": "移动优先", "en": "Mobile-First" }, "aliases": [ "Mobile First", "Mobile-First Design", "移动端优先", "小屏优先" ], "granularity": "experience", "intents": [ "extend-reach", "reduce-complexity", "organize-content" ], "tags": [ "mobile", "small screens", "priorities", "content choices", "scaling up" ], "definition": "Designing a product for the smallest screen and the mobile context first, then expanding to larger screens: the small screen forces the team to decide early what matters most, and capabilities specific to mobile devices enter the design from the start, instead of a desktop version being finished and then cut down into a mobile one.", "boundary": "Mobile-first is a position about the order of design and its tradeoffs, not a layout technique. It is not responsive design: responsive design is the means — fluid grids, flexible images, and media queries — by which one page adapts to different widths, and it can be written from desktop down or from mobile up; mobile-first answers which context the tradeoffs are made for first. It also differs from progressive enhancement: progressive enhancement layers features on top of a baseline according to browser and network capability, and asks whether the core task still works under the worst conditions; mobile-first orders by screen and context, and the smallest screen is not necessarily the least capable environment. Nor does it mean building only for mobile or turning the desktop version into an enlarged phone interface — larger screens deserve a fitting layout as the design scales up.", "signature": [ "The first layout and the first content choices are made on the smallest screen", "Layouts for larger screens add columns, information, and actions to the small-screen version rather than removing them in reverse", "Mobile capabilities such as location, touch, and the camera are considered at the requirements stage" ], "when": [ "A substantial share of use happens on phones, or that share is growing", "A page carries so much content and functionality that the team cannot agree on priorities", "The product genuinely benefits from mobile capabilities such as location, touch, or sensors" ], "when_not": [ "The main tasks depend on a large screen and a precise pointer, such as dense data editing or professional drawing tools", "The small-screen version is simply stretched into the desktop version, wasting the wide screen", "Content that users need on every device is removed because it does not fit on mobile" ], "tradeoff": "Starting from the smallest screen forces priorities to be set early, yields a more focused core experience, and brings mobile capabilities into early design; the cost is that dense desktop tasks can become an afterthought, and once a small-screen tradeoff is treated as a decision about the content itself, people on larger screens lose information they need.", "comparison": { "focus": "Making content and feature tradeoffs for the smallest screen and the mobile context first", "mechanism": "Using the small-screen version as the baseline and adding layout, information, and actions as the screen grows", "cost": "Dense large-screen tasks easily become an afterthought" }, "sources": [ { "id": "mobilefirst-lukew-2009", "title": "LukeW · Mobile First", "url": "https://www.lukew.com/ff/entry.asp?933", "claim": "In this article of 3 November 2009, Luke Wroblewski argues that web applications should be designed for mobile before the desktop, for three reasons: mobile use is growing fast; the constraints of a small screen force teams to set priorities and keep only the key tasks; and mobile platforms offer capabilities such as location, a compass, multi-touch, and accelerometers that desktop browsers lack. This entry takes its definition and the three points of growth, constraints, and capabilities from it; the usage forecast the article cites is a figure of its time and is not repeated here.", "checkedAt": "2026-10-20", "archive": { "lookupUrl": "https://web.archive.org/web/20261020*/https://www.lukew.com/ff/entry.asp?933", "status": "unconfirmed", "checkedAt": "2026-10-20T08:00:05.333Z", "error": "save-request-failed" } }, { "id": "mobilefirst-lukew-book", "title": "LukeW · Mobile First (A Book Apart, 2011)", "url": "https://www.lukew.com/resources/mobile_first.asp", "claim": "The author's book page states that Mobile First was published by A Book Apart in October 2011, argues that websites and applications should increasingly be designed for mobile first and that starting with the desktop may be an increasingly backwards way of thinking, and covers how teams move from desktop to mobile design in organisation, actions, input, and layout. This entry uses it for the origin and scope of the position.", "checkedAt": "2026-10-20", "archive": { "lookupUrl": "https://web.archive.org/web/20261020*/https://www.lukew.com/resources/mobile_first.asp", "status": "unconfirmed", "checkedAt": "2026-10-20T08:00:07.408Z", "error": "save-request-failed" } }, { "id": "mobilefirst-marcotte-rwd", "title": "A List Apart · Responsive Web Design (Ethan Marcotte)", "url": "https://alistapart.com/article/responsive-web-design/", "claim": "This article by Ethan Marcotte, published on 25 May 2010, introduced responsive web design, naming fluid grids, flexible images, and media queries as its three technical ingredients and replacing separate per-device sites with one adaptive experience. This entry uses it only to draw the line: responsive design is a means of implementation, while mobile-first is a position on design order and tradeoffs.", "checkedAt": "2026-10-20", "archive": { "lookupUrl": "https://web.archive.org/web/20261020*/https://alistapart.com/article/responsive-web-design/", "status": "unconfirmed", "checkedAt": "2026-10-20T08:00:08.060Z", "error": "save-request-failed" } } ], "relations": [ { "target": "progressive-enhancement", "kind": "related", "condition": "The two are easily taken for the same thing and need to be told apart", "reason": "Both start small and add upward, but progressive enhancement layers by browser and network capability while mobile-first orders by screen and context of use; the smallest screen is not necessarily the least capable environment, and the two axes can be applied together.", "basis": "editorial" }, { "target": "single-column", "kind": "realized_by", "condition": "Settling the baseline layout on a small screen", "reason": "The small-screen baseline is usually one column of content from top to bottom, with larger screens adding columns on top of it.", "basis": "editorial" }, { "target": "adaptive-multipane", "kind": "composes_with", "condition": "Deciding what to add as the screen grows", "reason": "Mobile-first decides the baseline content, and adaptive multi-pane layouts describe how a large screen lays that content side by side instead of enlarging the phone interface.", "basis": "editorial" }, { "target": "cognitive-load", "kind": "informs", "condition": "A page carries too much information and too many actions", "reason": "The constraint of a small screen forces the team to drop non-essential elements, which also reduces how much users must handle at once.", "basis": "editorial" } ], "rules": [ { "when": "Cutting content or features for small screens", "instruction": "Distinguish moving something to a secondary position from removing it outright: content users need on every device may only change its position or how it expands, and should not disappear because the screen is small.", "strength": "recommend", "basis": "editorial" }, { "when": "Extending the layout to larger screens", "instruction": "Decide separately which columns, information, and shortcuts the large screen adds, and check them against real large-screen tasks rather than only widening the small-screen version.", "strength": "recommend", "basis": "editorial" } ], "philosophy": { "values": [ "Decide what matters most before deciding how much to show", "Design should start from the most constrained context of use" ], "tension": "Between the focus a small screen brings and the information density that large-screen tasks need", "questions": [ "If this page could hold only one thing, what would it be?", "Is this cut a choice about position, or a choice about content?", "What do users gain when the screen gets bigger?" ] }, "demo": null, "version": "0.1.0", "editorialStatus": "drafted", "requirements": [], "demoCapabilities": [], "implementationNote": "This entry has no runnable specimen; the illustration is an editorial sketch showing one fictional page expanding step by step from phone to desktop to convey design order, and represents no particular breakpoints or framework. Before applying it to a product, check the tradeoffs at each size with real devices and real tasks.", "image": { "src": "/images/mobile-first.webp", "alt": "A sketch: the same fictional FIELDNOTES page appears from left to right on a phone, a tablet, and a desktop screen; the phone shows a single column of grey content bars and one terracotta primary button, the tablet adds a column, and the desktop adds a sidebar, with small rightward arrows linking the three." }, "searchTerms": [ "移动端", "小屏幕", "优先级", "内容取舍", "向上扩展" ] } }