Tuesday, June 24, 2008

Clean and pure CSS FORM design

Some readers of my blog hate html tables and often ask to me which is the better way to design FORMS with CSS, without using tables to place each form element in a table's cell. How I said some time ago... tables are not evil. Sincerly, in some case I used pure CSS code to design forms but, in general, I prefer to use tables. It's simpler and faster than use only CSS property "to simulate" a table structure. In any case, for CSS lovers, this tutorial illustrates a proposal about how to design a pure CSS form without using html tables.



You can download the source code and use it in your web projects.

Download source code


Step 1: HTML Code
Create a new page index.html and copy and past this code into the tag :


How you can see from the code above, the structure of our CSS form is the following:



I used

body{
font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}
p, h1, form, button{border:0; margin:0; padding:0;}
.spacer{clear:both; height:1px;}
/* ----------- My Form ----------- */
.myform{
margin:0 auto;
width:400px;
padding:14px;
}

/* ----------- stylized ----------- */
#stylized{
border:solid 2px #b7ddf2;
background:#ebf4fb;
}
#stylized h1 {
font-size:14px;
font-weight:bold;
margin-bottom:8px;
}
#stylized p{
font-size:11px;
color:#666666;
margin-bottom:20px;
border-bottom:solid 1px #b7ddf2;
padding-bottom:10px;
}
#stylized label{
display:block;
font-weight:bold;
text-align:right;
width:140px;
float:left;
}
#stylized .small{
color:#666666;
display:block;
font-size:11px;
font-weight:normal;
text-align:right;
width:140px;
}
#stylized input{
float:left;
font-size:12px;
padding:4px 2px;
border:solid 1px #aacfe4;
width:200px;
margin:2px 0 20px 10px;
}
#stylized button{
clear:both;
margin-left:150px;
width:125px;
height:31px;
background:#666666 url(img/button.png) no-repeat;
text-align:center;
line-height:31px;
color:#FFFFFF;
font-size:11px;
font-weight:bold;
}


This is only a proposal for the form layout. You can reuse this code changing all properties how you prefer.

Download source code

via : woork

Labels:



Webinar Recap: Ecommerce Innovations

t
This month’s webinar with Jason Billingsley covered various areas packed with examples from real online retailers. You can catch the full replay sometime tomorrow (we’ll let you know and post the link here) but for now you can flip through some of the examples, see the live sites and catch up on related blog posts you may have missed.

Next Webinar
3 Things to Die For: Web Analytics Unleashed with Avinash Kaushik
Thursday, July 17th @ 9am PST
Sign up to win one of 5 signed copies of Avinash’s book Web Analytics: An Hour a Day

Purpose of this Webinar

Innovations are not necessarily “sexy” — but they don’t have to be. This webinar is really to get you
thinking about the possibilities, whether you’re a small player or a multi-million dollar e-tailer. Innovation may exist in another segment / industry that can be applied to your business. And it doesn’t have to be a visual innovation - processes like customer service, fulfillment and order management can also have a profitable impact.

Video


Martin + Osa Shop-By-Outfit

  • Great to see items in context
  • Cross-selling entire outfits
  • Works for women who like to see how it looks “on”
  • Works for men who want to “get in and get out” and not waste time on browsing and outfit building
  • Helps the fashionably clueless
  • Blog post: Martin + Osa Launches Shop-By-Outfit + Video

Knicker Picker

  • See items “in context” (on humans)
  • Select size of model
  • See how sports product moves when the model jogs, show how supportive the item is - selling based on the function of a product

Gap.com Fit Finder

  • See what different cuts of pants look like on

Vitaman Global

  • Video-valet Nikki gives verbal affirmations when you add product to cart
  • Audible cross-selling, suggesting products that go with what you added to cart
  • Like a real physical store - kind of…
  • Blog post: Is Flattery a Viable Selling Strategy?

American Eagle

  • Now offline, but we blogged it: Video Valets: An Ecommerce Trend?
  • Net-lebrity iJustine tells girls and boys what’s cool for spring break, describing and “romancing” the products as you roll over them

Amazon.com Video Reviews

  • Very helpful for certain products
  • Problem: Used by viewers, but not contributed much by customers

TV.WineLibrary.com

  • Popular video podcast that doesn’t require big budget
  • Gary Vaynerchuk is a HUGE personality
  • Such helpful content, it’s very linkable, has active Facebook community, too
  • SEO smarts - each link to Gary’s video pages pass Page Rank to product pages, linked to from the video pages
  • Blog post: Anatomy of a Great Video Podcast

Customer Service

Coastal Contacts

  • Elastic Path customer, Coastal Contacts.com has a “Try Before You Buy” feature, you can order a few pairs and send back what you don’t want

Shoeline.com Return-O-Meter

Zappos

Why Zappos’ Customer Service is Innovative:

1. “The offer” get the right people on the bus
2. Prominent toll-free number
3. 24×7 call-center
4. Free shipping (both ways)
5. Free returns
6. Free (unexpected) upgraded shipping - shoes come faster than promised
7. No scripts, no call times
8. Find out of stock items at competing sites
9. Transparency - 350+ people on Twitter
10. CSRs have freedom to have person-to-person relationship. The famous example of Zaz Lamarr shares how a Zappos CSR sent flowers of sympathy on her own dime to a woman who lost her mom to cancer

Real World Guided Selling

Davids Bridal Dress Your Wedding

  • Interactive application to visualize your wedding photos - very appropriate for product

Oneida Virtual Table

  • Virtual table setting - choose table finish, dish and cutlery style

Crutchfield TV Fit Finder

  • Look up your TV to find compatible furniture, can work for any product that is sold for use with another product (car stereo, ink / toner etc)

MyDeco.com

  • Show physical arrangements of products, like Lionel Ritchie’s living room, or rooms that users have created
  • Choose your budget, and get product recommendations most appropriate for your budget
  • Slider narrows matches based on acceptable price range
  • Visual product recommendations powered by Imagini technology, click on images that stand out to you and see similar products based on your psychological profile

Land’s End

  • Has filtered navigation for bathing suits to narrow products by “Anxiety Zone,” - if you have short find suits that elongate the leg, etc.

Multi-Store Retailing

  • Coastal Contacts has multiple geographic domains (TLD like .com, .ca etc) which is great for international SEO
  • Avoid country-selector splash pages! Using IP redirect and forward to country specific site is better
  • Jason’s interview with Justin Skogen of DigitalElement on geographic IP sniffing
  • Netshops.com has hundreds of niche stores. SEO benefits: websites more apt to link to them, top level domain relevance
  • Jason’s interview with Roy Rubin of Magento about multi-store retailing

Gap.com

Steep and Cheap

  • Backcountry.com’s clearinghouse for deep discounted products, along with Chainlove.com sell one product per day until it’s sold out
  • Customer incentive to come back every day. If there’s nothing of interest, you can click through to clearance section
  • Creates a sense of urgency since product could sell out today

Shopatron.com

  • Shopatron is a service that eases the manufacturer - channel conflict, explained in Jason’s interview with Shopatron’s CEO Ed Stevens
  • Shopper makes a purchase, based on geographic location Shopatron assigns an order to nearest retail partner OR they can do in-store pickup

User Interface Design

AE.com

Action Envelope

  • Jason’s favorite site, here’s one reason why: mouseover a style and see deeper into site without clicking off the page
  • SEO benefit if implemented correctly

Endless.com

  • Hover over a product to view more colors - you’re missing out if you’re hiding colors!

  • Endless’ image zoom doesn’t cover price or add to cart buttons - great design

Borders.com

  • Borders’ “Magic shelf” shows book titles on a shelf that you can scroll left, right, up and down
  • Uses a degree of personalization if you sign in - just a different way to shop visually more akin to a real bookstore
  • Hover over items to see detail without leaving page you’re on

Abercrombie and Fitch

  • View details on “Complete the Look” cross-sells without leaving product page with AJAX hover

Navigation

  • OfficeMax’ alphabetical menu
  • Endless.com’s product carousel (scroll horizontally left and right)
  • Enldess.com’s price slider and color / size / width filters

Merchandising

  • Martin + Osa “layer your own look”

Social Shopping

Shoptogether by DecisionStep

Republic.co.uk

  • Using Polyvore, customers can build outfits, save the look and start sharing with the community

Vancouver 2010 Olympic Store


Shoes.com Customer Q&A

Customer Loyalty

  • Threadless uses a “crowdsourcing” business model, where customers suggest the products. You may not do this for every product but can think of which areas of your business to apply this to
  • Amazon’s Subscribe & Save program (blog post)
  • Amazon’s Gold Box Deals, products on sale for set amount of time until gone or time’s up. Subscribe to daily emails, add widget to your start page, by RSS, mobile via Twitter

Takeaways

1. Break it - Rethink old processes, like navigation, instead of following the leader. Test and try new things
2. Shoestring it - Don’t try to compete with multi-million site’s features (rich media etc) - think of Wine Library TV - the main cost is time. Or, leverage other 2.0 tools already made
3. Processes Count - You don’t need to modify visual things, you can do customer service innovations like Zappos, innovative policies or value propositions
4. Look to the real world - Helicopter seeds inspired the real helicopter. Think of how to replicate real-store experiences
5. Prove it, sell it - If you need to prove it to your bosses, just get your hands dirty in an innovation on your own (like a side project), then you can show some results which can be rolled out on the main site.

Question Period Notes

(These are notes, not a transcript)

About rich user interfaces - does single screen checkout make sense?

Jason talked to a retailer (Intuit?) that tested 95% regular vs. 5% one-page and found single didn’t convert as well. Intuit hasn’t moved fully to single screen but continues to test the process. Action Envelope is a good example of a one-page checkout.

Allurent and Liquid Pixels are service providers for RIA (rich interface applications), check out Jason’s Internet Retailer interviews with Allurent and Liquid Pixels.

Bernadine Wu from Fit For Commerce believes some innovations actually take a step back. You don’t need to use the newest trends you may be to use dynamic style sheet, which could have bigger impact on conversions than crazy, dynamic recommendation engines, for example.

Do RIA’s improve conversions? Testing tools for rich interfaces?

You could take traffic and filter through router to split test
Omniture Offermatica may have something relevant
A/B split test with Google Website Optimizer
Avinash Kaushik has a podcast on measuring rich media

Attendee comment: Woot is a Steep-and-Cheap style site which uses humor, not blah boring copy. Good point that people want to engage with people.

Innovative B2B sites?

Office Max navigation - whether that’s effective innovation, not sure.
B2B and B2C not that different these days, B2B may want to leverage preferred contracts or supplier lists or improve processes like order management.

Color innovation - do colors have impact?

It has a lot to do with brand, if you’re a multi-channel retailer you want some consistency. Testing is recommended. One thing to keep in mind, don’t make call to action button the same color as everything else.

International companies, how do you know when to stop or go?

Things that work in Asia/Europe might not work in North America, and vice-versa. Without geographical market knowledge, you’re taking a risk. Coastal Contacts uses richer color pallettes for Asian stores than US/Canada (oranges vs. blues). Also, countries used to higher broadband speeds may expect your site to work much faster than other countries tolerate - so don’t add something that will slow down your site just to be innovative.

