How do you go about interviewing a web programmer to make sure that his code isn’t as rumpled as his shirt?

We’ve been hiring at Sebo Marketing, and my experience leads me to focus on four main areas when I talk to potential hires:

Four Parts of a Web Programmer Interview

1. General Knowledge

   It’s usually a good idea to try and take stock of a candidate’s knowledge by asking some basic questions that cover a wide range of topics in web programming to test the breadth of his or her skill set. The W3Schools has quizzes for XHTML, CSS, PHP, and many other topics. These aren’t a perfect measure of someone’s knowledge, and some of the questions aren’t all that great (Like the one in the XHTML test that asks whether or not XHTML will replace HTML), but they can help you get a general idea. If your candidate misses more than 5 or 6 questions, you may need to keep looking.

2. Specific Task Performance

   I try to give interviewees a specific task or small project that will utilize a mix of skills to solve a (limited) real-world problem. They don’t even have to finish the task—it’s useful to see how far they got and how they were going about solving the problem.

3. Portfolio of Work

   In order to learn web programming, one must do it. There’s no escaping it. If potential hires don’t have a portfolio or aren’t willing to share it, they may never have done any real work. Even first-time hires need to code something that they can show. In my mind, a candidate’s portfolio is the most important gauge of ability in the interview.

4. Overall Fit

   Even if a candidate can write AJAX in his sleep and is helping write the upcoming CSS3 spec, he still may not make sense as an employee for your company. If salary/wage requirements are too high or if a part-time hire can’t work the proper hours due to scheduling issues, for example, then things just won’t work out. Candidates that aren’t a good fit for your organization are hard to pass on when they are well qualified, but trying to compromise on requirements and needs so they can work for you is a dangerous thing.

You’re Hired!

If your candidate can answer general web programming questions, solves your sample task, has a portfolio of well-crafted projects, and fits well with your organization, offer him or her a job! If there are a few problem areas, see if the situation can be managed through training, trial hire periods, or lower pay. If there are lots of red flags, many missed questions, and no samples of previous work, be warned! Good luck with your interviews.

Google recently came out with a new tracking code for its Analytics service. It has a cool new feature, but validators also choke on it.

Let’s Fix the Code

Virtually all browsers in use today understand that they should ignore what’s in between <script> tags. For the most part, we don’t have to insert comment tags <!-- --> any more. Unfortunately, most validators still choke on what they find in between script tags. So technically, you could leave comment tags out, but in practice it’s very annoying to have the validator spitting back a big pile of errors.

To “fix” Google’s tracking code (which in theory should be perfectly fine) so that it doesn’t result in validation errors, simply add comments around the contents of the script tag, like so:

A Cool New Feature

The nicest feature of the new Google Analytics tracking code is that it has Javascript code that automatically detects whether the page the code is on uses a secure, https:// connection or a normal, http:// connection. No more having to write your own detection code to include a different script.

Personally, I think adding comment tags is a small price to pay to get a tracking code that validates and automatically detects the transfer protocol. Thank you, Google.

If you haven’t learned to do a CSS rollover effect yet, it’s time to learn—they’ve become a main-stay of modern web design and do just about everything better than a Javascript rollover (there are a few exceptions, which I will discuss briefly later)

The Basics of a CSS Sprite Rollover

The basic concept of a CSS sprite rollover is to assign a background image to a link. This image contains the possible states of the link rollover. Based on which “state” is being used, we shift the background image around to display the correct portion of the image.

For example, the Lime Blog RSS feed icon is a CSS sprite rollover. Here’s the image used to create the effect:

In the default state of the link, I display the normal version of the RSS logo. The rest is hidden beyond the borders of the link (illustrated in black) like this image illustrates:

In the highlight or selected state of the link, I use the same RSS logo as a background, I just shift it so that the hover state is displayed and the default state is hidden:

Here’s the basic HTML needed:

And here’s the important part of the CSS:

Benefits of a CSS Rollover Using Sprites

There are many benefits to using CSS sprite rollovers, especially for most simple rollover applications:

• Reduce page load time

  By reducing the number of file requests and the overhead associated with each file, you reduce the load on your server, resulting in a snappier site.

• Automatic pre-loading of alternate states

  The alternate states are included in just one image that is loaded for the initial state. Once the initial state is loaded, all of the states are loaded.

• Simple updates

  You only have one image file and one CSS file to edit.

• Clean, semantic HTML

  Most Javascript rollovers result in bloated, ugly code with behavior and presentation mixed in with the content.

• Improved accessibility

  Some people have their Javascript and/or images disabled. Rollovers based solely on Javascript would break, whereas the CSS rollovers would degrade gracefully.

Shortcomings of CSS Sprites

There are a few shortcomings to using CSS to execute rollovers:

• Lack of transition effects

  Using animated .gifs, you can create some transitions, like the tabs at the bottom of the page on Corda.com, but you have to use separate images and they get big quickly.

• Limited states

  For some complex applications, it’s nice to have multiple states to an object, and CSS is limited to link, visited, hover, and active.

For most intents and purposes, however, CSS is lighter, faster, and cleaner for a rollover, and a sprite-based rollover is one of the best CSS rollover methods.

This may be old news for most of you, but Apple has released Safari for Windows. You can get the download here.

Lots of people wrote about how increasing support for Safari increases support for the iPhone development community…

I’d like to focus on what it means for the web design/web standards community.

Simplified(?) Testing

My initial impression, like many others’, was to rejoice in the fact that I can now test Safari without having to buy a Mac. That impression turned to horror as I thought things through—what this really is is another browser, adding another layer of testing and complexity to my life. However, we can hope that Safari for Windows closely, if not identically, mimics the rendering behavior of Safari on a Mac.

Seeing as how I don’t own a Mac, I have no idea whether or not Safari is the same (or at least close) on both operating systems. Does anyone know?

Web Standards Support

Two months after Safari’s release, I have not heard of or encountered any real problems with Safari. It renders web pages in essentially the same way as Firefox and Opera—standards-compliant, that is.

Future Issues

Well, truthfully, going forward we hope there will be fewer and fewer issues. I’d love to see more and more browsers following tighter and better-managed specs for (X)HTML and CSS. Which browser you are using should fade in importance as far as web standards are concerned. The fact that Safari was released and then downloaded over 1 million times in 48 hours and hasn’t made any waves or compatibility issues is an encouraging step in that direction. Congratulations on a solid launch Apple, even though I haven’t made it my primary browser.

When it comes to cross-browser compatibility, no browser causes more pain and suffering than Internet Explorer—no version is as standards-compliant as Firefox, Opera, or Safari, and every version has its own unique bugs and issues. The majority of CSS hacks, testing, and workarounds are for Internet Explorer. Testing has been a major pain, requiring a different computer or meddling with the registry for each version of IE.

Finally, Test IE7, IE6, IE5, IE4, and IE3 in Parallel

Yousif Al Saif built upon some others’ work to create an installation for each of the major versions of Internet Explorer since IE3. Read about it here, and download the multiple IE installer here.

Power Testing

The truth is, almost no one still uses IE 3 and IE 4, and very few people use IE 5. Most of your testing will involve IE 6 and IE 7, with an occasional nod to IE 5.5.

I installed IE 5.5, IE 6, and IE 7 on my machine. Everything is working fine, without any crashes, hanging, or strange behavior.

Testing is powerful and easy—I can open all the versions I want to test at the same time. I make a change and then hit Alt-Tab to switch through all the browsers on my machine—Firefox, Opera, and IE 5-7, thus covering about 95% of all the browser users out there and catching nearly all known (and still important) cross-browser issues.

I just need a Mac so I can test small changes on Safari (For final testing on a Mac (not incremental), see my post about testing on Safari).

We’ve released a new version of SeboMarketing.com!

Old Site

The old version of SeboMarketing.com had a number of problems with it. Many of these problems fell into “The cobbler’s children have no shoes” category—as Internet marketers, we know better than to make some of the mistakes that were being made, but we’ve been so focused on our clients’ sites that we neglected our own.

Click to Enlarge

Table-based Layout, Invalid HTML

Our site was put together with a dated version of DreamWeaver, and so the layout was based on a series of nested tables and the HTML was awful. The use of CSS was limited, and the code was bloated and full of presentational elements and markup.

Too Little, Stagnant Content

The overall size of the site was less than 30 pages. The content hadn’t been updated to show some of our new clients, any news from Sebo Marketing, or even new copyright dates.

Insufficient Navigation

Perhaps the greatest sin for a site that is meant to have a clear conversion path and to present Sebo Marketing in a good light is the fact that its navigation was confusing and inadequate. It was difficult to find the client bios or case studies that had been placed on the site, and it was nearly impossible to know what part of the site you were on.

New Site

The new version of SeboMarketing.com is much improved over its predecessor. Besides a visual update, we have made the following improvements:

Click to Enlarge

Valid HTML, CSS Layout

Because it’s a new site, there are probably some few mistakes left lurking in the HTML of the site, but overall SeboMarketing.com is now 98% valid. The layout and presentation have been effectively separated with the use of stylesheets. Maintenance and the next visual update to the site should be a breeze.

Updated Content

We updated and added a lot of content. We have all of our clients whose sites we’ve completed listed, and we have case studies to show the success we’ve had since we last updated our site. We’ve also posted some informational articles about different aspects of Internet marketing.

