CSS3 & Flexible UI: Avoid Recutting UI Graphics for Mobile
Working on the Fennec UI has been an amazing experience.
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!
Comments
Leave a Reply
Thanks for sharing this. Nice.
Nice, producing a button for Fennec took way too long for me last time – I hope that now it will be just a matter of adding a class name. What about performance, do all these CSS3 niceties perform well enough?
This is awesome stuff. It’s very cool to see CSS gaining so much flexibility and power that it can more and more often supplant having to use images to get things done.
The demo pages look nearly the same to me in Firefox 3.0 so I think the majority of the CSS you’re using isn’t necessarily new to version 3.5.
Does anyone else get a page full of little Unicode “unknown character” squares when viewing this blog post with the latest Firefox 3.1 beta? It works fine in Firefox 3.0… This isn’t the first page I’ve seen the problem on…
Gerv
Might be me, but the demo looks almost the same between Firefox 3.0 and 3.5. Only difference i can find is the font. Also, Firefox 3.5 shows the demo exactly like the images look like in 3.0. In 3.5 however the background of the images on the blog here are lighter on Firefox 3.5, making the demo differ from the images again.
The color change may just be the color profile the images were saved in with Photoshop.
Yes, the main change is in fact the font-face. I should note that most of these styles were new to me and not so much new to Firefox.
box-shadow should work even better than multiple borders.
Some examples: http://tests.themasta.com/blogstuff/boxshadowdemo.html
Oh! Thank you for this demo! I’ll be testing this out next!
This will never work for Fennec, it looks awful in MSIE7!
Gerv, maybe you’re defaulting to some wacky encoding? This blog post specifies charset=UTF-8, so it should work. It looks fine in Firefox 3.6a1pre nightly in View > Character Encoding > Unicode (UTF-8), but if I set Japanese I see the boxes.
skierpage:
You do know that fennec uses Gecko 1.9.1 and not IE rendering engine? This will exactly work in Fennec and not MSIE7.
Gerv : I did see that in Firefox 3.6a1pre on linux. But on windows the text shows fine.
Could you use SVG to make the star?
https://developer.mozilla.org/web-tech/2008/09/15/svg-effects-for-html-content/
David C: I’m going to be looking into that soon.
The problem with unicode boxes is due to the heavy use of @font-face not being properly handled for some reason. This should probably be investigated by someone.
If we were in Cape Breton, I’d tell you it was some good. Nice work!
You mention mobile, are you assuming the mobile device you’re targeting runs Firefox 3.x?
Just to clarify are you advocating that other mobile browsers simply show a sans-CSS3 UI — less sugar, but same basic elements? ( that’s how I would do it).
chovy: The article was about UI elements we were designing for Fennec, Mozilla’s mobile browser, currently in 1.0 Beta 3 for Maemo.
The article was to highlight methods of creating UI elements without graphics, which would help mobile development when dealing with so many different resolutions on the vast number of handsets out there. The scaling of the elements would be lossless and no re-cutting would be needed.
Performance can be an issue depending on the handset, but it will be less of an issue moving forward as handset hardware advances.
Nice! Do you know if any other browsers implement border-colors?
Nice! Do you know if any other browsers implement border-colors?
Be careful, because these “border-colors” is completely non-standard.
(although it’s cool !
source : https://developer.mozilla.org/en/CSS/-moz-border-top-colors
JulienW: This work was being done for the UI of Firefox Mobile, so it wasn’t intended for websites. As part of the browser itself, it will always work!
The first image with the on/off switches puzzles me. If I only see these on/off switches, how do I know which one means ‘on’?
Do you have UI testing data on the subject?
nbr: these were initial tests and were evolved over time. Colors were added for on/off states for toggles, box-shadow replaced border-color, etc. Though the CSS versions weren’t used in the final build, check out Firefox for Maemo v1.0 to see the finalized toggles.
Great Article….
Check out http://CSSlite.com for additional information.