Here I am giving a follow-on interview with Joe Santangelo of Cape Cod Newsmakers.

Some designers will make an effort to learn what is needed to actually build pages, figuring that the time invested to learn a new set of skills will pay off over time.

Other designers want to keep their focus on what they do best, such as print design and brand identity. They will approach a web designer, such as me, to execute a design that they create.

The challenge is that there are underlying mechanicals to web design, just as they are with print. A good graphic designer will by nature take into account such print mechanicals as gutters, facing pages, trapping, ink viscosities, press idiosyncrasies, paper type, varnishes, etc.

The web has it’s own set of mechanicals. For the graphic designer designing for the web, understanding these will make the process of working with the executing web designer much smoother. Let’s take a look at some of these.

Multiple Platforms and Browsers

Print is absolute. If you have taken every factor into account, your output will perfectly match what you have designed. There are no variations, no surprises.

Imagine while designing you don’t what kind of press will be used, or what size paper. Welcome to the web. The are multiple browsers that all follow a more or less standard set of rules, but each will have slight differences in how they render what has been coded. In addition, the mobile revolution is upon us, and a higher and higher percentage of people are viewing web sites on phones and tablets.

Fonts and Typography

All of the top tier graphic designers I’ve worked with are fanatics about typography. For them, it is a big part of any design project, and their attention to detail to font choice, line spacing, character spacing, orphans and widows is a matter of professional pride.

We’ve come a long way on the web, we’ve got control over line spacing and character spacing, and with the advent of Google fonts and other technologies, we’ve been freed from the tyranny of the classic family of about eight fonts.

Here is the big “but”. Text in web browsers behaves based on the rules of that browser. Firefox on a Mac can be slightly different that Internet Explorer on Windows. For the graphic designer manic about how lines break, this is highly frustrating. Add to this that the user can then use browser tools to change the size of the font, and you’ve now got a big can of typographical worms.

The best advice to the graphic designer when it comes to type is to realize that the web is simply not as precise, the control isn’t there. And trying to use print methods to solve problems, like forcing line breaks, can create other problems when type is rendered.

Stages and Curtains

Imagine if you didn’t know what size paper your user would have when designing for print. On the web, there are display sizes that range from cell phones to 30-inch panels. Creating layouts that work across all of these requires thought.

Most sites are built so that the content fits to a pretty standard width of about 960-980 pixels. This means the site content falls within the width of the least common denominator in monitor sizes today, which 1024 x 768 pixels. So what happens when a web site is viewed on a display that is 1980 x 1024?

If you think about the display as a stage, and the areas to the left and right (the standard today is that sites are centered) are the curtains. Depending on the size of the display, the curtains can be very wide, or not present at all. There are a number of creative ways to use the curtain space, which by nature should not contain critical content. Some sites (such as ours) stretch design elements across the full width of the screen, while centering the content in the sweet spot of 980 pixels. It gives the site a sense of openness. Other solutions include having a background image or pattern that repeats in the curtain area. Some sites will anchor a background image to the left or right edge of the stage, so it is always positioned at the far left or right edge of the browser window.

CSS: The Mechanicals of Web Design

The standard for web design today is for content to be separate from design. In other words content is built into one document (HTML usually), and the different elements are tagged semantically (based on their function-like header, body text, list, etc.). Then a separate document (CSS) provides instruction on how to style and display the content based on the tags. It means styles throughout a site can be changed globally by changing the CSS.

CSS is too extensive for a complete discussion here, so a graphic designer should have a discussion about the possibilities before design is begun.

Content Management Systems

More and more sites are now being built into a content management system (CMS) that allows the site owner to make regular content changes and additions. For design, this requires some thought about the behavior of the design. Often, different templates are created to handle different types of content for the site. But in general, designing areas of content should flexible enough so that the various likely content elements placed by the user will fit the design.

Design Tools

Most web designers composition their sites in Photoshop. For many graphic designers, Photoshop is simply a tool they use for manipulating images. Their primary layout tool is InDesign or Quark.

One of the big advantages to Photoshop for the web designer is the ability to create multiple layers and layer sets to drop different sets of elements onto a page. Photoshop also allows the web designer to define “slices”, areas that match the grid they will ultimately use to build a web page.

Many web designers don’t own Quark or InDesign, unless they also do print layout. Therefore, the graphic designer needs a method to transfer their design to the web designer. Often times they will create a PDF, but since this is a flat file, without layers, it makes it difficult for the web designer to extract the pieces they need. As a note, InDesign and Illustrator both export to a layered file Photoshop can read, though not perfectly.

The best option is for the graphic designer is to create their compositions in Photoshop. If they are going to be using a program that will export to Photoshop, be sure to set the resolution to 72 DPI. If the layouts will be in another program that can’t be imported to Photoshop, the web designer may need to rebuild your design in Photoshop. In addition to a PDF you provide, be sure to include raw source files and font specifications as well.

Behavior

One of the big differences between web and print is the behavior of the user. Web users are increasingly eager to get to information quickly, without barriers. Web users tend to scan information before committing to read, so the use of headlines and smaller paragraphs is essential for good conversion rates. The user may also enter the site through a page other than the home page, so each page on the site has to stand on its own to a certain degree and give the user a sense of the overall purpose of the web site. Users are also increasingly impatient will introductory animations that use Flash or other animation techniques.

In Conclusion

This is just a summary of issues the graphic designer needs to consider when designing for the web. A good web designer with experience in usability will guide and coach you through the process so that you get the best result possible for your client.

Never Said About Restaurant Web Sites

If you have a restaurant (or any business) and some of these hit a little too close to home, fear not. We can help you with that, and make sure that no-one writes about you in this collection of frustrations.

Below is a radio interview  about the Summit from the Sunday Journal on WQRC.

[audio src="http://www.koamedia.com/wp-content/uploads/2011/05/050111summit.mp3"]

• A web firm or marketing agency registered the domain name on your behalf and used the agency name as the registrar (this can happen out of ignorance, or more maliciously, as a way to maintain a hold on [you] the client)
• The company or part of the company changed hands and the registrant information was not updated

Every few months this issue pops up, and the resolution varies from pain-in-the-butt to there-is-nothing-we-can-do.

A couple of quick definitions:

• Registrar: the company that keeps track of the registration information for your domain name, such as Network Solutions, GoDaddy, etc.
• Registrant: the organization of record (with the registrar) that holds ownership of the domain name

Registrars allow registrations as long as 10 years (Network Solutions will now do a 100-year registration). A lot can happen during this time, and often the people who were responsible for keeping track of this info have moved on.

An ounce…

The best solution is prevention. Make sure someone in your organization is serious about monitoring your domain name. It is a vital piece of your organization’s identity and intellectual property. You should know:

• The name of your domain registrar (Network Solutions, Register.com, GoDaddy, etc.)
• The login/password credentials for your registration account with your registrar
• The expiration date of the registration

Verify:

• My organization is listed as the registrant (the entity that owns the domain name)
• My contact information (especially email addresses) are up-to-date

If you are purchasing an organization with an existing web site, be sure that the transfer of the domain registration is part of your agreement, and make sure there is a timeline for this to happen. Inform your attorney this is a vital transfer of assets. In fact, a tech-savvy attorney will likely be already aware of this and on top of it.

It’s too late

So what if you’ve checked your registration and found that it’s too late, you are already stuck with and out-of-date registrant?

Each registrar has their policies on how to transfer ownership of the domain name. Typically, if the current registrant (the one listed as the domain owner) is willing to transfer the domain, the registrar will accept documentation that authorizes the transfer of ownership. A pain in the butt, but doable with a bit of paper chasing.

Sometimes, the registrant of record is inaccessible, either because they are out of business, or they are unwilling, for whatever reason, to release the domain name. We recently had a case, as described above, where a previous agency had registered the domain name on behalf of the client, in the name of the agency. This previous agency has now been out of business for some time.

We called the registrar (in this case Network Solutions) and described the basics of the problem. At first, the NetSol rep was adamant, if the current registrant would not release the domain name, there was nothing NetSol could do, as they were the legal owner of the domain name. This was the there-is-nothing-we-can-do answer.

After explaining the agency scenario, the NetSol rep became more sympathetic. He suggested that the client contact NetSol directly, speak to a rep, and explore possibilities. There are rules are in place but there is room for negotiation.

So if you find yourself with a domain you don’t really own, first step is to try to can contact the registrant of record and see of they will be amenable to transferring the domain name to your organization. Whether the answer is yes or no, the next step is contact your registrar to determine what happens next. If yes, there will be paperwork and then a domain in your name. If no, then the registrar will tell you what steps they are willing to take to help you. You may need an attorney’s aid to get resolution.

Don’t lose it

A domain name costs very little ($10-35 annually), and sometimes that’s the value that’s placed on it. But for an organization that builds a brand around the domain (years of web visitors, advertising, print materials with the domain, email addresses) loss of the domain could cost many thousands or even millions of dollars. Be aware.

