HOME | DD
muckSponge β Metro for Firefox Mockup
by-nc-nd
Published: 2014-06-17 16:30:13 +0000 UTC; Views: 4064; Favourites: 26; Downloads: 78
Redirect to original
Description
This is how I envision the Microsoft Design Language (formerly "Metro") working in the desktop environment. You can't just take Metro as we know it from Windows Phone or Windows 8 fullscreen apps and plonk it into a desktop web browser. Every element of the UI needs to be carefully considered. Metro is all about trimming the fat, getting rid of the extra fluff. It is minimalistic, but that doesn't mean it has to be "small" or compact. It just needs to be right for the user.That's where Metro for Firefox comes in. Every pixel has been slaved over to provide the user with just the right amount of UI for the job. It blends in seamlessly with the desktop (which is decidedly un-Metro), but at the same time it incorporates many aspects of what makes Metro great, like the careful use of whitespace and lack of anything that could cause unwanted distractions. Several design cues were inspired by Windows Phone and adapted to work in a desktop setting. All completely vector for resolution-independent scaling. This is about as pure as themes get
Hopefully I'll be able to make this mockup a reality soon. That's definitely the plan.
Related content
Comments: 37
Any idea if this will come to Firefox 40? Windows 10 Firefox desperately needs this theme!
π: 0 β©: 1
It would be nice, but I've been out of the theming game for a while now 
π: 0 β©: 1
How about NOW? Sorry for spamming you but the time has come.
π: 0 β©: 0
Aw man this is really good looking! I hope one day you can make it real!
π: 0 β©: 0
No news, sorry. Been very busy and Firefox themes are getting harder and harder to make. Hopefully I'll revisit this eventually.
π: 0 β©: 1
It's cool.Β I don't even know how you find time to do it.Β I don't seem to have time to do much of anything myself.
π: 0 β©: 0
I thought I'd have time after I graduated uni but I pretty much fell into a full time traineeship and now my contract has run out I'm in another traineeship.
I really want to get this done but these days decent Firefox themes are so hard to make and so time consuming, especially complete overhauls like this.
π: 0 β©: 1
If I find some time I can help You and make this theme soon if You send me .png files.
π: 0 β©: 1
Wow thats dope to my eyes xD I hope to see your excellent work come true soon
π: 0 β©: 0
Sorry for another post, but I must say this is the most perfect theme I've ever seen! I can't stop looking on it over and over again :-D Pleeeease, make it real, I'm pretty sure, it will be very successful
π: 0 β©: 1
dl.dropboxusercontent.com/u/40β¦
π: 0 β©: 1
Looks nice.Β It's rare to see people wield Metro as a design philosophy effectively, and you've done a nice job.Β
π: 0 β©: 1
Thanks 
π: 0 β©: 0
I really like it but the one criticism I have is that I like an indent on the left side tab start. Maybe it's just because that's how it's been, I don't know. It looks amazing regardless.
π: 0 β©: 1
I experimented with an indent but decided against it. It only really looks different to what you're used to if you have the first tab selected. Really, I think it is a matter of getting used to it. I've been developing Pseutro for over a year now so I'm pretty used to it (and this theme aims to be Pseutro's successor).
π: 0 β©: 0
Looks amazing! Can't wait to see this in action
π: 0 β©: 1
Must have theme! And if it's there an option to move navbar (without tabs) to bottom (like Metro-IE), it will be totally brilliant
π: 0 β©: 1
That poses a bit of a usability issue in that two commonly used controls would be at opposite ends of the screen and thus, significant mouse travel would be needed to operate them. Mozilla also doesn't allow us to have options in our theme (though we could make a companion add-on). That doesn't stop people from being creative with userstyles though. This gets you some of the way there:
#nav-bar
{
position: fixed !important;
bottom: 0;
width: 100% !important;
}
#nav-bar-customization-target
{
width: calc(100% - 44px) !important;
}
That's about as hacky as it comes; probably doesn't work too well in most situations hahah.
π: 0 β©: 1
I look forward to it.Β As always.Β Keep up the good work.
π: 0 β©: 0
Looks nice!
Humorously, my favorite thing about this mockup is that the back/forward buttons are separated from the address bar, something Firefox took away from me
π: 0 β©: 1
The buttons are separated but you won't be able to drag and drop them like in older versions of Firefox (that's just the way the new versions work). There's probably some add-on that removes that restriction though
Like this: addons.mozilla.org/en-US/firefβ¦
π: 0 β©: 0
I'm looking forward to this, still using Pseutro and can't wait for a "light" version
π: 0 β©: 0
The idea is to have one edition but provide a companion add-on that lets users change the colour of most of the UI to just about anything they want. Failing that, there may be a toggle which allows you to set either dark or light and change accent colours.
π: 0 β©: 0
I don't like how all the "non-bare-bones" stuff is hidden under a hamburger menu.
π: 0 β©: 1
Hahahah, the idea is that the user decides what is and isn't bare-bones and hides it in the menu or out of the way completely. Unfortunately I don't have much say in how this is done. There has to be some "Firefox menu button" or the theme would not get reviewed by Mozilla editors and would not be endorsed on their add-ons website. I thought about using a different icon, making the button look like the others, and a range of things in between but this ended up being most familiar to current users and cleanest... even if it does look like a hamburger.
π: 0 β©: 0