via: getelastic.com

Labels: , ,



Saturday, June 21, 2008

Getting The Most From Design Deliverables

"That's a wonderful design. Now, write it up so development can implement it right away."

It seems there are some managers, (apparently from an ideal universe,) who believe, once a great design is hatched, a simple written document is all the development team needs to make it a reality. Unfortunately, for most teams, it takes much more work to communicate anything but the simplest of designs.

Designing the Design Deliverables

The design deliverables are a critical bridge between designers and developers. Both the documents and the process that produces and delivers them deserve careful attention.

We recently turned our attention to looking at how teams ensured they communicated the design ideas successfully to their development teams. Our research shows that teams lose many important details because of poor deliverables and a poor deliverable process.

The problem is compounded as the tools for interactions become more complex. As we see client-server interaction become more sophisticated and interaction capabilities, such as drag-and-drop, become richer, a simple "write-up" can't do the project justice. The most successful teams play close attention to the critical goals behind their deliverables.

Goal #1: Getting Everyone on the Same Page

In the ideal universe, the designers and developers would all go into a special room. They'd put on special helmets. Within seconds, every detail of the design that any team member had would be instantly communicated to everyone on the team.

In our universe, problems occur because the developers can't read the designers' minds. It's not that the designers are deliberately keeping important details from the developers. It's that, when you're neck deep in thinking about a problem, it's hard to know if you communicated all the details in your head.

Among those details that frequently get lost in the crossover:

  • The priority of the different design elements. Not every element in the design is equally important to the users' objectives. In the design process, the team works out the relative priorities. However, if all that developers have to work with is a screenshot or a rough design sketch, the priorities are lost.
  • Subtle interactions. Static images make it hard to show dynamic activity. It becomes more difficult when that motion is triggered by users actions that don't have corresponding visible controls, like a mouse-hover behavior.
  • The rigor of the design rationale. In the design process, some portions will be heavily discussed and considered by the team. They'll try out multiple iterations, hammering out the result. Once turned over to developers, changing these portions can upset a carefully tuned balance. However, other portions will remain unchanged from the beginning. The developers need to know there may still be more flexibility in these portions.

There are tricks to creating a deliverable process that gets these details across. For example, we learned from Keith Robinson at the Seattle design firm, Blue Flavor, that his firm creates a design priority document that describes, in priority order, each design element and how it works. As implementation issues surface, the document acts as a guide to making decisions.

To help communicate the more complex interactions in the design, consider delivering an interactive prototype along with the written description. Many teams we talked to use prototyping tools, ranging from paper prototypes to sophisticated Flash implementations, to show the developers how the design works. These prototypes don't have to be fancy, as they only need to show how the interface will operate when implemented. In fact, we're surprised how effective crude paper prototypes can be and how pleased the developers are to have them to work from.

One team we talked with uses a visual language to communicate the rigor of the designed features. Those elements they'd rigorously thought through were in regular text without any indentation. Those elements that hadn't yet received much consideration were italicized and indented. This simple, yet effective, visual language told the developers what they needed to know.

Other teams made sure they included a description of the testing process they've used and the rationale behind the finalized designs. Communicating the design rationale, along with the finalized design description, can help the development team maintain the integrity of the high priority elements throughout the implementation process.

Goal #2: Reducing Development Costs

In the ideal universe, every aspect of the design would work perfectly on the first implementation, without ever needing "redo" work.

As we talked with teams, we found many had been plagued by ideas that looked great "on paper", but didn't work so well when implemented. Sending the design back to the drawing board and the subsequent redo work involved increased development costs and slowed deployment. Anytime the team can find a way to reduce or eliminate these costs is good for the organization.

Many teams turned to low-cost, fast-implementation prototyping tools to help reduce costs. Again, these don't need to be sophisticated tools -- only something that quickly communicates the design's intent.

Having a working prototype is useful, but it's better when you have accurate use cases to work with. The teams with well-researched personas and scenarios found it easy to create their use cases, helping them validate their prototypes. By running the prototypes against the use cases, they could see where the design would hold up and where it fell flat.

When updating an existing design, a couple of teams used before-and-after images to help communicate the differences. Seeing the old design next to the new design, along with a clear description of the changes, helped the development team plot out their work.

Goal #3: Making Edge Conditions Explicit

Back in the ideal universe, you'll be happy to find out that users only take the "happy path" through the design. (The happy path is the easy, straightforward sequence through an application without any of the complications.)

Unfortunately, the happy path won't cut it for most real-world uses of the design. Instead, the team needs to clearly communicate the flow branches and edge conditions that could arise. Edge conditions are hard to visualize, making them an easy thing to miss when communicating the design to the development team.

Solid research is key to identifying the edge conditions that can pop up when using the design. Several teams established solid communications with the organization's support center, collecting up a list of the types of problems the support specialists were handling.

Other teams held "What Could Go Wrong?" brainstorming sessions, to imagine what happens when key information, such as account numbers or hard-to-remember personal information, was left out or incorrectly entered. (37signal's book, Defensive Design for the Web, is a great resource for brainstorming these types of problems.)

Of course, many teams used usability studies to identify the types of issues that can arise. However, a few others used some novel approaches, including rewarding team members for helping identify edge conditions. One team went as far as holding edge-detection parties, where team members competed to see how many different, unique edge conditions they could produce in a short time period.

One novel approach we turned up was the use of a "Values List" to help ground the designers and developers on the underlying values instilled in the design. These values might include "We don't want our users to feel stupid" or "If we can avoid an error message, we will." Having values help team members know when a little extra effort or resources might be the right way to fix a possible problem, instead of taking the easiest implementation.

One team produced a Contingency Q&A document, which helped them account for paths beyond the happy path. It posed questions, like "What happens when users leave the Headline Field blank?" or "What happens when they try to type more than 60 characters into the Headline Field?" Their answers went beyond the specifics and discussed the underlying rationale. (This would match up well with the values list.)

Creativity in Deliverables

In our research, the teams producing the most effective designs all had well-considered techniques for their deliverables process. They understood they weren't living in the ideal universe and dedicated the resources to ensuring they communicated design and its rationale to every member of the team. The results paid off with shorter development times and a higher-quality implementation.

Labels: , ,



3 Important Usability Challenges for Designing Web Apps

A benefit of joining the Hertz #1 Gold Club is a simplified experience for reserving a rental car. As a member, the web site remembers your billing information, frequent flyer preferences, and frequent cities you travel to, eliminating time consuming steps from the reservation system. This enhances customer loyalty, since busy travelers can make a reservation in less than a minute.

Unfortunately, our testing shows club members coming to the site to book a reservation frequently miss the optimized experience. When they are focused on their potential reservation, such as getting a quick price quote, they are very tempted to fill out the reservation form presented on Hertz.com's home page.

Yet, to take advantage of their club membership, the user has to skip the home page reservation form and, instead, log into the system. Logging-in, once the reservation process is started, requires restarting the entire reservation.

It's clear, watching these frequent customers, that, for many of them, the flow of the application (log in first, then start the reservation,) is not the natural flow they'd like to use. If they are intent on starting the reservation, they'll be stuck later on, when they realize their personal information isn't pre=populating the fields.

Matching the user's natural flow is just one challenge a web-based application developer needs to address during the design and development process. To help our clients, we've compiled a list of three challenges they'll want to keep their eye on.

Challenge #1: Finding the Application

Some web-based applications are very lucky. They are the only function provided by the site, therefore, they are easy to find -- usually right on the home page with nothing to hide behind.

Most applications, however, live within an ecosystem of other information and applications. For example, on your typical airline site, there could be dozens of self-service applications, from making a reservation to updating an itinerary to flight check-in to reward miles redemption. Some applications, such as checking flight status, may be used thousands of times each day. Other applications, such as requesting frequent flyer points for a missed flight segment, may only see a handful of users.

In addition to having many apps on the site, users also need to know what the application is called. Industry jargon and the propensity to brand everything can make it difficult for users to recognize their desired application.

A few years back, Disney.com offered customers a very cute Winnie-the-Pooh bear with a custom message embroidered on its belly, such as "Get Well Soon!" or "We Love You." In usability tests, customers thought the product was adorable and several of our users wanted to purchase one. Unfortunately, many didn't realize they needed to click the "Send a Pooh Gram" link to initiate the customization application. The link was cute, but not helpful for identifying the application.

To handle this challenge, we recommend clients regularly conduct usability tests of the site, to ensure users can find the elements of the entire application suite. Of course, they don't want to say, "Find the Pooh Gram Application." Instead, they'll need to be resourceful, with tricks like showing the user a finished product, like the embroidered doll, and ask, "How would you order one of these for your niece?"

Another great resource for developers, to ensure they've covered the right terms, is to look at the search terms used, both by referring search engines and the site's internal search function. By looking at the terms users enter, the team can get a good sense of the users' own language.

Challenge #2: Setting Proper Preparation Expectations

A major airline recently ran a satisfaction survey of passengers. Upon leaving the aircraft, flight attendants handed each passenger a card directing them to airline's site and offering a nice incentive for filling out the survey.

While many customers, interested in the incentive, started the survey, few finished, often stopping at a step requiring them to enter their ticket number (found on the boarding card stub). The survey users didn't realize they'd need this information and couldn't easily lay their hands on the stub when the site asked.

Many applications required the user bring something to the process, such as a customer number, a credit card, or a copy of their car title. When the application doesn't warn users up front to gather this information, it surprises them during the process, often causing them to consider whether it's worth the effort to continue. (This is compounded by their increased suspicion they'll be surprised by more unidentified required information.)

In addition to needing information, users are often surprised by the application requiring more time than they'd originally planned. Sometimes, this is because the application goes into more detail than the user realized.

Users expecting a fast interaction suddenly are pressured because the application requires more time, which they may not have available. If the early application steps don't set the proper expectations, a delightful experience can quickly become frustrating.

Again, usability testing can help here with designers paying careful attention to the expectations users form. Asking users what they think they'll need, both for auxiliary information and time requirements, before they start the task, can help see if expectations are clear.

Field studies are also useful to help identify the contexts of use. A team might discover, for example, that necessary receipts are unavailable because the user has already turned them in for reimbursement, requiring another validation method, such as online lookup.

Challenge #3: Matching the User's Flow

Hertz.com isn't the only one who has flow issues. Years ago, we were testing customers shopping on BestBuy.com. Most shoppers in our study studiously found their way through the checkout process to purchase their desired products, very happy with the entire shopping process.

However, a few Best Buy customers got to the very last step, where they site summarized the pending purchase and strongly recommended they print out a copy for their records. These users, feeling the recommendation made sense, complied and printed out the summary, complete with the order number.

Unfortunately for these shoppers, they weren't done with the order yet -- and didn't realize it. They'd thought, since they printed out a summary with an order number, the order had been placed. However, the application still had one more step, requiring the user to press a "Continue" button to actually enter the order into the fulfillment system.

These shoppers, with their "receipt" in hand, prematurely ended the checkout process, having never placed their order. Weeks later, when we followed up, they were very disappointed with Best Buy, having never received their order. Several told us they'd called customer support, who disavowed any knowledge of the order. While technically correct, this frustrated the users inexplicably -- after all, they had the printed receipt! (Of course, upon our discovery of the problem, the talented folks at BestBuy.com fixed this problem with an improved checkout process and were rewarded with a dramatic increase in sales.)

We discover flow problems like these by watching users interact with the application. We look to see if users fight the natural flow of the application, because it doesn't match their expectations or needs. This helps us understand how users may perceive the flow different from the design team, and can give us insight in how to attain meaningful improvements.

Labels: ,



Increasing pages per visit

What is the current goal of your website? For some, it is to increase the conversion rate. For websites that sell advertising on a CPM (Click Per Thousand) basis, the goal is to increase the number of impressions per user.

In CPC (Cost-per-click) advertising, advertisers pay for each click the ad receives. But in CPM-based advertising, the advertiser pays rate based on how many times an ad is viewed (impressions) whether the reader clicks on it – or not.


With CPM, the goal is to build those page views. This can be done by drawing more people to the site, and by improving the website so that viewers click to multiple pages during their visit. Besides being more profitable, both indicators also point to readers that are enjoying the site and its content.

How do you improve impressions? Here are 3 great ways to get started.

1. Highlight Related Posts.
Probably the best way to build impressions is to link to “Related Posts” in your website on each page, by matching tag, title and/or topic. Cross-linking introduces information related to the page that the visitor was interested in – which builds the impression count AND the visitor’s interest in your site.

2. Highlight What’s Popular.
Call out the posts and categories that are most popular on your site in a ‘hotspot’ area. Make sure that you are taking advantage of the website’s program to keep your hotspots dynamic. A good tip is to make sure that your category names are explicit; like “Cooking Utensil Reviews” or “Blog Promotion Tricks”.

3. Offer Many Ways to be Interactive.
Readers are loyal and spread the word about websites that engage them. You can create that interactive experience in many ways: make sure you have an RSS Feed for the site, actively react in your own Comments section to the responses people leave and offer an RSS Subscription Feed to the Comments, link IN your new posts to your old posts for examples and related commentary, and provide a Twitter or other Social Networking feed that can alert readers to a taste of new post .

Labels: , ,



Monday, June 16, 2008

The 5 Biggest Mistakes of Web Design

Your business needs a website. Here's a quick primer on how not to screw it up.

Anyone who faces the challenge of having a website built faces a very daunting task, indeed. You know your business needs a web site, or perhaps you need to rebuild what you've already got. Getting is right is a delicate balance of business objectives, usability for the web, and search engine promotion. Getting it wrong is what this article is designed to help you avoid.

Here are the five biggest mistakes you must avoid.

1. Not establishing objectives

Without a thorough plan to kick things off, what are you building? It's kind of like showing up at the airport one day and saying, "I'm going on a vacation." Where are you going? Where will you stay when you get there? How long will you go for? Can you afford it? Did you ask your boss for the time off? Did you shut off the oven?

To start, figure out what you want the benefits of your website to be. Forget about the bells and whistles required to make it happen; that's the job of your web designer. Establish what you want your website do for your business. Some examples: generate leads, sell your products/services right on the website, reduce administrative tasks, brand your company, pre-qualify prospects, recruit employees – the things a website can do for your company are virtually limitless. Establish your objectives and ensure that you and your web designer understand them fully.

2. Ignoring your customers

We're talking about your messaging here. It's so easy to write your content from an internal perspective. What you want to say, what you think is compelling, what you think matters. What about your customers? Don't forget that you need to convince them to do business with you.
The key to writing good, customer-centric content is to understand the "why". Why should your customers buy from you? You might think you know, but a good dose of objective research will uncover the truth. Capitalize on your unique selling proposition from the perspective of how it benefits your customers.

You will also need to use proper web style in your writing. Your content should be well organized, highly scannable, easy to digest, and to the point. If you can organize it in a "pyramid" style, even better. This is where the most important, compelling information is presented first, and deeper information follows (such as technical specifications). Depending on your strengths this may be difficult for you to produce, so you may consider hiring a professional writer or copywriter.

3. Forgetting the marketing

There is an old Kevin Costner baseball movie that has an analogy that is so clichéd I simply cannot bring myself to repeat it. In the realm of baseball and the afterlife it may be true, but in the world of the web, it sure ain't. When your website is built, it is an island; and a deserted one at that. Your customers don't know about it and neither do the search engines. You need to tell them. You need to market your website.

Getting your website noticed by the right people is key. You're not actually marketing to search engines here. Search engines are simply a means to an end. You need to market to your customers. You must understand that your customers use different online methods to find what you sell; and this most likely includes search engines.

You may also consider newsletter advertising, email advertising, PR campaigns, social networking, etc. The exact approach you need to take depends on your objectives, how your target audience looks for what you sell, your budget, your industry, etc.

4. Not measuring the results

So, how did you do? You built a great web site and marketed the heck out of it. How many people came to your site? How many became leads? How many leads did you turn into customers? How much were they worth? What content did your visitors like and not like? {Insert your own redundant questions here}

Just like any marketing venture, you must measure the results in order to find out if it was successful. I'm talking about things like:

A tracking plan. Your leads might call you instead of buying online or using your contact form. You need a plan to track them, and how they found you. If you're running offline marketing campaigns, setup a separate domain name, create a unique web page, or use a separate 800 number. Online forms specific to a marketing campaign can be really useful as well.

Statistics and reporting. Good statistics can tell you a lot about how people use your website. Google Analytics is a wonderful package, easy to install, and totally free. More than this, you need to understand the numbers, and draw conclusions. This takes quite a lot of practice and understanding. A professional web design or marketing company can help you with this.

Adapt. Use your results, don't just read them. This will invariably require consulting with an expert again, but you need to act on your results to improve them. This is an on-going process. Forever.

5. Getting Paralyzed

A lot of web design projects never see the light of day because they get mired down in perpetual planning. There comes a time when you need to act. You won't get it perfect the first time out (or ever), but you've got to move. If you aim, re-aim and re-aim forever, you'll never actually get off a shot. Aim – shoot – repeat.

A quick caveat: I'm not telling you to put up a poorly written and poorly constructed web site just to have something; that can be very dangerous. A bad website can turn customers away and, even worse, have them poison your business through negative word of mouth. What I am telling you to do is to not get paralyzed trying to perfect your plan. Hiring the right team of experts can get you on track, and get things moving.

Hopefully this article helps steer you away from the most common (and dangerous) pitfalls of web design. Whether you hire a professional, create your site internally, or do it on your own from start to finish, keep these tips in mind.

In Summary

By avoiding these five common mistakes you can ensure that your website has a fighting chance. Let this article serve as a map so you can avoid, at a minimum, some of the bigger and more costly detours.

Labels: ,



Huge Content Rich Websites for Profit

Here is the bare bone - no hype information and a link to the website I built using these techniques. So I not going to lie to you about how much money you can make or how much I made. Simply put, people are making money with these kinds of sites, I just want a piece of the action. This article assumes you have a basic knowledge of HTML, Google Adsense, and Affiliate Advertising.

We've all heard the phrases "Content is King" and "If content is King, then relevance is Queen!". So I'm going to share with you how to build a site based on these principles for profit! I built a 1000+ page content rich website in about 2 days. Check it out at http://articleupdates.com

Website Building tools:

I used DreamWeaver as my html editor. Any good html editor will work such as Frontpage. Go to download.com and search for "html editor". Coffeecup is a very popular free editor. Basically you need a good editor that will update links site wide automatically. Give you reports on broken links, and do search and replace site wide, file specific, and etc... Also very important is a good table building capability.

For the content I pulled articles from various free content sites. As long as you adhere to the terms of fair use, you will have access to thousands of content rich articles that you can put in your own website.

Get a simple clipart cd with 150,000 royalty free images from Bestbuy for $20.

Then plug in your affiliate codes for google adsense, clickbank, and commission junction.

You don't have to be an html expert. Just having some basic programming knowlege is enough. For example, understanding head, body, and building tables. Inserting variables and doing global changes. Any good html editor will help with that. You really need to become an expert at building tables. They are fast loading and can really make an impact on a site. If you are into css, even better!


Key Features for SEO: Keyword Rich and Relevant!

Building with SEO (search engine optimization) in mind. Use these techniques when building your site!

Niche Site: Pick a very specific topic. I chose "Making Money Online with Content Rich Sites" for this example.

Use a simple structure. Index page to "Index of Articles". Then "Index of Articles" to each individual article page. Two levels, easy to manage, easy to spider!

Make your site surfer friendly: No hidden pages, re-directs, pop-ups, spyware, java, or scripts. Just use ".html" files with text links to full text content rich pages which are also easily spidered with useful relevant information for the visitor. Include lots of articles including a few unique pages that you have written yourself.

Now start building your basic template for all the pages on your site. How you build your template will greatly depend on what editor and tools you'll be using. For example: most times you'll do something like Huge Content Rich Websites for Profit. When you go to build your 1000+ page site, the editor will replace the title tag with the appropriate text dynamically.

Title Tag and Description Tags and all other meta tags should be relevant and keyword rich.

Page Title
- Use relevant keywords on each index page to the articles
- Use the article title which will have additional relevant keywords for each article page.

H1 Tags - Keyword rich and relevant ex: "Make Money Online", "Home Based Business"

H2 Tags - Use the article title in the article pages. ex: "10 Ways To Make Money Online"

robot.txt file for spiders - just a simple two line file in your root directory
User-agent: *
Disallow:

Body text - Use content rich articles. Also use high color contrast between the text and the background so the search engine doesn't think your trying to hide anything and penalize you. Plus it's just plain easier to read. Use arial or verdana font.

URLs, File Names, and Directories - use the article title
ex: http://articleupdates.com/i-home-business/five-ways-to-increase-your-affiliate-sales.html

Inbound links: Set up link partners. If you can, have them place the link to your site using a keyword instead of the domain name itself. ex: Make Money Online Click Here.

Outbound links: Do the same for your link partners. Set up links using text that is relevant to their topic which should be relevant to your site but not competing if possible. If you sell computers, link to a company that sells computer desks.

Make same site links with relevant text. ex: "make money at home" will link to a page within your own site.

Make Image alt text use primary keywords. ex: "money online"

Add HTML comment tags that use primary keywords. These are not seen buy the surfer, but can be seen by search engine spiders. No one has proven this helps, but it doesn't hurt!

Now add money making adsense and affiliate links on every page. Put them top center between the article title and article content. Adjust the colors so that is blends in with your web page content.

Google adsense will pick up the page title, h1 and h2 tags to target the ad. When someone clicks on it, you get paid!.

Once you have these basic things set up in your template, you need to use a powerful tool called Article Equalizer. With a little practice, you'll be able to build 1000+ page websites in just a day or two. The link to Article Equalizer is http://hop.clickbank.net/?mark6188/articleeq

Another important thing you can do: Add dynamic RSS content by keyword. I'll follow up on this in my next article.


Top 5 most common mistakes with do-it-yourself SEO

I look at a lot of sites on a daily basis. There are a lot of common problems I see on sites. Some people may have tags set-up improperly or use tags that have no real purpose. I have compiled a list of the 5 top do-it-yourself SEO errors. It's safe to say that many do-it-yourselfers may have at least one of these errors on their sites. These should help you omit these often costly mistakes and pull you up in the ranks.

1) Keyword tag – A keyword tag is for keywords, but not for any keywords. You can’t just stuff this tag with keywords that your entire site is related to. The tags should reflect keywords only on that particular page; not the entire site and not every keyword you think your site might be searched on. Also, you should have no more then 20 words in the tag. You should not repeat any word more than 3 times. If you sell tickets, for example, don't write: Broadway tickets, circus tickets, hockey tickets, boxing tickets and so on. Do use Broadway, circus, hockey, boxing, tickets and so on.

2) Abstract tag – It is sometimes used as a replacement for or combined with a description tag. However, more and more people are using these to stuff keywords. Search engines like Google are interested in what is on the page. More specifically, what visitors can view. In my opinion, the abstract tag has no place on a site.

