Truing Netlify.com

To start with, for whatever beyond-the-look improvement I need to make, I had to maintain the style in any color mode, maintain the responsiveness to any device width.

If you look closely, you'd see it's definitely not a perfect match.

In some cases, better. Most noticeably are the alignments.

In other cases, subjective. For example, the re-ordering of sections of the document.

I re-ordered because the sub-section for "Start your way" focuses on deployment. Since deployment trails a development workflow, it makes sense for the section focusing on deployment to trail the sections on other stages that comes before deployment.

Beyond 1185px screen width, beyond the mobile navigation menu, three sub-menus of the navigation landmark, when opened, pollute the document with orphaned sections, respectively.

Less than that width, when the menu is optimized for mobile, in an expanded state where all sub-menus are expanded by default, the contextual sub-sections under the sub-menus appear as though they are in one context with those in the main landmark.

Worse, when the user switch to the Reader View, duplicate sections are revealed alongside their original, all of them outside of the main landmark of the page, in an Info landmark!

These headings — some duplicates, some orphaned, some misplaced — are best represented as: titles in labelled landmarks, subheadings of a heading (not headings of a subsection), or, simply, phrases in a paragraph.

The refactored page uses a more intuitive outline.

That section on deployment, along with the sibling sections, make up the children of the Workflow Section. What seems to be the kicker for this parent section became the heading because of its intuitiveness in the outline.

This Workflow Section and the Use-case Section, in turn, became the children of the Root Section whose heading is simply the brand name they are selling. Netlify.

The result of this improved outline, along with content modifications, is a document with good reading flow for users using the Reader View.

This smooth document powered the style of the refactored site.

---

This refactored Reader View, by itself, out-of-the-box, is fully responsive to document attributes:

This flexibility in personalizing the Reader View doesn't stop here.

While style views manage their multi-column layout, making the line height and the line length custom to the style view, the page, which is already responsive to device width, and and supports dark mode, should still be responsive to text size, typeface, and color hue.

The legacy site is less resilient to a changing text size. A change in font size makes the components out of proportions.

On mobile, when the text is significantly smaller, like at 6px, giving room for a lot of surrounding spaces, components do not also reflow as neccessary.

On wider screens, when the text is significantly larger, like at 36px, components of the legacy page overflow the page, making layout semi-responsive. Again, the refactored page is still resilient beyond this point.

Users can, as well, use any typeface installed on their system.

In both light and dark modes, users can theme netlify.com to their choice based on 360 hues and a grayscale.