Headspace Halifax Website Design

6 web applications that are essential for our business

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?

Year in Review 2009

Well, Headspace now has it’s first official year under our belt. Where did the time go? Actually, I know exactly where it went—designing, developing and marketing for our clients.

Together, Kevin and I have experienced the emotional roller coaster that is running a small business, enjoying the thrill of success, while learning from our failures. But overall, our year was spent developing our client base, building a solid team, and continually improving our individual knowledge and skill-sets so we can service our clients better.

So what is on the horizon for 2010? Regardless of how the current economic climate goes, we will keep plugging away, just like everyone else. There’s a tremendous amount of exciting possibilities gathering already, most of which I can’t talk about yet.

One thing that I can announce is that Headspace is now official partners in MediaBadger, the internet marketing company owned by Giles Crouch and Robert Snell. With them, we are going to be building and extending our own social media web application. We have found that while Social Media is forming an ever-growing presence in the marketing professionals’ arsenal, few have yet really discovered how to wield this mighty tool. As we have done throughout last year, Headspace and MediaBadger will continue to perform in-depth social media analysis and monitoring for our clients. We can’t wait to show off our product later in the year—trust us—you will find it useful.

Thanks to our clients for their continued patronage, our in-house team for always over-delivering, our contractors and suppliers who extend Headspace’s core offering, and our families for putting up with us when we pull late nights.

Here’s to a great 2010.

PS For more web-related end of the year wrap-up, see the best web design of 2009.

99designs: Hacks and Cheapskates unite!

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.

Headspace Unveils Forever Anne

(Asking the question: “is the little redhead a better role model than Bella Swan of Twilight?”)

Headspace Design was honored to be a presenter for the recent (November 27th) 2009 Tourism Industry Association of PEI (TIAPEI) Annual General Meeting, held at the Confederation Centre for the Arts in beautiful Charlottetown.

The theme of “getting your message out there” was in recognition of the impact that digital marketing and interactive advertising has on all sectors, TIAPEI and Tourism PEI presented comprehensive education and working sessions with key industry leaders. This included the unveiling of the new Forever Anne web site and social media approach which was designed, developed and deployed by Headspace Design and presented the PEI tourism industry by our very own ‘kindred spirit’  (and Forever Anne project Lead) Jennifer Faulkner.

Headspace doing something right in tourism web design

We have received some flattering recognition for two of the tourism websites we designed earlier this year.

One of them, Lunenburg Region has been featured on web50.ca Canada’s Best Web Design. One of the judges said:

“What we like: Attractive look. Great wooden background image. Easy navigation. Nice call to action (”Request Information”) in the main area and all the subpages. Nice, up-to-date events calendar on the homepage. A great site overall.”

This posting has also been covered in the South Shore Now, as proud co-recipients of the award. We created Lunenburg Region to be an information resource for those looking for a unique, rural experience. The website showcases all that there is to do, stay and eat in the area from beaches and arts and crafts to festivals and events.

Web50 is made up of Canadian creative designers, marketing managers and on-line media buyers. Its mandate is to showcase good website design for Canadian companies or by Canadian designers.

Another site we worked on and launched this summer, Signature Attractions of Atlantic Canada, has been listed among the 37 Best Web Designs from the Travel Industry by Vandelay Design. The site shared company with some award-winning and gorgeous websites, like the Bahamas and Tennessee US websites. We were proud to be among them.

We are currently working on redesigning and building the Points East Coastal Drive (Prince Edward Island) website, which promises to be an equally great website that draws favorable attention to beautiful Atlantic Canada.

From Cabot Trail Hospitality to Federal Glitz - Tour d’ Tourism!

Within one week, I attended two tourism events, which were extremely informative, inspiring and exceeded my expectations.

Last week, I traveled to the pristine Inverary Resort in beautiful Beddeck (October 28th and 29th) to attended the 5th Annual Tourism Solutions for the Cabot Trail Conference. This terrific event was hosted by Kim Lemky (our client lead in the Cabot Trail Interpretive Panels project), the Cabot Trail Tourism Coordinator.

The first night Kim hosted a Wine and Food Pairing Education Seminar with Taste of Nova Scotia Sommelier, Sean Buckland. By far the best wine pairing I have attended in years as Sean created an interactive environment, was entertaining and had the ability to engage 40+ people for well over an hour, adding witty humour to his unprecedented knowledge of wines and the industry.

The next day the actual Tourism Solutions for the Cabot Trail Conference took place with very informative guest speakers, discussion groups and great food.  Topics ranged from effective signage to the unveiling an extremely successful façade/beautification program in the Cape Breton Regional Municipality, presented by Eileen Lannon Olford, CEO of CBCEDA

One of the highlights for me personally was having the opportunity to have a chat and spend time with Cape Breton resort’s GM and owner Scott MacAulay, a true visionary.

Earlier this week I hit the road again as Headspace Design had a booth at the Canada’s Tourism Leadership Summit held November 2-4 in Saint John, New Brunswick at the Saint John Trade and Convention Centre. This is an annual event produced by the Tourism Industry Association of Canada and speakers ranged from Don Bell, founder of Westjet to Ray LeBlond, on the 2010 Olympics Marketing Committee.

Many of these marketing gurus validated the approaches and methodologies we engage in with our own clients, talking about the importance of a measurable internet marketing strategy and well-designed user-experience, telling the audiences about the importance of ‘open source’ content and leveraging social media.

The trade-show component of the event was a success for our company and we are already seeing some business developing.

Here are some sights from the conference:

Why good design makes you rank better in search engines

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.

Kyle and Kevin’s Golf Trip to PEI

Kevin and I had a good time in PEI this past weekend. We participated in the Tourism Industry Association of Prince Edward Island’s annual gold tournament.

ExpressionEngine Client Guide

As many of you know, we over at Headspace are big fans of ExpressionEngine. Whenever we train our clients on how to use their CMS, we also provide a printed and digital PDF which acts as a quick reference guide. This is great for when clients are trying to remember how to use certain functions of the CMS, and calling us isn’t convenient. This way they can simply look up how to do certain things like publishing content, posting images, etc.

I thought this might be of use to many of the ExpressionEngine designers and developers out there who would love to have a handy reference but don’t want to take the pain-staking time to write and design one themselves. Feel free to download the InDesign file, re-brand it to your company, change it till your hearts’ content and have a nice deliverable to give to clients when you’re done building their EE site. The InDesign file makes use of style sheets and master templates, so it shouldn’t be too hard to completely change the look of it. For license/copyright reasons, I could not include the font files. Write in the comment form if you have any questions.

Download the ExpressionEngine Client Guide

PDF
InDesign CS4
InDesign CS3 Interchange INX

Screenshots

Table of Contents

What is ExpressionEngine?

Logging in

• How ExpressionEngine works
• Your login information
• The control panel home page
• YOUR LOGIN INFO

Publishing Content

• The publish tab
• The title of the entry
• URL titles
• Entry dates
• Expiry dates
• SEO tab
• Assigning categories
• Editing categories

Entering and formatting text

The formatting menu
• HTML Tags
• Spell check
• Adding email links
• Linking to different pages
• Link titles
• The title attribute
• Uploading and adding
• images or PDFs to content
• Adding a previously uploaded file to your content
• The image tag
• Benefit of “alt”
• Seeing the rendered page
• Why you can’t control styling

Editing Content

• Edit tab
• Filtering results
• Selecting multiple entries
• Deleting entries
• Editing multiple entries
• What is a status?

Editing Images

• Uploading a new image
• Selecting a previously
• uploaded image
• Selecting an image
• Resizing the image
• Cropping
• Rotating
• Resaving the image
• Adding images to entries

Viewing form data

• Viewing entries
• Exporting

Editing your account

• Changine account details
• Customizing your control panel

Giving Access to new users

• Registering new members
• Assigning privileges

Backup and Upgrades

• Backing up your site
• Updating to the latest version
• Development and design changes
• Templates
• Modules
• Extensions
• Plugins
• Other developers

Under the hood

9 reasons web design is more fun than print design

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.

More heads to fill our space

When Headspace started, it was just me.

I never dreamed that in such a short time, it would grow into the team that it has become. In March, we hired as our first employee, Ricky Ferris. Ricky and I go back a long time, both working in and out of various agencies. I was very excited to have Ricky come on board full-time with Kevin and me.

As a web development ninja, Ricky brings a comprehensive understanding of design and usability to his brilliant knack for front-end development. From coding clean, semantic mark-up and CSS, to Actionscript/Flash development, Ricky is the guy who makes it all happen under the hood, and improves how things look and work. Ultimately, his job is to solve problems, and that’s what he has been doing for Headspace since his arrival in March. I don’t know how I got things done without him.

Among the many other changes to Headspace, we now have a studio! At the beginning of May, we moved into our new spot in 57 Portland Street in Dartmouth. We look forward to getting our space in good working order (in between client projects which just don’t seem to slow down), and we’re preparing to organize an open house that we will invite our clients and colleagues to. Stay tuned for more.

Just a quick thanks to all of our great clients who have made this recent growth possible. Thanks! And now we’ll get back to finishing your website.

Headspace creatively connects

Kevin and I participated in the annual Creative Connections at Queen Street Studios on a cold, rainy Saturday in April. We shared the floor with some other great industry professionals, including Paul Douglas from Melon, and Joel Kelly who presently works for Colour.

We spoke to small groups of design students, mostly from NSCC and NSCAD, and got to sample many of their portfolios. These kinds of events are great for all involved; Employers get to see the latest talent up-close and personal without booking individual interviews, and students get meet a variety of employers and showcase their portfolios without the potential for rejection that comes with cold-calling. Kudos to QSS for putting this together.

We met a talented designer, with a great book and equally great outlook named Matt Carleton. We hit it off, and invited him to do a one-month work term with us. He has been working with us for a couple of weeks now, and is a great asset to our team.

10 criteria for selecting a CMS

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?

Headspace kills two birds with one stone for Lunenburg Region… figuratively of course

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.

© Why copyright your site?

Check out the post What It Means to Copyright a Website

Although this is US laws, one would imagine the same principles apply here in Canada.

Facebook Advertising - as much ROI as Google?

Another great post by SEO Moz - Facebook Advertising - An Opportunity for Deep Targeting at Very Low Cost

Let’s face it - social media is the big buzz word right now. But even so, I highly endorse the view that using social media to promote a business can work as long as there is a real plan in place, not simply an “everyones doing it, so should I” approach.

In the post from SEO Moz, there is some interesting notes made about advertising on Facebook, worth checking out. Note a few excerpts:

“Facebook advertising differs from traditional paid search advertising in that instead of bidding for certain keywords that people are searching for, you are bidding on the demographics of the user. The demographic filtering technology is still in its infant stages, but even so allows you to target your ads to a specific age, sex, and even things like what school they attend or their sexual orientation. The strategies for advertising in this direction are still being developed, and the competition is still far less than you will encounter in the paid search area.

Why is this powerful?

• The demographics are far more accurate than most data (age, sex, gender preference, relationship, etc.)
• The deep data - being able to choose to market to employees of specific companies - should be an amazing tool for the right advertiser
• The keyword associations that people have with their Facebook accounts are correlated quite highly with true interests
• The “approximate reach” number gives you great insight into your target market size (even if you never place an ad)

How to get awesome links

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?

Testing mobile browser compatibility - the beginning

This is a bit of a techie article, but still worth checking out.

Here at Headspace, we’ve been specifically commissioned by one of our clients to test and ensure a site we’re developing works well in a mobile browsing (hint, the site we’re doing has a huge Japanese audience).

Like many in the web industry, I see designing interfaces for mobile devices as a clear direction we are headed, with the proliferation of mobile usage, especially among teens. Me? I have an iPhone and I still hate browing on the web, maybe I’m an overly “mature” 25 year old. But nonetheless, many have seemed to not only tolerate, but actually enjoy tweeting, emailing and browsing with their tiny little blackberry key pads.

What do you think? Will designing apps or web pages for mobile devices become as common for businesses as having a website?

9 Common Usability Mistakes In Web Design

View the excellent post from Smashing Magazine showing 9 Common Usability Mistakes In Web Design.

Some of my favorite mentions in there are “Pagination used for the wrong purpose”. I hate it when articles are split up between multiple pages - it is just another barrier to reading the post. The point was made in the article that the only reason people still do it is when they want extra page views to count towards their impressions—a pretty selfish motive if you ask me.

“No way to get in touch” is another pet peeve of mine, especially for banking and government websites. Contact is one of the primary purposes of the average website, so making it difficult for users to find the information they need, be it an email form or phone number is inexcusable.

Two things I learned about are using google search forms on a website (I usually use one that is based on custom scripting) and using 301 redirects to point old links to current pages. Very useful stuff!

Headspace drawing a crowd in tourism

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.

10 Harsh Truths About Corporate Websites

Great article on Smashing Magazine, written by one of my favorite web design speakers/authors, Paul Boag. He explains why corporate websites are not always as good as they could be, listing the following reasons:

1. You Need A Separate Web Division
2. Managing Your Website Is A Full-Time Job
3. Periodic Redesign Is Not Enough
4. Your Website Cannot Appeal To Everyone
5. You Are Wasting Money On Social Networking
6. Your Website Is Not All About You
7. You’re Not Getting Value From Your Web Team
8. Design By Committee Brings Death
9. A CMS Is Not A Silver Bullet
10. You Have Too Much Content

While seemingly negative, Paul always has a tongue in cheek way of writing that gets the idea out in a laid back manner. Definitely worth reading for companies that tend to neglect their website, and re-design/build every few years to make up for it.

It’s all in the follow through

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.

Your website can thrive in a recession

Check out the post here.

Web Design Trends For 2009

The always excellent Smashing Magazine put out a post a while back, with web trends for 2009. I felt personally that these were merely trends that have already been established in 2008.

Apparently Smashing Magazine can read my mind, because this week they put out an article on “More Web Trends for 2009”, and I feel this list definitely hits the mark on design styles that I’ve seen a little bit of last year (some I’ve even used myself), but trends we can expect to see more and more of this year. Worth a read.

Changes to the Headspace Blog

Well, it’s the start of a new year, and as always, with growth brings change. Headspace has been very busy lately, with no doubt due to having Kevin join as a partner in the company. We’ve been off doing different things, including partnering with other companies to provide Flash and PHP/MySQL development, and as always, offering full service needs to our own clients, everything from branding and print to web design/development, writing, SEO and marketing.

The reason I am writing this post is to inform my readers that because of the growth in the company, I am less likely to be able to keep up to date on blog posts—not that I’ve been doing a stellar job anyway—my posts have been few and far between.

The purpose of this blog has always been to keep business owners, marketers and website owners up to date on what is going on the world of web marketing and design, and since I rarely have time to write original content, I am going to be using content from other websites. While this may come across as a cheap and easy way to create consistent posts, I really do believe that this will assist those who don’t design or build websites full time to get up-to-date information on what’s happening.

I will still write original content on a monthly basis, in addition to just general Headspace news and events, with the hopes that coupled with compelling and fresh content on other websites, Headspace can be a place where our clients, prospects and friends can visit to get a high level glimpse of what’s happening in the industry.

Let me know if you have any thoughts and suggestions on content that should be covered. Thanks for all of your continued support, we wish our clients and friends (and often they’re the same) all the best. Here’s to a great 2009.

When to re-brand

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.

Howdy Partner

Headspace officially has a partner; Kevin Springer, a USA-native, has signed on as a principal in the company.

