Web Design - SEO - Technology ReviewsPosts tagged XHTML

Valid Flash Embed and Preloaders Episode V: Internet Explorer Strikes Back

Kyle Blizzard — Tue, 02 Nov 2010 17:45:10 +0000

If you saw my previous post on valid Flash embed while maintaining preload functionality and used it, be warned: when the user does not have Flash, a lovely will appear in IE where the Flash movie would normally be. The only way around it I’ve found is to actually duplicate everything from the opening object tag to the closing one so there is one each for IE and Firefox. For example:

Definitely a pain, but I’ve found no other way around it.

Also in my search for a solution, I discovered that our old pal Internet Explorer does not let you append anything but param elements to object elements in Javascript. That was pretty frustrating. Don’t try that. It doesn’t work.

The Pesky iframe and XHTML Strict

Kyle Blizzard — Sat, 30 Oct 2010 19:30:44 +0000

Update: Example code updated. It used the shortened form of iframe before, as in . That doesn’t sit well with IE. It now uses which works. The same goes for object. It similarly does not play well with Firefox 4 (perhaps even lower versions) in shortened form.

If you’ve done much web work before, you’ve probably, at some time or another, had to use an iframe. It’s not pretty, but sometimes it’s the only choice, such as embedding a widget from another site or displaying things such as real estate listings. One of my biggest problems with it is that it doesn’t exist in the spec for XHTML Strict! It exists in Transitional, but I don’t like to use it. That may be good enough for some developers, but certainly not for me. How about you?

In Internet Explorer 8 (and possibly IE7, but I have not tested it) and Firefox, you can use the object element to embed a web page just like an iframe; however, IE gives it a thick, lovely border that seems impossible to remove. Here’s the trick: employing IE’s conditional comments, use an iframe for IE and an object for everything else. Here’s an example:

Valid XHTML Strict! Make sure to keep your settings the same across both elements to keep it consistent.

Happy coding!

Valid Flash Embed and Preloaders in Internet Explorer

Kyle Blizzard — Fri, 18 Jun 2010 18:56:32 +0000

Hello once again, web friends. Today I bring tidings of Flash preloaders and validity.

You may have noticed that with the embed code from my YouTube article that Flash movie preloaders don’t work in Internet Explorer, and the movie has to load entirely before it even displays at all. This is because Internet Explorer requires a different attribute and the removal of another in the object tag to let preloaders work properly. However, with different attributes, the Flash movie will not display at all in Firefox, so we must use Internet Explorer’s conditional comments to utilize two different opening object tags. Behold:

The first line is the original that works in both IE and Firefox but doesn’t allow preloaders in IE. The second is the IE-only method that works with preloaders. Note the lack of a data attribute and the addition of a classid attribute.

Well, there you have it. Venture forth and embed Flash validly with preload animations!

Semantic Markup – Why Should You Use It?

Kyle Blizzard — Thu, 04 Mar 2010 16:00:42 +0000

Your markup should have meaning. Markup your content appropriately (e.g. put your address and phone number in the address element) and it becomes much more readable to search engines and other software used for data extraction. Using only div and span elements leaves much to be desired, semantically speaking. These elements are certainly indispensable, however, there are some cases where there are more meaningful elements to use. For example:

Use h1 as your page title; use h2 and on appropriately as sub-headings on the page. This provides an outline of your document.
Use lists (dl, ol, ul) instead of manually placing numbers or bullets.
Use address for any contact information on your page, including physical address, email address, phone numbers, and whatever else you would consider to be contact info.
Use table on data best represented in rows and columns. Use thead and th to markup the column headings and tbody for the data itself.

Check the HTML spec for additional meaningful elements and get to work!

You can use the W3′s handy Semantic Data Extractor tool to test your new semantic web site to give you an idea of how it would be seen by software.

That does it for now. See you next time! Until then, read SEO and Validation.

Valid Flash Embed – Make That YouTube Embed Valid!

Kyle Blizzard — Thu, 04 Mar 2010 03:11:58 +0000

Hola! It’s been a while. I’ve got another gripe, and this time it’s with Flash embed code!

Most of the embed code I see for Flash movies is invalid, usually containing the non-existent embed element or some-such. Even the code provided by YouTube for embedding videos contains embed. This can easily be thrown out and will—probably most of the time—instantly make your code valid.

Here’s an example (in XHTML) of a valid Flash embed that works in at least IE6+, Firefox, and Safari:

That’s all there is to it. Adjust the parameters and add additional param elements as necessary. If your Flash movie requires variables, just add an extra param as follows:

If you place additional elements inside the object element, it will act as a fallback, displaying if the Flash plugin isn’t installed. For example:

That’s all for now. Happy coding!

CSS Float Trick

Kyle Blizzard — Thu, 10 Sep 2009 19:14:17 +0000

Do you ever have a list of items (such as a ul) in which each item is floating to make them appear side-by-side (an example is the list of sites at BlizzardDigital.org)? Tired of using a non-semantic, empty div after the ul to clear the items? A useful trick is to add float: left; to the ul itself. This fits the ul‘s box around its inner items. Without float specified, the ul‘s box does not wrap around its items at all, making everything on the page after it scoot up behind all the list items. Very annoying. The normal fix for this would be to make the following element clear, but this isn’t always desirable. Your options are probably to have an empty div after it specifically to clear it (yuck) or make the probably unrelated following element clear it (yuck also). Just float the containing element (in my example, a ul) and set its width to 100%. The width makes sure no one squeezes in on the sides and therefore no clearing is necessary.

