Naturally, this was not an overnight process. It’s taken many months of mental reprogramming, research, trial and error, and self-education. And even then, I’m in a bit of a transition period. In many cases I’ve merely swapped out the cumbersome tables with nested <div> and excess <span> tags. It’s a phenomenon Jeffrey Zeldman coined as “divitis” in Desigining with Web Standards, and it’s only an improvement by degrees over tables-based layouts.

The next step towards design enlightenment is using more of the tools built into HTML and CSS to our advantage. That includes judicious use of class and id attributes, CSS features like inheritance and specificity, and perhaps some HTML tags you didn’t even know existed  (or knew of, but not their purpose). The following are common symptoms of divitis, and how to painlessly cure your code.

Creating a container for something that’s already a container

Ever place an unordered list in a <div> because you wanted to separate it out from the rest of the text? Not only can you style the <ul> tag directly, you can even style the <li> tags for additional control. Need this list to look different from that list? In addition to being able to assign a class or id to the <ul>, consider using <ol> or <dl> if the situation warrants.

Do you need to add emphasis to a paragraph of text and not the rest of it? You could add a class to that specific paragraph. In some cases you may be able to use <blockquote> or, for short lines, a lower level header, such as <h4> or <h5>.

Tables are evil! But I still need to use them

Tables are perfectly fine, and of course valid, html, as long as they’re being used solely to display tabular data. And they have a wealth of elements to call upon to not only lend more sensibility to the markup, but also create incredible flexibility when it comes to styling. Instead of adding divs or superfluous classes to indicate table separations such as titles, footers, and columns, consider taking advantage of <caption>, <thead>, <th>, <col>, <colgroup> and <tfoot> tags. It’ll trim that much more weight from your code.

My forms will not behave

Forms are a sore spot for many designers. They have to look good, fit in the layout, and be clear and logical for people to use. Oh, and any styling needs to account for the different behaviours of form elements, unique browser rendering, and possible enhancements like inline form validation. Almost makes you want to forgo that contact form for a simple e-mail link, doesn’t it?

Fortunately, forms have a number of lesser-known elements at the designer’s disposal. Group sections of the forms together using <fieldset> and <legend>. Organize field/label pairs using <label> along with the “for” attribute. And it’s definitely in your best interest to include an id along with a name for most, if not all, form fields. Most designers will find  that even after doing all of this, they still have to resort to divs to get their forms under control. By now, though, the number of extra containers you have to put in are far fewer, and you probably don’t have to nest any of them. You can’t always go for sparkling; but tidy can be an admirable goal.

This effort to curtail divitis (and its lesser known, but similarly troublesome cousin, classitis) is driven by a couple of core concepts: giving semantic meaning to our code, and separating presentation from structure. Both concepts are about making sure every tag has a significance, which in turn improves the markup’s accessibility, extensibility, and portability. In other words, the site is kinder for assistive devices, is more easily indexed by search engines, gives you quicker turnaround for updates and redesigns, and simplifies coding for mobile devices. So you can be noble and profitable.

Neato tools

In case you haven’t been following, many of the visual tricks we use in web design can now (or soon) be done using styles instead of complex image trickery and awkward markup gymnastics. Some highlights:

• Border-radius for making rounded corners on boxes
• Text-shadow and box-shadow for, well, you could probably guess
• RGBA for defining RGB (red, green, blue) values, plus alpha for opacity levels.
• Embedding fonts using @font-face.

Using them to make great mock-ups

Just like many designers (as evidenced in Megan’s informal poll in the above article), I mock up web page designs in a graphics program first (though I use Fireworks myself, because frankly, Photoshop scares me a little), slicing and dicing the graphics to fit them into the final design once it’s been approved. I’ll even go as far as convert it to an image to embed in a web page to give the client a concept of how it’ll look in the browser. But this process has its well-documented shortcomings.

By using the process outlined in Megan’s article, you can provide a more complete, descriptive, flexible concept of the client’s site. But that’s not even the best part: once you and the client have settled on the final design, you may suddenly discover that you’ve already finished most of the web site! Check it out: you’ve plunked all the content into a semantic CSS-based layout. You may have even put something together in Photoshop (or Fireworks) for your own benefit. All that’s left is working the final graphics into the layout, adjusting the CSS to be more widely compatible, and whatever associated mopping up you find yourself doing at the end of a great project.

Prototyping using CSS like this can inject some actual joy in the development process, because you can actually code and build web pages first, rather than fumbling with design. If you’re an html guy first and foremost, like I am, the whole procedure feels more natural and sensible.

It’s just too bad we can’t keep all that great CSS we just wrote

After selling your design using that CSS-based prototype, you’d probably be tempted to leave everything in the design as-is. After all, it’s a functional web page, isn’t it? Unfortunately, once you view the site in Firefox version 2.5 or earlier, or Internet Explorer version anything, Your enlightened design falls flat. On one hand, it probably degrades quite gracefully, and the site still looks pretty in browsers that don’t yet support these newer CSS elements. On the other hand, if you’ve sold the client on your pretty rounded corners for the boxes, and lovely translucent gradient effects or whatnot, you will have to replicate those in your graphics program to take back to your design.

This is the part that probably feels a little backwards; to me it even reads backwards. It’s time to slice & dice the graphical mockup into its needed image elements and write up CSS2 (or older) statements to replace the not-yet-compatible ones. It’s like antiquing for websites.

But wait! You’re not going to just toss all those CSS3 elements, are you? Just sequester them into a separate stylesheet (or if you don’t mind your CSS coming up invalid in W3C validators, leave them in the stylesheet proper) and the browsers that don’t understand them just won’t pay attention to them. So while you’ve been building this flexible prototype, you’ve also been future proofing the web site, not to mention future-proofing your own skill set. By getting your hands dirty with CSS3 now, you’ll be a grizzled veteran by the time it becomes standard.

And you wonder why it’s one of the best prototyping tools ever?

It’s not for everyone… or every project

Prototyping a website like this requires the right kind of rapport with the client. The client must not only be aware of the fact that they’re only going to be able to view the concept in something like Safari or Firefox 3.5, they need to be completely cool with it. This slick and savvy approach to design mock-ups can quickly run afoul if the design has to pass over several sets of eyes, and those other sets don’t get the message about needing to view the site in specific browsers.  If you expect to spend as much time justifying your method as you will be employing it, then you’ll be forced to keep the tried-and-true prototyping method in your stable.

All the same, it’s worth the effort to give these new practices a shot, whether it be with that super-cool, progressive thinker of a client, or just one of your own pet projects. Master the techniques now, and force everyone else to play catch-up later.

Apple is very good at repackaging technology and selling it as something new. They didn’t invent the mp3 player, nor did they pioneer the cell phone (or the smart phone, or – and someone correct me if I’m wrong – the touch screen cell phone). But they are quite good at taking a piece of technology coveted by a niche of gadget fans and turning it into something that few consumers can live without.

As it is, the iPad is hard to categorize, though not for lack of trying. What I see right now is a sexed up, slightly overpriced and rather crippled netbook. The lack of video, the inability to multitask, the Flash non-support, and the paltry 16GB capacity should be deal-breakers for anyone wanting to do something resembling computing with the iPad. Even 64GB is nearly an affront to anyone who downloads video, installs applications and games, or generally accumulates files. The fact that the processor has the muscle to run OS X, but instead runs a modified version of the iPhone OS, also elicits reactions ranging from head scratching to outright annoyance.

I have little doubt that Apple has adopted the “rush to market, then iterate” approach to this device. They’ve announced to the world that their stable of high tech consumer goodies now includes a tablet, and people familiar with their products should expect a new version to appear every year or so. Sure, this approach pretty much screws the early adopter, but at the risk of sounding cruel, the early adopter is a bit of a masochist, anyway. Their love for either Apple or such devices will not wane. The iPad is a $500 (to $830) membership fee into that exclusive technophiles’ club.

But it’s in the yearly updates where the iPad will start to show some real promise. Expect to see all of the issues above checked off in future generations. Third parties will jump on board with productivity-boosting peripherals (that will still cater to the ultraportability of the device). Flash memory capacity is already reaching terabyte levels, even if it’s not yet ready for mass consumption. And if consumers demand it strongly enough, they’ll get that video camera, and possibly even a suitably brawny OS.

Apple pretty much has to do this. It’s not like they’re going to have the market to themselves for very long.

Then comes the bait. The client casually offers, “Oh, and I’d like to be able to update some of the pages myself.”

Eager to please, we return with “Sure, not a problem.” Sproing! Just like that, we’re ensnared.

This has nothing to do with the client trying to sneak a hefty feature in under the radar, and everything to do with our too-casual approach to CMS and eagerness to please. A recent project has inspired me to proclaim that “‘Just adding’ a CMS to a site can be like ‘Just adding’ a football stadium to a garage at times”, a proclamation that I have since taken as gospel. Content Management integration is not a feature; it’s a project unto itself.

Preparing Ourselves and Our Clients

As soon as the spectre of content management creeps into any project, a shift needs to occur. We need to re-evaluate the scope, timeline, deliverables and cost of the project. Most importantly though, we need to inform the client about why the project has taken this dramatic turn. It’s not their job to understand why building their site with editing capabilities is such a significant undertaking; it’s ours. And if it’s our job to understand, then it’s also our job to help the client understand.

This may also mean providing alternatives that not only significantly reduce the cost of the project, but could almost completely cut us out of the picture. This is why we have to have the utmost confidence in our abilities, and we have to clearly demonstrate the value in every option we provide.

There are plenty of situations that can cause a rift in the business relationship before it even forms; this is one of them. We don’t want a lack of clear communication to lead to a client vs. contractor standoff, especially when reputations and paydays hang in the balance.

Now That We’re Prepared, Let’s Get Involved!

One of the key reasons for keeping that client/contractor bond strong is that if they are certain about having a site with a CMS, we’ll need their help at getting this project done right. Yes, we’re in this together now!

We’ll need to know every last item, feature, functionality, bell, and whistle, they’d like to have in the site. This includes their “maybe”s and even their pipe dreams. This includes the stuff they want to see live at launch, the stuff they might like to include down the road, and everything else ever. We’ll need to know how this content is going to be managed and by whom if possible.

Choose Your Weapon

We’ll need every one of those details in order to match the right application to the desired feature set. The list of available CMS apps is nigh endless, even when distilling the list down to the top notch options. Each one has its own set of out-of-the-box options and functionality-extending plugins and modules. Each one has its own installation, setup and templating processes.

And then, if there aren’t enough variables there, we still have to consider our own skill set, our timeline if we’re given one, our budget, and available technology.

Our short list would be as follows:

• Joomla!, one of the premier open-source CMSes. You can set up the basics in no time flat, but extensibility is hit or miss. User submitted extensions are a minefield, either giving you exactly the functionality you want or making your life hell trying to configure before uninstalling it in a fit of rage.
• Expression Engine, a robust license-based CMS built on the CodeIgniter PHP framework. The cost isn’t prohibitive, and easily slid into any development budget. The learning curve for this one is on the steep side, and I have a bone to pick with them and their sample content. But its power and potential are undeniable.
• Wordpress, which we mostly know as a blogging platform. The push for Wordpress to be recognized as a full-blown CMS is coming from a number of directions, and with the right plugins, it makes a compelling case for itself.
• Perch, for which I’ll admit I know embarrassingly little about its installation and implementation. But all it has to do is work as advertised and I’m sold. Potentially ideal for the projects where the site will be basic in format, but the client still wants to manage it themselves.

Plan to Execute and Execute the Plan

Even once we’ve picked our poison we can’t get dirty up to our elbows just yet. We still need to do our homework. Take the functionality wishlist from the client, find a viable solution for every last one, whether it’s core functionality, extensibility via plugin, or customized script (for the CMSes that allow it), and stick it in the budgets. Both the time and the cost budgets. We must provide as much feedback as possible about how things will work when we implement them. The client may be confused about some things, and disappointed about others, depending on their expectations. Again, our job to comprehend and make them comprehend. Besides, it’s better to dispel any misconceptions now than attempt to explain them mid-project. Clients can surprise us sometimes with their flexibility and understanding.

Once the myths and misunderstandings are explained away, and the entire project is laid out in painstaking detail, then we can get elbows-deep in this CMS project. The end result will be a much more cohesive work, and will progress much more quickly and sanely than trying to shoehorn content management into a nearly-finished website. And most importantly, we end up with the three hallmarks of a successful project: a happy customer, a happy bank account, and a tantalizing new addition to the portfolio.

Out with the old: wenex.wordpress.com

In with the new: wenex.com/wenblog

I am still also working on tidying up the layout for the blog, bringing it closer to a happy marriage between the Wordpress style we had, and the core Wenex layout. But then the best feature of the best sites are their malleability; the capability of the webmaster to make subtle yet powerful adjustments without adversely affecting the overall browsing experience.

Learning the Wordpress platform in general has been a great and rewarding challenge. I probably don’t need to sell a whole lot of people on the application, but would still highly recommend it for blog publishing. And I’m still constantly uncovering new functionality and utility, which only serves to strengthen my attachment to it.

And while I’m working on the blog’s layout and functionality, I just know I’ll be inspired to build on its content!