Kevin’s entrepreneurial experience hails back many years. From owning his own hip and happening bar in Maine, to starting up a successful, “save the manatee”-themed coffee with a cause—his clients ranged from small specialty shops throughout the south to large companies such as SeaWorld in Orlando. Kevin also worked for local interactive agencies, helping their clients achieve online success.

Kevin knows business. Add to that, he knows marketing and understands people, and he is passionate about digging deep to help other businesses succeed, even when it doesn’t always directly benefit him. Because of this personal philosophy, Kevin believes in holistic, ROI-based marketing, not just going after awards. It’s this unique approach, as well as his complimentary skill-set to my own that will add tremendous value to Headspace.

I am excited to team up with him as we expand our company, and continually service our clients better.

Usability, different from being passable

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

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?

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.

Headspace Sniffs out an Ice Award

This year, Headspace reaped the rewards of hard work in many ways.

One of those ways was when we were given an award of merit at the 2008 Ice Awards. Out of the many Atlantic Canadian design, marketing and advertising professionals who submitted, our packaging design for Saskatechewan food company, Mucci Pucci was one of the projects considered worthy.

We were extremely proud of the work when it was created earlier this year, and to receive such an honor is just gravy on the kibbles(Sorry, I’ll quit with the annoying dog puns). Our original intent with Mucci Pucci was to appeal to metro dog-owners who don’t think twice before spoiling their pooches. The high-end, yet fun design strategy paid off, and Darryl and Melody Anderson have been selling out every week since.

Thanks to the judges, as well as the others who work hard to recognize talent in Atlantic Canada through the prestigious awards. Also, congratulations to all the other agencies, firms and freelancers who had their work awarded.

Kyle Racki is hosting the Queen Street Studios Member meeting

I’ll be hosting the member meeting at Queen Street Studios on Wednesday, September 24th, at 10 am. The topic I’ll be speaking about is; 10 tips to market yourself better online

In my opinion, there are still many designers, photographers, writers and other freelance marketers who aren’t fully utilizing the web to sell their services. In my half-hour presentation, I will touch on some points to, first of all, improve your website, and then get it out there for the right people to see. I hope those who attend will find it useful.

For those who don’t know, QSS is a member-based organization that provides a network for freelance professionals to be a part of. I’ve been a member since the beginning of this year, and have enjoyed making contacts and using the beautiful space in downtown Dartmouth.

For more information on Queen Street Studio, contact Amy Hawk. I hope you all can make it out on Wednesday.

High-school fashion, and how it relates to design

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.

To Firm or Not to Firm? How to Choose Between Going Solo or Going Big

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?

Headspace Listed on 30 Most Inspirational Web Designs

Never one to modestly throw away a chance at shameless self promoting, I just wanted to proudly mention that the Headspace site was listed on Elite By Design as one of the 30 most inspirational light web designs.

A good process can work wonders for your design

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.

See the trees for the forest

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.

12 things you need to know before commissioning a website - part 5: Accessibility

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 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.

12 things you need to know before commissioning a website - part 4: SEO

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 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.

Personification in advertising

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?

12 things you need to know before commissioning a website - part 3: Web Standards

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 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.

What is good web design?

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.

Not all Flash Designers are created equal

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.

Lessons learned from designing truck lightning

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.

Top 20 Websites of 2007

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

1. 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.

2. 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.

3. Frieze Magazine

   Frieze shows how online magazines should feel - it takes massive amounts of content and presenting it simply and elegantly.

4. Come home to a Tennessee Winter

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

5. 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.

6. Biola University

   The textures and illustrations really make this site pop.

7. The Big Noob

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

8. 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.

9. 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.

10. 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

1. 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!

2. 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.

3. 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.

4. 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.

5. 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.

6. 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.

7. 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.

8. 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.

9. Spamrecycler

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

10. 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!

The distinction between design and advertising

It’s been said that ‘advertising is a knock-knock joke, design is a conversation.’

