So we have decided to provide the following post, which shows very easily how to use the power of jQuery to create a rather nice horizontal accordion effect.

Click here if you would prefer to skip straight to the demo

1. The HTML

First we create an unordered HTML list with id=”accordion” and include some content in each of the li tags – since the accordion is horizontal we have decided to use images to create the section labels:

<ul id="accordion">
    <li>
      <a href="#">
        <img src="images/section_1.png" />
        <strong>Section 1 Header</strong><br/>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis volutpat quam, non suscipit arcu accumsan at. Aliquam pellentesque.
      </a>
    </li>
    <li>
      <a href="#">
        <img src="images/section_2.png" />
        <strong>Section 2 Header</strong><br/>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis volutpat quam, non suscipit arcu accumsan at. Aliquam pellentesque.
      </a>
    </li>
    <li>
      <a href="#">
        <img src="images/section_3.png" />
        <strong>Section 3 Header</strong><br/>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis volutpat quam, non suscipit arcu accumsan at. Aliquam pellentesque.
      </a>
    </li>
    <li>
      <a href="#">
        <img src="images/section_4.png" />
        <strong>Section 4 Header</strong><br/>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis volutpat quam, non suscipit arcu accumsan at. Aliquam pellentesque.
      </a>
    </li>
</ul>

2. Style The Accordion

Next we add a few CSS rules, which will help style the accordion and its content:

#accordion {
list-style: none;
margin: 0;
padding: 0;
height: 200px;
overflow: hidden;
background: #7d8d96;}

#accordion li {
float: left;
border-left:
1px solid #fff;}

#accordion li a {
display: block;
height: 170px;
width: 50px;
padding: 15px 0;
overflow: hidden;
color: #fff;
text-decoration: none;
font-size: 16px;
line-height: 1.5em;}

#accordion li a img {
border: none;
border-right: 1px solid #fff;
float: left;
margin: -15px 15px 0 0;}

#accordion li a.active {
width: 445px;}

The main items to take note of here are the widths of the anchor tags, which need to be the same as the min-width setting in our jQuery below and the width of the “active” tag, which should equal the max-width of the accordion section.

The “#accordion li a.active” is also required to ensure that the default section is open when the page loads.

The rest is mainly styling of the background, text and positioning of the section header images.

3. The jQuery Code

Finally the jQuery to create the horizontal accordion effect – in this example we have used the “hover” event to trigger the animation:

$(document).ready(function(){

  activeItem = $("#accordion li a:first");
  $(activeItem).addClass('active');

  $("#accordion li a").hover(function(){
      $(activeItem).animate({width: "50px"}, {duration:300, queue:false});
      $(this).animate({width: "445px"}, {duration:300, queue:false});
      activeItem = this;
  });

});

You can change which is the default open section upon page load by changing the “activeItem” variable – in our example we have used “#accordion li a:first” to select the first list item.

Other options that can be changed include the min-width (in this case 50px) and the max-width, which we have set to 445px – the values in these lines must match the values given in the CSS rules above.

The duration setting controls the time in milliseconds for the accordion to animate from minimum to maximum width – again these can be set according to your preference.

The queue:false is required to stop the accordion capturing every hover event and continuing to animate after the mouse has left the hover area.

View the jQuery horizontal accordion demo.

Question: What does it cost, and what results should I expect?

Answer:   Whatever the market will bear, and how long is a piece of string?

For SEO/SEM there is no single answer to those questions – and one question leads to another.  What do you want to achieve, and what resources can you commit to it?  Resources are more than just funds; they include management strategy and work effort.

The following is an outline of strategies and available options for successful internet marketing.  Specific recommendations and scope of work proposals require evaluation and discussion of the client’s needs, and the current status of website(s) and maturity of internet presence.  Scope and scale of work (what, when and how much) are directly related to available budget guidelines.

We hope you find this information valuable.  Please contact us if you have specific questions or comments.

SEO / SEM

Onsite and Offsite

While they must be aligned and share common strategies, work is fundamentally separated by efforts done on the website, and work done off the site.

SEO and SEM should also be coordinated to maximize efficiency and effectiveness.

While there are numerous technical issues, the key to successful internet marketing is employing an organized and systematic approach, together with application of common-sense (assume nothing, everything for a reason).

Fundamental:  the better everything connects together, the better the desired results will be achieved.

Goals

Internet Presence, Generate Quality Traffic, Conversions, and Other Goals

Establishing well thought-out and communicated goals and expectations is important to do from the very beginning.

Internet Presence

Build foundation to support other goals by having a baseline of presence on the web.  For example if someone researches the company/website and specifically searches for it, how many results are found?  Six or 60,000?  Quality matters most, but quantity is important too.  Over time this also affects PR (page rank – ratio of incoming/versus outgoing links) and means better quality score, and should improve effectiveness of strategies.

Generate Quality Traffic

Targeting the right audience means using appropriate language, presented in the correct places and methods, and matching these to the website content.

Conversions

Keeping in mind the end-game at all times is important.  All roads lead to placing an order or ‘doing business’.  Of course, conversions can mean different things and often have multiple layers.  Relationship marketing might have a conversion goal of signing up for a newsletter, and this could be accomplished by the goal of people requesting free information or a product trial.  Usability, site architecture and visitor flow and behavior are related to both SEO and SEM.  People tend to do what you ask them to do, and make easy to do – the sooner you start asking the better.

Other Goals

Every organization has their specific ideas as to what is important.  Marketing must adapt to meet those goals.

Strategies

Content, Incoming Links, Keyword Phrases, Anchor Text Links, Quality Score, Strategic Promotions

Reach and relevancy – what is the message, who is it presented to, where and when.

Content

Make no mistake; there are no shortcuts and tricks.  Everything starts with quality content that is formatted correctly for usability and SEO.  Write for people first, then adjust and edit or SEO.

Incoming Links

The holy grail of SEO.  Google and the other search engines determine SERP (search engine result position) on numerous factors that are heavily weighted toward a website’s perceived value by the internet community.  If other websites (people) think your site is worthy of linking to, then you deserve to be ranked higher on the search results page.  The quality and type of these links is very important as the search engines map the web, and have sophisticated algorithms to evaluate and categorize websites.

Keyword Phrases and Anchor Text Links

What words do people use to find the content you want to present to them?  Can you compete against more established and organized competitors or should you find niches to exploit?  Anchor Text Links are extremely important and valuable – they should be relevant keyword phrases used in outside links coming into the site, and from within the site to connect pages and strengthen understanding of what content is about.

Quality Score

An extremely critical concept to keep in mind and that should be part of every element of the website and the off-site efforts.  From clean code to relevant words – it directly affects both SEO and SEM performance results.

Strategic Promotions

The shotgun blast approach of widespread targeting, or throwing spaghetti against the wall, to see what sticks do have a place in internet marketing strategies; but the reality of limited resources and time sensitive economics means picking targets and promotional offers that are competitive, effective and efficient is very important.

Target, try, test, evaluate and repeat.

Tools/Tactics

Analysis and Evaluation

• Google Analytics – powerful tool for free, other analytic tools are good, but GA is recommended
• Google Webmaster Tools – critical for evaluating the site, and presenting to Google
• Yahoo Site Explorer – similar reasons to Google webmaster tools, not as comprehensive
• Bing Webmaster Tools – similar reasons to Google webmaster tools, not as comprehensive

Content

• Authoritative and Relevant content is what gets found and noticed. Keyword rich content and anchor text links throughout the site. Challenge: typical descriptions are worded differently than the usual way people search.
• Blogs – a WordPress blog is almost mandatory. Sites must have a quantity of high-quality, original non-duplicated content formatted properly for SEO.
• RSS Feeds – for human interest and critical for SEO
• Word Count and Page Count – more words, more pages do matter.
• Landing Pages – should be different than typical content.

Site Structure

• Clean Code – must have proper coding without excessive errors. ‘no-follow’ outgoing links
• SEO Architecture – URL, Page Title, Meta Description, Meta Tags, H-tags, Content, Images, Links & Navigation, dynamic XML sitemaps

Backlinks/Bookmarking

• Articles – Quality articles (authoritative and relevant content) are a very good way to get quality links, labor intensive
• Article Spinning – great way to generate links, presence and real direct traffic, semi-automated tools available, very labor intensive
• Social Bookmarking – looked for by engines, also generate traffic, semi-automated tools available
• Forum Profiles – good way to generate links, semi-automated tools available
• Forum Postings – can be good for links and traffic, need to be relevant and allow ‘follow’, labor intensive
• Blog Comments – can be good for links and traffic, need to be relevant and allow ‘follow’, labor intensive
• Evaluation Site Submission – good to start getting site crawled and for backlinks, semi-automated tools available
• Search Engine Submissions – hundreds of search engines exist, semi-automated tools available
• Directory Listings – one of the original backlink strategies still plays a role, but not a priority, semi-automated tools available. DMOZ very valuable, but arbitrary inclusion
• FFA – “free for all”, for the right niche can have surprising results, but not necessarily recommended
• Reciprocal Links – if done properly as part of real community networking and resource sharing they can be very effective however heeding Google admonishments about bad community and paid link farms is important. Quality matters – doing this correctly requires resources and involvement from site owners.

Advertising and Miscellaneous

• Press Releases – once a week (more or less) of real, quality news, properly formatted – free or paid
• Videos (you tube etc)
• Article Incubators – manually provide information and solicit interest from vertical market media/authorities
• Search Engine Marketing Text and Banner Ads – Google, Bing, Yahoo, Facebook
• Classified ads, Sponsorship Banner, and Text ads on relevant forums, authoritative blogs, and websites.
• Email Marketing – solicited and unsolicited – must adhere to best practices guidelines

Initial Steps

• Establish Budget Guideline
• Establish Goals
• Market Analysis – target audience, keywords – usage, competitive rankings, competitor sites and strategies
• Strategic Marketing Plan – targets, reach and relevancy, methods, schedule
• Site Development – evaluate site architecture, update according to strategies
• Content Development – onsite and offsite
• Daily Activity Work Plan

Resources

Design Chemical has an 88-point website SEO evaluation outline available – click here

The Image

Use the same naming system for the 2 images as in our previous post – i.e. normal state called xxxxxx_off.jpg and the clicked state xxxxxx_on.jpg and add the class “img-swap” to the image tag in your HTML:

<img src="xxxxxx_off.jpg" class="img-swap" />

jQuery Code

With just a few lines of jQuery you can now add the image swap function on click to any images in your web pages:

$(function(){
  $(".img-swap").live('click', function() {
    if ($(this).attr("class") == "img-swap") {
      this.src = this.src.replace("_off","_on");
    } else {
      this.src = this.src.replace("_on","_off");
    }
    $(this).toggleClass("on");
  });
});

See the demo

The HTML

First we create a nested unordered list, which will include all of our links. Give the first ul tag a unique id – we use #nav:

