TechKnack » standards

Lists, Useful For More Than Menus

eternicode — Sun, 11 May 2008 19:23:00 +0000

I came across a page recently that uses ordered lists for the entire layout — not just the menu. The entire layout is in two parts: one ordered list for the header/body/footer, and another ordered list for the three columns inside the body.

I find this to be an interesting approach to multi-column layouts. Better yet, the author claims that it works in all major browsers on the three major operating systems.

However, are ordered lists the proper elements to use in this case? Is it “semantically correct”? What about unordered versus ordered lists? It’d be terribly simple to convert the layout to work with unordered lists, but which is more “correct”.

Regardless of correctness, though, “no floats, no divs, no clears” is rather appealing.

Do we really need the br element?

eternicode — Wed, 09 Apr 2008 13:13:00 +0000

Do we really need the lowly
element? Apparently the W3C thinks so, with HTML5 containing the element. I mean, seriously, what does it do that a span styled with display:block; can’t?

The last two times I’ve seen it used were in articles about creating a tableless photo gallery and making a CSS block nav menu. In both instances, the br was used to drop down the descriptive text to the next line. In both instances, a span surrounding the descriptive text, and with its display set to block, does the exact same thing.

I suppose an argument could be made about users with CSS turned off. In my opinion, though, if you have CSS turned off, you’re willing to deal with a few minor inconveniences. If you’re that worried about them, throw in a space before the span for readability. And if you really insist on giving them the extra lines of text — there’s always the naturally-block-level

And what about screenreaders? I doubt they’d be affected either way (it is whitespace, after all — right?), but I really have no clue. Perhaps someone who uses a screenreader could tell me, after chewing me out about my own blog’s (actually Blogger’s) screenreader-friendliness.

Promote Standards Awareness with CSS Naked

eternicode — Fri, 04 Apr 2008 19:15:00 +0000

CSS Naked is a standards-awareness initiative led/organized by Dustin Diaz. On the specified date, April 9th, all participating websites will strip their sites of their CSS, allowing the world to see the underlying clean-code usability:

The idea behind this event is to promote Web Standards. Plain and simple. This includes proper use of (x)html, semantic markup, a good hierarchy structure, and of course, a good ‘ol play on words. It’s time to show off your .

While I would love to participate in this, I wouldn’t recommend it for Blogger users. The building blocks of Blogger blogs, widgets, produce all sort of irrelevant divs and such that are used exclusively as CSS hooks. Aside from the fact that the underlying code is NOT semantic, disabling styles on Blogger sites (well, this one anyway) is NOT pretty (or, for that matter, usable). If you must see the results of such an inadvisable act as disabling CSS, you can (using FireFox) go to View -> Page Style -> No Style. This will disable styles for the current page (or the current tab, I’m not exactly sure).

So, to reverse Dustin’s little play on words — sorry, you don’t get to see my

Got Mad Coding Skills?

eternicode — Tue, 01 Apr 2008 16:20:00 +0000

Think you got what it takes to slice up a PSD file into a valid and usable (X)HTML template? Then check out CSS Off, a contest that gives you the opportunity to do just that. At one minute past midnight CST on April 5, a PSD file will be uploaded for contestants to download. Contestants will have up to 24 hours to submit their completed entry.

Don’t have Photoshop? Check out the GIMP! I’m hoping that the PSD file is GIMP-compatible. You could try to convert it one way (using an online service) or another (directly in the GIMP),but there’s always the issue of unsupported layer effects getting messed up.

And, no, this is not an AFD trick. At least, I hope it isn’t…

Browsershots: Mass Website Testing

eternicode — Sun, 16 Mar 2008 18:06:00 +0000

In the world of Web 2.0, cross-browser compatibility is a necessary evil. With different browsers, different versions of different browsers, and different operating systems with different versions of different browsers, you can rarely predict how your visitor might be viewing your site (unless, of course, you’re developing for a tightly controlled intranet, where everyone uses the same OS and browser). Unfortunately, it’s rarely, if ever, possible or sensible to test your site on even the major browser/OS combinations, let alone every conceivable combination.

Enter BrowserShots (currently version 0.4 beta 2). What is browsershots?

Browsershots makes screenshots of your web design in different browsers. It is a free open-source online service created by Johann C. Rocholl. When you submit your web address, it will be added to the job queue. A number of distributed computers will open your website in their browser. Then they will make screenshots and upload them to the central server here.

The process is very simple: point your browser to BrowserShots.org, enter your website’s URL, check off the browser/OS combinations you want to check it in (there are a LOT of choices!), set any optional settings, and click “submit”. Optional settings include screen size, color depth, javascript support, java support, and flash support. Once you click submit, your requests are placed in a queue.
In my experience, the wait time to receive all requested snapshots (mainly using the top browsers on all three platforms) varies between 3 minutes (last night) and 30 minutes (estimated time as I write this post ), though for $15 (10€), you can get priority processing. The snapshots are available for 30min (or more, if you want to extend it), and can be viewed as they are taken (you don’t have to wait for the whole batch to finish). Refresh your “Website Overview” page to see screenshots as they are uploaded. On the Website overview page, you also have the opportunity to download a zip file containing all snapshots that have been taken so far.

