Blog@Case Topics: web standardshttp://blog.case.edu/topics/web%20standardsJeremy Smithjeremy.smith@case.eduhttp://blog.case.edu/jeremy.smithHeidi Coolheidi.cool@case.eduhttp://blog.case.edu/webdev2009-05-13T21:09:01ZPredicting Microformats/RDFa's Futurehttp://blog.case.edu/jeremy.smith/2009/05/13/predicting_microformatsrdfas_future2009-05-13T21:07:41Z2009-05-13T21:09:01Z

I have no comment on this. I just wanted a placeholder to mark the date. From Sam Ruby: Microdata:

[Microformats and RDFa] use is about to explode.

Jeremy Smithjeremy.smith@case.eduhttp://blog.case.edu/jeremy.smithAvailable Toolset Assumptionshttp://blog.case.edu/jeremy.smith/2009/05/13/available_toolset_assumptions2009-05-13T19:47:23Z2009-05-13T19:51:10ZJeremy Smithjeremy.smith@case.eduhttp://blog.case.edu/jeremy.smithLong Live HTMLhttp://blog.case.edu/jeremy.smith/2009/04/23/long_live_html2009-04-23T17:59:47Z2009-04-23T17:58:40Z

Dave Shea redesigns from XHTML back to HTML:

I’m done with XHTML is why. Back to HTML 4.01 Strict for now, then HTML5 whenever that happens.

He continues:

Six years ago, many of us thought XHTML would be the future of the web and we’d be living in an XML world by now… For me, a guy who builds web sites and applications for clients that have to work in today’s browsers, XHTML2 is a non-issue. No browser support, no use to today’s web authors. End of story.

HTML_Level++

Not that any of this needs linking to again, but if you serve XHTML markup with a content-type of "text/html"; you're probably not getting the benefits you think you're getting with XML. And if you do try to serve it as application/xhtml+xml, you break IE. And even in a world where IE didn't matter, draconian error handling is a downward spiral to madness.

Jeremy Smithjeremy.smith@case.eduhttp://blog.case.edu/jeremy.smith2 Top 5 Lists = 1 Top Ten List: My most read Web Development Blog entries from 2008http://blog.case.edu/webdev/2009/01/11/2008review.html2009-01-12T04:26:40Z2009-01-12T05:40:43ZNow that the New Year has been rung in, it seems that the meme of the moment is to blog about the year in review. So I thought I'd follow suit. I looked over my blog entries to see if I'd trended towards any new themes for 2008. While I have written more on social media this year (who hasn't?) I quickly noted that my topics overall continued to range across a wide array of Web related subjects. Next I looked at my stats to see which articles were getting the most traffic and comments.

Get Adobe Flash player
New Year's Eve around the world

