39 Comments
- an0n1m0us, on 10/12/2007, -1/+13the world doesn't really need everything styled
As a web developer I'd much rather have simple consistency with all text boxes, textareas and select boxes, not to mention the very inconsistent file upload control.
Having form fields with too much style really isn't usable. You're asking people who are still getting familiar with the web to overcome variations in styled and non-styled controls whilst asking those who have finally overcome the technophobia of being forced to do fundamental tasks like banking in such a strange environment to do the same.
Allow me reasonable control for positioning, padding, margin, text-align, maybe even color and dont, but the borders of buttons should always have a 3D element if the operating system has that and I'd also argue that submit buttons should have an enforced differentiation such as perhaps the standard wizard back and next arrows like this > - markr, on 10/12/2007, -0/+10I think that it is acceptable that the page degrades properly, albeit losing a little of the style - at least the page is still usable, which is more than you can say for a lot of js pages...
- spyk3d, on 10/12/2007, -0/+9Those badboy.ro examples just don't work well (on Firefox at least):
- you can't make the dropdown list disappear without selecting an item
- you can't click on the actual radio button or checkbox graphic, just the text - latova, on 10/12/2007, -1/+10Cool, but these styles do not work if you have javascript off (noscript extension). However, they are backwards compatible, you just don't get the pretty picture.
- bluesaze, on 10/12/2007, -1/+9I have seen similar attempts before and its good that it backward Compatible. Here it is, it looks much better than the example provided here
http://www.badboy.ro/assets/articles/niceforms/niceforms.html
Link to the article
http://www.badboy.ro/articles/2005-07-23/index.php - evolseven, on 10/12/2007, -0/+7or maybe they are thinking of their audience, and realize that 99% of them are going to have these things enabled.. and the 1%.. well they could care less.. and it isn't worth 50% of the development time fixing things for 1% of the people, accessibility and alt tags and stuff like that is one thing.. but honestly.. I dont check things in netscape navigator 4.7 or ie 4.0, or even 5.5 for that matter, because it is such a small market share, that I honestly dont care..
- ketsugi, on 10/12/2007, -2/+8Leo Laporte and Steve Gibson don't have Javascript turned on!
- inkswamp, on 10/12/2007, -0/+6You're viewing these controls out of context. If you saw them embedded into a page with the proper design and in the right context, most people would realize fairly readily what they are.
- vertino, on 10/12/2007, -0/+6try... http://www.dxdec.com/wod/formStyle/formStyle.zip
- n1cza, on 10/12/2007, -0/+6"not to mention the very inconsistent file upload control."
That's so true. It's useless to make your whole site styled and then have a hideous upload control. - pezholio, on 10/12/2007, -1/+6Yeah, they don't look very radio buttony or check boxy, but the thinking behind it is sound, they degrade nicely as well
- NerdENerd, on 10/12/2007, -1/+6This completely breaks usability as your users will not know what they are. I look at that rating bar and think it has been rated at 0 rather than expecting me to click on a star. Using standard elements means users know what to do with them.
They might look cool from a designers point of view but they make web apps harder for people to use.
Please don't start doing this to your web pages. - kyriakos, on 10/12/2007, -2/+7mostly everyone has javascript on I guess. at least the people that you try to impress with your style probably do have it.
- warbird, on 10/12/2007, -0/+4@spyk3d: not just FF, Opera 9 too
- spyk3d, on 10/12/2007, -2/+5> the world doesn't really need everything styled
You've obviously not encountered our marketing department O_o - inkswamp, on 10/12/2007, -0/+4I like this guy's work and I greatly admire the care that went into it, but I think we've reached the stage where the presence of CSS and Javascript is a safe assumption. At some point we have to shed the old ways and presumptions or risk getting bogged down and the Web is still too young to cast all the rules in stone. Assuming the presence of various technologies is the way it has gone for the last 6 years and it's continuing. I see so much code online nowadays that assumes the presence of Javascript, CSS, Flash and a variety of other things that it's pretty much a necessity now.
I know, purists and accessibility advocates are going to balk, but it's the truth. - jtei, on 10/12/2007, -3/+7Although they look sort of cool, these styled html form elements just don't pass the usability tests...
- inactive, on 10/12/2007, -0/+3@bluesaze
The checkboxes on badboy.ro don't work in Firefox, Opera or IE 7. What's worse is that they don't fall back to standard radio buttons and checkboxes.
Edit: They work fine if you click on the text as opposed to the actual checkbox/radio. Still....
Useless.
At least the examples in the article work. - cmallinson, on 10/12/2007, -0/+2There's only one good way to do this sort of thing. You design your page to work without JS and CSS first. Then you include JS and CSS files to add features for those who choose to support the extra technology. With DOM scripting, you can turn a plain HTML form that works perfectly fine on its own into an stylish masterpiece that uses AJAX to validate and submit data. That way it will work for everybody, with the added bonus of working well on many mobile devices.
- stealthyninja, on 10/12/2007, -0/+2BillyG123: Uhm...the description clearly states that the site uses JavaScript. Unless you were going there to see how gracefully it really degrades, I don't really know what you were expecting to find or see.
I also found your comment rather FUD-tastic. Did you even bother to see what the "error" or complaint/message was that McAfee's Site Advisor had and if so, why not at the very least post it in your comment if you didn't have the time to make a screen shot? - twistymcgee, on 10/12/2007, -0/+2@spyk3d
Actually if you click the down arrow again the drop down will go away but I agree its not that user friendly. However, it likely wouldn't take a whole lot of work to improve them. At least it's a nice starting point. - pezholio, on 10/12/2007, -0/+1Agreed. It would be nice to have some level of control, however small over the radio buttons and checkboxes, the stars are a bridge to far IMO, but it'd be nice to have a plain box or circle (for example) instead of the ugly bevelled ones you get as standard...
- inkswamp, on 10/12/2007, -0/+1But, as evolseven said, that increases development time and most sites don't budget for that and typically, it's beyond the say of the developers. I've dealt with that too despite not agreeing with it myself. It's a little annoying to be directed to cater to the common denominator and to ignore the rest because of budgetary concerns, but it's the reality a lot of developers face. The alternative is not putting a site up at all which, in terms of accessibility, is far worse than requiring a client-side technology. :^)
Also, it many cases, you're inheriting code from previous developers or from a corporate source and much of this is out of your control. It's just the reality. The fact is that people without JS and CSS enabled are SOL nowadays. - stealthyninja, on 10/12/2007, -0/+1RyanWilliams: I'm not a "CSS writer", but you might want to conduct some tests using the very powerful "star-selector":
* { margin: 0; padding: 0; }
Just note that this will remove margin and padding on _all_ elements and if you're still a novice with CSS, I recommend that you only use it for testing purposes for now and not on a live site. - RyanWilliams, on 10/12/2007, -0/+1While we're on the subject, do any CSS writers here know of a pretty good base to get input fields pretty much consistent across all browsers? Although it doesn't really affect my design, I've not yet managed to get the paddings and margins to look the same in all browsers using just the one style sheet; you can guarantee Opera or something will offset it by five pixels from where I wanted it or something. Then Internet Explorer will add a pixel or two below each input field.
Not something that critically bothers me, but it'd be nice to hear of a solution to this if one exists. - twistymcgee, on 10/12/2007, -0/+1I don't see an issue with them. As soon as I saw them I knew what to do with them. Plus this is an example. You can make them look however you want. Make them look a little more like radio buttons or checkboxes. The nice part is you now have an option to make those elements look a little nicer. When you spend the time styling your page and are stuck with bland looking elements it's a little annoying.
- kb207, on 10/12/2007, -1/+1can't download the zip file? any help
- q3ctf4, on 10/12/2007, -1/+1It's worth seeing the google ads on their page. Google does a wonderful job in being relevant with *html styles*.
- bobgb4, on 10/12/2007, -3/+3ha... Security Now!!!
- twistymcgee, on 10/12/2007, -1/+1While I understand where you are coming from and agree with you to a point, it's a shame we have to hold everyone back because the general public is a bit slower at catching on.
- gamma911, on 10/12/2007, -2/+2Yes most people have it on by default and are too clueless to take it off ? Or am I being ingnorant! - ah well Bliss!
- dacheetah, on 10/12/2007, -1/+1Damn, I noticed the problem, found a solution (the same link), foresaw others having the same problem, went to post it, discovered I was 2 hours late... *sigh*
- pezholio, on 10/12/2007, -2/+1Javascript, Flash et al are all well and good, as long as they degrade well and you can access the site without using these technologies. People who put together sites that rely heavily on client-side code or other non-standard technologies aren't thinking of their audience.
- ChristmasPoo, on 10/12/2007, -2/+2@gamma911
Dude I'm right there with you. Have you ever known a smart realtor? I guess if you fail at everything in life you either work at McDonalds or become a realtor.
BTW, no offense to the McDonalds employees out there. - BillyG123, on 10/12/2007, -2/+1WARNING: although I was able to tab thru the checkboxes, it hit the first (previously selected) radio button, but not the other radio buttons; then I looked down at my FF statusbar to check the sites validation status, and noticed that IT TURNED MY MCAFEE SITEADVISOR BUTTON RED!
Thank you NoScript! - QwertyOper8tor, on 10/12/2007, -3/+2So I like it.
It works, and It's backwards compatible. - QwertyOper8tor, on 10/12/2007, -3/+2Thanks!
- vegasbright, on 10/12/2007, -9/+5Coming next:
Bold text, how bold should it be?
followed up by:
The memo Field, is it too big? - spyk3d, on 10/12/2007, -8/+1[deleted]


What is Digg?