CSS Form Styling
Something I’ve noticed coming up a lot lately with new designs is the desire to change the look and feel of forms on a site.
For those of you who don’t spend your days knee deep in HTML, form controls are the fields you type in, the drop down lists, and the buttons that you find on almost any site.
There are a few different issues when it comes to controlling the way these look.
The first hurdle is the fact that every single web browser (IE, Firefox, Safari, etc) has a different way of styling these by default. We currently support 5 different browsers with every page we produce at my day job. In order to get somewhat consistent results in all of these different browsers we end up writing a different set of CSS rules for each browser, this can take a lot of time, and some browsers like Safari won’t allow much styling at all.
For a more in depth look at how different these defaults are 456 Berea Street has some screenshots.
The second issue, which I think is more important, is that people expect these to look consistent from site to site, and are easily thrown off by significant changes. This can lead to usability problems as well as decreasing the effectiveness of the form itself. When a person recognizes a form for what it is, they are more likely to fill it out and press submit. If the design changes too significantly there is a good chance they will miss it entirely.
My overall take on this is, it’s only a good idea (and worth spending the extra development time) to change the way these items look if:
- A. The form is one of the most important elements on the site (and therefore an integral part of the design)
- B. The styling improves the usability of the form by making it easier to fill out and illustrating its function
And here’s another extremely geeky post about this issue if you think I’m just being a wimp
Comments
Post new comment