Now that the New Year has been rung in, it seems that the meme of the moment is to blog about the year in review. So I thought I'd follow suit. I looked over my blog entries to see if I'd trended towards any new themes for 2008. While I have written more on social media this year (who hasn't?) I quickly noted that my topics overall continued to range across a wide array of Web related subjects. Next I looked at my stats to see which articles were getting the most traffic and comments.

As it happens the most read article of 2008 was also the most read article of 2007. While quick trendy subjects such as Plurk: Social Media Marketing in Action brought in new readers and temporary traffic spikes, the more timeless subjects such as writing, marketing and navigation were the ones that drew in the most readers overall. So, instead of presenting you with my top 10 articles of 2008, I've decided to break them up into 2 groups, the top 5 written in 2008 and the top 5 from year's past that continue to draw readers—even with the passage of time.

Top 5 Web Development Blog Entries written in 2008
5. Testing Web sites with multiple browser versions
Suggestions on ways to test sites in multiple browsers, reasons for testing and why we still can't ignore Internet Explorer 6.0.
4. Reflections on social media networking and marketing
Overview of popular uses for social media, nature of word-of-mouth and the impact of social media on marketing goals.
3. Wayfinding within your Web site
This follow-up to Your home page is NOT your index; it's your store front provides tips on navigational aids that will help users to explore your site no matter which page they may enter through.
2. An URL by any other name would still work like an URL, part 1: subdomains
Exploring the differences between subdomains and subdirectories and their impact (or lack thereof) upon marketing.
1. Embedding YouTube Videos the Standards Compliant Way—SFWobject 2.0
Embedding YouTube Videos is one of the easiest things you can do on the Web, but if you're a stickler for standards compliant HTML, you can't just copy and paste. SFWobject 2.0 provides an easy remedy.
Top 5 Web Development Blog Entries read in 2008
5. CSS Tip: Positioning photos with floats
Positioning photos with hspace or tables is awkward and dated, but the CSS float property makes it easy for anyone to include images in their Web sites and blogs so that they float cleanly to the right or left of the text.
4. An Introduction to Search Engine Optimization (SEO) Part 1
Search Engine Optimization may seem complicated, but by following these simple SEO basics you can make a significant impact.
3. I'm not going to teach you XHTML/HTML, but you should learn it anyway
This brief introduction to HTML provides links and resources for learning HTML as well as a homework assignment users can try as a way to get started.
2. So you want to build a website
This is the first in a series of articles that make up my Planning your Web site tutorial—in which I walk readers through a process of identifying goals, understanding their audience, choosing content, outlining a site and organizing pages and navigation.
1. Voice and Tone: Writing to reflect your personality as well as your message (Part 1)
Writing is more than the stringing of words into a sentence. This article addresses the importance of using a tone suitable to both the audience and the subject matter in order to better connect with readers and clearly convey your message.
Conclusions

The Web is constantly evolving and we're all trying to keep up with the latest trends and technologies. But no matter which platform we use to publish, which strategies we apply, it always seems to come back to the basics. The most basic element of the Web is content. While video and audio continue to build in popularity, the core of our content is still composed of words. That's probably why the Voice and Tone article was read more than any other.

You, my readers, understand the importance of fundamentals over the latest fad. I think that is why—for the most part—the most popular subjects on this blog are the ones that address these basic strategies, those that can be applied now and in the future. In 2009 I expect to be writing more on social media topics such as Facebook and Twitter, but I'll also be writing more about content and general marketing principles, the foundations we build upon in all of our Web-based endeavors.

What about you? If you're a blogger what will you focus on in 2009? If you're a regular (or new) reader, what would you like to see here?

Happy New Year!

P.S. Read more of my thoughts on social media and the Web on Ariwriter

Ari Herzog recently interviewed me for his blog, AriWriter: Strategies and tips on social media and online marketing. You can read the full article, Guest Interview with Heidi Cool: How a University Experiments with Social Media, online.

Heidi Coolheidi.cool@case.eduhttp://blog.case.edu/webdevShould you or should you not have links open in a new window/tab?http://blog.case.edu/webdev/2008/10/28/newwindow.html2008-10-28T06:15:10Z2008-10-29T02:35:03ZLast week's entry on outbound links spawned a lot of discussion, including the question of whether one should have outbound links open in a new window (or tab depending on the user's browser and preferences). Although many others have already written about this topic, it comes up often enough that I think it is worth discussing. Disclaimer: links that open in a new window or tab—when that wasn't my choice—are a pet peeve of mine, but I will attempt to explore the topic objectively.

Screen capture of backbutton dropdown window
Firefox's back button will let you go back
several steps. View enlarged image.

Last week's entry on outbound links spawned a lot of discussion, including the question of whether one should have outbound links open in a new window (or tab depending on the user's browser and preferences). Although many others have already written about this topic, it comes up often enough that I think it is worth discussing. Disclaimer: links that open in a new window or tab—when that wasn't my choice—are a pet peeve of mine, but I will attempt to explore the topic objectively.

What is the intended purpose of having links open in a new window or tab?

Those who recommend having links open in a new window do so with the intention of making it easier for users to return to the original site. Anyone who surfs the Internet knows that it is easy to get lost down a rabbit hole of links. For example, if I provide you with a link to Chuck Palahniuk's Web site, you might:

By now, the theory goes, you will have either forgotten where you were before or forgotten how to get back. If I'd set the Chuck Palahniuk link to open in a new window/tab (this is the only link on the page that opens a new window), you could just go back to your original window/tab and you'd be back where you started. Of course if the link opens in the same window, and you are using a current browser such as Firefox, you can simply click the down arrow next to your back button to navigate back through the series of links you just followed.

So which is better? Is it easier for a user to go back to a different window or to just use the back button?

I've always found it easier to use the back button. With one click I can go back and read another interview or I can choose to go all the way back to the original blog. To me that seems far easier than wading through a sea of windows, or looking at an array of tabs to find the one you want. But everyone is different. In researching this article I discovered a Get Satisfaction page in which a user actually requested that links on Pownce open in a new window. Two of the responders agreed that they would prefer new windows, while two others (including Pownce/Digg designer Daniel Burka) disagreed. I saw these differing opinions in many places.

Where does that leave us? Preferences vary, so unless you survey the users of your particular site it may be difficult to determine if your audience likes or dislikes it when a link opens in a new window. Pownce was able to solve the problem by giving users a setting that lets them pick which behavior is the default while they're on Pownce. But that's not an option for most sites and blogs. With that in mind, I think it is most appropriate to leave it in control of the user. If a user wants to open a link in a new window he can do so by right-clicking (Windows) or ctrl-clicking (Mac) the link in question. I often open links in a new tab if I know that I'll want to flip back and forth between them. I just don't want them opening up new tabs spontaneously.

Standards and accessibility issues related to opening links in new windows

If you're in the pro new window camp, I've probably not yet changed your mind. But there are more issues to consider.

