Archive for the 'Web Design' Category

How to Increase the Conversion Rate of Your Sales Page Part 2

Text
Use different colors to attract attention for the text. e.g. the main headline could be bright blue and the main text black if using a white background. Testimonial text could be light blue on a yellow background to contrast it from the rest of the page. Bold your main keyword phrases to make them stand out.

Ebook cover image
A nice looking ebook cover (or ecover) adds class to your sales page. Get it professionally designed or do it yourself if you have a graphical editor. I use fireworks for all my graphics work because it was developed exclusively for creating and editing web graphics.

Here’s a fireworks tutorial to create a 3D box that can be modified to produce an ebook cover.

Other graphical elements to consider
Use small graphical elements to enhance the appearance of your sales pages.

Icons in lists - create a red check icon for bulleted points as shown on this sales page:
http://www.isitebuild.com/web-site-promotion.htm

Author image - use a portrait photo for the author of the ebook

Order button- create a prominent order button with “order now” (or something similar) displayed across it.

Signature file - write your signature on a piece of blank paper then scan it into your graphics software.
Save it in the image folder of your web site then place it on your web page. Upload the image folder and web page to the server and you’ll see your signature graphic displayed.

Use XHTML and CSS
Avoid the use of tables by using CSS and XHTML instead. You’ll use less code, the page will load faster and you’ll have greater flexibility with the design. Make sure you validate your code before your sales page goes live.

Read Sales Pages With Style - Create Quality Sales Pages With CSS

Fast Loading
A slow loading page will cause your visitors to leave. Your page should load within 10 seconds on a 56K modem. Visit the web page analyzer to check the load time.

Links
Make sure your links are a different color than the main text and change color when clicked. Make your links easily recognizable by using a different color and underlining them.

Tips
-The design elements should blend together well so that your sales page is easy to read, and fast loading.

-Try not to place links on the page that lead elsewhere because you’ll lose visitors. This may decrease your conversion rates.
You want to keep your visitors on the sales page without being distracted.

-If you use links within your sales copy make sure you code them so the link will open in a new window but remain on the sales page when the linked page is closed.

-Don’t place links at the top of your page. Place them at the bottom so your visitor will read all your content first before clicking elsewhere.

*****************************************
If you want to attract a continuous stream of NEW visitors to
your website without spending a dime on advertising pick up a copy of
my new ebook”Article Marketing Strategies“…
to receive immediate and long-term traffic.

Herman Drost is the Certified Internet Webmaster (CIW)
owner and author of Web Site Design, Web Hosting, SEO

Posted by Herman on April 11th, 2008 .
Filed under: Web Design | 1 Comment »

Web Site Maintenance - Update Your Web Pages With SnippetMaster Part 2

My experience with SnippetMaster

There are 2 versions of SnippetMaster.

1. Snippetmaster LITE - free, copyright information must remain intact
2. Snippetmaster PRO - $24.95 One License, can remove copyright information
3. Snippetmaster Rebrandable License - $74.95 The templates are completely brandable to your own company details.

I have only installed the Lite Version but I found it was sufficient for my client to use.
I installed it in the root directory of the site files.

Configuring the admin panel

-Click General to fill out the program options
-Click Users to give the client User Privileges

* Admin - User has access to all Admin Areas. User can edit all files and all snippets.
* Super - User can edit all files and all snippets.
* Power - User can edit all snippets.
* Regular - User can only edit snippets if they are listed in the Users access control list of the Snippet Tag

I gave my client admin privilege as she will be the only one editing her site.
Note: Make sure you edit the UserName, RealName, UserType that already exists in the admin panel.

-Click List Group to create a group that the user will belong to.

Here is how I wrote the snippet into the html code:

############################

<!-- #BeginSnippet name="main content" users='clientname' -->

Editable web page content goes here

<!– #EndSnippet –>

############################

Notice that I named the snippet “main content” because I only wanted the client to edit the main content and nothing else e.g., navigation, images, footer I used the client’s name as the user.

How to use SnippetMaster

1. Login to SnippetMaster
2. Select a folder on the server from the drop down box
3. Click open
4. Select the file you wish to edit from the second drop down box
You will see a heading titled “SNIPPETS” these are the snippets embedded in the web pages
that can be edited .
5. Select a file from under the SNIPPET heading
6. Click open.
The editor will open the web page to be edited.
7. Edit the area displayed in the window (only the editable area will be displayed).
8. Click save
Your edited page will now appear in the window.

Note: The PRO version allows you to preview the page before you save it.

Conclusion

I highly recommend SnippetMaster for any web designer who needs his clients to update their own static web sites.
The Lite version is free, easy to install, simple to configure. It’s also easy for your client to understand how to operate it.
It enables you to predefine only those areas you wish to make editable for your client without messing you the design.

*****************************************
Receive fresh, in-depth articles articles on how to design, optimize and promote your web site by subscribing to my “Marketing Tips” newsletter at: http://www.isitebuild.com/

Herman Drost is the Certified Internet Webmaster (CIW)
owner and author of Web Site Design, Web Hosting, Search Engine Optimization

Posted by Herman on March 10th, 2008 .
Filed under: Web Design | No Comments »

Web Site Maintenance - Update Your Web Pages With SnippetMaster

One of the most often asked questions about web site maintenance is

How can I update the web site myself?

If it’s a small html web site containing 5-10 pages I suggest using SnippetMaster. If it’s a content management(CMS) website the customer has access to an administration panel which allows them to edit the content.

The beauty of a static html site is that it only has a small number of files. A CMS site contains 100s of files and the software needs to continuously be updated to the latest version to stay ahead of security bugs.

What is SnippetMaster?

SnippetMaster is a free content editing tool that edits pre-defined areas of a web page, through any browser, without altering the rest of the web page.

Features

* Fully compatible with all major browsers (including the Mac)

* Supports embedded and linked CSS files.

* Unlimited users (with different permissions levels!).

* Unlimited snippets per page.

* Ability to edit whole pages.

* A simple visual editor that is easy to use. (If you can use MS Word, then you can use SnippetMaster).

* Creates fully “valid” code that is compliant with all XHTML standards.

Read about more new features

Installation

Web Browser

SnippetMaster works with all major browsers.

Web Server

PHP 4.3 or higher with Zend Optimizer or Ioncube Support

Use the Autoinstaller to install or upgrade SnippetMaster

With the Auto-Installer, you do not need to unzip anything, worry about Zend/Ioncube encoders being installed on your server, edit any configuration files, set binary/ascii ftp mode, change file permissions, or anything else!

How does it work?

SnippetMaster is specifically designed to work seamlessly with existing web pages (including Dreamweaver templates and similar programs) without having to modify the existing design or HTML you or your designer has worked hard to create.

With SnippetMaster you can easily edit any web page or you can create editable regions (called “Snippets”).

Here’s an example of a snippet:

#############################


Page content goes here...

<!– #BeginSnippet name=”My editable area” –>

    Place any web page content you wish to make editable here…

<!– #EndSnippet –>

Page content goes here…

############################

*****************************************
Receive fresh, in-depth articles articles on how to design, optimize and promote your web site by subscribing to my “Marketing Tips” newsletter at: http://www.isitebuild.com/

Herman Drost is the Certified Internet Webmaster (CIW)
owner and author of Web Site Design, Web Hosting, Search Engine Optimization

Posted by Herman on March 8th, 2008 .
Filed under: Web Design | 1 Comment »

Web Site Conversion - Test and Track Everything

I was on holiday with my family one summer and came across 2 fruit & vegetable stands on the side of the road. Visitors mostly gravitated to one stand but not the other?

Why?

The busy fruit stand simply displayed the fruit and vegetables in an attractive way so customers could quickly and easily select what they wanted.

The other stand was not organized. The fruits & vegetables looked cluttered because they were bunched together. This made it difficult to quickly make a good choice.

This comparison also applies to web sites. Try to see your web site through your customers eyes or get someone who doesn’t often use the web to navigate your site. If it’s difficult for them to know your site’s purpose or how to make a purchase, it will be the same for your customers.

