Closed Bug 1414107 Opened 8 years ago Closed 8 years ago

Improve article scanability

Categories

(developer.mozilla.org Graveyard :: Design, enhancement, P1)

Product:
developer.mozilla.org Graveyard
Component:
Design
Type:
enhancement

Tracking

(Not tracked)

Status:
RESOLVED FIXED

People

(Reporter: shobson, Unassigned)

References

Details

(Keywords: in-triage)

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
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.
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
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
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
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
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
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
Status: NEW → RESOLVED
Closed: 8 years ago
Resolution: --- → FIXED
Commits pushed to master at https://github.com/mozilla/kuma https://github.com/mozilla/kuma/commit/d91b36b06f3848f2954b782c518f5e9868dff997 Bug 1414107: Better Quick Links test fixture Current KumaScript always injects Quick Links as a section, which gets left behind in the body HTML and causes layout problems. https://github.com/mozilla/kuma/commit/232456da0c3ad9715f9b7d926eead6a562120de3 Bug 1414107: Remove empty Quick_Links div https://github.com/mozilla/kuma/commit/7f4cb59b5caeaac73cd9d1ed66d42cf64da89cc8 Merge pull request #4559 from mozilla/quick-links Bug 1414107: Remove empty Quick_Links section
Commits pushed to master at https://github.com/mozilla/kuma https://github.com/mozilla/kuma/commit/9d5a3ea47dff1412a368b3d1b518ac418454479a Bug 1414107: Remove line_length waffle https://github.com/mozilla/kuma/commit/0dd9a80ce4924ee5166741b6b816cb04b66f1e42 Merge pull request #4568 from mozilla/1414107-remove-waffle Bug 1414107: Remove line_length waffle
See Also: → 1427888
Commits pushed to master at https://github.com/mozilla/kuma https://github.com/mozilla/kuma/commit/6b53955dfd2ee44295b181269d271a839e83a2c5 bug 1414107: Remove wiki-skinny.js This was an alternate JS for the line_length waffle transition, and should have been removed when it became the default. https://github.com/mozilla/kuma/commit/33242639c990135b597d42a4d44c35c8e2a32011 Merge pull request #4918 from jwhitlock/stay-fat-1414107 bug 1414107: Remove wiki-skinny.js
See Also: → 1500872
Product: developer.mozilla.org → developer.mozilla.org Graveyard
You need to log in before you can comment on or make changes to this bug.