You Get What You Pay For

August 3rd, 2012

An obvious issue when explaining how much a website will cost is that most people aren’t familiar with the process. Many people don’t realize there are different ways to build websites and significant differences between solutions depending on a site’s features.

I often get asked simply, “How much do you charge for a website?” Which is virtually impossible for me to answer without gathering details about what the client wants.

In his book Design is a Job, Mike Monteiro explains the situation as follows:

“After all there’s not much difference between asking, “How much do you charge for a website?” and “How much do you charge for a car?” Except that people have probably bought a car before. They know that the type of car a college student needs to get back and forth to class is vastly different than what parents with a new set of twins need. And that they’ll have to pay more for the latter. And that, even among one type of car, the price can vary wildly based on their quality and feature set, which really isn’t that different from decisions you’d have to make in choosing what kind of website you want and who you want to build it. Except they may not know that yet.”

I also find that many potential clients will often balk or hedge when asked about their budget. One such individual confidently told me “I know how this works, I tell you my budget and you tell me that’s what it will cost!”. Which made me pause and reconsider trying to work with this client. I doubt any business relationship can get off to a good start if one party believes the other is intent on ripping them off and if that’s how he thinks the world operates I’d question the likelihood of being paid by this individual. It’s important to keep in mind that all solutions are not created equal and much like any product or service there isn’t necessarily a “one size fits all” formula for every client. For any project there are various levels of sophistication and technology that can be used.

Once again Mike Monteiro sums up the situation pretty well.

“Some clients think that if you “trick” them into telling you their budget you’ll tailor your estimate to it. You know what? They’re right. If you tell me that you have $200K, and I feel it’s appropriate, I’ll show you what a $200K design solution looks like. If you have $40K, I’ll see if I can come up with a $40K solution. But they’ll be different solutions. I’m not going to charge you $200K for a $40K solution just because I know you have it. But the least helpful thing possible is for me to come up with a $200K solution when your budget is $40K. It wastes both our time. So tell me what your budget is and I won’t show you the Audi on the lot when you have Civic money.”

If a designer knows your budget they can avoid making suggestions or coming up with solutions that are beyond your means. For instance, if I know that a client’s budget is very tight I won’t bother suggesting a custom design; I’ll start by recommending a pre-made theme and customizing from there. I’m also not going to recommend a lot of snazzy animation and cool interface effects. For this reason it’s important to know how much you’re willing or able to spend and be ready to accept that you may have to compromise on features or design if your budget won’t allow it.

Now some designers will promise you the moon for nothing, which I think should make you nervous. But if you decide to go along with them be prepared for unexpected difficulties or expenses later on. Below I present a few questions you should ask a potential web designer so that you know what you’ll be getting for your money.

Some basic questions regarding web design quality.

If you are seeking quotes from web designers, here are a couple of question you can ask. The following are just a few of the ways that web companies can make it seem like you’re getting more for your money than you really are.

1) Do they use modern web standards and semantic mark up?

2) Are their websites coded using tables?

If they answer “no” or are confused by the first question and “yes” to the second, you’re looking at a loss of search engine ranking for your website as well as an inflexible and difficult website to make design alterations.

3) Do they use in-line CSS styles or HTML formatting?

This means that the code for the formatting (colours etc) has been placed in each individual web page rather than in a separate, easily updatable file and can result in hours of work to make basic changes to your design.

4) Do they propose using an existing theme or template for your website?

Using a pre-made template or theme is a cost efficient option, however you may be disappointed to find another website or (even worse) a competitor’s website that looks exactly like yours. Personally, I’m a strong believer in the importance of having a unique web presence for your brand or organization.

5) Will you be able to update content yourself or will you have to pay them each time you need something changed?

A lot of quick and easy ways to make a website involve using HTML editors such as Adobe DreamWeaver to make changes to web pages and if you don’t have someone on staff who knows how to deal directly with web page mark-up you’ll not only have to pay the web designer to update your website you’ll also have to wait for the updates to be made on their schedule. Having your website built using a Content Management System (CMS) such as WordPress gives you the ability to update content whenever you want without added expense.

In conclusion…

I hope this has shed a little light on why costs differ between designers and made the process a little less opaque. Now I encourage you to go forth and ask someone to build you the website of your dreams (as long as it’s not built using tables).

Share

Why Hire a Professional Web Designer?

April 12th, 2012

The other day I was talking to a bar owner about possibly doing his website. When we came to the issue of price he was taken aback. He had expected it to cost a third of what I quoted despite the fact that, in all honesty, my quotes are quite low.

As we discussed things further it became clear that, to him, the look of the site wasn’t that important and he really didn’t want to pay someone to design a site, he just wanted someone to build one so that he could have his events calendar on-line and easily accessible to his customers.

I began to think about the consumer products out there which make it quite easy to create a basic site with much of the functionality required by this particular client and it made me nervous. What if everybody in this situation decided to make their own websites from consumer templates instead of paying for a custom design? Where would that leave me?

Now, if you’re an individual and you’re just using your website to upload family photos or bits of information it really may not matter what impression your site gives to the user. After all, it represents you only in a peripheral manner and exists solely as a practical tool to get your information to your limited audience of friends and family. They’re not going to judge you because your website looks exactly like many others. They’re not going to start looking at someone else’s photos instead, because they have a better website. Your audience is going to stick with you no matter what.

However if your website is for your business, what it looks like and how it functions should be of utmost importance.

You have to consider that your website will likely be the first experience that potential clients or customers will have of your business and how well it works and looks will reflect back on you. If the site looks cheesy, cheap and cluttered the user will think that your business is unsophisticated, cut-rate and disorganized. If the site looks like it was made from a template it will give the impression that you don’t care about details.

However, if the site looks like you put some thought into it, the overall impression will be that you care about how your company is perceived and perhaps, that that care extends to how you do your business.

Much in the same way that a shiny, professionally printed brochure makes a different impression than a black and white photocopy on cheap paper, a well-designed web site can say more about your business than the website’s content itself. This is obviously the thinking behind many restaurant and bar websites. Have you noticed that an overwhelming number of these types of sites use complex jQuery effects or are done in flash and feature music? These flashy sites help convey the impression that the business is affluent, elegant and stylish.

In his article In Defence of Eye Candy Stephen P. Anderson cites a 2002 study that found

“the ‘appeal of the overall visual design of a site, including layout, typography, font size, and color schemes,’ is the number one factor we use to evaluate a website’s credibility”. 

That alone should make people with poorly designed websites shake in their boots!

A similar point is raised by Aarron Walter in his book Designing for Emotion, regarding a case study of the Mint website.

When Mint, a service that “aggregates your financial information and requires you to share access to all of your bank accounts” launched in 2006, the biggest concern they had was getting users to trust them with their sensitive financial information. Venture capitalists had major reservations but the company was a great success. Mint attributes this acheivement to good design. As Walter notes:

“The care and consideration apparent in the design gives users the impression that equal attention is paid behind the scenes where Mint manages security and privacy. Sure, Mint makes it clear that your information is securely guarded, but rather than having to constantly reiterate the point in the copy, the design says it more effectively.

You’d trust a bodyguard in a perfectly-pressed black Armani suit more than a guy in cut-off jeans and a ripped Grateful Dead t-shirt, wouldn’t you? Appearance can greatly influence perceptions, and we carry that mental model with us when sizing up a website.”

Since your website will be representing your company to a vast number of people, how it looks and how easy it is to use will reflect on your organization as a whole. It’s very hard to get over a bad first impression.

I’ll get my nephew to do it…

Another thing that often comes up is “Why are you charging so much? My nephew knows a thing or two about websites and he could make me one for $500!”

What the question really comes down to, particularly after considering the points above, is Do you want it to look like you paid your nephew $500 to do your website?

It is unlikely that this hypothetical nephew is aware of current web standards and technologies, can ensure that your site will maintain consistency across different browsers or a wealth of other things that a professional web designer is aware of as a matter of course.

I have a real world example that may help explain my point. A few years ago my wife and I bought a house. At first we were extremely impressed by the garden in the front yard and the large deck out back but as time went on we started to notice that some things just weren’t right. A beautiful (and expensive) magnolia tree was, we were told by the house inspector, planted too close to the house and would eventually need to be removed. We noticed that the walk along the side of the house was too narrow to roll a stroller or a garbage container along without two wheels falling off the edge. I did some measurements nearby and could see that our walk was, unnecessarily, four inches narrower than the neighborhood standard. The stones on the walk started to become loose. We took a good look at the garden and began to wonder about the methodology behind where everything was planted. Why were those two bushes all by themselves over there?

As we stood on the sidewalk contemplating our garden our 80 year old neighbor strolled up. She looked at the inexplicable bushes and intoned “Yeah, Jerry did that. He was an idiot.” Other discussions with neighbours pointed to the same thing. They’d all watched as Jerry and his son landscaped the garden poorly.

The story came to us that Jerry and his son had been paid to build the second floor balcony and when they learned that the previous owner needed landscaping they said “We can take care of that for you, cheap!”

But they couldn’t. They didn’t know how wide a sidewalk should be. They didn’t know what type of cement could withstand the test of time. They didn’t understand the relationship between certain plants and bushes or how far away from the house a tree should be planted. They weren’t trained as landscapers and now we were paying the price for the previous owner’s corner cutting.

