Continued from Part One:

Web Forms - using web forms adds professionalism, function, and a splash of flair to your site. Many webmasters and (especially bloggers) still use a simple “mailto:whoever@whateverdomain.com” instead of using a contact web form page. This isn’t a good idea for a lot of reasons. When you display your email address on your page, you are more setting yourself up to receive lots of spam. Spambots crawl the internet and collect email addresses from websites so that you get lots of junk in your inbox. When you use mail forms you have the option to use CAPTCHAs. The use of CAPTCHAs will not stop all spammers from sending you junk, but it will significantly reduce the amount. If you aren’t “tech-savvy” enough to write your own contact form, there are services such as Icebrrg that can do it for you. For Wordpress users, I recommend the cformsII plugin. Using cformsII allows you to easily create, manage, customize, and style forms for your Wordpress blog.

Unobtrusive Advertisements - No one likes advertisements on websites, but I think that most people understand that they are a necessary evil. Ads keep a lot of free services free. They can also make bloggers and webmasters a little money to help keep their sites afloat. Advertisements are usually placed in areas of high visibility: in the header, sidebar, before and after posts – and that’s fine. What isn’t fine, in my opinion, are ads that are obtrusive and annoying. I’ve said it before and I’ll say it again: your message and content should be the main focus of your site. Pop-ups, those talking ads (ie – You’ve won a free iPod!), and ads that expand across the width of the page aren’t just annoying, they really detract from your page! Anything that diverts your visitors’ attention away from your content is just plain bad. So in summary, advertisements are fine, as long as they are tasteful and noninvasive.

Add Social Bookmarking & Sharing - Most blogs these days include links to sites such as Digg, Reddit, Technorati, Mixx, Del.icio.us, Stumble Upon, etc. at the end of their posts. But believe it or not, I still see a number of blogs without any sharing links. Adding social bookmarking to your blog is a must if you want to increase traffic. You shouldn’t rely on your visitors to go to these sites and “manually” submit your posts – you have to do the first step for them. It’s relatively easy to add the links to your posts, but if you’d rather, you can always use sharing buttons such as ShareThis or AddThis.

Encourage Comments On Your Blog – Visitors who leave comments will often return to your blog to check for replies. Getting return visits is always a good thing! One way to encourage people to leave comments is by using a “Recent Comments” plugin / widget. People are more likely to leave a comment if they can see their name, usually linked to their own website, on the main page or sidebar of your blog. Also, keep in mind that requiring visitors to be logged in discourages a lot of people from commenting.

If you have anything to add or tips of your own, please feel free to leave a comment and share!

Over the next while, I will be compiling a list of little tips that can improve the appearance, visibility, and function of your website. Here are the first five:

Favicons - Now-a-days, mosts sites use favicons:

Favicons (or favorite icons) are a good way to “brand” your site. Especially with tabbed browsing and bookmark toolbars, they help to visually distinguish your site from others. A favicon is nothing more than a 16×16 pixel .ico file. You can make your own using your favorite graphic editing software or you can use one of the many free online favicon generators.

Tutorials to check out:
How To Create a Favicon (using Gimp) from publisheraid.com
How To Create A Favicon In Photoshop from photoshopsupport.com

Online favicon Generators:
Favicon.cc - www.favicon.cc
FavIcon Generator from dynamicdrive.com - http://tools.dynamicdrive.com/favicon/
Favicon generator from degraeve.com - http://www.degraeve.com/favicon/

CSS Navigation Lists - In my opinion, site navigation should be written in HTML as a list – its just good structure. The use of lists make it possible for visitors to navigate your site if they are using a text-only browser or if their browser don’t support CSS. Plus, well-structured HTML is essential for web crawlers to index your site accurately. In this example from blendetta.com, you will see how the navigation structure stays intact with or without CSS support:

Since most of your visitors aren’t using text-only, non-CSS supporting browsers, you can make a big difference to your sites appearance by styling your navigation lists! As stated in my 10 Awesome Free Resources… article, “Listamatic is the place to go if you are looking for tutorials on CSS based navigation lists”. For a good example of how to make a list like the one seen on blendetta.com, check out Listamatic’s Bulleted Rollover List tutorial.

