edge-developer icon indicating copy to clipboard operation
edge-developer copied to clipboard

Redesign WebView2 TOC & clarify article titles

Open mikehoffms opened this issue 1 year ago • 12 comments

Rendered TOC for review: https://review.learn.microsoft.com/microsoft-edge/webview2/?branch=pr-en-us-3124 Before: https://learn.microsoft.com/microsoft-edge/webview2/

Confirmed that each article in live TOC exists in PR's rendered TOC.

Objectives of this TOC redesign:

  • Removes abstract TOC buckets ("Fundamentals", "Advanced") and directly/immediately shows their content.
    • Avoid unnecessary levels of deep nesting, per IA & style guide (platform manual).
    • Uses more topical, specific TOC buckets, promoting the tech key words users are looking for, and a generally flatter design that reveals more articles and specific topics by default.
    • Enables more flexible grouping/placement of the articles.
    • Eliminates top-level buckets that are low-value & abstract; promotes the high-value, keyword-based nodes that were contained in them.
    • Eliminates a UX of guessing and having to explore into the abstract TOC nodes.
    • Makes maintenance/improvement easier.
  • Groups together articles such as distribution.md & versioning.md that were spread apart between two different TOC buckets (Fundamentals & Deployment).
  • Instead of mixing two different schemes for the TOC (group by tech topic vs. group by Fundamentals/Advanced), the new design uses only a single scheme: group by tech topic.
    • Within any topical TOC bucket, per industry convention, articles about basics/fundamentals are first, and advanced/specialized articles are below them.
      • Paragraph 1 in an article is an available place to tell user how to decide if article is relevant/required for them.

This PR also makes the following changes:

  • Changes article title from: "Understand the different WebView2 SDK versions" to: "Prerelease and Release SDKs for WebView2" to be more specific (than "versions") and provide the key words. https://review.learn.microsoft.com/en-us/microsoft-edge/webview2/concepts/versioning?branch=pr-en-us-3124
  • Changes article title from "Interop of native-side and web-side code" to "Interop of native and web code". https://review.learn.microsoft.com/en-us/microsoft-edge/webview2/how-to/communicate-btwn-web-native?branch=pr-en-us-3124

Mapping from existing TOC (left) to redesigned TOC (right): image This PR 3124 replaces forked July 2023 PR https://github.com/MicrosoftDocs/edge-developer/pull/2725, which lists the irrelevant file archive.md as entirely changed by that PR, yet not at all changed by that PR.

AB#50063950

mikehoffms avatar Apr 09 '24 17:04 mikehoffms

Learn Build status updates of commit 6e53a53:

:white_check_mark: Validation status: passed

File Status Preview URL Details
microsoft-edge/developer/index.yml :white_check_mark:Succeeded View
microsoft-edge/index.yml :white_check_mark:Succeeded View
microsoft-edge/toc.yml :white_check_mark:Succeeded View
microsoft-edge/webview2/code-samples-links.md :white_check_mark:Succeeded View
microsoft-edge/webview2/concepts/frames.md :white_check_mark:Succeeded View
microsoft-edge/webview2/concepts/navigation-events.md :white_check_mark:Succeeded View
microsoft-edge/webview2/concepts/overview-features-apis.md :white_check_mark:Succeeded View
microsoft-edge/webview2/concepts/process-related-events.md :white_check_mark:Succeeded View
microsoft-edge/webview2/concepts/versioning.md :white_check_mark:Succeeded View
microsoft-edge/webview2/concepts/working-with-local-content.md :white_check_mark:Succeeded View
microsoft-edge/webview2/get-started/get-started.md :white_check_mark:Succeeded View
microsoft-edge/webview2/get-started/win32.md :white_check_mark:Succeeded View
microsoft-edge/webview2/get-started/winui.md :white_check_mark:Succeeded View
microsoft-edge/webview2/get-started/winui2.md :white_check_mark:Succeeded View
microsoft-edge/webview2/get-started/wpf.md :white_check_mark:Succeeded View
microsoft-edge/webview2/how-to/communicate-btwn-web-native.md :white_check_mark:Succeeded View
microsoft-edge/webview2/how-to/customize-ui.md :white_check_mark:Succeeded View
microsoft-edge/webview2/how-to/set-preview-channel.md :white_check_mark:Succeeded View
microsoft-edge/webview2/samples/deployment-samples.md :white_check_mark:Succeeded View
microsoft-edge/webview2/samples/webview2apissample.md :white_check_mark:Succeeded View

For more details, please refer to the build report.

For any questions, please:

Learn Build status updates of commit e614712:

:white_check_mark: Validation status: passed

File Status Preview URL Details
microsoft-edge/developer/index.yml :white_check_mark:Succeeded View
microsoft-edge/index.yml :white_check_mark:Succeeded View
microsoft-edge/toc.yml :white_check_mark:Succeeded View
microsoft-edge/webview2/code-samples-links.md :white_check_mark:Succeeded View
microsoft-edge/webview2/concepts/frames.md :white_check_mark:Succeeded View
microsoft-edge/webview2/concepts/navigation-events.md :white_check_mark:Succeeded View
microsoft-edge/webview2/concepts/overview-features-apis.md :white_check_mark:Succeeded View
microsoft-edge/webview2/concepts/process-related-events.md :white_check_mark:Succeeded View
microsoft-edge/webview2/concepts/working-with-local-content.md :white_check_mark:Succeeded View
microsoft-edge/webview2/get-started/get-started.md :white_check_mark:Succeeded View
microsoft-edge/webview2/get-started/win32.md :white_check_mark:Succeeded View
microsoft-edge/webview2/get-started/winui.md :white_check_mark:Succeeded View
microsoft-edge/webview2/get-started/winui2.md :white_check_mark:Succeeded View
microsoft-edge/webview2/get-started/wpf.md :white_check_mark:Succeeded View
microsoft-edge/webview2/how-to/communicate-btwn-web-native.md :white_check_mark:Succeeded View
microsoft-edge/webview2/how-to/customize-ui.md :white_check_mark:Succeeded View
microsoft-edge/webview2/samples/deployment-samples.md :white_check_mark:Succeeded View
microsoft-edge/webview2/samples/webview2apissample.md :white_check_mark:Succeeded View

For more details, please refer to the build report.

For any questions, please:

Learn Build status updates of commit 9798425:

:white_check_mark: Validation status: passed

File Status Preview URL Details
microsoft-edge/developer/index.yml :white_check_mark:Succeeded View
microsoft-edge/index.yml :white_check_mark:Succeeded View
microsoft-edge/toc.yml :white_check_mark:Succeeded View
microsoft-edge/webview2/code-samples-links.md :white_check_mark:Succeeded View
microsoft-edge/webview2/concepts/frames.md :white_check_mark:Succeeded View
microsoft-edge/webview2/concepts/navigation-events.md :white_check_mark:Succeeded View
microsoft-edge/webview2/concepts/overview-features-apis.md :white_check_mark:Succeeded View
microsoft-edge/webview2/concepts/process-related-events.md :white_check_mark:Succeeded View
microsoft-edge/webview2/concepts/working-with-local-content.md :white_check_mark:Succeeded View
microsoft-edge/webview2/get-started/get-started.md :white_check_mark:Succeeded View
microsoft-edge/webview2/get-started/win32.md :white_check_mark:Succeeded View
microsoft-edge/webview2/get-started/winui.md :white_check_mark:Succeeded View
microsoft-edge/webview2/get-started/winui2.md :white_check_mark:Succeeded View
microsoft-edge/webview2/get-started/wpf.md :white_check_mark:Succeeded View
microsoft-edge/webview2/how-to/communicate-btwn-web-native.md :white_check_mark:Succeeded View
microsoft-edge/webview2/how-to/customize-ui.md :white_check_mark:Succeeded View
microsoft-edge/webview2/samples/deployment-samples.md :white_check_mark:Succeeded View
microsoft-edge/webview2/samples/webview2apissample.md :white_check_mark:Succeeded View

For more details, please refer to the build report.

For any questions, please:

Learn Build status updates of commit eb8b196:

:white_check_mark: Validation status: passed

File Status Preview URL Details
microsoft-edge/developer/index.yml :white_check_mark:Succeeded View
microsoft-edge/index.yml :white_check_mark:Succeeded View
microsoft-edge/toc.yml :white_check_mark:Succeeded View
microsoft-edge/webview2/code-samples-links.md :white_check_mark:Succeeded View
microsoft-edge/webview2/concepts/frames.md :white_check_mark:Succeeded View
microsoft-edge/webview2/concepts/navigation-events.md :white_check_mark:Succeeded View
microsoft-edge/webview2/concepts/overview-features-apis.md :white_check_mark:Succeeded View
microsoft-edge/webview2/concepts/process-related-events.md :white_check_mark:Succeeded View
microsoft-edge/webview2/concepts/working-with-local-content.md :white_check_mark:Succeeded View
microsoft-edge/webview2/get-started/get-started.md :white_check_mark:Succeeded View
microsoft-edge/webview2/get-started/win32.md :white_check_mark:Succeeded View
microsoft-edge/webview2/get-started/winui.md :white_check_mark:Succeeded View
microsoft-edge/webview2/get-started/winui2.md :white_check_mark:Succeeded View
microsoft-edge/webview2/get-started/wpf.md :white_check_mark:Succeeded View
microsoft-edge/webview2/how-to/communicate-btwn-web-native.md :white_check_mark:Succeeded View
microsoft-edge/webview2/how-to/customize-ui.md :white_check_mark:Succeeded View
microsoft-edge/webview2/samples/deployment-samples.md :white_check_mark:Succeeded View
microsoft-edge/webview2/samples/webview2apissample.md :white_check_mark:Succeeded View

For more details, please refer to the build report.

For any questions, please:

Learn Build status updates of commit 99e945e:

:white_check_mark: Validation status: passed

File Status Preview URL Details
microsoft-edge/developer/index.yml :white_check_mark:Succeeded View
microsoft-edge/index.yml :white_check_mark:Succeeded View
microsoft-edge/toc.yml :white_check_mark:Succeeded View
microsoft-edge/webview2/code-samples-links.md :white_check_mark:Succeeded View
microsoft-edge/webview2/concepts/frames.md :white_check_mark:Succeeded View
microsoft-edge/webview2/concepts/navigation-events.md :white_check_mark:Succeeded View
microsoft-edge/webview2/concepts/overview-features-apis.md :white_check_mark:Succeeded View
microsoft-edge/webview2/concepts/process-related-events.md :white_check_mark:Succeeded View
microsoft-edge/webview2/concepts/working-with-local-content.md :white_check_mark:Succeeded View
microsoft-edge/webview2/get-started/get-started.md :white_check_mark:Succeeded View
microsoft-edge/webview2/get-started/win32.md :white_check_mark:Succeeded View
microsoft-edge/webview2/get-started/winui.md :white_check_mark:Succeeded View
microsoft-edge/webview2/get-started/winui2.md :white_check_mark:Succeeded View
microsoft-edge/webview2/get-started/wpf.md :white_check_mark:Succeeded View
microsoft-edge/webview2/how-to/communicate-btwn-web-native.md :white_check_mark:Succeeded View
microsoft-edge/webview2/how-to/customize-ui.md :white_check_mark:Succeeded View
microsoft-edge/webview2/index.md :white_check_mark:Succeeded View
microsoft-edge/webview2/samples/deployment-samples.md :white_check_mark:Succeeded View
microsoft-edge/webview2/samples/webview2apissample.md :white_check_mark:Succeeded View

For more details, please refer to the build report.

For any questions, please:

Learn Build status updates of commit f0890c4:

:white_check_mark: Validation status: passed

File Status Preview URL Details
microsoft-edge/developer/index.yml :white_check_mark:Succeeded View
microsoft-edge/index.yml :white_check_mark:Succeeded View
microsoft-edge/toc.yml :white_check_mark:Succeeded View
microsoft-edge/webview2/code-samples-links.md :white_check_mark:Succeeded View
microsoft-edge/webview2/concepts/frames.md :white_check_mark:Succeeded View
microsoft-edge/webview2/concepts/navigation-events.md :white_check_mark:Succeeded View
microsoft-edge/webview2/concepts/overview-features-apis.md :white_check_mark:Succeeded View
microsoft-edge/webview2/concepts/process-related-events.md :white_check_mark:Succeeded View
microsoft-edge/webview2/concepts/working-with-local-content.md :white_check_mark:Succeeded View
microsoft-edge/webview2/get-started/get-started.md :white_check_mark:Succeeded View
microsoft-edge/webview2/get-started/win32.md :white_check_mark:Succeeded View
microsoft-edge/webview2/get-started/winui.md :white_check_mark:Succeeded View
microsoft-edge/webview2/get-started/winui2.md :white_check_mark:Succeeded View
microsoft-edge/webview2/get-started/wpf.md :white_check_mark:Succeeded View
microsoft-edge/webview2/how-to/communicate-btwn-web-native.md :white_check_mark:Succeeded View
microsoft-edge/webview2/how-to/customize-ui.md :white_check_mark:Succeeded View
microsoft-edge/webview2/index.md :white_check_mark:Succeeded View
microsoft-edge/webview2/samples/deployment-samples.md :white_check_mark:Succeeded View
microsoft-edge/webview2/samples/webview2apissample.md :white_check_mark:Succeeded View

For more details, please refer to the build report.

For any questions, please: