Me and Mr. Z

me and my blue beanieI'll never forget the first time I saw Jeffrey Zeldman. It was in 2002 and I was at Web Design World in Boston. I had never heard of him before, nor had I ever heard of Web Standards. The moment he started talking I could almost sense that I was about to have my paradigm shifted. It was like I was walking around behind someone who kept dropping money out of their pockets, trying to pick up all the bills and change - faster than I could keep up with. The words he spoke had that much value to me. At that time, I was really at a crossroads in my career. I had been doing web design for more than a year, but I was doing it all wrong. I was using FrontPage to create table-based layouts, CSS was still a mystery and I knew nothing of Web Standards. I thought that Flash-based web sites were great, but had no ability or desire to learn the ActionScript to create that "wow" factor in Flash. I was seriously wondering if I should drop web design and go a different direction in my career.

At that conference, I soaked in every word and returned home with a passion and excitement about HTML, CSS and Web Standards. I was convinced that this method of building web sites was something I could not only do, but love doing.

I know Blue Beanie Day is not a tribute to Jeffrey Zeldman. Its a day to recognize the importance and impact of Web Standards on our industry. But for me personally, its a day to tip my hat beanie to Mr. Z and say "thanks". I wouldn't be where I am today without his influence.

The Button Element

I've been doing a lot of thinking about buttons lately. I've even gone so far as to come up with a Button Theory. I know - this is heady stuff, but don't worry, I'll go slow.

First things first

My Button Theory can wait for another day. The purpose of this post is to talk about the <button> element.

If you're the type that likes to use native browser buttons, more power to you. Nothing wrong with that. But if you prefer to create images to replace the native browser buttons, then you may want to consider using <button> instead of the familiar <input> tag in your forms. Last year some time, I read an article by Particletree showing how they had "rediscovred the button element". At the time, I instantly wanted to try it out. Alas, I am just now getting around to it.

Before I get into "why", let me show you what I did and how I did it. I've replaced all my <input> tags with <button> tags in my forms. On the surface, it looks like this:

A similar button replaces my Submit buttons and the Search button (see search field in header above). The implementation was actually much easier than I anticipated. The HTML is academic:

<form>
  <button class="send" type="submit">Send Message</button>
</form>

The CSS is where you can really do some nice things. I chose to keep it simple and apply a background image and a :hover property (without Javascript), which I was able to achieve with only two style rules:

button.send {    background: #D1E9F4 url(img/plane.png) no-repeat 5px 50%;    color: #007CB3;    font-weight: bold;    font-size: 12px;    padding: .7em 10px .7em 40px;    border: 1px solid;    border-color: #F1F8FC #88C3DD #88C3DD #F1F8FC; }

button.send:hover {    border: 1px solid;    border-color: #88C3DD #F1F8FC #F1F8FC #88C3DD;    color: #004767;    text-decoration: none;    cursor: pointer; }

I have tested this in Safari, Firefox (both Mac and PC), Camino and Internet Explorer 6.

So, why did I bother?

I mean, the <input> tag works fine, right? Why change it up? A button is a button you say? Perhaps, but ...

  • I like learning new things about HTML, so I thought it would be fun to try this out.
  • You have a wide array of styling options available, as you can put any code inside the <button> tag, such as <span>, <strong>, <em>, etc. Alex Griffioen shows an example of this flexibility.
  • It allows you to make site-wide changes to your site by updating a couple CSS rules rather than having to modify several image files.
  • From a functional standpoint, it behaves the same way as a traditional <input> tag. For example, you can tab-select to the button to give it focus, then hit the space bar to submit the form.
  • Another reason is that I feel like it helps keep things straight a little more between the CSS I have for form fields and the CSS for buttons, rather than having both of them tied to the <input> tag.

Hopefully this has been somewhat helpful for someone looking for creative inspiration regarding buttons. I also hope that someone does not find some hole in my markup or style that would render me a fraud. Of course, your mileage may vary, but let me know if you have any issues with the <button> element.

CSS Fluency

On Saturday, I had the privilege of speaking to the DFW Adobe Users Group (DFWAUG) about CSS and modern, standards-based web design. After several weeks of mounting anxiety about my first public speaking venture, I nervously delivered a presentation entitled CSS Fluency: Speaking the Language of Cascading Style Sheets. The premise behind CSS Fluency is simple. In the programming world, there’s a common axiom, “If you can describe it, I can program it.” Although not a programming language, the same can be said for CSS. If you can learn to speak the syntax using natural language to describe style rules, then you’ve begun the journey of mastering CSS.

Much to my surprise, the talk was well-received and it seemed that everyone in the room learned something new, particularly me. The members of DFWAUG are a warm, friendly bunch of people, which really helped put me at ease and we ended up having a great conversation about CSS and web design. I’d like to thank everyone at DFWAUG for having me there on Saturday and for being a great audience and asking a lot of relevant and intelligent questions.

You can download a PDF version of the presentation although it may or may not be useful unless you were at the meeting. The example page for demonstrating the CSS techniques is also available.