Some Standards Context

It’s no secret that logistics are what drives the global economy. By logistics, I mean goods traveling from Point A to Point B cheaply and quickly.

The first shipping container that went from a truck, to a ship, and back to a train/truck at the destination port was in 1956.

This spawned a huge industry. There were dozens of different containers in the US and they were all incompatible with each other. Towards the end of the 1960′s, standardization discussions took place and the first ISO spec for a standardized shipping container (Isotainer) were ready for publication in 1970.

There’s a good article on the ISO’s website about the Isotainer [pdf]

It’s been over 30 years – yet there are still people who refuse to conform to the standard. The Isotainer has a 90% adoption rate, and it took a hell of a long time to get.

So, when I see ranting and raving about Web Standards and specifications, I just think to myself it will all get better in due time. We’re working in a very young industry.

Includes on Restricted Servers

Web Developers using a server that has any type of server-side scripting available, such as ASP.net, PHP, Cold Fusion, Perl, or even measley ol’ SSI developing and maintaining a large website can be made easier with server side includes.

Here’s a quick reference:

• PHP – include()
• Cold Fusion – CFINCLUDE
• ASP
• SSI

How can developers still have a reduced workload on servers that do not have any of this technology available?

I have two techniques that are still leaps and bounds ahead of the ‘copy/paste the header onto every file’ method.

Method one: JavaScript includes

Just plant your header’s HTML code into a file with a .js extension:

Method two: Dreamweaver MX 2004 Templates

To be honest, I never really used this feature until DWMX2k4. It works pretty well – but there is the downside that you must use Dreamweaver.

More about Dreamweaver’s templating abilities can be seen at these links:

• Free Templates from Macromedia
• DevCenter: Consistent Web Design with Dreamweaver Templates

If you make a really nice template you can encourage others to make modify pages created with the template with [Macromedia Contribute].

NOTE: I’ve made the switch to serving out the docs on this site as application/xhtml+xml – there’s a good chance I didn’t catch all of the errors. If you find one, please contact me.

More Readability Tricks

This is a useful trick for making large amounts of data easier on the eye.

The bad code:

bc.

ID	Name
1.	Michael Moore
2.	Rush Limbaugh
3.	Bill O’Reilly

The bad output:

ID	Name
1	Michael Moore
2	Rush Limbaugh
3	Bill O’Reilly
4	Matt Drudge
5	Al Gore
6	John Ashcroft

The good code:

