search

joomla / joomla-cms

Home of the Joomla! Content Management System
https://www.joomla.org
GNU General Public License v2.0
4.69k stars 3.63k forks source link

Atum admin template element sizes #29381

Open pieter-groeneweg opened 4 years ago

pieter-groeneweg commented 4 years ago

I just checked j!4 Beta now. The Atum admin template apparently seems created for people with 65" screens. On an average office monitor 22" 1920x1080 it becomes terrible. Everything and for sure a lot of form elements drop off the bottom of the screen.

I need it to scale down to 67% to create some acceptable admin back end. Can it be made more fit to the average screen?

brianteeman commented 4 years ago

Please can you post some screenshots. I am working on exactly the same resolution screen and dont see what you are saying

pieter-groeneweg commented 4 years ago

yes of course. This is articles:new image this is menu edit image

Every element size is bigger than any website average. But investigating I see it is coming from the "rem" unit. Which makes it relative to a "browser base font size" unless a size is set for HTML.

Now when I check computed styling on form labels it says font-size is 16px. In 3.9 admin template isis this is 13px. 13px is mostly the base font-size Adding that to HTML element in Atum already makes it more relaxing to the eye and also reduces scrolling mileage. But the input elements around it could be a little smaller too.

Current Atum is realy "screaming" into the eye. At least my eyes. As there may be people that like it at "yelling" size, it may become a configurable setting?

Also the way the configuration pages are layed out, is causing a lot of mileage on scrolling. ie. Article options has a wide variety of settings in 5 blocks. Each block 3 columns. This is causing a lot of scrolling up and down. Everything becomes too big. image

Also in 3.9 you need to scroll down, but at least it is in one column. Creating better overview also. image

not to mention the "new module" tiles image There is no search and it becomes harder and harder in due time (more installed modules) to have a proper overview on what is available.

I can see the advantage when working on a tablet (touch) but working on desktop/laptop it is not convenient to the eyes and scrolling finger..

Also choice between list and grid could be an option?

kernusr commented 4 years ago

When I work in Joomla 4 control panel - I feel like this 1455533848_tony-fishers-largest-rubiks-cube-in-the-world-01

nikosdion commented 4 years ago

@pieter-groeneweg I have opened issue #29411 with a proposed solution for the rem issue. I'd appreciate your feedback there since the solution seems to be a bit more nuanced than just setting a base font size 😞

Regarding the modules page... yeah. My eyes glazed over first time I saw it so I hit the forward slash to initiate the browser's in-page search and typed the partial name of the module I was looking for. This got me thinking. It'd be possible to do a JavaScript powered search which limits the number of items displayed on that page. For example if I type "custom" it will filter out only the cards which contain the word "custom" in the title or description. This is do-able (I have seen my wife implement it) but we'd have to file a new issue about it. If you're interested let me know and I will at least file the issue with the proposed solution.

brianteeman commented 4 years ago

The design of that page was inspired by the work in the alternative proposal. They had a search box. It needs a search box. I had hoped that other people would look at the work in that alternative proposal and look to adapt the good stuff. My mistake at thinking others would do that.

nikosdion commented 4 years ago

@brianteeman Yeah, I have come to the conclusion that the answer to the question "If not me, then who?" is typically "Nobody". So, which one of us should open an issue about it? 😄

brianteeman commented 4 years ago

@nikosdion I am burnt out. Spending 4-5 hours almost evryday working with the bereaved during covid19 takes it out of you.

nikosdion commented 4 years ago

Oh! I'm so sorry! Please do take a break. I will make a comment on the other issue but you don't need to respond to it. I will file a new issue about the search in the modules page.

pieter-groeneweg commented 4 years ago

Thanks @nikosdion, I will check your new created issue and see where I can add my two, three, four cents to it.

infograf768 commented 4 years ago

@nikosdion

Regarding the modules page... yeah. My eyes glazed over first time I saw it so I hit the forward slash to initiate the browser's in-page search and typed the partial name of the module I was looking for. This got me thinking. It'd be possible to do a JavaScript powered search which limits the number of items displayed on that page. For example if I type "custom" it will filter out only the cards which contain the word "custom" in the title or description. This is do-able (I have seen my wife implement it) but we'd have to file a new issue about it. If you're interested let me know and I will at least file the issue with the proposed solution.

Please do. I have opposed to this new display but was not listened to because it is "nice looking"...

nikosdion commented 4 years ago

Feature proposal for the Modules page: #29415

Fix-it proposal for the font size issue: #29411

Thank you in advance for your comments.

pieter-groeneweg commented 4 years ago

@nikosdion As my feedback is more than just the modules I will put it here.

Basic neurobiology for interface design

That is exactly what it is. Though I would refer to it as common human behaviour and intuition.

The modules page sort of looks like a shopping page. But I am not shopping. I am selecting an already available module.

Let's me explain what we as humans are used to.

When we look for a book we don't have yet, we go to a book store. The book store presents all nice and currently new and popular books with the front cover exposed. Nice looking images, book titles in big fonts and luring images to attract our attention. (this is what we find in 3.9 web app install feature, and that is ok as we expect a "shop")

When we look for a book we already own, we go to our book shelves. Our book shelves show all our owned books with the spines of the books facing us. In a way this is just a 90 degrees twisted list of the books we have. And we may have sorted them by alphabet, writer, topic, maybe size and on. (this is what a new modules should look like in 4 and already sort of does in 3.9. Only thing to add is the filter)

This is how our ancient brains are working at its best. "neurobiology" it is called in science. I tend to look at human behaviour and what works best.

People read stories from left to right (or rtl in some) and scavange lists from top to bottom. What we see also needs to fit the angle of view.. Meaning that when a font has a certain size, the length of the line should not exceed a certain width. Ideal is somewhere between 45 and 75 characters (including spaces) per line. Device we work with also determine how we "see and search". Working with a mouse, we tend to search from top to bottom and up again. The move of pointer and click is the triggered action. Working with touch devices humans are not only swiping top to bottom but also left to right. The usual "click" is coming from a thick finger instead of a precise mouse pointer/click.

In the current Atum sizes are too big, elements spread as wide as possible, items shown in grid instead of list views.. It is very hard for an average human to work concentrated for more than 10 minutes. It can do ok on tablets and such, but becomes terrible on desktop... I know the adagium in web design is mobile first. But here the desktop is forgotten.

Another modules related comment. I cannot see why modules are now positioned under "content". I always liked the philosophy of having a site completely configured and setup. Including design and style (modules in positions included). Authors just working content and not having to worry about style and design. (also not able to break the sites appearance). If modules are considered content, then what are the other components?

brianteeman commented 4 years ago

Another modules related comment. I cannot see why modules are now positioned under "content".

Not saying I agree or disagree but this acknowledging the reality that very many people are building the sites with more modules than before and that they are no longer just "static" resources that you set up and forget.

pieter-groeneweg commented 4 years ago

@brianteeman true, when toggling ACL settings it looks like it is only a cosmetic change of location in the navigation. Then it is just a matter of preference and my odd minds logic.

But since modules also have menu assignments I can foresee issues when modules really become a content item.

brianteeman commented 2 years ago

I guess nothing is going to happen here now and this should be closed. Not my call though

brianteeman commented 1 year ago

Is there a reason this is still open?

nikosdion commented 1 year ago

Yeah. It's never been addressed. The solution is dead simple. You can have a simple system plugin which injects a one line CSS rule to set the base size of the HTML element. It can be set, for example, to 0.9rem and the problem is fixed. I have done that for my size because Joomla 4 is completely unusable on a 13" laptop with the default macOS resolution.

chmst commented 1 year ago

Or you use a user.css for atum and define a smaller font-size.

nikosdion commented 1 year ago

@chmst Asking people to create a CSS file so that Joomla's font size IS NOT UNUSABLE BY DEFAULT is the antithesis of user-friendliness.

As a matter of fact, the "simple" solution of creating a system plugin was meant to provoke a response similar to "but creating a plugin to make Joomla usable is not a solution, the core needs to change". Whoosh! It went over your head, like every single usability point made against anyone in the leadership. Thank you for proving my point.

No, Christiane, the solution is neither a system plugin nor a user.css file. The actual solution is a user profile option which allows the user to select the base font size in the backend. The default should be 0.9rem which is used in 99.9% of websites out there. Sure thing, you could also choose "use browser settings" which would cause Joomla to not output anything, thereby using the browser's base font size.

And no, as I have discussed ad nauseam, the solution is also not asking people to change their browser's base font size. As I have said in the past there are two problems with that. One, 99.9% of the sites out there use a base font size of 0.9rem which means that changing my browser's font size makes all other sites teensy tiny. Two, not only this is a very obscure setting but many browsers don't even offer a way to actually change the font size to 14px which is the closest round number to 0.9 times 16px (16px is the universal browser default).

But I forgot. You are leadership. You can't really conceive the notion that there are Joomla users who a. compare it to WordPress, Drupal, WiX, SquareSpace etc and find the default supermassive font size to be sucky compared to literally any other competing CMS and b. that Joomla's target audience is primarily people who expect a point-and-click interface, don't know CSS, don't know about user.css in templates, don't want to be bothered or a combination thereof. You people believe that you are a representative sample of Joomla users and you won't listen to literally anyone telling you otherwise, EVEN WHEN THE VAST MAJORITY TELLS YOU THAT YOU ARE WRONG.

We could have solved this trivial problem in a thousandth of the time wasted discussing it to oblivion. That would require the leadership actually caring for the users. That's all I have to say.

brianteeman commented 1 year ago

The default should be 0.9rem which is used in 99.9% of websites out there

Being a stats geek I went looking for something to back up this claim and this is what I found together with info I bookmarjed some time ago regrding styleguides.

I studied the fonts of the top 1000 websites.image

CMS

wordpress.org 16px drupal.org 13px wix.com 16px

Gov CMS

U.S. Web Design System (USWDS) image