We’ve subsequently had all the landscaping redone. Something we could have avoided if someone was willing to pay a properly qualified person to perform the work in the first place.

Share

Love Connection – 2006

March 29th, 2012


Video, 15:42 min.
Synopsis: At first Rob is angered by the invasion of his best friends’s new girlfriend, but as he watches his friend Sean, transform from playboy to boy-toy he starts to wonder if more sinister powers are at play.

I was going through the website and was dismayed to see that I’d overlooked my most recent short film. The movie was shot on video in early spring 2006 and finished that same year. Scott Brophy and I thought it might be fun to shoot something during our down time between film jobs and the project quickly spiralled out of control from the original concept of shooting something at our houses on our consumer DVC cameras to a minor production with a real cast and crew. The original title for the film was “She’s Got Tentacles” and I wish we’d kept it.

I chalk up my negligence to post the movie here previously, to the fact that I’ve already made a pretty nifty (if I do say so myself) Flash website to present the film to the world. Go there to view the film, discover details and learn what went on behind the scenes. Or stick around and watch the film above.

Share

Eligible Magazine

February 28th, 2012
The New Eligible Magazine website

The New Eligible Magazine website (click image to view larger)

I recently did some work for Eligible Inc. They’re a high end dating service located in Toronto who’ve recently launched their own online magazine. They contacted me to customize the new website’s look.

Original London Live WordPress theme

Original London Live WordPress theme

When they brought me on-board they had a WordPress theme chosen but they wanted to tie the colour scheme into their established brand. I gave all the interface elements an overhaul, changing the existing black theme to brown. I then created a new masthead and integrated an events calendar into the website.

They were very concerned about isolating the advertisements to specific categories of the site so I coded a number of custom widgetized sidebars that are locked to their specified categories.

All in all, the Eligible folk are a nice bunch of people and if you’re looking for love, or just some dating advice, check them out.

Share

Case Study:
Presidential Air Before and After

December 7th, 2011
The new Presidential Air home page

A new look for presidentialair.ca

I’m currently finishing up some work for Presidential Air, an air charter company based out of Barrie, Ontario. I was contacted by the CEO after he visited the Flash website that I’d built a number of years ago for Club Ash Bar & Lounge.

Over the years the Club Ash site has generated a number of leads from people in the Barrie area. It has some pretty snazzy animated menus and Flash effects and Presidential Air said they wanted to have something similar for their website. The company asked me to come up with a list of enhancements to improve the look of their site, stressing that they didn’t want a full redesign they merely wanted the current design enhanced. Accessibility and the ability to work with an existing booking system was essential so it was necessary to use as little Flash as possible.

(Note: Click on the images below to view larger versions.)

The original site had been put together by a staff member in-house and had a number of problems.

Presidential Air's original home page

The original home page

When I validated the HTML code at the W3C Mark Up Validation Servicethe home page generated 88 errors and 46 warnings. There was a lot of JavaScript code in the page itself and the layout employed a mixed use of divs and tables. Most of the text was using in-line formatting and there was no template structure set up for the website.

Presidential Air's original About Us page

The original About Us page with excessive space below the content.

There was also a large amount of blank space between the content and footer as well as at the bottom of each page, causing unnecessary scrolling. It became clear that I had to do more than just replace a few design elements if the site was going to run efficiently and be easy to update over time.

My proposal included an animated navigation menu using jQuery, the implementation of a style sheet to handle formatting site wide and the creation of a template structure using PHP. I also suggested moving most of the JavaScript code to external files and overhauling the HTML code to meet web standards. As it became obvious that I’d essentially be rebuilding the site from scratch in PHP I suggested to the client that we instead put our resources into building a new version of the site in WordPress but he demurred.

With the parameters of the project established, I began work and drew up a new design. After discussing the design with the client and making a few revisions it was approved.

It was now time to start creating a set of templates using PHP so that updates to the header and footer would occur site wide. The navigation menu was rebuilt using PHP to determine the current page. I found a useful piece of javascript that allowed my to fade between images and create the button hover effects. I removed all inline formatting and CSS and replaced it with an external style sheet to, once again, allow site wide changes to be made in one place. I removed unnecessary tables and replaced them with div tags (although I must confess that I left the table structure on their “Instant Quote System” as it had been built by their developer and I didn’t want to break any of his work). I also took the majority of the javascript code out of the pages and put it into external files. The result was a much more manageable site with clean code based on modern web standards.

I discovered that the excessive space at the bottom of the website was being caused by the google map that appeared when a user selected flight destinations. It required two hidden divs layered over top of each other. They had been position relatively and shifted up by 500 pixels. This created a void of 1000 pixels where the divs used to fit into the flow of the document. I instead positioned them absolutely which removed them from the flow and restored the proper height of the page.