Once a screenshot has been taken and uploaded, you can click on its thumbnail to view the details of the browser and OS the snap was taken on, as well as a full-size screenshot of the page. Details include browser, engine, javascript capabilities, java capabilities, flash capabilities; “factory”, sponsor, hardware, and OS of the machine that took that snapshot; dimensions and file size of the screenshot; and various timestamps related to the screenshot.

Granted, you can’t check website behavior (javascript animations, interactions, and such), but for those without access to different operating systems and different browsers, this is a very useful tool for cross-browser compatibility checking.

Browser Shots

IE Team Changes IE8’s Default Behavior

eternicode — Tue, 04 Mar 2008 17:07:00 +0000

Just yesterday, the IE Team announced that they will be changing IE8’s default behavior. Instead of the previously decided default of “IE7 Mode”, IE8 will default to “IE8 Mode” with the option to switch to IE7 mode with the X-UA-Compatible meta tag. Web developers rejoice!

Additional links:
QuirksBlog: IE team changes its mind on IE8 default behaviour
WebWare: IE8 to be standards compliant: Good for devs and users
IEBlog: Microsoft’s Interoperability Principles and IE8

Diggables:
IE team changes its mind on IE8 default behaviour
IE8 to be standards compliant by default
IE8 will render standards-mode pages as best it can

Make Word 2007 Save to .doc by Default

eternicode — Mon, 25 Feb 2008 08:42:00 +0000

While the MS Office 2007 GUI is nice (and maybe even a tad more usable), the (relatively) new docx file format is so proprietary, it’s not even funny. Can Office 2003 users open it? Not without the Microsoft-developed “compatibility pack”. Can OpenOffice users open it? Not without installing a non-standard file handler for the program (there are instructions for installing this on linux-based systems). Using the format is well and good among 2007 users…but what about when you email that docx writeup (due tonight, no less) to your professor, who uses only OpenOffice? Oops.

The main problem is that the docx format is fundamentally different in composition from the good ol’ doc format. The doc format was your standard binary file format, much like image files and executables; essentially, they are text surrounded by Word-readable formatting instructions.

The docx format, on the other hand, is a zip file containing other files that describe the contents, formatting, embedded objects, and everything else the docx file holds. According to Microsoft themselves:

To open a Word 2007 XML file

Create a temporary folder in which to store the file and its parts.

Save a Word 2007 document, containing text, pictures, and other elements, as a .docx file.

Add a .zip extension to the end of the file name.

Double-click the file. It will open in the ZIP application. You can see the parts that comprise the file.

Extract the parts to the folder that you created previously.

Regardless of the differences, though, the mass switching from one format to another caused by the widespread adoption of Office 2007 is nothing less than inconvenient for those users not using the new Office. You can help by setting your copy to save to the compatible doc format by default . After starting Word 2007, go to Orb->Word Options. Select the “Save” tab on the left, and choose “Word 97-2003 Document (*.doc)” for the “Save files in this format:” option. Then click the OK button. From now on, anytime you select Orb->Save, Word should offer the old .doc format as the default format to save to. Hail compatibility!

An Alternative to IE8’s "Opt-in Standards Mode"?

eternicode — Mon, 11 Feb 2008 03:03:00 +0000

There’s been a lot of opinions expressed about the IE team’s introduction of the X-UA-Compatible HTTP header (or, in most cases, a meta tag in the html), otherwise known as Opt-in Standards Mode, with IE8. Most of the opinionators seem to be opposed to the “switch”, while a few (PPK of QuirksMode and Aaron Gustafson of AListApart amongst them) have already embraced it. But is there a better way?

Ideas

Reading through user comments on PPK’s post, I came across some interesting ideas. BARTdG said

…I think they should solve this problem by adding a “Does this site look odd?”-button (to switch IE8 into IE7-mode)…

And Michiel van der Blonk said

I see a different scenario possible. MS ships the new IE8 with full forward compatibility mode (edge) as a default, as all standards aware developers expect it.

But, they also deploy a ‘crippled’ version of IE8 that has all the security features and what not but will render using the IE6 engine.

Tino Zijdel:

If the problem lies mainly with IE-centered intranet apps then why doesn’t MS offer a special fabriqued ‘Intranet Explorer’?

An alternative?

What if standards-compliant rendering were placed in the hands of the users?

I mean, this is pretty much the case now, what with people having a choice (most of the time) between using IE6, IE7, FireFox, Opera, Safari, Konqueror, and more. Those ignorant of their options will use what they’re given, IE7 (or IE8 with the default mode). Why not leave whether or not IE8 renders properly as an option for the user to invoke?