GOV.UK Design System image

Publications office of the EUimage

Operating Systems

Apple Human Interface Guidelines image

Microsoft User Interface Text UX Guide image

Non fact based comment

I wonder if there is something in mac os that is making things look bigger. I know for example on windows that with some displays and some resolutions windows puts an automatic text-size increase that yu have to find and turn off.

Also asking google the question "why is the text on my mac so big" gives more hits than a windows equivalent despite its lower usage. So maybe there really is something about the os or the retina screen. I dont have a modern mac so I'm just guessing. In a few weeks we can put two laptops next to each other.

oh and I personally couldnt care less what the font size is

nikosdion commented 1 year ago

@brianteeman You have only tested on your one computer and one monitor and one operating system. Your sample size is unrepresentative. Further to that, you never did any comparison.

I love facts more than you do. I actually spend a lot of money on hardware to be able to collect MORE facts than all of you do collectively. Here is what I have tested on:

The BenQ and Apple LCD Cinema displays are 1440px native. The EveDevices 27" is a 4K panel also operated at 1.5x (150%) zoom. The MacBook Pro M2, i5 and i7 built-in panels are retina (HiDPI). The Windows 10 device is a 2019 Asus ZenBook with an HD (1080px) display.

The 15" MBP i9 and the Windows 10 and 11 have also been tested with the same browsers and a 24" 4K display in 1.5x (150%) OS zoom level — therefore equivalent to 1440px. On THAT display Joomla 4 is comfortable but literally everything else, including the OS itself, is tiny and unusable. I would have to go for a 1.75x or 2x OS zoom level to use that display size comfortably, in which case Joomla 4 appears ginormous and unusable...

In ALL OF THE ABOVE CONFIGURATIONS the text size in the Joomla 4 backend IS FAR BIGGER than Joomla 3, WordPress and Drupal.

In ALL OF THE ABOVE CONFIGURATIONS the text size in Joomla 3, WordPress and Drupal looks just about the same.

The same findings are true when using an Android phone (Samsung Galaxy A23), iPhone 12 Pro, iPhone 13 Pro, iPhone SE 2020, iPad Pro 11" and iPad Pro 12.9".

Also keep in mind that there are two different things at play. On one hand you have the base font size of the document. On the other hand you have the initial-scale of the document AND the sizing of the text of various elements in rems. So, yes, Brian, you CAN have a base font size of 16px with an initial-scale of 0.9 OR with p {font-size: 0.9rem} which means that the effective font size is 0.916 = 14.4px. In fact, most sites use both for an effective body text font size of 0.90.9*16 = 12.96 pixels.

Here are some screenshots from the same machine. I don't have Drupal currently installed so let's just keep it to Joomla 3, Joomla 4 and WordPress — all fully updated as of yesterday morning.

Joomla 4:

Screenshot 2022-08-09 at 00 58 03

Joomla 3:

Screenshot 2022-08-09 at 00 59 59

WordPress 6:

Screenshot 2022-08-09 at 00 58 11

Using the browser's dev tools we can see that the font size of the top level menu items in WordPress 6 is 14px, in Joomla 3 it is 15px top menu and 14px sidebar menu, Joomla 4 15.2px in the sidebar menu. Now, you might think that's close enough. Oh, my sweet summer child, how blind are you?

Submenu font size is 13px in WordPress 6, 13px in Joomla 3 and 15.2px in Joomla 4 — that's 17% bigger text in Joomla 4!

The main text (Joomla modules and WordPress widgets) font size is 13px in WordPress 6, 13px in Joomla 3 and 16px in Joomla 4 — that's 23% (TWENTY THREE PERCENT!) bigger main body text in Joomla 4 compared to its competition AND its previous versions.

I would say that 23% bigger text with obscene amounts of whitespace make for an unusable backend interface on anything but a 27" monitor. I sure as hell cannot use Joomla 4 on a 13" or even a 15" display. I cannot even comfortably use it on the 24" display if I want the OS interface to be at a size I can actually see and use comfortably.

Let me say this again.

JOOMLA 4 HAS 23% (TWENTY THREE PERCENT) BIGGER MAIN BODY TEXT THAN LITERALLY EVERY OTHER CMS OR EVEN ITS OWN PREVIOUS VERSIONS.

brianteeman commented 1 year ago

You speak of your own eyesight and experience and extrapolate that to the rest of the world without evidence and try to couch that in pseudo science while treating everyone else as stupid. No wonder no one is interested in changing this. Get back to your holiday.

nikosdion commented 1 year ago

So you are saying the browser dev tools lie and don’t reflect the real text size being rendered. So me, many others, and the browsers all don’t know what we’re saying but you do. Your subjective reality trumps objective facts. Okay, got it. You are a jackass.

And this, people, is exactly why Joomla is dead. Its leadership and co-founders are deaf and blind to fact, reason and feedback.

dedors commented 2 months ago

I spent over an hour to find a solution for "everything is too big in backend", with no success. Is there a solution yet? I tried user.css but I might be doing it wrong.