Interestingly enough, many firms that began as design boutiques, eventually turned into advertising agencies. There was just more money in advertising. Why is it that advertising and design is perceived this way?

There’s definitely a quick-turnaround mentality with advertising. Like a summer fling, there’s no commitment. A company can choose an agency, get a campaign conceived, story-boarded, shot and published relatively quickly, and then wait for six months to see if there was a change in revenue. If it wasn’t successful, they try again, maybe with another agency. If it was successful, they ask the agency to shoot the same campaign, but to “mix it up a little”.

Design is a totally different mentality. By design, I don’t mean just the act of laying out a brochure, or sketching a logo. I’m talking long-term. Like a solid marriage, a company’s brand will evolve and refine itself over time. It speaks a language, it communicates. It has a personality and constantly, and more importantly, consistently, gets it personality out there for people to see, touch and hear. Many of the worlds biggest brands have not changed radically over the decades, they simply evolved. They still say the same thing, but maybe with a little more style. But either way, you know them when you see them.

Think of how Apple has invented and reinvented themselves over the years. They keep changing with the times, but they are still projecting the same image as before. And people will remember that long after the “I’m a PC, I’m a Mac” ads have run their course.

No disrespect to advertising. It has it’s place. In many ways it is a great way to remind consumers of a brand’s personality. After all, who doesn’t like a good knock-knock joke?

How many design options do you show?

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?

Three isn’t company

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?

12 things you need to know before commissioning a website - part 2: Hosting, Domain and Bandwidth

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.

Is video right for your website?

Video has certainly gained popularity since most internet service providers have been able to offer high-bandwidth connections. After all, most people would rather watch a movie than read a book. A powerful image can move you to tears. So can beautiful words. Music can affect you emotionally. Combine all these things into video, and obviously you have a medium with great force - and great potential for entertainment, education and advertising.

If a client’s product or service can be sold with a website that features or video pieces that are entertaining, engaging, humorous, informative or in some way enhance their message—video is great. Or, if a clients’ business is in comedy, movies, news, politics, sports or user generated content - anything in which users are coming to the site looking for video content—then yes, their website should have video on it.

Many businesses, however, do not need, or cannot afford to shoot proper video. Instead, they might have a video in the bag already, like a low budget TV commercial, or a link from You Tube that they want to use. Basically, anything so that they can say they have video on their site. After all, video always beats text and images, right?

Two of the most popular, ground-breaking sites ever made—Wikipedia and Flickr—feature no video. Their main method of displaying content is text and images respectively. And they’re awesome. The reason they’re awesome is because the content is plentiful, it’s user generated, and it’s interesting to its audience. My point is, video in itself will not make your site interesting. Good content always will.

I don’t object to the idea of using more video - however I think there’s a tendency with this mindset to put the cart before the horse, and place more emphasis on the method of content than the content itself. After-all, content is king. That’s what people are coming to your website for.

An internal project

I’m proud to announce that my son, Micah Stephen Racki, was born Friday, August 10th, 2007 at 8:28pm. He was 8lbs 12oz, 21 ½” long and, in addition to black fuzzy hair, he has all his parts in the right places. His current fixations are not design or development related, but include drinking colostrum while being lightly bounced.

There’s no accounting for taste

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.

12 things you need to know before commissioning a website - part 1

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:

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?

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.

Make it a combo today?

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.

Not my type

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

A Global Audience

The campaign Kyle Racki art-directed, illustrated and designed for Bishops Landing was selected for to be showcased on Ads of the World. This work was carried out while Kyle was with Impact Communications, and it was a memorable and rewarding project.

The ads paid homage to the art deco style of the 1930’s and was used to advertise the free concert series at the square in Bishops Landing. Also, an ambient campaign was used to promote the free concert to those parked near the event.

The ads, posters and print collateral that were launched in the summer of 2006 proved to be the most successful year in the events history.

Now that’s a smooth compliment.

Yeah I’m talking to you! Why everyone should care about web standards

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.