Posts Tagged ‘Web Design’

See if your website is optimized for high search engine rankings

6.2.2010

Search engine optimization (SEO) is a key part of any successful website because most internet users will find your site via a search engine. It’s a good idea to check your site to see if there are any areas you could easily improve in order to maximize your search engine rankings.

There are two tools I like to use, both free, shown below. It is unlikely that you will get a perfect score, so don’t fret if your score is low the first time. Some factors that impact your score are out of your control, such as inbound links, retweets, etc. The key is to improve as much as you reasonably can.

In each case, the tool will grade your site based on criteria that are important for high search results. From that, you can make a to-do list of improvements. I suggest working on the “low-hanging fruit” first – if there are any easy changes, do those right away. Then, you can consider the more difficult tasks and weigh out their relative importance for your particular site.

I’ve shown some examples below for my own site. In each case, I spent about an hour making small improvements, but there were also several things that I don’t plan to do, or can’t reasonably do. For example, I don’t plan to list myself in Yahoo!Directory because I do not need the additional marketing boost, so my $299 could be better spent elsewhere.

So, take a moment to grade your site and see where you can make easy changes – every little bit helps! :)

Website Grader

Before: 78
Interim: 81 (domain name renewal not included)

SEO Warnings:

  • The domain for this website is set to expire in less than a year [Fixed]
  • Permanent Redirect Not Found for designedbykrista.com to www.designedbykrista.com [Fixed]
  • designedbykrista is not listed in the Yahoo! Directory. [Um, yeah - like that's gonna' happen at $299 a pop...]
  • We could not find a Twitter account associated with your website. [Fixed]
  • The web page does not seem to contain any type of signup form where visitors can subscribe to a newsletter or future updates. [Imagine Dana Carvey saying, "Not gonna' do it..."]

SenSEO Firefox Addon

Before: 85
After: 93

SEO Warnings:

  • Meta Keywords: use only keywords found in content of page [Fixed]
  • Too many meta keywords – keep it to 10 or less [Fixed]
  • Use Robots declarations to control Search-Engine access. [Fixed]
  • Use H2 and H3 tags. [Fixed]
  • Domain should include all keywords. [Don't I wish...]

Usability: Don’t hide your login

5.27.2010

Today, I had a “what not to do on your website” moment. I’ll note the lessons I learned, and then you can read on for the whole sordid tale.

Usability Lessons:

  1. Don’t make your newsletter subscribers login to unsubscribe – they just want to be free!
  2. Place login tips very close to login error message. This gives the user the information they need (how to troubleshoot login issues) when they need it (they have a failed login attempt).
  3. Make your login prominent. Ideally, it should be in a standard location, typically a “Login” link or a userid/password box in the upper right corner.

Sordid Tale:

I was trying to unsubscribe from the email newsletter of a reputable company. I clicked the unsubscribe link and was taken to a login screen. I’m already a little bummed out, because I want unsubcribing to be just one or two clicks, without having to remember my  userid and password. It asked for my email address and password. I typed my email address and password and I got an error. I tried a couple other password variations, and I still got an error.

I tried clicked the “forgot password” link, thinking, “This is really becoming a hassle!” I typed my email address in the forgot password form. I got the following error: That email address is not on file.

Um… what? I mean, the only reason I came to the site is to unsubscribe from an email newsletter – I know that they have my email address. I was mystified.

I thought maybe I could login through the home page and went to the home page. I could not find the login on the home page. Really -  you can look for yourself, to the right. Note: It is not the “Account Access” link in the upper right – that’s only for event organizers, and I am not one.

Giving up on that, I went back to the email and clicked the unsubscribe link. I finally noticed a link “I can’t login” at the bottom of that form. I clicked on it to find out that they have converted their login system and I needed to update my account. “Whew!” I thought, “At least I know what’s going on.”

I converted my account, at the end of which process it asked me to login. I clicked continue and was taken back to the home page… and I still couldn’t find the login link! I finally went back to the email newsletter, clicked the unsubscribe link and was taken back to the login form. I logged in and saw the “manage your subscriptions” page. I think I heard angels singing in the background….

Although, I still don’t know where login is.

Use longer hyperlink text for better web usability

5.7.2010

Web usability expert Jared Spool recommends that you make your hyperlinks 7 – 12 words long for optimum usability. Now, I would have thought links that long would be too hard for users to scan easily, but his research has shown that users are more likely to find what they want on your site if you have just a few more words within your links. Why?

Graph from User Interface Engineering, (c) 2007

Success Rates are best if Hyperlinks are between 7 - 12 words, Source: User Interface Engineering

Users will come to your site looking for something – let’s say it’s a woman looking for a shirt to wear on a beach vacation. She will have some term in mind for this item – maybe “beach wear” – and she’ll be looking for that word on your webpage. We refer to this as her “trigger” word.

What are the chances that you will happen to name your women’s shirt section “beachwear”? Well, if you are only using 1 – 6 words in your link, such as “Ladies Shirts” the chances are low! However, if you are naming things a little more specifically, such as “Women’s Wear for Beach, Lounging, and Casual Day at the Office” – there is a much bigger chance that any given user will spot their trigger word in that link.

However, my initial reaction (short links are more scannable) was not completely off-base – it turns out that links which contain 13 or more words tend to be overlooked, because they are now too long to be scanned quickly.

Quick Review of 27 Open Source E-Commerce Applications

3.23.2010

I just finished an in-depth review of 8 PHP/MySQL ecommerce applications, but I started with this list of 27 ecommerce applications. Read on to get a quick comment on each shopping cart. The following applications were recommended through various internet sources, listed at the bottom of this post.

Name Try? Reason Cost
Agora Cart No Written in PERL
Avactis No Amateur, uses old or deprecated html $299
Batavi Maybe Fork of osCommerce, BUT completely rewritten (good)
Boss Cart No Not enough reviews available $330
cpCommerce No No longer supported
CRE Loaded Maybe Fork of osCommerce
CS Cart Yes Love it. So many features available, fast response
time, free addons, cool interface
$285
CubeCart No Security audits are great, but lacks common features $180
DashCommerce No Uses .NET; site was down when I visited
digiShop Yes File structure & code "clean and easy to
understand"; interface is more “staid” than CS-Cart but has slightly more features. Bit of a blah front end.
$799
Digistore No Not enough reviews/td>

Interspire No Also known as BigCommerce (HOSTED), Shopping Cart; SEO, templates = good; Product options and costly upgrades = bad $1,800
Magento No Slow, Administration complicated, recommend dedicated server
Miva No slow, bloated, custom scripting language
OpenCart No Similar to osCommerce – have to install a plugin for basic features, plug-ins tedious to find.
osCMax No Fork of osCommerce
osCommerce No Hard to support, customize; upgrades too infrequent.
PHP Shop No No longer active
Prestashop No Uses CSS, OOP, and no non-semantic tables, however, it’s just NOT ready for bigtime. Might as well stay with osCommerce…
Shop-Script No Limited features, though it does use smarty templates, Authorize.net certified $299
ShopSite Pro No Written in C, affiliated with BlueHost; HOSTED cart? $1,295
StoreSprite No Not enough reviews
SunShop Yes Div based layout, good SEO, responsive tech support $189
UberCart No Built for Drupal
VirtueMart No Built for Joomla
WP
eCommerce
No Built for WordPress (good), but not a full-featured store
(bad)
X-Cart Yes Smarty templates, few/no bugs; Don’t like how you
have to search for everything vs. just having a scroll-thru list
$575
Zen Cart No Fork of osCommerce, stable, "too much code to wade
through"

Sources

8 Open-Source E-commerce Apps Reviewed

3.12.2010

I standardized on osCommerce for all my clients in 2006, and have become steadily LESS satisfied with that product ever since. In fact, I have recently stopped a project that is near to roll-out because I just can’t bear to have another client on this shopping cart. Instead, I’ve been reviewing popular and well-rated shopping cart software applications, and I have some preliminary results to share. I’ll have more details soon, including an in-depth feature comparison for the top 8, and a way for you to rate it yourself! If you would like me to email that to you in Excel right now, just post a comment and I’ll send it out.

Top-rated: CS-Cart, digiShop

These ecommerce apps really had the “wow” factor. So many valuable features are in the base package, the price is reasonable, and the support is great.

Still Good, but don’t quite cut it: SunShop, X-Cart

These shopping carts had a lot going for them, but were missing some key features. Mainly, they would be decent options if I didn’t have anything better. (but I do)

No, thank you: CubeCart, OpenCart, osCommerce, PrestaShop

These carts are mostly free, which is always nice, but you will more than pay for it with the amount of headache. A number of important features are not in the base package, which means you (or someone else you may have to pay) must find and install a plug-in for it. If I was really trying to save money… I’d go with CS-Cart. If you can’t raise $285 to buy a cart for your business, you should strongly consider using eBay, etsy, or some other free option.

Cart Cost My Score My Thoughts
digiShop $999 160 Nice!
CS-Cart $285 153 Wow!
SunShop $549 135 Decent, but not as good as my top 2
X-Cart $115 127 Decent, but not as good as my top 2
CubeCart $180 125 Hassle to find plugins
PrestaShop - 111 Not ready for the big-time
OpenCart - 82 No thank you
osCommerce - 59 Forget It.

(more…)

Favorite Free Font Sites

2.17.2010

Taking a moment away from more serious pursuits to note my favorite places to find free fonts. These are great for personal use: cards, brochures, scrapbooking, etc. You have to take care when using any of these for commercial purposes – sometimes it’s not allowed and sometimes you just need to get explicit permission and/or pay a little extra. Tips below on how to install these fonts for use. Have fun!

deviantART

Lots of cool, edgy, grungy fonts here. Great for Adobe Photoshop brushes as well.

18 Custom Cool Fonts

Chosen by You the Designer. There are only 20 fonts, title notwithstanding, but they are all very cool.

Divide by Zero

Created by Tom Murphy: Fun and quirky fonts, plus a font making tutorial.

1001 Free Fonts

The fonts are categorized by type, and you can get a commercial license for 10,000 fonts for just $20.

dafont.com

More free fonts, similar to 1001 Free fonts, but I like the site and selection a smidge better because new fonts are added frequently.

How to install your fonts

Download the files and then unzip them.

Windows Vista: Right-click on the font files and click Install
Windows XP: Copy the font files into C:\Windows\Fonts
Mac OS X: Double-click the font file, then click the Install font button.

Getting what you pay for in web design

2.15.2010

The following quote is often attributed to John Ruskin, but that is currently in dispute. However, it’s tough to dispute the meaning of these words – a more elegant way of saying that you get what you pay for. What does this mean for web design? It means that saving money is about trade-offs, and I’ve compiled a list below to help you weigh these out for your web project. In some cases, the trade-offs are worth the risk, perhaps because you are a non-profit or just starting out your small business. There is nothing wrong with this, because you can always upgrade as funds become available, but knowing what you’re getting can help you make the best choice at your budget level.

“It’s unwise to pay too much, but worse to pay too little. When you pay too much, you lose a little money; that is all. When you pay too little you sometimes lose everything, because the thing you bought was incapable of doing the thing it was bought to do. The common law of business balances prohibits paying little and getting a lot. It can’t be done. If you deal with the lowest bidder, it is well to add something for the risk you run. And if you do that, you will have enough to pay for something better.”

Risks of Paying Too Little for Your Website

Do-it-Yourself: You may have to do all or much of the work yourself. This can work if you are technically savvy and you have reasonable writing skills.

Templates: Most websites in the $200 – $500 price range are built using pre-made templates. This means that your site will not be perfectly unique, but it can still be very serviceable. Watch out for search engine ranking problems, though. (see below)

Inexperienced Designers: If the hourly rate of your web designer is very low, he or she may possibly be just out of college and can’t demand any more. Everyone has to start somewhere, though, so just do your best to make sure the person sounds like they know what they’re doing and that they have a good work ethic. It may not be worth the risk if you have complex programming needs on your site.

Language Barriers: Off-shore web developers are becoming more common, and usually offer attractive pricing. If you are satisfied that they are experienced enough for your project, you must decide if a non-native speaker can write effectively in your language and if you will be able to understand them even when discussing technical issues.

No Search Engine Optimization (SEO): Many low-end websites are not constructed with search engine rankings in mind, and this is detrimental to your site, especially if you are running a for-profit business. Does the template or developer use a lot of tables? Is key text, such as your company name, shown only as an image? Is the browser’s title bar show just your company name, or worse, just a generic term like “Home” or “Welcome”? If so, you are likely to get low search engine rankings.

Websites that don’t work: Broken links, misspelled words, missing images, and random error messages all detract from your professional image, and usually make your users go to another site. If you choose to work with a low-end provider, make sure to do a lot of testing yourself to try to prevent these things from the outset.

2010 Conferences for Web Designers

2.4.2010

Conferences are great for networking and keeping up to speed on technology. Don’t you find, though, that it’s hard to actually take a step back from the designing and coding to go learn about designing and coding? :) I made it my goal this year to break away and get to a conference, and I reviewed several great options online. See the dates and cities below, along with my impressions of each from their websites. Did I miss any good ones? Let me know!
UPDATE, 2/18/2010: I found some more to add, courtesy of SitePoint, listed below…

Adobe Max, Los Angeles, October 24 -27

Impressions… Focus on Adobe products (understandably). Personally can’t afford to spend this much time on all Adobe. To repeat a quote I heard recently: “Real developers use notepad!” :P

An Event Apart, Seattle, April 5 – 7 (other cities offered)

Impressions… Corporate, perhaps even stuffy, though I would love to be a fly on the wall to hear Microsoft Product Manager’s topic: Microsoft: Help Us Kill IE6. I’ll do my part, Pete!

A Day Apart, Seattle, April 7

Impressions… Spend a day getting the latest on HTML5 and CSS3. Can I say goodbye to Verdana and Tahoma? I may attend just for that!

Future of Web Apps, Miami, February 22-24

Impressions… Cutting edge, beach parties and so forth; focus on application development.

In Control, Orlando, February 22-23

Impressions… Good coverage on a wide range of topics; perfect for a freelance generalist such as myself. *my choice*

Internet Week, New York, June 7 – 14

Impressions… Can’t tell, because the schedule is not online, but I don’t think I could do any conference for a whole week: overload!

MinneWebCon St. Paul, April 12

Impressions… Focus on education, though the topics seem to be a great overview in one day.

Microsoft MIX10, Las Vegas, March 15-17

Impressions… Not as product-centric as I expected, but probably still not for someone (like me) who is determined to remain product-agnostic…