3) Description Tag – The whole point behind this tag is to describe what the “page” is about. Keywords related to the page should be implemented as well. The limit on words should be 20 – 25. I see many website owners stuffing this tag with keywords, or having a description that is entirely too lengthy. Stay within these guidelines and you will be fine.

4) Title tag – This, to me, is the most important tag. This is the first tag the search engine reads. It tells the search engine what the” page” is about. Don't put your web address here. Do not add your company name in the beginning of this tag either. It should not exceed 60 characters.

5) Content- If you notice, I have been commenting on relevancy to the “page”, not your overall site. Each page has it’s own keywords. Tag the title tag, description and keyword tags. All of these keywords should be the same. Add them to your content as well. Now your page should be fairly well optimized.

Why do sites fall short? Simple, content is not optimized. Search engines are, for the most part, pretty basic. You type in a search term and it retrieves sites containing those terms while also taking a few other factors into account. So, if your site doesn’t have these terms, how will you be found? You won’t. Over do it with keywords and you will experience the same result, but for different reasons. Sometimes reading everything about SEO can be bad. Trying too many tricks, tips or methods is like too many cooks spoiling the soup. In the end they can do more bad than good. These are very basic rules that should be followed by all. In, doubt? Always consult or hire an SEO professional.

Labels:



How to Improve Web Templates

The web is a complete group on interconnected computers discussion to one another. The computers are usually connected by land lines, modulator satellite signals, cables, and other types of data-transfer mechanisms. A 'data-transfer mechanism' is a way to move data from point A to point B to point C and so on. The computers that compose up the web can be connected all the time or they can be connected only occasionally. The computers that are connected all the time are characteristically called a server. Server software is formed to 'serve' web pages and web sites. Basically, the server computer has a group of web sites loaded on it and it just waits for people to request a particular page. When the browser requests a page the server sends it out. There are other ways to find web like search engine but behind the scene web sites are all being establish by going to the web site's certified address. Like your domain address is unique in the real world there also can't be any duplicate addresses on the Internet otherwise no one would know where to go! I have discussion few web design related tips

1: Website templates can be an admirable tool when building a new web site; a tool that can speed up the creation schedule, improve the feature of the final web site and just make the whole process of building a web site much easier. Out of this experience come web templates; web site designs that have been tried and tested. As a software designer and programmer, I can tell you that a hub rule in that field is to not reinvent the controls. This fundamentally means that if someone else has built it already, you should use it! You are wasting your time and money trying to recreate things from scrape. You can now select from a enormous collection of confirmed web site styles that you can use the web site template as the foundation to your own creation.

Web designers over the years have figured out the best technique to arrangement and design a web page. As such you're going to see mainly web sites work with the same handful of established designs and styles ... given a project's needs. The problem is that every person expects to see a web page layout go behind convinced basic rules; navigation sections have to be arranged in a confident way, links have to look a certain way. being dependable makes the web site easier for the visitor to use. The web site template serves as the structure for designers, where it eliminates the exhausting structural work and frees you to develop the refinement of the web site's style. With so several web site templates to prefer from these days, you are almost definite to find the essential style and layout you are looking for. You can then construct off of that, speeding up the process - makes good sense for you and your clients! Web site templates save you money and large time, the creation cycle of a web site project is at slightest cut in half when you utilize a web site template. An additional advantage of using templates is that you can show the web site designers what you want slightly than trying to describe it to them. The turn around is also true where the designer can show the client several templates that he/she can choose.

Labels:



Increase Your traffic with Professional Email Marketing

One of the most important things for a successful website is traffic. That might sound like an obvious point, but alot of people get lost in the technology and don't see the forest for the trees. Just traffic isn't good enough, it has to be defensible traffic. Something that doesn't dry up overnight just because you lost your top ten spot in Google.

There are four basic strategies to defensible traffic.

  1. SEO (Organic)
  2. Pay Per Click (Adwords etc)
  3. Referral (link building)
  4. Email

I have a whole chapter about these four strategies in my book, and number of posts about Joomla SEO here on the site. For this post I want to focus on email.

Offering something of value, and then engaging subscribers in permission marketing is a key part of a modern website marketing strategy. Examples might include:

  • Follow up emails from e-commerce purchases
  • Sequential lessons for a free online course
  • News and tips from a topic niche site

Obviously a key part of an email marketing plan is reliable technology. There are several email extensions for Joomla that I have reviewed, but the solution I use myself and recommend to others is to use a 3rd party hosted solution.

The benefit of a 3rd party solution is significant:

  • Your email will have a higher deliverability rate
  • Your IP is not being used to send the emails so cannot be blacklisted at the ISP level
  • The solution is usually more sophisticated with detailed statistics and autoresponders

Having also reviewed hosted email marketing solutions, for me the clear winner is iContact. We like this email service so much we actually developed an extension to integrate it into Joomla called J!Contact (you can download it for free in the download section).