Clear as mud, right?

SEO and Validation

David Blizzard — Fri, 28 Aug 2009 18:01:52 +0000

I was reading The Truth About Validation and I felt the need to respond. First off, Tim makes some valid points but only if the article is renamed “The Truth About Validation and SEO”. I agree, if a web developer tells you that you can’t be much of an SEO if you don’t write valid code then that developer is a clown and should be ignored. If they are just saying that you are not a valid coder then that would be true. From a coder’s point of view they could go as far as saying that you are a hack, would they be wrong? That said, there are many other reasons to write valid code. Some of the best SEO gods, gurus, evangelists, provide detailed change requests to web designers and this is often preferred on a valid site so the SEO does not break the valid code. Maybe SEO specialists should inform the client that there is such a thing as validation and let them decide. It’s similar to an auto mechanic letting the customer decide if they want a factory replacement part or an aftermarket part, is it worth the extra money? Determining that invalid pages are ranked high for certain terms does not tell the complete story but it does tell most of the story. What if a search bot reaches a certain point on a page that is so invalid it stops parsing? At that point the rest of your content would be ignored. What if the next algo revision applies more weight to valid code or is modified so that it halts when a missing end tag is encountered (is Bing already doing this)? You would have partial page results in the index which means you have wasted copy. More important is the fact that invalid code might not render properly on the next update to your audience’s preferred browser. At some point the invalid code will probably rear its ugly head and then you will need to pay the piper to write valid code, or at least new code, so why not let the coders get paid for what they do?

We could argue that having a shade tree mechanic use bailing wire to fix a dragging muffler will allow you to use the car again but for how long? Yes it will cost more money to order the new muffler hanger and have a muffler shop install it properly but when you hit that big speed bump at the grocery store which one do you think will hold up? At that point did it really cost more money to have it done right?

I agree if you charge someone to do SEO work and you don’t write valid code then you aren’t ripping them off. What if you are upfront and tell them, directly, I am going to make the changes using invalid code, will they care? Should they have a choice or is OK to leave them in the dark since it is to your advantage?

One point Tim implied that I disagree with is that it’s more expensive to work on valid sites. It is much easier to work on a properly designed CSS and XHTML site than a hacked, table infested, monstrosity. We charge a lot more, well actually, we usually require a complete redesign before we start working on a hacked site but this is strictly related to design work, not SEO. Let me repeat here that I agree that validation has little to do with SEO if anything. I say if anything because we don’t know if any search engines pay greater weight to valid code and there can be a case made for a parser getting stuck or stopping after a bad or missing tag. Maybe not Google but can we guarantee this won’t happen with any search engine?

I give the thumbs up to valid code because without validation then you have to set some other standard for when the code is acceptable. It would be much more difficult to create a list of what code is bad or invalid but acceptable. Why not follow the standards that are used to design every web browser?

I also read “source code validation common sense” over at SEOBook by Aaron Wall. Wow! He really goes off and I don’t blame him but I have never personally heard a good web designer that is proud of his ability and trade claim that validation is an integral part of SEO work. I say ignore those monkeys but let the design experts maintain their status of elite, or cream of the crop, by writing valid code and proving they are at the top of their game just as you are at the top of yours. Here are some of the top reasons to validate.

added: I would be considered a hack when it comes to XHTML and CSS. If I perform onpage SEO I check to see if the client site is valid. If it is then I make sure it’s valid when I finish. Often I find errors that I have caused and then I have to employ someone from our design team to fix it. I have been known to render this site invalid just by blogging

More Random Web Design Tips

Kyle Blizzard — Fri, 05 Jun 2009 19:14:03 +0000

Body Element Classes

One thing I’ve started doing somewhat recently is adding a unique class name to the body element of each page. This allows me to write page-specific CSS as necessary without creating an extra stylesheet. Ideally, there should be styles for common elements that make up the site, rather than style for each page, but this can’t always be avoided. One case could be that a particular page needs to have a slightly different layout than the rest of the site. Body element class to the rescue!

Internet Explorer 6

We all know Internet Explorer 6 is a regular pain in the neck, right? Fortunately, it’s easy to add IE6-specific style with this selector:
* html [additional selectors...]

For example, the style * html p { font-weight: bold; } makes all paragraphs bold only in Internet Explorer 6. It’s valid, but no other major browser will apply it. This is useful because sometimes the style needed to make things in IE6 look one way is drastically different than what is needed to make it look the same in all the other browsers. A simpler solution, though, is to tell your client to upgrade his 8-year-old browser.

“Navbars”

A site typically has a “bar” of navigational links. Vertically laid out navigation is easy to create and append additional links later. Horizontal navigation is sometimes desired instead, but it’s not always as trivial to append and can be a little trickier to achieve.

This tip will be focused on horizontal navigation. First, you should most definitely use unordered lists (the ul element) to organize your navigation links whether you’re using vertical, horizontal, upside-down, or anything-else-you-can-think of navigation. (See the W3′s excellent webmaster tips for more on unordered lists and their uses.) Once you’ve marked up your navigational links, jump over to the stylesheet and add a display: inline; line to your navigation’s li elements. Now take a step back and behold your now-horizontal navigational links!

If you find you need to set the width and height of your links, just set the display type of the a elements to inline-block, which I was surprised to find out was actually supported in Internet Explorer 6! Once you’ve set that, your links will behave like block-level elements as far as styling goes, but they will remain positioned inline. Sweet!

Well, that’s all for now. Make sure to check back occasionally for more random web tips from your Uncle Kyle!