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.

Before I kick off my spiel, here is the link to the List of Web-safe Fonts

Typography is an important area of design, even on the web. Fonts, leading, letter-spacing, and other typographical choices say things about your site’s character and content and influence the likelihood that site visitors will actually read your content.

Typographic Choices Are Different on the Internet

It’s different getting typography right on the web. The resolution is much, much lower than print (72 dpi instead of at least 300 dpi in print). You run into problems with fractional pixels. There’s no easy method for kerning. And many typographical choices are dramatically modified or even eliminated because users can resize and reflow the text.

The CSS2 Spec Has Helped

The CSS2 Specification has controls for some of the most important typographical decisions—there are controls for leading (line-height), letter-spacing, font size, and others. Most modern browsers support these typography declarations. Web typography has moved forward a lot thanks to the acceptance and implementation of the CSS2 Spec.

Font Choice is Abysmal on the Web

Really, the most important hurdle in web typography is font choice. There is currently no universally accepted method for embedding fonts on a page or site, and thus web designers must create images with their text in them (there is a wide selection of text-image replacement techniques) or they are limited to the fonts that can be found on the majority of relatively modern Windows and Mac systems (without even thinking about the other operating systems out there, like Linux). It’s a pretty short list.

The List of Web-safe Fonts

Alberto Martinez has maintained a very good list of universally available fonts and Windows/Mac font pairs that are very good approximations of each other. Here is his List of Web-safe Fonts.

If you exclude symbols and webdings, there are 14 total fonts on the list, many of which are very similar. There aren’t many people who are going to notice a huge difference between Times New Roman and Palatino Linotype, for example. The fonts with the most character are Impact, to be used sparingly, and Comic Sans, to be used even more sparingly.

On the bright side, it doesn’t take long to learn what your font choices are, and the web is a much more consistent place because of the limited font selection. That being said, I still hope that someday soon we’ll be able to see some kind of advanced font system in place that will unlock the world of fonts to web typographers.

Every once in a while, it’s important to step back and evaluate how you are doing when it comes to the fundamentals of your field or industry. Because my field is Internet marketing and websites, I came up with 10 questions you can ask yourself to determine how well your site and online strategy are working.

10 Website Questions

1. What kind of Web presence do I need?

   Don’t worry too much about what kind of web presence you have just yet. Think carefully about what kind of presence you really need. Do you need an informational site, an e-commerce platform, or a community or network site? Which suits your business best?

2. What does my website need to accomplish?

   Is your site primarily meant to distribute information? Sell a product? Get subscribers? What are the end results you need to achieve?

3. Who do I want to visit my site?

   Think about your ideal audience. Are they tech-lingo-speaking engineers? C-suite managers? Teenage girls with generous spending habits? Do you need to serve more than one audience? How will you serve multiple audiences? Some reading about personas might help at this point.

4. Who is visiting my site?

   Do you really know who is visiting your site? This can be tricky to determine, but there are clues to who it is that is viewing your site. A web analytics package will go a long way in helping you to determine what content and which calls to action are resonating with your current audience. You can also ask your visitors directly—a short, online survey can do a lot to help unveil your visitors’ feelings and background.

5. How will I drive traffic to my site?

   There are many methods for driving traffic, and you need to figure out which will be most appropriate for your site and which are the highest priority. Natural search engine results? Pay-per-click ads? Viral, word-of-mouth marketing? Links from related sites? Press releases?

6. What is it that I want my visitors to do or learn?

   These actions are the baby steps towards achieving your main purpose in #2 above. Do you want your visitors to read a certain page, download a whitepaper, and then contact sales? Do you want them to read product reviews, look at a photo gallery, add a product to their cart, and check out? What are the most important actions that lead to achieving your goals?

7. How can I engage my visitors?

   Often the problem with a site is not getting visitors to come to a site, but making them stay. How can you connect with your audience and encourage them to stick around? What (small) set of calls to action are going to be used to motivate your visitors to explore, learn, and enjoy your site?

8. How can I increase repeat visits?

   How do you make a website “sticky?” Is your site a one-trick pony? Does your site have more to offer visitors at a later date?

9. How will my website be built and managed? In-house or outsourced?

   Once you’ve determined what your site needs to be, you need to think about how it will be built and maintained. Remember, it’s often the case that whatever site and system you have now is a sunk cost and therefore shouldn’t unduly influence your decision about what to do going forward.

10. What kind of website can I afford?

    Once you know what you need and want, you have to look at what you realistically can have, at least in the near term. You may have to prioritize your goals and simply try to accomplish as much as you can with your limited resources.

More Than 10 Answers

These 10 basic website questions don’t have perfect, unchanging answers, even for the same company at two different times. The best answer often changes with growth or challenges your company is facing. Each question is also open-ended, so there are multiple answers to each one. The main point is simply to think about what’s important regularly so that your company or site follows its optimal path on the web.

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.

The Internet is a fantastic place. Websites are simply clamoring for your attention, and many of them will give you something for free just for stopping by. You don’t have to pay to access most web sites, either. You can browse or search for just about anything and find a free resource that fills your needs. Articles, indexes, ebooks, .pdfs, and images are everywhere.

Accessing these resources is easy, legal, and free. How you use these materials, however, can be like walking a tightrope—there are lots of ways to screw up, and many of them hurt.

Images Are Easy to Grab

If you need images for a project, it’s really easy to grab images off the web using Google Image Search, Microsoft Live Search Images, or any stock photo site. Some of them even come formatted just the way you need them. With others, a little work with a smudge tool or creative use of cropping removes watermarking and makes the images look just like they came from your copy of Photoshop or digital camera. Is it ok to gather images this way? We have to look into the definition of a copyright to know for sure.

What Is a Copyright?

Copyrights are intended to protect a creator’s rights to the content he or she created, especially with regard to financial compensation for the use of the content.

Private incentives to create are supported by the exclusive rights that owners of copyright enjoy. Copyright owners (or their assignees) have the right to carry out or authorize reproduction and distribution of their work; preparation of derivative works; and, for literary, musical, and various visually based works, the public performance or display of their work. (1)

How Do I Know Something is Copyrighted?

The U.S. Copyright Act states that a copyright exists once an “original work of authorship [is] fixed in any tangible medium of expression . . . from which [it] can be perceived, reproduced or otherwise communicated.” (2) Thus, images “fixed” to files and hard drives are copyright, by default and without notice, the moment they are created. Everything on the Internet is copyrighted—how you use content is simply a matter of what permissions the creator has given you for its use.

Infringing on Copyright Holders’ Rights and the Consequences for Doing So

Using images from websites found through a search engine image search or from stock photo sites without permission or payment is infringing on the copyright holder’s rights. This includes creating derivative works.

There are some exceptions to copyright rules that fall under “fair use,” but most of these are in relation to educational purposes or making copies of something you already paid for the right to use. It you are going to use an image or other content for monetary gain (like on a blog with ads), then you definitely need to follow copyright law.

If you infringe on a copyright holder’s rights, there are three general outcomes. You might not get caught, but then you have to live with knowing you broke the law. You might be caught and asked to pay fines or damages. Finally, you might get caught and have someone take you to court.

Getting caught does happen, too. I have recently seen at least two companies that have had to pay fines. One had to pay $240,000 for the use of images it didn’t have the rights to. It nearly sank the company.

Play by the Rules

It’s more expensive to get caught than it is to pay for images up front, and all three outcomes for infringing on copyright holders’ rights reflect very poorly on your character. If you respect copyright holders’ rights, then you can justly expect others to do the same and you can morally enforce your rights. You could also put a line on your web site or on your work that states you comply with all copyright laws. This marketing statement may help reward you for following the law. Finally, following copyright law will let you be comfortable in your own skin—you’ll be able to feel that you are an honest person.

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.

Vector graphics could be one of the best things to happen to the web. Think about it—any user of any device could scale the entire site, including graphics, text, and rendered HTML elements to the size he or she wants without mucking up how it looks. Only photographs and other images that don’t convert well to vector formats would remain a problem.

Scalable Vector Graphics

The .svg file format is based on the recommendations from the W3C for scalable vector graphics. It’s basically an .xml format for describing two-dimensional objects.

So far this open-source .xml file format works very well. It produces sharp images that can be scaled as necessary. Unfortunately, support for the .svg file format by browsers is spotty at best. You can’t count on .svg support even as much as you can count on universal .png support (although .png files are supported by most modern browsers, IE 6 being a notable exception). We’re gonna have to wait, for the time being, before .svg support is universal enough to start changing how we look at web design.

Other Uses for .svg Files

Although vector image files can’t be directly applied to web sites today, they are very useful for other web design tasks. For example, have you ever needed a slightly larger or smaller version of a web graphic, such as a button, icon, arrow, or logo? If you have created your image as a vector, it’s relatively easy to scale your image to the size you need.

Many vector graphics programs cost a pretty penny. Adobe® Illustrator™ costs $599 or comes as part of an $1199 bundle. However, for .svg work, there is an open source program called Inkscape that I have found to work rather well. I’m no graphics pro by any means, but I have been able to create some cool stuff for web sites already. If you compare the different versions of an RSS feed I made for DiamondLime, you can see how the image quality is preserved whether my final image is 32 or 256 pixels wide:

Even if .svg images can’t be directly applied to a site today, they are very useful for design related tasks where resizing, transparency, opacity, gradients, and more are important.

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.