I hope all you web people took the A List Apart 2007 Web Design Survey. All it can do is get some wonderful statistics for us web nerds. Plus, you get this sweet button.

I did struggled with one question about what my specific job title is, because there has been some recent debate about what exactly it is.

At my job, my position is called webmaster. Recently, we posted a new job, CSS Jedi / Front-End Developer. This is my job title basically. I helped to write the description for this job, and this is what we decided that the actual job entails.

When we thought about webmaster, we thought about a single person who is in charge of making minute updates to a single website. But this is really not what I do. Sure, I make small updates to my team's client sites, but I also slice new designs as well. I am also prototyping stuff all the time and do implementations.

So, I had played around with CSS attribute selectors a little bit before I went to An Event Apart Boston, but I have a much better grasp of them now. I gave a brief overview in my An Event Apart Boston Summary.

Currently, you really have to do some digging to figure out exactly how to use them, but I hope this article explains them all better.

General Information

Basically, attribute selectors allow you to target elements based on their attributes (i.e. alt, href, title, etc.). In the table below, you can see all the different options for attribute selectors.

Ok, so hopefully the general information makes them a little clearer, and I hope the following examples make them very easy to use.

Examples

Below, I will give an example of each attribute selector and how it can be used.

[attr]

Ok, so say maybe you want to style anchors that have the href attribute set to something. This may help differentiate JavaScript anchors.


a { text-decoration: underline; }

a[href] {
 border-bottom: 1px dotted #999;
 text-decoration: none;
}

That will remove the underline, and add a grey bottom border to anything that has the href attribute set.

[attr="val"]

Ok, so maybe you have added a green border to all input elements, but then you don’t want them on radio buttons. So you add the following CSS:


input { border: 1px solid green; }

input[type="radio"] { border: none; }

[attr~="val"]

Use the same example that you want to add a green border to all input elements except for radio buttons, checkboxes, and submit buttons. The CSS you need is:


input { border: 1px solid green; }

input[type~="radio checkbox submit"] { border: none; }

So you get a green border on all input elements except radio buttons, checkboxes, and submit buttons.

[attr*="val"]

Ok, so maybe you want to add a Google favicon to every link to Google. Add the following (pretending you have a Google favicon):


a[href*="google"] {
 background: url(/images/googleIcon.gif) no-repeat 100% 50%;
 padding-right: 25px;
}

So now any link to Google, http://google.com/analytics, http://google.com/sitemaps, etc. will have the Google favicon.

[attr^="val"]


a[href^="http"] {
 background: url(/images/external.gif) no-repeat 100% 50%;
 padding-right: 25px;
}

[attr$="val"]

Ok, now we should display an icon for any file types that we are linking to: pdf, doc, xls.


a[href$=".pdf"], a[href$=".doc"], a[href$=".xls"] {
 background-position: 100% 50%;
 background-repeat: no-repeat;
 padding-right: 19px;
}

a[href$=".pdf"] { background-image: url(/images/pdf.gif); }
a[href$=".doc"] { background-image: url(/images/doc.gif); }
a[href$=".xls"] { background-image: url(/images/xls.gif); }

This is one of the coolest things for me. No more adding extraneous markup in order to add an icon that shows the file type when linking to a file.

That’s it!

I must say, that this works in all browsers, except IE 6 of course. But if you use the Dean Edwards IE7 Script and include the CSS 3 selectors, it will work. I will eventually give a rundown of how to use that script, because I find the documentation a little hard to read. So I hope everyone enjoys attribute selectors as much as I do.

So I am finally getting around to writing up a summary of my time at An Event Apart Boston. I can’t even express how much that I learned. It was amazing to see so many respectable names in the web design/development community all speak. Thank god for my company, Matrix Group International for paying for myself and two co-workers to go to the event. So I thought I would give a quick run-down of all of the events.

Eric Meyer — Secrets of a CSS Jedi

Eric Meyer started off the event with an wonderful talk showing the amazing things that are possible with CSS. The first thing that he mentioned was that in order to get consistency between browser, you should zero out the margins and paddings for every element (except form elements). People have been doing this by using the universal selector (*), but by removing the margins and padddings for every element, you can sometimes get weird results with form elements. I mean conceptually, what should happen when you add more padding to a radio button? Should the space between the circle and outline increase? The other thing is that the universal selector takes more time to process than just having a large group selector.

His next point was that we need to realize that CSS doesn’t care what element is doing what, an element is an element. Which is when he turned a regular HTML table into a bar graph, both vertical and horizontal. Basically, he had a few classes, and he was positioning the cells absolutely. I am still not sure if it would have worked in IE 6, since it is so fussy at times. He said he would post his HTML files at some point, so I would be interested in testing in IE 6. It was just awesome to see the power of CSS, and what we have to look forward to in the future as browsers get more and more powerful.

Jeffrey Zeldman — Writing the User Interface

Jeffrey Zeldman next spoke about writing content for the web. When we look at the highest traffic sites on Alexa, it is not a coincidence that content heavy sites are at the top. Content is what drives traffic. Fresh copy is what counts more than looks. People do not bookmark pages because of the images that are on it (except for photographic sites); they are bookmarking because of the content.

Every instance of copy on a site is a brand opportunity, and copy is often the easiest and cheapest part of a site to fix. Guide copy should be clear, brief, audience appropriate, and brand appropriate. Web users are most often in find mode, and they scan. While monitors get better and better, reading on the screen is much more fatiguing than reading print.

I tell you, Zeldman really speaks well. When he speaks, you just get enthralled in what he is saying. That is why I think working with him would be awesome. It is too bad that the Happy Cog Front End Developer position requires you to be in Philly. I can’t even imagine working with all of those awesome people at Happy Cog.

Jason Santa Maria — How to Redesign Your Way Out of a Paper Bag

Since I am not always the most creative person, I was really interested in hearing this speech. The first thing Jason Santa Maria talked about was looking around you for inspiration.

But the best solution for seeking inspiration is to do research. When Happy Cog was redesigning the Comhaltas website, they went and heard these people play the music, and they hung out with them. This gave them some insight into the music and gave them inspiration to create the design.

We also need to remember that design is iterative. First, you start with grey box comps, which is where you focus on the idea and not minute details. Once satisfied with those, you get into the specifics of each element. When designing, you need to consider things that will not look dated in a year.

Another topic that I have recently read about in Transcending CSS is about grid design. This is not a new technique; it is just something that people do not know how to do. But basically by setting up a grid and designing by it, you keep things in line and can create really clean and nicely defined lines. This way you can plan for the placement of things, even if you aren’t the one updating it. Jason said to embrace the whitespace, which I think is something that is definitely being done in this whole “Web 2.0” thing.

The way to design is left to right, top to bottom, big to small; just like how we read. Make sure there is enough contrast on elements, and things do not have to be over-styled.

On a side note, Jason had a little rant about how " is not the same thing as “ (“) and ' is not the same thing as ’ (’). " and ' are used for feet and inches, while “ and ‘ are used for quotation marks and apostrophes.

Jason’s speech really inspired me, and I have since given up on my sister, who was going to design my site for me. I am just going to go for it.

Steve Krug — The Web Usability Diet

I had heard Steve Krug give a similar speech at another conference, but his points are still so valid. He first begin by pointing out that even the best thought out products have usability flaws. You can put it all the research and time creating the product, but without testing it, it can easily fail.

He made the point that you need to focus on the most serious ones, until they are right. It really does not take too much time and effort to realize that you have the problems; the harder part is fixing them all. The example that he used was to order a subscription of The New Yorker magazine on Magazines.com without using the search function. We found that it was not very easy. Time yourself. Only a handful of people did it in the alloted amount of time (approximately 3 minutes). He has used this example time and time again, and Magazines.com still has not corrected the problem.

While usability testing is relatively easy, sometimes it is hard to convince your clients of the value of it. But honestly, if money is involved, there needs to be testing.

Andrew Kirkpatrick - Beyon Basic Access

I must say, Andrew Kirkpatrick did not have the most enthralling speech, but it was an extremely hard topic to make interesting. He spoke about how accessibility is more than just alt attributes, <label>s, <th>s, or retaining information when JavaScript is disabled. There are many different kinds of disabilities that users of the web have, and we need to embrace all of them, not just a few.

The whole gist of his speech was that we need to provide the name, role, and state of objects that users are interacting with. For instance, if you have a set of tabs, these need to be named so that they make sense. Their role needs to be defined, i.e. Tabs, and the current state of each tab needs to be readily accessible. Providing keyboard access to arrow over between tabs is a huge step forward. Yahoo! and Dojo are making great strides in this domain, and their scripts are readily available.

