Photo By Jessica Higgins
Calvin loves cake! In fact, Calvin is a master baker who's been running his own business for 17 years creating decorative cakes. Calvin has a lot invested in his advertising materials, but he feels his old, static website isn't finding new customers the way he thinks it should. Nor is it serving his existing customers very well.
His site was designed and built many years ago by a "web guy" who's now long gone. The site's content, though still somewhat attractive, is not frequently updated. It does little more than provide basic information about his business.
Calvin wants to take it to the next level and accept orders through his website. He also wants to start a blog and newsletter on party planning that he thinks will generate some excitement and new business.
However, Calvin's not sure who to hire to get this done. His local hosting company have been doing the occasional minor edits he's needed on his site, but those guys don't really talk much about website design in their advertising.
Searching Google and job boards leaves Calvin even more confused. One guy told him he'd likely need some custom software development to support the unique order form he'd need to accept customized cake orders.
And the prices! They seemed to range from $12/hr or less to $200/hr or more! Why such a difference?
Choosing a Web Design and Development Firm
Calvin has some budget set aside for this, but he certainly doesn't have a Park Avenue budget! So after some persistent calls from one of the agencies he'd contacted, he decides to go with who we'll call "Acme Web Shop". They've got a pretty nice site, some testimonials, and their rate of $22/hr sounds pretty good!
Calvin also liked "Roadrunnerz Web Design" (totally fictional). They too had testimonials, but their $125/hr price tag seemed outrageous when compared to Acme Web Shop.
So, Calvin selected Acme Web Shop. Their consultant listened to what Calvin wanted. He came back a week later with some printed design mock-ups and a list of functionality they would build. After some negotiation, Calvin and the Acme Web Shop consultant come to an agreement on price and functionality, and away goes Acme guy to get his shop started on it.
Here is where our story takes a twist. Calvin knows the Internet pretty well from a user's perspective. And, being somewhat of an artist, he knows what looks good. However, Calvin is a baker and business owner. He doesn't know how all the bits fit together to make a website work. So let's take a look at an example of what Acme Web Shop and Roadrunnerz Web Design, the agency Calvin didn't choose, would deliver.
A Simple Contact Form
Both agencies recommend to Calvin that he should have a contact form on his site. The form, when submitted, sends an email to Calvin and is saved to a database. An admin interface would allow Calvin to display the contact form data in his web browser as well. Here is what each Agency delivers:
Looks Fine to Me!
Calvin fires up his browser and both forms look pretty good to him: nice rounded corners, color gradients. However, in this case, beauty is more than skin deep. It's all the things that Calvin doesn't know or think to ask his web consultant that will ultimately nearly cost Calvin his business.
What Lurks Beneath
Just like the 10% of an iceberg visible above the surface, the same is true for a website or web application. The final rendered screen output is only the surface view. The other 90% is the foundation you trust your consultant/designer/developer will build.
But what makes up this foundation? Here's the basics we'll cover:
- Compatibility across different platforms
- Usability & User Experience
- Scalability and Performance
- Marketing, Search Engine Optimization and Persuasion
- Website Analytics
What Calvin does not realize is that not all of his site visitors use Internet Explorer 8 like he does. Sure, he's heard of FireFox, but strictly uses IE because it's what's installed on his computer.
Professional designers take into account the site visitor demographics and will test to ensure the site they deliver displays correctly on most if not all browser platforms in use today. That means IE6, IE7, IE8, Firefox, Safari, Chrome and Opera web browsers. They also test on different Operating Systems (MS Windows, Apple MacOS). They're aware of web-safe fonts to assure the site displays as designed on all platforms and they take into account the wide range of screen sizes in use. From tiny hand-held devices to smallish netbook screens, to desktop monitors of all sizes, all require design consideration.
So what did Acme Web Shop deliver? Here's a screenshot of that same Contact Form when rendered in Internet Explorer 6. Hmmm, not exactly a form that instills confidence for the site visitor.
How many potential customers simply abandon the site and move on? How much potential business would Calvin lose?
(BTW, the odd "grey" rounded corners are an IE6 issue with transparent PNG graphics.)
On the other hand, RoadRunnerz has tested and ensured the site displays correctly in all browsers. They've also taken into account:
- Accessibility issues - Site visitors will be able to use their screen-reader to interact with the site.
- Coding standards to ensure compatibility with future browser releases.
Usability and User Experience
RoadRunnerz isn't just cranking out pretty graphics. They want the site visitors to have a smooth and welcoming experience. For example, note in their design how the subtle "resize" hint in the bottom-right corner of the form. This allows the user to adjust the size of the form and message input window. Acme's form is a fixed size and may not comfortably display the site visitors' entire message.
Roadrunnerz also take great care at user input validation. For example, does the email input field validate that a correctly formatted email address was entered? Does it work correctly on 2 letter domains like email@example.com? Does it catch typos like in firstname.lastname@example.org? Are validation error messages concise with a clear user action?
What about a checkout form? How many potential clients might Calvin lose from a poorly designed checkout form that site visitors abandon for reasons of poor or broken design?
Internet-based attacks have been taking a turn for the worse. Regardless of what firewalls and anti-virus software you may be running, poorly written website code can leave you vulnerable. Let's take a look at a few different vulnerabilities that Acme Web Shop didn't take into account when designing Calvin's website:
- SQL Injection Attacks - Remember how we mentioned that the Contact Form information was saved to a database? A SQL Injection Attack is where an attacker submits SQL database commands via the online form to perform his nefarious deeds. Poorly designed code will send those commands directly to the database. Those commands could delete your entire database, dump the contents of your database, (did those Acme guys encrypt the user passwords before storing them?) or gain file-level access to the web server where all sorts of havoc can occur.
- Browser 0-Day Script Attack - A script attack is when malicious code on a web page takes advantage of a security vulnerability in the web browser to gain access to the site visitor's computer. The "zero-day" part means that the malicious script is currently being used "in the wild" and no browser patch exists to fix it. Unfortunately, these are discovered far too frequently and patched far too slowly by the browser manufacturers. Even PDFs can carry out this type of attack.
So what is the consequence of Acme neglecting to address these attacks in their design? Let's say a hacker submits his malicious script in the "message" field of the Acme version of Calvin's Contact Form. Calvin then unknowingly runs that script when he views the submitted messages from the Admin screen. That particular script happens to retrieve and install keystroke logging software, which sends the attacker everything Calvin types into his keyboard from that point forward, including his credit card numbers, banking passwords, etc.
- Platform & Plugin Vulnerabilities - Most modern websites are built using an application server platform like PHP, ColdFusion or .NET that interfaces to a database. The developer will also often leverage third-party libraries and plugins rather than write code from scratch for particular functionality (e.g. maintaining a blog). Unfortunately vulnerabilities can exist or be discovered in all of these. How often are these systems patched? Is a patch even available for the vulnerability? Who's going to update my site when a patch comes out? These are all issues a professional developer will address.
There are many other ways a site can be attacked, such as through cross-site scripting, click-jacking and more. The point is, do you trust your "budget" web developer to address these issues? Can Calvin afford to have his bank account cleaned out by hackers? Can Calvin afford the trouble he might get into infecting his customer's computers via his website?
Scalability and Performance
Calvin doesn't know anything about PHP, Java, .NET, Flash or Flex. He trusts that his web designer/developer is using the right platform for him. He's not even sure what "right" means? Do pages load quickly? Will they continue to load quickly with ten times the traffic? With 100 times the traffic? Has load testing been performed to understand the bottlenecks and limits. Have all possible error conditions been tested to ensure a smooth user experience?
Is the site bandwidth hungry? Or does it make effective use of caching and file size optimization to reduce bandwidth costs?
Calvin thought Acme's idea of having a video on his home page was a great idea until he saw the bandwidth surcharge bill. Roadrunnerz solution to host the videos on Amazon S3 allowed Calvin to transparently stream videos from his website at a much lower cost than his ISP could provide.
In the end, is your web agency really offering you the best solution for your needs? Or are they offering you technology-X because all they know is technology-X?
Marketing, Search Engine Optimization and Persuasion
Calvin obviously wants new customers to find his website when searching in Google and other search engines. However, much of what makes a site appear near the top of search results lies in the design of what is invisible to site users.
Some of the common mistakes in Search Engine Optimization include:
1. Using graphics instead of text for titles and navigation. Google cannot index the "text" embedded in a graphic. Though some strides have been taken to remedy this, Flash websites and navigation also experience this problem.
3. Relevant content too low on the page. Rendered output looks nice, but if the search engine "crawler" needs to wade through line after line of code for your headers and sidebars, your real content loses it's "value". That's why add-ons like the Thesis Theme for WordPress are used to overcome this common design flaw.
4. Incorrect use of title, meta, heading and anchor tags. These are "sweet spots" where Google looks for relevant content.
5. Use of Black Hat techniques to "game" the search engines. Beware of any web consultant who suggests using "tricks" to fool Google into giving your site high ranking in search results. What may work today may get you banned tomorrow.
A whole different set of skills is required to find the correct words and imagery to persuade your site visitors to take the action you want them to take. Not many web shops are paid based on how effective their website design is. Therefore, the "art" of persuasion, falls way down in the priority of tasks to complete if it's addressed at all.
Remember Roadrunnerz's high hourly rate? They happen to have experienced copywriters on staff who take pride in creating persuasive and profitable copy for their clients.
Acme? They actually use offshore developers who's first language doesn't even match what's used on your website.
It may look pretty but does it generate business? Website analytics is the collection and analysis of the data surrounding the use and performance of your website. In order to gain insight into what is working and what isn't, analytics data must be collected. The implementation of an analytics package is closely integrated with the underlying code of your website.
Calvin really hadn't given it much thought. His old hosting company would email him a report once a month showing Page Hits and such, but he could never tell if what he was seeing was good or bad.
Acme says they'll set up his site with Google Analytics so he can track his site visitors. That's great! However, Roadrunnerz has Search Engine Marketing (SEM) experts on staff that can integrate Calvin's advertising expenses with his analytics reporting to give him an exact, down-to-the-penny Return On Investment (ROI) for his advertising dollars.
In The End, Is It Worth It?
So here's the point. Your website shouldn't just be an electronic version of a paper pamphlet. Instead it should be an integral part of your organization's overall sales and marketing strategy. A modern website, when correctly implemented by knowledgable consultants, designers, developers, marketers and copywriters forms a truly powerful system that will increase revenues and maximize your bottom line.
Instead of thinking of building or redesigning your website as an expense, consider it an investment in the future success of your organization or endeavor.