Perspective, tips, and insight

Articles to help you improve your digital marketing

Milestone Advisors - New web site launch

TBH Creative was hired by Milestone Advisors to launch their new and improved web site. They had their old web site for quite a while and it was set up via a template-based site builder called Homestead. The template site had limitations, and they wanted to take it up a notch.

TBH worked directly with the team, went through many options for a new design, added some interest that was not over-the-top, and improved their messaging.

The new site launched on 10/24/08: http://www.milestoneadvisors.net/

Milestone Advisors provide executive-level services for business owners and entrepreneurs to help them solve complex financial and strategic issues that face their business.


Starting options TBH Creative provided during the web site design process:


A challenge during the project was a new company logo and change in colors 1 week before scheduled launch. Milestone wanted to add some warmth to the palette, so modified their original logo and developed a completely fresh color palette. TBH Creative quickly adjusted the necessary elements in the web design, updates graphics, and made sure the new logo worked well with the new web site.

Spellbound? Check your spelling in Firefox.

Firefox 2 and 3 now include built-in as-you-type spell checkers. It does not allow you to search a text field for misspellings though.

Most of us have experienced the frustration of pressing "submit" on a text input box while writing on the internet and noticing that we have spelled something wrong. A free, open source Firefox extension called "SpellBound" will solve this problem (for Firefox users).
http://spellbound.sourceforge.net/index

It's a quick and easy install and when you type in text boxes, it will underline misspelled words in red as you type. I'm going to start blogging in Firefox now.

You will need Firefox for this if you don't already have it. Download for free at: http://www.mozilla.com/en-US/

I heard about this tip from Chuck Wills of Mary E. Ober Foundation. Mary E. Ober Foundation desires to build partnerships with organizations that impact lives through loving and respectful relationships. By proper stewardship and investment of our resources, we assist their leadership in reaching the full potential of service to their clients, thereby meeting the local community’s needs.

Thanks Chuck!

Flash Full Screen Code

Need your Flash movie open at full screen? Put following FSCommand on first frame or in onLoad() event handler of movie: fscommand("fullscreen","1");

Web Usability Tips Everyone should read

Web site usability is oftentimes overlooked for preferences, cool tricks, or trying to fit too many things on a page. There are many important things to consider when designing or building a web site for best usability. Jacob Neilson, the usability expert, defines usability as:

What (Definition of Usability)
Usability is a quality attribute that assesses how easy user interfaces are to use. The word "usability" also refers to methods for improving ease-of-use during the design process.

Usability is defined by five quality components:
  • Learnability: How easy is it for users to accomplish basic tasks the first time they encounter the design?
  • Efficiency: Once users have learned the design, how quickly can they perform tasks?
  • Memorability: When users return to the design after a period of not using it, how easily can they reestablish proficiency?
  • Errors: How many errors do users make, how severe are these errors, and how easily can they recover from the errors?
  • Satisfaction: How pleasant is it to use the design?
The following are some good guidelines to consider when evaluating a web site for best practices.
Source: http://www.doshdosh.com/50-web-usability-tips/ About the writer: Dish Dosh

Web Design and Usability Tips
  1. Response or load time for a website is fairly important. If your site is slow, visitors are likely to go away and it will also be difficult for them to learn new or foreign concepts. Remove the ‘homepage‘ link on the homepage because it can increase navigational confusion. This will make the user doubt that the homepage is indeed the actual homepage.
  2. Follow conventions for web design (”blue for hypertext links“) This will allow site visitors to mainly focus on your content instead of using their mental power to learn how to use your website.
  3. Fluffy flash designs that do not support real user needs are not recommended because they weaken usability.
  4. Splash screens are not useful because it gives the first impression that a website is more concerned with its own image than other user’s problems. Websites need to communicate respect for the user’s time.
  5. Website usability tests can be easily performed by getting users to interact with your design while they think out loud. Record their comments and filter it into your quality improvements.
  6. Simplicity is Rule #1 for usability. The less features there are available in a design, the less there will be to compete for the user’s attention.
  7. Try to mainly rely on typography instead of bloated designs and graphics. The goal is to enhance appearance without delaying the response time. The blandest sites can get the most page views and users.
  8. Serve senior web users by making making your website more readable and clickable. Use large text for hypertext links and minimize usage of pull-down menus and moving interface elements.
  9. Change the color of visited links. This will allow users to decide where to go next on your website. Links that don’t change color can cause navigational disorientation in users.
Copywriting and Usability Tips
  1. Large amounts of text on one webpage do not work well because it makes it difficult for users to extract useful information. “The more you say, the more people tune out your message.”
  2. Good copywriting style should be to the point and should not be dominated by internal niche jargon and ‘marketese‘ or marketing sales speak.
  3. Write so that lower-literacy users can understand and appreciate your content. Sites which target broad audiences must make lower literacy users a priority.
  4. State the most important information in the first two paragraphs because most users will read this material and scan the rest of the article.
  5. Split your content into subheadings and use bullet points. Also highlight keywords or important phrases by making them bold.
  6. Use brief headlines with strong information-conveying words. People scan headlines and content blurbs in feed readers faster than email newsletters.
  7. Do not use tiny font sizes or small text because of it will not work for a large part of the web audience (Teenagers and People in their 40s onwards).
  8. A website’s tagline must explain what the company does and what makes it unique among competitors. Your tagline should communicate your site purpose within the crucial first 10 seconds.
  9. Use old and familiar words when writing to be found by search engines. Supplement unique words or madeup phrases with known or legacy words because they are used the most by customers and visitors to your website.
  10. The headline must make sense when it is detached from the rest of the content. This is important because online headlines are often used in a list of articles or email programs, which sets it out of context.
  11. Make the first word of the headline an information carrying word that will help with scanning. Examples to be used include the name of the concept or company discussed.
  12. Do not start your page titles with the same word all the time because it will cause difficulty when scanning a list. Move common terms to the end of the list and place it in brackets.
  13. Show numbers as numerals. Numerals will catch the attention of users better because numerals represent facts. “It’s better to use “23″ than “twenty-three” to catch users’ eyes when they scan Web pages for facts, according to eyetracking data.”
  14. Blog links should say where they go. This information can be provided in the anchor text or surrounding words. “Life is too short to click on an unknown. Tell people where they’re going and what they’ll find at the other end of the link.”
Content Infrastructure and Usability
  1. Do not have a list of links on your sidebar without providing explanations on why each of them are recommended.
  2. Navigation and user-interface elements need to be simple so as to allow users to find their way around the website.
  3. Online content should be short and includes the use of bulleted lists and highlighted keywords. Write for scannability because users scan, rather than read. Include a editorial focus and direct your visitors to specific material, i.e. Top stories on CNN or Top posts on a blog.
  4. Information architectures should not mirror the organization chart and do not use bloated graphics or jargon.
  5. Discover the reasons why users visit your website and build your site as a fast and obvious response to these reasons or queries.
  6. Local navigation (”see these related products”) should be given more importance than global navigation. A minimalist navigation system should be used to match the user’s model of the information space.
  7. Don’t make webpages stand-alone units. They need to connect to related information. Provide interactive content features which allow visitors to do instead or just read. This includes online voting, games, message boards, forums, user submitted content and feedback forms etc. This especially appeals to teenagers.
  8. Do not use PDF files because they break reader flow and attention. Only use PDF files for distributing manuals and large documents or reserve it for printing purposes.
  9. Optimize your Page titles by using different Page Titles for each page. Page titles are used in taskbars and when users bookmark a site. “Don’t start with words like “The” or “Welcome to” unless you want to be alphabetized under “T” or “W.”
  10. Indicate link destination when using within-page links or mailto links. “For example, add a short statement that says something like: “Clicking a link will scroll the page to the relevant section.”
  11. Use Breadcrumb navigation. Breadcrumbs offer one-click access to higher site levels, take up very little space and show users their current location as well.
  12. Author Biographies should be included for blogs. Users want to know who they are reading and biographies are a simple way to build trust.
  13. Highlight Popular Posts. Integrate them in your navigational system or link to your previous articles in newer postings. This is important because you need to provide them with some useful background on the topic or your opinion.
  14. Keep your content focused. The more focused your content, the more loyal your readers will be. Building a specialized website allows you to be an authority in your niche. Provide new or follow-up information at the same location of the original information or transaction. For example, if you have a cornerstone and heavily linked article on social voting platforms, you should return to this article to update it with new links to current and future articles on the same topic.
Usability, Monetization and Online Businesses
  1. Websites can differentiate themselves from competitors by focusing on visitor needs and figuring out how they access or use data. Differentiation is about being valuable and useful to site visitors.
  2. Do not run pop-ups, such as in-content ads or pop-up or pop-in squares because they can often feel intrusive and overwhelming.
  3. Good usability will positively translate into profit and will even lead to a very high ROI or Returns on Investment. Nielsen estimates ROI to be around 1000%.
  4. Building visitor trust is a big problem that all websites face. Important to affirm the credibility of a website and its respect for user’s rights.
  5. Corporate policies which promote usability and user-centered design standards should be essential to all businesses.
  6. Have a decent error message that ensures that you don’t lose your user due to programming or server malfunctions.
  7. When replying to visitor emails, edit and use subject lines which relate specifically to their query. A good subject line is vital for building stronger relationships with customers or site users.
  8. Use confirmation emails and automated messages to close the loop in E-Commerce and other transactions. Tell customers what they need to know. This builds trust by customers for online businesses.
  9. To achieve high survey response rates, keep them short and clear. Ensure that the process is quick and painless for users or customers by asking fewer questions and using different surveys for different users.
Whew! I think I need to reread this a few times to let it all sink in. One thing to note is that these are usability tips and guidelines.

If you like these tips or have ones to add, please let me know.

What is a robots.txt file?

Urged by a search engine expert colleague, Doug Karr of Compendium Blogware, I did some investing on the robot.txt file and how it could help SEO. Here's a good summary:

What is a robots.txt file?
Web site owners use the /robots.txt file to give instructions about their site to web robots; this is called The Robots Exclusion Protocol. http://www.robotstxt.org/faq.html

Doug also said to create a site map page and point to it from the robots file. This will help Google find new pages and index them accurately and timely.

What are Sitemaps?
Sitemaps are an easy way for webmasters to inform search engines about pages on their sites that are available for crawling. In its simplest form, a Sitemap is an XML file that lists URLs for a site along with additional metadata about each URL (when it was last updated, how often it usually changes, and how important it is, relative to other URLs in the site) so that search engines can more intelligently crawl the site.

More info (source): Sitemaps.org

Doug says on his site about sitemaps: "This may be the most important thing you can do for your site!"

Thanks Doug for your advice.

Leo Brown Group Projects Complete

TBH Creative was hired by Leo Brown Group to develop a company brochure and design a mailer for a new development called Reagan Park. Check out the final designs below.

Mailer (cover):
Company Brochure (cover):


Lead Project Designer: Joy Olivia Miller
Joy is an award-winning designer based in Chicago, Illinois.

Who is Leo Brown Group? Located in Indianapolis, Indiana, Leo Brown Group is a privately-held healthcare real estate development and construction company with roots dating back to 1946.

About the Reagan Park ProjectReagan Park is a 25 acre health campus under development in Avon, Indiana, just west of Indianapolis. This Leo Brown Group project consists of an integrated retirement community with licensed Assisted Living, Independent Living and Memory Care units located amongst a park-like atmosphere that includes several walkways, paths, green spaces, gazebos, and a central water feature.

Want to know more about our brochure design process or see the full pieces? Contact us today.

How to see old web site designs

Curious what your company or another company's web site used to look like?

Check out this cool tool called the Internet Archive.

What is it? The Internet Archive is building a digital library of Internet sites and other cultural artifacts in digital form. Like a paper library, we provide free access to researchers, historians, scholars, and the general public.
It's not a perfect tool, but pretty cool.

New Launch of Bosma Enterprises Web site

TBH Creative would like to announce the launch of a new and improved Bosma Enterprises web site.


TBH Creative was hired to create a new design for Bosma, and prepared 2 unique options. The process started with discovery of all needs, reworking the site architecture, and review of various sites and branding materials.

The 2 web designs created and presented by TBH Creative appeared as below and were combined into the final selected web site design.

Option 1

Option 2

Who is Bosma Enterprises? Located in Indianapolis, Indiana, Bosma Enterprises is dedicated to empowering people who are blind or visually impaired by creating opportunities that lead to the achievement of each individual’s employment, economic, social, and self-determining goals.

Web Site Needs Evaluation

I worked on several new project proposals today from discussions earlier this week to evaluate what the client's needs are. I oftentimes get asked, how much will it cost for you to create a web site for my company? That is a tough question because it depends on what is needed. Defining the scope in order to offer an accurate estimate is step 1 on any project by TBH Creative.

I know from experience that each client is different and has unique needs. Trying to put a "web package" around your goals will end in an unsatisfied client or scope creep for the developer. So, I spend time evaluating client needs first. Sure, I might lose some of my time "discovering" a project or client, but at least I know what I'm getting into and so does the client. I hope this effort is part of the reason I have a high satisfaction rating with clients.

The most important questions I ask each client before engagement are below. There are quite a few more, but these are the ones that I base all decisions on. These questions are also ones that any marketing director or person in charge of managing a web project should also ask themselves too.

1) What are your web site goals? Common goals I hear are: to gain new business, to show expertise, and to establish company legitimacy. It is important to evaluate this before jumping in. Everything about your web site should point to these goals. Aesthetic and content decisions should be made based on these goals also.

2) Who is your primary and secondary audience? This is important to remember throughout the entire process. Designers, company owners, and marketing directors often think about what they like in a web site or what they think is important. Content and design should reflect what your target audience is looking for and the styles they prefer. As a designer (consultant), it's good to appeal to the client also, but always remember the end-user. For example, if the end user is an older generation, the text should be large, regardless of your preference or the client's preference for smaller text. If your users are looking for facts, give them to them... don't make them search or click 4 times.

3) What do you want to say? Has it been written? Do you have a general idea of site structure? I always recommend my clients to draft the base copy for the site based on ideas/structure we generate together. The client is be the expert on the subject, right? The verbiage doesn't have to be great in draft form, but a web editor can adjust and rework to make the verbiage flow better, easy to understand, and read clearly by an Internet user. It's important to remember that web writing is very different from any other medium. Therefore, the messages must be written differently for effectiveness too. Think about how you search and read web content -- quickly until you find what you need, right? Most people scan and read the important parts they were looking for.

As a guide, I recommend my favorite book on Usability: "Don't Make Me Think" by Steve Krug. If you are interested, it is a quick read and I am sure it will help.

If you don't have Adobe Acrobat Writer, you can still create a PDF...

Many of my clients (especially non-for-profits) ask me to create a PDF for them. No problem, but they don't realize they can do this without Adobe Acrobat Standard software too. Below is the information I usually provide.

What is a PDF and why is it a good format for a web site document? A PDF (portable document format) file can be viewed, navigated, and printed from any computer regardless of the fonts or software programs used to create the original. It enables a document to be distributed on different systems while preserving the layout. To view a file in PDF format, you need the free Adobe Acrobat Reader. Adobe Acrobat Standard and Adobe Acrobat Professional are the main programs used to create PDF files. These programs range in price from 300 to 500 dollars. However, if you simply need to convert files such as a word document, web page, or excel spreadsheet, this can be done for free. Below are links to programs and a website that allow you to complete such a task.

How can you create a PDF for your web site without the full software? At PDFonline you can upload a Word doc, Excel spreadsheet, HTML page, or JPG/GIF/TIFF image and get a PDF back. You can also upload an existing PDF and PDFOnline will email you an HTML version.
PrimoPDF and CutePDF are free programs for Windows that allows you to create PDF files from nearly any application.
Also, every program running in Mac OS X can create a PDF File from the print dialog window. Go to the File menu then Print (shortcut:command-p), but instead of clicking "Print" choose "Save as PDF." Then select the desired location and file name for the converted PDF file.

I hope this saves someone some trouble.

Are Flash web site good, bad, valuable, or what?

Flash is fun and can add excitement to a web site; however, in my opinion, Flash is most beneficial in small pieces and never for a whole site. In addition, a lot of interest can be added with Javascript, JQuery, CSS, and high quality graphics instead of Flash.

Over the years, however, I have done a couple full Flash sites (Shannon Connor Design & Hether Miles Photography -- these were for very creative businesses who wanted to show off their creativity and profiles more above anything else. All were done several years ago before the SEO (Search Engine Optimization) mania.

I am writing this post because lately I have been talking about Flash to a lot of clients. It is interesting because several months can pass with no one asking about Flash, and then all of a sudden multiple clients are asking! This post is an addition to my last post about the Balmoral Golf Club site which I have recommended be redone without Flash.

Below are my reasons and some idea of when Flash might be useful.

Disadvantages of Flash web sites:
- There is a load time which means your users (your clients) have to wait for information. The more information and photos you add to the Flash movie, the longer the load time.

- Flash is not good for SEO (Search Engine Optimization). Do you want to appear at the top of Google listings? The text and keywords in your Flash movie are not read by Google and other search engines, and therefore are not helping you gain a top position!

- Flash is hard to update. If you do not have the source file, no developer can help you without starting from scratch. In addition, updates take longer because Flash movies are set up on a timeline with a lot of associated scripts to make them work.

- Most users really don't care about the fancy movement when they are trying to get information. A little bit of interest or movement is a good thing, but does it really help your end result?

Where might Flash be useful for a web site:

- When done properly, as a small piece of your web site.
(Example: Flash Gallery developed for Allan Burch Illustration)

- When you need a little extra something to make your site stand out above competitors.

- When used with XML scripts so that updates are easier. - For creative industries such as photography or web design because Flash shows creativity and visual appeal which helps prove your skill.

- Gaming or a special promotion (Example: Kids games created for Fundex Games)

So, if you think a Flash site is what you want, think about the goal of your web site. Do you want clients to sign up on your site? Do you want clients to call you? Do you want clients to read about your services? Or do you want to show off your creative skills? A yes answer to all but the last question probably means a Flash web site is not the best for you.

Other developers or clients, let me know what you think about Flash web sites or send me some samples of Flash sites done well. Thanks!

Work around for Z-index and Flash movies

Having trouble with layering your elements when a Flash movie is involved?
I have run into this CSS issue a couple times and always need to look it up. Recently, I was working on a project for Balmoral Golf Club in Fishers, IN. They have a full Flash site, and it is not the greatest (no worries -- I've told them this also, but they don't have enough budget right now to update the site). Even though they cannot do a full redesign, they need a couple small updates. Unfortunately though, they cannot provide the most recent Flash source files. What to do? My idea was to create a div that would overlap the Flash movie and display a box above the swf player.

I set up my z-indexes as I normally would, but something didn't work. The Flash movie would not go below the box regardless of my position or z-index values...

So, I search around again and found a good reference that reminded me that I needed to add a "wmode" parameter and set it to "transparent". Like this:

My final code was simple and looked like this:
CSS: div#news { position: absolute; top: 60px; right: 15px; z-index: 4; } div#flash { z-index: 1; }
HTML: Box that should appear above flash movie.
Flash movie code.
 

And the file page looked like this below.
Hope someone finds this info helpful!

Receive articles in your inbox