This article about Findability in particular drew my attention, as it represents an aspect of modern web project development so important, the fact that it’s still so overlooked boggles the mind. Findability bridges the divide between web design and SEO, something we’re pushing for ourselves with Smart Spark, and something that shouldn’t even exist in the first place. But it seemingly still does.

As the article indicates, there are many facets to a quality web project. It talks about steadfast elements like Project Management and Architecture, which are universal and permeate through any kind of project. It touches on elements that are often used to pitch ambitious web projects, such as Usability, Accessibility, Design, and even User Experience (often abbreviated as UX), the kind of sexy buzzwords that few may fully understand, but all “just have to have” in their corporate web presence. Just like Search Engine Optimization. And while Findability seems to be that perfect blend of web design and web marketing, it still gets lost in the shuffle.

Is it be cause the majority of the SEO realm is populated by professionals who are marketers first, and web professionals second, and they thus shy away from any aspect of a web project involving delving into the source code? And on the other side of the coin, is Findability shunned by the pure web professional because Optimization experts are viewed as virtual pitchmen or carnival barkers, sullying their pristine trade, and therefore dabbling in SEO is like sharing a pint with the devil? Either line of thinking is ironic at best, and destructive at worst. For the web to continue its evolution as a medium for information, interaction, and yes, profitability, the individual facets of any web presence need to become more intertwined, not more discrete.

Confession: I’ve been a bit enamored with the term Findability ever since I read it in Jeffrey Zeldman’s Designing With Web Standards. Search Engine Optimization felt a little like a flaky marketing term, meant more to sell the service than to describe it. Findability always seemed more practical and robust. Optimizing a site involves constantly adjusting your aim, attempting to hit a moving target. Building Findability into a site brings that target in closer, making it easier to hit on a regular basis and with success.

Opinions aside, many will wonder whether it will make a big enough splash to warrant attention from web professionals, particularly SEO professionals. Well it wouldn’t be like Microsoft to just throw a new technology out into the wild to die. They’ve clearly put a ton of marketing into it already. I’ve already seen ads on sites like msnbc (unsurprising) and facebook (more surprising). It will most certainly see a push from the company’s more ubiquitous software offerings, perhaps with the next IE as well as Windows 7. It may catch on pretty quickly, grabbing a significant market share in short order. If it doesn’t, expect Microsoft to keep pushing it until it does.

So in short, it would be wise to keep bing in mind while optimizing from this point on. Then again, that question may have been a non-question; it’s a search engine, so optimize for it.

Now, what kind of special needs does bing have? Two elements in particular jump right out of the SERP: the Quick Tabs and the Document Preview.

bing SERP - Quick Tabs

The panel to the left of the search results is a little reminiscent of  a categories menu in an e-commerce website. It gives you popular variations of a given search. clicking on any of the tabs will quickly requery bing with the additional keyword appended to your search.

This makes those all-important long tail keywords even more critical to search engine success. Imagine if a user were to click through those tabs and spot the same site at or near the top of each result. It’s an incredibly powerful means for exposure. Chances are, the Quick Tabs will also provide a little direction when doing keyword research.

The other feature of bing that really got me curious about working with it is the Document Preview. Point your mouse over the right edge of a result, and a tooltip-style window will pop up giving you more information about the page, beyond the META description. the Document Preview displays extra page content, including a list of key links found within the document.

bing SERP - Document Preview

This one appears to be a bit of a moving target. It doesn’t look to simply be the first x number of  words found in the body of a page, nor does it directly relate to anything within the META tags. But if it can be controlled, it’d be a golden opportunity to feed a user that much more information in order to draw them from that perceived safe zone of the search engine, down into the website proper. Then again, perhaps Microsoft’s algorithm for gleaning Document Preview content is intentionally oblique; as we all know, if it can be manipulated, it can and will be abused. Even so, though, it stands to reason that the best strategy will be to be even more vigilant about putting the best content possible at the forefront of the page. Having a good number of internal links handy seems to be wise as well, in order to take advantage of that “Also on this page” subsection.

Additionally, Microsoft has seen fit to provide webmasters with the capability to disable the Document Preview tab for any or all of ther pages in their sites. In my humble opinion, though, doing this for any site that is also being actively optimzed would be lunacy.

There are certainly more attributes to bing than these that make it an apt competitor in the search engine world. It also marks what appears to be a far more concerted effort than MSN or live.com in assessing user behaviours and addressing their needs.  The one realm it certainly has room to grow, however, is in webmaster/developer support, as their resources are easily dwarfed by those put out by the likes of Google and Yahoo!. Bing will most certainly evolve in this department, however, and as a result, more SEO tricks and opportunities are sure to trickle out.