Regardless of what technological solution you use, email marketing is a key factor in successfully building traffic to the modern website. Ignore it at your peril!

Labels:



Friday, June 13, 2008

What is the Google Dance?

As with any good web developer, the ability to time the changes Google will update your website and refresh the content for better SEO (Search Engine Optimization) is in your favor. Welcome to the world of “Google Dance”. The Google Dance is simply that the predetermination of when the actual update will commence.

What really happens is Google sends out spiders to crawl the Internet, usually done to DNS (Domain Name Servers), upon spidering all of the available tables it begins to go through each individual site and updates the content on to Google.com. Thus if you watch your rank on the Google Toolbar, you can tell when your overall page rank has changed.

Understanding SEO and what is necessary to improve your overall ranking. Webmasters have been looking for ways to increase the odds of guessing when the next spidering would commence. There are various versions and servers that go out and crawl thousands of servers at a time, it takes time to relay and decipher this information back to the web server that Google.com pulls its information from.

Some vendors have created programs that actually go out to the data centers themselves to find out approximately when the last index was kicked off. Depending on the information returned from the trace the exact time and date are pinpointed. Is there really that much of an advantage to doing it this way? It depends, if you have a vital update that you want to optimize your site, you may want to know when the last time Google visited your site for content to keep information fresh and relevant.

There are many data centers that Google uses to spider across the world. Each center has a specific region it covers and all the information is gathered in aggregate and returned back to populate Google.com. With this many data centers the chances for continuous indexing is good, but not guaranteed.


Thursday, June 12, 2008

Increase Your traffic with Professional Email Marketing

One of the most important things for a successful website is traffic. That might sound like an obvious point, but alot of people get lost in the technology and don't see the forest for the trees. Just traffic isn't good enough, it has to be defensible traffic. Something that doesn't dry up overnight just because you lost your top ten spot in Google.

There are four basic strategies to defensible traffic.

  1. SEO (Organic)
  2. Pay Per Click (Adwords etc)
  3. Referral (link building)
  4. Email

I have a whole chapter about these four strategies in my book, and number of posts about Joomla SEO here on the site. For this post I want to focus on email.

Offering something of value, and then engaging subscribers in permission marketing is a key part of a modern website marketing strategy. Examples might include:

  • Follow up emails from e-commerce purchases
  • Sequential lessons for a free online course
  • News and tips from a topic niche site

Obviously a key part of an email marketing plan is reliable technology. There are several email extensions for Joomla that I have reviewed, but the solution I use myself and recommend to others is to use a 3rd party hosted solution.

The benefit of a 3rd party solution is significant:

  • Your email will have a higher deliverability rate
  • Your IP is not being used to send the emails so cannot be blacklisted at the ISP level
  • The solution is usually more sophisticated with detailed statistics and autoresponders

Having also reviewed hosted email marketing solutions, for me the clear winner is iContact. We like this email service so much we actually developed an extension to integrate it into Joomla called J!Contact (you can download it for free in the download section).

Regardless of what technological solution you use, email marketing is a key factor in successfully building traffic to the modern website. Ignore it at your peril!



What makes a good website?

Your website should have a goal. A measure how how "good" the website is how successful it is in meeting that goal. The goal for an e-commerce site will be very different to a fan portal, but nonetheless, "good" websites share some common characteristics. In order to meet your goal:

* Viewers have to find your site
* Viewers have to be able to view it easily
* Viewers have to be able to find what they want
* Viewers must think your website is credible

There is significant overlap between these characterstics. The things that make a site easy to find are the same ones that make it viewable, navigable and credible. Let's take these characterstics one at a time and see what they mean.

Viewers have to find your site

Most people on the web find a website through a search engine. According to Nielsen//NetRatings over 5 billion searches were carried out in October 2005, almost half of these were using Google. Unfortunately "build it and they will come" is not true on the web. A website with no traffic stands little chance of aceiving its goals. Potentially the most effective way to get traffic is through Search Engine Optimization (SEO). SEO is the strategies involved in increasing a website's search engine ranking (SERP), where it appears in a search engine's results page.

Viewers have to be able to view your site easily

Many things can get in the way of someone trying to view your site for various reasons. Vewiers with vision impariments, whether blind, color blind, old or simply viewing the site on a PDA/mobile phone need well laid out web sites both in terms of organization (semanitc layout) and graphical (white space/typography). Viewers on dial-up or older computers might need sites that use little graphics or Flash. Many users for various reasons will browse your site with JavaScript turned off. All of these groups need a website that is accessible to them, and these viewers, according to some studies, can account for up to 30% of the population on the internet.

Viewers have to be able to find what they want

If a viewer can't find what they are looking for on your website easily, chances are they will leave and go elsewhere. Your website has to be useable. Studies vary in what they say about how long someone will take to figure out your website, but the figure quoted most often is about 8 seconds. More than 83% of Internet users are likely to leave a website if they feel they can't find what they're looking for (source: Arthur Andersen), and 58% of visitors who experience usability problems don't come back (source: Forrester Research).
Viewers must think your website is credible

Once they have found your site, and figured out how to use it, they need to stay on it. "When a site lacks credibility, users are unlikely to remain on the site for long. They won’t buy things, they won’t register, and they won’t return" (Stanford-Makovsky 2002).

What makes a site credible? In the same study Stanford/Makovsky found that the "Design Look" or the site's overall design or look accounted for 46% of a site's credibility. This included layout, typography, white space, images, color schemes, and so on. This was followed by "Information Design/Structure" (28%) or poorly the information fit together, as well as how hard it was to navigate the site to find things of interest.

Many of the factors involved in being credible are the same for being accessible and usable.