Some Standards Context

shipping.jpg

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.

Advertisements

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:

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:

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

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:

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.