SiteName

1 Comments | Posted on September 18th, 2011

Just recently, a big change came along in web design; Arguably the biggest revolution since modern web standards in the early 2000's.

Responsive Design has been invented. It's a term used in new age architecture to describe buildings that behave 'responsively'. That is, they adapt or respond to conditions such as the amount of people in a given room, for instance. They will automatically change heat, air and even room size (yes, the walls expand and contract!) to accommodate more or less people.

And just like Responsive Design in architecture, when it comes to the web, responsive design allows websites to no longer behave like static online brochures that scroll, but rather they adapt by expanding and contracting, resizing themselves to appropriately fit a variety of screen sizes. So for example, a website might have five columns when viewed on a 52" wide screen, but when viewed on a laptop it may scale down to three columns, two on an iPad and down to one column when viewed on a smart phone.

The best way to illustrate this is by viewing this gallery of well-designed responsive sites. You'll see four views for each site, from wide screen down to a small screen. Pretty impressive, huh?

The best part is, designing sites to be responsive does not add a lot of size, scope or complexity to a project. Sure, it adds some work for the designer and developer. But really in the grand scheme of building a website from start to finish, building it responsively is not all that time consuming once you know how.

Now, like all things in life, there's a catch. Building a website with responsive design is not a replacement for a mobile app or site. There are subtle but key differences.

Depending on your business, you may find that you actually need a mobile web application instead of just a website that scales to a variety of devices and screen sizes. The reasons are:

Functionality
Weight
Business Model

1) Functionality

The trick with responsive is that it's all in the layout. When a user is on a smart phone, they are looking at the exact same site as on a desktop computer, but the CSS or style sheet is scaling the site visually to look better on a mobile device. It's kind of like window dressing. The HTML page is exactly the same.

Now you may find that on a mobile device, you want to do more than simply make the website look different. You actually want to take advantage of a mobile device' hardware. You may want to let the user shake their phone to randomize a search, upload photo's through their phone camera, plot their location through GPS. These are things you'll actually have to build specifically for the mobile device - you obviously don't want this functionality for users on a desktop!

There may also be a lot of functionality on your main website that you want simplified and altered significantly on the mobile experience. If you have an iPhone, think of how different the main Facebook website is from the iPhone app version of Facebook. On the latter, the functionality is simplified significantly from how you would use it on the website (no instant messaging for example).

An added benefit of mobile websites is that you can include a link at the bottom of the site "Click here to leave the mobile version". This way, you can present your user with choice so they default to the mobile version, but can always load the desktop version on their phone if they so choose.

2) Weight

With responsive, again, the HTML page is exactly the same regardless of what device you're viewing it on. On a mobile device, every bit of information a user has to download counts - because users often have slower internet connections and their phones have less memory than a desktop computer.

So if your main website has a lot of intensive graphics, videos, and sounds that a user has to download, responsive design is not going to change that when the user is viewing it on a smart phone. A mobile web app on the other hand is a completely different site, made specifically for phones, and there are a lot of techniques developers can employ to make the page as fast and lightweight as possible.

I won't get too much into the technical stuff here, but it would include using HTML5 local storage techniques, limiting the amount of http requests, keeping Javascript libraries as compressed and minimal as possible, loading smaller images and a whole lot more.

3) Business Model

If you have a blog, chances are your website will be used the same way regardless of what device you're user is accessing it with. Blog's are always for finding and reading content, and sometimes commenting on a post. In that case, responsive design is probably a perfect solution, since it allows the content to be optimally viewed on a phone.

Now on the other hand, if your website involves a lot of user functionality, like the aforementioned Facebook, which includes adding photos, tagging pictures, posting content, finding friends and more, it's much better to design a specific mobile experience that varies greatly from the desktop experience.

And you don't have to be as big as Facebook either. There are a lot of companies whose desktop websites wouldn't translate well as merely a shrunken down mobile version, but would benefit from a true mobile app. Some examples may be banks, movie theatres, restaurants, concert venues, e-commerce stores, social sites... the list goes on.

The other factor to consider too is whether or not you want to sell your app and/or make it available on the iTunes Store or Android Marketplace. If you do, responsive is not going to work. On the other hand, you could make a native iPhone/iPad/Android app, OR build a mobile web app using open standards and using the insanely clever PhoneGap, you can package your web app as if it is a native app. This will enable you to use the phone hardware like contact lists, voice and camera, and will also allow you to sell it on app stores.

Closing thoughts

As a general rule, I like to think of it like this: If your website is meant to be viewed, Responsive Design is an amazingly simple technique to please visitors on your site (in fact, I think that building in Responsive is the first place every company should start when they want to dip their toes in the mobile landscape).

On the other hand, if your website is primarily meant for users to interact with (games, accounts, videos, social, e-commerce etc.) then a mobile web app is an important investment worth making.

1 Comments | Posted on July 3rd, 2011

When I first got really into web design and development in the mid-2000’s - it was largely because of learning about web standards, CSS and Flash/Actionscript.

Things got a bit stagnant in the front-end technology department for a few years and there really wasn’t much new - it was all about refining one’s understanding of the principles of website development.

However in the last year or so, I’ve felt a revitalization of the interest and passion in front-end development I first felt years ago. Largely because of the following:

Hosted Fonts

Remember the days when you only had Arial, Times, Georgia or Verdana to choose from? There was a time when if you wanted to choose any font you wanted, you had to resort to Flash.

Today, virtually any font can be used on the web, and without tricks like Cufon or sIFR. The best way to use fonts on the web now are to either use a font provider, like Google Fonts (free) or Typekit (paid). We have a Typekit account and use it for many clients, but also use Google Fonts when we need unlimited bandwidth, or there just happens to be an appropriate font in their list I want to use.

Another option is using the @font-face property in CSS that allows you to host fonts on your server and embed them in your CSS.

Whatever method is chosen, it’s incredibly liberating to not be limited to a small handful of old fonts that have been used on every website for the last 15 years.

Web design, once the ugly sibling of print design, now rivals and in some ways surpasses print design in it’s flexibility, interactivity and near limitless creative potential.

HTML5

The web community has been swooning over HTML5 for over a year now. Even completely non-technical people seem to be excited about the possibilities with HTML5, although few of them really know why.

The truth is, much of the awesomeness of HTML5 is not supported by the majority of modern browsers at the time of this writing. But the future possibilities are very cool. Some of which are being able play video and audio - another nail in the coffin for Flash; being able to do things with web forms like have calendar drop downs and slider widgets without the use of Javascript; And some great features for mobile devices.

Right now at Headspace, we’ve begun gradually integrating HTML5 into our sites - although most users and clients would never know the difference. Just having a simpler doctype definition, and using some of the new semantic elements like

< article > < section > < header >

- not exciting stuff for the majority of people, but it’s a start as the browsers are still working to meet the specification for HTML5.

CSS3

This is something that the non-techies and clients aren’t talking about, but they should. The awesomeness of CSS3 is exciting because the results of which are visible on the screen, and the time it saves developers can reduce costs for companies.

Here’s an example: In the past if you wanted rounded corners on a white content box, you would have to cut 4 images of each of the corners and then write a lot of bloated markup (HTML) to contain the images within CSS. Now with CSS3, it’s one simple rule in your style sheets:

border-radius: 15px;

No images needed. Some of the other great things you can do in CSS3 are drop shadows, rotating, gradients, scaling, transparency and even animation. All of this is done without using a single image. CSS can now do things that were only possible within Photoshop.

The best part is, all the modern major browsers, (Except IE 7 and 8) support most of the cool features. Because it’s not universally supported in every way, CSS3 is now mainly used to enhance website design. That way users on modern browsers can have an enhanced experience whereas users on more limited, older browser still get the same site, but miss out on some visual “pizzazz” - though they would never really know the difference.

For example, a user on Firefox might see drop shadows and rounded corners, but a user on Internet Explorer would just see a plain white box. Not a big deal. A user on Safari might see an animated colour transition when they mouse over a link, but a user on Firefox might just see it go from one colour to another with no in between animation.

This is the approach and method we’re taking at Headspace, and it is the approach of most of the current web community until all the old browsers die and modern browser universally support all of CSS3.

Death of IE6

Speaking of old browser dying, this is very exciting. Internet Explorer 6, though once considered an innovative browser when it came out 10 years ago, quickly became the bane of every web developers’ existence with it’s buggy, inconsistent rendering engine and lack of support for nearly everything considered standard. It always required re-doing a lot of work and constant testing and tweaking along with hair-pulling.

The frustrating thing was that for a long time, IE6 had the majority of the market, so it couldn’t be ignored. But Internet Explorer has been steadily losing command of the market. Just look at these stats.

In 2006 Internet Explorer had 60% of the market. As of May 2011, IE as a whole only has 24.9% and of that 24 percent, IE6 only has 2.4%—a very small percentage which is mostly made up of old government office computers that haven’t changed operating system’s in 10 years for “security” reasons.

Last year Google announced that it wouldn’t support IE6 anymore, and that for us at Headspace was the final death blow.

Sadly, Internet Explorer 7 has become the new 6 - as web standards keep progressing, IE7 is looking more and more out of date. The great thing is that Microsoft has been improving IE with every version, so 9 is looking very promising and should replace the older versions much faster than the rate of adoption before.

JQuery

Okay, admittedly JQuery is not new - it’s been around since 2006. But it’s vast amount of plugins and support and near universal adoption by many of the worlds biggest websites makes it that much more accessible to developers. For the non-technical: jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.

With JQuery, you can make your site behave like the once revered Flash websites of old, but all within a standards-based website that still works on mobile phones. Using AJAX (which is Javascript) you can make page requests without the browser refreshing the page. A good example of how powerful this can be is Google Maps. When you zoom and pan the map, Google is making requests to a server on the fly, without your whole page refreshing.

While I am trying to learn JQuery more, Ricky Ferris has become quite the ninja with it, and having in-house expertise with it is a great tool to add to our arsenal. It’s also fun for me to design cool interactions knowing what can be accomplished with JQuery and knowing Ricky will find a way to pull it off.

Mobile and Responsive Design

There’s no question that mobile is the way things are going, and in fact, have already gone. But it’s been the elephant in the room for a lot of web designers who have just gotten browsers tamed and are anxious about having yet another swarm of hardware to design and test on - especially one that scales your designs down to fit in the palm of the users’ hands.

We at Headspace have really begun to embrace mobile but have only scratched the surface. Last year we’ve begun adding iPhone development to our skill-set, thanks to Nick Ross’ foray into the world of Objective C, Cocoa and the Apple development environment. We now have a couple of apps under our belt, and I’ve personally found that designing iPhone apps is much more challenging than you would think. While there’s a lot of standard interface elements like buttons, forms, lists, scrollers etc. - the exact best way to implement them for a given app idea is not always clear and it takes a lot of thought and planning to get it right.

We’ve had a few companies request apps that work on all mobile hardware, not just Apple. So recently I’ve been looking into the Sencha framework for assisting with developing HTML5 apps. Sencha helps with letting us develop advanced apps that look and feel like native apps, but are compatible with Android and Blackberry.

Responsive Design is one of the most intriguing things about web design today. The term comes from buildings that are made “responsive”. They adjust heat and lighting automatically to the amount of people that are in the building or rooms at any given time.

Similarly, responsive websites adjust themselves automatically to the users screen size. Look at this site for many examples of well designed responsive sites.

Notice how if the user is on a widescreen monitor, the site might have 4 columns and a huge image, whereas if the same site is viewed on a tablet, like iPad, it instantly adjusts to 2 columns and scales down the image. And if the same site is viewed on a smart phone, is scales to one column and stacks the content vertically.

This approach to design is fun and challenging, and once again, Ricky has demonstrated a knack for coding sites in this way. For me, Responsive Design is the single most exciting thing about web design today, and something we are beginning to build into every project.

0 Comments | Posted on May 18th, 2011

I was recently doing business in the US when a potential client for a large organization asked about the value of social media. He said a prominent person posted something on Twitter akin to “Wow, the sun finally came out today. I want to get to some long overdue gardening”. His point was, who cares and why should his followers be subjected to such pointless drivel?

I’m going to use two examples to illustrate the value of needless information in social media:

Celebrity Magazines

It always astounds me how celebrity gossip magazines/blogs stay in business. But they do because there are millions of people out there who care what Brangelina ate today, where they went, what they bought at the store. And when a celebrity starts a twitter account, look out! Millions of followers are ready and willing to read when their last bowel movements were.

Advertising

How many of us look forward to Super Bowl ads? Have you ever noticed that some of the best ads that we enjoy watching do not sell with information or logic? They often sell with emotion and humor - two powerful weapons of any marketer. We don’t enjoy them because they gave us information and told us about their product in a direct manner, we enjoy them because they entertain us, and over time we associate their brand with positive feelings.

Social Media can build your brand

So to answer the question; Who cares what you ate for breakfast? Everyone who follows you does. If they have cared to subscribe to your content, whether it’s Twitter, Facebook, LinkedIn, Four Square or any other social network you use for your company, then people care about what you are doing.

Does that mean they are necessarily going to comment or respond any time you make small talk that is weather, food, travel related? Not really. Sure, constantly talking about irrelevant personal data will get annoying and people will stop following you. The key is to mix it up and be yourself, just like you would if you were talking to someone in person.

Talk about things that matter to you and throw in a few trivial statements about whatever you happen to be thinking about. If you’re funny in real life, then be funny on the web. Some posts can be informative, some can be direct self-promotion, and others can be statements on the weather.

What’s the point you may ask? If someone is following your posts, then small talk shows that you’re human, that you have feelings and that you don’t just use Facebook to talk about new deals you’re offering. And the more someone trusts you and associates your brand with positive things like gardening in the spring, or enjoying a fine ale at the local pub, then the more likely they are to give you a call when they need work done, or visit your site to buy products. That is just marketing, and the principles haven’t changed just because social media came along.

0 Comments | Posted on March 30th, 2011

You’ve come up with the perfect idea for a website! A social-media application that let’s users (insert brilliant idea here). You’ve secured the funding, and have done your due-diligence to find, interview and ultimately assemble a dream team of talented designers and developers to make your ingenious idea a reality.

When you’re asked how much traffic and revenue you expect from the site, you modestly predict that within the first month alone, you’ll get anywhere between 10,000 - 100,000 unique visits. Sure, during that first month, you only expect to cover your overhead and break even. But two months after launch? Heck, you’ll already be preparing for early retirement! The ad revenue alone is going to top the $1 million mark, and that’s not even taking into account the third month, when you sell the website to the highest bidder (they’re naturally going to be clawing at each other to become the lucky buyer of your fortune 500 enterprise).

I realize that this is coming across as sarcastic and condescending — so I digress…

This exaggerated scenario resembles how some entrepreneurs approach a new internet business venture. It’s exciting to come up with an idea that has legs, and even more so to see it come to fruition. However, I believe that over-confidence has a counter-productive effect on a web business and that it’s far better to be over-zealous. Let me explain the difference:

Over-confident website owners

Over-confident website owners feel that just because an idea seems good and because friends and family think it’s great, that it will require almost no work to make a success, or that it will require work only short term and then become self-sustaining. To inexperienced website owners, once we website it built, the work is done and now it’s just a matter of marketing it.

What happens is that these people realize shortly after launch that the site is not getting the traffic or attention they feel it deserves, and it puts them in a re-active state, changing the site on the fly and quickly running out of the money required to make these changes.

Zealous website owners

On the other hand, a more experienced website owner knows how much time and effort it takes to successfully run a website and then be able to monetize it. So instead of becoming over-confident, she become over-zealous (in a good way). She starts small, maybe with only a simple website, and she pour her energies into it. It becomes her hobby. For the first while, this person isn’t worried about how much money she’s making, just how much quality content is being generated and how much discussion can be ignited.

Many simple websites have been gradually built to the point that they are ready to be commercialized, but only once they have built a steady following and respect among users. This cannot happen overnight. It can only happen with hard work and determination.

Start simple, plan for complexity

In the case that your website idea is not just a content-driven blog or community site, but rather a larger, more complex web application, the advice here is still to start as small as you can. The reason? You will need more money to maintain and improve the site over time. Don’t blow your wad of cash at the very beginning when you don’t even know what kind of update you’ll get. A successful web application is never a one-shot deal, it always evolves over time. Plan for that growth.

If you build it, they won’t necessarily comment

Another scenario in which website owners can become over-confident is with user-commenting. All too often I’ve been asked to build the ability to comment on a website blog, only to told later to remove it because the owner is afraid he will receive too many comments to have the time to moderate.

There are two fundamental problems with this line of thinking.

If you don’t have time to approve or moderate comments, then you don’t have the time to write content quality regularly for a blog. This is like someone who wants to have a dog but doesn’t feel they’ll have the time to walk it. If you can’t make the time, then don’t have one. There is no way to “automate” a blog in any kind of genuine manner.
These people are grossly overestimating how much commenting their site will actually get! It’s hard to get users to comment.

Most users read so many blog posts, tweets, wall posts and news articles on a daily basis that the only time they will actually take the time to comment is if they either know the writer or if they really feel what they have to say is valuable. As a website owner, you may have a lot of readers but still find it tough to ignite much in the way of good conversation. It’s hard. It takes patience and determination to write content that really encourages users to interact.

So lower your expectations, but don’t curb your enthusiasm. Approach a website like it’s going to be an uphill battle, but one you won’t lose. It’s just going to take hard work and a long attention span, then when if finally does become a success, you’ll be that much more satisfied with the results.

0 Comments | Posted on March 15th, 2011

Over the years, we at Headspace have developed a pretty tight process for creating websites. However, I find in some cases, clients have a very fuzzy idea of what they want out of their website in the beginning. Even after our in-depth planning stage, clients will make fundamental change requests to their website very late in the game, and often at a time it will impact the budget and timeline of a project.

So how do we avoid this? First of all, let’s examine our planning process (which is probably more-or-less similar to many web design company’s processes):

After a proposal is accepted and our client is ready to move ahead with us, we schedule a kick-off meeting. The goal of this meeting is to:

acquaint the client to the project manager and lead designer
review the needs of the project and what came out of the RFP/Proposal process
discuss really specific details that will help form the website strategy.

After this meeting, we internally compile each others’ notes from the meeting (as soon after the meeting as we can, actually). We then deliver 3 important pieces of documentation to our client:

A Statement of Work, which in high-level detail, indicates what we will perform, what the agreed upon fees are, and some other legal mumbo-jumbo which serves as a contract between the two parties.
A Strategy Brief, which outlines in more detail what we want to achieve with the website and how we plan to achieve it. It includes parts of the kick-off conversation, such as target-audience, competition, conversion goals etc.
A Function Spec, which includes a site-map (showing all of the pages views on the site), a wireframe for each main view (which shows where we will allocate each content block visually on the site without getting into the look and feel just yet), and a written, technical document that verbally describes what happens on the site.

The function spec is particularly important because it serves as a technical reference between the client and developer, and sums up the “scope” of the project. In other words, if the agreed-upon spec defines a part of the website functionality in a drastically different way than what the developer delivered - the developer would be responsible to correct it. On the other hand, if the client asks for something that wasn’t defined in the spec, it will probably be considered “out-of-scope” meaning it would require more time and budget to include. This protects both parties by making sure that both agree upfront how the site will work and honour their commitments.

Rushing along

At this point, when the 3 documents are delivered, we expect a LOT of feedback from our client. After all, like the blueprints on a house, these documents are essentially paper-versions of their website. This is the part of a project where you can really let loose with ideas, but it’s also where the project should get very real. All the ideas are now on the table, and we are planning in precise detail exactly what the website is and how it works.

I find that often clients will hurry this process along and agree to virtually everything assuming that this is the boring part so saying yes to everything will make it finish faster. In reality, this is the part of the project where the client has the most control and room for input.

A cold, hard shock

And I’m sure you know how the rest goes; Client reviews the design, makes changes until they approve it, we build the site, load the content and show them the close-to-finished website… and then… suddenly…out of nowhere there is a massive list of changes back from the client! These changes may include a massive overhaul of the site-map and wireframe, along with a completely re-thought-out list of fundamental changes to how the site actually works. And naturally, they aren’t happy to be told that now it will cost more money and it will delay the launch.

Why it costs more

This might seem unfair to some people, so it often helps to compare the building of a website to the building of a house. If you hire a contractor to build your house, and you sign off on the blue-prints and give them the green light to build, but then after the house has been constructed, you decide you don’t want the bathroom on the main level, you want it moved upstairs—do you think that’s going to be a problem? Of course! Now walls need to be knocked down, plumbing needs to be completely re-worked - this is going to cost more money and you’re going to have to wait longer to move in.

Or how about if you told an interior designer you wanted marble counter-tops, waited until she installed them, and then decided you want granite. Obviously, it’s going to cost more to change now. So in a similar way, decisions you make early on when planning your website are going to affect the final outcome of what gets produced.

But what can help you if you need to commission a company or freelancer to build your site?

Know what you want

First, know what you want before you even pick up the phone. Now that’s not to say that you need to design the site yourself - the last thing a web designer wants is to be handed a design from a client and be told to make it look exactly like that. Definitely remember that you’ve hired professionals, so be prepared to accept their advice. But at the same time, remember that this will be your site for years to come and as the website owner, you need to be the champion of it, so it’s your job to know what you want and the web teams job to help you get there in the most practical way.

So come to the kick-off meeting armed with information; Why you need the site, who it’s for and why they need it, how you plan to fulfill users expectations, when you need it launched (which is usually different than when you want it launched), how much you have allocated for spending, where it will live and so on.

The wonders of napkins

Better yet, come to the kick-off meeting with doodles. The wonderful thing about paper is that it can change. On paper, you can change a search bar to a list of check-boxes instantly, or you can remove an entire section by simply scratching it out. If you have sketches of what you want, no matter how crude they may be, they will help not only your hired web experts know what you want, they will help you know what you want because you’ll get an instant idea of what works and what doesn’t. If it doesn’t work on paper, rest assured, it won’t work in code - and all it cost you was a napkin to find out.

Once your web team understands all of this, they will be able to tell you in realistic terms what is feasible, and if necessary, propose alternate solutions.

We launched a website recently for Tattoo Tree, an online resource for tattoo artists. Our client approached us for a proposal with complete hand-drawn sketches of the entire website, and a document outlining how she wanted it to work. We didn’t always see eye-to-eye on how things should work, and there was some compromise on both sides, but the point is, our client knew what she wanted, had a vision, but was willing to accept our advice - and you know what? It was one of the most smooth projects we worked on, and we launched a fairly complex website in less time than we would have launched a simpler site whose owner couldn’t make a decision.

Look at examples

9 times out of 10, if something hasn’t been done already on the web, it’s because it’s impractical. So to get a good sense of how your website can/will work, look at examples of good websites and see how they allow users to accomplish certain tasks. Show them to your team, and let them bring other examples to the table. You can find beautiful websites on sites like Site Inspire and Drawar.

Write your content now!

Too often, clients wait until the site is built using dummy copy before they even think about what content is going to actually end up on the site for launch (having no copy ready in time is also the #1 reason why projects don’t launch on time).

If you have hired a web copywriter, make him or her part of the development team early on. The writer is as important to the success of your site as the designer and programmer. Think of the content as what the designer will design the site around. It’s why users are actually coming to the site in the first place.

For some reason, clients seems to understand this concept when getting a print piece designed, they provide copy to the designer up-front whereas websites often get misinterpreted as being blank templates that will work with any type of content. In some ways that’s true, but the sooner you produce actual copy/images/video, even if you plan on changing it or adding to it later, you will assist the designers and you will get a better grasp on what the final product will contain.

Content takes way longer than most people think it will, so starting immediately once a project begins will ensure you give yourself a good head-start and actually get the copy done in time for the designer.

Obsess over the spec

Finally, when your web team shows you a function-spec, pore over it. Read it like you would read the blue-prints to a house you are building. Visualize it. If you don’t understand parts of it, ask questions. Sketch it yourself as you read it. If it doesn’t make sense, ask the site planner to explain it further over the phone or in person and if necessary, provide follow up wireframes or examples on other websites.

Don’t make any assumptions at this stage thinking “Of course the developer will remember to include feature A, because every website I visit has this feature!”. If it’s not expressly written down, ask for it. If the spec doesn’t mention anything about RSS feeds, don’t assume there will be one. If it’s to be included in the scope, ask for it now. If the spec mentions a list of search results, don’t assume they can be sorted alphabetically by the user. Think long and hard about what is outlined.

Also don’t think that because you mentioned something about a social widget in the kick-off meeting that it’s automatically within scope. Things get missed in conversation which is why the notes are presented back to you. The spec is a summary of what conversation took place, so if you feel something is missing, now is the time to voice it.

These are just some suggestions to make your new website the best it can be, and at the same time, keep it on-budget and on-time. As the saying goes, measure twice, cut once. Your web developer’s will thank you for it.

4 Comments | Posted on January 9th, 2011

I once heard that it’s not young carpenters who accidentally chop off their own fingers, it’s the ones who have been doing it for 20 years. They’ve gotten far too comfortable wielding spinning metal blades.

One of the ways individuals and companies often try to differentiate themselves is with experience. “I’ve got 15 years experience.” “Well, I’ve got 18 years experience!” In general prospective clients and employers value experience more highly than anything else, almost always willing to pay more money to the person with the most experience. But is this really the most valuable trait you should look for?

The funny thing is, when it comes to anything web related, experience is a completely null commodity that gets confused with some sort of winning attribute. Let’s face it, everyone except children have been using the internet for the complete 15 or so years it’s been mainstream.

But more to the point, if you are a web designer, developer or in any other way a web professional - having 15 years experience is not incredibly impressive. The internet sucked back then. The internet will always suck when referred to in past tense because technology improves at a breakneck speed. So really, even websites that won prestigious awards when they launched 5 years ago are a joke by today’s standards. And wicked awesome sites that launch today will suck 5 years from now because the sites of tomorrow will be doing far more impressive things with technology.

This isn’t like music, film or even video games, which are a completely artistic endeavor and can be great no matter when they were made. Citizen Kane, The Beatles and The Legend of Zelda are all amazing in their own right, even though they were made long ago relative to their medium. Great websites, except for the rare few, are business vehicles in some way. They may deliver their functionality in an artistic or creative way, but they still are there to serve a purpose other than art.

What that means for web professionals is that if you want to be considered the best in your craft, you need to be constantly learning. You can’t put self-education on the back burner because you’re too busy working on paid client projects; The fact is you won’t be busy in the future if you aren’t learning now.

This means that we are always in a state of feeling like a dinosaur - it’s our job to. Even if your skills are on par with what’s being done today, there’s always some new technology right around the corner that others are discussing. We should always have at least one topic in our given field that we know we need to follow via a blog or book.

The problem with experience is that it gives professionals a false sense of security. The amount of years you’ve been doing something occurs naturally as the Earth moves around the Sun. You have 11 years of experience because another year passed and you haven’t changed careers. It’s like running downhill. But to stay good at something - that requires more. You can have 15 years of being a crappy web designer, or 3 years of being an amazing one. Which would you pick?

In a past job, someone remarked, “I’ve been doing this since you were in junior high school!” My reaction back then was an unspoken “Who cares”, and it still is. The question is; How long have you been doing it well, and are you still doing it well? The latter one is the only one that matters. Mark Zuckerberg was 19 when he launched Facebook, he’s 26 now. Suffice to say, experience in his case is irrelevant.

It’s easy for me to get a big head and think that because I have been working as a design professional for over 7 years that I am some sort of guru. But all it takes is a look outside at all the people in the world who are truly shaping the web with technology and practices I have no clue about, and it brings me back down to reality. Guru is a very relative term.

At the very least, I want to be sure that even 2, 5, 10 years from now, I will never look down on someone with less experience. If I don’t keep my knowledge fresh, they will be running circles around me. So If you are someone who hires web professionals, don’t be impressed with the number of years on their card. Be impressed with what they can do now and hire based on that.

2 Comments | Posted on December 30th, 2010

Anyone who knows me well knows that I’m obsessive about timelines, not just at work, but in my personal life too. I set deadlines for everything from my gym schedule to cleaning our house. Bordering on crazy? Maybe – but my work experience has taught me the value of time management, and this is the system that works best to make sure I get everything done.

One of the biggest problems that can arise working on any creative project, online or otherwise, is when people don’t recognize of the value of time. The end deadline is looming – website launch, campaign in market, or gala event scheduled - yet milestones are missed. Everybody starts getting anxious. In the case of an online project, the developer can’t start working on the website back end because the design isn’t approved. Everybody’s work is delayed. Before you know it the project is off the rails, team members are on edge, and the site launches late. The project wraps up, and everyone’s left with a bitter taste in their mouth. How can this be prevented?

It’s easy to stay on track with a little bit of effort and a few tricks. Here are some simple ways to ensure your project goes out the door on time:

Set a realistic end date.

It seems obvious, but often clients will push to have their site launched by Date X without thinking about realistic turnaround times. It’s almost always better to wait and launch later with a good product than to cut corners to meet an unrealistic deadline. Anything worth doing is worth doing well – and to do anything well takes time!

Really review your timeline.

Overestimate on everything. I once read an article that said you should add a 50% contingency to every task – for example, if you’re expecting something will take two days, expect it to take three.

Build in buffers.

Anticipate that feedback is never going to be instant. Look at your responsibilities and their assigned dates and ask yourself if you can commit to this time frame. If you have any doubts, speak up! Better to adjust the timeframe before you get started than to miss milestones and throw the project out of whack midway through. No one will fault you for building in extra time!

Communicate.

If a red flag arises speak up immediately so the problem can be addressed before it snowballs out of control. Say you’re suddenly swamped and you aren’t going to have time to pull content together until next week – as long as you communicate that to the rest of the team, everybody’s aware of the situation and not wondering where in the world your content is. They may be able to move on to another area of the project and keep things on the rails overall. And even if everything is on track, make sure the team is aware of it – regular status reports on any project are helpful and reassure your team that things are rolling out as they should and that everyone is doing a good job.

Keep track of all responsibilities, using whatever system works for you.

At Headspace we use Basecamp project management software, which is great because it makes everyone accountable to a project and keeps the entire team updated on progress. For my appointments I use a good old-fashioned day planner, and I write down meetings, conference calls, and deadlines. As antiquated as it sounds I hate electronic calendars, and I usually ignore alerts that pop up, so for me they’re completely ineffective. Figure out what works for you and use it.

Give yourself fake deadlines.

I know that creative teams hate getting ‘fake deadlines’ from account people so I never assign them. However, fake deadlines work for me! If I need to have a block of copy written by the end of the day, I’ll try to have it done by noon. That way, if something does come up that’s unavoidable, I have extra time built in to get it done.

Build in lots of time for testing.

At Headspace we have started incorporating more time on our interactive projects for quality control and testing pre-launch and it makes a big difference in our clients’ satisfaction. Again, anything worth doing is worth doing well. It’s easy to underestimate testing time but this is one of the most crucial phases of a project. There are inevitably going to be bugs and errors with any website – better for your internal team to find them than your client!

Any other ideas for ways to keep a project on track and delivered on time? Feel free to share.

0 Comments | Posted on November 3rd, 2010

Most business owners know that the internet opens up a lot of marketing potential, and that harnessing the power of the web, and specifically social media, is important to staying relevant. However, many entrepreneurs fail in a few key areas of managing their online presence — particularly when it comes to online communities.

NOTE: This article was published in the October 2010 issue of Business Voice.

It can be very tempting to want a blog or forum on your corporate website. After all, getting customers engaged with your brand is the holy grail of all forms of marketing. Some companies opt to use Facebook or Twitter for their online business communications, avoiding the upfront development fees associated with a custom blog. There’s nothing wrong with either approach, provided you keep the following points in mind:

Commit

Too many business owners begin an online community, thinking that simply getting a site built or starting a Facebook page will be all that’s needed. At the beginning they are fired up and excited about it, so they emphatically post their first couple of entries (Usually something akin to “We now have a blog” or “Welcome to our Facebook Page!”) But then life happens, and the posts slow down and eventually cease, much to the embarrassment of the website owner.
There are a few reasons this might happen:

You may be expecting too much of yourself and your audience. Too many owners feel they need a post or article that is lengthy and detailed. The bar is set so high for themselves that they opt to not post at all.
You feel that you don’t want posts to be too personal or transparent; that you will appear unprofessional, or even worse (gasp!) your competitors will see what you write!
You don’t see immediate results. Users are not commenting, and your inbox is not getting flooded with requests for work and flattering reviews of your latest post.

The latter point happens because of the former; users are not engaged because the posts are not regular, or they are not interesting. But abandoning your community is not the answer. I always tell our clients when they want to start an online community that it is akin to starting a fire with wet wood - it takes time up front, and a few failed starts, but once you commit to it and keep adding fuel, it will eventually sustain itself with comparatively less work. So what to do then?

Engage

Don’t be afraid to post brief posts with a personal viewpoint. Users prefer these types of posts because it demonstrates you. No one wants to engage online with a faceless corporation, and the big brands who have successfully started an online community have shared their personal viewpoints and helpful, interesting content that has resonated with their customers. Don’t post press releases on your site. Unless they are media contacts, most users just don’t care!

Don’t make the mistake of trying to directly market or promote yourself with your blog or social community. It will seem self-serving. But if your content is good, it will market you by default because you will stay fresh in the minds of potential customers.

Your staff represents your brand, so get them involved. If they are posting their own thoughts and ideas, or even helping customers through blog comments or Twitter posts, it can only reflect well on your company.

Don’t be afraid of your competition — they are going to see what you write — get over it!

Post regularly but make sure that even if your posts aren’t lengthy and extravagant, they are quality. It’s better to have one great post every week than one boring post every day.

Keep a notepad handy and write down post ideas as they come to you, in the shower, in the car, wherever ideas happen. You can always sit down and compile several posts when the inspiration has hit you, and then stagger when you actually release them online. This will make it appear as if you’re regularly posting, but in reality you’re cheating!

Don’t be too disheartened if no one seems to be commenting. It takes time for an online community to build momentum (remember the wet fire concept?) but you can encourage people to comment by asking questions, linking to your posts in other similar online discussions, and most importantly, responding to the occasional individual who does comment.

Don’t try to control the message. If you delete negative posts on your blog, they will only appear on someone else’s. Instead respond in a positive, humble, but truthful and genuine manner. Even better, if your community is engaged with your brand, they may even come to your defense — you may not have to say anything. You couldn’t ask for better marketing than this.

6 Comments | Posted on October 29th, 2010

As I rushed to get a design proposal out the door on time recently (why are these things always a rush, no matter how much lead time we have?) I was stopped short by an intimidating list of mandatory to-dos, listed under a bolded, ominous warning that “Failing to complete the following may result in your proposal being rejected”.

Well, um, OK. I guess I better comply, since we’ve just spent 30-plus hours of otherwise billable time getting this beast together and it would be a shame to lose out on this contract because I didn’t print the RFP number ABOVE the RFP name on the cover page. Or photocopy our business registry information double-sided. Or have page three of each of the 19 identical bound booklets signed, in black ink, by someone who is qualified to sign on behalf of our company – but DON’T sign the original copy, which, by the way, needs to be unbound and calligraphied on ecru (NOT WHITE) onion-skin paper and delivered on the horn of a virginal male unicorn at precisely 4:00 P.M. on Friday, October 22, AND NOT A SECOND LATER!!

I don’t think preparing and submitting RFPs will ever be fun. Don’t get me wrong. I don’t think the process is supposed to be fun. Potential clients need to know that you’re willing to put in time, effort, and precision on responses to their RFPs to show that you’re serious about working with them. With this comes a degree of challenge – locating the most appropriate work samples, ensuring your proposal is tailored specifically to their individual requirements, proofreading it again – and again – and again. RFP does not stand for “Ridiculously Fun Project”. Really f-ing painful? That might be more accurate.

The purpose of an RFP is to evaluate an agency or a firm on its ability to work with and on behalf of your organization. Whether it’s specific to strategy, design, account management, or a full suite of services, it’s a company’s chance to check out your expertise, your references, samples of your work, and the qualifications of your employees and determine which agency is best for their needs. It’s an opportunity to see how well a firm can answer your questions and respond to your unique objectives.

Fair enough – but why the need to make agencies jump through hoops, write out the gazillion-digit RFP number again and again and again, sign here and here and here, and so on to prove they can do great work? Worse still, the RFP documents that list their mandatory requirements on different pages, causing no shortage of angst as the unlucky account person (me) riffles through a novella of background info and appendices to make sure everything has been done correctly.

There are some RFP documents we receive that are just beautiful. I may actually clap and bounce up and down when I see them. They’re clearly laid out, with the mandatory requirements all in one place, straightforward questions, and contact info prominently marked. My secret inner dork actually enjoys completing these proposals – I could even go out on a limb and says that they are, indeed, ‘ridiculously fun projects’. (Then again, making lists is one of my spare-time hobbies, so my definition of fun may not be akin to that of a “sane and well-balanced person”.)

Before you send out your request for proposals, give it a review. If your requirements are responded to correctly, will you have the information you need to review sufficient samples of an agency’s past work, their unique approach to your project, and their team’s credentials in relation to your project? Are you determining that they are indeed a legitimate and established company without requiring fingerprints, criminal checks, and blood type of all team members? If so, you’re on the right track. Would you pull your own hair out by the handfuls if you had to respond to the same document? If not, go ahead and hit send. (Send it to us, actually. I love ridiculously fun projects).

1 Comments | Posted on October 26th, 2010

This is part 3 in a series of blog posts. The last two dealt with

This deals with the question: How can I improve my ranking and get closer to #1?

Google looks at a number of factors to decide how highly to place a website for a given search term. One important factor is the age of the domain. So if you had a url like www.dartmouthcomputers.net for a couple of years, it’s already likely to rank higher than a brand new url you just purchased last week.

Link Building

Think of Google as a snob in school that only likes the popular kids and their friends. Google has it’s own way of ranking how important a website is called PageRank. It is measured on a scale of 1 to 10, so a website like Apple has an extremely high PageRank, whereas a new website has next to nothing.

The way to increase your PageRank is by having website’s with higher rankings (the popular kids) link to your website. When another site links to yours it is called an inbound link. The best thing you can do to rank higher for your chosen keywords is to get as many high quality links as possible. I say “high quality” because if you have other low ranking sites linking to yours, there will be slim to no improvement in your ranking. But if you can get a really high-traffic website link to yours, you will see almost immediate benefit to traffic and search rankings.

So how do you convince another company or blogger to link to your site? Like anything else on the web, content is king. If you have an informative or entertaining piece of content or if your company provides a product or service that is valuable, use this as leverage to entice another website to give you an inbound link.

The Benefit of Blogs

Having a company blog is a great structure for producing unique — if you are committed to keeping it up to date that is. Let’s face it, a basic site that just lists your products or services and has company history and contact information is unlikely to entice any other website, but if you have something truly worthwhile then that is called Linkbait, or content produced solely for the purpose of becoming viral.

As an example, if you were a computer repair-shop that wanted to get good quality links, you might produce an instructional blog post called “5 first steps of diagnosing a problem with your PC”, or “How to upgrade RAM in your computer”. These types of posts have multiple benefits; They establish you as an expert in your field, gaining you a loyal following and users are likely to bookmark the page and/or pass it around via Facebook, Twitter or email. Secondly, another website may link to it in their own blog post that discusses a related topic, thus getting you that precious inbound link which in turn increases your PageRank and drives search traffic.

A Case Study

Here’s an example of how Headspace implemented a successful Linkbait strategy for ourselves:

At Headspace, we use the software ExpressionEngine as our content management system of choice which let’s our clients update their own website from an easy to use control panel. When we do that, we normally give them an instruction manual PDF to use as a reference in case they forget some of the basic functions. I had designed an attractive manual complete with large, captioned screenshots and a table of contents.

Knowing that there are thousands of ExpressionEngine developers out there who have the same need for their clients, I posted the PDF to our blog and included the working files so they could rebrand it for their clients. Then I sent this link with a description to a variety of social media sites like Digg, del.icio.us, Facebook, Twitter etc. and I posted it to the official ExpressionEngine forum.

The bait worked. Within about a week or two, several prominent bloggers in the EE community wrote posts about this Client Guide, praised Headspace for providing it free of charge and linked to our site. Those links continue to drive traffic to our site and our ranking for “web design halifax” has stayed consistently high, within the top few results on Google.

White Hat/Black Hat

This type of online marketing is slow and deliberate, but if you stay committed to it, you will see great long term results. This style of White Hat SEO differs from what is called Black Hat SEO which is about nasty things like keyword stuffing and getting links on paid directories which may give you a quick boost in rankings, but will go down just as quickly and put you at risk for penalization.

Closing

As you can probably tell, SEO is a broad and deep subject with several sub specialties within it. There are internet marketers with broad general knowledge about the topic as well as highly priced specialty firms who focus on only one aspect of it, such as on-page optimization, copywriting or link-building.

If you are new to this topic and looking to get your website rebuilt, hopefully this will help you in knowing what questions to ask a design firm. Even still, if you are a business just looking for how to improve your ranking I hope this series gave you a good foundation of knowledge to begin exploring further. A great resource to begin learning more is SEO Moz.

If you have any questions or comments, feel free to leave them below.

0 Comments | Posted on October 19th, 2010

This is part 2 in a series of blog posts. The last post dealt with the question: How do I get on Google? This part deals with the question: How do I optimize my website?

The next question lies around optimizing your website for search engines which is sometimes called “on-site optimization”, in other words, optimizing the code or content on the site itself, as opposed to other tactics which I’ll get into later.

Content and keywords

When a user types in a keyword, they are looking for content. Google bots index the content on your website and makes a judgment call on how relevant your content is. Relevancy is the key thought to keep in mind because it’s what Google bases all of it’s decisions on.

So for example, if you are trying to rank well for the key-phrase “dry-cleaning in Halifax”, you would be sure to have a decent amount of content that describes your service and uses one or two combinations and variations on the words “Dry-cleaning” and “Halifax”. The content should be descriptive and helpful for a user who comes to the site, so avoid the temptation to overstuff your content with key phrases that is only going to turn away visitors and may get your black-listed from Google.

The choice of keywords is important, because many keywords are too competitive to even try to rank for. If you are expecting to be #1 for the term “computer” you might as well give up before you start. It is too broad and general, there is too much competition with deeper pockets. It also isn’t likely to get you customers either because a user may be looking to buy a computer, get a computer fixed, or looking for how to fix a computer. You would end up driving users to your site who immediately leave because it’s not what they are looking for.

But if you choose something like “computer repairs dartmouth” then you are likely to have fewer competitors vying for position, and as an added benefit, you will convert more users because the term matches what they are looking for. This method of choosing niche phrases based off of broad terms is called the long tail search.

Pages not websites

Next, keep in mind that Google ranks pages, not websites. This is why searching for a term like “Stephen Colbert” in Google will bring up the Wikipedia page for Stephen Colbert, and not the Wikipedia home page. So you don’t need to spread the same keywords across your whole website, just on the page you want visitors to arrive on the Search Engine Result Page (SERP). As an example, the Headspace home page ranks well for “web design halifax” but our development page ranks well for “iphone app development halifax”. Using a sub page to rank for a particular keyword is called a search engine landing page and it’s the most effective way to drive traffic from different keywords to your site.

Other things to keep in mind

The scope of this article does not include listing all of the ways to optimize your website, but keep in mind that content is the #1 priority as I already mentioned. You also need to pay attention to properly formatted HTML (Title tags, clean semantic structure, avoiding placing content in image tags and Flash) This is where an internet marketing professional can help.

Ignore Meta tags

One of the most common misconceptions about SEO is that it is about meta tags. For those who don’t know, these are tags in the HTML that can contain keywords. When SEO was in it’s infancy, including keywords in meta tags helped make a difference in search rankings, but since it has been abused and people have “stuffed” these tags with inappropriate keywords, Google has placed little to no value on the content contained in these meta tags. Sure, it doesn’t hurt to include a few well chosen, appropriate keywords in there, but make it last on your list of priorities.

The same goes for alt tags (text in images) which are primarily useful for making your site accessible to blind users, however Google does read the content in these tags which can help images on your site show in Google’s image search results.

The last part of this series will deal with the question: How can I improve my ranking and get closer to #1?

0 Comments | Posted on October 12th, 2010

We often get asked about Search Engine Optimization when starting a new web project for a client. Usually the conversation starts something like “How do we appear #1 on Google for every keyword in the dictionary?” The client has no idea what SEO stands for or what it is.

It’s with that in mind that I write this 3 part series which may seem elementary to anyone who deals with websites on a professional level. But for people who are experts in other things, like law and real estate, SEO seems complicated and they need just a brief basic intro to help get acquainted with the really simple concept. This series summarizes the 20 minute conversation I usually have with newbies, it’s here for all to see.

The series will cover these 3 topics:

How do I get on Google?
How do I optimize my website?
How can I improve my ranking and get closer to #1?

How do I get on Google?

The first question you may ask when getting your website rebuilt, or recognizing the lack of search performance on your existing site is “How do I get on Google?”

I will use Google as the basis for this post, but please note most of what I am referring to is common among other search engines such as Yahoo and Bing, however with 83.34% of the market-share at the time of this writing, it’s safe to assume Google is the primary focus of your efforts.

How Google works

Google in a nutshell, is a massive database of links. It employs what are called ‘bots’ or ‘spiders’ which are automated programs that “crawl” virtually every website on the planet, reading it’s content and posting it in their database. So, really getting on Google is automatic, there’s nothing you need to do to get in it’s database. But keep in mind when first launching a site, that it takes time to even get on Google, let alone rank highly. Don’t expect to be #1 for a long time—if at all—unless you are prepared to put in the work.

Speeding up the process

If you have a brand new website, it will take the bots some time to get around to crawling your page. There are a couple of ways to make this happen faster, the most simple being to start a Google Webmasters account, add your site, and create a sitemap for google to crawl (basically just a text file with links to the pages on your website).

Being penalized

Also, if your site has been around for some time and it’s not showing up at all, even when searching specifically for your company name, there may be something wrong. Google may have your site penalized for unwittingly breaking it’s rules. This can happen for a number of reasons, and you can fix these issues yourself by doing a little home work or hiring a professional.

The second part of this series will deal with the question: How do I optimize my website?

1 Comments | Posted on August 25th, 2010

I was recently beginning a new website design for a client. This included brainstorming concepts, looking at other design inspiration, and experimenting with texture, type, colour and layout.

Then I received the client’s brand guidelines which outlined exactly how the logo should be used, what type of imagery (right down to the photography techniques and where people in the shot should be looking), what percentage of a page the header should take up. The list went on. For those wondering what these are, brand guideline documents are expensive, lengthy books created by branding firms, typically by the designer of the company logo. They specify how other designers should use the logo, included a lot of basic “Don’t mess with the logo” examples. It is meant to ensure “brand consistency”.

It got me thinking about brand guideline documents in general and wondering; what’s the point?

Before I get much further, I should state that I agree with the idea of brand guidelines. Businesses with no knowledge of their brand and no champions and enforcers of it are unlikely to succeed in communicating who they are to potential buyers. However here is my issue with these documents: Brand guideline documents are not expressing what the brand is, or even how the brand should behave, they merely express what it looks like.

Thinking of a brand as a person, consider this: If I was commissioned to write an essay describing you as a person to strangers, what would you want me to say? Of course you would want me to be honest mostly, but at the same time paint a positive image of you, and downplay any negative aspects of your personality. Fair enough. But what if my essay didn’t speak about your morals or kindness, your discipline and determination, your conviction or your generosity, it just talked about your hair and eye colour, height, weight and style of dress. A tad superficial, no? Worse than that, it would need to be kept up-to-date as fashions change (not to mention weight periodically).

To me, this is what brand guidelines are—nothing more than a style guide. They say nothing strategic or high-level about a brand. Instead, a single designer has made interpretations of how the brand should be presented instead of what the brand is. At worst, these guideline documents pigeonhole any possible new expressions and extensions of the brand, favouring a locked-down visual template. But even when this isn’t the case, the document is often ignored anyways—which begs the question; Why bother creating one in the first place?

On the other hand, think of popular and successful brands that have lasted for decades; Apple, Nike, Coca Cola, Disney, to name a few. What do they have in common? They didn’t rigidly stick to a style guide. They have changed and reinvented how their brands are presented while staying true to the core essence of what makes them who they are.

So a word of advice to smaller companies out their: Create a brand. Hire professionals to help uncover your brand and document it’s values and goals. Hire talented designers and marketers to creatively and consistently interpret and present your brand to the world. But don’t waste precious time and resources on creating a paint-by-numbers style guide. Set your brand free.

3 Comments | Posted on August 18th, 2010

It’s been a long time coming, but ExpressionEngine 2 is finally here, and after using it on a number of projects, I can say that it was worth the wait.

This is not meant to be an in depth post, but merely a few points that I especially enjoy about the new EE. Because some of the features are more technical in nature and not necessarily of great interest to end users (our clients) I want to separate the points into those two categories; Clients and Developers:

Clients

Better Control Panel - The actual CMS looks a lot better than EE 1 (hey, Ellis Labs even seemed to brand it with the Headspace hot pink. Good taste I guess). Above and beyond just aesthetics, the new control panel is actually easier to use. There is more use of AJAX effects and JQuery enhancements, which means less rooting around and clicking on multiple nested links to get to where you want.

File Management and Uploads - I can admit it - uploading and managing images and other files, and then inserting them into posts was painful for clients in the old EE. Now it couldn’t be simpler. I can now create custom fields in the admin as upload fields, so the upload/browse function exists right where it makes sense - even cropping and resizing right there with no hassles. There is a simple file management tool, where you can easily see all of the files on the server, and you can view/edit/delete them with only a few clicks.

Complete CodeIgniter Compatibility - OK, this point probably belongs in the developer heading, but then I thought about it; This serves end clients as much as it does developers. For those who don’t know, CodeIgniter is a popular, free, open-source PHP framework that Ellis Labs created for developers to rapidly build custom web applications with. Unlike EE1, the new ExpressionEngine is actually a product of CodeIgniter, being directly built off of the platform (When you download EE, you are actually downloading CodeIgniter with an ExpressionEngine folder inside it). What does this mean for clients? More back-end power and flexibility so developers can create more customized functionality within ExpressionEngine, and make it behave like a true web application. There is virtually nothing you could need on the web that EE can’t do for you.

Developers

Snippets - Common repetitive blocks of content or code that appear through your site used to be managed with embedding templates in EE1. That meant more database queries and slowed down your site if you weren’t careful and selective. Snippets allows me to place common blocks of code (PHP, ExpressionEngine tags, or just static markup/CSS/JS) within a snippet and include that whenever and wherever I feel like it. It is not included like the templates, it actually just becomes part of the page when loaded, using no database queries - thus allowing me to work more efficiently, write less repetitive code, and still keep sites light and fast.

Template Saved as files - This feature was technically possible in EE1, but I could never seem to get it to work right. In EE2, it is easy to sync templates to HTML files on your server. Instead of fumbling through templates in the control panel and updating the database each time I make a small edit, I can now just work remotely off of HTML pages in my favorite coding editor (Coda) and just save them when complete, just as if I was coding a static website. Collectively, this saves maybe hours of time on a project and is much more enjoyable to work.

These are just a couple of things I wanted to note about ExpressionEngine (I promise they are not sponsoring Headspace). It’s nice to have more firepower in our back pocket, and I look forward to getting into EE2 more over the coming weeks and months.

2 Comments | Posted on May 18th, 2010

Headspace Design was thrilled to participate in the 34th Annual Governor’s Conference on Tourism in Portsmouth, NH this year.

The conference was presented by the NH Travel Council and took place from May 5-7 in the heart of historic downtown at the Sheraton Portsmouth Harborside Hotel and Conference Center. Over 200 participants attended which included New England businesses associated with travel and tourism, the Governor of New Hampshire – John Lynch, Mayor of Portsmouth - Thomas Ferrini, - Key Note Speaker Dennis Snow – author of Unleashing Excellence: The Complete Guide to Ultimate Customer Service and Lessons From the Mouse, Mel Allen – Yankee Magazine Editor, Steve Jermanok and many other industry professionals. This outstanding line up of business professionals, organizers and speakers made this event a true pleasure to attend.

The 3-day conference was kicked off with a fun-filled 2 hour Cinco de Mayo networking Cruise aboard the Isle of Shoals Steamship. We enjoyed a breathtakingly beautiful tour of Portsmouth Harbor out to the Isle of Shoals, made famous by island poet Celia Thaxter.

There is a draw bridge that lifts up to allow the steamship to pass through – to my surprise, as we cruised out of the harbor, I looked up to see two workers hanging from harnesses on the bottom-side of the bridge! What a place to work! We continued on enjoying food and beverages while mingling with fellow event participants. We passed by tug boats, blooming nature, fishing boats, light houses and the closed castle-like prison named “The Alcatraz of the East”. Students from the University of New Hampshire Travel and Tourism study program were proud to have some of their research papers on display. The owner of the Isle of Shoals Steamship Company, Robin Wittaker and her personable staff provided everyone with a real class-act experience!

Thursday was jammed packed with excitement, education and networking. Headspace Design’s booth was set up amongst the hotels conference rooms accompanied by fellow-exhibitors from magazines, photographers, local chambers, resorts, and more.

Our day began with a welcome and NH Division of Travel & Tourism update followed by workshops and round-table discussions on topics revolving around marketing with a heavy focus on the importance of the proper use social media.

Our Key Note presentation was scheduled to take place via a trolley ride to the Seacoast Repertory Theatre. This trip was rerouted to take place right in the hotel due to a 9 hour stand off and bomb scare on a bus that was passing through downtown! The Key Note speaker, Dennis Snow presented a compelling and inspiring presentation “Unleashing Service Excellence, Lessons From the Mouse”. Snow encouraged businesses to “look through the lens” of their customer. He presented simple models that could provide true lasting memories, a “WOW” experience and a sense of relationship rather than just another plain old stale experience. Every detail matters to the customer when you look through their eyes. He went on to add that this generation is in fact one of the most social generations to come about in a long time. They are very unique, in being an extremely “technologically social” society – this is the key to understanding our younger generation. Snow’s transparency, humor and 20+ years of experience with Disney provided all in attendance with a fresh perspective on how to provide the most engaging customer service experience possible.

The day’s events continued with more exhibitors networking, facilitated break-out sessions, a Member & Legislator Reception and a silent auction. We wrapped up our busy day with a lovely Farm/Sea Table Dinner Banquet where we enjoyed delicious local cuisine including Bison, fresh produce and local wines, cheeses & breads. The decadent dessert spread at the end made for a inconspicuous loosening of the top button on my trousers and a well deserved night sleep!

The conference continued into Friday with more outstanding presentations and events. The highlight of the day was the travel writer’s panel, “The Increasing (Not Decreasing) Role of Travel Writers Working Online & In Print”. This dynamic panel included Mel Allen, Yankee Magazine editor; Steve Jermanok, Boston Globe, Outside, multi-media; Marty Basch, Columnist for the Concord Monitor, Valley News, Caledonia Record, Keene Sentinel, Boston Globe contributor; and Christina Tree, New Hampshire, An Explorer’s Guide, Yankee and Boston Globe contributor. The panel encouraged businesses to share from their hometown perspective offering unique details and honesty rather than a stale “announcement of the companies new Director” when presenting ideas for press releases or article suggestions. There are many ways that the same story can be presented for topics of inclusion. For example: The announcement of a new chef could be included not only in the food section, but also in articles about unique local people or the trends of organic produce. Use your imagination and go beyond simple boring facts to create a “sense of place” for readers.

The conference ended with a Keynote address, End the Hype: Getting the Most Out of Social Media Marketing with Christine Major from Awareness Networks.

I wrapped up my day with a visit to the Maffatt-Ladd House and Garden, www.moffattladd.org who opened their doors special for conference attendees, a walk through the indescribably beautiful Prescott Park and a visit to some of the wonderful local downtown businesses. Overall, the conference was well attended, professionally run, informative and honestly…simply too much fun. Headspace looks forward to developing the relationships established with these fine industry professionals throughout the year and our attendance at next year’s conference! Many thanks to the NH Travel Counsel for their hard work.

1 Comments | Posted on April 2nd, 2010

In many ways, I don’t envy client who hire design firms.

Imagine you need to buy a couch. You walk into the furniture store, and the sales rep tells you he has the perfect couch for you. Only, here’s the thing, you can’t see it until you buy it. That’s exactly what clients of design companies face, and rightly so. After all, design is custom to the client, so unless the client has a crystal ball, it’s impossible to see what the design the company will produce. Because of this natural fear of the unknown, we often see requests outlined in RFP’s that are a little bit outrageous.

Let’s break down what the fears are, and what can be done to alleviate them. Also keep in mind I am not speaking strictly about design companies but development and marketing companies as well.

We will take their money and leave them with a broken monorail

Many clients fear that a company will come along, swindle the poor business owner, and then take off to Mexico with their money without performing the work, or performing it shoddily. While the tendency might be to wait until all of the deliverables are met to pay the design company, this approach will only turn off a real firm that could do great work for them. Cash-flow is a reality for every business, and good firms cannot afford to work for weeks or months straight before getting a portion of their fees.

A better approach is to ensure that there is a contract in place before the project begins. A professional firm should have some sort of statement of work that outlines what the client will receive, when, and what the terms of payment are. As long as that is signed off and agreed upon upfront before any work is carried out, it is highly unlikely a client will get taken advantage of.

They will not get what they want

Some clients fear that when all is said and done, they will not be happy with the work and still have to pay the agency fees. Much like in the couch example mentioned above, clients don’t like not knowing what they will get before they hire a firm. Some will even request design mock-ups within a proposal, otherwise known as spec work.

While seeming reasonable to those outside the industry, spec work is inherently evil. It is asking a company to perform their work before there is a commitment from the client. It is like asking a carpenter to build you a deck and if you like what you see at the end of it, you may decide to pay him; But if it’s not quite your cup of tea, well, you will tear down and ask another carpenter to give it a try.

A much better approach is to carefully consider the design company’s approach, portfolio, case studies and client references. If the company provides that, a client can get a true sense of their quality of work, and they can rest assured that the firm will deliver designs that meet the objectives of the project. Of course in any project there is some back and forth collaboration, and really there should be. The client-designer relationship is just that, a relationship and there needs to be give and take on both sides. Client should expect to have their likes and dislikes challenged, as they are not necessarily design experts, and are probably not the target audience that they are challenging the design team to influence. Also, design companies expect that their clients may request revisions to their designs that they do not agree with, but are willing to make if they do not sacrifice the professionalism of the work.

Lack of support

Especially in development, clients are often concerned that the company they choose to build their website or application will still be there one month, 6 months or a year from when the product is launched. They want to know that there will be a friendly voice on the other side of the phone in the event they screw something up in their content management system, or when they need a new feature developed. It can be a scary thing for a client to feel all alone when they are dealing with technology outside of their area of expertise. It can also be unsettling to know that the company they chose to build their project is now out of business or simply nowhere to be found.

The best way for clients to alleviate this fear is to, again, check references. Make sure the company is incorporated and insured, that they don’t have an obvious history of financial instability. It may also be worthwhile to ask for a support agreement in the form of a retainer so that it is clear from the beginning that ongoing support and maintenance is covered in the agreement. While this will probably require a financial commitment, it will ensure that the client can always pick up the phone and expect timely help when needed.

While unfortunately there are occasions where bad things happen to good people, in the professional community, it is rare that design firms are looking to do harm to clients. More often than not, they are looking to improve their client’s businesses so they can showcase that success in their portfolio, so client usually do not have anything to fear as long as they communicate and operate in a respectful and professional manner.

Have I left out any other fears that clients may have when hiring an agency? Are there better ways to set aside those fears than what I have mentioned? I welcome your comments below.

0 Comments | Posted on March 18th, 2010

Many of the web projects that we bid for specify in their RFP that the vendor must build with web standards as specified by the W3C. However, in the past, some of our clients have wondered why sites we produce do not always validate, and some clients have even been challenged by losing bidders that they apparently made the wrong choice in a web partner. We were once even told that because a website didn’t validate, it would not rank highly in search engines!

The attempt of this post is to set the record straight and dispel the myth that web standards and validation are the same thing (though they are closely related).

Without getting into the intricacies of web standards, it is important to note that web standards have been devised by the W3C to separate content, presentation and behavior. HTML tags are “marked-up” around textual content in a semantic manner (using tags to describe the meaning and format of the content), and in a separate file, CSS is used to instruct the HTML how to look (ie: fonts, colours, layout etc.). For a more detailed, but completely simple and comprehensible explanation of web standards, see the post on Boagworld.

The W3C offers a validation service for free that will automatically scan a web page for inappropriate HTML tags. This makes sure that critical things like missing closing tags are spotted and corrected by the web developer. Validation is very useful and an important check to make before launching a website, but is it the same as building a site with web standards?

Remember that the ‘wrong’ way of building websites was often with HTML tables for layout, image tags for headings, and inline style-sheets. The ‘right’ way is with semantic HTML separated from presentation code. However consider this; You can build the old way, and your page will still validate, as long as your tables are correctly written, your image tags have alt attributes specified and your inline style-sheets are correctly formatted. So for anyone who says validation is some sort of certification or that it is official “proof” that a website is built to standards—the validator would in effect be approving a badly constructed website, and incorrectly stating it is built to standard.

Conversely, a properly coded, web standards-compliant website may be missing an ALT attribute on an image (which basically describes the image to users who have images disabled in their browser). Or the parameter that opens a link in a new window (target=“_blank”) may be in use. Because of these minor offenses, the web page generates validation errors. Should the errors be corrected? Probably, but sometimes it is the lesser of two evils to use degraded tags that break validation, while keeping the intended functionality of your website. (For all you geeks out there; I know you can use javascript to open links in a new window, but it’s not my point. Once a website is in a CMS, clients will often add images with ALT, or use the target parameter, in which case it’s out of your hands).

The point is, a non-standards based website may validate, while a beautifully coded, standards-based website may not validate. Validation is a best-case-scenario checklist, and not the be-all-end-all decider or whether or not a website was built with web standards.

2 Comments | Posted on March 3rd, 2010

If you are a web designer or work with web designers, you know that content is a real challenge when it comes to producing a quality website. Mainly because content is of critical importance, after all, that is why users are there in the first place. However, many web teams ignore content until the very end of a web project. Why?

In my experience with print design, I often had finished, client-approved copy before I was even briefed on the design. When it came time for layout, everything I was using for content was real, and I would get annoyed if any last minute copy changes came in after I spent hours kerning and massaging my lovely blocks of text.

With the web however, most of us have gotten used to the lack of finality with our designs. A website is never truly finished, unlike print, where the piece, sooner or later get’s printed—and then it’s done and I’m on to a new project. I think because of this inherent flexibility in the medium of the web, it has caused website owners to neglect copy, because they know it can always be done and added later, usually in a content management system.

In a perfect world, content should be available to a designer before he ever begins designing, just like the good old days of print. Would you agree?

But let’s get real

I have to say, while I generally would prefer this, I know that 99% of the time, it’s never going to happen. Time is money, and as long as I am waiting around for a client to write content, or even have a professional writer get copy written and approved by the client, I am wasting precious time that could be spent developing a look and feel for the website, or constructing the back-end.

Also, there are times where it actually doesn’t make sense to have all the copy written. Sure, things like calls-to-action, headlines and home page copy is great to have well in advance, but often it can be easier and more freeing to design content once it’s in place and on the page. Especially user-generated content cannot possibly be written in advance of the website design, so lorum ipsum will do just fine. And of course, in many other situations, content is not made up of words at all; It may be in the form of video or images, in which case, placeholders will have to make do.

Impossible to design without?

There have been strong comments made by very established web professionals who decry that good design can only be created with content already developed. That content is king and design is what the king is dressed in. And while I wholeheartedly agree, I also believe the being able to design a quality website can be done before every piece of copy is written. If you know the business (or non-business) goals of the website, who it’s target is, the site-map and information architecture already established, and you know what kind of copy will eventually be in place, then who is to say an effective solution can’t be designed?

Do you agree with me, or think I’m out to lunch? Let me know in the comments below.

4 Comments | Posted on January 17th, 2010

For many web professionals, there are as many web-based applications and resources in one’s toolkit as there is traditional desktop software. I thought it might be helpful to share some of my favorite web-based resources with you. Keep in mind I’m not saying that any of these are definitely the best that can be used, they are simply my favorite. It is subjective to say any app is the best, so feel free to share your preferred applications in the comments below.

Project Management

Basecamp - For project management, Basecamp has little competition. It has defined the standard that many web apps are now measured by, and the creators have even built an open-source framework around the technology used to make Basecamp. We just love the simplicity, the great messaging/commenting system, to-do’s, milestones, and file-library functionality. Keeps us and our clients on our toes.

Email Marketing

Campaign Monitor - I have never used a better email marketing tool than CM. The templating system easily allows us to create editable newsletter templates for our clients, and even let’s them manage their subscribers, and view reports, seeing who opened and where they clicked on the campaigns. There is also a great feature which allows you to test your campaigns in a variety of email clients, and lets you know if it will get caught in spam filters.

Site Metrics

Google Analytics - The monster that is Google knows how to kill it’s competition, and one of the best examples is Google Analytics. Easy to install, and free to use, GA gives you advanced metrics, allowing you to see how many visitors are coming to your site, which are new or returning, where they are coming from, keywords they are using in search engines, where geographically they are located, which pages they click on, for how long…. the list goes on. This info is absolutely critical in calculating ROI for our clients.

Invoicing

Less Accounting - Less Accounting’s name says it all, you get to do less of what you hate doing. Great for freelancers (although adminittedly a bit slow and buggy as of late, which I am assured the developer’s are correcting), Less Accounting is a little lite for professional accountants. However if you want a tool to manage invoices and receivables, LA has a new and improved interface that makes it nice and easy.

Sitemaps

SlickPlan - A tool I learned of only recently, SlickPlan is awesome! It takes the pain and tedium out of creating sitemaps and flowcharts, allowing me to concentrate more on the actual structure of the websites or applications I’m planning. Best of all, it’s free (for now) and paid for by advertising. I use it for every new project.

Content Management System

ExpressionEngine - What can I say, we have completely adopted EE as our CMS of choice over the past couple of years. ExpressionEngine is the most well rounded CMS I’ve gotten my grubby hands on, being flexible, clean and modular, having a great support team, a fair price, virtually error-free code, a loyal third-party community of add-on developers, I just love EE. Our clients tend to love it too, as it hides a lot of the options some other CMS’s are plagued with (cough, Joomla!), and keeps the CRUD functionality straight-forward for novice users. For more advanced custom applications, we ues EE’s nerdier sister, CodeIgniter.

Honorable Mentions

While the aforementioned apps are my favorite and most critical for our business, the following applications deserve a mention. And yes, I know, not all of the following are technically speaking, ‘web applications’ and are more like ‘websites’, but enough semantics, on with the names:

Google Adwords Keywords Tool

- Before beginning a PPC campaign, or even organic SEO strategy for a client, we first check the keywords to see what the search volume is, how competitive they are to rank for, and get some ideas on alternative keywords for more targeted, long-tail approaches. There are tons of SEO tools out there, but the Adwords tool is great to get a high-level snap shot before you begin.

Better Lorum Ipsum

As a web designer, we use a lot of lorum ipsum, the classic ‘Greek Text’ substitute for content, when you need to style copy that doesn’t exist yet. Better Lorum Ipsum lives up to it’s name, allowing you to choose short sentences, long sentences, bulleted lists etc. It’s surprising how often I refer to this site when designing.

Good Password

- Another simple yet surprisingly useful tool. I often have to create passwords for clients that are secure, and Good Password quickly and automatically generates a secure password in just a few seconds. Better than mashing the keyboard.

Kuler

- A great design tool, Kuler is an Adobe product (and possibly the best example of link-bait ever!) which allows you to experiement with different colour combination. It beats simply messing around in Photoshop for two main reasons; a) it auto generates complimentary, triad, monochrome and analogous combinations, helping you instantly find colour combos that ‘work’. b) Kuler shows user-created favorites, and and is great inspiration when working on a brand project where you need a new palette and all you can think of is orange and blue.

IStock Photo

- Okay, I know, Istock is just a cheap stock photo site. But more correctly, it’s the leading stock photo site, and it’s quality can at times rival the expensive rights managed stuff. It’s also a great resource when you’re just looking for examples in a mock-up or mood-board to show the general theme or style you’re going for, even if you don’t use the photo in the end. More than photos, It’s also rich with icons, illustrations and textures that can be great to just get the creative juices flowing at the beginning of a design project.

Media Temple/Plesk/PHPMyAdmin

- Finally, the trinity of server management, Media Temple is our host of choice for the flexibility it offers, Plesk is the standard interface for managing domains, email accounts, and server files, and PHP MyAdmin is for managing databases on said server. The latter two are pretty standard on most hosts, but are nonetheless, critical for running a web business.

Hope this helped give a little insight into how we work and the tools we use. What are your favorite (and essential) web applications critical to running your business?

30 Comments | Posted on December 24th, 2009

So recently, a rather bold individual walked into our offices and proclaimed how 99designs has made our jobs obsolete, and now any company can get top-quality designs at bargain basement pricing. How true is his claim?

For those who don’t know, 99designs works this way:

You the client have a project. You upload your brief and your budget to 99designs (your budget may not even be enough to rent a motel room for a night)
Thousands of designers can compete, uploading designs for you to review
You choose from a bunch of entries, maybe even hundreds, possibly thousands, and provide feedback
You pick whichever one you like best, and pay the designer

Sounds great doesn’t it? Finally, a way to avoid shelling out thousands of dollars to a designer or firm, and a way to get exactly what you want.

Why it’s bad for designers

For ethical and sustainability reasons, spec work is bad for the design industry. Designers do not sell products, they sell their time creating products. In other words, the service of designing. This is similar to how lawyers do not sell successfully won cases, they sell their time preparing and consulting with their client with the hopes of winning said case.

To ask a designer, who would normally charge money by the hour or by the project, to give away free design work “competing” to win a project is like asking a carpenter to build you a chair with the hopes of getting paid if you like it. Would you pull 8 hours of shift work with the hopes that you would get paid if your employer is pleased with your performance?

99designs is bad for the design industry as a whole because it cheapens the profession, literally and figuratively. It perpetrates the notion that graphic design (web design etc.) is easy, and all you need is the right software and a ‘good eye’ to be able to do it effectively. The fact of the matter is, good design is not easy. More than just making nice-looking graphics, it requires problem solving ability, strategic thinking, knowledge of business, communication skills, knowledge of art history and popular culture to name a few skills. Good designers require years of training and work-experience to hone their craft and be able to deliver strong, effective design.

Therefore, to poison a clients’ mind with the idea that it is simply a matter of splashing digital paint on a computer screen and letting them decide which option they want to pay for destroys the credibility and profitability of our profession. By the way, did I mention that the budgets on 99designs are horrendously low? If a professional designer were to actually take the proper amount of time to work on any given project, at these prices, they would make more money flipping burgers.

You may ask why so many designers even bother if there is no money in it. I will explain that next.

Why it’s bad for clients

One might say that it is the designers’ choice whether or not he wants to take part in a design competition website like 99designs, and so you can hardly fault the clients for wanting cheap work if there is a professional designer out there willing to give it away.

Let me explain this with a question; What would your initial feeling be if you were to walk in a pawn shop and see what appears to be a high-quality item priced for less than 1% of what it would cost in a store? If you said you would think it’s stolen or counterfeit, then my point has been made.

So who are these people out there giving away their services for free in the hopes of getting paid, and how can they afford to feed themselves canned chick peas, let alone enjoy a comfortable living? I would put them in the following categories, and keep in mind, the term ‘designer’ is used loosely:

1) The Kid

A whiz with Photoshop and Corel Draw, this mid-pubescent designer works in the safe comfort of his parents basement and uses the competitions as a way to kill time between rounds of Unreal Tournament, and hone his understanding of lens flare effects. He’s using the 99designs projects in his portfolio to apply for design college where he will actually learn about graphic design. Is this who you want designing your corporate identity?

2) The Mass Producer

This designer believes it’s all a numbers game. She has built up such a massive library of design templates over the years, that to submit for a competition is like pulling out 2 year old Halloween candy from a barrel and dumping a handful into a new treat bag. There is no strategy, uniqueness or customized problem solving here. Just stock icons, textures and illustrations with “YOUR NAME HERE” replaced with… your actual company name. So much for “the best possible design to meet your needs”, as stated on the 99designs website.

3) The Hack

This designer just plain sucks. Having a slight understanding of design software but no understanding of design, this guy makes countless amateur mistakes like squished-type or vertically stacked words, and overused 3-D effects like drop shadows, reflections and lens flare. To him, typography is a study of maps, kerning has something to do with corn on the cob, and Paul Rand makes a brand of guitars or something. This designer needs 99designs because frankly, he couldn’t get a job designing popsicle-stand signs for the neighborhood kids even if he was paid in frozen Kool-aid. The children would just point and mock.

4) The Thief

This designer knows what good design is, but just doesn’t have the skill or patience to actually do it himself. So he finds good examples of design and rips it off. From awards galleries to Wordpress Themes, no lovely design is safe from his money-grubbing hands. What you think is an amazing design for your company brand is actually already in use by someone else, maybe even your competitor. You may not find out right away, but your customers sure will. You’ve just paid for counterfeit goods.

Okay, while I’ve clearly had too much fun writing these description, I think the point should be clearly evident; Just because in your opinion, the designs look professional on 99designs, it does not mean it is. Anyone who told you that 99designs is the same as hiring a design company or professional freelancer is simply wrong.

Professionals take time to understand your business problem. They research, they brainstorm, they get inspired, they concept and sketch before they even open Photoshop. Their finished work is not just attractive - it is original, it’s customized for you, and it strategically communicates your message to your target audience in a way that will make them remember you and buy from you. They may actually create work that you do not personally like, but unbeknown to you is precisely on target and will be effective. In fact, a professional designer could, and should challenge your perception of what good is.

Closing arguments

In many ways, I don’t envy clients. When shopping for design, they are being asked to spend money before they’ve seen a finished piece. They are buying in faith that the finished product will be good. Sure 99designs is tempting because it gives you multiple design options quickly and cheaply. Don’t be fooled. You’re better off going to a local design school (community or private college) and at least giving the students some experience. The results will probably even be better.

Especially if you are a company with a proper amount of marketing money, don’t be cheap. Hire a reputable designer or firm who will work with you. Pay them for their work. Remember that most successful companies—from Fortune 500’s to locally-owned private companies—have used good design to get to where they are. Rest assured, they did not use 99designs.

9 Comments | Posted on October 16th, 2009

Many business owners think of graphic design as just eye-candy. They’ll use terms like, ‘I need you (the designer) to pretty it up.’ Or, ‘I’ve got the basic layout done, I just need you to make it look good.’

Of course we know that true graphic design is about communication, and to be a good designer, you need to be a good problem solver. Even more true with the web, design is about looking great, for sure, but also being usable, accessible, converting users, etc. But sometimes we forget about how good web design can influence search engines.

You may say that I’m mad. That google bots can’t possibly crawl my web page and tell whether or not it looks good. Indeed, some of the ugliest websites can rank #1 for a particular topic. In fact, my latest search on Google for good web design brought up this page as #1 in the organic results. Hardly eye-candy. (Funny enough, the author is Robin Williams)

However, I’m going to show you a prime example of how good design can affect search engine results. There is a web marketing agency in the US called Viget Labs who does great work, and have 4 teams, or “labs” that corner every area of the web, design, marketing, user-experience/strategy and development. Each of these labs have their own blog off of the main company website with an entirely different look and feel.

Company Website

User Experience Blog

Development Blog

Marketing Blog

Design Blog

Many of us in the web design world were impressed when Viget came out with their 4 sub brands, and even more so when we saw the quality of the content for the most part, and the consistency with which each blog was updated.

However, despite the fact that all the micro-sites are well designed, have the same quality of content, and the same team coding them and optimizing them for search engines, which one ranks better when searching for the term “Viget” in Google, other than the company site? The design blog. Why? The design blog simply has a more impressive design. Sure, the other blogs look great, but the design blog, with it’s water-colour background (which has since become a web design trend) has a certain mood and feel that the others can’t compete with. And when all of the other design blogs and ‘best-of’ lists came out, most of them included the Viget design blog over the others. And of course, the more quality in-bound links a website has, the higher it’s search-engine ranking will climb.

In short, create something that people enjoy using, because of it’s great content and design, and most likely, users will stay on the site, come back to it, link to it and search for it. Good design really has a complete impact on the entire strategy of your website.

And it looks pretty.

5 Comments | Posted on September 6th, 2009

For years, web designers have not gotten the respect of print or interior designers in the greater design community. Need proof? Take a look at any design annual or magazine such as Communication Arts, AIGA, or any of the design competitions or award shows. Web is always it’s own category, and simple, well-designed sites are rarely considered for web awards, with most judges favoring big-budget Flash sites featuring embedded video and gimmicky games.

With this stigma attached to web design, many designers coming out of school are turned off by designing for the web, thinking of it as a limiting platform for design. After all, with print you aren’t limited by available fonts, screen resolutions or bandwidth. The world is your oyster with print, at least in their minds, while web is the unfortunate necessity you have no choice but to design for. But I thought I’d outline reasons why designing for the web can be more fun than designing a print piece. Some might say that some of these reasons are actually more in print’s favor, but I disagree, as you’ll see:

1. People use the web

Sure, people use print too, such as in the case of newspapers, magazines or catalogs. But generally speaking, users visit a website, sometimes daily, in order to find information. Print is easily discarded, while a user will return to a website time and again to buy products, view editorial content, or interact with a social community. (There’s a reason the newspaper industry is hurting, and many publishing companies are scrambling to switch their advertisers over to the web.)

It is this general nature of websites that make it more fun to design for—you have to always be thinking about usability, unlike print where you are mostly thinking about visual interest first. The left/right brain mentality of always designing with the user in mind is what makes the web so fun to design for.

2. Users can contribute to a website

The idea of readers of media contributing their thoughts and opinions is not new. For a long time people have been interested in submitting ‘letters to the editor’ in order to get their rantings published. The beauty of the web is that it’s so much easier, and without as much of the screening process of traditional editorial—users ideas, intelligent or not, can get out there for people to see.

This presents an interesting design challenge. How can you visually allow for content that will grow, expand and change long after you’ve designed the website? That challenge, to create a flexible information scheme that will allow for change, is fascinating to be faced with as a web designer.

3. You don’t know which device your audience will be using

Print is so easy in some respects. When you design an 8 page brochure, you know exactly how big it will be, how close people will be viewing it, what material it will be printed on and so on.

With the web, there is an endless variety of ways users can see a site or application. Some of your users may be viewing it on an outdated 800 x 600 screen resolution, so the site will appear big and bulky with little white space, while others may be on a massive 30” flat panel, resulting in the website appearing tiny taking up little of the screen.

Other users still might be on a mobile device, be it an iPhone, a Blackberry or a Razr, people use the web very differently on these devices than when using a desktop PC. Let’s not even get started on browsers; Firefox, Internet Explorer 6-8, Safari, Chrome, Opera, Camino, there are so many browsers out there and many do not interpret HTML and CSS the same way which can have disasterous effects on your design.

The challenge of designing for so many unknowns presents a difficult, yet satisfying challenge when your end product is accessible, and enjoyable to use on a variety of browsers and devices.

4. Separation of content and design makes your website design easy to update

Sure, the print world has Adobe InDesign and QuarkXpress, both of which offer style sheets and master pages which allow for templating pages and easy updating of text. But how often are print designs done in Photoshop or Illustrator? In these applications, it can be time consuming and difficult to update your designs.

The beauty of modern web design is that structure (XHTML) is separate from data (Database), which is separate from behavior (Javascript and server-side code) which is separate from aesthetics (CSS). WIth this separation of all of the elements means it is generally painless to update one without touching the other. Want to style a comment form that sits on hundreds of existing blog posts? No need to go by through one-by-one, just edit the style sheet, and presto! Every form across the whole website is updated to reflect your design choices.

That sure beats suffering through Photoshop layers.

5. You can’t animate print design

Maybe with the exception of pop-up books or flip-books, print material does not animate. And while we are comparing apples and oranges, the fun of designing an interface is that animation presents a whole other box of tools in your design arsenal.

While Flash animations of the web 1.0 era has left a bad taste in many mouths, the fact is, being able to show/hide panels of information, and fade or slide in images can add a lot to the user-experience. Even when appropriate, being able to embed video or animate text and images in Flash can be entertaining for the end-user. The ability to add sound, motion and video to a web interface, if done with good taste, gives you so much more to experiment with as a creative professional.

6. A client can update their content

This is often seen as a bad thing, especially when designing with a particular CMS in mind. But once you get used to the idea, letting clients manage their content creates a strange kind of therapeutic notion of letting your little baby bird fly away, not know what kind of adventures will come it’s way.

Okay, that’s a bit over the top, but it’s true that, while it can be disheartening to see a client with poor taste and little self control mangle your beautiful design with bad content, it can also be exhilarating to come back to visit a site you designed six months ago, and see that the client has kept it up-to-date with engaging content.

7. Visually impaired users can still enjoy your website’s content

When you think about it, a website is kind of like a print-piece that has Braille automatically built in. In other words, if you design and build your site to standards, with clean, semantic mark-up, add properly described alt attributes to images to name a few things, your website can be enjoyed by disabled users using a screen reader.

This doesn’t necessarily make it fun to design for, but it is something the modern web designer is always thinking about as he or she designs. Which is partially why, as an example, web designers use unordered lists styled with CSS image replacement instead of a table of images. The visual result is the same, but done the proper way, visually impaired users can still use your site’s navigation. The feeling of knowing that you’re building something accessible to all is satisfying, even fun in itself, isn’t it?

8. Users can always print out your website—not the other way around.

While the notion of a paperless office is an ideal worth striving for, the fact is, most users who want to read long articles would prefer to print out a web page instead of reading on the screen. With CSS, you can even specify a unique style sheet for the website when it’s printed, allowing for things like hiding interface elements, search bars, and colours that drain ink usage, and providing a simple, attractive black and white text layout that makes use of the paper space, which will make users much happier to read when they print it out.

While creating a print style sheet isn’t exactly fun in itself, knowing users can print the website content and comfortable read it adds to the overall user experience.

9. No nasty print errors

Print designers know that dreaded phone call all too well. The printer has an issue with your InDesign files, or worse, the client has received the printed copies and all of the images printed low res, or there’s a typo, or there was mis-registration of the colours. You know the drill. Just knowing there are the potential with those kinds of errors can cause undue anxiety on a designer.

Of course, when designing for the web, you need to be cognizant of errors, and we all know that things will go wrong, especially when viewing the site using Internet Explorer. But here’s the difference—when something goes wrong on the web, you fix it. You don’t need to start from scratch and re-develop the website. Having that safety net makes the web more fun to design for.

Those are my thoughts. If you have any more, please leave them in the comments below, or if you are an enraged print designer, please leave your opinion below as well.

3 Comments | Posted on April 2nd, 2009

View the original post here: 10 criteria for selecting a CMS

I like all of Paul’s choices for the post, including:

Multi site support

We’ve had a few instances come up where our clients have multiple websites all running off the same server. In these case, having a CMS that let’s you edit content across multiple sites from the same admin login is invaluable.

Roles and permissions

Whenever I set up a website for clients to edit themselves, there’s always some work involved in making it a pleasant experience for them. With different levels of permission, I make sure that while my Super Admin account has all of the bells and whistles that I need for development, the client’s account is significantly simplifed to make it easy for them, and also avoid the chances of them accidentally deleting everything!

User interaction

Modern sites almost always require some sort of user interaction, whether it’s filling out a contact form or adding a comment to a blog. How easy does the CMS make it to gather, store and view the data?

Managing assets

In many cases, clients need to upload images, PDF, and video files through their site. How easy is it for them to store and use the content?

These are all great points Paul made, but I have two more of my own I’d like to make:

Markup generated

Something I hate about many CMS’s is the HTML they generate. It’s frustrating to design and develop a standards based site with clean, semantic markup, only to have a content management system to spit out nested div tags with unintelligible class names like “node-21”. This sometimes can mean that your design is dictated, not by user testing or skilled designers, but the back-end code that makes the content editable.

Wake up CMS developers! The CMS should just control what flows out of the database, not what the users sees and interacts with. This is one of the reasons we love Wordpress and ExpressionEngine. Utilizing their powerful loop, it generates data and let’s you wrap it in any sort of markup you want.

Open Source vs Proprietary

This is a controversial topic, but the bottom line is this: Open source CMS’s are free to download and use, built by a community of developers. The downside is that if the CMS doesn’t have a large following, there is no one to support it, and also you don’t have a tech support phone number to call if you need help.

On the other hand, proprietary CMS’s are developed and owned by a commercial company. Some like this option because they can speak directly to the company for support and to feel taken care of. However in many cases, there is the risk of the company going under, in which case, you have to rebuild your site if you want upgrades. Also, I find that proprietary systems are more limiting than open source, simply from the fact that open source projects are built by a large community, and companies are limited to their staff.

What about you, do you have any other factors to consider when choosing a CMS?

5 Comments | Posted on March 30th, 2009

Two articles have been written about Headspace and our work for the Municipality of the District of Lunenburg. We’ve been engaged in an ongoing brand strategy, identity re-design and naming project, managing to convince an entire committee to buy into it. We’re very pleased with how it went, and how surprisingly open the committee has been to our work, thanks in part to the diligence of our client lead, Dave Waters.

The following are excerpts from the articles written in the South Shore News:

Municipality of Lunenburg adopts tourism strategy

“The Municipality of Lunenburg has been branded with a birdhouse.

That, along with the moniker Lunenburg Region, will form the logo to pair with future tourism initiatives such as a website and magazine ads.

“The birdhouse says rural and comfortable and over time, will become a recognizable aspect of the region,” said Kyle Racki of Headspace - a company specializing in strategic branding, print and web design - during a recent committee of the whole presentation.

Jennifer Faulkner of Headspace said a common example of branding is why many people choose Coke over Pepsi.

“I’m a Coke drinker and we all swear there is a taste difference, but really, the difference is slight, it’s really about branding … it’s all about the feeling you have when you interact with that brand.”

In terms of tourism, that’s an emotional promise made to visitors.

“It’s about finding a compelling message that you want to communicate to people, then interpreting that in many ways. Your brand is how people should feel about the area with every interaction - whether they’re on the phone, reading brochures, speaking to an operator or looking at signage - everything.”

She said a brand will also help define the municipality from its competition.

Marketing firm recommends municipality alter name

COUNTY - What’s in a name?

For marketing purposes, apparently quite a bit.

“Sometimes you have to say ‘your baby is ugly,’” said Jennifer Faulkner of Headspace - a company specializing in strategic branding, print and web design - during a recent committee presentation to the Municipality of the District of Lunenburg (MODL).

“Your name is lengthy, it’s confusing and it’s really not sexy, to be honest. That’s where ‘your baby is ugly,’” she laughed. “It’s really a political term.”

Therefore, the MODL plans to bill itself as the Lunenburg Region in future tourism initiatives.

“You need something you can market and recognize,” said community economic development officer Dave Waters.

“When I met with tourism agencies and groups in the area, the biggest difficulty I ran into was people don’t recognize that the Municipality of the District of Lunenburg is not part of the Town of Lunenburg.

“One of the things we wanted to do was find a name that was simple, not complex and something that would represent the area as a whole, and not a specific part.”

He said Lunenburg Region does that while differentiating itself from the town, but not too much.

“Although we’re trying to say we’re not the Town of Lunenburg, it would be suicide for us to ignore the town, because they’re the draw. We’re not a tourism destination, we’re a diversion. Having the name Lunenburg in there ties in to what we want to do.”

Councillor Martin Bell said the name also allows a more open invitation for partnerships with other municipal units that want to market the area.

“That was a real selling feature for me. We weren’t just raising our own flag, we were raising a flag for the region and capitalizing on a name that is recognized internationally.”

The Lunenburg Region moniker is expected to be used in context with marketing initiatives such as advertisements and brochures.

“It’s just a vessel to help carry the message,” said Ms Faulkner.

That message is expected to be delivered primarily to people in the Halifax area and beyond.

“This will not replace our municipal name or logo,” said Mr. Waters.

“This is strictly for tourism purposes only.”

“That doesn’t mean you have to compete with other people, it just helps to define you so people actually think about you. We know people are thinking about Lunenburg and Mahone Bay. How do you get them to think about you at the same time?”

Part of that strategy will involve marketing a natural, rural experience.

“That’s what people want,” said Ms Faulkner.

“They’re not looking for the Disney World experience. That has its place, but people want to have a real experience and interact with the community.”

She said among the region’s many selling points are diversity of heritage, unspoiled nature, unique communities with their own identities and local cultures.

“This is a big tourism trend now. People aren’t just going places to see something,” said Ms Faulkner.

“They want to experience local culture, and you certainly have that here - even local language - the terms and phrases you use or the charming accents some people have … it’s something unique and interesting people from away will remember and tell stories about when they go back home.”

Four attributes will be the keys for this marketing initiative - genuine, fresh, charismatic and eclectic.

“What happens with this brand is you take these four attributes and use them as pillars. You use them to communicate your message. As long as you’re true to these four attributes in how you do your logo, your ads and all your other materials, you’ll always be on brand.”

We’re excited to showcase the brand and two websites within the next month or so. Stay tuned.

8 Comments | Posted on March 19th, 2009

This post is heavily based off of the vlog from SEO Moz; Whiteboard Friday - How to Get Awesome Links

At one time, SEO for most businesses meant stuffing a few keywords inside meta tags. Things have certainly changed. Among many other techniques to boost ranking, the biggest being useful, keyword rich content, link building stands as the most effective way to drive traffic to your site. The basic concept is this; your site is being linked to by another site (AKA an inbound link) - not only does this help your site because user’s are directly visiting your site from this inbound link, but Google will increase your actual search ranking depending on the quality of the link. Which leads us to…

What makes a good link?

Three main factors make a good link, in order of importance.

1) Motivation - sometimes, the best things in life are free. In this case, that cliche certainly applies. When a site links to yours because they genuinely like your content and want to promote it, this makes for a better link than one that is simply exchanged or paid for.

2) Source metrics - The higher the linking site ranks, the better it is for you. For instance, if apple.com links to you, this is more valuable than a link from your grandmother’s blog (Like any grandmother has a blog).

3) Anchor text and URL - The words that is linked actually matter. If the linking site includes keywords in their link, this will boost your ranking for said keyword. For example, if someone links to Headspace, I would probably want awesome web design company as a link instead of click here.

How do I get awesome links

Good, natural content. This is the simplest way to do it, yet the hardest to pull off. If your site has great content, the inbound links will follow.

Content Licensing If your content or application has a creative commons license, then others have to link to you when they use your content on their sites. Example, a photo from a photo blog or a widget from a development company is used in a blog, it’s only right that the blogger links to the source - you. Kind of like how I’m linking to SEO Moz for using their content in this post.

Link bait and Viral content Similar to #1 - if your website or post is so interesting, funny, amazing, or controversial—the links will follow. Viral content gets quickly spread across sites like Digg, Del.icio.us, Stumble Upon etc. The challenge is making fascinating content.

Partnerships - This is obvious. If you have a sister company, another branch, or a strategic partner, exchanging links is both good and valuable.

Social Media and Good Directories - Although most social media profiles (Linked In, Facebook etc.) have little link juice, they are still worth posting. Also, good directories like Yellow Pages, Kijiji, or another qualitative list is good (not link farms).

There are more points in the SEO Moz post, but These were the points I found most valuable. Does anyone else have other methods of obtaining awesome links?

0 Comments | Posted on February 15th, 2009

Headspace has grown rapidly since its launch and has recently taken on several exciting new clients including the Tourism Industry Association of PEI, The Municipality of the District of Lunenburg, The Cabot Trail Working Association and the Antigonish Regional Development Agency.

The Tourism Industry Association of PEI has recently awarded the Anne of Green Gables tourism brand on-line marketing contract to Headspace. Realizing the world wide iconic reach of the character of Anne of Green Gables, TIAPEI would like to leverage the power of the internet as a marketing tool to communicate this unique and inspirational product.

In addition to building the worlds #1 ‘all things Anne’ web portal, Headspace has been hired to also develop a holistic on-line marketing strategy, using the internet to its fullest potential with elements such as a social marketing analysis and strategy, search engine optimization, search engine marketing, and podcasts.

Headspace Design is also presently engaged in several projects with The Municipality of the District of Lunenburg (MODL) including; brand strategy, design and development of two websites (tourism and economic development), advertising campaigns and itinerary development.

The first task at hand is the development of an MODL tourism brand that reflects the region’s cultural diversity and authenticity, and the development of a tourism website that provides an interactive online experience. MODL has an excellent base of tourism-related assets and resources that are being developed to accommodate growing provincial and regional market demands for particular tourism products and experiences, including shorter “get-away” vacations, destinations that are safe, clean and green, and products that maintain environmental values.

Headspace’s copywriting, design and layout expertise is put to the test with an exciting new project with the Cabot Trail Working Association (CTWA). The CTWA recently developed a signage strategy and has engaged Headspace to deploy this strategy by creating content and laying out 25 interpretive and orientation panels throughout the Cabot Trail.

The Antigonish Regional Development Authority (ARDA) has awarded the contract for the design and development of their new web presence and on-line strategy to Headspace. ARDA’s mandate is to promote and advance the Antigonish Region to the world by developing and facilitating initiatives through partnerships with stake- holders, ranging from the private sector to local and regional government. The ARDA has hired headspace to leverage the power of the internet as a tool to communicate this unique and inspirational region to the world.

All of this is just a sampling of some of the exciting things happening on our end. Stay tuned for more info, and even a new site design in the spring.

1 Comments | Posted on January 27th, 2009

For those of us who design and build websites, we know that there are ones that go smoothly, and ones that don’t. But even more important than how it goes while we’re working on it is what happens after the site goes live. This is where in some cases, the team designing the website need to know how to follow through.

There is a reason many of us fall short when it comes to following through; Let’s face it, when we get a new project in the door, we’re excited. Oh, the possibilities—especially when it’s a new client, or a new type of project from an existing client. We as designers are often anxious to begin sinking our teeth into a new problem, and coming up with a design, possibly utilizing a new style, trend or technique that we want to add to our portfolio.

But then what happens; After numerous client revisions, CMS development, IE6 bugs, and waiting for content to trickle in, boredom sets in as well. Perhaps another client project has come in that has replaced the passion we once had for the website that is now 85% done (but is just waiting on copy or client feedback). I believe this is why some sites that could have been great, just end up alright. I also believe a lack of follow-through can negatively influence our relationship with our client and affect future opportunities.

First of all, let’s look at how we follow through:

Content Implementation

In many projects, we have to deal with client-provided content. We all know that even if our client is Cormack McCarthy, client-provided copy is never as effective as if we have a web copywriter who can at least refine the provided content.

This is where attention to detail matters. It’s not just the “About Us” and “our Products & Services” copy that matters, it’s the little things. The headline that users see when they first visit the site, the intro paragraph, the email subscribe lead in, the contact call to action. These should not be after-thoughts, or meaninglessly tossed in. The attention to detail in the content can make or break a website. Often, the short blurbs of copy get read by more users than the ‘meat’ content of the website.

Design refinement

This ties in closely with content implementation. The tendency can be to simply flow in content into a web page CMS, but here the design choice we make can have a dramatic impact on the usability and thus, success of the site.

Because web designers often design before they receive finished content, unlike print designers who manage to get copy before they start, the initial design merely serves as a template. It may include a polished style for the header, footer, sidebar and home page layout, but the content—the most important element on most sites—can get neglected and become replaced with Lorum Ipsum. I believe some of the most interesting parts of the design process can come after the back-end is built and finished content is being flowed into the site.

Could the list within the copy be pulled out into a side box? Could the lead-in be larger and more dramatic? Could those three paragraphs of copy be set up into three columns within the content box? Would the list or prices work better in a nicely formatted table instead of an unordered list?

A great example is how Erskine Design changes their site layout to fit content, in particular, the case studies:

Another example is Jason Santa Maria’s website. He designs entire layouts based on the content of his blog posts.

CSS tweaks and fixes

While arguably the same as design refinement, tweaking our CSS can take a website from being ho-hum to oscar worthy (whatever that means in the design world).

Designers often hate it when the developed website doesn’t match our graphic design files. Conversely, sometimes we get sloppy in the design stage and don’t place elements with pixel precision, or we don’t bother with spacing out the headings from the paragraphs for example. This is where again, follow through at the end stage makes a difference. Also, making sure our site works in every browser/state possible, including mobile and print, will ensure our users always have a positive experience.

Client relationship

Maintaining a strong client relationship doesn’t necessarily have anything to do with the quality of the work you provide. You could have designed a killer website, and your client may be thrilled, or at least satisfied—and yet you could still pass up the opportunity for future work.

A good practice is to follow up with the client when all is said and done, when the site is live, when you’re busy adding it to your website portfolio. Take the time to write an email (and no, the invoice doesn’t count) thanking the client for their business, especially if this isn’t the first job they’ve brought to you. Ask them if they were satisfied with, not only the work, but the process and the support/service they received. This is really simple, but it goes a long way.

If the client was pleased, ask them for a testimonial and if you can use them as a referral. If they have complaints, truly listen, apologize where necessary and thank them for their honest feedback. You just may get the next job they have down the line.

Getting the word out - Website Marketing

And now another slight shift in topic, getting a client’s site out for people to see. If you’ve engaged the client in an upfront marketing strategy, then this should have already been planned out. But even if the client came to you for a straight-ahead design/build—you can still drop them a line after the site launched and present ideas to market the website.

Many clients and designers dust their hands clean when they finish a website, but this is the time when you can really do good for your client by helping them realize that simply because they have a new website doesn’t mean it’s going to market itself. As an added bonus, you can secure yourself more paid work by offering some or all of the following:

On-site Search Engine Optimization
Link building strategy and implementation
Email Marketing
Social Media Assessment and strategy
CPC Campaign management
Traditional print/radio advertising
Ambient/guerrilla advertising

Just like swinging a golf club, or shooting pool—a good follow-through will bring you the most success. If you do it right, you’ll ensure that you’re happy with your work, and so is your client.

3 Comments | Posted on December 28th, 2008

Most small to medium business have heard the term ‘branding’ thrown around before. Some think it’s a meaningless buzzword, others know that having a healthy brand is vital to the success of a company. But somewhere in the life of a business, it is essential to take a step back and re-brand, at least from a visual standpoint. But when does such a drastic decision need to be made?

When not to re-brand

Some small businesses when starting out, get a quick-and-dirty logo designed from a friend or relative. Eventually, they realize the short-sightedness of that decision when they receive negative feedback, or when they see that the identity doesn’t truly represent who they are.

Other times, a business will go through the right steps and contract a reputable, qualified freelancer or agency to brand their new company, looking at not just a logo, but the entire visual strategy that represents the goals, reputation and audience of the company. Some clients will then roll out this new brand, and then get antsy because they are not seeing instant results. This is not the time to re-brand.

Brands take time to become established. Did McDonald’s or Nike enjoy instant recognition when the golden arches or the check mark first came out? No. Will your well-thought out visual strategy instantly achieve success after six months and a few ad spots? Never. This is not the downfall of the designer or marketing team; all brands require time to grab hold of their market. Definitely keep an eye on it’s success level and act accordingly, but don’t jump the gun and re-brand if it’s not warranted.

Is your visual brand properly defining your business goals?

When you think that your brand may be losing it’s freshness, one of the key issues to ask about isn’t, “Does my logo still feel cool to me”. Personal aesthetic sensibility is never a true gauge of effectiveness. When you first branded your company, you would have received a brand strategy document and perhaps a positioning statement. At the time you may have thought that this was meaningless fluff to justify the high price tag of your brand session, but in reality these documents serve as wonderful guides to continue to point you in the right direction.

Has anything changed in your business goals? Are you now widening, or perhaps narrowing your target. Is one of your customer groups responding better than the previous markets you initially focused on selling to? Do you offer different products or services than you did when you first branded yourself? If the answer is yes, then you may want to look at revisiting your visual brand to help match your new values.

Has it been out for years and people still can’t recognize it?

If you have been out there in the public, and your customers and target audience have seen your ads, your website, signage, and stationery, and still can’t seem to remember you—this may be a time to reconsider whether your brand is working.

Remember that your brand is your reputation, not just your logo. If you can’t retain customers, it may have nothing to do with how you look visually, it may have to do with poor service, lack of supply, or whatever other reason people look to other companies to meet their demand. This is where survey’s and focus groups can come in handy, perhaps invest in some marketing research, a usability test, or any other professional way to gather information and learn why you are having problems attracting and/or retaining customers.

If the reason is just that your visual marketing pieces are boring, and not interesting your target audience, it may be time to refresh or re-brand entirely.

Has a competitor stole your thunder?

Sometimes, there’s nothing wrong with your design identity. In fact, sometimes, it’s pretty good. But one thing about humans is they adapt, their interests switch. Sometimes, you need more than just good, especially if a competitor has come out with a strong, attention-grabbing way of marketing to your customers. In this situation, simply looking professional isn’t enough. You need to jump up and down, and make a scene… in a good way.

Big companies do it all the time. Any massive BTC corporation needs to fight continually to retain market share. This is why car companies come out with new ads instead of running the old ones. It’s why phone companies who previously had little competition come out with a re-brand all of a sudden. If the big guys need to do it, you’ll need to as well.

Can you salvage anything?

A word of caution; If you decide it’s time to re-brand, be careful not to throw out the brand equity you’ve built up over the years. Even if your previous brand wasn’t working, obviously some people have seen it, maybe some have even liked it. If there is anything to salvage in your brand identity, see if there’s a way to retain it, but to take it up to a whole new level.

Take a look at some examples of classic redesigns of large companies, and notice how many times, they retain existing qualities to their old identities.

A more dynamic version of the simplistic burger icon.

Same log, new sleek look for Apple.

A recent redesign for Bell. They lost the uninspired icon, and kept a simple, but effective word mark.

For some more great versions of redesigned, check out this post on stunning examples of a great redesign.

3 Comments | Posted on November 3rd, 2008

Usability, part of the long drawn out series,12 things you need to know before commissioning a website.

In many cases, if you’re commissioning a website, it is not because you don’t have one, it’s because your current one isn’t working. Problem is, many don’t know specifically why they’re current website isn’t working. Perhaps it is just plain ugly or has outdated information. But what if you actually paid for a good website only a year ago, and it just isn’t helping your bottom line? That’s where usability testing just might come in handy.

Why the heck would I want my site just usable?

The term ‘usable’ generally doesn’t have great connotations, as if we’re content with merely being usable (eg: “How do you like that new Mercedes?” “It’s usable”). However in the context of websites, it is perhaps the most important element to get right, equally as important as branding, content and accessibility. So what is it? In a nutshell, it means that the people who use your site intuitively understand how to use it, enjoy using it, and it leads users to where you want them without forcing or frustrating them.

Achieving this goal is often easier said than done. While many sites we would typically refer to as having usability issues are old clunker sites done in 1999 by the proverbial basement-dwelling cousin, even some very high-profile, ultra-high-tech, insanely high-priced websites have equally poor usability.

Even sleek and sexy sites can stink when it comes to usability

For example, typical usability concerns that face websites are things like splash or welcome pages that have little to no content, poor navigation that makes you feel lost, hard-to-read text over gaudy backgrounds, you get the idea (visit user designed Myspace pages for examples).

But even very attractive, polished websites for fortune 500 companies can have crippling usability concerns. For plentiful examples, visit the FWA (Favorite Website Awards). It posts “cutting edge” websites on a daily basis. And by cutting edge, they mean sometimes innovative all Flash websites, with sound, video, motion-graphics, and rich vector graphics. Don’t get me wrong, there is beautiful stuff on here, but there is also consistently unusable, yet original interfaces.

Revolution vs Convention

This is where the great divide comes in. On one camp, you have Jacob Nielson, a usability advocate who preaches conformity to established rules (and you can tell by his website that design, creativity or originality isn’t a concern of his). In the other camp, you have design organizations like Communication Arts, and the aforementioned FWA, as well as prominent companies like Barbarian Group and Big Spaceship who seem to feel that conforming too closely to usability laws stifles creativity.

Usability testing

But let’s bring it back to you. Let’s say your website looks good, it’s on brand, and yet you notice that 80% of your users bounce off of the home page. There is a definite chance you have usability issues. Those could be visual (ie: layout confusing, nav too hidden, buttons not big enough etc.) or they could be copy-related (text doesn’t draw in users, there’s too much body copy not enough quick snappy callouts etc.).

One of the best ways to find out is by conducting a usability test. In the past usability tests were expensive, involving two-way mirrors, and demographically-chosen test users with tubes hooked up to the back of their heads (okay, I made that last part up). It doesn’t have to be that way however. With great tools like Silverback, usability testing can simply involve getting a handful of users together and observing their behavior as they navigate your website, noting where they have difficulty. Nowadays, small-medium sized companies can generally afford usability tests.

Conclusion

Hopefully, this information will prove useful to you as you commission a website redesign or rework. Keep in mind that usability is directly related to the mainstream consensus of web users, and as they evolve and adapt to interface conventions, so will the standards of usability.

0 Comments | Posted on September 12th, 2008

You know how in high-school, there were always those kids who wore dark, baggy clothing, half of their face was covered in long hair, and their swagger almost seemed like it was concealing something, like they were about to rob a convenience store? They really look bad, but they wouldn’t know it. It appears they think they’re cool, but deep down we know that really they are insecure. They are afraid to stand out by dressing in stylish clothes, by walking confidently, by speaking clearly and articulately. Eventually they’ll move on, grow up, go to college and become the CEO of a company - all they needed was to mature and grow in confidence.

In a way, that’s how many small to medium sized businesses market themselves, on and off-line. They don’t have a huge amount of dollars at the start, but more than that, they don’t have the confidence to market themselves properly, stylishly you might say. To be stylish will make one stand out in the marketplace, and that, strange as it may sound, is not what most new businesses want. They want to blend. Hide in the shadows. But to stand out is terrifying, because they feel that deep down, their business isn’t ready.

This is natural. But don’t let early growth scare you. Because, there’s never a good time to grow, you’ve just got to do it. If you can afford quality design or other marketing services, or if you know a colleague who is willing to help you out at a low-price, take it. You’ll never grow unless you have the sales to grow. You’ll never have the sales if you aren’t marketing properly. How do you market properly?

Find a good marketing manager, whether in-house or on contract

Don’t just look at the price. Look at his/her track record, clients and portfolio. Ask for a free consultation. And after that, if you like the feeling you’re getting, pay them for more consultation. Ultimately, a good marketing manager will know where you should be putting your efforts, and will have a solid network of specialists who can take you where you need to be.

Once you trust them, listen

When you have a good marketer in your court, take their advice. They may want to take you scary new places. They might even talk about things like social media, re-branding, expanding your customer base, or diversifying your audience. Don’t fall into the new business owner syndrome of, “This is what I’ve been doing, and it is what I’m comfortable with”. Remember, it doesn’t matter what you’re comfortable with, it matters where you want your business to be, and if stepping outside of your comfort zone will take you there, take a leap of faith. There are no rewards without some risk.

See the forest for the trees

I’ve used this analogy before. In this case, don’t be so focused on time lines and budget that you forget the long-term benefits of good marketing. Look at the big guys; The McDonald’s, Nike’s and Apple’s of the world. Did they get to where they are by being complacent, or content with their current sales efforts? Instead, they recognized the value of good marketing, and hired the best and brightest to take them to where they envisioned their company.

You might say, “I don’t want to be that big”. And that’s fine. But the point is, you want more business, and you want it to be steady. That will only come with standing out, and appearing better than even you think you are.

I don’t mean to sound like a motivational speaker, but be like that young student who eventually realizes the potential they have, and “dress” accordingly.

4 Comments | Posted on July 25th, 2008

A post I wrote has been accepted to Freelance Switch.

The article has been copied down below (but you should still check out the site!):

Before going out on their own, many freelancers struggle with the idea of how to position themselves in their market of expertise. Considering many freelancers have at one time worked in an agency setting, it’s tempting to have the agency mind-set when crafting your promotional materials.

For example, the decision of whether to use ‘I’ or ‘We’ can dramatically affect the way you’re perceived by prospective clients; “We can deliver excellent results” sounds much larger than “I can deliver excellent results”. The big question, then, is this: do you want to be an agency or a freelancer?

The truth is, most big agencies started as one or two people. For those who knew they didn’t want their business to stay small, they had to position themselves as something greater than what they were, and grow slowly over time. Therefore, any freelancer starting out has to consider the question of whether he/she wants to stay a freelancer, or grow into a firm. There are definite pros and cons to either approach. Here are just 5 factors to consider:

1. Overhead
2. Competition
3. Client caliber
4. Hourly rate
5. Busyness

Freelance

1. Little overhead. When you work from home, as most freelancers do, you have little to pay for, other than the cost of keeping a roof over your head, food in the fridge and the internet connection plugged in. Most of the money you make can go directly into your pocket, whether that be a savings account, investments, or a new Apple cinema display. The lower your overhead, the higher your profit margins.

2. Competitors are colleagues. Competition is fierce in any business, and the same goes with freelance design/programming/writing. That being said; many of our freelance competitors tend to be colleagues or even friends. People we can have a beer while sharing client horror stories. Sure, we may lose projects to them on occasion, but for the most part, there’s enough work to go around, and clients make their hiring decisions based on our portfolio, price, experience and professionalism—and nothing else.

3. Worth less in the client’s eyes. While reputable freelancers can certainly gather big client work, many large companies tend to favor established firms for their $50K projects. It can be hard to convince a prospective client that you can do the same quality of work as a 10 person company with a downtown office, a team of designers and coders, and an attractive front-desk person who offers to hang up the clients’ jacket and make them a cup of coffee. Meanwhile, the lowly freelancer is sitting with the prospect in a Starbucks. The truth is, many prospects worry a one-man band is unreliable since, as they often put it, we could ‘get hit by a bus tomorrow.’

4. Lower rate = no outsource potential. Let’s face it, freelancers generally can’t command the high rates that even small agencies do. Clients know we don’t have to pay employee salaries, or keep the phone system running, so the same caliber of work will often get sold at half the rate that the big boys charge. Because of this, freelancers generally can’t afford to outsource their work and turn a profit. As a result, they can only bill for the hours that they are physically able to work. This may mean they have to turn down work on occasion.

5. Octopus syndrome. Freelancers tend to suffer from this. They are required to be all things to all people; designer, writer, programmer, copywriter, strategist, accountant, cold-caller, dog walker, networking-event shmoozer—the list goes on. As previously stated, freelancers usually can’t afford to outsource their responsibilities, which means they have less time to be working on the stuff that actually pays the bills.

Firm/agency

1. Major overhead. Office rent, furniture, computer hardware and software (times the number of employees), file servers, phone systems, not to mention salaries—firms and agencies have overhead to spare. It’s usually the ol’ bricks and mortar that destroys the cool little design firm that used to churn-out award winning work… before they went under.

2. Competitors: they’re out to get you. Unlike freelancers, competing agencies are usually not the best of friends. Because of the aforementioned overhead problem, every agency needs all the work they can get. That means they’re usually savagely competing with other firms on proposals, and often bad-talking their competitors when they can. That can be a little unnerving when your monthly break-even rate is 50K.

3. More credible to large clients. One of the benefits of being considered an agency is that big clients with big projects have no problem handing you big wads of cash. You’ve got an office and a fancy phone system, so the client has less concern about liability. In this case, perception is everything.

4. Higher rates mean outsourcing potential. Because agency rates tend to be in the triple-digit-per-hour range, you as a business owner can leverage the talents of other people, whether that be salaried employees or contracted freelancers. This means you can take on more projects, and, if well managed, can turn a good profit.

Think about this in simple terms; imagine you could take on 10 projects a month, at $10,000 per project, each one requiring 50 hours of development time. You have 10 good contractors to outsource to who charge $50/hour, one contractor on each project. If you paid each contractor $2,500 for a job, and took the time to manage each client and each contractor, directing the quality of the work and the expectations of the client—you’ve just made $75,000 that month, you’ve got 10 happy clients, and 10 happy contractors who can be used in future projects. This is something you would have never been able to achieve as a solo freelancer.

5. More time to focus. In theory, if you have a team of either employees or freelancers at your disposal, you should have more time to do what you do best. If you find you’re better at developing business than designing, then you can hire a great designer and have fun watching her work some magic while you profit off of it. If you love being creative, but have trouble managing the business end (paying bills, invoicing, networking etc.), then you can hire someone else to fill that role. That means you’re spending your time doing what you love and what you’re good at, and avoiding the octopus syndrome freelancers often contend with.

Do what feels right

So what do you choose? There is no right or wrong answer because it all depends on what you value most. If you’re positioning yourself as a business, you can hope for more money in the long term, but more initial stress and start-up risks to go with it, and greater complexity overall.

Freelancing tends to offer a simpler way of life: working on what you want, when you want, but it may not bring the prestige of working on million dollar projects for international brands, or making the top CEO list in the local business mag.

Every company starts as one or two people, but it is your positioning that will dictate your growth potential. If you’re content to stay as an independent freelancer without any ball-and-chain overhead, then position yourself honestly as such.

Do you have any other factors that can help you decide whether or not to grow your freelance business bigger?

7 Comments | Posted on July 7th, 2008

In my experience, I’ve noticed that with traditional design studios, there seems to be more care put into the design process. Sometimes this process can be lacking when a firm specializes in the web. Perhaps this is because web firms have more to think about, there’s SEO, analytics, and the big focus; development. Poor old design can get relagated to the back seat it would seem.

But if you’re a designer, you need to fight for your craft! In many ways, this can be done by having a tighter process, which, instead of impeding creativity, will maximize client satisfaction and design quality.

Typical Design Process

1) Call/email/meet with client, go over design questionnaire
2) Begin design
3) Present design, and receive feedback
4) Make any necessary revisions
5) Once approved, send templates to development team
6) Review and test before launch

Okay, so this is a pretty standard process. I’ve found time and again though, that a few extra steps in the beginning and a few extra steps at the end go along way to minimizing needless client-revisions, and maximizing the quality of the final product. As you see, there’s only one extra number in the steps:

Suggested Design Process

1) Meet with client
2) Design Brief
3) Information Architecture/Wireframe/Sitemap
4) Design
5) Present
6) Translate to code
7) Refine and test

1) Meet with client

I can’t stress enough the importance of meeting with a client face-to-face. In many ways it can completely affect the final outcome of the website as well as the working relationship with the client. It is where you get a chance to present yourself as a consultant to the client, not merely an order taker.

The problem with sending an email questionnaire is that the client simply fills out an order for the designer, and then expects the order to be carried out the way a cook in a restaurant prepares a meal based off of written instructions, without ever meeting the patron. This is not the way to go about a design project. We want to develop real trust between ourselves and the client, trusting they know their business, and they need to trust we know design, and have their business interests at heart.

Also, you’ll notice that clients will often say completely different things when they fill out a questionnaire as opposed to a discussion, where they will naturally be more candid and less ‘official’. It’s this reading between the lines that will give you as the designer tremendous insight into the mind of the client.

If a personal kick-off meeting cannot be arranged (in the case that the client is out of the local area), a phone conference call can be arranged, but again, email exchanges are greatly discouraged, at least at this stage (once you know the client, email exchanges are fine).

Another note, it’s incredibly helpful to discuss content at this point. Getting a client thinking about their content early will reduce the likelihood of a site being put on hold for weeks while the client struggles to provide content. Having content, even if only rough, will also improve the design. Instead of designing a template with lorum ipsum, you will be designing with real content in mind. Content in this case can mean photos/video as well as copy. The more is planned from the beginning, the better. Never allow the client to treat content as an afterthought—it is perhaps the most important element of any website.

The business benefit of taking this approach is the up-sell factor. Unless you bring it to their attention, clients rarely think about the content. By reminding them that they need to provide it, you can often sell a client on allowing us to bring in a professional copy-writer for the written text, and a professional photographer for the images. This gives us better quality content to work with, and also brings in additional revenue for the company.

2) Present a design brief

Before even beginning the design, it is helpful to present a design-brief to the client. This is a common practice in traditional agencies, however it sometimes gets overlooked in a web design company, where other services such as site marketing and development can overshadow one of the key components to a site’s success—the design.

A design brief simply states back to the client in writing everything that was taken out of the kick-off meeting. It shows what your design strategy is based off of the clients’ goals. It defines for a client how to judge the success of the project, giving them a measuring stick, and eliminates the “wait and see” attitude of the client (ie: “I’ll know when I see it whether I like it”).

Once the design brief is signed off, it will serve as your guiding point for the rest of the project. If you stray from the brief, your client will let you know, and most likely question the design choices. If the client feedback is excessive and strays from the brief, you can always go back to it and state how your design fulfills all the mandates of the brief.

A good design brief is a crucial part of the design process.

3) Wireframe and site-map

Although its tempting to begin the design at this point, it can be helpful present a wireframe and sitemap to the client. This need not be in person, but a phone call to discuss is ideal.

Essentially, this is information architecture. You’re trying to get the client to understand and provide feedback on the information hierarchy without being ‘distracted’ by the branding aspect of the site design (ie: type, colors, photos). This will help the client comprehend your layout, which blocks of information go where, and it will help them understand the basic flow of the site—how users get from point A to point B.

This process can help you as the designer come up with ideas that improve the site usability, without being concerned (at this point) with the visual aesthetic.

4) Design

Now with all the necessary research and insight into the project, you can begin designing. Before starting the design on the computer, have a creative session with the design team. This is something done in most creative agencies, and again, gets overlooked in a web setting. It shouldn’t. A website deserves as much creative strategy as a print, radio or TV ad. Get together with the group, briefly discuss the clients goals, and then throw out concepts. Some of the greatest sites designs are based off of a concept, which help differentiate the client site from their competitors.

Remember that not just designers need to be involved here. It can be incredibly beneficial to brainstorm with a developer as well. Though we may not believe it at times, they are creative people in their own right, not just brains in jars plugging in function calls. Often, good developers will be able to offer insight into current development techniques being used that improve site usability, such as an interesting content feature, or a JavaScript method that still keeps the build within scope.

Before, during and after this, do thumbnail sketches of the site design so you can freely experiment with the design elements before being restricted by the computer. Remember, the software is only a tool to digitally translate your design. Once the team has brainstormed, leave them out. It doesn’t make business sense to have two designers working on the same site, nor does it improve the design by having multiple designs to choose from, which leads us to…

Don’t create more than one design. I highly discourage the act of mocking up multiple design options for a client. It devalues design, and wastes time and money for both the company and the client. Read more of my rant on the topic of multiple designs.

Although a common practice is to design a home page and a sub page layout, it is often beneficial to actually lay out the majority of the website using real (or close to real) content (which you received by now thanks to pestering the client at the beginning). Laying out standard pages such as ‘about us’ and ‘contact’ allows you to create sub page layout variations that depend on the content. This also gives the client a more concrete idea of how their site will look once coded and live. Of course, you need to actually enforce that these pages look like they were designed once they’ve gone to code land.

5) Present/revise design

With a finished design presented to the client, discuss with them how this design is based off of the wireframe, and more importantly the design brief. Show how all of the clients’ mandates for their target user are being met by the design. Don’t simply send it to the client and ask them if they like it—you have to sell it. NOTE: I usually refrain from referring to a design as a mock-up. I feel that subconsciously, this devalues what your offering by suggesting that it isn’t ‘designed’ until its in code form, reinforcing the notion that design is quick, cheap and easy. We are presenting their sites design, though not in a work-able format, therefore this is the time for the client to present feedback, not once it’s developed. Many clients try to speed through this ‘mock-up’ process to expedite the build. This will only cause problems down the line, and will slow down the developers.

Revisions from the client should be handled delicately. The trick is to balance customer service with self-respect and professionalism. Often clients will make judgment calls based off of what they “like”. However designing according to a clients’ taste is like shooting at a moving target. There’s nothing to base your decisions from. This is why presenting yourself at the beginning of the process as a consultant, and having an informed design brief will minimize the chance a client will tell you he doesn’t like what you’ve done. If a site is well designed and based off of real business goals, it can be sold to a client, even if he wouldn’t choose to decorate his home in the same style. One of the best ways to sell a client on a design is to repeatedly point out that decision X has been made for the target user. Decision Y has been made for the target user. This way your taste and the clients taste are completely left out of the equation.

There are times when a clients negative feedback is right on the money. Because they intimately know their business, they may have a request for a revision on an element that you’ve completely overlooked. In these instances, it’s important to avoid the cliche designer attitude that our crap doesn’t stink. Coming off as dogmatic only frustrates clients and makes them question your professionalism. If a client is completely wrong, and you believe strongly in your decisions, kindly and helpfully explain why you did what you did, and the magic words, “I can do it the other way, but I highly recommend we go with this approach, as it will [restate benefit]”.

6) Translate to code

Once the client has approved the design—and signed off—create the XHTML/CSS templates for the developer if possible. I like to create my own XHTML/CSS from scratch for several reasons, the primary one being quality control. No one understands your design better than you, and you’ll be able to pay attention to the minute details that a highly caffeinated, overworked developer will likely ignore. Most developers appreciate having a well put together template of the “easy stuff” so they can plug in the dynamic data, and you’ll be happy that your left margin is set to 22px instead of 20px, and the headings letter-spacing is set to -1.5 instead of the default 0. Design is in the details. If we designed the content to start 38px down from the header, it needs to be that way. We didn’t make those design decisions arbitrarily, and we need to stand up for them, Of course, at this stage it is also wise to cross-browser test, which will diminish the chance of browser bugs once the templates are integrated with the CMS.

I feel it’s a good idea in a design/development team to have a CSS framework. Having a consistent repository of code, and naming conventions, browser bug fixes will speed up development, and allow team members to pass code around, not having to take time understanding what the previous developer has done.

An often missing step in the web design process is post code design. Too often designers hand off their precious designs like a mother bird throwing her babies off a high tree branch for the last time, never to see them again. As designers, we should be actively involved in the implementation of content. I highly discourage developers, project managers or *gasp* clients entering their own content. No one knows more about typography than designers, and just as in print design, web content needs to be pampered and massaged in order to be truly effective.

Of course, a client with a large site featuring hundreds of dynamic pages, in the case of a store, or online magazine, should enter this content himself, however it’s imperative to work with the developers to establish a set of rules that will give the client zero control over the design of the page. Remember, they’re paying to have a system to manage their content, not redesign their site. If I hire an interior designer to design my living room, and then once she leaves, I proceed to repaint the walls, and change around all of the furnishings, I’ve wasted my money.

7) Test and Launch

In the case of a small to medium sized website, I recommend training a client on the CMS only after their site is live. This will ensure the launch date isn’t postponed due to a client trying to learn their tool, and it will take a huge burden off their shoulders, while at the same time providing the aforementioned design quality control.

Conclusion

Though some of this stuff is a no-brainer, taking a little bit more time in the design process can, in a long-term way, save us from undue stress, reduce client revisions, make for a happier client who values our work, ensure that we are proud to show off our design after its launched, and even submit it to award sites.

1 Comments | Posted on June 25th, 2008

This post is for many of the designers who work on websites - whether exclusively (in the case of web designers) or occasionally (in the case of designers working in communications firms). Most of us are adept at creating good looking design templates. By that I mean a; header, footer, side bar, home page, sub page. These are usually the basics when we go about designing a new website.

However, it shouldn’t end there. More is involved in bringing a design from good, and passable—to the kind you see plastered all over design blogs and awards sites. And if you’re passionate about design, which I assume you are, you’ll notice that there’s something strangely mystic about the really good sites - the ones that are indelibly imprinted in your mind for months. What is it that accomplishes such a feat? It’s usually the amount of time and care that the designer took in polishing the content.

Keep in mind, I am not claiming to be a master at any of these practices. With every new project I’m constantly trying to attain to this higher level of web design. Sometimes I succeed, but not every time. It is, as it should be, an ongoing exercise—after all, there is no such thing as a perfect design.

Here I’ve identified some of the elements of a design that—if given attention—can truly elevate it above most others.

Forms

There are some usability and web design experts that argue passionately that forms should not be styled. They say that it is important for web forms to look consistent regardless of the aesthetic of the overall page.

While I agree that, as one of the most fundamental elements that separate a website from a non-interactive medium like print, a forms’ purpose should be placed over its’ aesthetic, and should never be disguised. However, it makes sense to style a form to the extent that it fits in with the websites’ overall appearance, - even if it’s a simple matter of applying a border color and background to it.

More importantly, thought should be given to an elements’ width, height, and placement among other form elements. Input boxes, text areas, radio buttons and drop down lists should be carefully positioned and labeled in such a way that a user flows from one to the other with ease. This is particularly important in long forms, such as on a registration page.

To take this concept even further, some of the really thoughtful designers have added a sprinkling of Javascript to achieve a highlight effect when the user clicks inside an input box or a text element. This greatly enhances the usability and flow of a form. Just look at this example from Gold Coast Web Design.

Typography

This seems like a given, but in reality, web designers as a whole have yet to match their print-brethren when it comes to typography. While most web designers pay attention to the “template” parts of a design, such as a header which appears on every page, many ignore typography on interior pages and content areas, which are perhaps the most important areas to consider for the user.

Look at the care that the designer(s) of one religious website took to ensure that articles where interesting, even inspiring to look at, and which complement the meaning of the words for their intended users. That, after all is what good typography is about—marrying letter forms to enhance the meaning of the copy.

By the way, if you’re wondering about how to technically implement some of the techniques used here, like drop caps and paragraph indentation, view this post for a web typography tutorial.

Lists

Like forms, lists are often ignored as an inherently ugly web element. And yet, when proper care is taken, a list, unordered or ordered, can break up a content-heavy page and ease the user.

Look at the lists on the Viget Inspire blog, and see how the designers patiently created icons, and background dividers in the footer to make the list of comment entries flow.

Layout variation in sub pages

As previously noted, most designers start with a home page and a sub page, usually consisting of a side bar and content pane, with long copy flowed in place. The downfall of ending it here is that depending on a websites’ content, a simple two column approach may not make sense, or even if it doesn’t, the content may need further styling.

Look at Trale and Poccuo. In each of these two example, the designer has taken care to lay out the content on a case-by-case basis, enhancing the presentation of it dramatically.

Animation

This is may seem like a dirty word to some when it comes to the web. Keep in mind, I’m not talking about Flash intros, or photos in a masthead that fade into each other. I mean animation that actually contributes to the usability and flow of a website, and yet can still function without it.

Two examples I have are Merix Studio and Alex Buga. Notice in the first example, clicking on “Sitemap” slides the menu and the rest of the site down with an eased animation. The same content could have been showed by simply loading a new page. But isn’t this way more fluid and interesting? In the Alex Buga site, you can drag the light, which makes for a nice easter egg.

Process

This is the main point—It can be a real challenge to get your site looking as good when it’s launched as it first did in your finished Photoshop comp.

Many times what happens in the life cycle of a web project is this: the designer creates comps (in Photoshop or Fireworks) and delivers screen-shots to clients for approval. For most straight-forward sites, this is a home page and a sub page option. Then once the client approves the overall template, the designer either hands off the files to a developer, or in some cases, hand-codes the HTML/CSS templates. From there the developer plugs in the back-end with the provided template files.

A crucial component which often gets left out is content implementation. The worst thing you can have happen is send the developer static site copy, and/or get the clients or an in-house editor to write content in the CMS, while the lazy or overworked (or both) designer dusts his hands off and moves on the next project. This is the death of your website. An entire phase should be allocated to having the designer go in and massage copy and images, and to really take the time to get everything outside the template shining. I’m going to go out on a limb and say this: Designing the interface and getting valid XHTML/CSS templates to the back-end developer is half of your design work. The other half should be spent implementing content and photos, massaging the layout, and adding in little touches to lists, paragraphs, forms and javascript touches.

I’m sure some will disagree with me, but I firmly believe is the secret to producing not just passable websites that clients and bosses are happy with, but truly magnificent interactive design.

2 Comments | Posted on June 22nd, 2008

Know your audience
Content
Content Management Systems
Hosting and Domain
Bandwidth
Web standards
Search Engine Optimization
Browser Testing
Accessibility
Design/Usability
Open Source or Proprietary?
Flash or HTML?

The previous post covered topic 7. This post will discuss points 8-9 - accessibility and browser testing.

What is accessibility?

Accessibility, in general, is an important part of our modern culture. We take for granted the fact that almost any public tool is built with accessibility in mind. When you access a building, many modern builders have provided a wheelchair ramp for impaired users. When you watch a television show, you generally have closed-captioning provided, allowing those either visually or hearing impaired to be able to access, and enjoy a program.

Why accessibility?

Because the web is a very young industry, web accessibility is only beginning to become mainstream. Yet it is only proper to show compassion and ensure that any user who wants to access our website, has the ability to do so. That means that we should not be excluding users from our site who have problems seeing, hearing, or moving their hands.

In fact, it’s more than just a common courtesy to provide accessibility—in some countries it’s the law for government websites to follow accessibility guidelines. Let’s forget the law for a moment. Even just for purely selfish gain, it makes sense to seriously consider taking the time to ensure your website is accessible. Imagine you owned a store (and considering the audience for this article, let’s assume you at least own a business). Would you ever consider making your front-door inaccessible? Would you ever willfully turn away prospective customers because it’s too much time or effort to provide a means by which they can access your products? Of course not. So it goes with your website, which is nowadays becoming more important than your literal storefront.

Okay, now what can I do to improve accessibility?

So now that you realize the importance of accessibility, what can you do about it? As of April, 2008, the W3C has provided the Web Content Accessibility Guidelines 2.0 to help website owners implement current best practices. But in general, here are a few tips to keep in mind:

1) Perhaps the most common accessibility practices are for the visually impaired. Blind users often use text-to-speech software and/or text-to-Braille hardware to access your site. That means that your website should be:

a) Built with web standards. Clean, semantic HTML will go a long way towards helping screen-readers interpret content on your website.

b) Use real web text at all times(ie: no images of text to achieve a certain look, unless of course your using image replacement). Using alt tags on images will allow blind users to know whats going on in a photo.

c) Make links meaningful. That means that linking the words “click here” while very common on other sites, is not accessible to a screen-reader. Instead, linking the words, “Click here to learn more about our products” is much more accessible.

d) Avoid Flash. That’s not to mean Flash is evil. It has it’s uses for sure, and a future post will discuss those. But for now think of it this way; if your company website is built in Flash, your content will be invisible to screen-readers, not to mention search engines. Browser’s only see a big, unreadable block. [Editor’s NOTE: Since the time of this writing, the masterminds at Google have found a way to pick up the text on Flash sites, allowing them to be indexed by the search engine. While this is good news from a search engine optimization standpoint, it still doesn’t ensure the site is accessible to screen readers. You can improve accessibility by using the swf object and using HTML text which gets replaced gracefully with Flash when the user has Javascript turned on]

2) Some users have visual problems, and yet are not necessarily blind. Those with poor eyesight may have difficulty reading small body copy, so providing scalable text, or simply making it large to begin with can help tremendously. The same applies to small images. Also, some users are color blind, so using high type contrast, and making text links underlined as well a different color can help them find their way. This link shows some good resources for checking colors.

Other impaired users

3) Some not so commonly thought of users are those who cannot control a mouse with precision. They may need large clickable areas, or navigation that allows them to user their keyboard or a single switch access device.

4) Deaf or hard-of-hearing individuals should be able to access video content via closed-captioning or sign-language.

5) Users who are prone to seizures should not be forced to watch flashing animations.

6) Those with dyslexia or learning difficulties may need to be accommodated for using simple plain content and diagrams. Of course, your copy should always be simple and well-written, regardless of whether or not the user suffers from these conditions.

The more you do your best to ensure your site is accessible, the more users you’ll make happy, and if that isn’t reward enough alone, the more business you’ll do on the web.

Browser Testing

I didn’t think I could write a large enough post on browser testing alone, but I feel it goes hand-in-hand with web accessibility. Gone are the days when users will tolerate a message on your home page saying, “This site works best with Internet Explorer”. If your site can’t be used on virtually every browser imaginable, then you’ve got problems.

Considering many web designers and developers use Mozilla Firefox, a fantastic, standards-compliant, open source browser, it’s important that they still check their work on other browsers when testing. As of this writing, Internet Explorer (IE) is still the browser of choice for most end-users(and I use the term ‘choice’ loosely, it’s pre-installed on Windows). And to their credit, Microsoft has brought their buggy, non-standards-compliant browser a long way with IE7. However IE6 is still widely used, and must be accommodated for when web developers are testing their work.

Other browsers, while not as popular as Mozilla or Internet Explorer, are still in use by a percentage of the population: Apple’s Safari, Opera and Camino. (NOTE: Just recently, Netscape Navigator, the first web browser many of you are probably aware of, has officially died. It is no longer being updated.)

It is also important to be aware of the growing number of users browsing with mobile devices. No doubt, this trend will continue, so your site should at least be accessible, if not good-looking on a blackberry, cell phone or iPhone.

In closing, get your web designer, developer or team to state up-front what steps they’ll take to ensure your website is accessible to impaired users, and to alternative browsers. If they hum and haw too much, consider getting someone else for the job.

1 Comments | Posted on June 1st, 2008

Know your audience
Content
Content Management Systems
Hosting and Domain
Bandwidth
Web standards
Search Engine Optimization
Browser Testing
Accessibility
Design/Usability
Open Source or Proprietary?
Flash or HTML?

The previous post covered topic 6. This post will discuss point 7 - search engine optimization (SEO).

If they find you, they will come

The web is increasingly becoming the new phone book. And we all know who the Yellow Pages is in that analogy. That’s right, Google. It’s become so prevalent that the company name has become a verb, and if you’re company isn’t getting Googled, you’re in trouble.

The fact is, search engines are one of the most important ways to market your site, and a niche service in the broad field of internet marketing is that of search engine optimization, or SEO. This is relatively simple, as much as SEO experts would like you to believe otherwise. Despite the scientific sound of the term, search engine optimization is just that, it’s optimizing your website for search engines. It’s making your website ‘search-engine friendly.’

The pen is mightier

The key thing to remember is this—search engine spiders (the incomprehensible things that crawl through the web and find, or index websites) like one thing - words. The more content on your site the better, or more accurately, the more appropriate content in the more appropriate places, the better.

You see, most people when searching the web will never type your company name, and if they do, they are actively looking for you anyway, and thus not a qualified lead. Most people type in key words. If your looking for the nearest flower shop, your not typing “Aunt June’s Flower Shop”. You’re going to first look for the type of business; “flowers”, then you’re adding the location; “downtown Halifax”, just as you would if you were searching the phone book.

With this in mind, key words are vital to SEO. Try to figure out the key words that your users are searching with to find your competitors, and then try to weave these words in your website as much as possible. Of course, this is what an SEO expert does, therefore you’ll have to work with your consultant, be that your design and development team, or a specialized contractor.

Because of the nature of these posts I will not get into the technical details of how to incorporate words on your site. But here are a few dos and don’ts of SEO:

DO:

Make the content of your site key word rich, yet still readable and fluent
Keep your site updated on a regular basis (search engines love that)
Use lots of links, both to internal site pages, and to other appropriate sites

DON’T

Stuff your site with hidden keywords, it will get you black-listed from the search engines
Put key words ahead of content, that is, don’t place more importance on getting key words on your site than writing good, meaningful copy
Expect to be number one immediately. Even with best practices, it takes time and patience to see the results of your SEO

Oh yeah, perhaps that last ‘don’t’ is this: Don’t assume that the team making your website will automatically be concerned with your search engine ranking. Most of the time, designers are too busy designing and developers are too busy developing to be adding key words to your website. Ask up front how the team will optimize your site, and add an additional budget for it if necessary, even if it means hiring a web copywriter. Remember, even as a tree in the forest makes no sound if there are none around to hear it, a great site will have no impact on your bottom line if no one visits it.

2 Comments | Posted on May 29th, 2008

This post is not meant to be particularly insightful or surprising—just a simple observation that may generate discussion. I don’t claim to be an expert in advertising, though I did work in an ad agency for a couple of years, and had some fun coming up with headlines while throwing a rubber ball against a wall. I definitely don’t make advertising my focus for Headspace, nor do I pay much attention to it as an industry (though I usually check out Ads of the World and every year I read the Communication Arts Advertising Annual ).

With that being said, I can’t help but notice a trend in advertising in recent years. That of personifying the inanimate,—using human beings to represent company products. True, using people to sell is not a new concept. Since as far back as the 1950’s, housewives would hold laundry detergent, real or imaginary customers told testimonials, celebrities would endorse big brands. It also used to be more common that inanimate objects were used as the metaphor, not the other way around (remember “This is your brain on drugs” back in the 80’s, with a fried egg as the metaphor?).

I’ve got three examples of a newer take on this, though I know there are more. Perhaps the most universally known and accepted is the Apple ads that use the 20-something cool-breeze to represent Mac, and a dumpy, middle-aged (albeit funny) man to play the boring old PC. Note how this differs from the age-old practice of having a company spokesperson; it’s common for people to represent companies, as in the case of Bill Cosby representing Kodak Film back in the 90s. However, in the case of the Apple ads, the actor is representing the inanimate product itself (the computer), which in turn represents the company.

The Capital One ads instead use a series of actors to represent other banks interacting with customers. Interestingly, in this case you’ve got humans representing companies, only they play the part of the competitors this time. The first in this series used the now familiar “Hands in my pocket” song to show that bankers always are always ripping off consumers, wrapping the metaphor with a pun. The series has since broadened its concept to use the bankers in other seedy ways (such as the exterminator, “You’ve got bankers”).

The third ad is one I saw today, which inspired me to write this post. It’s a French web company called Bouygues Telecom, and the ad concept is a man (the vistor) walking through a field by a woman (the welcome page). The hostess shows the man all of the different features of the website, like the search engines (a stuffy bunch of analysts), the travel sites (good-looking flight attendants) and online gaming (a war zone of aliens running around shooting lasers).

I’m not sure if this trend has any cultural significance, or if it just means that one thing never changes—people are always the most interesting way to sell. I only wonder what other innovative ways will human beings be used to move products. Do you have any other examples of personification in advertising, or do you have thoughts on the post?

0 Comments | Posted on May 24th, 2008

Know your audience
Content
Content Management Systems
Hosting and Domain
Bandwidth
Web standards
Search Engine Optimization
Browser Testing
Accessibility
Design/Usability
Open Source or Proprietary?
Flash or HTML?

The previous post covered topics 4-5. This post will discuss point 6.

Because of the nature of this series, I’m not going to go into great length to discuss the history of web standards. I’ve done that already to some extent in a previous article. This post is simply meant to help educate a business owner who needs to commission a person or team to create their website. This should assist them in choosing the right provider for the job. Alright, with that said, let’s dive in.

Web Standards and why they’re crucial

When it comes to things that people use, standards are a good thing. Can you imagine if their were no standards in place for houses? No benchmark, no rules—it would be a nightmare. In many ways, that has been the case on the web for many years. Site’s were built in many different ways, usually shoddy, browser makers like Netscape and Internet Explorer each had their own features that different websites would follow independently. As a result, sites looked different depending on which browser’s they were being viewed on, many were slow to load because they utilized techniques like using HTML tables for layout, or images for text, and worst of all, people with visual disabilities had virtually no way to properly hear the content on most websites.

All of that has changed… for the most part.

Because of organizations like the W3C and because of web standards evangelists like Jeffrey Zeldman, web standards is a new concept that has influenced the majority of the web community for the better. Essentially what web standards mean is that there’s an even benchmark for how to build a site. It takes Hyper Text Markup Language (HTML) back to what it was originally designed for—that of “marking” up text with meaningful tags that made viewing copy on the web possible. Now, instead of web developers using and abusing HTML to do things it wasn’t meant to do, they write the HTML or content of the page with clean semantic code and leave out all style related elements.

For example, if I’m creating site navigation, I would write what’s called an unordered list. It would look something like this:

<ul>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>

See how clean that is? It has no style information, it simply describes the content semantically. This is good because now all site’s built with standards have much less HTML, resulting in faster page loads, better search engine optimization and accessible content to the visually impaired.

So where does the design come into play? With Cascading Style Sheets (CSS). CSS are separated from the HTML in a separate file so that the meaning and the style of a website are completely separated from one another. If you turn CSS off in your browser, the site will look like a neat, clean text document. For a great example to understand clearly how this works, go to CSS Zen Garden. Every link in the page uses the exact same HTML page, and simply swaps in a different style sheet. As you can see, this separation of content from design means making a design change across a large site with many pages is relativlly painless. For example, if all your links were blue and you decided that you want them all red now, you don’t have to manually open up hundreds of HTML pages, you simply update one style sheet, and presto! All links on the site are red!

The point

The point of all this is that when you’re commissioning a website, ask about web standards. If the company you’re talking with doesn’t know what terms like tableless layouts, standard-compliance, graceful degradation or semantic markup mean—head for the hills. Although standards have come a long way in terms of acceptance, many so-called web experts have turned a blind eye to it. Even more high-profile websites for large companies still use the old tactics, and fall short. Don’t let it happen to you.

Remember the benefits:

Save money and time
Make your site accessible to the blind (a large market!)
Compatible with mobile devices (an even larger market!)
Compatible with all current and future browsers
Fast page loads, meaning happier users and lower bandwidth costs
Easier future upgrades
More findable by Google and other search engines

As you can see, the results are worth asking a few questions. Companies that embrace standards provide their clients with what can only be called the highest quality, both on the surface and under the hood.

The next post will deal with Search engine optimization.

9 Comments | Posted on April 20th, 2008

The argument is often made that web design and print design are very different from one another, like in the excellent post by Jeffrey Zeldman. Although this is true, I thought it would be interesting to look at how they are the same. I was listening to Andy Rutledge’s podcast today, and he made some interesting analogies about web design that got me thinking.

In his post, he criticized AIGA and Communication Arts, American leaders in the graphic design community, for refusing to truly acknowledge the web medium. Though I am a big fan of both organizations for pure, juicy, design inspiration—I completely agree that neither understand the web. Every year, their interactive annuals mostly profile Flash websites, merely focusing on colour, type, video/images and other purely visual or conceptual elements. I feel that these organizations are at least partly to blame for many in the graphic design community not understanding true web design.

But this post is not meant to beat up on the AIGA and Communication Arts. They won’t change until they’re forced to by their readers, or until somehow over time everyone naturally evolves with the still young and misunderstood web industry. But this whole issue got me thinking about the nature of design period. Many would have corrected me earlier by saying that there is nothing wrong with focusing on aesthetics because that’s what design is—it’s visual. But is it?

What is traditional design all about?

One of the most, if not the most important design philosophies I’ve been taught is how semantics, syntactics and pragmatics factor into design. Most print designers acknowledge this; we know that first of all, there has to meaning in design. We can make it look great, and communicate a message visually, but ultimately, there must be a message. There must be content. And lastly, it must work—it must be pragmatic. For example, if you are designing a magazine spread, you need to first of all, make sure you have content. The content, and the intended audience will dictate how the spread will look. Then once you craft a design, you must make sure it works—that the body text doesn’t fall into the page gutter, that the inks used won’t cause ghosting or registration problems, and that there are page numbers so that the reader knows where they are. Without just one of those factors, meaning, aesthetics or practical application, the design can hardly be called good.

All designers usually resent one of two statements from clients: That designers are only needed to make pretty pictures, or on the other hand, that client know how to make it look pretty, but they need us to work the software. The reason either of these statements are insulting to designers is because really you need both skills. Solid understanding of design principles is why the design looks good, but also thoughtful problem solving and technical implementation is why the design respectively has meaning and doesn’t fall flat in the execution.

Though these ideas are nothing new, they should help designers from a traditional background understand why their perspective needs to change when it comes to the web. Because design is not only visual, but also practical, technical skills have always been a necessary part of a designers toolbox. After all, print design used to be much more technically involved before computer software gradually took away the need for thorough typesetting and printing-press knowledge. Interior design is an incredibly technical discipline, involving not not just conceptual, layout and colour understanding, but knowledge of materials, construction, finishing, and all other decidedly non-aesthetics-related skills. For example, an interior designers’ choice of materials is based not just on how it looks, but also how the users will be able to live around it and work with it day-in and day-out.

Web design is no different

For this reason, good web design cannot be judged simply on good aesthetics, balance, harmony, contrast, typography, colour, or any other basic design elements. It has to also be based off of how it works in the medium it lives in. How does it enhance the content, how does it provide intuitive navigation, seamless flow, information architecture, usability, accessibility? All of these factors are necessary for truly good, quality design for the web. Just as it’s always been, design is partly technical problem solving. And though that thought scares most designer new to the web, they have to come to grips with it.

