Effective Web Design 101

Web Design 101

Your Virtual Storefront


I've been creating website since the days of NetScape 1.0 came out. I thought I'd share some of my tips regarding effective website creation and design. I come across poor website design all the time when surfing the net. When you first create a website you should think about layout and how others will navigate your site. Do your research and find out what others are doing before you just toss together a site. Think of a website like a storefront in your local mall. Your home page is much like a storefront because it's the first thing your visitor sees. If its eye catching and always up-to-date then visitors will stay and view your site. If you walk by a store with a bad window display or the same as your last visit, what are the chances you are going to check things out? So you can see the importance of designing a great home page.

Keep it Clean

Don't overwhelm someone with a lot of information on your home page. I recommend a mix of 70/30 depending on the type of site. Give your users about 70 percent content mixed with 30 percent graphics/images/ads to compliment your content. Keep your visitors engaged in your content to keep them coming back. Ever had a hard time finding your keys in a cluttered room?

Easy Navigation

One of my favorite sites is DynamicDrive.com which offers lots of free cool stuff. Stuff that helps you make your website stand out from others in the crowd. I mainly use the navigation tools they provide on my websites. Both SpreadViralVideo.com and MyVolunteer.com use navigation that I found on DynamicDrive.com. I've also used code that disables the "Submit" button after its been clicked. That way the user cannot click it a 2nd time, preventing duplicate information.

Research Other Sites

While you want your creativity to be your own it's a great idea to see what others are doing. I often check out the design of other websites to see what others are doing. I did this years ago when I first started creating web pages to learn the art of HTML. When I started I didn't have the luxury of books or even classes on how to code HTML, JavaScript and other coding languages of the web.

Tools of the Trade

I want to finish up with just briefly talking about some of the tools of the trade. I have hard coded websites in the past however I mostly use WYSIWYG(What You See Is What You Get) software when developing my current websites. I don't know about you but I don't have a lot of free time, so I use FrontPage from Microsoft. I'm not part of a website team so I'm on my own when it comes to developing my websites. Therefore I use software that lets me crank out pages and a fast pace. Besides FrontPage other editors on the market are Dreamweaver, Microsoft Expression Web(replaces FrontPage) and Adobe® Contribute® CS3 to name a few. Most of these allow you to use a simple "Compose" mode to create your web pages. These editors make it easy for you to add images, navigation, links, create tables and other aspects of a web pages quickly. Those who know how to code can switch to the HTML mode to have more control of the design.

If you're interested in purchasing any of the popular HTML editors I've listed a few below.

Expression Web


Expression Web (Full Product, PC)


Expression Web (Full Product, PC)

FrontPage

FrontPage 2003 (Full Product, PC)


FrontPage 2003 (Full Product, PC)

Dreamweaver

Adobe Dreamweaver CS3 - Complete Product - 1 UserPC


Adobe Dreamweaver CS3 - Complete Product - Complete Product - 1 UserPC

More applications can be found on CNet's site Download.com and are either free or try and buy trials. Most of the above software can usually be downloaded and tried out for 30 days before you buy. Give them a spin and see what types of creations you can come up with.

Do you have any tips to share with others? Have a favorite HTML editor? Feel free to comment below.

How-To Place an Ad on Craigslist Part II


How-To Place an Ad on Craigslist Part II

Welcome to the 2nd part of 2 videos on How To Place an Ad on Craigslist. In my first video I spoke about how to access the Craigslist.org website. I also talked about how to choose your city and the category for the item you'd like to post a classified ad.

Now I'm going to show you how to use Blogger's Compose mode to make the perfect ad for Craigslist along with some other tips. Most people post an ad on Craigslist not even thinking about how they can make it stand out from the rest. There are several things you can do to capture the attention of those browsing ads. The first thing is having a great posting title. My dad recently placed an ad for some golf clubs he owns. The only thing he listed was "Golf Clubs" and the price in the posting title box. However there were several other of the same types of ads. I recommend that he put the brand name of the clubs since they were not your basic golf clubs. You have a better chance of someone clicking on your ad by having it stand out from the others in the list.

The posting description is the most important part of your ad. This is where you are going to describe the features of your item, specifics, your phone number and even display photos. Craigslist will let you display up to 4 photos, however they show up at the end of your description. This is where knowing HTML (web page code) comes in handy. But you don't have to be an expert to use an HTML editor like FrontPage from Microsoft or even the editor I used to create this Blog post. In Part II of the video I'll show you how to use the edit in Blogger.com to spice up the ad. I first went to the manufactures website to look for images of the product I was selling. You can also find product specs and other information helpful to a potential buyer.




More information about your item will help buyers determine if they are interested or not. I recently placed an ad for an HP Printer and had it sold within a few days. I went to the HP website and grabbed some copy regarding the printer specs and features. They also had some photos of the product that I used in the ad along with some that I took myself. It was new product so I really couldn't take a photo of the printer itself. I was able to combine the photos from the HP site with the photos I took of the box, to show buyers it was a brand new item. Using the Compose mode in Blogger I was able to insert the image into text about the printer. You can either copy the image from the website to your desktop or provide the URL(Link) to the image to upload to Blogger. Notice the image of the printer I download. Don't you think something like this would capture the buyers eye rather than just text? Did you notice the image at the top of this posting?

Besides adding images you can also control the way your text looks in your ad. You can bold parts of your text, color or highlight parts of the text that might be important to the buyer or change the font. I myself aways prefer the font Arial when it comes to ads or website in general.

Now that you have your ad looking sharp you need to change to the Edit HTML mode on Blogger. Don't worry if you are familiar with HTML coding because we're just going to copy the code. Highlight the code using your mouse and holding down the left button and dragging it from the top to the bottom of the code. Once you have it all highlight do a copy buy holding down the CTRL and C key at the same time. Those of you who are mouse happy can also do a right click and select "Copy".

Return to Craigslist and in the Posting Description box use CTRL and V to paste the HTML code into your Craigslist ad. Finish the ad by typing in your e-mail address twice to confirm it is correct. Then select the continue button and follow the directions to complete the posting of your ad.

Have you sold stuff on Craigslist before? Do you have any suggestions for others? Feel free to comment below to share those tips.

Happy "Free" Selling!

Web Guy Guru Recommends: