Perfecting the title and toolbar design ✨
-
Dear Vivaldi,
I am currently learning design, and I have some very minor nitpicks about the design of the title bar and toolbar.
My pixel perfectionist eyes sees these little inconsistencies, and I couldn't stop myself - I had to take to an image editor and make some very minor but important tweaks to make it just slightly cleaner.
For comparison, here's the original:
(EDIT: it's not the default theme, but it is the original design.)
And here it is with my very minor improvements:
You might not even notice these changes at a glance, so here's an explainer:
In a nutshell, I fixed the vertical rhythm between the title and toolbar by making them the same height - this gives the toolbar that little bit of extra space to breathe, so the icons and avatar look just a little bit less cramped.
I also pushed some of the icons and margins by just a few pixels to improve the alignment of various icons.
I expect your original philosophy with the tiny toolbar was to maximize available space for the main content window - but we're talking about a 6px increase, and well... monitors are big now.
Here's a link to a Figma file:
I am currently switching from Chrome to Vivaldi, and as a (learning, aspiring) designer, these little inconsistencies just jump out and annoy me.
I hope you'll consider making my Vivaldi experience 2% better.
-
Said:
You might not even notice these changes at a glance,….
Exactly, I did not perceive them at all.
Said:
My pixel perfectionist eyes sees these little inconsistencies...
Welcome to Vivaldi, which allows your eyes not to suffer more than necessary by changing those little "inconsistencies" with CSS in the UI.
-
@mindplay I would guess the alignment is all conscious and on purpose. You would have to fight the Vivaldi desktop UI designers over this.
-
I have to admit that I suffer from the same eye problem as you, and I have some very major nitpicks about the design of the tab bar, so I have no choice but to change it:
-
I had heard it's possible to customize the UI in Vivaldi, but couldn't find any documentation anywhere.
Are you referring to the experimental CSS modifications feature mentioned here?
https://github.com/ChargeIn/vivaldi-modern-ui-css
I enabled the experiment, but the feature itself (on the Appearance tab) doesn't point to any documentation either - how do you know which CSS selectors to use for what elements?
And if that's Vivaldi's answer to requests like this at the moment, I might instead ask, why isn't this feature built into Themes instead?
Even just a simple "css" string property in the theme file would go a long way.
Themes, as they are, is a rather bland and uninteresting feature - there is not much value in even switching themes in the first place, they are all more or less the same, just some colors and a background.
Adding custom CSS to themes would surely take this to the next level.
-
oh my.
https://gabevilela.vivaldi.net/2020/12/26/guide-customizing-vivaldis-ui-with-css-mods/
I'm going to get NO work done today
-
Well, that wasn't too hard.
https://gist.github.com/mindplay-dk/7e9185df893bf24ca4f87700e0d5afce
This could be a lot cleaner! I'm using some pretty awful CSS to quickly get the overrides I wanted.
They really should add CSS layers, with a "theme" or "user" layer at the bottom, and then add a "css" property to themes. If there was a proper feature and a way to share this work, I would do this "properly", but I don't really want to put more work into a hack like this.
I know the difference is hard to spot for the untrained eye - here's an animated GIF to show the difference. Now you see it, right?
Kinda wish they would hire me to work on this - there are tons more little things I'd like to tweak if I had time.
-
@mindplay First of all, welcome to the Vivaldi forum. And congratulation you have discovered the dark magic of CSS modding...
LOLPersonally, I hate FAT toolbars, because fat toolbars always take away precious display area from the most important part of the browser, the Webpage. Also it will made the already top heavy feel of Vivaldi browser feel even more bloated and depressing to those who have shorter vertical screen estate.
However, I do agreed with you that all icon and text in the first line should be aligned vertically, centered in a straight line within the Tabbar, with the extra space on top included into consideration. The current slightly misalignment of all those elements make the Vivaldi appearance kinda cheap and "unprofessional". LOL
IMHO this can be also achieve by simply reduce the extra padding on the top (above the horizontal tabbar) with CSS. This will be a better solution than what you tried in the CSS tweak, because the CSS you written will only work properly in your specific setup, it might looks weird in a different setup, or situation in similar setup. Usually, the simpler solution will last a lot longer than the complicated solution in most CSS mod.
Lastly, I would like to introduce Vertical tabbar to you. Just go to Settings > Tabs > pick Left or Right to try this new setup!
Sorry, I'm currently hiatus from updating any of my CSS mod until further notice...
-
@mindplay We have a forum category for modding with all the guides and scripts ☛ https://forum.vivaldi.net/category/52/modifications
-
Personally, I hate FAT toolbars, because fat toolbars always take away precious display area from the most important part of the browser, the Webpage. Also it will made the already top heavy feel of Vivaldi browser feel even more bloated and depressing to those who have shorter vertical screen estate.
I used to think just like you - but over time, I changed my mind.
Unless you operate everything by keyboard, the top bars is how you control the browser - it needs to have reasonably sized controls, so they're easy to click, and it needs to have enough space to convey the most essential information and controls without cluttering.
That's how I think now after learning design thinking. There are other concerns you need to balance against, besides just maximizing the available content area. Good design is about balancing concerns.
And it's 2024. No one is stuck on a 16 inch screen on their desktop computer - they haven't even made screens that small in years, and most laptops even have screens larger than that. If it improves the experience, we can afford 6 more pixels of vertical area to eliminate the cramped and cluttered feel of the current toolbar.
On my own browser, I disabled the bottom toolbar as well - I just didn't see anything there that needed to be on screen all the time, so I removed it.
So I actually have more vertical space now than when I started.
Lastly, I would like to introduce Vertical tabbar to you. Just go to Settings > Tabs > pick Left or Right to try this new setup!
I have been trying for years to like that feature in IDEs, where I usually have way more tabs open than I do in the browser, but it just doesn't work for me, and I think I know why: we read things left-to-right. Simple as that.
If tabs or lines are stacked up vertically, your eyes have to zig-zag across the tabs to get an overview. Your eyes can scan left-to-right in a straight line much faster, which is probably why horizontal tabs is practically the default whenever tabs are involved in any design.
The web sites you browse nowadays aren't designed that way either - if it was all about conserving space, the website you're on right now wouldn't look anything like it does. And yes, that's different, because the browser of course can scroll, and so you have an "infinite" amount of vertical space - but the design motivation and reasoning is the same: when you place too many elements too close together, it becomes difficult to see which elements are grouped. Space helps us parse groups as, well, groups.
It's very possible there would be other and better ways to conserve space. If designing the UI for a browser was my job, I would definitely consider having design options for people with smaller laptops as well - it's quite possible you could come up with an even smaller one-row window header with fewer elements on it, or some other type of compact design that provides the essentials without clutter.
But it's all trade offs, all the time - and 6 pixels of vertical space is not the end of the world. Still smaller than both Chrome and Firefox, btw.
-
@dude99
Did you get a new PC?
Vivaldi-World doesn't go around without you... -
Another fertile ground for using your aesthetic skills and learn CSS, is to modify the pages that take up 90% of the screen.
Use the extension Stylus:
https://chromewebstore.google.com/detail/stylus-beta/apmmpaebfobifelkijhaljbmpcgbjbdo
-
@shifte Sorry pal. I'm still stuck with v5.7. LOL
@mindplay said in Perfecting the title and toolbar design
:I used to think just like you - but over time, I changed my mind.
No, it's the screen resolution of newer hardware have increased from 1K to 8K. That's why those toolbars are shrinking in sizes and looks super tiny for those who can afford the latest gadgets, thus your concept do make sense with tiny icons and texts, because we need more spacer to help separate all the tiny buttons, and improving the pointer's accuracy to help user click the correct buttons. Now I think about it, they should stop using fixed pixels for toolbar, instead they should use
clamp()which can adapt to various screen's resolution.
@mindplay said in Perfecting the title and toolbar design
:we can afford 6 more pixels of vertical area to eliminate the cramped and cluttered feel of the current toolbar.
Ahh, yes. 6px from a 8K OLED screen definitely wont make much of a differences. Time have changed, and pixels is getting irrelevant, and it's time for Vivaldi to redesign their browser GUI yet again for the modern hardware!
@mindplay said in Perfecting the title and toolbar design
:It's very possible there would be other and better ways to conserve space. If designing the UI for a browser was my job, I would definitely consider having design options for people with smaller laptops as well - it's quite possible you could come up with an even smaller one-row window header with fewer elements on it, or some other type of compact design that provides the essentials without clutter.
Actually, the fat toolbar problem is only a problem if all toolbars are static GUI in the browser, constantly taking up precious space away from the webpage. I have tested many concepts to minimized the toolbar and maximized the webpage over the years, and my ultimate conclusion is the best GUI for browser is auto-hide toolbars that won't take any space away from the webpage when you don't need 'em, and only reveal the toolbar when you need it, then autohide the toolbar when you are back to the webpage. Here is a functional demo of what it looks like:
With this, fat toolbar will no longer a problem, and it's probably a better design choice than slimmer toolbars!
-
No, it's the screen resolution of newer hardware have increased from 1K to 8K.
That actually has very little to do with it.
Screen size and pixel density are two separate things - a 4K monitor has higher pixel density, but that doesn't mean icons and toolbars are smaller, it just means they get rendered at higher resolution.
Now I think about it, they should stop using fixed pixels for toolbar
You're thinking of device pixels.
The px unit in CSS does not represent physical pixels - that's why the rarely-used dpx unit was introduced, for those extremely rare cases where you do want to define the size of something in physical device pixels.
The px unit in the browser gets scaled up, depending on your operating system settings - of course, you can configure your operating system DPI setting such that browsers will render px units as physical pixels, but on an 8K monitor, your mouse pointer would be like 2 millimeters tall and you would need a microscope to even read the text.
Monitors and operating systems of course do not use those settings by default - and the idea of increasing pixel density is not about cramming more content onto the screen, it's about improving fidelity. To achieve that, everything is scaled up by default. Yes, even px units in a browser.
The changes I made aren't mainly about size, they're about rhythm, grouping and structure.