W3C HTML and XHTML Recommendations
The traditional way to have a link open in a new window is to include target="_blank" in the link. The target attribute is not included in the recommendations for HTML and XHTML strict, therefore sites using target with a strict doctype won't validate. From what I've gathered target is not included because not all browsers support the attribute, particularly when it comes to browsers running on mobile devices. (This may change in XHTML 2.0 as the attribute may serve new needs as mobile browsers evolve. A valid alternative is to use javascript.
W3C Web Content Accessibility Guidelines 2.0 (WCAG)
According to the WCAG Success Criterion 3.2.5, " Individuals who are unable to detect changes of context or may not realize that the context has changed are likely to become disoriented while navigating a site. For example: individuals who are blind or have low vision may have difficulty knowing when a visual context change has occurred, such as a new window popping up. In this case, warning users of context changes in advance minimizes confusion when the user discovers that the back button no longer behaves as expected." To avoid this confusion they recommend that users should be notified if a link will open in a new window and if possible be given the choice to not have it open in a new window.
Kant's Categorical Imperative: What if everyone did it?

While writing this I kept having a vision of wandering the Internet in a world where every external link opened a new window or tab. In this vision it was only a matter of minutes before there were so many tabs open in my browser that I had to use the left and right arrows to scroll through them. Worse yet, instead of tabs windows began spawning as quickly as Tribbles and suddenly my desktop was impossible to navigate. This made me think of Kant. In his first formulation of the Categorical Imperative he states that one should "act only in accordance with that maxim through which you can at the same time will that it become a universal law." While this idea was meant to deal with issues of morality, it's easy to see how it could be applied to lesser situations such as links opening in new windows. If links always opened in a new windows it would pose significant usability challenges.

Naturally most sites don't open everything in a new window or tab. If they did we'd all be swimming in windows. Instead, most site designers choose to open new windows only in particular circumstances. Some designers do this only for external sites while others reserve the technique for opening up .pdf files. While I'd still prefer that links open in the same window, giving me the choice of whether or not to open them in a new tab, I understand that many may disagree. Most people have committed one way or another with few remaining undecided. But, whatever your preference may be, I hope this discussion will help the next time you're debating where a particular link should open.

Learn more about opening links in pop-up windows or tabs
Heidi Coolheidi.cool@case.eduhttp://blog.case.edu/webdevTesting Web sites with multiple browser versionshttp://blog.case.edu/webdev/2008/07/14/multibrowsers.html2008-07-14T05:45:53Z2008-07-14T05:54:01ZUntil recently I was one of the only nerds who had yet to upgrade to Firefox 3. I'd been waiting until I could find an easy way to install it alongside (rather than in place of) Firefox 2. When I'd tried doing this a few months ago—with the beta version of Firefox 3—it hadn't worked properly, so I'd put the idea on hold.

portableapps.com
Firefox 3 from PortableApps.com (Windows)

Until recently I was one of the only nerds who had yet to upgrade to Firefox 3. I'd been waiting until I could find an easy way to install it alongside (rather than in place of) Firefox 2. When I'd tried doing this a few months ago—with the beta version of Firefox 3—it hadn't worked properly, so I'd put the idea on hold.

I mentioned this in a meeting, when a colleague piped up with a simple solution. He suggested using the PortableApps version, a standalone version of the program that can be installed on a Flash drive—for portability—or simply in a directory you designate on your computer. This was so obvious I immediately wondered why it hadn't occurred to me before, but then, practical ideas are like that.

PortableApps.com offers a plethora of portable software solutions—including Firefox—for Windows

Once I got back to my office I hopped over to http://portableapps.com/, looked for Firefox 3, then proceeded to download it. Within minutes it was installed, separately and independently of Firefox 2. When I tried to start it up I discovered that you can't run them both at the same time—I had to close out of 2 to open 3, then close out of 3 to reopen 2—but you can run them on the same computer. This will be tremendously useful if I discover some quirk in Firefox 3—such as an add-on that no longer works and has yet to be updated—or if I need to see how a Web page renders in each version.

That solved the problem for the Windows P. C., but what about the Macintosh?

FreeSMUG: Portable Applications for OSX

freesmug.jpg
Firefox 3 from FreeSMUG (Mac)

A quick Google search turned up FreeSMUG's portable applications section. FreeSMUG offers a portable version of Firefox 3—in several languages—as well as other popular open source programs such as Open Office and Audacity. Those new to many of the Open Source programs available through FreeSMUG can learn more about them through a variety of helpful tutorials available on the site.

FreeSMUG says of its portable applications, "OS X FOSS portable applications are packaged so you can carry around on any portable device, USB thumb drive, iPod, portable hard drive, memory card, other portable device (or also on your internal hard disk), taking your preferences with you." This of course could be handy for any number of reasons, but the ability to run multiple versions of browsers to use for testing Web sites, is particularly useful to me.

Why test in multiple versions of the same Web browser? Why not just upgrade?

As a Web developer, you probably upgrade your browsers fairly often. That's not true of the average user. In many cases the people who visit your site are using the same browser that came with their computer.

The most popular browsers used by visitors to the Web Development Blog this month are:

  • Internet Explorer 7.0 - 24.6%
  • Internet Explorer 6.0 - 24.3%
  • Firefox 3.0 - 12.7%
  • Firefox 2.x - 17.8%
  • Safari - 5.4%

Interestingly .5% were still using Netscape 4.0, which is over 10 years old!

To ensure that you, my site visitors, can view and use this site with ease, I need to make sure that it works properly in the browsers that most of you are using. This requires testing in multiple browsers and versions.

When a browser releases a minor upgrade, this isn't a big issue. But when a Web browser makes a significant upgrade it can make a big difference. A site that looked fine in version X, may look horrible in version Y.

When Internet Explorer 7 came out, users and developers quickly noticed that many pages didn't render properly in the new version. I.E. 7 was actually more standards compliant than I.E. 6, but developers who had used I.E. hacks to make pages look right in I.E. 6 found they didn't work with I.E. 7. This led to a lot of sturm und drang about I.E. 7 "breaking the Web," as those developers needed to modify those hacks to make their sites work in both I.E. 6 and 7.

Here at Case our templated sites don't rely on many I.E. hacks so they transitioned smoothly from I.E. 6 to I.E. 7. But when I'm building new sites, I may sometimes incorporate new styles or features that I've not used before. This is when I make a point of testing in multiple browsers. Tredosoft's Multiple I.E. Installer provides a convenient way to run different versions of Internet Explorer on Windows XP. They also provide information for running I.E. 6 natively on Vista.

Must your site work in every browser available?

No, the Web has evolved enough since 1993 that making a site backwards compatible with every browser version is pretty much impossible. But if you adhere to Web standards, build sites that degrade cleanly in older browsers, and test in the browsers used by most of your readers you should be able to provide a good user experience for all of your visitors.

Web Browse Testing Resources
Heidi Coolheidi.cool@case.eduhttp://blog.case.edu/webdevProposal to Add "href" Attribute to a Number of Elements in HTML5http://blog.case.edu/jeremy.smith/2008/06/05/proposal_to_add_href_attribute_to_a_number_of_elements_in_html52008-06-05T18:38:59Z2008-06-05T18:40:11Z

A proposal to add the "href" attribute to a number of elements in HTML5 by Eric Meyer. Make sure to "View Source" on the page. Eric Meyer always delivers clean markup.

Jeremy Smithjeremy.smith@case.eduhttp://blog.case.edu/jeremy.smithEmbedding YouTube Videos the Standards Compliant Way—SFWobject 2.0http://blog.case.edu/webdev/2008/04/20/youtube.html2008-04-21T00:24:50Z2008-04-21T17:43:52ZAs video becomes easier to produce, more and more people are creating and sharing videso online. Whether you are a professor demonstrating your research, a student working on a film project, or me creating how-to instructions, you've realized that there are times when video can enhance your Web content. Back at the turn of the century, embedding video was complicated. Streaming required a special server, you had to decide what format(s) you wanted to stream, then you had to provide links to whatever software users might need to view your video—in case it wasn't already installed on their computers. With YouTube, that's all changed. Now you can just go to the YouTube page for the video you wish to embed, copy the coding they provide, paste it into your html file or blog entry and publish the page. It's just that easy—unless, like me, you care about adhering to Web standards. In that case, it requires a few more steps, but don't worry, they're not that complicated.

As video becomes easier to produce, more and more people are creating and sharing videos online. Whether you are a professor demonstrating your research, a student working on a film project, or me creating how-to instructions, you've realized that there are times when video can enhance your Web content.

Get Adobe Flash player
The resolution on YouTube is not as crisp as the original.
You can also view the video in higher resolution .mov format.

Back at the turn of the century, embedding video was complicated. Streaming required a special server, you had to decide what format(s) you wanted to stream, then you had to provide links to whatever software users might need to view your video—in case it wasn't already installed on their computers.

With YouTube, that's all changed. Now you can just go to the YouTube page for the video you wish to embed, copy the coding they provide, paste it into your html file or blog entry and publish the page.

It's just that easy—unless, like me, you care about adhering to Web standards. In that case, it requires a few more steps, but don't worry, they're not that complicated. YouTube videos can be embedded on the Web using swfobject.js—in a manner similar to the method I described last year in " Embedding Flash Objects for Internet Explorer." You can also use this method for embedding regular Flash .swf files. Just substitute the path to your .swf for the YouTube link in the instructions below.

Downloading swfobject 2.0

SWFObject 2.0 provides a significant upgrade to SWFObject 1.5—what we'd previously been using to embed Flash .swf files. To begin you will want to download the new script from the SWFobject project page. After downloading the script, you can upload it to your site, in whichever directory you prefer. Note: SWFobject 2.0 is not backwards compatible with 1.5, but the script has the same file name, swfobject.js. If you are already using 1.5 on your site—and don't plan to immediately edit all the pages that use it—you should rename the file to something like swfobject2.js or store it in a different directory so that you don't write over the prior version.

Generate the embed code for your page

While you could do this manually by following the instructions in the documentation, the SWFobject team has provided a rather handy Web-based code generator that we'll use in this example.

  1. Go the the YouTube page for the video you wish to embed and copy the embed code provided.
  2. Paste this into a blank file in Dreamweaver or your preferred editor. We won't be using this code in our page, but we'll want it for reference.

    <object width="425" height="355"><param name="movie" value="http://www.youtube.com/v/b-tYxJcFj9I&hl=en"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/b-tYxJcFj9I&hl=en" type="application/x-shockwave-flash" wmode="transparent" width="425" height="355"></embed></object>

  3. Within this code you will see a link to the video after value=". Within this link there may be an ampersand. Escape the & by typing amp; after it.
  4. Copy this link, http://www.youtube.com/v/b-tYxJcFj9I&amp;hl=en, then go to the SWFObject 2.0 HTML and JavaScript generator v1.1.
  5. Paste the link in the box to the right of "Flash (.swf):."
  6. Near the top of the generator, choose between static and dynamic. I will be using static in this example as dynamic would require me to put additional code--specific to this video--in my header. Here on the blog my headers are part of my templates so I can't use anything that would be specific to only one entry. (The documentation offers additional information on the static and dynamic methods.)
  7. Copy the width and height values from the YouTube embed code and paste them into the dimensions boxes in the generator.
  8. Click on "more" in the SWF definition box if you like to edit additional attributes.
  9. In the HTML definition box choose the version of XHTML or HTML and character encoding you use on your Web site.
  10. Click the "Generate Code" button.
Embedding the video in your page
  1. Copy the script code found with the head of the generated output.

    <script type="text/javascript" src="swfobject.js"></script>
    <script type="text/javascript">
    swfobject.registerObject("myFlashContent", "9.0.0");
    </script>

  2. Paste this into the head of your HTML file or blog templates. Note: Because I have already been using the previous version of SWFobject on this blog, I named my script swfobject2.js before uploading it to the server. Therefore I must also change the name in this code then add it to the code that is already in my templates. Thus my files will include:

    <script type="text/javascript" src="swfobject.js"></script>
    <script type="text/javascript" src="swfobject2.js"></script>
    <script type="text/javascript">
    swfobject.registerObject("myFlashContent", "9.0.0");
    </script>

  3. Copy the object code found within the body of the generated output.

    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="425" height="350" id="myFlashContent">
    <param name="movie" value="http://www.youtube.com/v/b-tYxJcFj9I&amp;hl=en" />
    <param name="wmode" value="opaque" />
    <!--[if !IE]>-->
    <object type="application/x-shockwave-flash" data="http://www.youtube.com/v/b-tYxJcFj9I&amp;hl=en" width="425" height="355">
    <param name="wmode" value="opaque" />
    <!--<![endif]-->
    <a href="http://www.adobe.com/go/getflashplayer">
    <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
    </a>
    <!--[if !IE]>-->
    </object>
    <!--<![endif]-->
    </object>

  4. Paste this into the place in your file where you would like the video to appear.
  5. Upload the file to your server and watch the video!
SWFObject Resources
About the Embedding YouTube Videos the Standards Compliant Way video

The video screen captures were recorded using iShowU, a program I discovered yesterday afternoon. The scenes were pieced together, and audio was recorded and added in iMovie. As this was my first time experimenting with iShowU some portions of the video are a bit wobbly, but overall I found it very easy to use. I expect my skills will improve with time.

I'll post more about the process as I become more familiar with the software. Members of the Case Western Reserve University community interested in producing similar instructional videos may also wish to visit the Freedman Center which offers tools and instructions on this and related topics.

Heidi Coolheidi.cool@case.eduhttp://blog.case.edu/webdevDear Mobile Device OS Manufacturershttp://blog.case.edu/jeremy.smith/2008/03/19/dear_mobile_device_os_manufacturers2008-03-19T22:29:19Z2008-03-22T18:23:11Z

Dear Apple, Google ( preemptively), Microsoft, Palm, Research In Motion, and Symbian (am I missing anybody):

Please develop versions of your mobile browsers that can be downloaded to my computer so that I can test web sites in them.

For some on the list, there is probably an easier way for you to do this — by moving from your in-house browser and adopting a rendering engine that can already accommodate this. I'll leave that to you guys to decide.

Sincerely,
People Who Are Trying to Make Sites Work on Your Products Despite Your Reluctance to Acknowledge Them

As I discover ways of doing this, I will list them below:

List:

Jeremy Smithjeremy.smith@case.eduhttp://blog.case.edu/jeremy.smithIE8 Will Do "Standards Mode" By Defaulthttp://blog.case.edu/jeremy.smith/2008/03/03/ie8_will_do_standards_mode_by_default2008-03-04T03:13:02Z2008-03-04T03:13:57Z
It's very commendable that the MSIE team has decided that IE8 will do "Standards Mode" by default. It's not often people change their minds. Especially in this case where they are going to cause themselves a huge PITA when they have to assuage all of their "intranet costumers" to upgrade to yet-another-browser-version that is going to break their sites. It's good to see this kind of support coming out of Microsoft.
Jeremy Smithjeremy.smith@case.eduhttp://blog.case.edu/jeremy.smithInternet Access Revokedhttp://blog.case.edu/jeremy.smith/2008/02/20/internet_access_revoked2008-02-20T08:01:17Z2008-02-22T22:04:11Z

Nobody hires people to style a Word document, but you certainly do have to hire somebody to create any non-trivial page with CSS

I hereby declare your Internet revoked.

Update:

Sure there's a bit of disconnect between the image and the content of the comment, but I just couldn't help myself:

internet-fail.png

Jeremy Smithjeremy.smith@case.eduhttp://blog.case.edu/jeremy.smithCleveland Web Standards Associationhttp://blog.case.edu/jeremy.smith/2008/01/30/cleveland_web_standards_association2008-01-30T19:54:45Z2008-01-30T19:57:02Z
The Cleveland Web Standards Association now has a web site (via Refresh Cleveland and Eric Meyer). So no more needing to link to their meetup page when referencing them. I have to sheepishly admit to never having attended any of their events. For some reason, I always have a (semi-)valid reason for not going. The next meetup is February 5th. I'm going to try and make that one.
Jeremy Smithjeremy.smith@case.eduhttp://blog.case.edu/jeremy.smithIE 8 Something; Web Indigestion Ensuedhttp://blog.case.edu/jeremy.smith/2008/01/27/ie_8_something_web_indigestion_ensued2008-01-27T22:29:13Z2008-01-27T22:28:36Z

C'mon, I can't believe I am the first person to go with the "8"→"Ate" pun.

It seems IE8 will use an opt-in <meta …> tag to turn on standards mode. Crappy idea? Most certainly. Relevant? Turns out, not so much as you can continue to use doctype switching.

At least, as far as I can tell, that pretty much sums it up.

All of this does remind me of a quote:

There are three levels to creating software: computer science, software engineering, and this thing that people do with Java inside enterprises.

I think that that law can be generalized a little more:

… and this thing that people do within their intranets.

What follows is a fairly exhaustive list of links that you can read if you want all of the details. Admittedly, I am still working my way through this list. Hat tip to Mark Pilgrim's "pleasesirmayihaveanother" del.icio.us tag. Many of these links are pulled from there.

Starter reading:

And all the meaty commentary:

And, oh yeah, HTML5 was published as a W3C Working Draft. Seems somehow fitting to link to that here at the end.

Jeremy Smithjeremy.smith@case.eduhttp://blog.case.edu/jeremy.smithSpotting a Wannabe Web Standards Advocatehttp://blog.case.edu/jeremy.smith/2007/12/28/spotting_a_wannabe_web_standards_advocate2007-12-28T17:29:07Z2008-01-23T23:58:38Z
Oldie but goodie — HOWTO Spot a Wannabe Web Standards Advocate. They're not numbered, but if they were, I especially like 8, 12, 13, and 21 (the last one).
Jeremy Smithjeremy.smith@case.eduhttp://blog.case.edu/jeremy.smithEmail Standards Projecthttp://blog.case.edu/jeremy.smith/2007/11/28/email_standards_project2007-11-28T18:29:11Z2008-01-23T23:58:41Z
Email Standards Project
Our goal is to help designers understand why web standards are so important for email, while working with email client developers to ensure that emails render consistently. This is a community effort to improve the email experience for both designers and readers alike.
Subscribed.
Jeremy Smithjeremy.smith@case.eduhttp://blog.case.edu/jeremy.smithGrading a Website's Markuphttp://blog.case.edu/jeremy.smith/2007/10/12/grading_a_websites_markup2007-10-12T18:19:31Z2007-10-12T18:25:22Z

Less Than Perfect

It's difficult to compose a prescriptive list of all the issues a "perfect site" must satisfy. So, lately I've been think from a different perspective. Instead of "what it takes to be great," I've been asking myself "what does a great site NOT do? More specifically, I've been assuming a perfect site gets 100 points initially and then loses points for shortcomings.

My additions to the list off of the top of my head:

  • -1 for each on*="javascript code"
  • -5 for serving XHTML with Content-type: text/html
  • Awww heck, -5 for serving XHTML at all (unless you go to Sam Ruby lengths)

I could probably come up with more… lots more, but that's because I'm a markup snob.

Jeremy Smithjeremy.smith@case.eduhttp://blog.case.edu/jeremy.smithAn Introduction to Web Standardshttp://blog.case.edu/webdev/2007/08/28/webstandards.html2007-08-28T23:02:53Z2007-08-29T15:21:29ZI've recently come to the conclusion that a great number of Web developers either don't know about Web standards, or simply don't care. For those who aren't already aware of the standards I'll offer a brief introduction along with resources for additional information. For those who don't care, or who are anti-standards, I'll offer some examples as to why I feel they're important.

standards.jpg
Standards are simply
the rules of the road for the Web

I've recently come to the conclusion that a great number of Web developers either don't know about Web standards, or simply don't care. For those who aren't already aware of the standards I'll offer a brief introduction along with resources for additional information. For those who don't care, or who are anti-standards, I'll offer some examples as to why I feel they're important. For those of you already in the know, feel free to add your own advice, examples or pet peeves in the comments section.

The reason for Web Standards

According to the Web Standards Project Mission, " The World Wide Web Consortium (W3C), along with other groups and standards bodies, has established technologies for creating and interpreting web-based content. These technologies, which we call "web standards," are carefully designed to deliver the greatest benefits to the greatest number of web users while ensuring the long-term viability of any document published on the Web."

Think of these as the rules of the road. When you are driving a car in Ohio you know you have to drive on the right side of the road, stop at stop signs, not enter an intersection unless there is room for your vehicle on the other side, yield to pedestrians, etc. If you are driving in Hong Kong you know to drive on the left and follow the various rules relevant to that jurisdiction. Following these rules makes the driving experience more pleasant for everyone; whereas ignoring these rules will, at best, annoy other drivers and, at worst, cause a traffic related fatality.

In most cases, a non-standard Web site isn't likely to cause fatalities, but anything is in the realm of possibility. Errors in formatting can cause content to render incorrectly. Imagine if the word "Never" wasn't visible to users reading the sentence "Never pour gasoline on an open fire." A reader unfamiliar with the combustible nature of rising gasoline vapors could easily immolate himself. That's an extreme example, but whether your site is about fire prevention or your book club, you probably don't intend to misinform or confuse your readers.

Following Web standards lets you increase the odds* that your site will be properly rendered by most browsers and user agents and that your information will be more accessible to users and search engines.

* I say "increase the odds" rather than "guarantee" because there are still differences between the way browsers interpret the standards.

What are the Web Standards?

Different standards are available for different purposes, but for the most part standards will define the type of coding that you should use when creating a Web page or stylesheet, or the procedures or policies you should consider when creating the site. Thus if you are building a site in HTML using Cascading Style Sheets, and want to ensure your site is Section 508 compliant for accessibility, you might follow the standards for HTML 4.01, CSS 2, and Section 508.

For example, HTML standards specify using <p> to start a paragraph, <h1> for a primary header and <em> for emphasis. CSS standards specify things like color and position, so that a purple header could be defined in a stylesheet by: h1 {color:#571963}. Using a descriptive word or phrase in the alt tag of images conforms to accessibility standards (both 508 and WAI).

One of the most overlooked HTML standards seems to be the inclusion of the correct document type. For example, if you are building a site using XHTML 1.0 (as is true of many Case sites) you would include this document type:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

This small piece of code tells browsers and user agents what version of HTML you are using, so they don't have to guess when rendering the site. This is like telling Babel Fish whether you want to translate a phrase from Dutch to English or from German to English. If you don't give it the right information you may not get the right result. I'm amazed by the number of sites don't include this basic information.

Another important standard for HTML 4.01 and XHTML 1.0 is the separation of format and presentation. <h3>Headline</h3> is an example of format, indicating that something is a header. Styling the <h3> with CSS, either in the document or in an external stylesheet, to be a certain size, color and font would be an example of presentation. In the old days of the Web this was done within the HTML using the now deprecated <font> tag. In the past one might have typed <h3><font color="33ff33" size="5">Headline<font></h3>. This not only filled up your page with a lot of extra code, but it also meant that if you decided later to make all of your <h3>'s a different color you would have to go and change all of the font codes one by one. When using a style sheet you can define how your <h3>'s will look in one place. To change the color you just make the one change in the stylesheet and you are ready to go.

Separation of format and presentation isn't a particularly new idea, but adoption has spread slowly. CSS 1 was first introduced in 1996 and the CSS 2 recommendation has been around since 1998. While many sites use CSS, it is still not uncommon to stumble upon current sites that are still using older codes such as <font>.

Why this has been on my mind

A few weeks ago a friend sent me a link to a pretty cool looking site for an online magazine. Alas the site wasn't standards compliant and therefore didn't work properly. This particular site was Flash-based with dimensions too big to fit my screen. The page had no scroll bars so I couldn't get to the menus to navigate through the site. I could see the whole site on my Mac, but not on my Dell, and I'm pretty sure I'm not the only one to have had that problem. Since I couldn't navigate the site, they might as well have posted a page that said "Do Not Enter. We don't care about your business." If they had built a compliant site they would have ensured greater accessibility to users and not had this problem.

I've found a number of other non-compliant sites while working to compile a list of local Web developers. Departments without Web staff often look to outsource their Web projects and turn to me for referrals. Thus I'm trying to put together a list of local (to support the regional economy) developers who I can trust to build compliant sites that follow the Case design scheme, maintain a logical navigational structure and support the goals of the client. This has not been an easy task.

The problem is that almost anyone can learn to build a Web site, but only a few can do it well. There are a lot of firms out there, but the quality of work varies dramatically, and only a handful build standards compliant sites. Sites with major compliance errors don't end up on my list. This isn't just because I'm persnickety. If a site fails validation because of a few stray &'s or they've forgotten to close a few <p>'s I'm not worried. Such errors are easily corrected and don't disturb the overall functionality of the site. But if a site uses <font> tags, doesn't include a doctype, leaves alt tags blank on all of their images, etc., then I will conclude that its designers are not professional and will not be able to offer the client the advice or service necessary to implement a successful site.

Conclusion and Disclaimer

If you've ever built a Web site, you've followed at least a few of the standards. The site wouldn't work if you hadn't. For example if you left out the <body> tag your page wouldn't render. Since we're all following some of the standards anyway, I would just encourage everyone to learn and apply more of them. As you become more familiar with them you'll find that your sites become both easier to use and easier to build. To learn more about Web standards visit The Web Standards Project and the resources below.

Standards compliance is an ongoing goal of mine, but I'm only human. Not every site I've built is standards compliant, and the errors become more egregious the older the pages may be. Since I readily acknowledge this you don't need to go hunt them down, they are out there, and I know it!

Web Standards Resources
Heidi Coolheidi.cool@case.eduhttp://blog.case.edu/webdevCase.tvhttp://blog.case.edu/jeremy.smith/2007/04/12/casetv2007-04-12T20:47:07Z2007-04-12T21:05:47Z
Okay, I freely admit, when I first heard about Case.TV, I was skeptical. The following thought went through my head:
Oh God, I wonder what bloated vendor's framework that was built with… I wonder if any browser other than IE6 on Windows will work… I doubt it uses anything other than WMV files… *sigh*
Okay… well… I was wrong. The site is designed in modern web technologies. It has clean markup. Clean use of CSS. It doesn't validate but only because one small closing / didn't make it in (I can forgive that). The site uses unobtrusive Javascript that degrades if JS is turned off (save for one body onload="" call that I can also forgive). It works in every browser and platform I've tested. And, to boot, it has an Accessibility Statement that references Dive Into Accessibility. All right. All right! I give! Color me impressed. (See also I'm a Snob When it Comes to Companies' and Persons' Web Pages' Markup and CSS.) Now someone needs to fess up. Who put that site together? Someone in ITS? Paul, was that you? Was it done by a contractor? Someone other than Complex Spiral? If that's the case, I'd like to know which company. So come on… out yourself&hellip who did it? <aside> One minor nit that I can't forgive, though — the login procedure. For example, this JS function — https://mv-web-secure.case.edu/scripts/cp.js: 
function fixPwd() {

var password = document.forms[0].pwd.value;

      password = password.replace(/&/g, "%26");

      password = password.replace(/\+/g, "%2B");

      password = password.replace(/=/g, "%3D");

      password = password.replace(/ /g, "%20");

      password = password.replace(/:/g, "%3A");

      password = password.replace(/;/g, "%3B");

      password = password.replace(/\?/g, "%3F");

      password = password.replace(/\@/g, "%40");

      password = password.replace(/\$/g, "%24");

      password = password.replace(/\//g, "%2F");  



      document.forms[0].pwd.value = password;

}
That's… uhh… no good. CAS integration would fix up that problem. </aside>
Jeremy Smithjeremy.smith@case.eduhttp://blog.case.edu/jeremy.smithOpenID Server Integrated with CAShttp://blog.case.edu/jeremy.smith/2007/03/09/openid_server_integrated_with_cas2007-03-10T00:53:01Z2007-03-10T00:55:54Z
With the help of some of the Network Engineers (to get some magic routing working), I cobbled together an OpenID server and integrated it with Case's Single Sign On system, CAS. The "server" end-point is located at http://login.case.edu/id. Your "identity URL" is the first.last portion of your email address followed with .id.case.edu. For example, my email is jeremy.smith@case.edu, so my OpenID identity URL is jeremy.smith.id.case.edu . For those averse to typing (like I am), you can also use your Case Network ID followed by .id.case.edu. So, I could also use jms18.id.case.edu . If you want to try logging in with it, you can head over to Simon Willison's Weblog and, at the top where it says "Sign in with OpenID," click on that and enter <USERNAME>.id.case.edu. A better example is logging into Wikitravel because it shows how information (such as nicknames, email address, full name, etc.) can be shared between a OpenID Provider and client. You can sign in to Wikitravel here. The information sharing part doesn't so much "work" yet. I'm getting there. And because it is integrated upwards towards CAS, it should interoperate with all of the other "identity systems/protocols" we've integrated with CAS like Shibboleth (and, in testing, Oracle's Single Sign On, Sun's, and Google's SAML-based Single Sign-On). I may throw up some screencasts showing the effects of this by bouncing in between normal CAS-protected apps (like this blog system or the wiki), Shibboleth protected ones, and OpenID protected ones.
blog-admin@case.eduhttp://blog.case.edu/jeremy.smithSafari Bughttp://blog.case.edu/jeremy.smith/2007/02/28/safari_bug2007-03-01T00:07:59Z2007-03-01T00:08:57Z
In the most recent post in CSS-ing Case, I failed to test Safari. I assumed it would render the same as Firefox. Turns out, not so much. Here's a screenshot of Safari's rendering. That "Highlights" box should be over on the right, not underneath the content. sarafi-rendering-css-case.png The layout is based on the layout described in A List Apart: In Search of the Holy Grail, and there were no problems with Safari rendering those pages. I stripped everything down to the most basic version of CSS that causes the bug. It's at http://blog.case.edu/jms18/examples/mockups/safari-bug.html. If you look at that site in Firefox, it will look like: mozilla-rendering-test-page.png In Safari, it will look like: safari-rendering-test-page.png Is this a known bug for Safari? Do I have to resort to a CSS-hack directed to Safari? I know they exist but would prefer not to. By the way, this is Safari 2.0. Not sure what 1.3 would render it as. If somebody has a 1.3 version of Safari and can test it, I'd be much obliged.
Jeremy Smithjeremy.smith@case.eduhttp://blog.case.edu/jeremy.smith