Designing UI elements for a mobile browser has taught me a great deal when it comes to creating interactive graphical elements that are to be used in a very small space.  Of course, when I say small space, I mean a small space that has the potential to be different for each handset out there.  Not only are we talking resolution differences, but the screen DPI can change from device to device as well.

So after resizing and re-slicing the Fennec UI for the second time, I quickly realized that this could be a full-time job for a team of designers depending on the list of handsets Fennec will be appearing on.

Hold the phone…  whats this?  Firefox 3.5 enables a new slew of fun CSS3 design styles eh? Rounded edges eh?  Embedded fonts eh?

* gears turning, monkeys typing, hamsters running *

What if we could replace almost all of the graphical UI elements within Fennec with CSS created equivalents?  As a designer, am I comfortable bypassing Photoshop and letting CSS run the pixel rodeo?  After a few initial tests, the answer to both of those questions was a very solid “yes”.  A solid “friggin’ right” if in Cape Breton.

DISCLAIMER: These design tests are done to see how close we can get CSS to replicate rasterized images. The elements you will see here may or may not appear in any Fennec builds.

Toggles and Options

The first challenge was creating “on/off” toggles for the preferences pane within Fennec.  Doing some quick research into what could be done with CSS3 in Firefox 3.5, the ultimate arsenal was discovered: the -moz-border-radius, -moz-border-color, @font-face, and opacity styles.

Glorious CSS3 comes to the mobile UI rescue!

As you can see, the resulting UI is super crisp.  There are zero graphics involved in any of these toggles.  Here is an example of the code for the first “on/off” set:

.toggleONleft {
font-family: ‘DroidSans-Bold’;
text-transform:uppercase;
padding: 0px 8px 0px 12px;
-moz-border-radius-topleft: 0.5em;
-moz-border-radius-bottomleft: 0.5em;
-webkit-border-top-left-radius: 0.5em;
-webkit-border-bottom-left-radius: 0.5em;
border-top: 4px solid #aaa;
border-left: 4px solid #ccc;
border-right: 4px solid #ccc;
border-bottom: 4px solid #ccc;
-moz-border-top-colors:#aaa #bbb #ccc #ddd;
-moz-border-left-colors:#aaa #bbb #ccc #ddd;
-moz-border-bottom-colors:#aaa #bbb #ccc #ddd;
-moz-border-right-colors:#aaa #bbb #ccc #ddd;
background-color: #ddd;
display: inline;
}

.toggleOFFright {
font-family: ‘DroidSans-Bold’;
text-transform:uppercase;
color:#414141;
padding: 0px 12px 0px 8px;
-moz-border-radius-topright: 0.5em;
-moz-border-radius-bottomright: 0.5em;
-webkit-border-top-right-radius: 0.5em;
-webkit-border-bottom-right-radius: 0.5em;
border-top: 4px solid #ccc;
border-left: 4px solid #ccc;
border-right: 4px solid #ccc;
border-bottom: 4px solid #aaa;
-moz-border-top-colors:#aaa #fff #fff #fff;
-moz-border-right-colors:#aaa #dedede #efefef #fafafa;
-moz-border-left-colors:#aaa #dedede #efefef #fafafa;
-moz-border-bottom-colors:#aaa #dedede #efefef #fafafa;
background-color: #fff;
display: inline;
}

Dark Toggles

The dark toggles really give off a 3D effect

Dark toggles were very simple to create now that the above CSS was already written.  It was just a matter of setting the fill colors, border radius, and gradient border colors.  Resizing these for different resolutions takes minutes of hex color and margin/padding tweaks!  That’s it.

Buttons

The only graphical element of the buttons is now the center glyph!

Next was the challenge of seeing how close we could get to matching the mockups I created a while back.  Turns out, pretty close indeed.  Having to use an image for only the glyph in the middle makes button creation much, much easier.

.button {
padding: 8px 4px;
font-family: ‘DroidSans-Bold’;
color:#fff;
width: 24px;
-moz-border-radius: 0.5em;
-webkit-border-radius: 0.5em;
border-top: 4px solid #ccc;
border-left: 4px solid #ccc;
border-right: 4px solid #ccc;
border-bottom: 4px solid #aaa;
-moz-border-top-colors:#3b3b3b #6d6d6d #535353 #494949;
-moz-border-right-colors:#2d2d2d #484848 #484848 #414141;
-moz-border-left-colors:#2d2d2d #484848 #484848 #414141;
-moz-border-bottom-colors:#111111 #484848 #484848 #414141;
background: #414141 url(‘buttonBg.png’) repeat-x top center;
display: inline;
}

.buttonDisabled {
padding: 8px 4px;
font-family: ‘DroidSans-Bold’;
color:#999;
width: 24px;
-moz-border-radius: 0.5em;
-webkit-border-radius: 0.5em;
border-top: 4px solid #ccc;
border-left: 4px solid #ccc;
border-right: 4px solid #ccc;
border-bottom: 4px solid #aaa;
-moz-border-top-colors:#3b3b3b #6d6d6d #535353 #494949;
-moz-border-right-colors:#3b3b3b #484848 #484848 #414141;
-moz-border-left-colors:#3b3b3b #484848 #484848 #414141;
-moz-border-bottom-colors:#2d2d2d #484848 #484848 #414141;
background: #414141 url(‘buttonBg.png’) repeat-x top center;
display: inline;
}

.buttonPressed {
padding: 4px 0px;
font-family: ‘DroidSans-Bold’;
color:#fff;
width: 24px;
-moz-border-radius: 0.5em;
-webkit-border-radius: 0.5em;
border-top: 8px solid #ccc;
border-left: 8px solid #ccc;
border-right: 8px solid #ccc;
border-bottom: 9px solid #aaa;
-moz-border-top-colors:#323232 #111111 #111111 #1f1f1f #272727 #2a2a2a #2c2c2c #2d2d2d;
-moz-border-right-colors:#323232 #111111 #1f1f1f #272727 #292929 #2a2a2a #2c2c2c #2d2d2d;
-moz-border-left-colors:#323232 #111111 #1f1f1f #272727 #292929 #2a2a2a #2c2c2c #2d2d2d;
-moz-border-bottom-colors:#515151 #111111 #1f1f1f #272727 #292929 #2a2a2a #2c2c2c #2d2d2d;
background-color: #2d2d2d;
display: inline;
}

Address Bar

The focus moving forward will be the address bar.  Copy and pasting code used in the above elements, playing around with padding and border radius, a fairly close representation can be made.  An example of the first pass:

I've started recreating the address bar using only CSS3 and glyphs

Now that I’ve shown you all of these examples (I’ve used images here so everyone can see the results), go check out everything on the demo pages.  For some added fun, zoom in and out within Firefox to see the UI scale!

DISCLAIMER (again): None of the elements on the demo page are interactive as this is just a CSS test for visual design only.

These are all design challenges that Firefox 3.5 has enabled me to solve.  I’m very excited to see what designers can create using all the new CSS3 styles and feel free to examine the screen.css file on the demo page to nab the code previewed here.

Go design happy and give it a whirl, but remember, you need the latest Firefox to join in on the fun!

The initial designs were created using strong glyphs on subtle embedded touch areas as the main control scheme for the theme.  The purpose of the glyphs were to act as easily identifiable symbols that could stand out on a mobile screen through the use of high contrast white on a darker background.  Reaction to the first pass was that the background greys were much too light and they should be revisited to bump the readability of the glyphs.  Additional feedback spoke on the lack of color within the theme, another area that was added to the list of things to investigate.  As the pixel man on the job, I wanted to bring a finer level of pixel detail to the UI, so I threw that on the to-do pile as well.

Lets get started showing where we’ve made it to thus far.  To be clear, the work showcased in this post is all a work-in-progress and may not reflect the UI seen in future Fennec builds.

Button Look n’ Feel

The first thing I wanted to do was take a step back and revisit how the buttons were created.  Instead of beginning in Illustrator, I decided to get the right level of pixel fidelity, I’d work exclusively in Photoshop.  Thanks to the glory of layer styles, the entire look and feel is now set in style sets that can be copied and applied to any UI shape needed.  Quick and painless when you’re dealing with so many resolutions in the mobile world.

The newer style is much more clickable and thanks to the darker background, the glyphs really pop on the almost rubber-like button tops.  Each glyph is softly outlined with a darker stroke to give it that extra bit of pop also.

Now, let’s look at a few more examples.

Bookmarks

With the new style comes the addition of color to some of the revised glyphs. The bookmarks buttons have been updated as shown in the example below:

As you can see, when a page is bookmarked, the star now fills in with a frosted yellow.  The small star within the bookmarks panel button also fills in if the page you are currently on has already been bookmarked.  Subtle colors,  adding a bit of variety but not too overpowering so that it becomes distracting.

Endcaps

Next we visit the endcaps within the location bar.

In the first pass of the Fennec UI, the endcaps were very rounded, similar to the encaps in Firefox on Mac.  While the style is very nice, on mobile you need as many pixels as you can get when it comes to UI, and having extra pixels taken up by flashy unneeded graphics can limit your on-screen real estate, sometimes making things pretty much unreadable.

Realizing this, we decided to test the waters on a few different designs:

The first is basically the same as Fennec Alpha 1, except that the inner edge of the cap is now squared.  The second set also uses the squared interior edge, but also squares up the outer edge a bit more as well.  The third set has rounded edges for both inner and outer, but is not as extreme in its radius as the original caps.

Based on some mockup testing, we’re leaning towards the second set of endcaps, a nice mix of rounded outer edges and flush inner edges, giving us some much needed pixels in return.

Now that we have a set to focus on, lets take a look at how it could be applied.

Awesomebar

The awesomebar was the next visual overhaul we thought we’d have a crack at.  With our newly minted endcaps, I started chipping away at the design to see what could be revealed.  The result is a much cleaner and clearer awesomebar as seen here:

You will be able to swipe the bottom search bar across with your finger.

Sharp contrasts, cleaner graphics, a touch sliding search bar at the bottom, all make for a much better experience.  This look n’ feel starts to show off where we’d like to go with the UI for Fennec throughout the browser – using this high contrast menu system for all the preference/setting/addon panels.  Let us know what you think – we’re pretty happy with where this is going.

Past and Present

So, lets step back and take a look at where we’re coming from, and where we are at the moment:

(note: the above screens do not represent an actual state of the browser in which all toolbars can be accessed at once.)

As you can see, things are starting to get a little crisper, and we’re also introducing glyphs from the bigger brother Firefox (see back and forward buttons) for further consistency.  The “before” image on the left is actually a further revision to the initial UI as you can see the grey is darker than the initial screens.

As always, please give any and all feedback on these work-in-progress designs.  This is an open process and nothing you see here is set in stone.  If you’d like to share thoughts or concerns with us on anything previewed here, please do!  It’s your browser – help us shape it and make it look great!

Awesomebar

• list appears with bookmarked sites marked to the right
• close button in upper right to exit the awesomebar overlay
• search toolbar on the bottom

Dark on light awesomebar

Light on dark awesomebar

Alerts

• left endcap becomes highlighted and glyph appears indicating alert
• once endcap is pressed, arrow points to opened alert information beneath awesomebar

• main browser scoots off to the left and becomes faded as its priority lowers
• browser tools icon becomes pressed and links across to a pressed prefereneces icon
• top area lists the sections within preferences
• sections flow vertically, with toggles on some, other bars open for more options on touch

and a dropdown selector example:

Initial Page Load

This state of the browser would be visible when you are viewing a page and not at the top.

• browser name to the left is visible
• device system icons to the right are visible

Page with Address Bar

This state would be when the page is scrolled to the top.

• system bar elements fade to 50% as they become lower priority
• address bar becomes visible
• bookmarks button becomes visible

Page with Right Side Control Strip

As the user slides the page to the left, the control strip appears on the right.

• address bar remains visible
• control strip houses, in order, “add to bookmarks”, “back”, “forward”, “page tools”, and “browser tools”.
• website area is offset fro the strip with a shadow, making the site look as if it is sitting above the controls.

Page with Left Side Tab Bar

As the user slides the page to the right, the tab bar appears on the left.

• page thumbnails appear vertically
• thumbnails have a close button in the upper left
• two buttons appear at the bottom – the first to “open a new tab”, the second to “open a tab from your desktop (utilizing weave)”

To start things off, I thought I’d share an example of the look and feel I’m playing around with at the moment:

As you can see, so far I have been focused on creating the symbols for the buttons within the browser. The challenge is to make “recognition at a glance” icons that will hold up on the various resolutions of any handheld device this browser may be housed on. I’ve descided to go with what I think is a graceful solution – simply creating a “clickable” outer border in which the icon symbol sits – allowing the underlying stylings of whatever area/themed background the button sits on to shine through.

The top row of buttons show some of the various states used within the browser – default, disabled, pressed, active, and a solid fill colored version for alerts (will be used in various colors).

As for the rest of the icons, they are for various functions/sections within the browser and I will be labeling them later on in the process once we nail down what they should be used for.

Feel free to check in from time to time to track my progress!*

*note – Everything you see here is a work in progress.

There was a very enlightening Q&A session in which devs from around the world described how they use mobile in their regions and what is needed in order to advance the platform.