Clear Navigation

The navigation on the site is leaps and bounds better. A more complete list of options is presented, and a highlighting scheme for showing the visitor where they are on the site has been put in place.

Additional Credibility

Finally, since we last updated our site, Sebo Marketing has been recognized as an Adwords Qualified Company by Google. Pay Per Click advertising is an important facet of our service offerings, and being an Adwords Qualified Company strengthens the trust that our clients, both current and potential, can have in us.

In conclusion, we’re happy with our new site, and we’d love to have you come take a look sometime.

As a web developer and Internet marketer, I frequently have work that I’m doing that I want to preview and that I don’t want the public to see yet. How can you do testing and writing locally and still see what the public will see?

Install a Local Server

One of the best ways is to install a server that will run on your local machine. That way, you can use the same stylesheets, images, HTML, database schema, etc., that you use on your live site to preview your work without letting everyone see your mistakes before you can fix them.

XAMPP is Easy

Many, many web servers are LAMP servers—Linux, Apache, MySQL, and PHP. The only problem is, most of us use Windows on our machines for day-to-day use. Luckily, there are several solutions for running Apache, MySQL, and PHP on a Windows machine. My favorite is called XAMPP—it’s specifically designed to be easy to install and use.

In fact, beyond unpacking and clicking install, there is only one configuration option that I would recommend changing—block access to your server except from your machine. XAMPP installs a real server on your machine, and if you don’t turn off access, anyone looking for random servers could find it (think spyware, hackers, etc.). Luckily, configuring access to your server is easy.

I love XAMPP because I spend my time on my sites, not in tinkering with obscure Apache, PHP, or MySQL settings. If you need to test and write locally, consider XAMPP.

I recently had a fun experience—Michael Eagar and I sat down to talk about web design, coding, and templates. He asked me to show him some of the things I was talking about, and so we opened up a text editor and I started to write the code for a basic two column template from scratch. I didn’t refer to my normal templates or previous designs other than for a few hard-to-remember strings (like the text for my XHTML Doctype).

I had an amazing time and I produced amazing code.

By starting from scratch with my web design and doing my best to teach Michael some best practices, I was able to focus on the best way to do things, not just the way that everything was already done on my site and that would be a pain to change.

We cranked through the HTML and CSS, including personal instruction and most of the visual layout (sans-images) in less than two hours.

Visually Starting From Scratch

Avalonstar, SimpleBits, and others have recently toasted the CSS file for their sites and thrown all their presentation out. They did this as a kick in their own pants to get them moving and working on a new design that they will (hopefully) like better than the old one. Both Bryan and Dan talked about how liberating it was to start fresh on a new design for their site.

Mini-Paradigm Shifts

Coding from zero, or designing from a blank slate, isn’t always what’s necessary. In fact, be very, very careful not to discard all the things you’ve learned from your previous designs. However, being willing to question or let go of previous designs, methods, and ideas about web design can be liberating and trigger a mini paradigm shift—you may discover new ways of doing things that will increase your productivity and your designs’ effectiveness. So take a step back every once in a while and examine how things are done. If you really are doing things the best way, then you can be confident in the current system. If you aren’t, then you’ve found (and can begin to remedy) a potential problem or bottleneck.

There is a somewhat recent movement in the web development world that is surrounded by quite a furor—the web standards movement. With the advent of browsers that do a half-way decent job of supporting CSS, many web developers claim that it is possible to build web sites that effectively separate presentation from content. This would allow you to write the HTML for your site once and update the appearance as much as you like without changing the code for the site.

Unfortunately, the separation of content and presentation is a myth.

For now.

The problem is that the capabilities of CSS are limited enough at the present moment that it is often hard to have enough “hooks” or HTML elements to apply CSS styles to, presenting web designers with a dilemma—either limit the range of achievable presentations or clutter page code with some non-semantic, presentational/layout HTML tags.

Web Design Heresy

There are many supporters of the web standards movement that would beg to differ and would call me a heretic. However, I am one of the strongest supporters of the web standards movement. I strive to separate my content and my presentation. I read about every method of overcoming browser deficiencies and inconsistencies that I can find. I wish that browser support for standards was better and that all designers would (eventually) throw away the use of tables for layout purposes. I would agree that separation of content and presentation has come a long, long way. I simply chose to present a controversial point of view in order to prove a point—there are times when it is impossible, or unreasonably difficult, to achieve certain presentations without more CSS “hooks.”

Extend the Power of CSS

Our pie-in-the-sky dream is that one day, hopefully sooner rather than later, CSS will have new abilities and powers added to it and supported in browsers that will make the separation of content and presentation and the creation of killer designs easier. Rounded corners. Equal-length columns. Minimum widths. No more hacks.

That day, however, may be a ways in the future. So what do we do in the meantime?

Those who fight the web standards movement usually claim that web standards supporters are over-idealistic and don’t focus on the practical issues of every-day web design and site building. I would strongly disagree. I code within the limitations of day-to-day, deadline driven, limitation riddled web design every day. I know many others who do as well. We have found ways, in a manner similar to those who started using tables for layouts, to cope with web design problems.

The Separation of Content, Presentation, and Layout

Because certain presentations, especially when it comes to layouts, are currently impossible or unreasonably difficult to implement using semantic HTML and CSS alone, many web developers have begun to separate their layout elements from their content and presentation. This allows them to achieve design goals and still make easy changes later. There are many ways to do this, including the following:

• Class-name-based Search and Replace

  By naming each layout-specific element carefully, developers can do global search and replaces to make changes to layouts. Obviously, this is a very cumbersome and error-prone solution, but it allows developers to achieve the necessary presentation and move on with some kind of prayer that they will be able to modify all their layout elements should change be necessary later. Also obviously, use this solution as a last resort.

• JavaScript Insertion

  Clever JavaScript coders have written scripts that will identify certain elements and then wrap them in non-semantic layout code. Some argue that this isn’t true separation of content and presentation, but it counts—the presentation is only meshed to the content at the browser level (not in the content source file), and the JavaScript can be turned off, leaving perfectly semantic code. This is a pretty good stop-gap measure to put in place while we wait for CSS and browsers to improve.

• Inclusion of Layout Elements

  This is the server-side version of JavaScript Insertion—files are “included” at key points in the content source. These files contain the layout and presentational, not always semantic, HTML and CSS. They can be changed later to reflect improvements in CSS and browsers.

• CMS-based Templates

  Templates are easily the most poweful method of separating layout from content. Because the system takes care of the leg-work of changing the pages based on a certain layout, these pages will be super-easy to modify and to update with more compliant HTML and CSS later.

These methods all rely on HTML and CSS for layout purposes. We don’t need a new technology to make this possible—I would simply say that there is a third class of information that needs to be considered. We have Content, which is what the elements say. We have Presentation, which is what the elements look like. And now we need to have a more robust system for Layout, which is where the elements are.

The Persistence of Separation of Content, Presentation, and Layout

There will always be some kinds of wrapper elements in HTML—these wrappers give semantic meaning to the HTML. They define what elements belong together. These wrappers can be used for layout purposes as well. But if the relationship of wrappers to elements ever changes, then it is very beneficial to have a method for easily updating the layouts of web pages. That’s one reason CMSs have become so popular. A web standards-compliant CMS or template system is basically a must for anyone building a site with more than 3-5 pages per layout or more than 10-15 pages total.

Because the locations of elements will change (independently of their content or appearance), HTML and CSS for layouts need to be managed separately, just like content and presentation are separated. Separation of content, presentation, and layout will further improve the power and robustness of web design, making site creation and maintenance easier and freeing up precious time for other important things.

I’ve spoken about the virtues of clean, semantic, valid markup before, and lots of designers recommend that you validate your code. What doesn’t seem to get addressed, however, is how one goes about validating the HTML of a web page.

A Major Hassle

It used to be that you would have to validate pages one by one using the W3C’s free validator tool. This method works, but it sure can be time consuming, especially if you have a large site or a site that is mostly valid already. Getting through a lot of pages or finding the few that have problems is very difficult this way.

Validation on the Fly

Luckily, Marc Gueury decided to do something about this important but difficult process. He wrote an HTML Validator Extension for Firefox. It’s based on HTML Tidy—basically, you install a validator in your browser.

The validator extension for Firefox is great because all you have to do is browse from page to page to see which are valid and which are not—an icon in the corner of your browser tells you whether your page is valid, contains warnings, or contains one of two kinds of errors (errors that the extension knows how to fix and errors that it doesn’t). To see the warnings and errors, you simply need to view your page source. This all takes place on your machine, so there is no external server to fiddle with or wait for.

Accessibility Evaluation, Too

The HTML Validator extension also has accessibility evaluation built in—if you want to see how accessible your site is, you can turn on evaluation for one of 4 different levels. This part of the tool is helpful for a quick look at how accessible your site is.

Not Quite Perfect, But Close Enough

The validator extension isn’t quite perfect—occasionally it will make mistakes (especially with heavily nested elements) and it seems a little bit “touchy” at times, but for the most part it is a powerful and convenient way to validate your website. I used it to make my site valid, and I wasn’t even sure I was going to validate it at all before I found the HTML Validator extension.