With that accomplished my final task was to reinstate the content and reformat the pages with CSS. Here’s an example of what the original “Fly & Golf” page looked like.

The "Fly & Golf" page before the overhaul.

The "Fly & Golf" page before the overhaul.

And how it looks now:

The "Fly & Golf" page after the overhaul.

The "Fly & Golf" page after the overhaul.

In addition to reformatting the pages I also employed some CSS3 to create text shadows, multiple background images and animated hovers. I have to note that these effects aren’t supported by all browsers but that’s okay. While users of browsers that support CSS3 (all modern browsers) get some eye candy, users of unsupported browsers (basically Internet Explorer 8 and earlier) won’t know what they’re missing.

As I write this I’m still completing work on redesigning the look of their booking system but the majority of the project is done. I’ll post an update with some details when the website is finally complete but in the meantime please feel free to head over there and take the website for a spin.

Note: Eagle eyed coders will notice a blob of SEO gobbledygook between no-script tags embedded in the home page. I know this can have negative consequences on search results but the client’s marketing specialist insisted that the code be included.

Share

Sticky note doodles

April 9th, 2011

Back in my previous life as an assistant director I’d occasionally doodle something on a sticky note while calling actors or waiting for a driver to arrive with the call sheets.

One day when I was working on Mutant X I stuck one on the corkboard and before I knew it my coworkers were adding sticky notes to the board as well until we eventually had a small art gallery of doodles on yellow paper.

Earlier today I was going through some old files and found a folder call StickyArt which contained my scans of all the doodles Id rescued from the honey-wagon. I’d thought I’d post some because… well why not? I may post a few more later if I find the time but for now here’s a sheet of 6:

Share

Giving Mr and Mrs Hypnotist a facelift

March 15th, 2011

I recently gave Mr and Mrs Hypnotist a facelift. Well, not Mr and Mrs Hypnotist themselves, just their website.

Mr and Mrs Hypnotist are a husband and wife team consisting of Paul Irving and Beth Bovaird. They put on a live show involving Beth’s skills as a hypnotist and Paul’s as a comedian.

I’ve known Beth and Paul for a long time and through a chance conversation with Beth, I discovered that they were in desperate need to update their website. The designer who had originally created the site was busy with new jobs and some of the information on their pages was over two years old. Potential bookers were telling them that they’d gone to the site and were dismayed to see that they hadn’t had a gig since 2008!

Beth and Paul no longer wanted to call a web designer every time they needed to change a picture or post some news.

WordPress to the rescue! After a few rebuked attempts to add some of my personal style to the look of the new site, I ended up simply taking the existing design and turning it into a WordPress theme. In addition, we made a few changes to the page layout and brightened the original pea soup green colour to a lemon yellow.

Old myspace links were removed and a new blog was added.

Dubbed “What’s Happenin’?” the new blog provides the Hypnotists with a great place to post announcements of upcoming shows and hypnosis related content. Paul links back to the blog from the couple’s Facebook fan page which helps increase their potential audience.

Check out the site and if you’re in Toronto on Saturday, April 23rd you can see them performing live!  Click here for details.

Share

Madfatter Inc. article for Ryerson’s Chang School

May 18th, 2010

After I graduated from the Web Design and Development program at Ryerson University’s Chang School I was contacted by the school and asked if I’d be willing to do an interview for an article on students starting their own businesses.

I agreed and once the feature was published they sent me a copy of the periodical.

However, I didn’t realize that the piece was also online until today.

The article doesn’t offer any great insights and it makes me sound rather generic but I thought I’d share it here as a curiosity:

Read the article

Now if only they’d stop cancelling the advanced PHP course.

Share

Kim Gibbons Mortgage Superhero site

April 28th, 2010

Mortgage Superhero site image

I just completed some updates on Kim Gibbons’ Your Mortgage Superhero website and I found myself reading a few of her articles when I should have been working (naturally, I turned off the clock while reading).

She has some very useful information for those who are curious about the upcoming HST in Ontario and mortgages in general. If you’re in the market or will be collecting HST in the future I highly recommend heading over and taking a look at the site.

She also recently won a legal battle with Marvel and DC to register herself as a “Superhero” so she’s obviously got moxie!

Share

Trade Show Kiosk Game

December 21st, 2009

Kiosk game home screen image

hushMedia wanted to provide a more entertaining way to distribute promotional items for one of their clients so they hired my company to create a trade show kiosk game.

The backgrounds and prize revealing videos were created by 1UP Creations while I wrote the Flash ActionScript 3 code that powers the game and added special effects such as the elevator climbing animation, pulsing logo and red hover states for the buttons.

You can view an online demo of the game here: hushMedia elevator game

Note: as the game was designed to run directly from a computer’s desktop, depending on your internet connection speed there may be a delay while the game loads.

Share