Get Rid of the Music - Let me restate that: don’t have music on your page that automatically plays when the page is loaded. A lot of people find it to be annoying. You don’t want people to leave your site over something silly like a music player.

Use PNG Images Whenever Possible - Let’s say that your web page has a blue background. You used JPEG images, also with blue backgrounds for your design. What happens when you decide to revise your page and change the background color? Yup. You’d have to change the background color of all of your images. Hopefully you still have the layered PSD file stored somewhere on your computer or you’d have to start over.

If you keep in mind that you may want to make some simple changes to your site one day (ie – change the background!), you should probably save your images as PNGs with transparent backgrounds. Displayed on different CSS styled background colors, here is a PNG of a cat that I drew in Photoshop many years ago:

All I had to do was change the background color of the page from #FF9900 to #990099 - I never had to edit the image. Whatever you do, don’t open that JPEG with the blue background in Photoshop and simply select and delete the background color - it leaves all of those ugly extra colored pixels behind!!

Don’t Junk it Up - It looks nice when a page has a minimal amount of buttons, banners and link images as long as they are well organized. I see way too many blogs with hundreds of link images, “latest visitor” type widgets, and other items that slow down and clutter the page. The content of the site should always be the main focus. All of the items that link to other pages should definitely be a secondary concern. Other things to avoid: adding too many colors, lots of scrolling text and excessive amounts animated anything. You don’t want your page to end up looking like HavenWorks.com!

Part two of the list will be coming soon! And as always - comments are welcomed.

Unlike a lot of people I still browse the web, check my email, and send instant messages using my computer – not my cell phone. My Razr2 uses 3G technology so I do get broadband speed, but I personally don’t see the point of surfing on a 2.2” screen. With that all being said I know that I’m part of an increasingly shrinking minority.

Yesterday, I happened upon a Blogging Q&A article on DailyBlogTips.com. One of the questions was about making blogs mobile friendly. I agree with the answer that was given but curiosity led me to check out how 6bdesign.com looked on my phone:

It actually looked pretty good! It wasn’t quite as eye-catching as it is on a computer monitor but it was at least navigable. I also decided to check out the link to the dotMobi Emulator; a site that emulates what web pages look like on a Sony Ericcsson K750 and Nokia N70. 6bdesign.com didn’t look quite as good and the navigation was pretty messy:

I’m not too troubled by my discovery, but if 6bdesign.com were a site that received lots of mobile visitors, I would be. Just in case your site does receive lots of hits from people on cell phones, here is an easy way to make their experience browsing your site a little better using simple CSS:

Make a separate style designed especially for mobile visitors. Keep in mind that floats, frames, pop-up windows, drop-down menus, and large images probably won’t display correctly on a mobile device. Also, you may want to use display: none; to block your images if your images are too big to display. Also think about how your navigation will look. Remember to keep it simple! You want to make your content accessible first and foremost. Once you’ve finished with the CSS, you can add it to your page. There are 3 ways to do this. Just make sure that the media type is for your mobile-friendly CSS is defined as handheld:

1. Link to the style sheet:

   <link rel="stylesheet" type="text/css" media="handheld" href="mobile.css">

   I prefer this method. It’s the most effective way.

2. Import the style sheet:

   <style type="text/css" media="handheld">
   @import "mobile.css";
   </style>

   Although this method will allow the page to load faster on mobile devices, it isn’t supported by all browsers and devices.

3. Use inline style:

   <style type="text/css">
   @media handheld {
   body { background-image: url(/images/plain-bg.jpg); }
   h2 { font-size: 14px; }
   p { font-size: 10px; }
   }
   </style>

   Since this method defines the styles in the <head> section of your page, it isn’t as preferred as the first method. Anytime you can link to a style sheet you should - it makes your page load faster and allows search engines to index the content of your page more efficiently.

I hope this helps. Please feel free to leave a comment if you have anything else to add!