If you’re serious about improving your web site conversion rates read this article on:

Why you MUST become fanatical at testing and tracking

*****************************************
Receive fresh, in-depth articles articles on how to design, optimize and promote your web site by subscribing to my “Marketing Tips” newsletter at: http://www.isitebuild.com/

Herman Drost is the Certified Internet Webmaster (CIW)
owner and author of Web Site Design, Web Hosting, Search Engine Optimization

Posted by Herman on February 29th, 2008 .
Filed under: Web Design | No Comments »

WordPress Static Site - an example

For the past couple of weeks I’ve been busy designing the front and back ends of a new web site: MidAtlanticHarness.com

The front end had to be database driven because the owner wanted to edit the content himself.

I used WordPress to create the static pages so the site doesn’t even look like a blog but the content can be edited from the admin panel.

I made the news page into a blog so he can add as many news stories as needed plus have them archived as well. The blog also
allows him to create different news categories.

I installed and configured a powerful forum for the backend of the web site.

I’m telling you this, because it shows how a regular site can be built using a content management system such as WordPress and retain all its benefits.

To read the benefits visit: The Top 7 Reasons to Choose Wordpress

*****************************************
Contact iSiteBuild.com if you want a WordPress web site created or have a powerful forum installed/configured for your business.

Receive fresh, in-depth articles articles on how to design, optimize and promote your web site by subscribing to the “Marketing Tips” newsletter at: http://www.isitebuild.com/

Posted by Herman on February 15th, 2008 .
Filed under: Web Design | No Comments »

CSS Menus - Create a horizontal css menu using classes

CSS menus have much greater versatility than the traditional javascript-based menus placed in tables.

Here are some of the main benefits for CSS Menus:

1. Quickly create horizontal or vertical navigation menus without cluttering up your html code.

2. Fast loading. Search engines can spider the code faster than javascript or flash menus because it generates clean code.

3. Versatile. You have the capability to create horizontal, vertical and drop down navigation menus for any site. You also have the ability to create hover effects and use background images. This gives you alot of creativity in developing the best navigation menu for your web site.

4. Accessibility. A CSS-based navigation menu is accessible to all types of computer users no matter what type of browser, screen resolution or computer they use.

5. Flexibility. If you need to create multiple css menus, use css classes in your web page design.

Recently I had to convert an entire web site’s navigation from using applets (often created using the now defunct Front Page Editor) to a css menu. I had to use multiple css classes (instead of ids) to create multiple horizontal menus.

CSS Horizontal Menu Using Classes

Here’s how the css horizontal menu is displayed on a web page:
http://www.ihost-websites.com/test2.htm

CSS


.navcontainer
{
margin-left: 0;
margin-right: 0;
text-align:center;
}
ul.navlist
{
margin-left: 0;
padding-left: 0;
white-space: nowrap;
}

.navlist li
{
display: inline;
list-style-type: none;
}

.navlist a { padding: 3px 10px; }

.navlist a:link, .navlist a:visited
{
color: #fff;
background-color: #036;
text-decoration: none;
}

.navlist a:hover
{
color: #fff;
background-color: #369;
text-decoration: none;
}
–>
</style>

HTML

<div class=”navcontainer”>
<ul class=”navlist”>
<li class=”active”><a href=”#” class=”current”>LINK1</a></li>
<li><a href=”#”>LINK2</a></li>
<li><a href=”#”>LINK3</a></li>
<li><a href=”#”>LINK4</a></li>
<li><a href=”#”>LINK5</a></li>
</ul>
</div>

Here is the same CSS horizontal menu using DIV IDS

CSS


#navcontainer
{
margin-left: 0;
margin-right: 0;
text-align:center;
}
ul#navlist
{
margin-left: 0;
padding-left: 0;
white-space: nowrap;
}

#navlist li
{
display: inline;
list-style-type: none;
}

#navlist a { padding: 3px 10px; }

#navlist a:link, #navlist a:visited
{
color: #fff;
background-color: #036;
text-decoration: none;
}

