Safari seems to send the values of unnameed selects, despite these elements being invalid. So, you may get a query string like text1=test&=selval if your select that contained an option="selval" doesn’t have a name.

Internet Explorer 6 and 7 both mishandle buttons. Internet Explorer 6 sends all buttons with name attributes set, even though it should only send the button if it was clicked. Internet Explorer 7 doesn’t send unclicked buttons, but any time Internet Explorer 6 or 7 sends a button it sends the button’s innerHTML instead of the value.

So, given the deficiencies above, here’s how to compensate. If you’re using PHP, you don’t need to worry about Safari sending nameless selects as PHP seems to ignore them (or at least in parse_str). If you plan to use buttons, never give them names or values. Use radio controls if you have to do conditional actions based on what the user clicks.

I still have some other testing to do, but these findings should help you cover your bases if you’re working with forms.

This has given clout to support Internet Explorer 8 (which is in Release Candidate version now) in addition to versions 6 and 7. Here’s hoping Microsoft forces Internet Explorer 8 upgrades now that version targeting has been implemented.

When doing Ajax, I often use form.getAttribute('action') to get the location to send the request to. This allows me to keep my code more portable. However, in Internet Explorer 7 (or IE7 for short), if there is also a form element with name="action", IE7 returns the input object instead of the value of the attribute as though I typed formname.action or, in long hand, document.forms['formname'].elements['action'].

To my knowledge, there is no work around other than changing the name of the element. So, I’ll be using name="faction" from now on. That’s short for “form action” but “faction” itself is fairly apt given IE’s behavior is different from all other browsers, making it a faction.

Version targeting allows the web developer to pick which version of Internet Explorer’s rendering engine he or she would like to use. This is great for big sites (like banks) because they can forever have a site that works in buggy Internet Explorer 6. No more freak outs when Internet Explorer updates like there were with the update to version 7. The problem wasn’t that they were introducing a proprietary header / meta tag. The problem was that all future versions of Internet Explorer would render like version 7 unless the developer opted in for the newest rendering mode. That’s right. A large majority of people would be forever designing with Internet Explorer 7!

The solution several web celebs they would adopt would be to set the version to edge to always get the latest version in an attempt to tell Microsoft that good developers don’t want to use it. The problem is that developers had to use it to not use it.

Fortunately, Microsoft came to their senses and announced they would keep version targeting but have the default behavior use the latest rendering engine. The claim is that they are trying to support the new Interoperability Principles published in February. No doubt part of the problem was the overwhelming response against defaulting to version 7 from the web standards community. Either way, I’m glad Microsoft decided not to pander to the people causing the problem.

Everyone is happy now that Internet Explorer 8 will really pass Acid 2.

1. Jeffery Zeldman’s Post
2. Lachlan Hunt’s Post
3. Roger Johansson’s Post
4. Hixie’s Blurb
5. Web Standard Project’s Post
6. And it even made it to Slashdot

I am thankful I don’t have to add (in addition to conditional comments) more Microsoft related junk to the head of my boilerplate.

What I wanted to do was put a h2 inside of a div and adjust the margin-top so that it was hanging over the top edge of the div. Imagine a fieldset with a legend.

My code and style sheet were something like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<style type="text/css">
div {
	border:1px dashed black;
	background-image:url(../images/sect_bg.png);
	padding:10px;
	margin-bottom:25px;
	clear:both;
}
h2 {
	display:block;
	width:100%;
	height:53px;
	background-repeat:no-repeat;
	background-position:center center;
	margin-top:-33px !important;
	text-align:center;
	background-image:url(../images/blog_title.png);
}
h2 span {
	position:absolute;
	margin-left:-9999px;
}
</style>
<div>
 <h2><span>Heading</span></h2>
 <p>Some Text</p>
</div>

In IE7, nothing happened. In every other browser, the heading moved up. I started playing with the style sheet, removing parts. It turns out that the height and width were the problem. This applied not only to my image replacement, but a plain-old div-with-a-heading-in-it. The fix for my problem was to create a separate IE7 style sheet with the following:

1
2
3
4
5

h2{
	width:auto;
	height:auto;
	padding-top:53px;
}

I was also informed today that my Internet Explorer 6 Virtual PC image had expired. As promised, Microsoft has released a new Virtual PC image. While it’s nice to be able to check against Internet Explorer 6, this refresh cycle isn’t very convenient.

I once described how I see web design as a left brain plus right brain task. However, a new A List Apart article called Grok Web Standards breaks it down even more, suggesting that a web designer must think like a writer, artist, and engineer. The article inspired me to write the steps I think web designers should take to making a site.

I must say now that I seriously doubt anyone will ever work this way. It relies on the idea that content is given to the designer first. Rarely, if ever, will a client give you content without seeing a design. This is unfortunate because the goal of a website is to communicate a point. Looking pretty is the icing. You won’t be able to bake a cake without letting the client taste the icing first until you have a very good reputation. However, I hope my steps are written well enough that, if need be, designs can be done first.

How To Do Modern Web Design

1. Understand Your Content

   Content is king. Before you touch an editor, read your content and understand it. Once you understand what you want to present, it becomes easier to mark up and will give you ideas on how you want to present the content to the user. Make a mental outline of what is in the content to help make decisions. To be clear, content does not just mean the text on the page. Content includes navigation and footer information as well as regular page content and images.

2. Format Your Content

   The first goal of a site (web apps excluded) should be to present a message in a clear manner. The best way to do this is to make sure your markup is structured and semantic. I like to think of it as manually marking up a term paper or essay. Term papers must be clearly arranged and defined in logical sections. Lists should be presented as lists, paragraphs as paragraphs, and headings as headings.

   Every designer should have some boilerplate to work with. That is, having a very simple HTML template with basic elements (e.g. DOCTYPE, head, title, body, and any other basic elements you usually work with) will save you a few minutes up front and allow you to get down to business. Smultron, for example, has this built in. If you don’t, write a basic, empty HTML document. Don’t include stylesheets yet.

   To qualify the previous paragraph, boilerplate is only really needed if you want to validate as you go. If you trust your ability to write valid disembodied markup, just bang out the markup in a text editor without the rest of the code. It’s how I’m writing this post since it’s going to be injected into a design that has the rest of the code. In the end, you might save some time by not using boilerplate (e.g. if you have tons of pages that will need extra elements inserted during step four below). For the beginners, though, understanding the document structure will be more useful than the time saved by skipping out on it.

   Your task is to turn your content into something logical, legible, and semantic. Use your understanding of the content to create a document. Based on your mental outline, use headings with the correct level (typically the document title should be the first level heading, for example), lists, paragraphs, blockquotes, tables for tabulated data. Give emphasis, citations, and hyperlinks. Front load your lists if you need to. Don’t use divisions, fonts, or styles. Do rely on the browser’s built in formatting. Default styles are well thought out by the browser maker. You just want to make sure your content makes sense. Yes, it looks boring, but it also looks clean. When you view your document in a browser with no stylesheets, it should make sense when you try to read it.

3. Design For Your Content

   By now, you should be pretty intimate with the content. You should have a clear idea about what the content is about. This will allow you to create a design that helps present that content in a truthful manner. Take what you know about your content and mockup something that can present it well. I suggest using Photoshop to work on mockups at this point. This will keep you from having to write a big stylesheet when you don’t know if you need it.

   Also, focus on usability. People that come to this site have no knowledge of how you intended them to use it. They have certain knowledge about the way the web usually works. It’s best to take that into consideration. If you break from tradition, you need to make it obvious how you intend the user to interact with the site.

   After you are certain that the content is accurately represented and the design is usable, then worry about aesthetics.

   Typically, clients will want to approve a design. So, make a good composite to show off. You may even want to do a little HTML and drop a full-sized composite into a browser so the client can get a feel of how it would look.

   If it turns out that you have to do this step first, you should have an idea about what sort of content the client wants to be on his site. You may have to use your imagination a little more. Don’t worry, though. This is where most people have to start, and I believe starting here can still produce a great site, even if it isn’t the most ideal place to start.

4. Start Merging Content and Design

   Open your basic document in FireFox, Opera, or Safari. Since these browsers basically agree with one another, this will help you start with a standards compliant site. Now is when you want to start working on your stylesheets.

   Start coding your stylesheet based on what you already have. Before, people misused tables to create designs. Using web standards, people tend to get div diarrhea. Instead of using elements that exist, people put divs around everything whether they need it or not. So, I suggest making creative use of headings, navigation lists, and paragraphs to trim down your stylesheet as much as possible.

   The best place to start is by throwing out some of the default formatting. I know I just said it was well thought out. It still is. It just isn’t well thought out for your design.

   The first part of my main stylesheet clears margins, paddings, and borders (i.e. *{margin:0px; border:0px; padding:0px;}). From there, it’s the designers job to figure out the best proximity. It also forces the designer to take a better look at default behavior and hopefully start coding it out (or coding it in) to have well thought out alignment and contrast, which makes cross-browser compatibility a little easier to achieve.

   As you go, you will probably find that you need a div here and there to help represent a certain aspect of your design. For example, I like my designs centered on the page. In HTML 4, the best way to do this is a div that has margin: auto wrapped around all the content (though in real XHTML, the html and body elements can be used to achieve the same ends with no extra markup).

   So, add extra divs when you absolutely need them, and make sure to either code in or code out default styles. Be creative, though. It’s your job. Usually the easiest solution is not the best.

5. Make Sure It Is Accessible

   A pretty design is useless if it isn’t a good design. Good designs are accessible to the most number of people possible. So, audit your site and make sure there aren’t any serious accessibility problems. Make sure images have meaningful alt tags, form elements have labels, etc. Don’t forget niceties like skip to content links. This section really deserves an article of its own. So, I won’t go into much detail.

   Since I’m on a Mac, I’ve familiarized myself with browsing web sites with VoiceOver. While it isn’t as good as the other web screen readers, it helps me get an understanding of what the page might be like. I highly suggest this (or some similar testing) be part of the audit if you have access.

6. Debug for Internet Explorer

   Internet Explorer 7 was supposed to bring in a new age of standards compatibility. It didn’t. Even if it did, use of Internet Explorer 6 is still rampant. In the old days, stylesheet hacks were the way to account for differences in browser rendering (fighting bugs with bugs). Now, though, Internet Explorer has a proprietary concept called conditional comments.

   This is the first proprietary HTML concept Microsoft has created that is worth a damn. Conditional comments allows the designer to hide or show page content in Internet Explorer based on variables such as browser name or browser version. So, we create a conditional comment to show our Internet Explorer bug fix stylesheet only to Internet Explorer (e.g. <!--[if lte IE 6.0]> <link rel="stylesheet" type="text/css" href="ie_fixes.css"> <![endif]-->). No hacks needed.

   Work in Internet Explorer to clear up any layout issues by overwriting your real stylesheet values. So, if you had a fieldset{border: 1px dotted gray;} in your real styesheet, which causes weird results in Internet Explorer, you can change it by adding fieldset{border: 1px solid gray;} in your Internet Explorer stylesheet. Don’t get bent out of shape if things aren’t one-for-one the same. Sometimes a reasonable likeness is as good as you can get.

7. Show It To The Client

   By now you have a semantic document custom tailored to your client’s content that is usable, accessible, and hopefully aesthetically pleasing. You can now show it to the client. Since you had the forethought to use web standards, you can make changes to every page at once via the few stylesheets you created. It will save you time and your client money. Since the code is semantic, search engines can better understand the content and index it properly, which may lead to increased revenue for your client. Everyone wins.

Update: There is some discussion going on over at 456 Berea Street. Particularly of interest is how to install multiple stand alone versions of Internet Explorer. While this info can be gathered elsewhere, the feed back from the comments is useful in deciding which method to use. Plus, these are opinions from web designers rather than tech pundits. So, that is nice.

Update: Apparently someone already found a vulnerability. Some things never change.

Contradictions

It had long been rumored that IE7 would be released via Automatic Updates. However, an interview with Chris Wilson posted on Think Vitamin on the 24^th of July, 2006, the question Is IE gonna update to IE7 was answered as follows:

Is IE gonna update to IE7? So, I think the first thing, really, is that we can’t really force it on users… I mean, that is not our goal. We really like to offer users choice. It is a different user interface. Some people will be really jarred by that. I think that we certainly want to encourage everyone out there to… I do believe that we will offer it through Windows Update but it won’t be an automatic silent update. Certainly, it won’t be like one day you come in and suddenly your computer is running IE7 rather than IE6. Certainly, we have to ask the user if they really want it. As nice as it would be to blast it on to everybody’s system, I don’t think that can happen.

Chris Wilson is group program manager for Internet Explorer Platform and Security at Microsoft. He’s someone that I would suspect to be in the know. According to IEBlog, something changed in two days. IEBlog says the following:

To help our customers become more secure and up-to-date, we will distribute IE7 as a high-priority update via Automatic Updates (AU) shortly after the final version is released for Windows XP, planned for the fourth quarter of this year.

This has caused some confusion. The IEBlog post seems to suggest it was a recent change to their distribution plan. I’d hazard a guess that the change was in the making before the Chris Wilson interview but only trickled out from the official blog July 26^th.

The announcement seems to suggest a delivery method that is a hybrid of the install-if-you-want it method Chris Wilson talks about and the silent-update he shuns. The update will download via Automatic Updates. The install won’t be silent. The user will be prompted whether the IE7 install should be ignored completely, put off until later, or installed. Also, the post claims that IE7 will be able to roll back to IE6.

So, it looks like the Internet Explorer Team has managed to snuggle up in the middle.

Some Thoughts

I appreciate their user choice attitude, but I think now is a bad time to apply it. Internet Explorer is the largest source of installed spyware and adware. The fact that the interface might be a shock to users accustom to IE6 is really less important than protecting them from themselves. But, I really, really, really want IE7 to be adopted as fast as possible so I don’t have to worry so much about IE6 CSS hacks. I mean that I’m biased.

The other odd quirk is that upgrading to IE7 will allow users to preserve your current toolbars shortly after it lauded the browser’s advanced security features… including ActiveX Opt-in, the Phishing Filter and Fix My Settings. So, what IE7 will be doing is allowing users to keep all their spyware and adware infested browser cruft despite all the security enhancements the Internet Explorer Team created to prevent people from installing malware. Good thinking, guys. I understand leaving favorites, home page settings, and other settings, but the typically malware-sporting toolbars should be left out. If the user really cares about a tool bar, he’ll go find it again. Blame it on incompatibility. FireFox does it with extensions all the time.

Finally, I’m worried about the roll back to IE6 thing. I’ve stories about how big of a headache it is to uninstall the IE7 betas. I would think an uninstall for a beta product would be high-priority if a company wanted people to test it. Apparently, this is not the case for Microsoft. I hope they improved the uninstall substantially for the final release.