So when we began to get our feet wet with SEO, I took the same approach. Checking out high-ranking sites to see how they do it. As we all know, though, there’s far more to optimizing a site than what one can find in the source code. But it still makes for a good starting point. And in the process I did discover something rather interesting, something that happens to be the exact opposite of what I was looking for. Many of these sites were actually succeeding in spite of their code, rather than because of it!

There seems to be a few levels of this transgression. The most glaring is where some sites are lacking the pure fundamentals. The stuff that can be considered best practices for both SEO and design. Images that were missing ALT attributes. Headings or important segments of text placed as graphics on the page. The complete absence of heading tags of any level (i.e. <H1>, <H2>, and on down). Pages without titles, or – almost as bad – with misspelled titles. These are the things that neither a designer nor an optimizer should be letting slip.

Then there’s the faults that may be a little more “high-concept”, and may boil down to design techniques and philosophies. But they’re still things I’d never expect to find in a high-ranking site. Bulky tables-based layouts, or CSS and JavaScript that ought to be kept in a separate file are all just things to get between the spiders and the meaty optimized content. And while I do know that W3C validation is not an outright requirement, I did come across sites that boasted valid markup, yet failed validation!

The realms of both search engine optimization and web site design are so vast, few companies are equipped to handle a significant portion of either, let alone both.  All the same, both industries will continue to coexist on many a project. In order to do so harmoniously, designers will need to learn how to gear their code toward quality optimization techniques, and SEO experts will need to learn what HTML formatting helps their cause, and in what ways. And if, heaven forbid, you find yourself wearing both the hat of web coder and search engine optimizer, the need to be well versed in both fields is that much more important, lest you wish to become your own worst enemy!

At first glance, developing a web site and publishing it to the Internet may appear to be fairly easy. So easy in fact, that many download a template offered by any number of ISP’s and others, slap together some words on a page, add a few images (usually poor quality), and put the creation on the Internet for the world to see. Unfortunately, many do-it-yourself authors have taken this approach by constructing documents that show very little consideration for the reader as well as poorly showcasing their products and services. When visitors come to a site, it’s important to have a look and feel that will carry throughout the pages to make the visitor interested and comfortable. We don’t want our senses assaulted.

Don’t get me wrong here, there are any number of well laid out, well planned, highly functional templates available on the web that can be used when budget is a factor. There’s a big difference between fiscally responsible and flat out cheap. If the template option is to be used, then as with every other aspect of creating a web presence, research the many templates that are available and choose the one that best allows you to incorporate the look and feel of your business and the message you want to convey to new and returning clients. Quite often, due to requirements involving advanced functionality, interactivity and complex visuals, your only option is to employ the services of a professional designer. Here again, research is key in choosing the right designer.

Your ultimate decision whether to do it yourself or to hire a professional designer rests in how honest you can be with yourself about your abilities and talents. Economic factors aside, there are literally thousands of small business web sites on the Internet that are actually losing business because of a poorly planned and designed site. By the same token, there are also a large number of do-it-yourself sites that demonstrate a high degree of planning, creativity, and marketing sense. To develop a truly effective web site, this last point is key. A commitment to do whatever it takes to properly develop an effective site must be made from the start, and that commitment must be carried to the end.

Regardless of whether you choose a template drive site or hire a professional designer, the old adage of “you get what you pay for” couldn’t be more fitting.

The closest thing we’ve ever done to this is our Knowledge base in prior iterations of wenex.com. Writing articles for it were a lot of fun, but recently, I wanted to do more with it. In particular:

1. Create some more “editorial” or off-the-cuff contributions to the Knowledge Base.
2. Allow for reader interaction (partly to see if anyone was actually reading some of these articles!)
3. Make it easier to search, cross-reference, and just plain find these articles.

And as the tired cliche goes, why reinvent the wheel? This wish list describes a weblog to the letter. So a weblog is clearly the way to go.

So please link us! Add us to your blogroll! We’ll be discussing the web, technology as it pertains to the web, business as it pertains to the web, and life, as it pertains to-well, you get the idea.

Best of all, if you would like to comment, we may take requests for future issues to address, as well as solicit additional contributors. This will be far more organic, more involved, and more dynamic than the Wenex Knowledge Base ever was, making it ever more exciting to work on as well.