#navlist a:hover
{
color: #fff;
background-color: #369;
text-decoration: none;
}
–>
</style>

HTML


<div id="navcontainer">
<ul id=”navlist”>
<li id=”active”><a href=”#” id=”current”>LINK1</a></li>
<li><a href=”#”>LINK2</a></li>
<li><a href=”#”>LINK3</a></li>
<li><a href=”#”>LINK4</a></li>
<li><a href=”#”>LINK5</a></li>
</ul>
</div>

Posted by Herman on November 22nd, 2007 .
Filed under: CSS, Web Design | 1 Comment »

Static Blogging Review

Want to build a static web site and keep all the benefits of a Word Press Blog?
Need a content management system that is easy to set-up and maintain?
Do you want to attract lots of web traffic from the search engines?


Read the rest of this entry »

Posted by Herman on November 2nd, 2007 .
Filed under: Blogging, Web Design | 5 Comments »

Convert Blog to Static Site - Part 3

If you wish to create a static web site and keep all the benefits of a blog or content management system (CMS) then use Word Press to build it. I’ve used a few of the popular CMS products to build web sites however none of them is as easy to use as Word Press.


Read the rest of this entry »

Posted by Herman on October 30th, 2007 .
Filed under: Blogging, Web Design | No Comments »

Convert Blog to Static Site - Part 2

6. Community networking

A blog allows you to easily build a community for your niche whether it is painting, car racing, or gardening. Offering valuable, fresh content to your community members will make them want to return and also link to your blog.

7. Multiple users

If you have several members within your community that want to contribute to your blog, you can create separate logins for each of them. This can help to create fresh content without you doing all the writing.

8. Interactive

Visitors can interact with your blog by adding comments to your blog posts. They will link to your content from their own blog or add your blog to their blogroll.

9. Schedule your posts

If you want to add your content on a later date ie a few days or weeks later) you can use the time stamp feature in WordPress.
http://faq.wordpress.com/2006/05/31/can-i-schedule-a-post/

10. Offer email updates

Have people subscribe to your blog by email by registering with feedburner.
http://faq.wordpress.com/2006/10/11/how-can-i-offer-email-updates/

How to Convert Your Blog to a Static Site

If you want to create a static site (so it looks like a regular site and not a blog) but keep all the above benefits of a blog
please visit
Static Blogging

You will receive 4 hours of video tutorials, custom plugins and themes.

Posted by Herman on October 27th, 2007 .
Filed under: Blogging, Web Design | 2 Comments »

Convert Blog to Static Site - Part 1

A static site is what most people have been using to get their businesses on the Net. These days blogs are becoming popular because they are easier to create and maintain, however there is now an easy way to convert a blog to a static web site and still retain all its benefits.

What is a Blog?

A blog is a database-driven web site that generates dynamic web pages. It can be easily and frequently updated. Often a blog is added to a static web site or stands on its own.

What is a Static Site?

A static site used html pages and is not database-driven. It is still the most popular type of web site because it’s relatively easy to build.

Top 10 Benefits of a Blog

1. Separate content from design

If you use blogging software such as WordPress you have hundreds of templates to choose from. Because the design is separate to the template design you can change the design of your whole web site in a few seconds and still keep the content intact.

2. Easy installation and set-up

Most web hosts enable you to do a one click installation of WordPress from the cpanel (admin panel). If your web host doesn’t have this feature find another. With the admin panel of your WordPress Blog you can change the theme with another click or choose from hundreds of doing a search on Google for “WordPress Themes”

3. Easy maintenance

Instead of using FTP to upload and download files, you simply login to the admin panel, write your content, then save it. You’re new web page is immediately generated.

4. Search engine friendly

Because blogs usually contain fresh content, the search engines love them and will index the pages faster than static sites.

5. Automatic RSS Feeds
Your content is automatically syndicated to RSS directories because RSS is already built into the WordPress blog. Every time you write a post the software pings the RSS feed directories. This means more traffic to your blog.

Posted by Herman on October 26th, 2007 .
Filed under: Blogging, Web Design | 2 Comments »