Linux Theme Refresh
In many ways working on concepts for the Linux theme has probably been more challenging than for the Mac and Windows themes. Probably the most difficult part is the absence of a unified look and feel.
There are many flavors of Linux with various themes. As well as two major desktop environments along with several other minor ones. All with their own unique style. Even though it’s challenging one really great thing about working on a Linux theme is how amazing these environments are looking now.
As I stated in my post about the Mac theme refresh one of the goals has been a greater cross platform visual consistency. This shouldn’t necessarily come at the expensive of a native look however. For 3.0 a lot of fantastic work was done on making Firefox on Linux use native controls and icons. It would be really nice to balance that with picking up some of the same ideas from the Windows and Mac theme.
Refresh for Firefox 3.7
In addition to theme and UI changes already discussed for Firefox 3.7 and 4.0, there are some proposed Linux specific visual changes:
- Consistent Back/Forward Buttons: Use the same back/forward shape as on the other platforms. The back button would use the same texture as the other buttons however it would be round and larger.
- Buttons vs Icons: Switching to a button+glyph style for the toolbar items. This would be instead of the more representational style that is widely used. It also is a deviation from the common system standard of having icons and then a button shape on hover.
- Curvier Tab Shape: Match the tabs to the proposed tabs on Windows and Mac while keeping the native texture and color.
- Removing Toolbar Separators: Goes a ways towards reducing visual complexity as well as external consistency.
Alternative Icon Treatment
Another idea would be to include the back/forward shape but use traditional icons instead of glyphs everywhere else. However this looks a little strange and doesn’t meet the goal of cross platform consistency.
How Would This Look with Various System Themes
As I talked about above there are a wide variety of distinct themes available for Linux. The most ideal approach to this would be to use the native button style, theme specific icons and replace the glyphs based on color scheme.
Some examples of how this could work out:
Refresh for Firefox 4.0
As discussed perviously a goal for 4.0 is to reduce the UI footprint of Firefox. Adding tabs to the top of the UI accomplishes this (along with other things).
Please keep in mind this is all customizable.
For this configuration the menubar would be hidden and Page and Tools menu buttons would be aded to the toolbar. The titlebar would extend down behind the tabs.
Ongoing Discussion and Feedback
If you would like to leave feedback on these designs or just follow along there are few places to do that. You can comment on this blog or visit the Linux Theme Refresh wiki page.
Tags: Experimental Linux Theme
This entry was posted on Monday, October 26th, 2009 at 12:58 pm and is filed under Firefox. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
46 Responses to “Linux Theme Refresh”
|Leave a Reply
[...] http://blog.stephenhorlander.com/2009/10/26/linux-theme-refresh/ a few seconds ago from Gwibber [...]
I’m loving the fact that the Linux theme looks like it’ll finally be getting the keyhole shape. However, would it be possible to make the menubar compatible with gnome-globalmenu2? It works in Mac OS X, it must be possible in Linux.
I don’t like the tabs. They look too cramped. Windows and Mac OS both had better tabs, imho. Also I’m not sure if making all the buttons the same colour is such a good idea.
I agree with you, the alternative icon treatment looks out of place. The other mockups, however, look great! Keep up the awesome work.
[...] http://blog.stephenhorlander.com/2009/10/26/linux-theme-refresh/ a few seconds ago from Gwibber [...]
[...] http://blog.stephenhorlander.com/2009/10/26/linux-theme-refresh/ a few seconds ago from Gwibber [...]
Two pints:
(1) The list of immediately visited pages prior ti the current one belongs between the forward and reverse arrows on the left hand side.
(2) Having the left and right hand buttons unequal in size, just looks plain wrong – just because Microsoft does it in IE does, not make it right; looks naff there as well.
Well, first to say, I was really *happy* when Firefox began to look exactly as all applications I use. I knew, that it’s not easy to imitate gtk-app look-n-feel, and this made me even more happier when I saw how strictly Firefox follows every custom gtk-theme.
And what you suggest now:
* Consistent Back/Forward Buttons:
To say the truth, I don’t care what does Firefox look like at other operating systems. But why does it have to look alien to the OS I use? Yeah, I understand that Linux is not #1 priority platform for Firefox, but UI should serve the goal of integration into desktop enviroment, shouldn’t it? There is no one other app that uses such buttons at Linux. AFAIK, there is even no such control in GTK
* Curvier Tab Shape:
Well, and what if my theme says to use tabs with square corners? This will be the only widget with curved angles. IMHO, not good.
Just look at screenshot, What will these tabs look like after curving?
http://www.ubuntu-pics.de/bild/28652/2009_10_26_t_594×137_shutter_png_PgD42p.png
* Progressbar in the tab:
Maybe this will look pretty, but only with a counted number of themes and configurations. And with narrow tabs it will look terrible, IMO. Currently used pie-chart throbbers are perfect sollution, I guess
Another thing, the ‘home’ icon is where I’d like the ‘new tab’ button to be.
While I remove the home button on my installation, if one exists I feel it should be to the left of the URL bar.
Is it really technically possible to create the keyhole look (in particular, the circle part) in a way that adopts the exact button border style of any given GTK theme, or is this just an “in an ideal world, here’s how we would want it to look” kind of thing? My knowledge of GTK themes is limited, but I believe the shape of the buttons is pretty much hard-wired into the theme engine. To get the circle appearance, I would suspect that you’d have to resort to a custom PNG image, and thus lose the theme’s natural appearance/effects.
Why is menubar hidden by default in Linux for Firefox 4.0? I understand why this action is planned for Windows Vista/7 but I don’t see this trend under Linux. Is any Linux desktop which has menubar hidden by default? Keep good work.
Not a big fan of the oversized Back button on Windows… it was actually quite a relief that it was left out on Linux for FF3. Might I suggest that if a smaller UI footprint is a goal in FF4, you *don’t* introduce this on Linux? On my little netbook screen, FF already eats up too much vertical space, and this looks like it’d grab a little bit more.
Oh, and regarding tabs, I’ve recently started using the Tree Style Tabs extension, which helps greatly in managing large numbers of tabs by nesting them under the tab they were opened from. Probably not usable on a small screen – it gains a little vertical space at the price of a *lot* of horizontal space, but very much worth the trade on a large screen.
[...] http://blog.stephenhorlander.com/2009/10/26/linux-theme-refresh/ a few seconds ago from xmpp [...]
[...] http://blog.stephenhorlander.com/2009/10/26/linux-theme-refresh/ a few seconds ago from Gwibber [...]
[...] http://blog.stephenhorlander.com/2009/10/26/linux-theme-refresh/ a few seconds ago from Gwibber [...]
Man, Firefox 3.5 was about the most deliciously natural, native fitting-in-with-other-application Firefox yet; I was ridiculously pleased the first time I booted it up and saw that it was no longer gratuitously different. I realise that doesn’t offer much scope for branding and identity creation, but as a user I don’t want a browser that sticks out and flashes lights and makes humorous squeaky noises – I use this as a *tool*, I get work done with it *every day*, I want it to be near-to-hand and do nothing out of the ordinary and be extraordinarily powerful, and right now Firefox is all those things (and the 3.7 nightlies are even more so).
I will note that the “alternative icon treatment” does look kind of silly, but it’s the contrast between the keyhole-buttons and the refresh button – the proposed “standard icon treatment” would likely look nearly as silly in the presence of any other GNOME application ever.
For the “refresh for Firefox 4.0″, please be aware that in the standard X11 model, applications have no access to draw on the title-bar, or even figure out what it looks like – there might not even be a title-bar at all.
Good to see someone finally starting on making Firefox look better in Linux; it’s sorely needed especially when I see all the sexiness Windows and Mac get.
I have a mix of the opinions of almost all the commenters above. I think on Linux we’re particularly sensitive about Firefox, because even though Linux may represent a small portion of the Firefox market, Firefox represents the vast majority of browser share on Linux.
So first, let me say that there are always going to be people who go “OMG CHANGE” when something is different, and I think we all know that.
Also, I think that the aesthetics of the new user interface (the one proposed here) are great. However, I think that the most important thing about Linux GUI applications is consistency and responding to the standard user preference controls. If anybody doesn’t like the way the standard GNOME/KDE controls look or work, then the thing to do is to work with GNOME and KDE to adjust them–that’s part of the fundamental collaborative nature of open-source, I believe.
I’d say that from the perspective of a Linux user, I’d rather have Firefox adapt the standard GNOME toolbar than continue to develop custom GUI elements for the browser alone. In Windows, I prefer the custom GUI. But in Linux, I think I’d rather have application consistency (without having to switch to Epiphany, because I still want all the other features of Firefox).
-Max
Well, I’m perfectly happy with how 3.5 looks like. It blends in with my other applications, I feel like I’m using a consistent, homogeneous system, I don’t feel the need to change it.
Both the weird shaped back button and the title bar idea look bad to me, I don’t see how they can correctly fit with the different themes available. Mockups are one thing, real world is another. I would prefer if firefox tried to correctly, fully emulate the way my scrollbars looks for instance (something 3.5 fails to do, even though the situation has improved…)
@Screwtape – good point regarding title bars, although that’s not actually any different from Windows. Applications can’t do much about the standard title bar, but they can draw their own, as Chrome does.
It’s certainly considered anti-social behaviour on X11 though, where desktop the desktop behaviour may be quite different to what the developer had in mind. I’m particularly thinking of things like Ubuntu’s Netbook Remix, which replaces the standard title bar with one drawn into the desktop panel…
haha yes, make it look more like Opera and you can’t go too far wrong… Right now I use a single row at the top – no search box, just URL and important buttons and bars on the Menu bar (using Tinymenu).
Look at Opera’s ‘hide menubar’ button – it’s cool. The only other options would be for vertically slim tabs and an option to shift them to the side (as thumbnails) – as all screens have more width than height.
Wow, this looks pretty cool!
It’s always tricky to create special looking controls, without having them look all alien on certain distros, but I think you’ve done a great job in this case.
I especially like the colored glyphs.
How do you do the rounded buttons? I thought -moz-appearance-button would make -moz-border-radius not work.
[...] really cool Firefox Linux theme refresh by Horlander http://blog.stephenhorlander.com/2009/10/26/linux-theme-refresh/ [...]
For those worried about integration: as far as I can tell, Firefox is in the process of becoming its own platform. i.e. The default install should be treated more like an OS virtual machine than just another app.
Hopefully, you’ll be able to easily switch it back to standard app-like behaviour and appearance. At a guess, distros will do this by default.
Actually, I would love for some distro to do the opposite — be bold and exciting by integrating /their OS/ into the Firefox platform. Sadly, I’m guessing it’ll only happen after Chrome OS…
The cropped titles are nasty, human friendly title text is more important than the url
Please don’t change from the native system theme: any application theme will always look uglier than the user customizations. You can’t compete there. I completely agree with Screwtape, nothing is more delicious than an application that is perfectly integrated in the system.
Hi,
I was wondering what font is the GUI using on these screenshots?
Adding borders to non-hovered toolbar buttons will add visual weight to the chrome.
Is the non-native tab shape really necessary? In this case, I think inconsistency among applications on one computer will be more jarring than inconsistency among Firefoxen on different OSes.
Not Linux-specific: it seems odd in the 4.0 mockup that the “bookmark this page” star is kept separate from the “other bookmarks” drop-down.
Perhaps they could be combined into an old-fashioned two-part drop-down button, where the main bit toggles this page’s bookmarkedness, and the drop-down shows all bookmarks.
Or maybe the drop-down at the end of the awesomebar could include the Bookmarks menu?
Other than that, the UI reorganisation seems logical and progressive. But I don’t think much is gained by changing the visual styling on Linux.
The home and stop buttons are missing, I use these all the time so I assume I’ll be able to add them back via customise and not have to use the view menu? The keyhole thing is an awful fad, I want uniform buttons and hope enabling “small icons” will continue to make it so?
Moving tabs above the URL bar isn’t innovation, and wasn’t a problem crying out to be solved. Given an opportunity to do so, I’ll probably place the tabs back below the URL bar. Likewise removing the menu bar by default is pointless when most advanced users and developers will add it right back. I’m not resistant to change, simply these proposed changes represent (for me) neither improvements in usability or functionality.
[...] http://blog.stephenhorlander.com/2009/10/26/linux-theme-refresh/ a few seconds ago from Gwibber [...]
Totally agree with comments above. I dislike Opera on linux because it looks different than the rest of my apps.
I’m not convinced on the big back button too, still prefer the way it looks now. Other apps like Nautilus or the Image Viewer (eog) use the back and forward buttons as they are on current firefox version.
Please stick to the desktop environment default look, as this is what most GNU/Linux users prefer.
[...] http://blog.stephenhorlander.com/2009/10/26/linux-theme-refresh/ a few seconds ago from choqoK [...]
I agree with many of the comments here that consistency within the system is a lot more important than cross-OS consistency. The default system-specific toolbar buttons were a very good idea when they were introduced. However, I’m really interested in getting rid of the status bar when not needed and the title and menu bars should also go in a future version. In any case, Linux users are (I would guess) more likely to change the default look, so make sure the options are there!
[...] einiger Zeit ging durch die Medien, dass Firefox optisch aufgehübscht wird. Auf chromaticpixel findet ihr nun erste Mockups zu den nächsten Firefox-Versionen unter [...]
[...] es varu uztais?t ar paplašin?jumu, bet izskat?s, ka l?dz ar Firefox 4.0 ar? standarta pak? var?s ieg?t š?du iesp?ju, kur ciln?m jau b?s pieš?irta sava [...]
I have to say that I really like the look of the mockups on the whole. I honestly like the custom buttons, but I’ve got to say the consistency concerns are a big deal. No matter how well Firefox automates theme matching, it will never work with a full range of themes.
Perhaps the solution is to give GTK themes the ability to modify Firefox. Giving these themes the ability to change the glyph colors, icons (either replacing them with default GTK icons or changing the graphic of the Firefox ones), and other custom widgets would be a good start. It may even be possible to feed new theme elements back into GTK, as one of the goals of GTK3 is client-side decorations.
Have you talked with the GTK people about these UI ideas? Maybe they’d be receptive to adding some of these things natively. It’d certainly spare you from a mountain of “omg ui inconsistency” complaints that other browsers seem to have no end of.
FF will die on Linux. who need a 7mb monster daemon who eats more ram than ANY other app (even Openoffice). No wonder that big distros like ubuntu replace it to more reasonable alternatives.
Yeah, I’ma have to agree with everyone who says they’d prefer that Firefox look like a native GTK application. Back when Firefox 3.0 was being worked on, I remember some designers specifically saying that the Linux port wouldn’t get the keyhole shape because so many users preferred their applications to share common themes.
Although I do like the tabs-on-top design in the Firefox 4.0 mockup for functional reasons, despite it being clearly non-native.
Please consider using Qt instead of GTK+. I hate using Firefox on KDE because it looks and behaves different from my KDE apps. Qt fixes these problems and behaves like GTK+ on GNOME.
I like “Tabs-on-Top” with bookmarks bar.
How about moving that app button and the command box to the same line as the tabs, thus reducing wasted space
You can change the icons… but the new progress will continue being horrible. Why do not use ALL the tab as a progress bar?
P L E A S E
I do not like to live in the clone city ! if FF is to look like IE, then IE will become better because it is the original. Enhance the unique personality of FF instead.
and …
FF looking is good enough, focus on the abilities and the every day user’s needs. for example, one of the best enhancements of FF 3.5.x was the redesigned Clear Recent History.
If you like to make the user more happy, give him more abilities, and let the program be more intuitive.
Thanks
Wael
looks very good! is there a mockup theme for Firefox 3.6 like strata40 for windows? would be nice if somebody can give me a link!
nice job!