Essential Web Concepts Blog

A question we commonly hear from small business owners goes something along the lines of “Well, we revamped our website a few years ago and it still looks ok. Do we really need to invest money into a redesign?”

Of course, there are many strategic and marketing opportunities that come along with launching a new website such as rebranding, changes to target customer segment, taking advantage of the latest trends and technologies, or simply updating the look and feel of the site to match the ever changing expectations of the site’s users.

However there can be less apparent but even more important issues that also need attention. A site’s search ranking will be negatively impacted if it doesn’t keep up with best practices for Search Engine Optimization (often abbreviated to just SEO). While not nearly as obvious as a stale looking design, not keeping up with trends in search will result in lower organic search rankings and lost sales.

How search engines see your site

Keep in mind that while a human visitor to a website sees all your fancy graphics and presentation:

A search engine (for the most part) is limited to looking at the code that makes up a page (you can view this using ‘View Source’ or a similar command depending on browser):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

      <div class="article"> 
        <div class="photo"> <img src="img/home_ss_design.jpg" alt="Website Design" /> 
          <div class="caption"></div> 
        </div> 
        <div class="story"> 
          <div class="banner"> 
            <div class="title"><h2>Website Design</h2></div> 
            <div class="subTitle">Local expertise matching the unique needs of your business</div> 
          </div> 
          <div class="content"> 
            <p>You've got a lot of things to consider when creating a website design for your business.  Leverage the experience of Essential Web Concepts throughout the process.<br /><br />Our balance of business and design skills ensure you arrive at the optimal solution.
            </p> 
            <div class="button"><a href="services/design.php"><span>Learn More</span></a></div> 
          </div> 
        </div> 
      </div>

The code for a website page isn’t something most business owners see on a daily basis, but it has a huge impact on how a site ranks with search engines.

Search factors worth discussing with your web designer

1. What is the underlying structure for arranging the different blocks of content on your site? The current best practice is to use Cascading Style Sheets (CSS) to separate the presentation of the page from the content itself (often referred to as ‘markup’). However many old sites still use a table of rows and columns for layout that makes a page more difficult for a search engine to understand. A modern website should focus on creating semantic markup for search engines, and the markup for table based designs used to layout the page does not meet this requirement.

2. Still on the topic of semantic markup, modern web designs should also be laid out with a clear hierarchy using ‘header tags’ (These will show up as <h1> <h2>, etc in the page source). The different levels of headers (1 through 6) create a clear outline of what a page is about, making it more apparent to the search engines what the page should be ranked for. Without them, the search engine has no idea which content is the most important on the page.

3. If you didn’t pay attention to the specific words used on each page of a site when it is created, then chances are some improvements in search ranking can be made by taking a look at ‘keyword density’. Selecting specific keyword phrases and writing the page content around them are an important piece of how a page is ranked.

Conclusion

When making a decision to update your business’ website, be sure to factor in how the markup of a site will impact search engine rankings as well as the visual benefits a redesign can offer. Both are extremely important to getting a return on your investment in a redesign.

If you’ve ever tried to put a Google Map inside a jQuery Accordion or Tab panel, you know that unless the map is in a panel/tab that is initially active, you’ll get some annoying problems with the map not displaying correctly (see link for example). This seems to be due to the fact that these blocks have

display: none;

set by jQuery. There are a few tutorials online about how to fix this issue for tabbed panels, but not as much info on getting it to work for accordions.

This post is a simple example of how to get rid of the map artifacts using the Google Maps Javascript API V3.

We’ll start with the example code for the accordion from the jQuery site. The map will be placed in the ‘mapCanvas’ div on the third tab. Rather than including a map like we normally would:

var latlng = new google.maps.LatLng(32.334167, -95.3);
 
var myOptions = {
	zoom: 8,
	center: latlng,
	mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map($('#mapCanvas')[0], myOptions);

We’re going to bind the rendering of the map to happen after the first time the third tab is opened. The relevant code looks like:

var map = null;
var latlng = new google.maps.LatLng(32.334167, -95.3);
function initializeMap() {
	var myOptions = {
		zoom: 8,
		center: latlng,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	};
	return new google.maps.Map($('#mapCanvas')[0], myOptions);
}
 
$(document).ready(function() {
	$("#accordion").accordion();
 
	$("#accordion").bind('accordionchange', function(event, ui) {
		if (ui.newContent.attr('id') == 'tabThree' && !map)
		{
			map = initializeMap();
		}
	});
});

This example was tested in FF3.6, Chrome 10, Safari 5, and IE 8.

Download: Complete example code.

Today we’ll start a multi-part part series designed to familiarize business owners with concepts they’ll need to understand when launching an eCommerce website.  We’ll assume you’ve already done the research into whether online commerce makes financial sense for your business and jump straight to what you’ll need to know to get your online business started.

We’ll begin with a couple topics on processing payments in an online store.  This installment will focus on the checkout process as it can have a huge impact on the total cost to process online payments.

Control over the Checkout Process

Every business starting an online store has a tradeoff to make in terms of ownership of their checkout process vs. cost to process payments.  In this case, ‘ownership of checkout process’ refers to what a customer experiences when placing an order in an online store.  Does the entire process take place on your web site, or are customers handed off to a third party for the payment processing?

Third Party Payment Processing

For businesses with relatively low online sales, third party processing can often be the most cost effective solution for accepting payments.  Two popular providers of this service are Paypal’s Web Payments Standard and Authorize.net’s SIM.  In the checkout process, customers are redirected to the third party’s site (which can usually be customized to a similar look and feel to the rest of your site) to enter credit card information and make a payment.  After the third party has completed processing the customer’s credit card, they are returned to your online store for order confirmation.

Advantages: Third parties bear the heavy burden of PCI compliance (we’ll cover this in a future topic) and your online store is considered ‘out of scope’ because it never sees, stores, or touches a credit card number.  The expense of maintaining a PCI compliant store yourself can be cost prohibitive for very small businesses.

Disadvantages: Some negative impact to conversion rate of online orders when the handoff occurs (some customers will abandon their orders when they get sent to the third party’s site).

Owning the Entire Checkout Process

For online stores that have a business need to customize and control the entire customer experience during a purchase, taking ownership of the checkout process is a must.  In almost all cases, this will mean additional expense, either due to PCI compliant hosting, higher fees, or both.  While this type of store traditionally required store owners to purchase PCI compliant hosting solutions, several new options including CRE Secure and Authorize.net’s DPM Method are becoming available that allow customers to pay on your web site without your server touching any credit card information (this is accomplished through some special coding your web developer can explain), removing the need for your site to be hosted on PCI compliant servers.

Advantages: Your web designer can customize the checkout experience of your store however you’d like.  Your customer has a better purchasing experience that takes place entirely on your website.

Disadvantages: Increased cost to process transactions and greater care required to ensure the online store is PCI compliant.  Added expense will depend on the implementation.

As always, feel free to Contact Us if you’ve got any questions or need help getting started.

Please visit the Essential Web Concepts booth this Thursday at the Lindale Area Business Showcase.  The event will be held at the First United Methodist Church Family Life Center.  Should be a great opportunity to meet and network with local business owners and others in the community.

We hear there’s a cash drawing as well!

See you there!

We’re excited to announce the opening of Essential Web Concepts, a web design and consulting firm located in Lindale, TX and dedicated to serving the greater Tyler, TX area.

We have a passion for working closely with each client to understand the unique needs of their business and utilizing our expertise to match those needs with solutions that create a successful web presence.  Our goal is to serve as a technical resource for our clients and help them understand the  options for marketing themselves and doing business on the web.

Please a minute to browse around the site and let us know what you think!