It’s called Sitebeam, and I’ve been using the original version as well as beta testing their new version that’s going to be released sometime very soon. Both rock. The new version is definitely better than the current version, but since the current version is the one that initially impressed the heck out of me, that says a lot about how great both are.

Ok, so I’ve been using this tool to improve one of my sites. I’ve run the tool, made note of things it finds problematic, fixed those things, rerun the tool, etc. – several times over the course of the last few weeks, until I’ve gotten my site in excellent shape. I still need to work on some external factors (backlinks and social shares), but I’ve pretty much nailed the onsite factors.

Without this tool, I’d never have noticed so many things that needed fixing. I’d already been spending a ton of time making that site better, so I thought I’d covered everything really well. Then I ran this tool on the site for the first time, and thought to myself, “Oh how did I miss that? And that? And that!!!”

So, enough of the backstory, let me show you some screenshots. I’ve blurred out some text to avoid giving out too much information about the site I’ve run this on, for competitive reasons.

Let’s start with the screen that shows up immediately after running a test. This amazing summary screen is shown, with links to all the details to the left.

Here’s a look at one of the summary sections, in this case, the marketing summary for my site.

This shows some details about the social interest (or lack thereof) of my site. Yes, I really need to work on this still.

I love the fact that I can compare my site with my competitors. This helps me see what areas I’ve fallen behind in (only trailing my competitor in marketing, in this example).

In the blink of an eye, the tool can create an entire powerpoint type presentation from the test results. If you are looking to get new clients, this is a great way to pitch them. Just show them a presentation that lets them know exactly how much work their site needs, all in beautifully laid out graphics that you didn’t have to create yourself! Have you ever tried to put a powerpoint presentation together? It’s a huge pain in the caboose, if ya know what I mean. To have a tool automagically create this for you is unreal, and highly exciting.

I could wow you with another 20 or so screenshots, but that wouldn’t be nearly as effective as having you see it for yourself by testing your own site, so go do that now, if you want.

The tool is a little pricey for the average solo site owner, though it won’t break the bank, but you can run the test for free to try it out, so I highly recommend you do so. And if you do any design or seo client work, this tool is well worth the cost! You can use the tool to woo clients, by showing them what could be improved, and you can prove your worth afterwards by showing new reports with improved scores.

Is the tool 100% perfect? Nope, probably not. I’d say I probably slightly disagreed with it on a couple of issues, but that’s not unusual. Get any two people in a room and ask them to grade a website. Think they’ll agree 100% on everything? Not likely, so I’m not surprised that I didn’t agree completely with a tool. Nevertheless, my differences with the analysis were pretty minor, so it didn’t diminish the value of the information I got from it at all, in my opinion.

I’m really excited that I found this tool, so let me stress again – go run your site through the free test. You’ll be happy I pushed you to do it!

Still not convinced? Really? Ok, check this out then. Here’s a full list of tests that are run:

• Alt text
• Amount of content
• Analytics
• Broken links
• Contact details
• Content keywords
• Design variations
• Error pages
• Facebook
• Flash
• Freshness
• Headings
• Image usage
• Incoming links
• Internal links
• Internal search
• Languages
• Links
• Link states
• Metadata
• Outgoing links
• Popularity
• Printability
• Readability
• Redirections
• Search engine results
• Search ranking
• Site structure
• Social interest
• Speed
• Spelling
• Spiderability
• Stylesheets
• Twitter
• Typosquatting
• URL chopping
• URL format
• Visual interest
• W3C compliance

The new version lets you create various types of reports, including a Comprehensive report like the one I showed above, a Sales report, which is a complete report but with less detail (perfect for sales pitches), a Staging report to test a site before it goes live (ignores tests for backlinks, social media etc. since the site isn’t live yet), a Marketing report to assess SEO and social media, a Social Media report, a Writing report, a Technical report, a Privacy report, and even a custom report that lets you mix and match any of the tests into one report.

What are you still doing here? Go run a test on your site using the current version, and then get more info about the new version being released soon.. Go!

© Donna for DazzlinDonna, 2011. | Permalink | 10 comments | Add to del.icio.us
Post tags: SEO, Usability, website grader tools
This feed is for personal non-commercial use only. If you are not reading this in your news aggregator/reader or on DazzlinDonna, then the site you are looking at is probably infringing upon my copyright.

