2020 Design update for API site #1458
Comments
Krinkle
added
Type: Meta
* Use the same fonts, colors, header, and syntax highlight styles. * Add the same footer. * Split the method name heading from the method signature. This is in preparation for #1353. * On narrow viewports: - Hide the sidebar on narrow viewports (redundant with header menu). - Let tables scroll horizontally instead of widening the page. Ref #1458
* Use the same fonts, colors, header, and syntax highlight styles. * Add the same footer. * Split the method name heading from the method signature. This is in preparation for #1353. * On narrow viewports: - Hide the sidebar on narrow viewports (redundant with header menu). - Let tables scroll horizontally instead of widening the page. Ref #1458
I've prepared a rough draft at https://github.com/qunitjs/qunit/tree/draft-api-design. This is still a work in progress, but ideas and feedback welcome :)
I'm fairly satisfied with the above draft (11 July), but the one thing that still stands out to me is the overall "too plain white"-ness. In particular, the suble uses of purple are lost in my opinion due to the stark contrast (they might as well be black). The reason I removed most uses of color from the earlier drafts was to create consistency with the new main site. Its less of an issue there given the hero on each page and the overall shorter content and more headings. I tried to some some of the color back through the sidebar and link highlights, which are unique to the API site. Maybe that's good enough for now, but.. I figured I'd experiment with an alternate design that could retain more of the original branding strength. This also in context of last week's jQuery Infra Meeting where the topic of branding was discussed, and how the QUnit work here could be a starting point for other jQuery-family projects looking to adopt a static site. They could use the above draft as starting point, but I feel that one is too plain to still look familiar once the color scheme is changed. Perhaps the below would work better?
(TODO: search field styling) Inspiration: |
* Without the hero banner, the site is quite plain with little brandability. Restore some of the QUnit brand colors with a darker header. This also allows one of the official logo variants to be used, and might also make it a more appealing starting point for other jQuery-family sites looking to switch. * Set width/height on logo image to avoid layout reflow. Previously, the search bar would first appear shifted to the left and then jump into its proper position after the logo file was downloaded. * Fix bug where search results from a simple page without additional headings printed as "Async Control >" with a trailing arrow at the end. This was because commit 9a4953d used `concat(headings)` with the assumption the property always exists, even if just an empty array. This was incorrect. The property is undefined if no headings exist on the target page. It is only an empty array if headings existed but outside the matched content. I don't know if this is intentional on Algolia's part but that how it behaves for me today. Ref qunitjs/qunit#1458.
|
Before and after of the version that launched this week:
Tickets:
The design was created by @trentmwillis with some minor adjustments by myself (see previous comments for iterations). |
* Without the hero banner, the site is quite plain with little brandability. Restore some of the QUnit brand colors with a darker header. This also allows one of the official logo variants to be used, and might also make it a more appealing starting point for other jQuery-family sites looking to switch. * Set width/height on logo image to avoid layout reflow. Previously, the search bar would first appear shifted to the left and then jump into its proper position after the logo file was downloaded. * Fix bug where search results from a simple page without additional headings printed as "Async Control >" with a trailing arrow at the end. This was because commit 9a4953ddc7 used `concat(headings)` with the assumption the property always exists, even if just an empty array. This was incorrect. The property is undefined if no headings exist on the target page. It is only an empty array if headings existed but outside the matched content. I don't know if this is intentional on Algolia's part but that how it behaves for me today. Ref qunitjs/qunit#1458.
Now that the new homepage is live (ref qunitjs/qunitjs.com#151 at https://qunitjs.com), I think we should do a few design touches on the API site (at https://api.qunitjs.com) as well – before we announce the new site publicly as a whole!
/cc @trentmwillis
The text was updated successfully, but these errors were encountered: