Data driven web sites are da bomb, in my not-so-humble opinion. The ability to drive information through a slim passage and have that information display, in various ways, is without a doubt amazing. Anything can be manipulated, altered, structured, added, removed and decided before it even hits the screen. Systems like WordPress, Joomla, Drupal have had their day in the sun. On the horizon are even more progressive, minimalistic UCGm [User Generated Content management] systems that will have all of us programmers gushing like school-boys. Old[er] folks, like myself, who worship L, M, W -AMP need to sharpen our skills, keeping marathon pace with the wondrous changes in the digital universe.

Recently, I was faced with a serious issue for a clients website, where -due to their server set up- and limited ability to get noticed by the Big3 Searches. If fact, with the Panda/Penguin frequency and alterations for “YingBook” {yahoo, bing, facebook} social search, the site all about keeled over. The problem was: her pages were getting ignored or the database would go offline for exceeding the 128 limit. Evn after increasing to 256 the site was still @ a snails pace. Not to the point of tears, she asked me why she could not just create Static pages like the old days {html4}, using the current CMS platform.

My explanation was nothing short of a technical plethora, of which she was oblivious. Finally, I said to her, “We can set up a system to transfer all your data based pages into static html, that you can edit on-the-fly. Long story short, as a marketing “gurette” of sorts, is now working with me to develop a strategy to offer the general population such a program -primarily for mobile/wireless devices like iPad, Android maybe even SUR.

The PHP to static HTML works quickly and effectively, to take the information and create  fully functional, SEO friendly pages, without the trapped header or slugs limitation often associated with CMS programming. It can even include breadcrumbs or anything, really, that fits into a traditional web page. I first used this approach for rebuilding RSS Feeds ala minute as pages were changed/updated, created or deleted from the system. A very efficient, lightweight measure, that truly boosted visibility, while providing an outlet from the data doldrums and easy enough for the novice designer or non-tech to use.

PHP > HTML

Collect Data from Database Get Static or Template Elements Parse PHP to HTML Reload Sitemap/RSS

Database Checkpoint – Update or Create?

Simple and easy. Get the post Title, etc. Do the error checking, like empty, too short or too long. Apply the errors for all the additional items like photo, video or audio formats (extensions), content word count, etc. Once complete, we execute two options. Does this Title exist? If yes, update the record by this author, back-up the old page into a zip file, unlink the old page, create a new page and reload the RSS feed. Else, add the new record to the database, create a new page and reload the feed.