For those of you new to crowdsourcing, it’s something that you may want to look into if you need work done and want to save some money. It simply means the job you need doing is farmed out to a community of workers rather than one particular company. A good example would be if you needed a designer. Instead of putting your “eggs in one basket” so to speak, by going to one company, you could go to several design options from multiple designers. So why in the world would they do this? It is a golden opportunity for them to show their capabilities and hopefully put them above the competition. Basically it comes down to a competition and in this case, may the best designer win!

Here are just five of many sites that allow for these types of competitions.

1. Prova

Here the small time business can submit their design ideas for almost any medium they want. Perhaps for mugs, sweatshirts, personal gifts, gift certificates. The site doors are open for the customer here as well. They can submit audio books and other items they feel are competitive. It is a community of its own and perhaps has a higher social level than the others. Competitors who win the contests here will be promoted by the site as well as the customer who bought the services.

2. 99designs.com

Probably for newcomers to crowdsourcing this is the best site to resort to because it has become so popular. It is easy to use which probably puts it a step ahead of the others. All the customer has to do is enter a brief asking for a design in categories such as themes for wordpress, background for twitter or even web design to name a few. Included as well can be merchandise designs. It has a money back warranty of 100%. With such a large community base it is perfect for the customer because there will no doubt be numerous designs to be able to choose from.

3. GuerraCreativa

Relatively new and only has about 10,000 designers ready to enter a contest. This site will only accept briefs for designs but will include 3D or flash. Has a money back guarantee and if you are in need of this type of service then its worth checking them out.

4. CrowdSPRING

This Company is pretty impressive and boasts of a few awards that they have such as the Stevie Award for 2009, and the ITA CityLights. They are also known to have some pretty heavy hitters as customers such as SmugMug for example. There are a lot of brief options here to run contests on. For example graphic design, web design, industrial designing and even writing assignments such as product or company naming. There is valuable talent to be found here, with a community of 65,000plus. There is no risk based on the money back guarantee.

5. DesignCrowd

This site is a smaller version perhaps than some of the others with fewer competitors for a project. They also offer fewer categories to submit a brief and run a contest for. They do have several design categories. The money prizes are not all that great but the bottom line of what the work is worth is up to the customer. The problem here though is that low budget contests are not going to draw the attention of high quality designers. It will basically come down to getting what you pay for.

So as you can see these are just a few crowdsourcing sites that you could really take advantage of if your dollars for your business are tight right now. It is a least worth giving it a try, as you could end up with some amazing results.

This post was written by Lior who is a consultant for a task management start-up and also works with Milk Nursingwear, a nursing tops company.

© guestposter for DazzlinDonna, 2010. | Permalink | 2 comments | Add to del.icio.us
Post tags: Crowdsourcing, web design
This feed is for personal non-commercial use only. If you are not reading this in your news aggregator/reader or on DazzlinDonna, then the site you are looking at is probably infringing upon my copyright.

Things I Like About The Site

1. Giant phone number in the header. You can’t miss that call to action, now can you?

2. Map to the location to make it easy to find them – again right there above the fold, and in your face.

3. Menu that can be downloaded and printed out – again displayed prominently.

4. News feed, showing what’s going on, when they’re closed, what new items are available, etc. is great.

5. Reviews are great. That always makes a new potential customer feel more comfortable about ordering from you. Prominent position; good job.

Things I’d Change

1. Break up the paragraphs of text on the home page. Use headings for emphasis. For example, I’d use a big heading such as “Why People From Lancaster, Calgate and Morecambe Love Us, and then explain about their quality meat and fresh produce. A sharp photo of that high-quality food wouldn’t hurt either.

2. The ingredients list is a little weird. While I am a fan of tag clouds, it doesn’t make as much sense in this situation as it does in others. Clicking an ingredient takes you to a page showing the various meals offered that use that ingredient. It’s “kinda cool” but “kinda odd”, you know?

3. Hours of Service is preceded by a heading that says “Oriental Cuisine”. Huh? The heading should say “Hours of Service” or “When We’re Open” or something related. Sure, they do serve oriental cuisine, and that should be somewhere – but just not as the heading over the service hours. I’d also expect those hours to be a little more noticeable.

4. Subscribe for Offers list signup is a good idea, but I’d like to see a little more explanation to really convince the visitor to sign up. What kind of offers? Sell me on the really great deals I’ll get right in my email inbox, if only I’ll let you have my email address.

Summary

All in all, I really like the way this site has presented nearly everything I’d want to know right on the home page. I don’t have to work hard to find the information I need. My only real beef is that they could do a slightly better job of making a few things stand out, and really sell me on how awesome they are. But I like the site, and if I didn’t live 4,422 miles away, I’d place my order right now.

© Donna for DazzlinDonna, 2010. | Permalink | 11 comments | Add to del.icio.us
Post tags:
This feed is for personal non-commercial use only. If you are not reading this in your news aggregator/reader or on DazzlinDonna, then the site you are looking at is probably infringing upon my copyright.

DOH! (Can you see my forehead hitting my desk right about now?)

Luckily, it’s only been a week or two (who remembers) since I uploaded the new site, so I quickly looked through the checklist once I remembered I had it. Want to know what I noticed? The same 5 things I almost *always* forget to include were the ones I forgot to include this time as well. Oy.

Ok, so, just in case there’s some kind of weird synergy between you and I, and you always forget the same 5 things when you create a site, here’s my abbreviated checklist (which of course is nowhere near as comprehensive as the one I listed in the first sentence of this post).

Robots.txt file

A default robots.txt file that allows search engines to index every page should look like this:

User-Agent: *
Disallow:

Actually, if you just want everything indexed, there’s really no need for a robots.txt file, since “Index Everything” is the default if robots.txt doesn’t exist. I usually include one anyway, just to cover all my bases. I often follow the “just in case” method of site building.

Don’t get confused and accidentally add a / after Disallow: If your robots.txt says Disallow: / (note the /), then you will be preventing the search bots from indexing your entire site. Very very bad.

There are lots of different things you might want to exclude with a robots.txt file, but here’s the most common (sample directories, substitute yours as needed):

Exclude certain directories

User-agent: *
Disallow: /cgi-bin/
Disallow: /tmp/
Disallow: /junk/

You can generate a custom robots.txt file with a tool like http://tools.seobook.com/robots-txt/generator/ (Note that this tool will automatically default to Allow Everything, as soon as you load the tool).

TIP: Your robots.txt file MUST be in your top-level web (root) directory, not in a subdirectory.

For more info about what a robots.txt file is all about, go to http://www.robotstxt.org/robotstxt.html.

XML sitemap

In some ways, an XML sitemap is exactly the opposite of a robots.txt, in the sense that it is designed to make sure the search engines know which pages on your site you want them to index. It provides more information than just a list of URLs, however, such as giving search engines hints as to which pages are more important to you than others.

It’s not stricly necessary to have an XML sitemap. In most cases, the search engines will get around to indexing all (or most) of the pages you list at some point. However, any time you can exert some bit of control (or at least give strong hints) over your site’s inclusion in search engines, you should take advantage of it.

To read more about sitemaps, check out the site that Google, Yahoo, and Microsoft collaborated on at http://www.sitemaps.org/

If your site is powered by WordPress then just go download this plugin, and the job of adding a sitemap will be greatly simplified.

If your site isn’t WordPress-based, then one of the XML sitemap generator tools should work for you.

Custom 404 page

Don’t trust your visitors to stick around if they land on the generic 404 – Not Found page. Give them a custom error page and gently lead them to other areas of your site that might be useful to them.

To create a custom 404 page for WordPress blogs, simply edit your theme’s 404.php page template. The default WordPress theme has a 404.php file, but not all themes have their own custom 404 error template file. If your template has one, it will be named 404.php. WordPress will automatically use that page if a Page Not Found error occurs. Just edit it in your admin (Appearance / Editor) and include links back to your home page, your archives, your search box, etc. For more details, go to http://codex.wordpress.org/Creating_an_Error_404_Page.

To create a custom 404 page for non-Wordpress site that has a hosting account that uses Cpanel, login to cPanel and click Error Pages, under the Advanced block. Select the domain you want to create a custom 404 page for, and click the type of error page to edit – in this case, 404 (not found). Insert your own custom HTML code. The changes will be applied after you click Save. Here’s a screenshot of what my cPanel shows for the Error Pages section in my hosting account.

Favicon

It’s really easy to create a favicon for your site (the tiny little graphic that shows up when you bookmark a site). Just take any square image (like a square portion of your logo, for example) and run it through a favicon generator like this one. Place it in the root folder (where your home page is). Then add the following code to the head section of your pages.

<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">

Analytics code

