Post Archive
› December 5, 2004
Remote control CSS revisited - caving in to peer pressure
It seems my quick and dirty remote control example was not well received. In fact, the best comment I have seen so far was "a sad fruit list control panel with four buttons".
So, how about a remote control device with multiple rows of buttons?
Do I like the final solution? Not really. There are many ways a remote control list could be built. This particular example uses absolute positioning, but it could have just as easily been done using other positioning methods.
Does it showcase any groundbreaking new CSS technique? Definitely not
Would I ever use something like this on as real site? Probably not. Ask me if I get a client obsessed with TV remote controls.
So why bother? My concern was that some developers may decide that Flash is the only option simply because they were not aware of the flexibility of CSS. The reality is that CSS is as flexible as we want it to be.
Bottom line? The final choice of whether to use flash or CSS comes down to the developer, the client, the site and most importantly, the needs of the target audiences for that site.
Comments
1. December 5, 2004 11:35 PM
2. December 6, 2004 02:15 AM
Russ Weakley Posted…
Completely agree, Jeff. Funnily enough, this discussion is going on right now over at The Man In Blue
3. December 6, 2004 06:53 AM
Christoph Wagner Posted…
WOW! Definetly nice!
And by the way: I don't like Flash because it's Flash and in my eyes only good for funny games and pages like xeofreestyle.com
4. December 6, 2004 09:38 AM
Jay Jones Posted…
Over at a site I developed for an 'eliete' golf course in Michigan, I used CSS purely on the course maps... originally, the idea was to go with Flash, but with the desire to make the site as accessible as possible, I chose the route of xhtml/css imagemap rollovers, and I have to say that afterwards, I fell even more in love with my craft (coding web pages).
The rollovers are done using a stacked image full of "sprites" and CSS.
While this route is clean, light, cross-browser/platform, accessible, etc... it still can only compete with Flash on a minimal level. It offers no intelligence, no variables, and it's interactivity is limited to simple image changes. It does, however, serve as a very good solution to those who wish not to use Flash for simple image maps/rollovers.
5. December 6, 2004 12:17 PM
Richard Rutter Posted…
Russ - well worth the effort of your second version - it demonstrates the point much better than your first. I'd got around to scanning in a real remote control myself, intending to demonstrate how a number of lists could be combined with CSS to build up a complex remote. You've saved me the effort :-) Nice job.
6. December 6, 2004 04:17 PM
Darrel Posted…
if we’d get over the technology and focus on design
Though, in all fairness, the technology is very much a part of the design. But I agree with the sentiment.
7. December 6, 2004 05:11 PM
Ben Ward Posted…
Picking up on your comment about Flash and CSS devs 'having a lot to learn from each other' - at work we're currently doing R&D into making our company's website accessible and (to put it bluntly) make-it-so-that-it-doesn't-suck.
One of the interesting conclusions we've come to is that Flash, while so often berated for being inaccessible (in terms of screen readers, etc.) actually offers massive advantages for partially sighted users as you gain a smoothly-scalable image format.
Like many companies, our marketing monkeys like to use special fonts for page headings. In the current design this requires numerous fixed sized images. CSS gives the fantastic ability to size using ems, but scaling images like this is often grotesque and pixelated. Flash, on the other hand, will scale the headings with the bespoke font in tandem with HTML content text and em sized boxes
Naturally you need to provide proper alternate text content within the <object /> tag, covering non-visual display + missing plugins, but I felt it was quite insightful and to a degree suprising that Flash can be used in a genuinely helpful way to complement CSS
It can be argued, quite rightly I expect, that this is a use-case for SVG, but until browser support is sufficient, that's hardly a grand option. For the most daring, you can attempt to use SVG, fallback to Flash, fallback to image, fallback to text. However, we hit a truely nasty bug in IE doing this, whereby nested <object/>s will not be rendered in a fallback fashion as specced, but IE will instead render them all, one underneath the other. It's a good bug is that one... ;-)
8. December 7, 2004 08:03 AM
Phil Baines Posted…
It is good to show people what can be done without flash.
Earlier this year Swansea Council asked me to do something for them to display election results on their website. They assumed I would do it in flash, so I think they were shocked when i did it in CSS/XHTML.
I think it is still available at http://www.swansea.gov.uk/election2004
9. December 7, 2004 02:02 PM
10. December 7, 2004 09:54 PM
11. December 14, 2004 11:25 AM
Elise van Looij Posted…
Doesn't work with Safari.12. December 14, 2004 11:14 PM
Kevin Posted…
It's a great example. I gotta wonder though about the production time for this solution- all that positioning. This could be done in minutes with flash.
Jeff Croft Posted…
Well, I thought the first one was a good demo, but this one absolutley rocks. Sure, it's not particularly useful, but as a demo of what CSS can do, it's pretty nice. There are a lot of elitest Flash developers who have some kind of idea that CSS only allows for flat, boxy designs. Not sure why they think that, but things like this are nice ways to prove otherwise.
To avoid flames, I'll mention that there are also a lot of elitest CSS developers who shun Flash apps simply because they're Flash. There is a lot we could learn from each other, if we'd get over the technology and focus on design -- whatever your prefered tool may be.