<ul id="nav">
  <li><a href="#">Item 1</a>
    <ul>
      <li><a href="#">Sub-Item 1 a</a></li>
      <li><a href="#">Sub-Item 1 b</a></li>
      <li><a href="#">Sub-Item 1 c</a></li>
    </ul>
  </li>
  <li><a href="#">Item 2</a>
    <ul>
      <li><a href="#">Sub-Item 2 a</a></li>
      <li><a href="#">Sub-Item 2 b</a></li>
    </ul>
  </li>
  <li><a href="#">Item 3</a>
    <ul>
      <li><a href="#">Sub-Item 3 a</a></li>
      <li><a href="#">Sub-Item 3 b</a></li>
      <li><a href="#">Sub-Item 3 c</a></li>
      <li><a href="#">Sub-Item 3 d</a></li>
    </ul>
  </li>
  <li><a href="#">Item 4</a>
    <ul>
      <li><a href="#">Sub-Item 4 a</a></li>
      <li><a href="#">Sub-Item 4 b</a></li>
      <li><a href="#">Sub-Item 4 c</a></li>
    </ul>
  </li>
</ul>

Style The Menu With CSS

For this tutorial we add a little styling to the menu and use CSS to hide the sub-menus using “display: none;”:

#nav {float: left; width: 280px;  border-top: 1px solid #999; border-right: 1px solid #999; border-left: 1px solid #999;}
#nav li a {display: block; padding: 10px 15px; background: #ccc; border-top: 1px solid #eee; border-bottom: 1px solid #999; text-decoration: none; color: #000;}
#nav li a:hover, #nav li a.active {background: #999; color: #fff;}
#nav li ul {display: none;}
#nav li ul li a {padding: 10px 25px; background: #ececec; border-bottom: 1px dotted #ccc;}

The jQuery Code

To create the accordion effect the code is extremely simple:

$(document).ready(function () {
  $('#nav > li > a').click(function(){
    if ($(this).attr('class') != 'active'){
      $('#nav li ul').slideUp();
      $(this).next().slideToggle();
      $('#nav li a').removeClass('active');
      $(this).addClass('active');
    }
  });
});

First we use the child selector “>” to ensure that only the parent links activate the accordion menu – otherwise you would end up closing the menu each time a sub-link is clicked.

We add a new class to the active item – this allows us to not only style the open accordion menu but also identify if a sub-menu is open when a link is clicked. The above jQuery code will only work on closed menu items.

View the jQuery vertical accordion menu demo.

Today’s post is going to expand on the earlier tutorial and add up/down buttons, which will allow you to change the order of the option items in the select list.

The HTML Code

The HTML code for the select lists remains the same as the earlier post, except with the addition of the “up” and “down” links:

<form>
  <fieldset>

    <select name="selectfrom" id="select-from" multiple size="5">
      <option value="1">Item 1</option>
      <option value="2">Item 2</option>
      <option value="3">Item 3</option>
      <option value="4">Item 4</option>
    </select>

    <a href="JavaScript:void(0);" id="btn-add">Add &raquo;</a>
    <a href="JavaScript:void(0);" id="btn-remove">&laquo; Remove</a>

    <select name="selectto" id="select-to" multiple size="5">
      <option value="5">Item 5</option>
      <option value="6">Item 6</option>
      <option value="7">Item 7</option>
    </select>

    <a href="JavaScript:void(0);" id="btn-up">Up</a>
    <a href="JavaScript:void(0);" id="btn-down">Down</a>

  </fieldset>
</form>

The jQuery Code

Again, keeping the same code for the add/remove functions, we just need to add the additional jQuery to handle the up/down links:

$(document).ready(function() {

    $('#btn-add').click(function(){
        $('#select-from option:selected').each( function() {
                $('#select-to').append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>");
            $(this).remove();
        });
    });
    $('#btn-remove').click(function(){
        $('#select-to option:selected').each( function() {
            $('#select-from').append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>");
            $(this).remove();
        });
    });

    $('#btn-up').bind('click', function() {
		$('#select-to option:selected').each( function() {
			var newPos = $('#select-to option').index(this) - 1;
			if (newPos > -1) {
				$('#select-to option').eq(newPos).before("<option value='"+$(this).val()+"' selected='selected'>"+$(this).text()+"</option>");
				$(this).remove();
			}
		});
	});
	$('#btn-down').bind('click', function() {
		var countOptions = $('#select-to option').size();
		$('#select-to option:selected').each( function() {
			var newPos = $('#select-to option').index(this) + 1;
			if (newPos < countOptions) {
				$('#select-to option').eq(newPos).after("<option value='"+$(this).val()+"' selected='selected'>"+$(this).text()+"</option>");
				$(this).remove();
			}
		});
	});
});

1. The “Up” Link

First we tackle the “up” link. Basically how we handle this is to retrieve the index value of each selected option, set the variable for the option items new position as … current index – 1, recreate the option HTML and insert it “before” the new index position. Finally – remove the old HTML from the list.

In order to make sure that we dont lose the option item off list list by trying to insert at an index position < 0 we do a quick check on the current position and only run the code if index > 0.

2. The “Down” Link

The down link is very similar except we set the new index postion to “current + 1″ and insert the option HTML “after” this value.

Once again we need to make sure that we dont lose the option item off the bottom of the list so we include an “if” statement, which checks the total number of items in the list and only runs the code if the new index position is less than the total items.

The above code also works for multiple selected items.

Check out the change order of select lists demo.

In the following tutorial I will show you how to use just a few lines of jQuery to create an add/remove select list for your website form.

The Form HTML

<form>
  <fieldset>

    <select name="selectfrom" id="select-from" multiple size="5">
      <option value="1">Item 1</option>
      <option value="2">Item 2</option>
      <option value="3">Item 3</option>
      <option value="4">Item 4</option>
    </select>

    <a href="JavaScript:void(0);" id="btn-add">Add &raquo;</a>
    <a href="JavaScript:void(0);" id="btn-remove">&laquo; Remove</a>

    <select name="selectto" id="select-to" multiple size="5">
      <option value="5">Item 5</option>
      <option value="6">Item 6</option>
      <option value="7">Item 7</option>
    </select>

  </fieldset>
</form>

So here we have just 2 select lists with sample data – the top one listing the items “from”. There are also 2 anchor tags, which provide the “add” and “remove” links.

The jQuery Code

$(document).ready(function() {

    $('#btn-add').click(function(){
        $('#select-from option:selected').each( function() {
                $('#select-to').append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>");
            $(this).remove();
        });
    });
    $('#btn-remove').click(function(){
        $('#select-to option:selected').each( function() {
            $('#select-from').append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>");
            $(this).remove();
        });
    });

});

Basically what we do here is that when either of the “add” or “remove” links are clicked jQuery will get the values for all of the relevant options that are selected, recreate each option item HTML, insert it into the opposite select list and finally remove these items from the original list.

Check out the jquery add & remove select list demo.

The example below came from a recent project to create an internal web application for a client, which utilised tab navigation, jQuery and AJAX to load data into the page without the need to refresh the web page.

1. The HTML Code

<ul id="nav">
  <li><a href="page_1.html">Page 1</a></li>
  <li><a href="page_2.html">Page 2</a></li>
  <li><a href="page_3.html">Page 3</a></li>
</ul>

<div id="ajax-content">This is default text, which will be replaced</div>

You can fill the “ajax-content” div with default text, which will be replaced when one of the tabs are clicked.

2. The jQuery Code

$(document).ready(function() {
    $("#nav li a").click(function() {

        $("#ajax-content").empty().append("<div id='loading'><img src='images/loading.gif' alt='Loading' /></div>");
        $("#nav li a").removeClass('current');
        $(this).addClass('current');

        $.ajax({ url: this.href, success: function(html) {
            $("#ajax-content").empty().append(html);
            }
	});
	return false;
    });
});

The above jQuery code will automatically use the URL written into each anchor tag as the source for the AJAX data.

So what is the above code doing?

1. When a tab is clicked we first empty the contents of the ajax-content div and then load a loading graphic, whilst the content is being retrieved.
2. The jQuery then removes the “current” class from the tabs and adds the class to the newly clicked anchor tag allowing you to style the tabs to show which one is now active.
3. Once the data from the URL has been retrieved the loading image is removed and the content loaded into the “ajax-content” div.
4. Finally, the “return false” command is used to prevent the default action of the tabs browsing to the content pages.

3. Loading A Default Page

If you wanted to use one of the external pages as your default content you can simply edit the code as below:

$(document).ready(function() {
    $("#nav li a").click(function() {

        $("#ajax-content").empty().append("<div id='loading'><img src='images/loading.gif' alt='Loading' /></div>");
        $("#nav li a").removeClass('current');
        $(this).addClass('current');

        $.ajax({ url: this.href, success: function(html) {
            $("#ajax-content").empty().append(html);
            }
	});
	return false;
    });

    $("#ajax-content").empty().append("<div id='loading'><img src='images/loading.gif' alt='Loading' /></div>");
	$.ajax({ url: 'page_1.html', success: function(html) {
            $("#ajax-content").empty().append(html);
	}
    });
});

Substitute the URL for your required page in the code.

A very simple yet effective way to create a basic jQuery and AJAX application for your website – Check out the demo.

1. Wordpress Theme Page Code

First create a new page for your theme. Then add the following code to the web page in the area where you normally display the main content:

<?php
global $more;
$more = 0;

  $post_per_page = 10; // -1 shows all posts
  $args=array('category_name' => 'Latest News', 'posts_per_page' => $post_per_page);
?>

<?php query_posts($args); ?>
    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

        <div class="post" id="post-<?php the_ID(); ?>">
            <h3><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h3>
            <?php the_content('read more ...'); ?>
        </div>

    <?php endwhile; ?>
<?php endif; ?>

The above code allows you to select posts from a specific categories and display the excerpts on the page. In this example we select our “Latest News” category – change the ‘category_name’ => ‘Latest News’ to suit your requirements.

You can also control the number of posts displayed by changing the “$post_per_page” parameter.

2. How To Use In Your Page

Very simply – upload your new template file to your themes folder, create a new page in your Wordpress admin and assign the new template file to this page.

There you have it – a custom page on your Wordpress website showing latest posts. To add more pages just repeat the process by creating a new theme page file and change category name parameter.

This can easily be achieved by using similar code shown in our previous posts on Using jQuery to Validate Search Box Input and Email Validation Using jQuery.

1. The Password Input Fields

<form method="post" name="form1" id="form-password" action="">
  <fieldset>
    <label>Password:</label>
    <input type="password" name="password" id="password" value="" size="32" />
    <label>Re-Enter Password:</label>
    <input type="password" name="password-check" id="password-check" value="" size="32" />
    <input type="submit" value="Submit" id="submit">
  </fieldset>
</form>

2. The jQuery Validation Code – Check That Both Passwords Match

jQuery(function(){
        $("#submit").click(function(){
        $(".error").hide();
        var hasError = false;
        var passwordVal = $("#password").val();
        var checkVal = $("#password-check").val();
        if (passwordVal == '') {
            $("#password").after('<span class="error">Please enter a password.</span>');
            hasError = true;
        } else if (checkVal == '') {
            $("#password-check").after('<span class="error">Please re-enter your password.</span>');
            hasError = true;
        } else if (passwordVal != checkVal ) {
            $("#password-check").after('<span class="error">Passwords do not match.</span>');
            hasError = true;
        }
        if(hasError == true) {return false;}
    });
});

The above code will perform the following checks upon clicking the submit button:

• Check that a password has been entered and return an error message if the input field is empty.
• Check that the “re-enter password” field contains text and return an error message if the input field is empty.
• Finally – compare both password texts to check if they match

If any of the validation checks return an error then the form submission on your website is stopped with the “return false” command.

Check out the demo.

In a recent project a client required validation on a search form input that would only allow numbers, letters and a “-”.

The Search Form

<form method="post" name="form1" id="search" action="">
  <fieldset>
    <label>Search:</label>
    <input type="text" name="search-text" id="search-text" value="" size="32" />
    <input type="submit" value="Submit" id="btn-search">
  </fieldset>
</form>

The jQuery Validation Code

jQuery(function(){
        $("#btn-search").click(function(){
        $(".error").hide();
        var hasError = false;
        var searchReg = /^[a-zA-Z0-9-]+$/;
        var searchVal = $("#search-text").val();
        if(searchVal == '') {
            $("#search-text").after('<span class="error">Please enter a search term.</span>');
            hasError = true;
        } else if(!searchReg.test(searchVal)) {
            $("#search-text").after('<span class="error">Enter valid text.</span>');
            hasError = true;
        }
        if(hasError == true) {return false;}
    });
});

The above code will first check that text has been entered and return an error message if the search box is empty. Then check, using a simple regular expression, that the entered text only contains alphanumeric characters or a “-”. If either of these validation checks return and error message then the form submission is stopped with the “return false” command.

Check out the demo.

A simple solution can be set up, which allows you to use just a single file containing all of your website’s email addresses and just a few lines of jQuery.

1. Create Your Email List

In a HTML document create a list of your email addresses by placing each one inside a span tag and assigning an ID – see example below:

<span id="email-1">somebody@xxxxxxxxxx.com</span>
<span id="email-2">another@xxxyyyyxxxxx.com</span>

2. Add The jQuery Code

Now in the head of your web page add the following jQuery code:

<script type="text/javascript">
$(document).ready(function() {
	$(".email").each(function() {
		var var_email = $(this).html();
		$(this).load("email_list.html #"+var_email).append(var_email);
	});
});
</script>

In our example we have called the email file – email_list.html – you will need to change the above code to match your file name.

Using the Code in Your Web Page

To use this code all you need to do is wherever you would like an email address to appear is to include a span tag with the class “email” and inside the span tag write the ID of the email address you would like to insert. From our 2 example emails above we would therefore use the following:

<span class="email">email-1</span>
<span class="email">email-2</span>

The following source code:

<p>Suspendisse quis blandit justo <span class="email">email-1</span>. In laoreet pharetra condimentum. Donec at venenatis quam <span class="email">email-2</span>.</p>

Which is how it would appear to spam harvesters, would then appear on your web page to your visitors as:

Suspendisse quis blandit justo somebody@xxxxxxxxxx.com. In laoreet pharetra condimentum. Donec at venenatis quam another@xxxyyyyxxxxx.com.

“There is no such thing as bad publicity when you’re reading about yourself, unless its your obituary.”

One of our clients was concerned that their name and article was being associated with a ‘cheap’ discount domain name because their article was posted on a travel site offering cheap airline tickets, while they are offering a 4 star travel destination.
Unfortunately it is a balancing act, and a bit of a Catch-22.  Protecting brand image is important – so the client does  need to make the call whether to continue article spinning, but let’s review just what these articles are before doing that.

We spin an article to create a gazillion non-duplicated articles by inserting synonyms everywhere we can.  Sometimes the syntax and grammar gets a little clunky, but we do make an extra effort to make sure the content reads well under all combination of wording.

These articles then get submitted through subscription services to either blogs or article directories based on subject category.

These subject categories are standard off the shelf categories – and while everyone has a different list, they’re basically the same.

Travel and Leisure
Travel and Leisure, Boating
Travel and Leisure, Aviation
etc

Within each category there are dozens of websites that will post an article with backlinks to your site.

They accept the article because they want content, and then they display Google Ads in the hopes that people end up finding the article.

So it is an exchange of decent RELEVANT content , we get a decent relevant backlink to the website

One way to gauge the effectiveness of article posting is to subscribe to Google Alerts for key search terms.  The fact that these are showing up in Google Alerts is fantastic for a website.  It means the content is getting indexed by Google and the backlink to the site is getting recognized and evaluated, and Google spiderbots will follow the link to your site too – checking relevancy, registering what your site is about based on the anchor text link and all the keywords it discovers.  Also the fact that it happens quickly is very telling that Google respects the sites and indexes them quickly.  You might notice some Google Alerts popping up for things that are dated  six months ago.

Waiting six months is a lifetime on the internet.  Not all directories and blogs are created equal, and Google is a bit random (by design) so the more exposure you get the better.

The primary purpose of these article submissions is to get the backlinks.  This is what SEO and getting organic search traffic is all about.  Backlinks mean value and quality score for your website.  The article submissions are foundation building blocks for creating web presence for your site.

They are not really about what is to be presented to the target audience.

Having the articles read by people that follow the link, isn’t even really expected or intended.  However they do, traffic does arrive directly from these sites, but it is not why we’re doing the article submissions.  An extremely small percentage of people that see these articles are also looking for your site — but your site better have the relevant content on the site, and is getting indexed etc….

here’s some of the Catch-22 part:
So in the short run, there is an issue that people searching topics might actually find these articles rather than find your website, but then if you do the math it shrinks into a minuscule probability that there will be a negative connotation perceived by a target audience.  Most of the odd-ball and undesirable content is in adword ads, that people disregard.  The handful of cheesy domain names just don’t add up to much in the big picture.

Our articles are set not to display on adult, gambling, on-line pharmacy, or weight loss sites… but other than selecting categories to submit we’re at the mercy of sites.

I would stress that the benefits far outweigh the chance of any negative perceptions – exponentially.  The Google Alerts mash ads and article together and tend to make us focus on those articles a lot more than anyone else does.

Concerns about protecting brand are valid and it is worth talking about.   But these links are fundamental to having people find the

Web…. everything is connected by sticky strings of information…


It is a common mistake to think something like “we’ll design the site, and write the content, and then send it off for SEO”.  That means rewriting and re-designing each page…after rewriting and redesigning them from the old site to the new site.

Please forgive the following lecturing tone, but, well this is sort of a tutorial, so take advice on what you already know with a grain of salt, and please embrace/question/challenge the rest.   Some points will be stating the obvious, but there is also a lot of nuance and detail, so hopefully reading it carefully will be of benefit.

First things first – writing for the web is not technical.  When words like ‘code’, ‘tags’, ‘keywords’, ‘anchor text links’ or ‘format’ get thrown about, they are no different than ‘punctuation’, ‘word choice’, or ‘grammar’.  Really.  I have a certificate to teach English so I’m sort of qualified to say that!

Let’s set the scene:

Site visitors will vary widely by demographic and purpose.  Stereotypically they will fit within three general sales cycle categories.  Discovery – Research – Purchase.

Ecommerce buying emotional triggers include ‘fear’ and ‘guilt’, and ‘trust’ ‘value’ and ‘belonging’ are most important.  Instilling confidence through understanding is very important.  To achieve conversions the site needs to be understandable, and convey quality and trust.

Whatever business that can be “closed” on the site, should be closed through the site.  There probably won’t be a lot of personal follow-up for a very long time, and if we do marketing right there will be a lull, and then an avalanche of inquiries – and inquiries will turn into person to person contact that needs attention.    The site needs to support these issues.

Ideally there should be a lot of first visit conversions, and visitors should be expected to return multiple times. Relationship marketing (trigger “belonging”) is fundamental.  Content and layout needs to ‘ask for the order”

Returning ‘customers’ will be coming to ‘take care of business’ (information, contacts, etc) – but they are also ideal for cross-selling (a parent interested in the quality of the science classes finds out about after school programs or the futsal league – or spa treatment discounts for members, or swimming lessons, or wellness etc)  To me this translates into content that always hints at and leads to more information.

Reach, relevancy, audience, behavior, purpose, goals, style…

… downstream value, re-usability, — efficiency of effort(s)

Concepts/Definitions:

Search Engine Optimization SEO — is not technical.  it is about making the information findable.  The more understandable and the more organized the site is for humans, then Google and the search engines will follow.  Sure, there is a lot of technical stuff behind the scenes, but usually only to correct poor development practices.  Websites are software, but they are really quite simple once the basics are understood.  Hwoever, shortcuts cause more problems then most people realize.

URL – the website address for each page

Page Title – what you see in the browser tabs and at the top of the screen.  For PIA new-site these will be automatically generated for most pages from the header tags, so while really important for SEO, not something we have to think about too much.

Meta Description – what is displayed by Google and search engines on the search engine results page.  This is the 160-character paragraph that describes the Page.  Primary pages should be generated manually as Custom pages.  Secondary, less important pages should be generated automatically using a set phrase “Phuket International Academy” + headers from the page, and anchor text.

Headers, or H-tags – H1 through H6.  Content writing MUST use these protocols.
H1 – there should be one per page.  “About Us” for example.

Anchor Text Link – what sentence or paragraph describes the page, or describes the block of content.  Usually this will point at the page or content from another page or website.

Keywords/Keyword Phrases – SEO sees these as ‘what words do people use to search’, the content writer would see these as the words of interest to readers – emphasize them and repeat them.   The nuance and subtlety to this is that word order in phrases can be very important.  Keywords for ‘topics’ or pages require research, and writing must incorporate this research otherwise the content is not relevant to the target audience.  So it won’t be as interesting, and people won’t find it after searching on Google etc.

Article Spinning – the new method for generating both incoming traffic (people) and quality incoming links to the site (mandatory to achieve Quality Score and decent Search Engine Results Page performance) involves submitting articles to various blog and article directory submission services.  The trick is to have non-duplicated content for each submission.  This can be done by using synonyms and some code tags to tell software what to do.

Example:

Phuket International Academy (PIA) {Blueprint|Standard|Formula} for {Personal|Human} {Development|Achievement}

The Phuket International Academy (PIA) is a {innovative|pioneering|revolutionary|brand new} sports, education, arts and wellness facility {located|sited} Phuket Thailand.   {It|PIA} {is comprised of|comprises} three synergistic  centres: the PIA Day School, the PIA Sports, Arts and Wellness Centre and the PIA Mind Centre

When submitted to the article directories, random combinations will be generated and unique, non-duplicated content will be indexed by search engines.  People will find these articles, but more importantly if anchor text links are used then good quality links to the site are established and the Quality Score is raised.  There is some risk of diluting keyword ‘juice’ of the original site, so keywords in articles should be minimized – but anchor text should be relevant.

Under best practices each of these points need to be addressed when writing the original content.

For our core files we usually have the main directory structure set up:

• CSS folder
• Images Folders
• Javscript folder for jQuery plugins
• index.html file

The index.html file already contains the link to download the latest jQuery library and of course the link to the basic CSS file. The page structure has the div tags for the header, main content and footer and associated CSS rules set up in the style.css file ready to create the main web design layout.

The CSS structure includes:

• CSS reset – to remove all default presentation from HTML tags
• Coding to create a “sticky footer” on your web page
• CSS classes to style the website main navigation & footer navigation
• Basic form presentation
• CSS rules to to create buttons

Although you need to develop your own core files that work best for your style of web design, you can however
download a copy of our core files and are free to use these as a starting point or adapt them.

Using jQuery we can easily add this to the website by creating a regular expression, which checks for email addresses such as yahoo, gmail, hotmail, etc prior to submitting the form to the server. The regular expression can be adapted to reject any domain specified.

First add the form to your website using standard HTML code:

