Improve article scanability

RESOLVED FIXED

Status

Mozilla Developer Network
Design
P1
normal
RESOLVED FIXED
22 days ago
8 days ago

People

(Reporter: shobson, Unassigned)

Tracking

({in-triage})

Details

(Reporter)

Description

22 days ago
Working with an external design firm (The Brigade) and doing extensive user testing we have a set of recommendations to improve article page scanability.

Here is more info from half way through the project: 
https://discourse.mozilla.org/t/mdn-redesign-improving-article-scanability/20048

We have a set of recommendations now and they need to be implemented, that means a bug!

Implement:
- rename quick-links menu "Related Topics"
- make quick-links links blue
- move the bread crumbs to the left column
- transform the "in this article" table of contents to a slim sticky heading
- tweak heading typography to communicate section hierarchy
- collapse article sections into just headings for mobile users

Comment 1

19 days ago
Commit pushed to master at https://github.com/mozilla/kuma

https://github.com/mozilla/kuma/commit/1aab073d9b083861ea6bd6aa2da1ba029d3f4ab2
Bug 1414107: Make dark background a variable (#4500)

Comment 2

19 days ago
Commit pushed to master at https://github.com/mozilla/kuma

https://github.com/mozilla/kuma/commit/7a7120f12c9349415877eacb040bfb393099d6d1
Bug 1414107: Conform to ESLint (#4499)

Editing to conform to ESLint in preparation for other changes.
Keywords: in-triage
Priority: -- → P1
There are some links to non-existing docs and to external links in the sidebars. With PR mozilla/kuma#4495 for bug 1413289, these links will get a class="new" (404 docs) and a rel="external" (external links). When they appear in the document body, class="new" turns links reddish brown, and rel="external" adds an external link icon. You may want to use body styling when these attributes appear in the sidebar, or force a consistent style for all sidebar links.

Comment 4

18 days ago
Commit pushed to master at https://github.com/mozilla/kuma

https://github.com/mozilla/kuma/commit/9439924f8d0608e0650ccdd994be1cd8f262ef55
Bug 1414107: New styles for quick-links (#4498)

- tweak function adding intelligent breakpoints to long titles
    - add break before `[`
    - don't add break before first letter of title
    - don't run if there are child elements
- remove background colour from `<code>` elements
- brighten strike through items when hovered (to make them readable)
- change heading to "related topics"
- make links blue
- group headings with their subcategories
- tweak what's hidden while js loads

Comment 5

16 days ago
Commit pushed to master at https://github.com/mozilla/kuma

https://github.com/mozilla/kuma/commit/e1f9792afa693af1955857f7029c8752a17b025d
Bug 1414107: Display tweaks for zone-parent (#4507)

- remove large icon on landing page
- keep zone parent text on separate line from document title until
  tablet breakpoint
- make zone parent font size match document title font size

Comment 6

16 days ago
Commit pushed to master at https://github.com/mozilla/kuma

https://github.com/mozilla/kuma/commit/32dcb8e30cf412622aa36793b847107af9894cf1
Bug 1414107: Update typography hierarchy (#4504)

- add separator variables
- add separator to h2s
- make hr match separator
- collapse separator lines when appearing next to each other:
  - summaries, blockquotes, top of the page, hrs
- move highlight to h3 and h5
- font size and margin changes to all headings
- remove empty p and div tags from article bodies
- adjust card-grid to appear better as full-width-content
- tweaks to components that use headings in them to accommodate new
  margins and typography on headings

Comment 7

16 days ago
Commits pushed to master at https://github.com/mozilla/kuma

https://github.com/mozilla/kuma/commit/3bfc4ad36653dd405ef05497fc19f8a6e3b9f453
Bug 1414107: Waffle highlight changes

https://github.com/mozilla/kuma/commit/4e6b510655118f0300ad34ccc0c5a56f84d5dfd3
Merge pull request #4508 from mozilla/1414107-highlight

Bug 1414107: Waffle highlight changes

Comment 8

16 days ago
Commit pushed to master at https://github.com/mozilla/kuma

https://github.com/mozilla/kuma/commit/d17c00b678d439e09be248b0c0d5efb1b7f2a2ef
Bug 1414107: Move breadcrumbs to left column (#4497)

* Bug 1414107: Move breadcrumbs to left column

- remove crumbs from document-head
- add crumbs to left column
- change from rdf to schema.org encoding on crumbs
- add intelligent break points to long page titles
- tweak flow of document-title and document-actions on mobile and tablet
- update look of crumbs
    - including larger hit area on mobile and tablet

* bug 1414107: Update breadcrumbs tests

- No breadcrumbs if no left sidebar
- No breadcrumbs if you are a root element

Comment 9

10 days ago
Commit pushed to master at https://github.com/mozilla/kuma

https://github.com/mozilla/kuma/commit/ec81ba031f0c112bf63cc0f738632897e5e760d7
Bug 1414107: Type adjustments for asides (#4513)

Comment 10

8 days ago
Commits pushed to master at https://github.com/mozilla/kuma

https://github.com/mozilla/kuma/commit/013c027e31d3d9d9f0dfa23d8b70f10f48608703
Fix Bug 1414107: Sticky TOC and mobile collapsed

- Move TOC to below document title
- Add sticky TOC styles
- Add JS improve TOC user experience
    - Scrolling to anchor links accounts for height of TOC
    - Don't make TOC sticky if it's too big
    - Don't show TOC if the screen is too small
- Collapse sections by default on mobile
    - open by default if user arrives via an anchor link
- Change code block formatting to avoid FOUT on <pre> blocks (the page
  should jump around less when Prism loads now)

https://github.com/mozilla/kuma/commit/5bbf91c2b38722c534e0aafbad0232c9898bd17d
Merge pull request #4510 from mozilla/1414107-toc

Fix Bug 1414107: Sticky TOC and mobile collapsed

Updated

8 days ago
Status: NEW → RESOLVED
Last Resolved: 8 days ago
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.