bc. /* begin stylesheet.css */
/* our CSS classes: even and odd */
.even { background: #eee; }
.odd { background: #fff; }
/* end stylesheet.css */

ID	Name
1.	Michael Moore
2.	Rush Limbaugh
3.	Bill O’Reilly
4.	Matt Drudge
5.	Al Gore
6.	John Ashcroft

The good output:

{background:#eee}	ID	Name
1	Michael Moore
{background:#eee}	2	Rush Limbaugh
3	Bill O’Reilly
{background:#eee}	4	Matt Drudge
5	Al Gore
{background:#eee}	6	John Ashcroft

To be a little more advanced, let’s say we are working with data from a large database where we have to output 500 (15 records/page) records of political pundits/figures.

Aside from the pagination functions, we want to keep the table’s readability in-tact.

bc. /* this is pseudocode */
for(i = 1; i
{
if(i mod 2 == 0) { // i is even, apply the ‘even’ CSS class }
else { // i is odd, apply the ‘odd’ css class }
}

I know the code is a little sloppy, but you get the point. The alternating row color effect is very possible and fairly easy to implement. Also – for those of you who don’t know, the ‘mod’ operand finds the remainder after division. It’s a ’%’ in pascal-based languages, and usually MOD in lesser languages like VB/ASP and Cold Fusion.

Increasing Document Readability

Document readability is a huge part of a site’s overall usability.

The ‘bad’ text’s code (this assumes no CSS is modifying the parent elements):

bc.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam nisl diam, faucibus et, convallis nec, ullamcorper aliquet, nibh. Duis ullamcorper. Aenean ultricies mi non massa. Duis risus. Aliquam erat volutpat. Etiam faucibus aliquet odio. Proin vitae tellus id libero aliquet sagittis. Sed metus enim, sollicitudin vitae, tristique vitae, consectetuer non, nunc. In hendrerit, lectus nec sollicitudin pulvinar, diam massa posuere lectus, at scelerisque justo risus suscipit lorem. Vivamus sit amet neque. Donec non leo ut elit fermentum feugiat. Curabitur a mi.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam nisl diam, faucibus et, convallis nec, ullamcorper aliquet, nibh. Duis ullamcorper. Aenean ultricies mi non massa. Duis risus. Aliquam erat volutpat. Etiam faucibus aliquet odio. Proin vitae tellus id libero aliquet sagittis. Sed metus enim, sollicitudin vitae, tristique vitae, consectetuer non, nunc. In hendrerit, lectus nec sollicitudin pulvinar, diam massa posuere lectus, at scelerisque justo risus suscipit lorem. Vivamus sit amet neque. Donec non leo ut elit fermentum feugiat. Curabitur a mi.

A quick fix in the line-height of an element is all you need to make your document more readable.

Here’s the good code:

bc.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam nisl diam, faucibus et, convallis nec, ullamcorper aliquet, nibh. Duis ullamcorper. Aenean ultricies mi non massa. Duis risus. Aliquam erat volutpat. Etiam faucibus aliquet odio. Proin vitae tellus id libero aliquet sagittis. Sed metus enim, sollicitudin vitae, tristique vitae, consectetuer non, nunc. In hendrerit, lectus nec sollicitudin pulvinar, diam massa posuere lectus, at scelerisque justo risus suscipit lorem. Vivamus sit amet neque. Donec non leo ut elit fermentum feugiat. Curabitur a mi.

And the result:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam nisl diam, faucibus et, convallis nec, ullamcorper aliquet, nibh. Duis ullamcorper. Aenean ultricies mi non massa. Duis risus. Aliquam erat volutpat. Etiam faucibus aliquet odio. Proin vitae tellus id libero aliquet sagittis. Sed metus enim, sollicitudin vitae, tristique vitae, consectetuer non, nunc. In hendrerit, lectus nec sollicitudin pulvinar, diam massa posuere lectus, at scelerisque justo risus suscipit lorem. Vivamus sit amet neque. Donec non leo ut elit fermentum feugiat. Curabitur a mi.

It’s amazing what effect changing the line-height has on a the eyes. In the examples, I’m using the measurement of ems but you can use whatever unit of measure you prefer.

When you’re feeling more comfortable with CSS, you can use the [shorthand font selectors for your documents].

Downsides of this technique? It clearly takes up more screen real estate, just like changing the line-height in your research paper that required 15 pages to 2.5 meant you had to type that much less.

The CSS Beginner

Now that I’ve convinced some of my good friends to use CSS I’ve got to do some more preaching about effective implentation of the techniques. Ineffective use of CSS is just as ‘bad’ as having a tag soup/WYSIWYG table mania site.

Download Mozilla FireFox

Developing in the most advanced browser should make sense. Yes, I know IE has the largest market share. I also know from experience that if you’re wanting to ensure a cross browser display starting in the most advanced browser and then ‘trickling down’ to the lowest common denominator (Lynx, for example) is much easier than scaling up, down, and all around.

Choose a DOCTYPE

What’s a Doctype? In the first line of every page of this site it says this:

This line is what’s called a Document Type Declaration (DTD) – essentially what’s going on is I am instructing the browser which ‘mode’ to render my file in. Rendering Mode? WTF? Your browser has 2 rendering modes. Quirks Mode and Standards Mode. Quirks mode means the browser’s rendering engine tries to figure out what you want to do – and will often do just the opposite. Standards mode, however, meticulously renders the page to the specifications of your code. It doesn’t matter that I specified XHTML 1.0 Strict vs. Transitional, or even HTML 4.01 – whatever I specify the browser will digest it the way I want it to – without a DTD the browser tries to guess. With CSS you’ll want things done in a very particular way—quirks mode will not be your friend.

Related Reading

• Floatutorial
• Eric Meyer: Containing Floats
• CSS Crib Sheet
• Eric Meyer on CSS and More Eric Meyer on CSS

Staying Afloat

This entry is intended for anyone who wants to survive the next decade as a ‘web designer’—specifically those still stuck in the last decade.

Step 1: Throw away your WYSIWYG Editor

This is the part that drives most people crazy. ‘Design views’ on Frontpage, Dreamweaver, and [name of favorite editor here] are currently inadequate with the level of code-tweaking that the rich machine readable future require. If you’ve shelled out big bucks for FrontPage, it’s a waste. Use a text editor, and then paste your markup into the HTML tab of FP(Frontpage) and pray it doesn’t add any cruft markup. You’re allowed to go back to your WYSIWYG after 3 weeks of ‘Code View’.

Step 2: Revisit some old friends

If you’ve been doing the web design thing for a while you know about heading tags – h1-h6. These tags are your best friends when it comes to machine readability. If you write code that’s easily read by a machine you’ll appear on search engines. It’s that simple. If you’re in an extremely competitive business, you’ll have to do more than this to earn high rankings on search engines. For all practical purposes, set up navigation with unordered lists, and divide your documents logically with headings and subheadings.

Step 3: Separate Presentation and Content

Often called the holy grail of web design, not only will your server side applications be easily implemented with structural tags – not aesthetic attributes – your layout development time will be cut drastically. A clearly defined document structure makes technologies like XSLT and CSS lifesaving.

My example – at work we’re putting together a booklet with technical information that would be useful to incoming freshman. There are lots of different areas that need coverage like computer labs, blackboard, e-mail, etc., so the text in this booklet is going to have multiple contributors. I was asked to make several designs so we could vote on the one that is the best, so I put together 4 mockup designs using HTML and CSS. I asked each contributor to send me their writeups in plaintext with two line breaks after each heading. ZING! With the magic of CSS and a structured plan I can take each entry put plug them into my format in about 30 seconds. What would have happened if I didn’t take this approach? I’d be pasting their entries in to the WYSIWYG view and doing countless bouts of right-click initiated coloring. Now, I just have to add h2 and p tags to the plaintext before I copy and paste it into the code. Not only did I avoid tedious font changing, border adding, and playing with color, but now the writeup that I was sent will work with any of the four designs. Efficiency kills.

Step 4: Learn simple Programming

This is a bit of a stretch for the artsy side of the web, but can be extremely useful in the long run. A basic understanding of logic will not only give you an appreciation for what the nerds do, but it will give you a better idea of what they’re capable of doing. As a designer, you’ll have to work with backend developers who are underpaid and overworked – make their work more efficient by having some sense of what they are achieving/have achieved.

Step 5: Don’t be stupid

Before you’re adding any ‘enhancements’ to a site ask yourself if the benefit that the enhancement will bring is with the time it costs to develop the enhancement. Chances are, you’ll trash your retarded JavaScripts and Flash intros.

Flash.

Flash just sucks.

Throw it away.

Okay, throwing away Flash is a bit drastic, but realize that Flash is grossly misused and eventually the rest of the world will wake up from this bells and whistles craze that brought on dotbomb. Think if all the time and money spent on eye-catching brain-numbing Flash intros was spent on components that added real value to your site. Looks will only get you so far, content is king. Just ask a Flash Developer from the dotcom flop. Flash makes a mockery of the browsing experience by crippling bookmarking abilities, and essentially doing away with the back/forward buttons which we all use. Not to mention it actively discriminates against the blind, and can barely be read by machines.

Recommended reading:

• HTML Dog
• Dive Into Accessibility
• A List Apart
• CSS Zen Garden
• DWWS

These guys are awful

I’m NOT claiming to create the best sites in the world I am pretty confident I’m better than any of the jerkoffs that are from my hometown who have absolutely NO clue what they’re doing when it comes to the web.

I’m would like to evaluate several sites based on the bofe scoring system.

The system is as follows:

+ 30 points if it doesn’t contain one Adobe ImageReady Slice (this means -30 if it contains some slicing, and -120 if the entire site is sliced) – 50 points if the site contains the phrase ‘new media’ (+50 if it does not contain it) – 150 if it is a one man operation claiming to do software development, ad campaigns, and graphic art – 200 per useless flash that is in Garamond font or times new roman

If it were actually a worthwhile venture to go and statistically pillage each one of the sites I’d gladly do it. Alas, I don’t have the time or incentive to do so – but I can summarize my would-be findings: NONE OF THE SITES WOULD HAVE A POSITIVE NUMBER AS THEIR SCORE.

If you’re looking for someone in the Owensboro area to make a website that will generate revenue for your company you’re not going to get results. Go contract an Aussie or a Brit to do the job.

I honestly cannot believe the ‘work’ that resides in some of the portfolios on these sites. And to think, people wasted good money for them.

Wild Wild West

Many authors compare the current state of the web to the wild west of early America, and that analogy is not very far-fetched. I like to think of the web as an industry much like the automobile industry that serves a need. The automobiles provide transportation; the web is a provider of goods, services, and information. Without the automobile industry overcoming the obstacles of safety, government regulation, overall standardization (roads being made so wide, parking spots, every aspect), and surely many other things they would have been a fad that died down. Not useful, unsafe, monopolized, and for the most part, useless. Standardization, government regulation, semantics for machine reading, usability are all realities that anyone who wants a job working with the web in the next 15 years are going to have to come to terms with.

Anyone can make a website.

It’s free and easy, but you don’t come to expect a quality site on Geocities. In fact, most of them are an absolute mess. That’s because with Geocities, anyone can make a website. You don’t really come to expect a quality website online. Maybe one day we will.

But, every new industry has to start somewhere. I’ll admit that I had my first GeoCities Account (Colosseum/3813) – but that was in 1996. My oldest site on the web (which was last modified Sunday, March 16, 1997 2:17:03 PM—that’s seven years ago) is still hosted at GeoCities. Back in 1995, when I was learning how websites worked there was no Dreamweaver, no FrontPage, just a little program I used called Gomer HTML editor. I’d link to the Gomer-making company’s website, but it’s a dead company. Valuable sites like CSS Zen Garden and HTML Dog, or books like Designing with Web Standards, Designing Web Usability, or Eric Meyer on CSS weren’t available “back in the day”, but I digress.

Almost all of the web is horribly done (99% is my guess). It’s littered with invalid markup, unusable sites, inaccessible content, bland designs, and poor semantics. More and more of the web based sins are attributed to amateur markup in server-side applications like content management systems or advertisement campaigns. I’m not claiming to be a holy grail of the web, but a sincere effort is being made. Most of today’s professional “web designers” have not left the 1997 internet behind. They practice useless jargon, tabled layouts, frizzy (and useless) graphics. Well, I don’t have much of a problem with these inexcusable practices taking place – it all slowly secures jobs for me. Once businesses realize there’s a lot of money to be made on the web (for real this time – just look at e-tailer’s Christmas sales jump), I’ll be one of the few (especially in this area) that can make a site that will produce results.

Where should the non-techies go?

If you’re not technologically inclined or you are still stuck in the “glory days” (and you’re still reading this piece), the web still has a place for you. That place is in one-click publishing, or blogging.

Today, publishing on the web – that is, writing a piece and having it available via a website – is as easy as writing an e-mail, or instant message. It’s called blogging. Do not confuse “making a website” with setting up a blog. I’m all for everyone in the world to set up his/her own blog, but I am not for anyone in the world to actually make the blog templates. (Some related blogging links: 37 Signals Blog Presentation, Introduction to weblogs, Blogging Iceberg)

Go and set up a blog. Spread your link to your friends, family, co-workers, and anyone else who may be interested in reading what you have to say. Your blogging platform will hopefully keep its technology up to date and well done because they have to in order to make money.

I’m taking a little pride in what I aspire to do, so I can make the web a better place.

The web has changed.

I’m just going to detail a few signs that if you’re still using these 1997-esque techniques, you have NO BUSINESS CLAIMING TO BE A WEBSITE PROFESSIONAL.

Adobe ImageReady “sliced” Sites.

When 98% of your website is a graphic, and you do not provide text representation of those graphics you’re making your websites inaccessible to blind users. “Oh, who cares? There aren’t that many blind people anyways.” is probably what John Q. Idiot is saying to himself.

What he doesn’t realize is that search engines are blind users too. Google is the largest and most important blind user of the web. Google accounts for 80% of the web’s searches. The days of URL-guessing are over. If the page doesn’t show up on Google (and in the first 3 pages of results) it doesn’t exist to the typical end-user.

Lack of CSS use, or CSS misuse.

Cascading Stylesheets are extremely powerful. “Printer Friendly” pages should not exist. CSS allows you to specify a printer-only stylesheet.

Using tables to represent aesthetic positioning instead of tabular data is a sin.

Not creating valid markup is a sin.

The web has changed.

Failure you realize this will slow the overall progress of the web. It will take a lot longer time for natural selection to take place online. No longer will there be clients willing to shell out huge amounts of cash on sites that do absolutely nothing but serve as an online business card.

Should a site serve an online business card? Yes. But the problem is you’ll end up spending more on site hosting and design than you will make via referrals from the site. Especially with your old and bloated image-intense web design.

Having a website does not mean that you’re technologically savvy anymore. It means you know how to type into a WYSIWYG editor like FrontPage and type a little.

Having a usable and well-done website is very different. The site displays in all browsers and mobile devices, prints gracefully, validates, uses proper semantics, and is accessible to an extent.

Rant #3, Coming soon… Just how accessible can you make your site? What is the lowest cognitive ability one caters a site to?