[4.2.x] Theme optimizations

[ben-eSM]

I really like the new BE theme, especially after todays refinement of the left side menu. Yet there's one thing of which I think should be handled differently. The alert info/counter which appears at the top bar when e.g. the maintenance mode is on, should not load the backend welcome page on click. Instead the messages should be shown in some sort of overlay, so that I don't have to leave the page I'm currently on.

[ben-eSM]

Another improvement I'd suggest is to make the header fixed on mobile, so that I don't have to scroll all the way up if I want to jump in another section via the menu.

[skipman]

I also want to suggest an improvement of usability. Here some recomandations:

Color & Contrast especially for Links: Inverting the background-color for the active Link (as shown in the attached example (color: #A24A00)) would not only be an accessibility issue, but also give a better orientation for the editors. The Colors are WCAGv2 compliant (in combination with font color #fff). Alternative (and tested) colors are #0B296D (blue), #320BC2 (voilett?), #008200 (green) or #753F12 (a darker brown). Perhaps you give the choice in users hand (user options)?

Padding for the Links: A little bit more than 4px (e.g. 0.4rem) would be fine for diabetics (shaking mousehand) and improve mobile usability.

Font: I don't know, which font is choosen actually, but Arial and Verdana are 2 of 9 fonts installed on every PC System and better readable as eg. Roboto (used in the Demo from Dennis Erdmann).

Menu structure: The mostly used menuitems for editors are Site Structure, File Manager, Articles, News, .... Comments. So I would suggest to merge these Menuitems in one block. This would reduce long mousepaths and confusion

[thepixture]

Font: Das Fontrendering der Roboto ist bei den gewählten Schriftgrößen tatsächlich unscharf. Hier sollten Schriftgrößen basierend auf 13px, 15px verwendet werden. Ein Ausweichen auf Systemschriften halte ich daher für unnötig.

Icons für Frontend-Vorschau etc. : Da hier schon der Text entfernt wurde, sollten die Icons entweder etwas größer, oder mit einer prägnanteren Strichstärke gewählt werden. Ansonsten gehen die unter.

Tooltips: Die Anzeige-Verzögerung für Tooltips sollte minestens um 1/3 reduziert werden.

[leofeyer]

You have made a lot of valid points. Here's what I think:

The alert info/counter which appears at the top bar when e.g. the maintenance mode is on, should not load the backend welcome page on click. Instead the messages should be shown in some sort of overlay

Definite +1

make the header fixed on mobile

This might be ok on a 4.7" screen but I'm not sure if it does not take away valuable space on smaller screens. Can't you always jump to the top of the page by tapping the top of the browser?

Inverting the background-color for the active Link

I agree that the active menu item is not highlighted enough at the moment. However, an inverted background does not look very good, especially with the first and last item. Any other ideas?

A little bit more than 4px (e.g. 0.4rem) would be fine for diabetics

I see the point and I have already increased the padding in one of the last commits. However, 0.4rem will make the left column very long if you have some extensions installed.

So I would suggest to merge these Menuitems in one block

The items are grouped logically right now and I would not change this in order to not confuse people.

Das Fontrendering der Roboto ist bei den gewählten Schriftgrößen tatsächlich unscharf

Das konnte ich auf keinem meiner Systeme nachvollziehen. @thepixture Ich nehme an, dass Du Windows benutzt? Welche Version und welchen Browser?

sollten die Icons entweder etwas größer, oder mit einer prägnanteren Strichstärke gewählt werden. Ansonsten gehen die unter.

Die Icons sind bewusst so designed, dass sie sich im Hintergrund halten.

Die Anzeige-Verzögerung für Tooltips sollte minestens um 1/3 reduziert werden.

Das habe ich mal getestet, aber es hätte zur Folge, dass die Tooltips wirklich immer angezeigt werden, selbst wenn ich beispielsweise einen Menüpunkt anklicken will, den ich bereits kenne. Sehr nervig.

Die Verzögerung ist bewusst so gewählt, dass die Tooltips nur dann angezeigt werden, wenn man die Maus etwas länger über ein Element hält. Im normalen Bedienablauf sollen sie jedoch nicht ständig aufpoppen.

[aschempp]

make the header fixed on mobile

I agree with @leofeyer on the issue on small screens. Maybe we can make it appear as soon as you scroll upwards and hide when you scroll down?

[skipman]

I agree that the active menu item is not highlighted enough at the moment. However, an inverted > background does not look very good, especially with the first and last item. Any other ideas?

border-left 5px and reduce the padding-left of the active from 9px to 4px. This will have no effect to the all-over-height of the menu.

I see the point and I have already increased the padding in one of the last commits. However, 0.4rem will make the left column very long if you have some extensions installed.

Sorry, I meant 0.4em (not rem). See the summary (padding 0.4em; border-left, font: Verdana) here:

Das konnte ich auf keinem meiner Systeme nachvollziehen. @thepixture Ich nehme an, dass Du Windows benutzt? Welche Version und welchen Browser?

I use Win7 with Firefox 46.01; IE 11; Opera 37; Chrome 51. Font Roboto is in all browsers fuzzy. (see example screenshot)

I use Win7 with Firefox 46.01; IE 11; Opera 37; Chrome 51. Font Roboto is in all browsers fuzzy. (see example screenshot)

@Skipman And does changing the font size to 13px or 15px help as suggested by @thepixture?

[thepixture]

The fuzzy font rendering affects all browser in windows. I'm using windows 10.

Scaling up the font to 13px and 15px solved it.

[skipman]

Changing the font-size to px is a very bad idea and a regression (See Changelog Version 3.2.13). Please use 0.813rem (for 13px) or 0.938rem (for 15px). My old eyes prefer 0.938rem ;-)

[thepixture]

@Skipman: Thats what i meant "based on 13px and 15px". rem sizes as follows 13px: 0.8125rem and 15px: 0.9375rem ;)

I also prefer 0.9375rem for base size and 0.8125rem for smaller text as field descriptions etc.

[leofeyer]

Is this a known issue on Windows? Changing the font size is not trivial and I'm sure we are not the only ones having this problem with Roboto, are we?

[leofeyer]

There are two issues with this:

1. 13px is too small and 15px is too big.
2. Both 13px and 15px look frayed on Mac.

We should try to find a nice font which works on both Mac and Windows in 14px.

[ben-eSM]

Open Sans usually renders quite well on Mac and Windows and it's a quite puristic and timeless typo.

[thepixture]

And it doesn't matter which font size you're using :)

[skipman]

+1

[aschempp]

Be aware that we also need to use a font that supports a wide range of characters because the backend will be used in a lot of languages.

I like the idea of the left border, but I would choose another color (like our main orange).

[skipman]

@aschempp If it`s not the background-color, the main orange would be fine, but the color of the Font have to be valid (not the "standard-green"). #589B0E (the green of the "eye") would be meet WCAGv2 Rules (Difference in Brightness 136 / Difference in Color 508)

[skipman]

Additional i suggest, to remove the padding-bottom of the class .tl_parent (the headers of the blocks). This will look like that:

[leofeyer]

Open Sans usually renders quite well on Mac and Windows

Yeah, but Roboto just looks a lot better!

[Toflar]

Can the Windows users check this, pls? http://stackoverflow.com/questions/16824540/google-webfonts-not-rendering-correctly

[leofeyer]

And this: http://stackoverflow.com/questions/10953037/google-webfonts-render-choppy-in-chrome-on-windows

[skipman]

To check these hints i have to setup a fresh 4.2 installation, because i have no FTP-access to the Demosite from Dennis. I can make a Setup approximately on thursday evening / night. So please be patient.

[leofeyer]

I have made most adjustments in 873fae6d39fd847da8e1e5fec37b465eaf71e0ab. The system messages popup is still missing.

but the color of the Font have to be valid (not the "standard-green"). #589B0E (the green of the "eye") would be meet WCAGv2 Rules (Difference in Brightness 136 / Difference in Color 508)

@Skipman Can you please also check our blue, which is currently #4b85ba?

[skipman]

Here the results: Background color: #FFFFFF

4B85BA: Difference in Brightness 133 / Difference in Color 371;

Luminosity Contrast Ratio 3,92:1 (erfüllt auf Stufe AA nur für großen Text)

135692: (a shade of 4B85BA) Difference in Brightness 182 / Difference in Color 514;

Luminosity Contrast Ratio 7,57:1 (erfüllt auf Stufe AAA)

14658F: (the "Info-Button-blue) Difference in Brightness 173 / Difference in Color 501;

Luminosity Contrast Ratio 6,39:1 (erfüllt auf Stufe AAA für großen Text; auf Stufe AA für normalen Text)

WCAGv2 Requirements: Difference in Brightness >125 Difference in Color > 500 Luminosity Contrast Ratio(s) Level AA Minimum 4,5:1; Large Print Minimum 3:1 Level AAA Minimum 7:1; Large Print Minimum: 4,5:1

For the background-colors #eaeaea and #f3f3f3 i got no WCAGv2 valid result. Perhaps we can talk via Mumble to find a color meeting all interests? Just send me a PM or give me a call!

[leofeyer]

Changed in d06f8bb7340ec987f4022fe4ea74701b2d754da0.

[leofeyer]

Improved the system messages display in 1455eae6f3311cc37128e9ac820767719a7fcf24.

[ben-eSM]

I like the changes, thank you. However, will there also be any change about the Header on mobile devices? I like the suggestion from @aschempp to just show the header when scrolling up.

[leofeyer]

Implemented in 78882487a407bf0ba81d5486957ba679ca9e14e7.