I think just about *everyone* forgets to add their analytics or stats code to their new site at least once. I forget every time! Anyway, whether you are using Google Analytics, Clicky Web Analytics or any other stats application, don’t forget to find the directions for your analytics code, and place it where it belongs (usually in the head section or just before the end of the page).

Now, if I *still* forget those 5 things next time I create a new site, just hit me over the head with either this post or the Web Design Checklist, ok?

© Donna for DazzlinDonna, 2010. | Permalink | 19 comments | Add to del.icio.us
Post tags: Robots exclusion standard, Sitemaps, Web analytics, web design, Web Design Checklist
This feed is for personal non-commercial use only. If you are not reading this in your news aggregator/reader or on DazzlinDonna, then the site you are looking at is probably infringing upon my copyright.

We won’t call them out publicly but lately we’ve noticed that some large websites with household names run really slowly, primarily due to the large number of images they feature. What happens to the really big guys can happen to all of you – your sites can be slowed down and that produces a real catch-22: a larger number of quality images means your visitors are likely to spend more time on your site, but the slower load time might frustrate them into clicking away.

The answer might be to use an image hosting site that will decrease the bandwidth you use and speed up your site significantly. Some of these sites are free, some require paid subscriptions, but all are worth a look. Here’s a list of the top 10 image hosting sites that will let you have both a better looking site and one that continues to run quickly.

1. Photo Bucket

This is one of the oldest photo hosting sites and they have continued to upgrade and innovative in order to keep ahead of their upstart competitors. The free subscription allows 1500MB of hosting with the ability to post, share and link to them all with ease. Load from your URL, email, or phone and share videos and albums or create slideshows. Professional paid accounts are available as well.

2. Flickr

Flickr leads the way in ease of use and offering the best photo management tools available. Their sharing is unmatched and delivers the ability to seamlessly provide photos and videos to all of your site visitors in an interactive format that will enhance their experience, and that’s always a plus. Like the above, free and pro accounts are both offered.

3. Smug Mug

This is a paid site all the way but many users feel they easily get their money’s worth. Unlimited storage, no ads or spam, and great tools to make your images and HD videos very accessible are just a few of the features that make Smug Mug currently one of the most popular image hosting sites. The new iPad app is a winner.

4. Image Shack

You can upload your images and video to Image Shack with any mobile or online device, so your site can boast the most current shots you’ve got. In addition, all file formats are supported with good editing capabilities. The 100 MB/hour limit is new, but won’t affect most users. Handy extras include image tracking, a browser toolbar for Firefox and IE, bulk uploads and an iPhone app. The service is free and highly rated.

5. Free Image Hosting

More exciting than its descriptive name implies, this service operates on dedicated Linux servers with pretty substantial bandwidth. It’s not the fastest but it is free, easy to use and allows you to manage a good-sized portfolio of images and videos.

6. Shutterfly

PC magazine likes Shutterfly and so do we. It is a professional image hosting service that offers unlimited uploads and great usability. Excellent speed and quality are the hallmarks of the service.

7. TinyPic

A favorite of bloggers and affiliate marketers, TinyPic features easy to use organizing and editing tools that allow you to quickly upload pics and videos to your blog, social networking sites and eBay. It’s a freebie.

8. Pic Tiger

This completely free service is perfect for users with lots of images they want to share or host remotely. It also offers easy editing tools and allows you to produce thumbnails, resize, create and arrange albums, and send your images anywhere you want them to go.

9. All You Can Upload

There’s plenty to like here, beginning with the obvious. This free service allows unlimited uploads though it supports .JPEG and .GIF formats only. Load files that are as large as you want them to be and leave them up for good.

10. Image Venue

Here’s another free site with unlimited upload, storage and bandwidth opportunities. No registration is required. The only limitations are that the file must be a .JPEG and the maximum size is 1.5MB for each.

Most users will get by quite nicely with a free site for their image hosting, so check out those first. Whether they will do or if you need a professional account, the improved functionality and speed of your site will be recognized by your regular visitors and appreciated by new ones. Every step you take to improve your site can be counted on to produce gains in getting your visitors to respond.

James is a writer and product analyst at Cartridge Save where he reviews and compares ink cartridges and other office supplies.

© Donna for DazzlinDonna, 2010. | Permalink | 2 comments | Add to del.icio.us
Post tags: Flickr, Image hosting, Image Shack, ImageShack, James Adams, Photobucket, Shutterfly
This feed is for personal non-commercial use only. If you are not reading this in your news aggregator/reader or on DazzlinDonna, then the site you are looking at is probably infringing upon my copyright.

Well of course you could simply undo the change, and that’s probably the best answer, but that’s not what this little tutorial is about. We’ll pretend for now that undo isn’t an option for whatever reason, and we’ll look at how I diagnose these things, as well as how you can use this same technique just to temporarily try out almost any CSS change you care to make to your site – or anyone else’s.

Let’s Fix A Test Site – Techcrunch

For this lesson, I chose a popular site – Techcrunch.com – as our test site. What if Techcrunch’s site designer asked you to help figure out how to move the Google search box in the upper right corner to the upper left corner? For this exercise, we’ll pretend that’s where it is supposed to be, but Mr. Designer messed it up somehow and it moved to the right. We’ll also pretend Mr. Designer has forgotten everything he knows about designing, which is why he’s come to you for help. Below is a screenshot of Techcrunch showing the Google search box in the upper right corner.

You could diagnose this by simply viewing the page’s source code, finding the URL of the stylesheet(s) used, opening that link, and looking through all of the CSS to see what’s controlling the placement of the search box. But that’s the hard way. Let’s use readily available tools that make the job easier instead.

Use Handy CSS Debug Tools

Although I routinely use Google Chrome as my browser of choice, I usually open Firefox for this kind of task because the Web Developer addon has the features I like to use (and Chrome’s Web Developer extension is still missing one or two features that I need). So your first step, if you don’t already have it, is to install the Web Developer addon into Firefox. While you’re adding extensions, make sure you also add Firebug as well.

Now, you can right-click anywhere on the Techcrunch page and choose Web Developer > CSS > View Style Information (as shown below).

Web Developer Information Bar

This adds an extra bar under your current toolbars. When you hover your mouse over any part of Techcrunch’s page, two things happen: the element you hover over is outlined in a thin red line and the element’s style hierarchy is shown in the bar that showed up under your toolbars. See the image below to see what I mean. In the example image below, the Web Developer bar shows me that the element I hovered over (the Google search box) is an input field in a form with an ID of cse-search-box, which is within a div with an ID of #top_right. (It gives us even more structure up the hiearchy, but for now, this is enough for me to work with).

Firebug View

There’s also another way to get similar information, and it really depends upon which “view” works best for you and the situation, so I’ll quickly show you how to get that same info in a different way.

Right-click on or very near the element you’re investigating (in this example, the Google search box), and choose Inspect Element (as shown below).

This will open a split window under the web page you’re viewing, showing lots of information (using the Firebug addon you installed earlier). In the image below (though it’s difficult to read), you can see side-by-side, the HTML surrounding the element (in the left pane) and the corresponding CSS of the element in the right pane. If you click on the various HTML lines in the left pane, the CSS info in the right pane will change to reflect which HTML line you’ve clicked.

So, regardless of which method you choose to use, it’s clear that the Google search box is being controlled by a CSS ID called top_right, so we need to find that CSS ID and see if we can change it to move the search box to the left.

The Real Fun Begins – Play With Changes

You, of course, don’t have access to Techcrunch’s files, so you can’t make changes that will be reflected live to the general public. But that doesn’t matter. What you CAN do, with the help of our Web Developer addon, is edit the CSS temporarily – just on your own computer – that no one else will see. This allows you to play with changes as much as you want, seeing how each change would affect the Techcrunch page, but since it’s not live, only you will see what you do. There’s no danger of you messing up Techcrunch’s site for real so feel free to test whatever you want! Here’s how.

Right-click anywhere on the Techcrunch page and choose Web Developer > CSS > Edit CSS. This will open a split window with Techcrunch’s CSS displayed on the left, and the Techcrunch page on the right, as shown below.

In some cases, there will only be one stylesheet to choose from, and in other cases, like this one, there will be several stylesheets controlling the page. I usually start with whichever stylesheet I believe is likely the main one – in this case, style.css. I then do a search if it’s a large stylesheet for whichever style I’m looking for. In this example, we want to look at the style for the ID of top_right. In the image below, you’ll see I’ve typed top_right into the search box, and it took me to the portion of the stylesheet that displays that information.

The information in the left pane isn’t just there for your viewing pleasure.

You can actually TYPE in that window, CHANGE anything you see there, and SEE the effect of those changes on the page in the right window!

Go ahead and try it. You can see in the image below, that I changed the #top_right info from float:right to float:left, and you can also see how that change I made affected the Google search box on the Techcrunch page. It immediately moved it to the left! Just what our worried web designer wanted.

Again, this is just something you and you alone will see on your own computer. Techcrunch’s page didn’t really change. No one else in the world will see that Google search box on the left. But you now know exactly what needs to be changed for the poor, worried web designer to fix his mistake, and you can tell him exactly where to make the fix in the real files.

Job Well Done!

Chrome’s Options

I do want to mention that Google Chrome can be useful for these purposes as well, but I haven’t yet been able to figure out how to do all that I want, as easily as I can with the above methods. However, I do want to show a couple of screenshots of Chrome’s Inspect Element option, which gives a lot of great information (see images below).

I’m sure many of you have your own preferred methods of accomplishing these same tasks, and it would be great to have you share them with me and others.

Now go on, go play around with the CSS of any site on the web, and you’ll quickly get the hang of how to find and adjust anything you might mess up on your own sites in the future. It’s ok, you won’t destroy anything. Really!

© Donna for DazzlinDonna, 2010. | Permalink | 3 comments | Add to del.icio.us
Post tags: CSS, Web Developer bar
This feed is for personal non-commercial use only. If you are not reading this in your news aggregator/reader or on DazzlinDonna, then the site you are looking at is probably infringing upon my copyright.

The first half of this article will explore what it takes to design your own website to avoid the expense of hiring a professional web designer. The second part will look at the options available that fall somewhere within the middle of the DIY vs. Hiring a Pro argument, and how those options might work best for you.

DIY or Hire a Pro?

Before we discuss the technical details, you need to determine how much your time is worth. If you choose the DIY route, you’ll be investing a large amount of time to the project – which may include extensive learning. Time is money, as they say, so you have to determine whether the time you spend creating your own website is saving you money or simply preventing you from making money while creating your site. On the other hand, if the time spent is considered an investment in your future (as you’ll have added skills), then it may be a suitable tradeoff.

1. Can you take the time needed to learn the skills you need to design your own website?
2. Can you afford to not have an online presence while you’re learning how to design your own website?
3. Will this “time as money” expense be a waste or an investment?

Once you understand the time/money factor, your next step is to evaluate your technical skillset, especially as it relates to web design. Do the terms HTML, XHTML, CSS, and FTP mean anything to you? If yes, then designing your own website may be a good option. If no, then you need to understand that you’ll have to invest several weeks just to learn the basics and possibly months to really have a good grasp of it all.

The Skills You’ll Need To Learn

From the basics to more advanced techniques, w3schools is loaded with free tutorials and is the best place to learn. Keep in mind, however, that HTML, CSS and Javascript are just the beginning. If you need advanced functionality such as e-commerce, a content management system or a forum or blog, you will need to understand a scripting language like PHP as well. If you don’t have a technical background, this learning curve will be steep.

The Software You Need

If you intend to go the DIY route, you’ll need the tools to make it happen. Theoretically, you could probably rely on online tools for much of it, but the experience is far easier with local software installed on your computer. Here are the basics you need.

Image Editing Software

First, you’ll need an image editing program like Adobe Photoshop, but its $700 price tag is a huge deterring factor for many (myself included). There are alternatives though, such as GIMP or Photoscape which are free but not as powerful. (I personally use GIMP, and it works well enough for my needs).

HTML/CSS Editor

Next, you’ll need a program to edit your HTML and CSS files. Adobe Dreamweaver will give you the most functionality and is usually the easiest to learn since it works a lot like some of the software you’re already familiar with, but it will set you back about $400. If you’re trying to keep your costs to a minimum, there are a few less expensive programs available, like CoffeeCup that don’t have all the bells and whistles, or you can even use a plain text editor like Notepad (but don’t use Notepad because there are many better choices that are also free). Two of my favorite text editors are Notepad++ and Notepad2.

FTP Client

Finally, you’ll need an FTP program to upload your files to your web server. I like FileZilla, which is free.

Now that you know what it takes to design your own website, you can make a more informed decision. If you’re still on the fence, you may want to spend some time discussing your needs with a designer to see if the expense of hiring a pro and the time saved to get it done right might sway your decision.

But Wait, There’s More!

Hold on, I said the second part of this would focus on options that fall somewhere between the DIY and Hire a Pro spectrum, so let’s take a look at those options now. This is where templates, themes, and customization come into play.