Dan Cederholm — Interface Design Juggling

Dan Cederholm may have given the best talk of the entire two days. He was witty, and his insight was great. Not to mention he is currently one of my favorite designers.

He first spoke about choosing color. By starting with a small color palette and reusing variations of that set throughout the design, you get a much more cohesive design. A few ways to choose these palettes are:

Even such a simple thing as link color can carry great weight, since links are the most important item of the web, choosing a color that will stand out is important.

In Dan’s definition, great typography is invisible. Since there are not many universal fonts, we just need to learn how to work with what we got. One thing that Dan does beautifully on his site, is by styling his &’s beautifully. It is such a small thing, but just by adding one class, it really adds that extra beauty to the page.

Another interesting point that Dan brought up was the importance of Favicons. These can be used when people link to your site, they are used for bookmarks, and we are seeing them more and more on mobile devices. So essentially it is the first brand opportunity for your site.

Dan also talked about adding small simple details without adding complexity. By adding a simple 3px drop shadow on the bottom of a box, it adds a lot of detail to the box without any extra markup.

Finally, Dan talked about Microformats. I must say I was a little unclear about the benefits at first, but after hearing his speech, I totally understand them. I thought it was all very confusing, but essentially all that you are doing is adding a few universally accepted classes to elements. As Dan said, we are really desiging for the future. Allowing people to do all sort of cool things with these universal classes.

Opening Night Party — Restaurant 33

Definitely the coolest bar I have ever been to. Restaurant 33 had these cool lighting effects all over the place, and it was really entrancing. Not to mention the free food, free drinks, and people were cool too.

Cameron Moll — Good vs. Great Design

Cameron Moll is another wonderful designer, and his talk seemed more conceptual than technical, but it was still very interesting. He first started taking about how there are some things that are just mapped naturally and that can help up determine how something works. Design is essentially communication, but great design yields meaningful communication. Sure there may be some really creative people out there, but if they don’t know how to design for specific audiences, then there talent is wasted. Cameron talked about how seeing things in greyscale can help to see the importance of specific elements in design.

He then went on to talk about how influence is almost cheap, it can be found anywhere and copied anywhere. While it can also be found anywhere, inspiration is a much deeper thing.

Finally, Cameron discussed the difference between redesigning (just updating the look of the site) and realigning (adapting to your users’ changed needs). He finished with the concept of fixing vs. preventing. By putting in more time up front to prevent things, you will be saving time in the long run from fixing.

Ethan Marcotte — Web Standards Stole My Truck

Ethn Marcotte’s talk was a little boring to me, because he didn’t really discuss many new things to me. He did make a few interesting points though.

The most profound statement he made was that building a site with standards is easy, but keeping it standards compliant is hard.

Molly Holzschlag — Building Better Browsers

As many people heard, Molly Holzschlag is going to do some work for Microsoft to whip their browser into shape. While at first I did not think Molly’s speech was going to be very interesting, it turned out to be pretty good.

She first pointed out that browsers are software too, they ALL have bugs. Also, the browser history is not that long, they are relatively young in software age. Since there are so many different interpretations to things, it is easy to have many different approaches to implementation. Don’t worry, I still hate IE. But after hearing her talk, and thinking back to my programming days in college, I have more respect for IE.

Eric Meyer — State of CSS in IE 7 World

Ok everyone, let’s admit it. IE 7 is a huge step forward. It can basically be considered on the same standards-compliant level as Firefox, Safari, and Opera. The browser advanced so much in a standards sense. I am not going to bore you with all of the things that are now possible in IE 7 that weren’t in IE 6, but I will point out one cool thing.

Attribute Selectors

