Post Archive
› December 1, 2004
Remote control CSS
I received an interesting anonymous comment via Listamatic the other day:
A little sceptical about the list as menu argument. Especially the part where you argue that it doesnt limit the designer. Of course it does. If you have anything different than a 'list'; it simply wont do. Say you have a TV Remote control that you want to make it your navigation bar. Do THAT with CSS. In some cases you just can't go without Flash or Javascript.
As there was no way to answer the person, I wrote a quick article - Remote control CSS - with a rough and ready TV remote control example.
Comments
1. December 1, 2004 05:34 AM
2. December 1, 2004 07:10 AM
Jeroen Mulder Posted…
I am surprised we're having this discussion though. Your article may not really say so directly, but by bringing up the semantic point, it shows that the decision to use list-based navigations is not only influenced by that, but also, indirectly, by factors such as the audience and display environment.
Indeed, there aren't absolute answers. We just need to decide which factors are the most important, so the website will succeed.
I am not entirely aware of the context the comment was made in. I can imagine the author of the comment was thinking of a bit more graphical navigation than your remote control example.
Flash can go where CSS ends, but they overlap. That overlapping part needs to be examined much better, so we won't choose for Flash when CSS can achieve the same result in a much better way. Flash should never be chosen if the audience and goal of the website don't allow or require it.
Anyway, to answer your question. Yes, of course, but only to a certain extent. Most of the websites require an accessible and usable navigation, which we try to make as attractive and interesting as possible within the limits of HTML and CSS. But there are some minor cases where design is more important and \to go beyond those limits, we could use Flash or Javascript.
3. December 1, 2004 10:19 AM
headsfromspace Posted…
Ha Ha Ha! That was a beautiful answer and much more effective than words. Nicely done...
My problem with flash sites is (the) common one. They can be very exciting to look at but they are too slow.
4. December 1, 2004 01:49 PM
5. December 1, 2004 04:54 PM
Aegir Posted…
That TV remote control example is all very well, but my remote controls don't look anything like that. The main TV one has four rows of three buttons, followed by a central mute flanked by tow angled toggle buttons, followed by a horizontal arc of four coloured buttons, followed by a circular four-way toggle with four additional buttons at the cardinal points and a central OK button, followed by two interleaved arcs of four buttons with an intersecting context button between them. The whole lot bulges out in the middle, affecting the spacing and sizing of the buttons.
Of course, why you'd want to replicate such a beast on the web is beyond me - I rely on touch to guide me with the remote, rather than looking at it. You can't do that on the web, even with Flash.
You should have a look at A List Apart: Night of the Image Map. You could replicate a TV remote with those techniques.
6. December 1, 2004 05:25 PM
Darrel Posted…
The problem is when people let visual design trump all their decision making processes while building the site. The nice thing about lists is that they are semantic to begin with. So start there, and build upon that. If it's decided that (for whatever crazy reason) that Flash will be used, so be it, but at least that came later in the design process...not simply a trump card thrown out at the start.
7. December 1, 2004 05:45 PM
bish Posted…
i think he meant more than a list on top of a remote control image. let's see some CSS for a 'real' remote control. something w/ 25 or so buttons that aren't always arranged in a grid pattern but might be on an arc or something... i'd imagine that's what he meant.
8. December 1, 2004 05:47 PM
bish Posted…
for example - http://www.bullnet.co.uk/shops/test/images/DCP00925.jpg
let's make those playback buttons out of CSS.
9. December 2, 2004 10:57 AM
Seth Thomas Rasmussen Posted…
I agree, I expected something more like that in the example, but I think if you've got a head on your shoulders, you can see how a more complex remote could be achieved with CSS. Just think positioning, floats for the 0-9 digits, etc...
I think the point is that even if you stretch your brain real hard and find some arbitrary and usually *visual only* limitation of CSS, it's not really relevant to the fact that a) you can probably overcome that limitation if you try and b) the myriad of other benefits of CSS dwarf such details.
One *should* be using CSS right now. If you can't do what you want with CSS, then maybe you just can't... always get... what you waaaaant... Professional web building is not an artistic journey in the sense that some feel it is. Work with what you have *as well* as what you dream up, but not solely the latter. Frankly, I often think it's a lot more impressive when people stretch the limits of the standards and tools at hand rather than cooking up hacks, workarounds, or just plain sloppy, legacy practices.
10. December 3, 2004 09:58 AM
Rahul Posted…
I firmly believe that absolutely the most stunning styling of a pure unordered list is the final example of Image Slicing's Kiss of Death, by none other than the venerable Mr. Shea.
11. December 3, 2004 01:06 PM
Darrel Posted…
"let’s make those playback buttons out of CSS."
Well, if one is going to eschew good interface principles and attempt to make a physical object such as that a web navigation interface, then perhaps semantics aren't much of a priority either. ;o)
The problem with the original question's author's gripe is that they attempt to find the most inane visual presentation and attempt to turn it into a baby-with-the-bath-water argument. Ie, "If I can't use CSS to turn that unordered list into a rotating, 3D, pulsating, bouncing navigation widget and have it play music at the same time, then semantics and CSS simply aren't practical for me at all."
It's akin those equating gay marriage to being the end of the world type of thing. It makes for heated discussion on crossfire but isn't really germane to the actual issue at hand. ;o)
Gordon Posted…
Best kind of answer anyway. And some brilliant CSS in there. Bravo.