/* Check for Errors */ $TITLE=$_POST['TITLE']; if($TITLE=="") {die('Title cannot be empty');} else { $skunk=array('+','-','_','!','?','...','*','&','%','=','~'); $TITLE=str_replace($skunk,' ',$TITLE); $TITLE=str_replace(' ',' ',$TITLE); } if(strlen($TITLE)<12){ die('Please make the Pubtitle more than 12 letters');} elseif(strlen($)>40){ die('Please make the Pubtitle less than 40 letters');} else { $TITLE=strtolower($TITLE); $TITLE=ucwords($TITLE); } /* Check Title Database */ $title_chk=mysql_query("SELECT * FROM `PUBS` WHERE TITLE='$TITLE'") while($row=mysql_fetch_array($title_chk)){$TITLEX=$row['TITLE']; if($XTITLE==$TITLE){ UPDATE TABLE WITH NEW INFO /*Zip old File*/ $zip = new ZipArchive(); if($zip->open('$TITLE-$date.zip', ZIPARCHIVE::CREATE)...

In part one of Baking a New Site With a Sprinkle of SEO, we covered some of the more important things a developer can do to help their sites find their way into the top positions of the search engines. This week, we look at more advanced steps you can take to really help catapult them up to the top.

Advanced: canonical tags

You may have heard about Google’s recent algorithm updates such as Panda and Penguin. Well, one of things Panda concerned its self about was not how much sugar cane it was getting, but rather duplicated content. When I say ‘duplicated content’ I mean content that gets copied across internal pages. A typical example can commonly be found on e-commerce sites. Let’s say you have a product which we’ll call aeroplane model (I am an aviation obsessive) which sits on the URL www.i-really-like-planes.com/aeroplane-model. Now like all good e-commerce sites, I can choose to filter, pick colour, size and all those good things. But each time I do, a very small amount of content changes on the page, but I get completely different URLs:

Original: www.i-really-like-planes.com/aeroplane-model Colour: www.i-really-like-planes.com/aeroplane-model&colour=red Colour and size: www.i-really-like-planes.com/aeroplane-model&colour=red&size=large

Essentially, all three pages (but in a typical case there will be many more, I’ve seen up to 200 in some instances!) are all duplicated. Well this confuses dear Google and they’d prefer you to specify a single URL to display to users in their results pages.

We solve this problem by specifying the canonical tag. This is a <link> element which sits in the <head> tag on that particular page. For the example above, the following code would sit on each of the above pages:

<link rel=”canonical” href=”http:// www.i-really-like-planes.com/aeroplane-model” />

If you can provide the ability to add canonical tags across a website in this way, you will greatly improve the effectiveness of the site as a whole by dramatically reducing issues with duplicate content. However, care must be taken to implement these carefully. Each canonical must be specific to each group of pages, so don’t go putting the same one on every page of the site – that will cause more problems than it will solve them!

Advanced: Next and Prev

Following nicely on from the canonical point above, we go onto another canonical element that deals with another source of SEO issues – pagination. This tag enables you to consolidate paginated sections across a site whether they are a series of posts or a category of products. This indicates to search engines that the pages are interconnected via a contextual relationship. Let’s check out an example:

An article series on your site may have a story divided into three parts, all linked via ‘next’ and ‘previous’ buttons. The URLs could be:

www.example.com/headline&page=1 www.example.com/headline&page=2 www.example.com/headline&page=3

On the first page you would include the following code in the <head> section:

<link rel="next" href="http:// www.example.com/headline&page=2" />

On the second page, you would implement this code onto the <head> section:

<link rel="prev" href=" www.example.com/headline&page=2" /> <link rel="next" href=" www.example.com/headline&page=3" />

And finally, on page 3 you would implement this:

<link rel="prev" href="http:// www.example.com/headline&page=2" />

Looking at the code above, you can see how this indicates the inter-page relationship to search engines. However, if you have a ‘view all’ option then there’s no need to implement the above solution. Google will endeavour to show the ‘view all’ page as the preferred page instead.

Advanced: Redirects

Ah yes, redirects, the bread and butter of any SEO’s day to day. You’re probably well aware of the types of redirects (301, 302 etc) so I won’t delve into that (ask in the comments if you’re not sure), but making sure you have the ability to implement 301 redirects and 302 redirects will be very useful for your website. You may need to implement a 301 redirect when:

You move to a new website You change the URLs of your site You delete pages on your site

301 redirects are excellent for maintaining the integrity of a site. Imagine if you will a website with lots of links, but the owner of the site hasn’t put in place any redirects or changed the navigational destinations. Lots of links across the site will result in a 404 error leaving a dead end for both users and search engines alike. To solve the issue, you would implement a 301 redirect to the correct URL (and in the case of navigation, fix it!). From an SEO perspective, this is also good for fixing incorrect links coming into the site from other websites, redirecting deleted pages that still carry weight which you can then direct to another relevant page. David Gitonga did a great post on redirects using Htaccess which I recommend. On a final note, I’ve always found it a challenge finding a suitable solution implementing redirects on a Windows server, so it’s worth bearing that in mind. Additionally, you want to check anything that should be a permanent redirect (via 301) isn’t actually redirecting via 302 (temporary redirect) instead as this may impact how search engines view the page. A great tool for checking these redirects can be found here.

Advanced: Sitemaps

The XML sitemap on your site (and if you don’t have one, I recommend you get one) is the road map to your content. Having one of these in place will help Google find and index your pages to enable them to show up in their search results. It’s not essential, no, but recommended. Google may well find all your pages just through the navigation and external links, but why rely on that when you can physically tell them what you want them to look at and where they can find it.

Besides having a sitemap.xml I recommend you also try to do the following:

Make sure the sitemap.xml can be easily edited If you have an automatically generated one, ensure you can make exceptions to avoid getting stuff listed that you don’t want in the sitemap.xml (like development pages, duplicate pages and pages with unfriendly URLs if you’ve implemented friendly ones) Check that your sitemap.xml removes the pages as well as adds them if it is automated Check with your robots.txt that no URLs in the sitemap.xml clash with them. In other words, you’re not telling search engines not to index certain pages in the robots.txt and then telling them to in the sitemap.xml!

As with web development, there are many many facets, tactics and techniques that can be implemented to improve rankings and general site visibility. I hope to be back soon with more, but I’d love to hear your feedback and what else you may specifically be interested in learning more about in the comments below!

...

Many of the emerging techniques in CSS3 are particularly well suited to interactive Web page elements such as buttons. In this tutorial we will explore using CSS3 properties including transforms, transitions, box shadows, backgrounds and rounded corners. We will be working with an anchor element, animating the button when it is in hover state. Most modern browsers support the bulk of the properties we will be using, but users with non-supporting browsers will still be able to see and interact with the button.

This is how the button will look in its initial and hover states, with a moment during the transition captured in-between:

Create Your Page and Link

Let’s start by creating an HTML5 page as follows:

<!DOCTYPE html> <html> <head> <style type="text/css"> </style> </head> <body> </body> </html>

In the body section, insert your anchor element inside a container element as follows:

<div id="container"> <a class="anim" href="index.html"> <img src="note.png" alt="link"/> <span>Music</span> </a> </div>

The anchor contains an image and some text in a span. We include a class name for the anchor, which we will use to identify it and its contained elements. The container element is really just there for the purposes of demonstration.

We will be using four images for the link button, so download them now, or use your own if you prefer. This image appears within the button and will be rotating on hover:

This is the main background image for the button:

These are alpha transparent gradient images we will display on top of the main background image:

Insert General CSS Properties

Before we get to work with animated properties, let’s get the basic CSS properties for the button sorted. In the style section of your page head, add the following to style the container element:

/*basic properties*/ #container { padding:20px; background:#FFCC00; width:300px; }

The color and width have been chosen to suit the images we are using, but feel free to alter them. Next style the link with basic properties:

/*link*/ a.anim { margin:auto; display: block; background:#FF0000; width: 200px; height:60px; text-align:center; text-decoration:none; color:#000000; font-weight:bold; font-family:sans-serif; font-size:large; border:2px solid #FFFFFF; }

These properties are all pretty straightforward – the dimensions are again chosen to suit the background image we are working with so you will need to alter them if you are using a different image. Let’s add another couple of lines in this section before we move on. With CSS3 we can use rounded corners, so before the closing bracket for the “a.anim” section:

/*rounded corners*/ border-radius:15px; -moz-border-radius:15px;

The border radius specifies the extent to which the corners should be rounded. The vendor prefix version is for older versions of Firefox. After this section, position the image within the link as follows:

/*position img*/ a.anim img { margin-top:5px; }

Now set the basic styling for the text inside the link:

/*link text*/ a.anim...

In previous years, many of the major search engines were not fully equipped to read anything on a page aside from the text within the tags. Most of the “spiders” that “crawled” through web pages only viewed information at the most basic level. As technologies such as Javascript took over the web site design field, the search engine programmers found that their creepy-crawlies had to evolve in order to extract the most pertinent information from the sites they visited.

Here are some DO’s and DON’Ts to ensure that pages that utilize Javascript are still designed with SEO principles in mind.

DO keep it simple.

Although search engine spiders are now equipped to read Javascript code, they still cannot perform many of the major tasks that a full-service browser can when implementing that code.

<script language=”Javascript”> document.write(“<h1>Here is the SEO content.</h1>”); </script>

The spider can now read the contents of simple Javascript methods as HTML.

<script language=”Javascript”> window.open(“http://www.developerdrive.com/author/gerald-hanks/”); </script>

The spider will execute the method and follow the link. However, the spiders tend to slow down when methods introduce multiple parameters.

DON’T put lots of Javascript code on a page.

From an application development standpoint, any heavy Javascript code sections should be placed in a separate file for easier management. From an SEO standpoint, the separation of code-heavy Javascript files from the page undergoing the indexing process will save the search spider time and prevent it from indexing keywords that are not relevant to your page. The harder the spider has to work, the lower your potential search engine rank.

DO replace Javascript menus with CSS menus where possible.

One of the most prevalent uses for Javascript has been the creation of dynamic navigation menus. As we saw in an earlier article, CSS can accomplish many of the same dynamic menu displays as Javascript, while CSS is also much more search-engine friendly than Javascript.

DON’T sacrifice Javascript functionality for page rank.

On the one hand, a client may offer a Javascript calculator that they wish to use as a marketing tool to draw visitors and convert them to customers. On the other hand, the spiders won’t read a lot of complicated calculation routines, and they certainly won’t index most of these routines into their search databases. The solution is to create the marketing content within the page that describes the calculator’s functionality, while placing the code in an external file.

DO turn off Javascript when testing pages.

If the developer is not sure if their Javascript content is crawlable, the best option is to remove as much of the searchable content from the Javascript methods as possible. Barring that, the testers can turn off Javascript in their browsers and view the results. The Javascript shutdown will give users a true insight into what the spiders see (as opposed to what users see).

DON’T forget the spiders.

Many developers and site designers get caught up in the various technologies (Javascript, AJAX, Flash) that can produce fast results and spectacular visual effects. They want to give the audience a memorable experience with each visit. Developers must cooperate with SEO experts to insure that their beautiful and efficient creation attracts the audience that it deserves.

...

The scrolldeck.js library is probably one of the best ways out there to implement a scrolling presentation deck. All you have to do is build a web page with each slide as a div. It requires JQuery, Scrollorama, scrollTo, easing & scrolldeck  JS scripts to function. After linking all of the above scripts, create the slide deck on the document ready event and configure the settings as shown:

$(document).ready(function() { var deck = new $.scrolldeck({ buttons: '.nav-button', slides: '.slide', duration: 600, easing: 'easeInOutExpo', offset: 0 }); });

From here, all you have to do is add the animate classes to your slides elements as shown:

<div class="slide"> <p class="animate-in" data-animation="fly-in-left">This paragraph will fly in from the left.</p> <p class="animate-in" data-animation="fly-in-right">This paragraph will fly in from the right.</p> </div> <div class="slide"> <p>This slide is ’pinned‘ to the top of the screen until all the slide animation builds are complete.</p> <p class="animate-build" data-build="1">This is the default fade in animation)</p> <p class="animate-build" data-animation="space-in" data-build="2"> This paragraph will fade in while its letter spacing...

Since CSS2 developers have been able to use HTML element attribute values to identify Web page items for styling properties. With CSS3, this is extended significantly with the addition of substring matching within attribute selection. This allows you to define styling rules in a more dynamic and efficient way than before, by identifying elements with one or more chained substrings defined in your CSS code.

In this tutorial we will outline how to use these new substring matching attribute selectors. You are most likely to find attribute selectors of this kind useful when styling links, so that is what we will focus on here. There are three main attribute matching additions to CSS3, allowing you to specify substrings to match at the beginning or end of an attribute string, or anywhere within the entire string.

Create a Page

Let’s create a page to use our attribute selectors with. Use the following HTML5 outline:

<!DOCTYPE html> <html> <head> <style type="text/css"> </style> </head> <body> </body> </html>

We have a style section for our CSS3 code and will place some HTML content in the body section.

Create Some Links

Add the following sample links to your page for demonstration:

<div class="links"> <a href="http://developerdrive.com/section">Site</a> <a href="https://developerdrive.com/secure_section">Secure Site</a> <a href="docs/document.pdf">PDF Document</a> <a href="http://developerdrive.com/files/data.xml">XML File</a> </div>

These do not link to actual resources, so you may wish to replace them with your own. Let’s add some default link styling in the page head style section:

.links a:link { padding-top:15px; padding-bottom:10px; padding-right:35px; margin-right:30px; font-weight:bold; text-decoration:none; font-family:sans-serif; }

You can of course alter this code to suit yourself.

Apply the “Begins With” Substring Matching Attribute Selector

Let’s use the “begins with” selector to apply particular styling to any links connecting the user to secure URLs. We can do this by matching the “https” at the start of a link element’s “href” attribute value. Add the following to your CSS code:

a[href^="https"] { background: url(secure_icon.png) no-repeat right; }

You can use the following image:

The “^” character indicates that we want to match any “href” attributes for anchor elements starting with the specified string: “https”. We display the icon after the link text as we have the padding properties set to allow this.

Note: You can optionally use the “:after” pseudo-selector together with the “content” declaration, but I have personally found this to be a little unpredictable in certain browsers.

Test your page in a browser, this is how the secure link appears in Chrome:

Apply the “Ends With” Substring Matching Attribute Selector

Let’s use the “ends with” selector to style links to PDF documents using an icon, as we did with the secure link. Add the following to the style section in your page:

a[href$=".pdf"] { background: url(pdf_icon.png) no-repeat...

Many websites nowadays make use of sliders to highlight different content or pages but these slide shows usually appear at the top of the home page. Anyone who deals with content knows the power that images have to keep a reader engaged. In fact, most content creators try to scatter images throughout their text for this very purpose.

But what happens if you marry the two concepts together? Taking the slide show concept and inserting it into the content of a web page…

Begin by opening up the HTML of your web page and insert the following JavaScript code between the <head> tags:

<SCRIPT LANGUAGE="JavaScript"> <!-- Begin // Set slideShowSpeed (milliseconds) var slideShowSpeed = 5000; // Duration of crossfade (seconds) var crossFadeDuration = 3; // Specify the image files var Pic = new Array(); // to add more images, just continue // the pattern, adding to the array below Pic[0] = '1.jpg' Pic[1] = '2.jpg' Pic[2] = '3.jpg' Pic[3] = '4.jpg' Pic[4] = '5.jpg' // do not edit anything below this line var t; var j = 0; var p = Pic.length; var preLoad = new Array(); for (i = 0; i < p; i++) { preLoad[i] = new Image(); preLoad[i].src = Pic[i]; } function runSlideShow() { if (document.all) { document.images.SlideShow.style.filter="blendTrans(duration=2)"; document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)"; document.images.SlideShow.filters.blendTrans.Apply();...