DIY with a Head Start – Customizing Templates and CMS Themes

Lots of people are like me. They have the desire to learn and they have the time and capabilities to make that happen, but they have difficulty going from a blank canvas to the start of a design concept. Getting beyond staring at that white nothingness into something that starts to look like a site can be daunting.

For that reason, long ago, I began making use of the many templates and themes that are available, many for free. These templates provide a starting point that prevents you from having to start from scratch. Some templates are just wireframe type structures that are just slightly beyond “blank canvasses”, with only the layout (header, sidebar, content, footer) coded and ready to develop. Other templates are full-blown, ready-to-publish designs that could easily be put online as-is and look great. Of course, if you do choose a completely ready-to-go template, you’re likely to be sharing that exact same design with many other people around the world who also chose to use that template for their site. That can be fine in some instances, but the real advantage here is to use any of these templates as merely a starting point – a jumping off place.

Where To Find Templates

There are many places to get great templates for free, and I’d recommend starting with some sites such as Open Source Web Design and Free CSS Templates, especially if you are just learning. If you want to also get ahead of the game, and make sure you use future standards such as HTML5 and CSS3*, then I’d recommend Free HTML5 Templates.

If you are using a content management system, such as WordPress, for example, then that CMS will likely have its own assortment of templates and themes that you can use and there may be entire ecosystems of user-generated themes available online. Just use your favorite search engine to find templates and themes designed specifically for your CMS of choice.

Once you’ve found a template you like, you can customize it to make it uniquely yours. At this point, you’ll still be rolling up your sleeves and going the DIY route, but with a lot less work and time staring you in the face. You can start by editing the CSS to change color schemes, fonts, and even layout (flipping sidebars from left to right, for instance). You can swap out the current graphics and header images for ones that better reflect your personality and site’s theme. I like to use Fotolia to find images to use for my sites. Often, with just a day’s worth of time, you can end up with a completely unique design because you began with a major head start – a template.

Premium Templates + Pro Customization

There is another similar option that falls into this same middle-ground between DIY and Hire a Pro – premium templates and themes. Some pro designers offer templates either free or for a small charge (usually less than $100) and then offer customization services as well. If you see a template you love, but aren’t ready to go the DIY route to customize it, the designer will happily do it for you. While this adds to the cost of the template, the customization charges will usually still be fairly affordable, and you know the changes will be made by a pro.

Your Choice: DIY / Hire a Pro / Customize a Template

So there you have it. There are many routes you can take to get a site designed, running the spectrum from complete DIY to Hiring a Pro, with the middle ground encompassing taking shortcuts by customizing templates and themes. This hopefully helps you make a decision more easily.

* HTML5 and CSS3 markup standards are still not ubiquitous across browsers, so these templates are best for learning purposes. Also, as full disclosure, freehtml5templates.com is my own site.

© Donna for DazzlinDonna, 2010. | Permalink | 3 comments | Add to del.icio.us
Post tags: DIY, freehtml5templates.com, HTML 5, Template, web design, web designer
This feed is for personal non-commercial use only. If you are not reading this in your news aggregator/reader or on DazzlinDonna, then the site you are looking at is probably infringing upon my copyright.

Some ideas from SEP’s blog post include cleaning up your subject categories, finding and repairing broken links, remove widgets and plugins that are outdated, and update your copyright notice.

The one thing I suggest we all do is take an objective look at our sites, and de-uglify them as much as possible.

What? De-uglify is not a word? Sure it is! Well, it is now anyway.

If you’ve added lots of widgets and such that ended up turning your pristine site into a mishmash of ugliness, be bold, be daring, and rip 90% of those uglifying widgets right out of there!

If you’ve used a layout or color scheme that looks like it was created in 1995 for a geocities site, consider updating it to a new, fresh layout with colors that don’t cause people to run screaming, “my eyes, my eyes!”.

Cleaning up your site accomplishes a lot of things in one go. It helps keep visitors on your site. It creates a better user experience which will likely lead to better conversions, more traffic, links, buzz, etc.

So let’s all participate tomorrow in Blog and Site Spring Cleaning Day. Who’s with me???!!!

© Donna for DazzlinDonna, 2009. | Permalink | No comment | Add to del.icio.us
Post tags: pristine site, search engine, web property
This feed is for personal non-commercial use only. If you are not reading this in your news aggregator/reader or on DazzlinDonna, then the site you are looking at is probably infringing upon my copyright.