Attribute selectors are awesome. That’s it. Maybe one of the coolest things in CSS. By adding something like a[href$=".pdf"] to your CSS file, you can add a pdf icon to all links to pdfs. By adding something like a[href^="http://], you can target all external links an add an icon for that. That’s the long and short of it. It’s awesome.

Eric also encouraged everyone to make IE 6 more like IE 7 with Dean Edwards’ IE7 scripts. Via JavaScript, you can make IE 6 act must like IE 7. I have played around with it a little, and it is really cool. Use it. Spread the word.

Jeffrey Zeldman — Selling Design

Jeffrey wrapped it up with an interesting discussion on choosing clients. I have read a few articles recently about choosing clients, and this just reinforced the point. You do not need great clients; you need great relationships. You still need to choose your clients carefully and make sure not to choose indecisive clients, or the work will never get done successfully. The way to a good relationship is to involve the decision makers who are high up in the organization. This makes them feel special. Everyone wants and needs to feel special sometimes.

Our job is to sell ideas, not pixels. Solve a problem with your design. Don’t just create a design. When responding to criticism, figure out what they mean by it. Why don’t they like that color? They also need to realize that the site is not about the stakeholders; it is about the users.

That’s It!

I must say; it was awesome. I can’t wait to find some time to actually do my site design. If ever you have the change, go to An Event Apart event. Everything was very well organized, and I learned a lot. Thanks to everyone at An Event Apart, Happy Cog, and the speakers.

So my company is paying for two other webmasters and myself to go to An Event Apart Boston. It is not too often that you can get this many amazing names in the field of web development together in one place.

While I can't wait to go to all of the events, these are the ones I really can't wait to go to. I feel like I have a amazing grasp of the technical side of web development (i.e. CSS, XTHML, etc), but I wish I could become better at the design side. That is what I hope to get better at in the next few months.

So in the quest to abolish the www from my URL, I seemed to have broken Movable Type comments.


RewriteEngine on
RewriteCond %{HTTP_HOST} ^www.trevor-davis.com$ [NC]
RewriteRule ^(.*)$ //trevor-davis.com/$1 [R=301,L]

My co-worker, Adrian, told me today that when he was trying to add a comment to one of my entries, he got an error that said "No entry_id". After much googling, I finally determined it was because of the URL rewriting. I could not really find a solution, but I finally went into the mt-config.cgi file and found out that when I had setup the site, I set it up with www.trevor-davis.com. For some reason, this broke the comments. I changed it to trevor-davis.com, and my quest to abolish the www continues.

This week, there was an A List Apart article called Semantic Flash: Slippery When Wet. When I first started learning about Web Standards, I hated flash. I thought that it was really all just bells and whistles and nothing useful. As time has passed, I have realized that there are some situations where flash can be useful.

First, there was the sIFR: Scalable Inman Flash Replacement. Earlier this week, there was the introduction of swfir: swf Image Replacement. I think this technique seems really cool, and there are definitely situations where I would be interested in using it. Just adding a simple drop shadow and rotating the image a few degrees really add a nice effect to the image.

My only problem is that I think it may be overused. I hope that people don't get so flash-happy that they use it for all images on their site. The same goes for the sIFR technique. I hope that people only utilize these techniques in moderation, and we don't see it all over the place. I have a feeling that we are going to start seeing more and more flash out there, and I really hope that we don't see it used the way it used to be. I still cannot understand how a person can build an all flash site and feel good about themselves. Does it make them happy that people with screen readers would have problems using their site? I guess it must make someone happy, since people are still doing it.

As a side note, I have played around with the swfir script, and it was very very easy to implement.

You really do get better through experience. The best experience is learning from your mistakes. I learned a great deal from one experience in particular.

About 2 months ago, I did some work for the a pretty high profile client. Their regular webmaster was going to be out of town during the busiest time of the year for them, and I had agreed to help them update the site for the next 2 weeks. Over the phone, I had been in contact with a representative, and we had agreed on a set price for the 2 weeks. We had guesstimated that I would do approximately 2 hours of work a night.

I should have gotten something in writing. At least an email to confirm how much we had agreed on would have worked. Nick Gould wrote an excellent article entitled Web Design Contracts: Why Bother. Nick says:

This is exactly what I would have been able to do if I had what we had agreed on in writing.

I would recommend that anyone doing freelance work do the same. Take some time to review Nick's article, and take the time to write these contracts. In the end, it is only going to help you.

To top it all off, the guy offered me some gear to make up for the money that he refused to pay me. No thanks, a t-shirt does not make up for the fact that you cheated me.

On a side note, the site was a disaster to work on. It was poorly organized, still used tables for layout, and did not use includes effectively. It is so sad to see a site that has such high visibility be so poor. Apparently, they just launched a redesign, and guess what? It still uses tables for layout! Hopefully, they will at least utilize stylesheets and includes.

Just for fun, if you don't have it already, download the Web Developer Toolbar. Go to some big name sites and go to Outline » Table Cells. See how many big organizations are still so far behind in their adherence to web standards. When are these companies going to realize that the web is such a valuable tool for their marketing campaign? I guess that is a topic for another conversation.

Are you adding a lot of extra <div> and <span> tags? Do you have way too many classes?

The process that I have found effective, is exactly what I am doing with this site:

Your markup will become much less bloated, and you will have less non-semantic elements. Sure you may have to add a couple of extra <div> tags to add those rounded corners, but its better to add those after you have the structure in place.

While I could easily come up with a design for this site, I really am not as creative as my sister is. That is why I have tasked her with coming up with a logo and a design for my site. Then when it is time for her to build her online portfolio, I will help her to implement the site.

Is there an advantage to using tables for layout? Yeah that bloated code and horribly inaccessible code sure sounds great to me too.

You know what sounds better to me? Some nice lean code with a stylesheet to control the style on the site.

There are two sites that I know of that have paid a lot of money to have their sites redesigned:

It hurts me to look at that. They paid good money for that? How can we educate the companies who built these sites to actually embrace web standards?

The Web Standards Project is a great start. Hopefully they can help to educate others. But they can't do it alone. All web developers who embrace standards need to educate when they have the opportunity. We also need to help fight against Microsoft and their terrible product: Internet Explorer. Sure IE 7 is a huge improvement, but it still stinks. Or how about the fact that Outlook 2007's HTML rendering engine will use Words engine instead of IE's. That sets HTML emails back a good ten years or so.

They are hard to style so that they work with your site design. They are hard to make them accessible. Yeah, yeah we have heard it all. But in reality, they are not that hard to do.

Since every other web developer/designer has their own method, I thought I would share my two cents.

When thinking through all of the HTML elements to find something that makes sense for forms, there are many options.

There are probably others. But I like to use a more uncommon element: a Definition List. It is perfect for the job. You have got the definition term, which is essentially like the label. Then you have got the definition description, which is basically the actual form element.


<form action="#" method="post" name="sendToFriendForm" id="sendToFriendForm">
 <dl class="forms">
  <dt><label for="name">Your Name:</label></dt>
  <dd><input name="name" id="name" type="text" /></dd>

  <dt><label for="senderEmail">Your Email Address: <span class="required">*</span></label></dt>
  <dd><input name="senderEmail" id="senderEmail" type="text" /></dd>

  <dt><label for="recipientEmail">Friend's Email Address: <span class="required">*</span></label></dt>
  <dd><input name="recipientEmail" id="recipientEmail" type="text" /></dd>
  <dd class="help">Use commas to separate multiple email addresses.</dd>

  <dt><label for="sex">Sex</label></dt>
  <dd class="radio"><input name="sex" id="male" type="radio" /> <label for="male">Male</label> <input name="sex" id="female" type="radio" /> <label for="female">Female</label></dd>
  <dt><label for="message">Message:</label></dt>
  <dd><textarea name="message" id="message"></textarea></dd>
 </dl>
 <button type="submit">Submit »</button>
</form>

I have created the page so you can see the output. Even un-styled, this form doesn't even look bad. But lets add some style:


form {
  margin: 0;
  padding: 0;
 }

 dl.forms {
  float: left;
  width: 100%;
 }

 dl.forms dt {
  margin: 0;
  padding: 10px 0 0 0;
  clear: left;
  float: left;
  width: 175px;
 }

 dl.forms label { font-weight: bold; }

 dl.forms dd {
  margin: 0;
  padding: 10px 0 0 0;
 }

 dl.forms dd.help {
  clear: left;
  padding-top: 2px;
  font-size: 90%;
  color: #999;
 }

 dl.forms input, dl.forms textarea { width: 300px; }

 dl.forms dd.radio input { width: auto; }

 dl.forms textarea { height: 150px; }

 .required {
  color: #FF0000;
  font-weight: bold;
 }

I don't think I need to go step by step through that because it is pretty simple styling. I have created the styled page for you to see.

I personally like forms that have the label and the input element on the same line, but that's just me. It is pretty flexible, try resizing the font two times. Still very readable. You could easily do the widths in ems or percentages; I just chose to use pixels since I don't have any parent element containing it.

Should be pretty good in all browsers, especially since we didn't do any crazy CSS. I know it looks good in FF, IE6 and IE7. I believe it works fine in Safari and Opera.

Obviously this isn't the be all and end all to styling forms with CSS. But it is something to start with. So, go out and make it better. But be sure to share what you have created.