Aqua Vita Creative Featured on Web Design Ledger

Hope you get a chance to read our article at Web Design Ledger today.

I’ve put together a personal cross-browser optimization cheat sheet/tool list we use at Aqua Vita Creative in our web development projects. This is the perfect starting place for a savvy business owner, or marketing director to engage customers or prospects on their website.
Aqua Vita Creative - Web Development Article at Web Design Ledger

Nothing says “I care” like a website optimized for your customer’s viewing pleasure. Of course you can’t please everyone, but you can make sure 80% of the website visitors have a pleasant experience with your company online.

Everyone needs to be aware of this. If you don’t know how your web page looks in multiple browsers, odds are you’re turning away potential customers.

Keep an ear to the ground, there’s more to come too! I found so many great tools, they wouldn’t fit in one post.

Matt found an alternative to the W3Schools statistics tool: W3Counter Browser Share

Questions? Comments? Brilliant statements? I’d love to hear your thoughts.

Michelle Pierce
11.10.2009
Naked Writing

So You Want to Be a Web Slinger

So you’ve finally realized just how darn beneficial the web would be for your business. Now the biggest question: how on earth do you get started?

HAHA! Worry not, my friends. Here are a few useful things to know to help you make the most of your site.

Getting started with design

Design is the part of the site you see, so you assume that’s where you should start, right?

Well, not exactly. Design is the shiny part, but you need to know the content of the site before you ever commence with design.

Now, by “content,” we don’t mean every single word of copy that will grace the pages. By content, we mean you have to have these questions answered:

  1. Who will be reading your site? What do they expect?
  2. What information do you want to convey there?
  3. What do you want it to do? (Do you actually make sales on the site? Do you want to encourage prospects to call you? Are you an informational resource?)
  4. What kind of mood do you want on your site?

These questions will influence the design, the colors, and the structure of your site, and the answers will ensure that you appeal to your audience/demographic/prospects/pick your term. That which intrigues middle-aged engineers is far different from what will appeal to teenage girls starting their first year in college.

Don’t forget browser compatibility! Not everybody uses Firefox (and much to my surprise, some people actually hate it! *mind is boggled*), and that which looks beautiful in Internet Explorer can break when viewed in Safari.

For the record, here’s the breakdown of browsers that people use to view our site:

  • Firefox: 57%
  • Internet Explorer: 21%
  • Safari: 17%
  • Chrome: 3%

If we only made sure our site was compatible with Firefox, nearly half our visitors would be unable to view it properly. And that? That’s no good.

You must make sure that your site will look great, no matter where your visitors are viewing it.

Creating content – research, research, research

I’ll be honest. I’m not a huge fan of keywords. However, you can’t argue with their effectiveness. Research what terms people are using to search in your niche. Try every possible combination that you can think of. (Use Google’s Keyword Tool for some help there.)

Once you’ve done that, pick one or two keywords and incorporate them into your title tags, h1 tags, content, and META description to aid in search engine optimization.

When it comes to home page content, PLEASE, avoid “happy talk”(to paraphrase Steve Krug). These are words that the visitors’ eyes glaze over, stuff like “Hi! Welcome to our site!” Tell people what you do. Identify the problem that you solve immediately, so they know that they’re in the right place. (If you are not a good writer, hire one.)

Tools Every Webmaster Should Use

Here are some tools that help you make sure that search engines can read your site (and that your visitors don’t see a mess in their browser):

XML Sitemap: No, this isn’t that page you have that outlines your site for visitors. This is an XML page that outlines your site for search engines. You can get one from Google, and it’s just a little HTML file that you drop in your main site folder.

WC3 Validation: They have tools to do both XHTML and CSS validation. This will scan your site and let you know where you have errors, which can trip up browsers and search engines trying to read your site. That way, you can fix them!

Google Webmaster Tools: I love this because it tells you where there are 404 errors on your site. That way, you can fix them and ensure that all the incoming links on your site are going to regular pages, not a 404 error. It also has a list of outgoing links and incoming links, so you can see where people are linking to you.

Google Analytics: There are other analytics tools out there, but this one is free, and gives you most of the statistics you need to gauge the effectiveness of your site. Find out where visitors are coming from, which pages of your site they’re landing on, and where they’re leaving.

What’s your advice for people getting started online? Answer in the comments!

Need some help with your website? Have questions? We’re here for you. Click here to contact us.

Michelle Pierce
10.27.2009
Naked Writing

Fix My Site! Three Common Web Design Errors and Their Quick-and-Dirty Fixes

Warning: Most of these fixes will require a moderate understanding of CSS and/or HTML.

Problem: There are borders around all my image links!

Solution: Well, we can take care of this one of two ways. One, we can write a CSS rule that says “for the love of Pete, quit automatically adding borders around my image links, you stupid browsers!”

Two, we can just go into the images and fix the problem at the source.

So your image links look something like this:

<a href=”http://www.site.com”><img src=”http://www.site.com/images/image2.jpg” /></a>

And your images, thus, look like this:

Website Design Errors - Image Link Border

Here’s the quick-and-dirty fix:

Add the following to your image tag: border=”0″

So, your tag should look like this now:

<a href=”http://www.site.com”><img src=”http://www.site.com/images/image2.jpg” border=”0″ /></a>

That should take care of any unwanted borders that crop up.

Problem: Help! My images aren’t showing up!

Solution: This is a problem that many people run into after they’ve transferred their site from one server to another, or have converted it to a new CMS. You move images around, and suddenly the browser can’t find them. Your first step should be to check the image paths to make sure they’re pointing to the right places.

For example, let’s say that all your images used to be in the main directory. So, your image paths would look like this:

<img src=”http://site.com/image1.jpg” />

Now, let’s say that you’ve moved all your images into an image folder. However, the paths haven’t been fixed to show that. When a browser goes looking in the main “site.com” folder, they won’t find your image anymore, so you get a sad broken image link. So, you need to go back to all your image links and update them so they look like this:

<img src=”http://site.com/images/image1.jpg” />

Ta-da! Your images should show up now.

Another fix is to try a root-relative path instead of an absolute path. Absolute paths are the ones we used above, where you have the full site name in the image path. A root-relative path looks like this:

<img src=”/images/image1.jpg” />

The easiest way to make a root-relative path is to just remove your main URL from the file path.

Root-relative paths are especially helpful if you’re moving a lot of things around, getting a new site name, etc. When browsers see that slashie, they go to the root directory of your server and start looking for the “images” folder from there. That way, if you switch domain names, you don’t have to go through and fix every single one of your images to reflect the title of your new site. With a root-relative path, browsers will already know where to look.

Problem: My site doesn’t have a title in the browser header.

Solution: Then you need to make friends with the title tag! The title tag goes in the header of your website, and according to W3 Schools, it’s required in all HTML and XHTML documents.

This is what you see:

AVC Title Tag - Small

This is what the code looks like:

<head>
<title>Aqua Vita Creative | Website Design and Development to Grow Your Business – Tulsa Web Design, Marketing &amp; e-Commerce Development</title>

</head>

As you can see, the title tag must go between the opening and closing head tags. Just put the title of your site between <title> and </title>, and voila! Your browser header should have a shiny new title in it.

Got any questions, or do you have any quick-and-dirty fixes that you want to share? Leave us a comment below!

Do you have other website design errors that need fixing? Give us a call at 918-518-6576, or click here to shoot us an email.

Jonathan Cox
5.21.2009
Eureka!

Websites On A Dime

While it looks like the economy could be turning around soon, many companies still have to be a little creative with resources in the meantime. And as you’re weathering budget cuts, you still need to wow clients and prospects online.

Sound impossible? Don’t panic. I’ve outlined several budget website alternatives to help you save money without losing credibility.

DIY Website

dime

A “do it yourself” website. This would be a very, very basic website with minimal design and functionality.

Unless you have a working knowledge of XHTML, CSS, JavaScript, PHP, and ASP and your own server, you would need:

  • Adobe Dreamweaver software to maintain and update the site
    • $399 per new license, or you can grab the entire Adobe CS3 Creative Suite for $399, including Photoshop, with a student ID
  • Adobe Photoshop software to edit photos and create graphics for the site
    • $699 per new license, but see above for discount information
  • Website hosting
  • Domain name registration
  • FTP software such as Filezilla to load your files directly onto the server

Estimated labor hours:

Expect to spend 8 to 24 hours on your DIY site. This assumes very basic site requirements, a basic level of coding skill and familiarity with online coding environments.

Basic Template Website

This gives you a cleaner, more polished, but still cookie-cutter website with more functionality. You can add calendars, a basic blog, and contact forms so visitors can send inquiries to you through the site. However, the site does not have a custom design.

This level of site would have a built-in content management system for fast updates. This option requires a moderate level of programming ability in XHTML, CSS, JavaScript, PHP, and ASP to execute. You would need:

  • One of three free content management system software platforms:
    • WordPress (moderate level coding ability required, for small firms and businesses)
    • Joomla (intermediate level coding ability required, for mid-sized firms and businesses)
    • Mod X (advanced level coding ability required, more powerful, for businesses with a full time programmer)
  • Website hosting
  • Domain name registration
  • FTP software such as Filezilla for direct file uploads/downloads to the server

Estimated labor hours:
A basic template website can take anywhere from 32 to 40 hours, depending on your level of skill and knowledge.

Custom Website

Bamboo Tsuba

This is a site that has been custom designed and includes a high level of interactive features and functionality. It is meant to compete with large firms and to act as the cornerstone of marketing and publicity efforts.

A few of its features might include:

  • Blog with community features, such as:
    • Comments
    • Audio/video posting ability
    • Trackbacks (link sharing)
  • Event calendars
  • Interactive photo galleries
  • Portfolio
  • Custom quote forms
  • Forums

A custom website would include a full content management system, allowing any user to log in and make quick and easy updates in an environment similar to MS Word or Outlook’s interface.

This site would require a high level of design and programming ability. You would need:

  • A professional design
  • A professional programmer
  • Website hosting
  • Domain name registration

Estimated labor hours:
A fully-functional custom website requires 32 to 48 hours for an advanced design and programming team.

Summary

Any way you slice it, it’s going to mean a minimum of 8 hours setup time, plus the time and the software required to update the site.

The DIY option is the deal for you if you just want to be able to say you have a website, and to have custom e-mail addresses for your domain. This has the lowest possible ROI of the three, but requires the least amount of time and expense to set up.

The Basic Template option is if you’d like a website that does invite viewers to browse your materials a bit more easily and aesthetically, but doesn’t need to knock their socks off.

The ROI on this one is still relatively low, as it’s not designed as a marketing platform. But when accompanied with a personal selling and fairly frequent updates, it can still be a valuable selling aid and informational tool.

The Custom Website pulls its weight when you need to approach large firms or reach a wider audience for the purpose of business sales, fundraising, or event organizing. It takes the most time and money to create, requires the most education and experience, and boasts the highest ROI of the three options. If you’re looking for a high-impact website with the versatility to handle sales presentations, interactive elements, and internet publicity, this is the vehicle for you.

My Advice

A lot depends on what you’re trying to do and how much time, experience, and money you have to invest in your project.

Though it may look cheaper initially, the first option is counter-productive, in my opinion.

It’s sort of like setting a bone in the wilderness. Anyone with first aid training and the basic tools can do it, but it’s a poor second to a doctor and a hospital.

For cash-strapped businesses, I’d recommend the Basic Template option. It’ll get you off the ground with a decent-looking site, and the CMS makes it easier for a layman to update than if you were using Dreamweaver.

If you are a larger business, (or want to look like a larger business), the Custom Website option gives you a flagship designed to wow prospects. Custom design helps you stand out from the crowd.

Regardless of which site you choose, expect to spend about $80-$100 minimally for hosting and domain registration for the first year if you don’t have them already. If you outsource professional design and development for a Basic Site, expect a price tag of around $1,700-$2,000. Custom Websites can run anywhere from $2,000 to $25,000 depending on the functionality you need.

If you weigh your options carefully, you can establish a solid online presence for your business that won’t break your budget. By building the foundation now, you gain a strategic advantage immediately, and position yourself to outstrip the competition over the long haul as you expand.

Picture 1 by nDevilTV
Picture 2 by Bugei

Jonathan Cox
5.14.2009
Aqua Vita News

Huddleston Law Offices Launches New Website with Aqua Vita Creative

TULSA, Okla. — With 20 years of experience and a long list of satisfied clients in the Tulsa area, Brian Huddleston’s old template website did not reflect the professional, high-quality results he delivered for his clients.
Huddleston Home Page
“It was a template website, a cookie cutter, and it looked like everyone else’s,” said Huddleston, owner of Huddleston Law Offices.

Since legal services are intangible, it can be hard for a purchaser of legal services to judge between all the options out there.

“When you’re selling your time and your knowledge of the law, conveying an image of professionalism, competence and experience is critical,” said Huddleston. “I think the quality of the website helps potential clients make that decision as a first step. After that, it’s all up to me.”

As an active Rotarian and involved community member, Brian chose a local web design firm, Aqua Vita Creative, rather than dealing with someone remotely by email or over the phone.

“The local community is so important to me,” said Huddleston. “The vast majority of my clients over the last 20 years have come from eastern Oklahoma and Tulsa County. I feel like it’s important to support those local businesses as well.”

Huddleston’s business depends on word of mouth, as satisfied clients refer him to customers, colleagues and friends. When those potential clients check out Huddleston online, he wanted the website to reinforce these recommendations and bolster confidence.

Initially, Huddleston was worried about paying for a cookie-cutter site that looked just like every other attorney.

“I was very happy to see that I got something that was unique, but also conveyed the professional image I wanted,” said Huddleston. “The Art Deco design and Tulsa’s connection to that fit well with a legal-themed website.”

Huddleston had just begun legal work for the development, construction and leasing of Tulsa’s newest industrial park, located along Highway 169. With a busy schedule, Huddleston did not have time to micromanage a design project.

“It was really easy for me, and I wanted it to be easy,” said Huddleston. “My clients receive all of their legal services from me, nothing is passed off to an inexperienced associate or paralegal. My focus is on practicing law, not setting up the website.”

With a back-end content management system integrated into the website, Huddleston also gained the ability to make changes to the site on the fly.

“I have a way to put things up on my website myself without having to get assistance every time,” said Huddleston. “That’s a very useful feature, and I like how it works.”

About Huddleston Law Offices

For more than 20 years, Brian Huddleston has provided legal services with an emphasis on real estate transactions, LLC and partnership formation. Brian Huddleston’s real estate practice focuses on both simple and complex commercial transactions, development, and construction. Visit him online at HuddlestonLawOffices.com.

About Aqua Vita Creative

Experienced providers of website creation, design, development, and marketing services, Aqua Vita Creative helps organizations in the Tulsa area expand their business and improve their image. They also provide services for several international organizations such as Engineers in Action and Bushenyi Alliance for Rural Health and Development. Visit them online at AquaVitaCreative.com.