You can do what is called a WHOIS (who-is) lookup at Network Solutions (and at most other registrars). Unless the domain has a private registration, you’ll see the registrant, contact info (check those email addresses), and expiration date. Note: If the domain is registered at GoDaddy you’ll need to visit their WHOIS to get the pertinent details. If the domain is private and you own it, or think you should, give the registrar a call and work with them to gain access to your account.

After a meeting yesterday AM (April 1, and this is no joke by the way) my meeting colleague texted that my inspection sticker expired the day before. So I called the Honda dealer and they could take me right away (yay). Drove over, signed in the car, got myself set up in their waiting area (with wired and wireless Internet, thank you Hyannis Honda).

I hadn’t even composed my first email when my name was called. Uh oh, that can’t be good. Turns out in Massachusetts if your plates are faded or cracking or otherwise damaged they must be replaced. The inspection stations are required to take a photo of the plate as part of the process (no fudging from your friendly neighborhood mechanic). The Hyannis Honda service guy gave me instructions for going to RMV and replacing the plates, including ordering new plates with the same number (it’s a cool number we’ve had for 16 years).

Hyannis Honda service team – great customer service, friendly, prompt, informative. Big thumbs up.

Now it’s off to what may be the last RMV outlet on Cape Cod, in busy South Yarmouth. I hustled on over with a bit of trepidation. Going to the RMV is like getting your teeth cleaned, OK, maybe even worse. Walking in the door I was assailed by a poor ventilation system struggling with too many humans, eye-burning fluorescent lights and a line to the customer service desk with 20 people. Ugh.

After about 15 minutes in line I get to the customer service rep, who informed me that 1) I cannot get the same number I had before, and 2) I have to bring the old plates in to get the new ones. Ugh.

Fortunately there was an Ocean State Job Lot store (lots of crappy stuff cheap if you aren’t from these parts) next door so I bought a small adjustable wrench for $2.49. The floor staff was helpful and the checkout person was quite personable.

Thumbs up for Ocean State Job Lot.

Got the plates off the car, then back into the RMV. To my dismay, the line was even longer. Got out the iPhone and started a crossword puzzle.

But then I noticed something. There was a new customer service rep. She was whipping through the line, assigning renewals a place in registration queue, exchanging plates, and she was doing it all with a smile. In less than 10 minutes I was at the counter with my plates. On a chance, I asked if there was ANY way I could keep my old number. “Sure, we’ll just order those for you.” In 60 seconds she had taken my information, made the necessary computer entries, printed the form I’d need to get the car inspected and sent me on my way a very happy camper. I thanked her very much for her effort (but didn’t get her name, for which I am kicking myself). I swear the room suddenly filled with natural daylight and sweet smells of spring air.

What a difference a knowledgeable, caring, and motivated customer service rep can make. So wish I had her first, wouldn’t have had to take the plates off the car. But then I wouldn’t have this little parable. Even in the most mundane or stressful environments (and perhaps especially there) great attitude and sharp service can leave a very positive impact.

RMV: One thumb down and a big thumbs up for making at least one really great hire.

Continue the conversation: What customer service highlights have you experienced in less than optimal situations?

There are three basic learning styles:

Visual
Visual learners are just that, they use imagery to store information. They will have a good sense of color and design. They may not do well with large blocks of words, such as a lecture or large blocks of text (they do well with lists).

Auditory
Auditory learners are very good at sorting words. What they hear and read is easy for them to  assimilate. Pictures and other visuals not so much.

Kinesthetic
These tactile learners gain knowledge via experience. I am most like this. When we play games with our buddy Dave, he will take time to describe rules of the game. Not being an audio learner I tune out after a few moments. “Let’s just start and I’ll learn as I go.”

Naturally, most of us are a combination of these styles. For example, I am a strong kinesthetic learner, pretty good with visual, and poor with auditory (a long lecture is kiss of death for me).

It’s interesting that when we were creating e-learning programs the instructional designers would present chunks of information using a three-part method. They would describe the idea (auditory), show an example the idea (visual), then have an exercise for the learner to interact with the idea (kinesthetic).

In developing content for our own projects it’s helpful to think about these different learning styles. If we are auditory learners we might easily write way too much content for one of the other learning styles to absorb. So being conscious of breaking content into smaller chunks and using more lists will make it more readable. Now, it is also important to know your audience. Technical information is usually pretty dense, and those who are attracted to that field probably tend to be auditory learners.

Another example is the photographer or artist who wants no words on their web site. “Let my images speak for themselves.” Well, yes, to a visual learner they will, but to an auditory or kinesthetic learner it will be foreign territory. They may need some verbal clues to understand what they are looking at.

How can you use this when developing content? Try to think of a balance. Include pictures and “visual” block of text (short paragraphs and lists) for the visual learner, provide drill-down information for the auditory learner who wants greater spans of words to absorb, and include demonstrations either with text, pictures or video. If there is a way the user can interact with the content, this will be of benefit to the kinesthetic learner.

What experiences have you had with developing content for diverse learning styles? Kinesthetic minds want to know.

Welcome to the world of web design, 2010.

Two incidents recently reminded me of the jungle. Both remind me how the naivete of the web design client can have perilous results.

The Money Tiger Chases His Tail

A client approached us to take on management for a site that was built by another developer. Not uncommon, clients move from one developer to another for a variety of reasons. Typically the receiving developer will contact the original developer and request whatever they need to make the site run; web site docs, database backups, source files. Developers tend to be pretty cordial with each other and it isn’t uncommon for those in a geographic region to play a bit of client musical chairs. They may even be friends and have discussions about various clients they have all shared (this is addressed a bit more in the second story).

What many clients don’t understand is that the web design industry has become more fragmented and specialized. Larger firms are not as common, instead being replaced by smaller shops of one or very few people. Often there is a specialty, such as interface design, or content management development. What this means is that when you hire a developer to build a web project for you, he/she may then go out and hire subcontractors to handle those areas that are not the primary developer’s specialty.

Back to the client. They hired a firm to build this site (let’s call them firm A), who then hired another firm (B) to do part or maybe even all of the work. The site is finished. In good faith firm B releases the materials for launch. Client pays firm A. Firm A does not pay firm B and does not make acceptable arrangements to do so. Firm B is naturally hesitant to now hand over source files to a third-party company (us) without getting paid by firm A.

The client is naturally frustrated by all this since it delays their objectives. Fortunately, this story had a happy ending. Firm A paid firm B, files were delivered and the client left the jungle with just a few thorny scrapes. It could have unfolded into a long drama.

Moral: Know the arrangements your developer has with his vendors. These relationships are common and useful. They are also often casual.

Secrets in the Jungle

A developer colleague told me a story of a new prospect he was speaking with on the phone. This was an initial conversation. During the course of the conversation the prospect offered FTP access to his web site so my pal could see how it was done. FTP access is pretty much keys to the kingdom for web site design. Being the good guy that he is, my pal told the prospect that this was a bad idea, and that someone of lesser character could use that information to really mess things up.

Your web site name and the files and content that make up the web site itself are your intellectual property! It should be protected with the same vigilance as you would your car. It is a good idea to check periodically (annually is great) to be sure the WHOIS information (check your info) on your site registration has your current contact information. You should know who your domain is registered with and your credentials for accessing that registration. Think of this as your car’s title.

This makes FTP info your car keys. This information allows access to all the files on your web server. Information can be changed and files can even be deleted completely (or even replaced with something less… desirable).

You wouldn’t leave your car with just any mechanic. A good developer will understand if you request a Non-Disclosure Agreement or some other such document before proceeding with sensitive data. An NDA will also help protect you from the natural gab that happens between web development colleagues in the course of business.  Ask the developer how they protect sensitive data.

Moral: Be aware of what is valuable and take steps to protect it. Seek out those who can provide disinterested advice.

What’s Your Jungle Like?

What’s been your experience, either as a client or a developer? As always, your shared stories and comments enhance the conversation.

The guys at time tracking/billing software company Harvest wrote a thoughtful post on their blog about Clients from Hell. I enjoyed their perspective and the comments that followed. I was motivated to comment myself, which is quoted here:

I, too, have browsed (OK, obsessed) on the CfH site. With 15 years as a web designer I could appreciate and relate to many of the stories. But there are some great points not only in the article but some of the comments. It is cathartic to talk about the issues. We do it internally in our organization (though I always tried to maintain a “regardless the client is paying our bills” attitude) and it happens amongst my peers.

My impression of CfH, after LMAO, was that most of these clients were simply ignorant of the process. I have had a mantra for the past ten years – Manage Expectations. The more a client can be educated and informed up front, the more smoothly the relationship will unfold.

Granted some people are simply adversarial. Regardless of your industry, they will occasionally crop up and try to ruin your day.

One of the values, I think, of CfH is an exposé of the issues designers face. If approached from an attitude of “this is amusing, now what can I learn from it”, it is useful.

It’s easy to become jaded as we mature in our work. The stories mount. But it’s important to remember that our job is not simply to design, but interpret. And that requires skill sets that go beyond design.

If you are a client of a designer, do not be embarrassed or angry about Clients from Hell. It is, as one commenter noted, the water cooler for designers to blow off steam. If you were to approach it from a “what can I learn from this” attitude (as I suggest designers do) then it can only help the relationship between designers and clients.