Design - Use all the window for a large screen about userstyles.world

[vednoc]

I would prefer leaving source code as-is, so that users are more encouraged to inspect the source before clicking on install button. As for other suggestions, you could make a demo userstyle and we'll have a look at it! Aside from contributing directly, that's probably the easiest and the best way to merge changes suggested by the community.

Also, few days ago I ran a poll on our Discord server and we had 8 users for using more of the available space and 1 against it. We need to determine which maximum width would work best (and add others to USw Tweaks) because of this:

[decembre]

The demo screenshot seems good, where is the problem ?

[Gusted]

where is the problem ?

It's messy now and I don't find it really easy to find for a particular style.

[decembre]

Yeah, but if we can have a sorting function for the explore page, it should be better.

For the usertyle page, i make a quick test for my wide screen:

The code is visible on hover " Source Code":
Many users don't take care of the code.....

Note:
it's a little bit strange this use of selectors which need to escaped as:
.preview + .mt\:l

Why not use class without these ":"

[vednoc]

i make a quick test for my wide screen

It looks perhaps a bit too compact. There are more buttons near "details" for moderators/administrators, as well as "Project homepage" button that isn't set in your userstyle. As for having 10 style cards on a single row (as in my screenshot), it's overwhelming, so we will have to add max-width (i.e. 1280px).

Why not use class without these ":"

It's one of the things I'm working on. Utility classes were used for quick prototyping.

[decembre]

It looks perhaps a bit too compact:

I think it's better for a quick look and less scrolling ...

I style the "br" to reduce space.
And (for a large window) i organize the page to read at once all the principal infos and not scrolling.

If i scroll, (by example to read an huge Note,
i have always the screenshot to compare infos provided by it.

Many users don't take time to read too many infos:

Its my experience, by example, even if i notice that an userstyle is obsolete, they install it...
;-)

Utility classes were used for quick prototyping.

Ok... was funny to play with...

As it's a working progress:
Can you add a specific div for all the block with Author/ licence etc... (actually that's just individual "p""):

Like that, i think i can move it under the screenshot, to let more space for Description / Details / Install

[decembre]

Here another possibility for the Explore / Search:

• Sticky header
• Large card with preview on left and Description on the right...

Should be more readable and less confuse... i hope.

[vednoc]

I think it's better for a quick look and less scrolling

It varies from user to user. I prefer scrolling to find the information (most often I use find functionality if the page is long), and having to scroll in small boxes for Description/Notes would annoy me so much.

Hovering over crucial bits of information doesn't work either. It's very annoying, unless it's used for something like sidebars with links/icons, content that never changes (for the most part).

Can you add a specific div for all the block with Author/ licence etc...

I'll be refactoring all of UI after the next update goes live, so all elements will have proper class names added to them. Some areas won't, like generated Markdown for Description/Notes/Biography.

Should be more readable and less confuse... i hope.

Sticky search bar would be useful. As for cards, the images are too small and there is a lot of wasted space for style names/authors. I wouldn't go below 300px width when it comes to thumbnails.

[decembre]

It varies from user to user.

My taste is if i can have the max infos present at once in one screen, i can explore it quickly and if something keep my eye, i can focus on it.

Actually many site have a design Mobile centred and they don't take care to Desktop / Large Screen.

So all these waste spaces and vertical presentation (and scroll...).

But anyway, ok, that's you the master!

If need, i can make my Userstyle for my taste!
:-)

Hovering over crucial bits of information doesn't work either

That's true, but here that's about Large screen.

I try to adjust the size of these elements to show the max of infos to not have to scroll.
By example:

• Description / Details don't need many place;
  Short height
• Notes can be huge (as mine sometime):
  Need more space but limited.
  If i am interested by the beginning, i scroll inside.
  Etc...

As for cards, the images are too small

Yep, but if i use this CSS , i can enlarge them on hover with an addon (as Image Max URL, Imagus or Thumbnail Zoom Plus):

.card .thumbnail figure::after {
pointer-events: none !important;
}

.card.col figure::before {
pointer-events: none !important;
}

[vednoc]

So all these waste spaces and vertical presentation (and scroll...).

Not necessarily. Content is usually ordered in order of importance, which is also the case with USw.

There is a reason why dashboards try to fit in as much information as possible, meanwhile blogs and text-heavy websites usually have a lot of whitespace: the former is a lot more useful with everything on the screen, and the latter is a lot more readable and less confusing when there is a clear separation between sections.

Don't get me wrong, I don't like how it is currently. This is me challenging design decisions, so that we can find something that would work for most users, not just some of the users.

If need, i can make my Userstyle for my taste!

And that's what I'd love to see. Especially after I add proper selectors to the UI.

I try to adjust the size of these elements to show the max of infos to not have to scroll.

While I agree and appreciate that, it could be hard to predict all use-cases. Sometimes it's near impossible to do that.

i can enlarge them on hover with an addon

Welcome to 1% club that uses one of the mentioned extensions. 😄 That's exactly why small thumbnails would be a great fit for custom userstyles.

[decembre]

I am waiting the next update to play more with your site!
I see that your are selected by Stylus addon to figure in their inline search:
That's a good new....

[decembre]

Another idea:
On Account pages, put the "Welcome" and "Info / Edit settings etc" in top header in Tabs (visible on hover or click ).

Here my test:

.
Like that we have all the place for the Userstyles cards.