It’s difficult, if not impossible to excel at web design if you don’t know how the web works. That means that to design for the web you need to learn about things like web standards, HTML, CSS, and Javascript. Learn what all of the major browsers are, and how to develop sites so they work in all of them despite each ones minor (and sometimes major quirks). Do you know what terms like MySQL, AJAX, Apache, PHP, Ruby on Rails, or ASP.net mean? Learn a little bit about servers, and databases, and server-side scripting, you don’t have to be good enough to develop a back-end custom-coded site, but at least know the basics, or at least their purpose. Even more importantly, learn how people use the web—it may be drastically different from the way you use it, and knowing this will greatly influence the quality of your design.

The bottom line

The point in all of this; the design community for the most part refuses to move forward with the web, partly out of ignorance, and partly out of fear of the technical side of implementing web design. But there is no need to fear this, or worry about losing the design-side in favor of a more technical one. As discussed, design has always been about the technical implementation of good aesthetics so that the product is usable to the audience. Rutledge, mentioned earlier, used the analogy of a shoe designer not just required to design a nice looking shoe, but also make sure it fits, conforms to shoe standards, and doesn’t wear out.

What is required more than anything else is the modesty to admit change is needed in how one goes about his or her design process, and enough passion for good design to throw out preconceived notions in an effort to better ones craft.

An upcoming post will help the humble-hearted print designer wishing to understand the web medium more fully by breaking down necessary fundamentals and explaining them. Please use the comment form below to express agreements/disagreements, or outline things you think that every web designer should know more about.

0 Comments | Posted on April 8th, 2008

It can be said that Flash is a niche area of web development. Generally speaking, “typical” web developers (and by typical, I mean developers who build websites using web scripting languages, like PHP or Ruby, build databases with MySQL, and mark-up the front-end with HTML, and style it with CSS) use Flash very little or not at all. The reason being that Flash is a closed piece of software. It requires a license to use, and once published to a website, the code is hidden away, never to be seen by anyone—including both developers and search engines. Also, Flash websites usually aren’t even recognized by browsers; you can’t right-click and open links in new windows, you can’t bookmark internal pages and the visually impaired can’t access the content.

On the other hand, most web designers use Flash. Or I should say they can use Flash, even if they primarily build website the “proper” way. Whether it’s for banner ads, intros, or simple page headings, you’re average web designer should be able to open up Flash and make some nice animations.

Between the two aforementioned groups, there is a massive gap, and if you are looking for a high-end Flash website or application, you need to find someone with a specialized skill-set. Some website managers, not understanding the difference, make the mistake of assuming that their designer who knows the basics can implement streamlined, advanced Flash interactivity. What makes it even more confusing is that these Flash “tweeners” (I’ll explain in a minute), often try to make it appear as thought they can do this more advanced stuff, and sometimes they can actually pull it off.

How does Flash work

So here’s the difference; if you’ve ever seen a Flash file being worked on, you’ll notice that it looks a lot like a design program, ala Photoshop, Illustrator, Fireworks. It’s got color pallettes, selection tools, and basic shapes. You’ll also notice that it has a large grid timeline at the top. When being used this way, Flash is an animation tool. What’s made Flash so popular since it’s inception is that it makes it very easy to pull off simple animations. For example in my workspace, if I draw a red circle on the “stage” (canvas), and then I create a “keyframe” (animation starting point), and then I create another keyframe on the five second mark on the timeline, and then drag the circle to another place on the stage, when I play my animation, my circle will move from point A to B in five seconds. This is called tweening. You only need to instruct Flash when the animation starts and when it ends, it will take care of the in-between frames for you.

However there is another large part of Flash development that is becoming more important as Adobe improves its product—programming. The language that controls Flash is called Actionscript. What began as a very simple non-language in the early days of Flash requiring basic “play”, “stop” instructions, has become since Actionscript 2.0, and especially 3.0, a very robust programming language. Actionscript now shares a similar structure (syntax) as advanced software languages. Because of that, there’s a lot more you can do with Flash than simple animations and page headers. If you’ve ever kept tabs on the FWA (Favorite Website Awards), you know what I mean. Most of these sites employ powerful development practices, such as “speaking” to languages outside of Flash, like PHP, XML or Javascript, pulling in user-generated content, or even what’s called socket programming, where the Flash file your viewing is showing what other users are doing on the site, like in Flash community games.

Know what you need

So the big question is this; what do you need to know when you want Flash work done? First, know exactly what you need. Is it a website, with different content sections, maybe a photogallery, or dynamic video integration. A “tweener” may be able to pull this off, but more often than not, he/she will not employ Actionscript, meaning the end product may look fine, but it’s not built in a flexible way. Let’s use the example of a photogallery. In the Flash interface, you can easily import, drag and drop photos, and even make them react to buttons. But what that means is a) The Flash file will take longer to load, because all of the photos are contained directly inside the Flash file b) Adding/removing photos is a chore because the designer has to go in and manually move all of the photos c) the gallery is harder to build on, in the event that you want to add categories, or perhaps change the way the photos transition.

An Actionscripter on the other hand will do things differently. He/she will use very limited drag and drop components, if any at all, and will instead write the whole gallery with code. That means that a) the gallery will load quickly because all of the photos will be contained outside of the Flash file, only being loaded when a user clicks on a particular button b) Adding/removing photos becomes very quick and easy because the gallery is dynamic - simply calling a new photo will automatically re-arrange the position of all the other photos c) building on the gallery becomes much easier. If you wanted to have a fade effect between transitions for example, the developer would add a simple function call in the right place, and it would automatically apply to all of the images.

A lot of large web companies utilize Flash teams of designers and developers—the designers only adding art-work and animations to Flash, and the developers make it function. Make sure that if you require anything beyond a simple banner, that you get an Actionscripter for the job. Get someone who either knows both design, animation and development (which is ideal, yet hard to find), or just get a developer and use your inhouse designer for the graphics, even if he just produces them in Illustrator or Photoshop. As with any project, understand what you need done exactly, and communicate the functional specs well. The more complex the application, the more expensive and time consuming it is to switch up the functionality of a Flash site on your Actionscript developer.

What to look for in a Flash developer

So here are some things to ask a prospective contractor when you need a medium to large scale Flash application developed:

How would you rate your Actionscript skills, beginner, medium, or advanced?
What level, 2.0 or 3.0? Both are acceptable, 3.0 is the way of the future, but many haven’t had a chance to learn it yet.
Can you pull in XML or database driven content with Actionscript?
Do you keep your swfs (compiled Flash files) lightweight, keeping in images, classes and media files outside and pulling them in at runtime?
Do you efficiently make us of object and functions to streamline your code?
Do you document and comment your code clearly, and is the source code available in your price?
Many AS developers have a specialty, for example writing dynamic animation algorithms, or perhaps video/sound integration—do you have a specialty?

Questions like this should give you a good indication of whether your prospective contractor is up to the task. Of course, you’d ask other questions too like timing and cost. Keep in mind that advanced Actionscripters tend to be more expensive than other types of web programmers, but you’ll find that the cost is worth paying to someone who can write advanced code and solve challenging Flash problems. Also, the high cost is frankly because there aren’t that many Flash developers out there, and it is a niche, highly lucrative market.

This post hopefully helped you understand Flash a little better and the people who build Flash applications. If you’re in need, talk to someone who has access to a pool of talented Flash developers, just don’t try googling them—most of their sites are built in Flash.

4 Comments | Posted on January 10th, 2008

How does Flash work

Know what you need

What to look for in a Flash developer

So here are some things to ask a prospective contractor when you need a medium to large scale Flash application developed:

How would you rate your Actionscript skills, beginner, medium, or advanced?
What level, 2.0 or 3.0? Both are acceptable, 3.0 is the way of the future, but many haven’t had a chance to learn it yet.
Can you pull in XML or database driven content with Actionscript?
Do you keep your swfs (compiled Flash files) lightweight, keeping in images, classes and media files outside and pulling them in at runtime?
Do you efficiently make us of object and functions to streamline your code?
Do you document and comment your code clearly, and is the source code available in your price?
Many AS developers have a specialty, for example writing dynamic animation algorithms, or perhaps video/sound integration—do you have a specialty?

0 Comments | Posted on January 3rd, 2008

Ah, don’t we love end of year lists? It’s a time to reflect on the strides made over the last year. To gain inspiration. To see the foundation that’s been laid in the past, and the pedestal to spring from in the future. Oh, and it’s also a chance to see really cool stuff that you might otherwise have missed.

I felt that it was important to separate “regular” HTML/CSS sites from Flash “microsites” because there’s a completely different mentality that goes into designing each. The web standard variety is generally more for company websites, blogs and shopping carts, whereas Flash is more for the entertainment/advertising variety. In this list, I’ve favored Flash sites that are well designed or innovative in their concept and interface, not in sites that merely featured entertaining video. I think that belongs to another type of list.

Flash sites are highly criticized in the web development community for not being standard compliant, but I take a balanced view. Flash sites can be highly entertaining and innovative, and I feel as long as they are being used for experiential purposes otherwise not possible with HTML/CSS/Javascript, then it has a place in the web design world.

One last note before we begin; there’s been a lot of beautiful sites in the last year, and many of them have been for design companies, photographers, freelancers and web agencies. For the most part, I have highly favored sites in these top ten list that have not been designed for self promotion purposes. Why? Because I think it’s more rewarding to see sites that have been designed for paying clients — Fearless clients, who have accepted what these designers have created for them. Agencies/freelancers have had to overcome the client hurdles we all experience everyday, and still come out on top. It’s not that I don’t think there’s merit to a nice agency website—it can be a great source of inspiration—but I just feel it’s better to see what designers have done for companies other than themselves.

Top 10 CSS websites

Jesus Rodriguez Velasco

This was without a doubt, the most breathtaking blog site I’ve seen this year. The art-work and typography is amazing, and the layout deceptively simple. I especially liked the 4 columns that collapse to three and two when your browser window shrinks. A superb example of usability and design aesthetics perfectly combined.
Uniquely Knoxville

This site gets points for it’s style and type. It’s one of the few sites that gets the whole, cluttered paper-textured look right. Uniquely Knoxville definitely lives up to its name.
Frieze Magazine

Frieze shows how online magazines should feel - it takes massive amounts of content and presenting it simply and elegantly.
Come home to a Tennessee Winter

Beautiful colour contrast and a full, flexible layout. The subtle snowflakes are icing on the cake.
San Diego Brewing Company

Often, pubs and restaurants don’t do a good job of presenting themselves online. San Diego Brewing Company has a cozy vibe that just makes you want to come over and enjoy a few pints with some friends.
Biola University

The textures and illustrations really make this site pop.
The Big Noob

The Big Noob feels, well, big. It’s design is transparent, drawing attention to the humorous content.
Free People

Online shopping carts are hard to do well, but Free People is so fun to explore and shop, and it’s design speaks to its female target in an effective way.
Xero

If a site makes online accounting software seem exciting, you know it’s doing something right. Xero definitely has the ‘Web 2.0’ look going on, but it does the big fat buttons and shiny gradients better than most.
Etnies

Like Free People, Etnies takes online shopping to a new level, while presenting it’s merchandise effectively to it’s audience, in this case, the youth culture. The Flash content adds to the experience instead of seeming tacked on.

Top 10 Flash sites

Get the Glass

It’s very seldom that an advertising site can really suck you in and take up a half hour to forty minutes of your time, but Get the Glass surprised a lot of people with it’s ingenuity and scope. The production team created a massively entertaining board game experience, and of all thing, to sell milk!
Red Universe

Remember how I said I wouldn’t showcase agency websites? Well, this is the one exception to the rule. Red Interactive went way beyond breaking conventions with their self-promo site. For heck sake, you can create an avatar and wander the virtual universe talking, punching and flying with other users of the site in real-time. This definitely shows that some agencies can swallow their own pill and stand out in a big way with their marketing efforts.
American Red Cross: September 11th Response & Recovery

Information architecture at its best, the pie charts, time lines and video samples are so perfectly balanced, and the intimate, emotional content shines through.
Own Bora Bora

Simple, elegant and beautiful, the site breaks through the clutter simply by offering stellar full screen video that makes you feel like hopping on a plane the day you see it.
Lake Nona

Lake Nona is a community in Florida, and the website takes such an interesting approach in delivering this type of content. The expandable interface, map and funny “Nonaology” makes the site truly a joy to explore.
Verizon Action Hero

Getting to upload your face to an action hero and direct your own mini movie has universal appeal. My wife’s hero was eerily similar to how she really looks. Oh yeah, and the interface is also really well designed. The creators made a relatively complex process simple and fun.
Coke

Creating one site can be daunting, creating a bunch of sites for every corner of the globe, for one of the biggest brands in the world must have been terrifying. But the team pulled it off, and really made a corporate website anything but typical, evolving how I think many of the Fortune 500s will think of their online presence. By the way, doing a site like this with some XHTML/CSS and not entirely in Flash showed great restraint and I think shows that web standards are the way of the future.
HBO Voyeur

An amazing concept well executed, the HBO Voyeur site gives you that guilty feeling of spying through the windows of anonymous people—um, not that I know what that feeling is… The large amount of streaming video makes this site also a great technical feat.
Spamrecycler

What a concept — recycling spam into abstract art! It actually works, and it promotes a German recycling company. So smart!
Motorola Colors

The Motorola Colors website allows the user to exercise his or her creative juices, resulting in colorful abstract art that enhances the brand.

Hope you’ve enjoyed this list - stay tuned for my picks for the top print designs of ‘07. As usual, I welcome all comments!

0 Comments | Posted on November 28th, 2007

Last week on Boagworld, Paul Boag interviewed Andy Budd from Clear Left, a well-respected web design agency in England.

Andy commented on how they do things differently than many agencies in that they only offer one design to clients. You can read the interview transcript or download the podcast (see show 101)

Essentially his points were as follows, regarding presenting multiple design options:

1) Lowers value for the client.

Doing two or three times the amount of work necessary and the client only get half or a third of the value, they get to pick one of those three designs. They are essentially paying for work they’re not using. I don’t go to a restaurant and purchase three meals, knowing I will only eat one.

2) Clients make wrong choices.

No offense to clients, but they usually pick the option that’s least on strategy due to personal opinion. Is that their fault? They’re paying us to tell them what their best option is, are they not? If I go to a lawyer, and he presents me with three completely different options, I want to know what he thinks is the best option, after all - he’s the expert.

Usually a designer will spend more time on one design than another and therefore that typically is the design that is closest in line with the clients goals. Clients, if given the choice will usually try to blend elements of two or three choices into one concept to feel they are getting value - which results in a mish-mashed design, which is less in line with their goals than the one design that had more thought put into it.

3) Design becomes less about problem solving and more of a beauty contest.

As to whether multiple designers should work on different designs for one client, Andy says that you’re using more internal resources to inevitably produce one design for the client. Again, the client is paying the firm for their design expertise. So instead of presenting the firms professional opinion, they’re letting clients pick what they feel works, and it usually is picked based on personal appeal (I have those colours in my living room), rather than a design that will work for the target. This is not how we want them evaluating our design.

4) Lowers value for the firm.

Designing two or three options is counter productive in that you’re spending time and money on designs that are never used, essentially wasting that time which could have been used on other things, and at the same time, spending effort on designs that will be thrown in the garbage in the end anyway.

Keep in mind, we’re talking primarily about web design here. In many cases it makes sense to present multiple options for things like logos and ad campaigns, as they are usually higher level concepts that attack a problem from multiple angles, and they are generally quicker and easier to present in concept form (not execution). Web design, and publication design for that matter, is more about information architecture and requires much detailed problem solving. It is difficult to completely start from scratch all over again once you’ve worked through the problem the first time. Sure you can change a palette or adjust a font, but complete restructuring of information is a lot to ask once you’ve solved it the first time.

This is a subject I’ve thought about for a while, and am more convinced of the benefits of only showing one option the more it comes up. What are your thoughts?

0 Comments | Posted on October 26th, 2007

There are three kinds of service. Good, fast and cheap. Pick any two. You know the rule right?

This is easy to remember when we offer others our services, however it’s easy for us to forget when we have to commission others to do our work. How does this work in the world of design and web development?

Design

Good design cheap won’t be fast.
Good design fast won’t be cheap.
Fast design cheap won’t be good.

What is good design? Is it design that we feel strongly attached to? Not always. In many ways good design is about 3 things; semantics, syntactics and pragmatics. In other words; meaning, aesthetics and practical application. And those three things have to apply to the audience we’re trying to reach. For example, a design might have a lot of meaning to you and me, but not to your end target.

Design is a process. As the designer, you can’t always get the design right on the first try. Designers use problem solving techniques to accomplish the three aforementioned goals, and this usually requires experimentation and rounds of self-made revisions before it even goes to the client.

Design made too quickly isn’t usually going to have the necessary time invested to balance the meaning/aesthetic/practical issues that are required in order to be considered good design. However if you want the care put into your designs, in order for them to be considered high-quality, that means the designer is going to have some late nights ahead of him/her. And that doesn’t come cheap. After all, designers have families too - and time away from them should be compensated for. Therefore, if you want the design to be it’s best, and you don’t want to pay top-price, then don’t expect a quick turn-around. The designer will probably be more than happy to work on something over a longer period of time for little money if he/she can make it a portfolio piece.

Development

Good websites made cheaply won’t be made fast.
Good websites made fast won’t be cheap.
Quickly built websites made cheaply won’t be good.

Again, let’s define what a good website is. Aside from the design, which was previously discussed, how does the good/fast/cheap rule apply to the technical/usability planning and front/back-end coding of your site?

Developing a website isn’t the same as designing a logo, which is more conceptual than technical. Commissioning a website is more like contracting a house to be built. Building a house must be done in stages. Before you start the wiring, you need a foundation. Before you lay a foundation, you need a blue-print. Before you start painting and decorating, the walls have to be built. Each stage takes time, and must be done in a particular order. Web development is similar. It has several stages, and stage 3 has to be finished before stage 4 starts. If you’re done stage 4, and you want to go back to stage 2, a lot of work has to be redone, and this slows down development. The basic stages of most websites are:

Accessing the needs of the website
Usability/content/structure planning
Design
Front-end development (ie: stuff you see on the website; XHTML/CSS/DOM controls most of this)
Back-end development (ie: stuff you don’t see; databases, CMS, forms)
Content implementation (ie: getting the copy in place, and the pages built)
Testing
Launching

If you are at the testing or launch stage, and you want to go back and change the structure of the site, or make a design change, this can slow down the progress of the site. Also, remember that much like the design of the site, which can be good or bad, especially when it comes to usability, the technical side of the website can be good or bad too. If you get broken links, it’s a bad site. If your site breaks in major browsers, it’s bad. If there’s typos, it’s bad. Ensuring that your site is functioning well requires—you guessed it—time!

So the old rule is the same — ensuring your site is functional takes time(and this scales accordingly depending on the level of functionality you require. A simple site doesn’t take as much time as a large site that has a lot of complicated features). If you want your site to have technically complicated features, and work really well, with no kinks - expect either high-costs, or a long development time.

This rule actually works well for the client, even though in a perfect world, we’d all like to have all three. When you want something to be good, paying a fair price and giving it adequate time is insurance that you’re getting a quality service. There are very few circumstances in which you want fast and cheap instead of good. So if you are getting fast and cheap, you should be calling into question the quality of work that you’ll be getting in the end.

After all, you might save money and get it right away, but isn’t it a waste of time and money if it’s is ineffective?

2 Comments | Posted on October 16th, 2007

This is part two of a six-part series. It is meant to give someone relatively new (or simply overwhelmed) to the web the information they need to commission a website for their company. It is broken up into 12 bite sized pieces:

1. Know your audience
2. Content
3. Content Management Systems
4. Hosting and Domain
5. Bandwidth
6. Web standards
7. Search Engine Optimization
8. Browser Testing
9. Accessibility
10. Design/Usability
11. Open Source or Proprietary?
12. Flash or HTML?

The previous post covered topics 1-3. This post will discuss points 4-5.

Hosting, domain and bandwidth. These 3 words scare almost anyone new to the web. And yet they shouldn’t, because they’re actually quite simple. Let me break it down:

A generous host

Everything has to live somewhere. You probably live in a house. Your computer lives in your office. And even computer files need to live somewhere. Your word documents need to live on your computer. But where does your website, which is essentially a bunch of computer files, live?

Well, if you want people other than yourself to be able to see your website, you need to buy hosting. When you buy hosting, you are essentially renting a cozy little home for your website to live in. Your website lives on a special computer with a lot of other websites. This computer, or server is open 24 hours a day, which is why everyone around the world can view your site at any given time. You might say that your host is the neighborhood, and the actual directory your site sits in is it’s home, but that’s getting a bit too specific.

The type of hosting you buy is important because it can limit what you do on your website. For example, if you carry critical data on your site (like credit card numbers) you’ll need what’s called a dedicated server - in other words, a special computer that only your website lives on, and no one else’s. Some houses that you buy may be cheap, but they are small and boxy, whereas other homes are a little more money but have a pool in the backyard. The same idea goes with hosting providers.

Hosts are very important, so if you don’t know what you’re doing - then hold off on buying a hosting plan until your in touch with your web designer/agency. They will be able to help you find a host that gives you what you need.

Master of your domain

A domain is not the same as a hosting account. If we were to use the home analogy, when people want to visit your website, how do they get there? They need an address. When they type this address into their browser window, they browser locates the place on the server that your site lives in.

www.headspacedesign.ca is my domain, and I need the domain and a hosting account to keep this site alive and kicking. You have to be careful when you buy a domain. They’re relatively cheap, but remember; most of the good ones are gone, so you’ll need to get a little creative. What you don’t want is an overly long domain name, or one that is hard to remember. Dot coms are popular choices, but since most are already owned, try a dot ca if you live in Canada, or a number of other options are available. I use internic.ca for domain purchasing, since they offer dot ca’s among others, but you can use whatever domain provider you like.

Bandwidth - Nothing to do with your waist-size

Bandwidth is the amount of data that can be transferred between your website and your audience. Don’t let that phrase frighten you. It’s a pretty straightforward concept. Let’s use our house analogy; Your website is a proud homeowner, and he likes to have people visit him to show off his digs. But how many people can he have at one time? And how much tea can he realistically offer all of those visitors. The doors and rooms are only so big, and there’s only so much tea in the cupboard.

This is similar to bandwidth. When you buy a hosting account, your provider will generally give you as much bandwidth as most websites need. However if you’re a large company and you expect an enormous amount of people to be visiting your site, or if you want to put a lot of big files on your site, like video and audio clips, you will probably need to buy more bandwidth.

Can you imaging if a million visitors were on your personal computer at the same time? It would get really sloooowwww wouldn’t it? Every time a user visits your website, they are accessing that special computer that your site lives on, the server. So it has to have a lot of power to have that many people accessing it at one time.

Think of it like the difference between a garden hose and a fire hose. A garden hose can’t have gallons of water flowing through it at any given time, because the width of the hose is only so wide. However a fire hose is very great in width, therefore it can have a lot of water flow through it.

Summary

So remember, the host is the computer, or server that your site lives on. The domain is the address to this server (www.something.com) and bandwidth is the amount of data that can be transferred between your site and your users. If you’re commissioning a website through a professional designer/developer, they should be able to help you with all of this. But it’s useful to at least understand the terms and why they’re important.

Another term you’ll want to get to know really well is web standards. This is extremely important because not every freelancer or agency knows about it. This subject will be discussed in the next part of the series. As usual, all comments are appreciated.

0 Comments | Posted on August 12th, 2007

My wife and I were watching an interior design show, where a designer’s own home was presented. He had a lot unique ideas for his space.

There was a lot of muted gold and red textures used in the walls and fabrics, and then in the oddest place, a painting that used a completely contrasting bright aqua palette. The use of contrast was extensive—next to a sleek modern chair was a block of untreated lumber used as a table. Next to a large, black, Japanese-style table were two golden, Victorian-style coffee tables that had almost cartoonish floral carvings. Was it ‘out there’? Yes. Was it poorly designed? No.

My wife’s reaction was “I hate it”.

The difficulty in designing, no matter what category of design it falls into, is always the same: Design is partly subjective and partly objective. While the designer’s home was ugly to my wife’s taste, it was not poorly designed. In contrast, there are many poorly designed spaces, the owners of which are in love with. In many cases, it comes down to personal taste.

So where does that leave us? Are we as designers always doomed to the mercy of the crowds in the Roman arena? Does 100% of the people who glance at our designs need to become so ‘wowed’ that they immediately grab a copy to stick on their fridges? Should our design decisions always be based on what the client is going to ‘like’? In school, my instructor wouldn’t allow a student to simply state ‘I like it’, regarding a peers design. He would retort, ‘Do you like pie as well?’ All criticism had to be qualified.

We all know that you can’t please everybody. So how does one qualify his/her design? Obviously there are some rules that come into play with design, such as proper use of contrast, alignment, repetition, gestalt, harmony, flow, movement, proximity etc. And it takes study, practice and a bit of talent to be able to use these principles masterfully in your design. But more importantly, you need to know who it is you want your design to please.

To me, what separates design from art is that art is a personal expression which is left open to interpret, discuss, or ultimately—like. Design is trickier than that. It’s a calculated expression of creativity. And while it is usually seasoned with personal influence, it is really supposed to speak to a target audience. That means that if your design is required to speak to a select group who finds rainbow gradients appealing, and you can use it with an idea backing it up, while ensuring it’s well-designed—then use it. It can be ugly to 90% of the population, and yes, even ugly to you. But if it’s working it’s mission, and your not compromising good-design for client satisfaction, then work your rainbow-gradient-magic (RGM) I say.

It is rumored that the president of Nike, when originally looking at the choices his designer presented for logos, felt strongly about several options other than the check mark that has since defined the company. So, why did he choose the swoosh? Although he didn’t personally like it, he felt it was appropriate for his audience. Is it a coincidence the company has done well?

The designer mentioned at the outset accomplished his objectives. He used solid principles and some unique ideas to design a space he felt comfortable calling his own. In that case he was the audience, and not the viewing public. The key: Good design is good design. Make it appropriately speak to your audience and it won’t matter if your wife or your boss, or even your client dislikes it.

0 Comments | Posted on July 25th, 2007

This is part one of a six-part series. It is meant to give someone relatively new (or simply overwhelmed) to the web the information they need to commission a website for their company. It is broken up into 12 bite sized pieces:

Know your audience
Content
Content Management Systems
Hosting and Domain
Bandwidth
Web standards
Search Engine Optimization
Browser Testing
Accessibility
Design/Usability
Open Source or Proprietary?
Flash or HTML?

This post will discuss points 1-3.

So, your business has finally soared, demand is high, and your customers, prospects and competitors are gradually turning to the web as a means of business. It’s time for you to scrap that clunky old site that you paid your 14 year old cousin $50 to make back in ‘98. It’s time to go pro.

Problem is, where do you begin? How do you know where to go, what to look for and how much to pay? Web jargon gives you a headache and all you want to do is pay someone to make the problem go away. This article can help you.

For starters, it should be said (as obvious as it sounds) that your website is important. Of course you know that. That’s why you’re paying someone for it. Right? Wrong! Many companies hire professionals to design their websites simply because they’re told it’s necessary, and yet they fail to appreciate how important it is. It’s not something to rush into. You don’t want to pinch pennies, just to get something live. Take your time, spend what’s reasonable, and find the right company or freelancer. One who will give you a site that accomplishes your online objectives.

Without getting too technical, this post should give those involved in commissioning websites a clear checklist to use when going out and looking for the right interactive firm or freelancer. It will also give you the right questions to ask when you’re in touch with one, as well as clear up some misconceptions and general web mumbo-jumbo.

1) Know your audience

This is the first thing you need to know before you even flip through the yellow pages. Why do you want a website?

Is it simply to get your name out? Do you want to make money with it? Is it a resource for prospects to get useful non-biased information that will move them to call you? Is it to promote a temporary product or service, such as a contest?

Once you can clearly articulate what your intended purpose with your website is — and who you want to visit it — the easier it will be to fill in the rest of the blanks.

2) Where is the content?

It’s a tired cliché, but it’s so true - content is king. The web is about content first and foremost. No one cares how great it looks, or whether there’s video, or even how easily navigable it is. If the content is useless to them, then they don’t care about it.

There are a lot of sites on the web, so what makes yours so special that people will want to visit it? It’s a known fact that people will visit a website more than once if the content is interesting, and if it changes regularly. So if you want to keep your prospects or customers on your site and not on your competitors’, you have to give them something worthwhile. The information has to be useful, engaging, or funny. And it has to change. Not every six months, not every month. It has to change every day, couple of days, or every week. The more regular, the more they will visit you.

With that in mind, you have to think about two things regarding content—are you able to write your content, and can you keep it updated? Most would say, yes. But think about it - are you trained to write effective web copy?

• Can you write interesting copy that’s easily scanned making good use of heading hierarchy, and seamlessly incorporates keywords for search engine optimization?

If not, the web firm you hire should have a skilled copywriter on board, who can handle the bulk content of your site. But then comes the next question:

• Do you have the time to spend constantly updating your site with news, events, blogs, images, videos, case-studies, products, or all of the above?

If the answer is no, then you either need to hire someone who can handle those responsibilities, or learn the necessary writing skills yourself, and set aside a chunk of time in your schedule on a regular basis to write content. Think of it like shaving. Sure, it’s kind of a pain, but you need to do it, and you certainly can’t forgo it for a couple of weeks just because you’re too busy!

Naturally there will be parts of your website that rarely change, but there should always be at least one part of every site that is clearly dynamic to the user. (For the purposes of this article, dynamic refers to content that is regularly updated and generated through a content management system(CMS).)

3) Content Management Systems

Speaking of which, the next thing to discuss with regard to content is whether or not you need a content management system.

For most, the answer is yes. However if you decide to ignore everything I said about how you need to change your content regularly (silly fool) — and you honestly know that you will only change your site’s content once every 6 months or every year — then don’t bother with a CMS.

Think of a CMS like a time-share package in Orlando. It’s a worthwhile investment if you use it. If you don’t, it’s a waste of money. Every blue moon when you want to change a phone number or delete a team members’ photo, just go back to whomever developed your site and pay him/her to make the change.

In most cases, you’ll find that a CMS is a very worthwhile purchase. It allows you to publish your own content whenever you want through an easy-to-use editing interface, similar to writing an email or using Word. If you were to try to edit your site without a CMS you’d have to know basic HTML, and be able to handle files using File Transfer Protocol (FTP). Thankfully, with a CMS, you can leave that to the pros. Your CMS sort of serves as a translator between you and your website. You write in plain English that you want to add a page and edit copy on your site, and the CMS translates that English into a language that a computer can understand, thereby updating your website.

You may need your entire website editable - but in most cases there are only a few pages you’ll need to change on a regular basis. In my experience, I have found it easier to let pages like “About Us” and “Contact” remain static — since you’ll rarely change those sections — and get a CMS for thing like “News”, “Events” and “Blog”, which you should be updating constantly.

Closely related to this subject is RSS. It stands for Really Simple Syndication. Using what’s called a RSS-reader (which is built into the Mozilla Firefox web-browser), your users can subscribe to the dynamic sections of your site. This way they can check their RSS-reader for updates to the site rather than visiting it each time.

Believe it or not this actually keeps users on your site, because they’re constantly reminded of you every time they look at their RSS-reader, and therefore they wont forget about your site… provided you keep the content fresh. Definitely ask your web team about RSS.

Hopefully these points were a helpful start. Part 2 will discuss hosting, domain and bandwidth. Feel free to email this link to those who would find it useful, and leave your comments/criticism in the comment box below.

0 Comments | Posted on June 4th, 2007

When you first decide to go through the drive-thru at your local fast food restaurant, what is it that motivates you? No doubt a number of things; TV or billboard advertising, past experiences eating there, or the dire need to eat something before you pass out. Maybe this particular spot is all there is close by. Either way, when you roll up to that plastic sign, and yell over the muffled speaker, the choice is yours. No one forced you to go there. And other than the usual promotional signs that are in front of you advertising the new mushroom-melt — very little “selling” is needed. Ronald’s already got you.

In a lot of ways websites are like fast-food drive-thrus. Visiting a website doesn’t take long and it should be equally fast to get what you want from it. Whether it’s information, downloads, or to sign up and become a member - you are at a site for a reason. Maybe you just want that Transformer that comes with the kids meal.

On the other hand, when you watch a television spot, or when you see a print ad - it’s mostly an unwelcome intrusion. Your mind was elsewhere, and now an advertiser is trying to vie for you attention. Don’t think of a website the same way.

When you visit a site, nine times out of ten, you’ve already been sold. You’ve clicked on a link, googled the name, or even entered the URL in the browser bar (do people still do that?). You’ve visited it because you wanted to. So why is it that some websites are still trying to sell you when you’re already there? Why are they trying to force you to view the site the way they want you to and not the way you want to?

One of the appeals of using the web is interactivity. Visiting a site when you want to visit it. Keeping your browser window the size you want it to be. Setting the body font to a size that is comfortable for you. In short, viewing content on your terms, not somebody else’s.

The following are some things to keep in mind when designing for the web to ensure your visitor’s stay is as comfortable, and customizable as possible:

Don’t misuse Flash

It happens a lot. People abuse Flash by getting it to do things it wasn’t meant for. Like creating ridiculously underwhelming intros that are meant to get the viewer interested in the site. The viewers are already there! There’s no need to sell them. All that intro is doing is stopping them from accessing the content they visited the site for in the first place.

Imagine the teenage employee of McDonald’s standing in front of your car before you can get to the intercom, saying (voice-cracking and all) “Welcome to McDonald’s, Here you’ll find Big Mac’s and other hamburgers. By the way if you want to skip this, just let me know.” Same goes with splash pages. There’s no need to create a barrier between the user and your content.

Another way Flash can be abused is by using it for navigation. If the site isn’t built in Flash, then the nav shouldn’t be. It’s inaccessible. It doesn’t allow people to use the contextual menu (ie: right-click and open the page in a new tab or window) and most of the time, it’s just plain annoying. Picture every time you looked at an item on the fast-food menu and it twirled.

Coming soon

Few things are as frustrating as trying to access something on a website only to find: “Still under construction. Coming soon”. If there is no content on a page, then don’t allow the user to waste precious time visiting it.

It doesn’t impress anyone to see that a page was initially conceived with the idea of content being in place. Rarely are we interested enough to keep checking back. No one likes ordering a food item and being told it ran out, but check back soon. There may be more eventually.

Taking away the control

It was stated at the outset that what separates the web from other media, is that users control it. So anything we do to try and strip them of that control is not going to make for an enjoyable experience. That means that even though we think our site looks really cool full-screen, and with no URL bar visible (hey, we don’t want them distracted by thinking about other sites they might want to visit) - it’s really intrusive to force upon them.

Kind of like if your sitting in your car placing an order and a big piece of chrome comes out of the side of the restaurant and closes in on your car so that the Wendy’s across the street isn’t visible. Just face it, people are there out of choice, and ultimately it’s up to them whether or not they want to stay.

This brings to mind the idea of pop-up windows. Generally it’s offensive to have a new window or tab open up in your browser unless you, the user, decided to open it. Sure, as creators of the site, we don’t want people leaving our site prematurely. But really if it’s made clear that the link is external, then they can be the ones to decide whether or not to see it in a new window.

Click here to read more. Click where? Oh right, here!

We see these kinds of contextual instructions, and for the most part, they’re a bad practice. It’s almost always better to visually identify what is a link, and make sure that what is identified is real, descriptive content. For example, “click here for more information” is silly and redundant. Why not link “More information”. The kid at the drive-thru intercom never says “Look here for more food choices”.

By keeping in mind that the websites we create are solely for the users that visit them, and not for ourselves, we can be sure that they’ll keep coming back for more online, tender, juicy goodness.

4 Comments | Posted on May 8th, 2007

If there’s one class that gets slept through a little too consistently in design school - it’s typography. There’s something about it that can seem so unattainable to some designers, and yet - like most things in life - it’s a simple mix between art and science. Easy to learn - hard to master.

Typography for the ages

Part of the reason type is so fascinating to me is because it is a visual representation of our most precious cultural touchstone - language. Even the lay person can look at a piece of type and instantly recognize the time period it came from. Think of everything from as far back as the Victorian era and the arts and crafts movement, to the modernism era. They all had distinguishable characteristics that even now, transport us to a time we never lived through. The graphic styles speak almost as much as the words and meaning they represent do. Even as recently as the 1950s through the 1970’s, each decade seems to have its own distinguishable typographic style.

Then a remarkable shift happened only within the last couple of decades. Designers began making the shift from typesetting by hand to typesetting by key stroke. The computer brought about great efficiency in some respects, but along with that, there was a price to pay. Now it was easy to open up a computer program, select a typeface and start typing away - and gone was the need for an understanding of typography.

In practice

Even now, some so called ‘designers’ know very little about typography, though this study is central to the very basic principles of graphic design. I once had the misfortune of working with a very arrogant (and untalented) individual who prided himself on his “fontography” skills. That’s right, to him, the only knowledge needed was in choosing the right typeface.

However, there is more to it. Remember the part where I said it’s an art and a science? Great typography is about knowing the rules, and then knowing how to break them. It’s about communicating in a way thats practical and methodical and easily read, but also about communicating a feeling by the way your letters appear, the place your words sit, and how your paragraphs are positioned on the page.

Question is, how will people remember our era? By keeping in mind the basics, you can take your designs to a whole new level, and keep our time from being remembered as the era of ugly type:

Letters - the building blocks of typography

It’s important to know the anatomy of letters and words. Remember how you used to print on looseleaf in the elementary days? You would have 3 horizontal lines that you would be used for each line of print. The top line would be where the top of your capital letters started (In typography this is the cap-height), the middle line would be where your lowercase letters reached their height (the x-height), and the bottom line would be where all the bottoms of your letters would sit (the baseline). And then you would have some lowercase letters that would go beyond the x-height and the baseline. For example the lowercase “d” has what’s called an ascender which reaches the cap-height even though it’s lowercase. The letter “y” has a descender which goes below the baseline.

Is all of this just useless head knowledge though? Check out what some designers have done by simply manipulating the anatomy of letters.

Text

When letters sit together, they form text. Knowing how to place letters next to each other is key to good typography. For example, one of the most common type blunders are not kerning letters. Take for example the word “Fan”. At small sizes you don’t notice the fact that the letter ‘a’ should slide in underneath the ‘F’. When set at large sizes though, it becomes apparent. The computer automatically sets the ‘F’ and the ‘a’ to have the same distance apart from each other as other letters. However, you have to override what the computer is doing automatically for aesthetics.

Paragraphs

One thing you have to pay attention to is the shape and size of paragraphs of text. Our eyes are not meant to read extremely long wide columns of text. It is much easier to read narrow columns, because your eye can skim in one place without having to travel long distances. Another common oversight among amateur typographers is not cleaning up orphans and widows.

When a new paragraph begins at the bottom of a column of text, or conversely if a paragraph ends at the top of a new column - that’s an orphan. It just doesn’t look right. Its better to break the column prematurely than to have this happen. Similarly, a widow is where one word has it’s own line at the end of a paragraph. Better to break the second-last line prematurely and let the poor widow have a companion.

When good type goes bad - a list of felonies

This is what not to do:

Do not run text vertically like Chinese characters (ie: all the letters have different baselines). Roman characters were not meant to do this. Instead, if you want a vertical line of text, simply rotate the whole line. It’s better to have to read the text sideways than up and down.

Using justified text on narrow columns. You know how newspapers have “Rivers” or large gaps between letters that make strange patterns through a paragraph? That’s what not to do. Narrow columns should use left or right alignment. Type does not have to be perfectly symmetrical to be legible.

Stretching letters. You see it all the time. Somebody wants to make a line of text fit how they want it, so he/she stretches the letters horizontally or vertical. This is bad! A common analogy with typography is to make the shoe fit, not the foot. In other words, create a flexible design, that can accommodate what you need it to, without forcing letters or typefaces to do what you want them to.

These are just a few of the things that go a long way toward making communication design practical, beautiful and meaningful.

And the extra credit question: What’s the difference between a font and a typeface? A font is the computer file that makes a typeface what it is. In other words, it is correct to say “I don’t have that font on my machine”. It is not correct to say “I love the look of that font”. The characteristics that make letters aesthetically pleasing, or identifiable are referred to as a typeface. So it is correct to say “That’s a beautiful typeface”, not “You need to copy over the typefaces to your computer”.

For more great tips on basic typography see Thinking with type

0 Comments | Posted on April 4th, 2007

As the name of the article suggests, this is for everyone.* By everyone I mean anyone who is involved in purchasing, building or managing a website. If you are in business, chances are you have a website. Perhaps you’ve have heard of web standards, but don’t know what they are. Well, know this; web standards are drastically changing the web design industry, and it is critical that anyone who has anything to with websites gets on board with implementing these standards. I’m going to go out on a limb and assume that you care about things like:

Return on Investment
Staying ahead of the competition
Consistent online branding
Responding to your customers
Reaching the widest possible audience
Meeting your legal obligations
Preparing for the future

So you don’t know the jargon - that’s okay. In fact, this article is specifically meant for people who don’t toss around words DOM scripting, semantic mark-up or graceful degradation. This is meant for people who care about achieving real benefits to their business.

A little history

Let’s take a step back for a moment. In 1991 Tim Berners-Lee created the internet. And the programming language that he created was called HTML. Perhaps you’ve heard of it. If you don’t know (don’t worry I promised no jargon), HTML is a very simple computer language that’s used to describe text in a way that a computer can understand. So simple in fact that web programmers don’t even like it being reffered to as a programming language. It’s beneath them because it’s so simple. They refer to it as a mark-up language. The beauty of HTML is it’s simplicity; because it was originally meant for academics to pass their research back and forth over the internet, it had to be so simple that anyone could use it. Basically it describes content. So if I want to make a heading - I wrap it in a heading tag. This way the computer knows its a heading. For example:

<h1>Here’s my heading</h1>

<p>And here’s my paragraph</p>

Not too difficult to grasp eh? However the problem came when the internet took off because businesses got involved and wanted to market themselves on the internet. Why was that a problem? Well, they didn’t want a plain old looking text document for their website, they wanted it branded like all their print materials. They wanted it designed! So what Tim Berners-Lee created in 1991 was now being forced to do things that it was never intended to do, like using multi-column layouts, and having background patterns and displaying images etc. It turned HTML into a hideous shadow of its former self. It was now a mess of code that was unreadable by most people.

Compound that with the fact that the browser war came into play in the mid-nineties. Now Internet Explorer and Netscape - and a host of browser manufacturer’s to follow - were each trying to one-up each other by adding new features to their browsers. So your website might look good on Netscape, but render terribly if someone is using an older version of Internet Explorer.

The aftermath

The problems that resulted from this method of web design was astounding. Our websites are business critical and yet:

They are expensive to redesign. What was once a fresh, original, unique design it now dated. However if you want to redesign your site it costs an extraordinary amount of money because the web team has to build it from the ground up. If you want to make a change to your site you need to have a web team to make those changes, and if that team isn’t in-house, it’s even more expensive.

I know what you’re saying - “But I have a content management system to make changes to my website”. Well, that helps to an extent. But it also leads us to another problem; it ruins your brand consistency. Now you have editors who are using a WYSIWYG interface to write content for your website who are bolding words, changing the colour of headings, using Comic Sans for the body font - it really is a mess.

Another problem with the old method of web design is that you can’t reach the widest possible audience. Imagine for a moment that you own a shop. And every third or fourth person who comes into your shop, you turn away. Well a lot of websites that are around today do the very same thing. They don’t cater to how different people use the web and they only work on a select few browsers. So many are forced to leave your site or are frustrated because it’s not displaying correctly.

For instance many times we want to print a page of a website, and it cuts off half of the text column. Or how about when you want to copy text from a site and paste it into an email - only to find out that you can’t. Either the text is just an image or it’s in Flash. Now many people are browsing the web with mobile devices - is your website readable on those small screens? Most aren’t.

Believe it or not your current website may not be compatible with the laws in your country. Depending on where you live there are laws that dictate that people with visual disabilities must be able to access your site. If your website is not compliant with web standards, then chances are someone using screen reader is unable to “hear” the content of your web page. Most of us are happy to see that care has been put into a building so that it is accessible to people with physical handicaps - but how many websites are out there in which someone with a disability cannot use the site?

A final thing I’ll mention is that these inaccessible websites are not easily picked up by search engines. For many this can mean death for their business. If you can’t be googled than it’s likely that most people won’t find your site.

Alright, now we’re really depressed, right? We’ve gotten ourselves into a big mess that we all have to live with. I’m pleased to tell you that it doesn’t have to be like that.

A sigh of relief

Thanks to the W3C - an organization that develops web languages, much like Tim Berner-Lee developed HTML - there are now standards in place that solve, or at least improve, most of the aforementioned problems with web design! You guessed it - web standards! So now instead of HTML being full of messy code that is unreadable by most people out there, with web standards your HTML remains simple, just like the way it was meant to be. It’s important to note that there are three elements that make up a web page:

HTML
CSS (Cascading Style Sheets)
DOM Scripting

Oh wait! I said I wouldn’t get technical! Let’s redefine those three key elements into:

Content (HTML)
Design (CSS)
Behavior (Dom Scripting)

Anything related to how your website looks is taken care of in a totally seperate place, leaving the HTML simple and readable. Also the behavior aspects of your site (ie: drop down menus, forms and things of that nature) are separated from the HTML as well. So now instead of each document in your website being one big mess, these three elements are separate from one another and much more usable.

This may be hard to visualize. For a perfect example go to CSS Zen Garden. It’s a site that shows the amazing things that can be done using only one HTML page. That’s it - the whole site. But what really drives the point home is that designers can submit different designs for this one HTML page and it simply swaps out a style sheet (CSS) thus delivering a totally different design, but leaving the content intact. Just click on the different links on the site and you’re seeing the same web page, but with a completely different look & feel. Amazing stuff.

And the benefits

So again, why do you care? Well when your site is to standards it means that you can now have a return on investment. A standards-compliant web site is much faster to build and maintain, and any changes that you want to make down the road are much faster and less costly to implement.

Now instead of your editors using their CMS tool to ruin the look of your website, they now have control only over the content of the site and can stick to doing what they do best - writing. If they want to write a heading, the HTML stays as a heading and the CSS makes the heading look the way the designer intended, not the writer.

You can now respond to your customers and reach the widest audience possible. Remember the analogy of the shop? Sites that are standards-compliant can easily be made to render well on different browsers and mobile devices, and ensure that users can access your content, no matter what their browsing preference or disability. This also means that you will be living up to your legal obligation - allowing your site to be accessible to the visually impaired.

Standards-compliant websites are faster to render, thus users with slow connections are less likely to leave the site because of waiting too long for large graphics to download. Also because the content is left intact, search enginges pick up the words on your site more easily and therefore your ranking on search engines will increase.

Best of all you are future-proofing your site. As newer browsers come out, most if not all of them are embracing web standards, and so as time goes on, your website will be consistenly rendered on all the modern browsers.

Not too shabby eh? It was a long read, but if you learned something about web standards and the benefits of them, then it was worth it. Unfortunately while more and more in the web design field are embracing these standards, many traditional agencies still don’t know or don’t care about them. You shouldn’t be paying for a website that doesn’t comply with web standards nor should your customers be using it. Embrace the future of web design and feel the benefits that will come to your business.

How to lose a sale

Uncomfortable Silence

Making me repeat myself

Put me on hold

Responsive Design vs Mobile App - Your website on a mobile device

1) Functionality

2) Weight

3) Business Model

Closing thoughts

We’ve had a makeover!

Why I’m excited about web design all over again

Hosted Fonts

HTML5

CSS3

Death of IE6

JQuery

Mobile and Responsive Design

Why it matters what you ate for breakfast

Celebrity Magazines

Advertising

Social Media can build your brand

On the move

Lower your expectations

Over-confident website owners

Zealous website owners

Start simple, plan for complexity

If you build it, they won’t necessarily comment

How to plan your website

Rushing along

A cold, hard shock

Why it costs more

Know what you want

The wonders of napkins

Look at examples

Write your content now!

Obsess over the spec

The ExpressionEngine 2 Client Guide is here

Download the ExpressionEngine 2.1 Client Guide

Screenshots

Table of Contents

What is ExpressionEngine? 3

Logging in 4

Creating and Editing Content 5

Entry View 8

Comments 17

Multi-lingual sites 18

File Manager 19

Form Entries 21

Editing your account 22

User and Member Access 23

Backup and Upgrades 25

Under the hood 26

Experience is irrelevant

The importance of timelines