<form method="post" name="form1" action="">
  <fieldset>
   <label>Email Address:</labe>
   <input type="text" name="UserEmail" id="UserEmail" value="" size="32" />
   <input type="submit" value="Submit" id="btn-submit" />
  </fieldset>
</form>

Step 1 – Initiate the jQuery Validation

After adding jQuery to your website we set up the code that will perform the validation when the submit button is clicked – first clearing any existing error messages from previous attempts:

$(document).ready(function() { 

    $('#btn-submit').click(function() {  

        $(".error").hide();
        var hasError = false;

    });
});

Step 2 – Check that the Input Field is Not Empty

For the first step of the validation we want to add the jQuery code that will check if there is any text in the input field and if not return the appropriate error message and stop the form being submitted:

$(document).ready(function() { 

    $('#btn-submit').click(function() {  

        $(".error").hide();
        var hasError = false;

        var emailaddressVal = $("#UserEmail").val();
        if(emailaddressVal == '') {
            $("#UserEmail").after('<span class="error">Please enter your email address.</span>');
            hasError = true;
        }

        if(hasError == true) { return false; }

    });
});

Step 3 – Check that the Entered Text is a Valid Email Address

Our first regular expression will check to make sure that the entered text is a valid email address – i.e. contains at least one “.”, an “@” symbol and an appropriate top-level domain suffix (e.g. .com, .net, etc):

$(document).ready(function() { 

    $('#btn-submit').click(function() {  

        $(".error").hide();
        var hasError = false;
        var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;

        var emailaddressVal = $("#UserEmail").val();
        if(emailaddressVal == '') {
            $("#UserEmail").after('<span class="error">Please enter your email address.</span>');
            hasError = true;
        }

        else if(!emailReg.test(emailaddressVal)) {
            $("#UserEmail").after('<span class="error">Enter a valid email address.</span>');
            hasError = true;
        }

        if(hasError == true) { return false; }

    });
});

Step 4 – Block or Prevent Free Email Addresses – e.g. yahoo.com, gmail.com and hotmail.com

The 2nd regular expression will now check the entered text against our pre-defined domain names – in this case yahoo.com, gmail.com and hotmail.com. Once again an error message is displayed and the form submission stopped if the email address matches one of the domains:

$(document).ready(function() { 

  $('#btn-submit').click(function() {  

    $(".error").hide();
    var hasError = false;
    var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
    var emailblockReg =
     /^([\w-\.]+@(?!gmail.com)(?!yahoo.com)(?!hotmail.com)([\w-]+\.)+[\w-]{2,4})?$/;

    var emailaddressVal = $("#UserEmail").val();
    if(emailaddressVal == '') {
      $("#UserEmail").after('<span class="error">Please enter your email address.</span>');
      hasError = true;
    }

    else if(!emailReg.test(emailaddressVal)) {
      $("#UserEmail").after('<span class="error">Enter a valid email address.</span>');
      hasError = true;
    }

    else if(!emailblockReg.test(emailaddressVal)) {
      $("#UserEmail").after('<span class="error">No yahoo, gmail or hotmail emails.</span>');
      hasError = true
    } 

    if(hasError == true) { return false; }

    });
});

The above example can easily be configured to reject (or even accept) any specified email address. To see it in action – Check out our online demo of Email Validation Using jQuery.

Usually ordered lists are very simple to in XHTML create using the following code:

<ol>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
  <li>List item 4</li>
  <li>List item 5</li>
</ol>

Which will produce the following ordered list:

1. List item 1
2. List item 2
3. List item 3
4. List item 4
5. List item 5

Unfortunately HTML won’t automatically handle reverse numbering. Adding the numbers manually into a standard unordered list looked messy and I wanted a solution that would automatically renumber the list in case anyone else came along and added more items … jQuery to the rescue.

Using some of the usual jQuery magic we can add the following code to the head of the document:

$(document).ready(function() {   

   var countli = $('ol > li').size();
   $("ol > li").each(function(i) {
         var attrvalue = countli - i;
         $(this).attr("value",attrvalue);
   });
});

This will automatically reverse order all of the items in the ordered lists on the web page by adding the “value” attribute to each list item.

See demo for creating a reverse order ordered list using jQuery.

With the jQuery javascript library already added to your website add the following javascript code between the head tags in your web page:

jQuery(function(){
     $(".img-swap").hover(
          function(){this.src = this.src.replace("_off","_on");},
          function(){this.src = this.src.replace("_on","_off");
     });
});

Then simply create your 2 images – normal state called xxxxxx_off.jpg and the hover state xxxxxx_on.jpg, add the css class “img-swap” to the image tag in your html and jQuery will do the rest … see demo below:

There are a number of websites and services to help evaluate the quality of your potential link partners, and while it is important, and certainly part of our process as hired SEO consultants, you don’t necessarily need to agonize over this  – especially since you have a newish site and are hungry to find links.

When looking at potential sites to exchange links with, the first thing to look into is whether they have a Google Page rank higher than yours. (typically PR goes from 0 to 5 – there are lots of sites that rate higher but aren’t typical).  You normally don’t want to link to someone less than 3 but if you go to the site and it looks like the care about quality content and they are just starting – you can help each other by linking and both will improve.

Google Page Rank is a measure of how many relevant sites link to you – and it comes into play regarding your SERP – search engine results page position (top ten or somewhere in the hundreds or nowadays millions).

If you download the google toolbar for either Internet Explorer or Firefox, the PR ranking of the page you are visiting is displayed when you visit their site.

If you want to really learn about a website there is a great add-on for Firefox — go to the firefox add-on site (search for that)  — then search for add-ons for  wmtips – they will display an addon called ‘info’ – go ahead and add that (download and install)- after it installs etc you will see a little icon in the lower right of your browser screen that says ‘info’ when on a page you’re interested in click that icon – a new tab will open up with all kinds of info about the site, google rank, keywords, when it was created, registered domain owner etc — very useful stuff.

Most important thing about assessing whether a link is suitable or not, is whether it is a ‘relevant’ site to yours.  Fashion and fashion accessories should mean that sunglasses and handbags are related – but Googlebot is a piece of software – it contains advanced algorithms but it is still sort of dumb, it only knows what you tell it.  So if there is some doubt about whether a site is relevant, you need to look at their page title, meta description and keywords.  Googlebot is smart enough to use a little thesaurus knowhow so if the words aren’t exactly the same, it still knows enough if they are related.

It is also critically important to avoid link farms and paid link schemes – a lot of sites have self-destructed doing this.  Don’t.

It’s also important to remember not to submit just www.worldsgreateswebsite.com but http://www.worldsgreateswebsite..com/products.htm (PLEASE NOTE  the extension at the end… its always a good idea to go the page you want people to link to and copy the link location from your browser – sometimes there are a lot of add on parameter data you don’t want either – so if in doubt contact us, we’ll let you know.

Log in, add a new post, select a category, publish.

If you use good keywords, write good content, the world will find you.

We can help you do this, just contact us.

What we mean by this is something like:

www.bestspyphone.com

www.bestspyphone.com/parental-control-software.html

And then the page title, the meta description, headers and content must use those keywords.

Simple stuff really, but you’d be surprised how overlooked this is.

Thanks for visiting.

Of course when we talk SEO we’re really talking about keywords. Keywords aren’t that mysterious – they’re just the terms people use to search, so you want the search engine spiders to associate your page with those terms.  So the trick is pick one, two or three keyword/keyword phrases that you want associated with that page.  That might be the hardest part – narrowing down the words to less than a handful.

So to be most effective, the URL should include a keyword you want to ‘own’, then the page title has that or very closely related term, then the meta description includes it, and the H tag headers have the same and related terms, and the content has bolded, and/or underlined the same words.  Yes you are repeating it over and over.  That isn’t “stuffing” that is making it clear to the spiders, and much more importantly, clear to the human visitors what the page is about.

If you approach that intuitively it makes sense.  Tell me what you’re going to tell me, tell me, and tell me what you told me…  Peoples eyes go to the headers and bold text.  If that is what they are searching for you are showing them what they want to see.  Of course, you should have relevant content to back it up!

We can either produce these, or at least advise on how to get the best results from them.

Website directories give your site a quick description and a link to a landing page. This is a proven way to build a many backlinks in a short period of time. They won’t perform miracles, but directories can help when combined with other SEO techniques.

SEO blogging gurus have a variety of opinions ranging from Google doesn’t count directories anymore, to you need 2500 directory listings to make an impact.  We’re doing some testing to determine effects but it is difficult to determine exactly what benefits you get.  But do keep in mind that Google penalizes paid links so my advice is to avoid paying for links of anykind.  The directory submission services that offer manual linking service may be okay, but again what they do is out of your control so not necessarily a sure bet either.

Directory submission used to be the wholy grail, but things change and I would move this down the ‘to do’ list.  Blogging is what gets it done, and the better the content you offer about what you know about the better.

Thanks for visiting.

While you’re waiting for SEO to take affect, you might want to consider implementing Search Engine Marketing SEM to either jumpstart your business or as a permanent part of your business development portfolio.

We can help design, develop and manage you Google Adwords, Bing, Yahoo or Social Networking Advertising (Facebook) campaigns.

We are also experts at export shipping supply chain logistics management and can take care of all aspects of your purchase.

Combined with our expert printing services we’re an ideal choice to handle your Corporate Gifts, Promotional and Specialty Item projects.   From logos printed on chopsticks to complete table-settings Design Chemical specializes in Home and Gift supply.

Business Cards, Brochures, Catalogs, Posters and Specialty Printing.

Just about anything.  From paper to chopsticks, to crocodile leather.

Design, layout and production including Spot UV and Silver foil as well as others.

Short run printing.  Responsive and reliable professional service.

More information on standard and specialty printing can be found on our Bangkok Printing page

or visit the Brochures Blog, Business Card Blog or Printing Blog

Ask about our Sourcing and Buying Services too.

Design Chemical is focused on proper code, along with leveraging a variety of tools to make the eCommerce shopping cart both user friendly, as well as, SEO effective.

CMS Content Management Systems, eCommerce sites, Graphic Image Galleries, Databases, Blog Setup, Forum Setup, SEO Search Engine Optimization, SEM Search Engine Marketing, Traffic Analytics, and Web Hosting

A variety of technical skills and a commitment to professional service  make Design Chemical a good choice for Web Design and Web Development in Bangkok and around the world.

• eCommerce
• CMS Content Management Systems,
• jQuery
• Dynamic Sites
• Image Galleries
• Database
• Blogs
• Forums
• SEO Search Engine Optimization
• SEM Search Engine Marketing
• Analytics
• Web Hosting

A broad range of technical skills combined with a commitment to service and professionalism makes Design Chemical the best choice for Web Design and Web Development in Thailand and around the globe.

When clients have paid to have someone generate links we’re usually faced with the need for a complete do over in order to start generating quality incoming links.  We definitely will eliminate questionable outgoing links.  The next several check- list items involve evaluating the link situation and making recommendations on how to proceed.

What do we mean by “bad links”?

We’ve noticed people continue to use techniques for search engine optimization to generate incoming links that stopped working years ago.  Namely link schemes for paid links, and potential ‘black hat” techniques trying to fool the search engines.  We see a lot of them too, especially here in Thailand.  Five year old techniques do more harm than good.

Not all incoming links are valuable, and some will get your site a black mark.  More on this topic soon.

Thanks for visiting.