Michael Plant info

Today I was asked to add the target attribute to a site we are developing. While compiling my argument.. I suddenly responded.. “It’s not valid code!”

While in many environments this may have caused tension; where I work this was just followed by laughter. Bryce immediately responded using BaseCamp to state: “Mike says it isn’t valid” which, in all fairness, is 100% accurate.

Like many of my colleagues, I always use the XHTML Strict DOCTYPE. There are numerous reasons for declaring a Strict DOCTYPE, but in order to keep my post short I won’t give you reasons why we choose to do so. I certainly am a snob about coding valid website’s from start to finish and will only say that if you are coding templates as a career please be a professional! Loose DOCTPYE’s are for learning or transitioning site’s only!

I wasn’t surprised at our response.. “Whatever!”, knowing that the leader of our pack loves his tabs and new windows. While my personal preference’s aren’t valid when discussing a client’s website, I feel that the control should be left to user, I don’t appreciate someone forcibly opening another tab without my permission, and I wouldn’t want to do that to anyone else. So without mentioning the chance that the user may be confused by us opening a new window and in the process, disabling their ability to use the back button, let’s consider accessibility!

There are many reasons to avoid using the target attribute, some may not be very important for your site please understand that some obscure browsers, screen readers, as well as mobile browsers do not support opening new windows. If you want to know all the reasons, Robert Nyman touches just about all the reasons between his post “How evil is the target attribute?” and the comments that follow. But for the reason of simply staying out of people’s way let’s see if we can find a better way.

I know there are always situations where you are either going to have to add them just by request or because you don’t make the end decision.. so let’s do it without switching DOCTYPE shall we?

$("a[rel*='external']").click(function(){
    this.target = "_blank";
});

That’s it! If you are not familiar with jQuery or the attribute selectors, here’s what we did. I am telling jQuery to find all the anchor tags in the document that have an attribute “rel” containing the value “external”. Assign a click event to fire with the target attribute set to “_blank” which.. you guessed it.. opens the link in a new window or tab! So now all you do is inside your valid strict DOCTYPE you use:

Go read Mike's blog

Suddenly we are still adhering to the Strict DOCTYPE and not losing any face with our fellow coders and yet the client is tickled pink because even though you disagreed with her/his decision you apparently integrated the request.

Got a problem with what I wrote, agree or disagree? Let’s debate it!

Mike XHTML Attributes attributes, DOCTYPE, rel, strict, target, XHTML

“of course PHP is the most gangster language. Why do you think they make you prefix your variables with dollar signs?”

Jim Danko said this: http://twitter.com/jimdanko

Mike Quotes

Just a quick note because I had a hard time hunting down the issue.

While in the process of doing a redesign for one of our clients I was changing the pages over to XHTML Transitional and was having some really weird character reference issues. It seems HTML4 handles the characters correctly but once i moved into the new XHTML declaration the quotes coming in form our SQL server were being converted to… who even knows?

They looked like some sort of mix between AE and Trademark special characters. But what made it even weirder was it was picking and choosing which ones to change and what it changed them too was different for the same Quotes. Now I have often know if the issues with using left quotes and right double quotes, etc. but had never had a problem with doing a string replace on the content prior to writing out the content in HTML.

I tried and Tried…

I racked my brain trying to do a string replace on many different variations of the same characters, I had Database access so I could see and even copy the characters in the table column but I could not get them to write correctly.

My boss and I both agreed it was a character issue and probably just needed set somewhere but either I was never tought this or I completely forgotten how to do this. I tried numerous searches on Google with no solution in sight. Finally today I came across the meta tag I was looking for:

<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

So for future reference I wanted to post this to make sure I have it available as I undoubtedly will run into this again. Since the whole purpose of my blog is to keep these types of issues and solutions close, so I don’t have to go searching through sites to find what I did, there it is; but this doesn’t give me the meaning of life, I was hoping one of you could enlighten me as to the issue and what caused it? While I consider myself and advanced developer I don’t know a lot about browsers or character references. So if you know what my problem was, tell ME!!

Mike Uncategorized

Image you wanted an anchor tag to fill the entire space around an image background as well as the text. Generally I use padding on the anchor tag and Display:Block to get ti to display the way I want. The problem is that in IE6 the display block isn’t enough. It will still only activate the hover over the text portion of the element and not the padding.

Yesterday, I ran across this again and tried giving my anchor tag a width of 100% and it worked. The surprising part is not only did it fill the entire width properly but now the height was working as expected. So the bug I see is in declaring a width for a block level element. If you do not declare a width the anchor remains an inline element as far as hover goes but does take the rest of the properties as expected; padding, height, etc. So apparently this simple fix is to add a width to the anchor as well as the block declaration and it will truly become a block element.

Here is an example in case I lost you:

With no width defined in IE6 the hover will only register when you are directly over the text. As I said the padding still works but the hover doesn’t. Now let’s do it again with a specified width.

If you don’t have IE6 or a way to preview site’s with IE6, I would suggest going over to Microsoft and getting Virtual PC and downloading the IE6 compatibility virtual hard drive. These will allow you to run another Windows XP operating system, complete with IE6 SP2, without leaving your true Windows operating system. I use this to test my CSS for cross browser compatibility before I launch all my site’s.

While you won’t notice a difference with modern browsers there is a huge difference from what IE6 does with the first link.

Mike IE6 Bugs anchor, block, bug, css, IE6

So I have this professed love for accessibility and usability. While I’ll admit I definitely don’t know enough about both I have a desire to get my hands on everything I can. If you haven’t read anything from Interface Designer Luke Wroblewski then head over to his site and check out his online slides from his Web Form Design Best Practices on July 18, 2008.

If you are serious about web form design and accessibility then I have just inadvertently stumbled into what I have dubbed “Real-Time Form Feedback”. So imagine, as you are filling out a questionnaire on a web site; totally uninterested in the fact that they, are requesting more data from you, then you were seeking form them to begin with. But understanding the nature of the beast, I know this is how they formulate their response to my interest, so I obligingly begin answering the questions.

On the second page I stopped and spoke to Amanda for a moment and suddenly realized I was missing the coolest addition to a form that I have seen yet. Not only did I get instant recognition that I was typing in the field, but because my response was technically less than 1; I typed -1, in the hopes that someone, if a real person reading the data, would realize I wanted to say less then one. Instantly, to the right side of the form field it simply requested that I, “Please enter a number between 0 and 100.” I immediately changed my answer to 1 and to my surprise, it responded with real-time feedback stating my response was “1 Year.”

Now that is what made me stop… I turned to Amanda and said now that is cool. I immediately typed in .7 to see if I was “allowed” to input a decimal point, and as I expected, I was given my response, “0.7 Years.”

In a time where we use JavaScript libraries everywhere in order to improve the “WOW” factor of our sites, it seems we often spend the least time with the most important aspects of our work, user interface. Everything you do on the internet is about data and information. Users are looking for it and we are hopefully delivering it easily.

Now think about how easy it would be to just throw a little JavaScript in their and have Real-Time Form Feedback helping your user complete the task of giving his information to you. I was perfectly willing to just hand it over, considering the expectation of great information in return. But imagine if me, of all people, got frustrated with the fact that I had to rewrite my data again due to a very informal error created after I had, in my mind completed the task. This is the same guy, that will close a form the second I see “that” Captcha.

Instead, I was given immediate feedback that not only helped me complete the field properly but gave me the ability to give a more accurate response by realizing I could still say less than 1 by using .7 which is 8.4 months.

The site is called PayScale and it promises to give you a salary comparison for your field. Obviously in return for you giving them your career information.

Ha! Ha! I am underpaid! I think I’ll print that out for the bosses

As suggested by Teresa, let’s debate this. Leave some comments and tell me what you think!

Mike Form Design forms, interface, javascript, validation

This is an adapted version of Eric Meyer’s reset without going overboard. It includes miscellaneous conveniences to give a good start on any website. I use this code snippet to begin all of my main screen css files for any new build. Take a look here is the whole reset.

/* I know.. but heres the reset: way better than an asterisk: */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
body {
font:68% Georgia,serif;
color:#464646;
}
a img {
border:0;
}
/* Standardize styling:
Elements with a vertical margin: */
h1, h2, h3, h4, h5, h6, p, pre,
blockquote, ul, ol, dl, address {
margin:1em 0;
padding: 0;
}

/* Apply left margin:
Only to the few elements that need it: */
li, dd, blockquote {
margin-left: 1em;
}
/* Miscellaneous conveniences: */
form label {
cursor: pointer;
}
fieldset {
border: none;
}
input, select, textarea {
font-size: 100%;
font-family: inherit;
}
em {
font-style:italic;
}
strong {
font-weight:bold;
}
/* Custom styles:
ordered by syntax hierarchy */

Mike CSS Snippets clear, css, reset, snippets