SXSWeek, Austin, March 12-21

Impressions… Focus on music & film.

Usability Week, Various cities/dates

Impressions… Focus on usability.

Web Directions, Atlanta, Date TBA

Impressions… Based on a brief look at past events, seemed high on theoretical, low on practical.

WebVisions, Portland, May 19-21

Impressions… Only 1 of 3 days are currently scheduled, but what is there looks intriguing: HTML5, CSS3, iPhone Apps, and Photography tips.

International

I can’t justify heading off to New Zealand or London, as much as I would love to, but here are some International web conferences if these countries are closer to home for you.

Boost your ecommerce online sales

1.7.2010

A recent study of customer satisfaction shows that the most important factors for your customers are perception of price, appeal of merchandise, website functionality, and product information. Foresee Results performs an annual survey of large retail websites to analyze customer satisfaction, and you can learn from the experience of large “e-tailers” like Amazon, Netflix, and Apple – the leaders in ecommerce customer satisfaction. According to this study, improvements in these four areas increase the likelihood that your customer will purchase now, purchase again, recommend your site, and become loyal to your brand. Who wouldn’t want that? See how you can improve your ecommerce conversion rate by making changes in these four areas.

Price

Price became a top priority factor for customers this year, likely due to the recent economic downturn. Obviously, everyone likes low prices and deals, but note that the actual price was less important than the customer’s perception of the price. Does your pricing and shipping seem fair and competitive to your customers?

Merchandise

In the past, the appeal, variety, and availability of stores’ merchandise has been the primary determiner of customer satisfaction. This year, it is still a top priority factor, though slightly overshadowed by price. Do your products seem fresh and appealing to your customers? Are they in stock when your customers want them?

Website Functionality

Functionality seems to be the first area that business owners try to work on for improved conversion rate, and it is indeed important to maintain or improve in this area. However, the study results indicate that merchants will get a better return on investment if they focus on pricing and merchandise, while not losing ground in functionality. Is your website convenient for your customers to use?

Content

This element refers to the accuracy, quality, and freshness of information on your site. Customers value quality information about your products, so you must continue to provide it, but it’s probably not necessary to make this a major focus for improvement. Do you give your customers the information they want about your products?

How customer satisfaction impacts ecommerce success
ForeSeeResults US Holiday Retail Satisfaction Index, 2009

Make it easy for clients to file your contact information

9.3.2009

In the late 1900’s, the Internet Mail Consortium came out with an electronic business card format called “vCard.” Because this format is widely supported by email software, such as Microsoft Outlook, you can use the vCard file (ending in “.vcf”) to save all of your contact information and pass it along to your customers and clients. Once you create your vCard (instructions below), you can either attach it to an email message to your client or post it on your website (or both). When your client opens the file, it will automatically be added to their contact folder or address book.

How Do I Make a vCard for a Website?

  1. In a Contact folder, create and save a contact with your name, title, company name, etc. You may also want to add further information about your business in the “Notes” field, such as the services you offer and benefits of doing business with you.
  2. Click to select the contact you just saved.
  3. On the File menu, click Save As.
  4. Optional: In the File name box, remove all the spaces in the file name: this will make it easier to link to this file later on.
  5. In the Save file as type box, click to select VCARD Files (*.vcf).
  6. In the Save In box, select the folder where you want to save the vCard file, and then click Save.

You can send the vCard file as a file attachment in any email message – just insert it like a regular attachment, and when your client opens it, your contact information will be added to their address book or contact folder.

How to Present a vCard in a Website

If you have a web server, or web-hosting, you can also upload that file to your website. You can use any FTP client to do this, or (if you use BlueHost) you can do this via your cPanel File Manager – just use the Upload button on the File Manager toolbar. You would put it somewhere within the public_html folder. Then, you can add a link to the file to your email signature block and even to your Contact Us web page.

Example: <a href=”http://yourdomain.com/vCards/YourName.vcf”>Add my contact information to your address book</a>.
Looks Like: Add my contact information to your address book

If your file just opens up in plain text, you may need to do a few extra steps.

  1. Create a folder for your vCard file on your webserver
  2. Move the vCard file to that folder
  3. Create a blank, text-only file called .htaccess and add the line  AddType text/x-vcard .vcf
  4. Save the .htaccess file to the vCard folder you created

NOTE: This file is not secure, therefore anyone who discovers it on your website will be able to have your contact information. Thus, I would not put anything in your vCard contact unless you are also willing to put that information on your public webpage.