Summary
Article creation guidance flow was originally designed for mobile but later we made some changes to make it responsive for desktop too. This task aims to document some more changes we can make for Desktop.
Changes
01. Page heading + title input on step 1
Before
 |
- "New article" is centered.
- Title input ends midway across the column
After
 |
- Standard MW special-page heading.
- Title input spans the full content column, its bottom border aligns with the heading's underline.
- Left-aligned, serif, single thin rule beneath. Body content flows below. ---
02. Remove the back arrow on this screen
Before
 |
- A small ← icon hovers above the heading. Once the heading is left-aligned (point 1) it sits in dead space.
- Lets style it similar to Recent Changes, Watchlist, Preferences.
After
 |
- Remove the floating back-arrow entirely.
- Use an explicit Back button in the step action area where back navigation is needed.
03. Manual Outline list - 3 column grid
Before
 |
- Short-format cards (icon + name + one-line description) given a wide-format single-column stack.
- Descriptions vary from one line to five. In a grid, rows inherit the tallest card; rhythm goes uneven.
- "Suggest a new type" is placed centrally.
After
 |
- 3-column CSS grid on desktop. Same card, smaller cell, easier to scan.
- Consistent min-height per card + two-line ellipsis clamp on description.
- Anchor to bottom-left with a thin top divider, reads as the list's footer action. ---
04. Title-already-exists step
Before
 |
- Six stacked rows: warning, suggestion, "Selected subject" heading, card, button, link.
- Wide Continue button and "View existing article" below it
After
 |
- Warning and “View existing article” sit on the same line on desktop.
- Suggested title appears on the next line so it reads as a secondary resolution option.
- “Selected subject” is a quiet small label, not a bold heading. The card explains itself.
- Narrow the subject card so it does not compete with the message above.
- Right-align the action row to the title input’s right edge.
- Keep the action row focused on step navigation: Back and Continue only.
05. Sources step: two columns + content block tips
Before
|
- Vertical stack on desktop.
- Tips inside a collapsed accordion (mobile pattern).
- Inline "+" Add button.
- Oversized full-width Continue.
- Loose heading/subtitle spacing.
After
 |
- Two columns on desktop: URL input and actions on the left, source tips on the right.
- Tips are shown as a static content block, not a collapsed accordion.
- Tips block is top-aligned with the “Add sources” heading.
- Tips hierarchy is clearer: “Tips for [type] articles” is a small quiet label, while “These source types work well:” is the bold heading.
- Action row sits under the input with insight text on the left and Back / Continue actions on the right.
- “Add source” is a Codex button next to the URL field. After a valid source is added, it appears below as a dismissible source item, and the same URL field clears and stays ready for another source.
06. Instructions step
Before
 |
- "Start writing" centered.
- Guidance card spans full content width with weak containment.
After
 |
- Keep the guidance content in a capped reading column so the card and action feel connected.
- Treat the guidance block as a contained card with clearer visual boundaries.
- Right-align “Start writing” to the card’s right edge, not the full page edge.
07. Notability step
Before
 |
- Each row reads as a stretched banner rather than a discrete pickable action.
After
 |
- Present each notability option as a distinct selectable card.
- Cap the option list width so the choices do not stretch into full-width banners.
- Keep the cards in a vertical stack with consistent spacing for easier scanning.
- Keep Back as an explicit secondary action below the option list.