There are probably just as many opinions about what constitutes good website design as there are people on the internet. There are, however, a number of factors that have been proven to make or break a website. If your website is guilty of just a few, it can have a dramatic impact on your business. Fortunately, most of them are relatively easy to correct, but in many cases, the right choice is often contrary to popular opinion because of peoples’ misunderstanding of the internet.

Spend some time studying these six common website design mistakes and see how many you’re guilty of. Then, invest the time to correct them and you’ll find that your website begins to perform better almost immediately.

Not testing on multiple browsers

You probably use Internet Explorer, like most people do, but a significant portion of your website visitors may be using another browser, such as Firefox, Safari, Chrome or Opera. Also, your visitors may have a variety different screen resolution and graphics capabilities. This means a website that displays perfectly on your computer may not on another computer, which is why it’s so important that you test your website to ensure that it displays and functions properly in most major browsers.

Using splash pages or flash intros

When a visitor arrives, they shouldn’t have to click anything to enter your website. Splash pages can turn an otherwise amazing website into a poor website faster than you can click the back button, and flash intros are even worse. Both of these things came about from arrogant designers who decided that showcasing their ability to use a particular piece of software was more important than providing what their visitors were looking for, and unfortunately the phenomenon became fairly common.

The argument in their favor is often something along the lines of ‘Our flash intro gives us a chance to present a mini commercial to each and every website visitor.’ This argument is flawed though, because by the time that they have arrived on your website, they are looking for specific information – not your commercial. Forcing it on them will only encourage them to leave, usually moving on to your next competitor.

Not breaking text into manageable chunks

It’s said that the best way to eat an elephant is one bite at a time. The same logic applies for presenting website copy. Staring at a computer monitor is difficult work for the human eye, and digesting large portions of text can be tough for even the most focused visitor. You can overcome these challenges by breaking your text into smaller, manageable chunks, utilizing headings, subheadings, lists and images. You should also keep the width of your text within a reasonable limit. The longer it is, the more difficult it will be for your visitors to read.

Omitting contact information

A surprising number of companies fail to provide any way to contact them on their website other than through a contact form. This falls into the same category as those annoying automated phone menus. Sure, you’ll save some time and money since you won’t have to talk to all those bothersome people who want to talk to you, but you’re forgetting something important. Those ‘bothersome’ people are actually potential clients who want to buy what you’re selling!

You may filter out some riff raff when you don’t provide your contact information, but you’ll also turn away a lot of potential business. People want that warm, fuzzy feeling that comes from knowing that they’re dealing with a real-life company rather than some fictional Nigerian prince who is willing to transfer his fortune to their bank account. They are looking for a stable company that they can trust and if they know that they can pick up the phone and reach someone, or even stop by your office if they are nearby, you will have a rock-solid foundation.

Putting branding before the user

There is no question that branding is an important, if not critical aspect of marketing, but some companies take it too far, causing a negative impact. I would generally agree that the title tag on your home page should contain your company name, but that shouldn’t continue throughout your entire website. Aside from diluting your search engine optimization campaign, having your company name in the title tag of your internal pages will make them less attractive to potential visitors when presented with a list of search results. Think about it like this; if someone searches for ‘blue plutonium widgets,’ do you think they will be more likely to click on a listing in the search results with the title ‘Blue Plutonium Widgets – $9.99′ or one with the title ‘Acme Widget Company?’

Omitting pricing information

The outdated mentality of only revealing pricing information to prospects on the phone or face to face seems to have made its way onto the Internet. While there are valid reasons to justify the practice, it is counterproductive to your business. When people use the Internet to find information, they expect to find that information without having to call someone. Does this mean that some of your competitors may learn what your prices are? Certainly, but they can get that information even if you don’t make it available online by posing as a potential client. Not all companies can list their prices; for example, while we have a number of standardized prices available, a lot of the marketing work that we do is developed on a case by case basis. Most companies, however, can.

© Donna for DazzlinDonna, 2008. | Permalink | 2 comments | Add to del.icio.us
Post tags: Acme Widget Company, bank account, Internet Explorer, Jeremy Knauff, prince, search engine, search engine optimization campaign, search results, WildFire Marketing Group
This feed is for personal non-commercial use only. If you are not reading this in your news aggregator/reader or on DazzlinDonna, then the site you are looking at is probably infringing upon my copyright.