Homepage Revamp

[simon1066]

I'm no designer but because it's something I enjoy doing I have revamped the Docs home page (and colour coordinated the dev & user headers). The only thing left to do would be higher resolution background image of the ZC logo, with added opacity/transparency (I can't achieve that with css).

Anyway, throwing it out there in the hope that it adds value.

https://6649bc688c65b187704cdd14--precious-strudel-d37b66.netlify.app/

[scottcwilson]

I like this a lot, but can we use a simpler background? Perhaps an orange gradient to pick up the orange in the logo? Please PR. Thank you.

[scottcwilson]

... and please go ahead and drop legacy links. It's time!

[dbltoe]

Good concept.

Taking into consideration that this is not the actual page, there are still problems with all the sub-headings and the search text not meeting contrast, both static and on hover. The current settings (resulting in 4.5:1) are fine for desktop, but not for mobile.

Of course, mobile does not recognize hover, so an answer to desktop is to keep the link color on hover but add the underscore.

With the blue, it would need to go to #1d5c90 either from the start or when the browser detects mobile. The orange would need to be #9b390a. The "Contribute to the Docs ..." current background color seems to be a combo of #403f4c (actually used for "Legacy FAQs ...) and some other color with transparency, resulting in #408179. That needs to get to #21625a somehow.

If we need to continue to emphasize the three links in the footer, they would need to go to #b5d9fb for the color.

I don't know why I haven't used the Siteimprove accessibility checker on the site before, but the following type A errors are inherent in the existing page: Most of the links are set to less than 44 pixels in height, which makes it difficult to click on them on mobile. The footer icons need alt text. There are some empty headings and labels that are incorrect. Line-height for a lot of the items is set to the "coding standard" of 1.2 but needs to be 1.5 for mobile.

[simon1066]

Thanks John & Scott,

I thought I had checked some accessibility (at least to AA), but will double-check with John's suggestions and take into account Scott's comments and then hopefully PR.

Cheers, (just had our first Sunday barbeque in a balmy 20degC - yeah)

[scottcwilson]

Fantastic! Your next assignment (if you choose to accept it) is picking some un-ugly colors for the HTML email.

[dbltoe]

We're at 32 and rising. The thing is, most checkers can't check hover, and most check in desktop mode, so they are only looking for 4.5:1 and only showing it as AAA.

[simon1066]

Taking into consideration that this is not the actual page, there are still problems with all the sub-headings and the search text not meeting contrast, both static and on hover. The current settings (resulting in 4.5:1) are fine for desktop, but not for mobile.

What are the (different) contrast settings required for mobile devices? I'm having difficulty finding any info on that.

I'm using Lighthouse, AxeDevTools & Siteimprove (WebAim for manual checks)

[scottcwilson]

@simon1066 Please check in what you have and we'll tweak from there.

[simon1066]

Ok, thanks, will do.

[dbltoe]

FYI, when the text is presented on mobile, the large text (h tags) requirement changes from 4.5:1 to 7:1. That's why it's best to just start with everything in 7:1.

[scottcwilson]

What about a single palette?

https://deploy-preview-1255--zencartdocs.netlify.app/

[simon1066]

I know it's part of the logo but, for me, the orange is too bright (both my gradient and your colour).

[dbltoe]

Working on a solution now

[scottcwilson]

Thanks John. I am open to a color change.

[dbltoe]

Docs Colors fixing harshness and color contrast

/ background -- linear gradient NO Problems/ .td-overlay--dark { background-image: linear-gradient(#ff9929,#ffd132);/ changed from #E26D1D,#EB9524 - lightened by 40% / }

/ blue for Storeowner and Releases / .row.container .col-lg-4:nth-child(1) { background: #5c9bcf;/ Changed from #3c7baf / border-radius: .5rem 0 0; } .td-box--primary { color: #fff; background-color: #5c9bcf;/ Changed from #3c7baf / }

/ Orange for Developer / .row.container .col-lg-4:nth-child(2) { background: #dc7d25;/ Changed from #ba5b03 / border-radius: .5rem 0 0; }

/ Green for Contribute and Latest News / .row.container .col-lg-4:nth-child(3) { background: #61a199;/ Changed from #418179 / border-radius: 0 0 .5rem .5rem; flex: 0 0 100%; max-width: 100%; padding-top: 1rem; } .td-box--secondary { color: #fff; background-color:#61a199; / Changed from #418179 / }

/ Releases and Footer / section.row:nth-child(4) { background-color: #585764;/ Changed from #403f4c / border-radius: .5rem .5rem 0 0; } .bg-dark { background-color: #585764 !important;/ Changed from #403f4c!important / }

/ Current blue links in the footer / .col-12.col-sm-4.text-center.py-2.order-sm-2 a { color: #ffffff/ Changed from #6aafff / }

/ Recommendation for the Title / h1.display-1.mt-0.mt-md-5.pb-4 { color: #4f4e5b; }

[scottcwilson]

John, would you please PR this so we can look at the preview? Thanks.

[dbltoe]

I’ll have to find the stylesheet and probably be later this evening before I get to it.

[scottcwilson]

ACK I fatfingered this and merged. John, please update your branch and submit a new PR.

[dbltoe]

1257 at your service