Net New Media

Use PHP and Javascript to Import and Display Google Analytics Data

Martin Przybyla — Mon, 08 Feb 2010 18:18:32 +0000

Logging into Google Analytics to check your daily site stats is all fine and dandy, but sometimes you are short on time and it becomes an unnecessary step, especially if you are already logging into some type of CMS to edit your site’s content.

For those wanting to incorporate Google Analytics data into their CMS, there are a couple of readily available classes out there that make it as easy as adding a few lines of PHP code to your site, then looping through the results and displaying them using a graphing library.

As for the PHP classes, you have a very easy to use analytics class here, and then there is the very capable ga:pi php class that will produce similar results.

Once your PHP has retrieve the data from your Analytics account, you will need some sort of javascript or image processing library to graph the data. Two interesting options are the gRaphaël javascript library graphing library, and the Google Charts API.

With that, you should be able to easily incorporate any Analytics data you want into your own site, including eCommerce transaction data and various combinations of dimensions and metrics.

Using CSS to Create an SEO Friendly HTML Layout

Martin Przybyla — Tue, 20 Oct 2009 14:22:40 +0000

In a previous post I examined how to put together an HTML / XHTML template that is optimized for the best possible Search Engine rankings. This entailed creating a logical HTML structure that puts the important content first, minimizing the length, externalizing CSS and Javascript to speed up loading times, and generally using minimal markup.

Now let’s take a similar optimized HTML template, and using some CSS magic, create a layout that is solid yet light, holds together well cross-browser, and is SEO friendly from the ground up.

This will be the XHTML markup we will work be working with:


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
	<title>Your Site - Your Location - Your Tagline</title>
	<meta name="keywords" content="Your site purpose, Your Location, Your other keywords..." />
	<meta name="description" content="Your site in your location, the rest of your description..." />
	<meta name="copyright" content="" />
	
	<link rel="stylesheet" href="css/seo-template.css" type="text/css" />			
</head>
 
<body id="your_page" class="your_page_type">
<div id="container">
	<h1 id="doc-header">Your Business in your Location - Your Services</h1>
	<div id="branding">
		<a href="#">
			<img id="logo" src="images/logo.png" alt="Your Site" />
		</a>
	</div>
 
 	
	<ul id="language-list">
		<li><a href="#">English</a></li>
		<li><a href="#">Spanish</a></li>
	</ul>
	
 
	<div id="main-content">
		<h2>Your Secondary Title</h2>
		<p>More paragraph content here...</p>
		<h2>Another Secondary Title</h2>
		<p>More paragraph content here...</p>
	</div>
 
	
	<div id="main-visual">
		<img id="image-1" src="images/main-seo-image.jpg" alt="Main SEO alt text" height="300px" width="960px"/>
	</div>
	
 
 	
	<ul id="main-menu">
		<li><a href="#">First Link</a></li>
		<li><a href="#">Second Link</a></li>
	</ul>
	
 
	<div id="additional-content">
		<h3>Third Level Title</h3>
		<p>Third Level Content...</p>
	</div>
 
	<div id="sidebar">
		<h3>Sidebar Title</h3>
		<p>Sidebar Content</p>
	</div>
 
	<div id="footer">
		<div id="bottom-menu">
			<ul>
				<li><a href="#">First Link</a></li>
				<li><a href="#">Second Link</a></li>
			</ul>
		</div>
	</div>
 
</div>
</body>
</html>

Now, this is not a design post, so we are going to give some rather shockingly bright background colors to each of our main divs just for the purpose of the build, so we can see exactly what is going on. We’ll use standard rainbow CSS colors for this purpose: gray, lightgray, lightblue, orange, etc.

The final layout is going to look like this:

SEO Template Layout

So let’s get to it. As you can see, we are going to create a fairly standard centered layout. The first thing we need to do is center our container div. We can set our width to a standard 1024px, then set the margins to auto which should center it:

#container {
	width:1024px;
	min-height: 800px; _height: 800px; /* IE 6 does not support min-height */
	background-color: lightblue;
	margin: 0px auto 0px auto;
	position: relative;
}

After we have out container centered, we can position our main content by creating margins that will push the content where we want it to go. Our layout’s height will vary, so we will float it left so that it pushes the rest of the content down by allowing the main content area to expand.

#main-content {
	background: pink none repeat scroll 0 0;
	float: left;
	margin: 340px 252px 20px 32px;
	min-height: 300px; _height: 300px; /* IE 6 does not support min-height */
	width: 740px;
	display: inline; /* IE 6 double margin bug */
}

We then use a similar technique to position the other content divs, including our sidebar, additional-content, and footer. We use margins, although depending on the layout, padding could also work.

This creates a layout that puts our HTML in a logical, SEO friendly order, as if we were organizing an essay or an outline, while allowing us to position the elements wherever the design demands. Google and other search engines don’t really care where we place our content with CSS of course, the only thing search engines read is the underlying HTML markup. If you want to have an idea what Google sees, just hitting the good old Ctrl+U command, or using a screen reader or Google Webmaster tools will give you a good idea.

So, according to our HTML structure, we’ve decided that the order of importance for our elements is as follows:

We wrap everything in a container div, in order to center it. We might be able to use just the body to center it, but in order to create a more flexible layout, we wrap everything in a container.
The first truly important element for SEO purposes is going is our H1 heading. This should be the title of this page in particular, and we should not put any other H1’s on the page. We also want search engines to find this as quickly as possible, so we put it immediately after our container div.
After the H1, we are going to add our company branding div, with our logo.
The next element will be the language selection div. Since we don’t know what language our user’s speak, it’s always good to let them change it so they don’t have to go further down the markup looking for it.
Then we get to the “meat and potatoes” of our page, the main content div, with it’s H2 headings and rich paragraph text. This is the most important part of our site in terms of SEO.
After the main content, we have our main visual content. This is visual content, such as images, that is associated with the above mentioned main content.
We then add all our other elements, such as any additional content, sidebar, footer, etc. in order of importance to the page

This looks ok, we now have a logical structure for our HTML markup.

As I mentioned earlier, our main image (or slideshow), for example, is important for SEO because the Alt information and image names get indexed by Google and other major search engines. However, the image Alt tags are not as important as the main content div itself, and the rich H2 and paragraph text it contains. This is why in the HTML markup we have put the

after the main content div.

In the design of the layout however, the main visual div is above the main content. So how do we flip the order and get the images contained in our main visual div above the floated main content in the layout even though it is further down in the markup? We can use CSS to absolutely position in the correct place, of course, like so:

#main-visual {
	position: absolute;
	top: 120px;
	left: 32px;
	height: 300px;
	width: 960px;
}

We can then use a similar technique with all our other elements, either floating them and using margins (or padding) to push them around, or using absolute positioning to position them anywhere on the page.

Here is the fulll CSS code:

/* ==== reset css ==== */
 
body, h1, h2, h3, h4, h5, h6, p, ul, form, td, button, input, select {margin: 0; padding: 0;}
h1, h2, h3, h4, h5, h6 {font-size: 1em; font-weight: normal;}
ul {padding-left: 1.2em}
a {text-decoration: none;}
a:hover {text-decoration: underline;}
a img {border: none;}
body {font-family: Arial, helvetica, sans-serif; font-size: 76%;}
 
/* ==== main layout ==== */
 
body#your_page {
	background: darkgray;
}
 
body.your_page_type {
}
 
#container {
	width:1024px;
	min-height: 800px; _height: 800px; /* IE 6 does not support min-height */
	background-color: lightblue;
	margin: 0px auto 0px auto;
	position: relative;
}
 
#container:after {
	content: '.';
	clear: both;
	visibility: hidden;
	height: 0;
	display: block;
}
 
h1#doc-header {
	height: 20px;
	line-height: 20px;
	padding-left: 32px;
	width: 992px; /* 1024px - 32px padding */
	background: darkgray;
	margin: 0px auto;
}
 
#branding {
	height: 80px;
	width: 100%;
	background: gray;
}
 
#logo {
	margin: 5px 5px 5px 32px;
}
 
#main-visual {
	position: absolute;
	top: 120px;
	left: 32px;
	height: 300px;
	width: 960px;
}
 
#main-content {
	background: pink none repeat scroll 0 0;
	float: left;
	margin: 340px 252px 20px 32px;
	min-height: 300px; _height: 300px; /* IE 6 does not support min-height */
	width: 740px;
	display: inline; /* IE 6 double margin bug */
}
 
#additional-content {
	width: 740px;
	background:  black;
	float:left;
	min-height:400px; _height: 400px;
	margin: 0px 20px 20px 32px;
	display: inline; /* IE6 double margin bug */
}
 
#sidebar {
	display: inline; /* IE6 double margin bug */
	float: right;
	margin: -320px 32px 0 0; /* negative main content height + margin */
	min-height:500px; _height: 500px;
	width: 200px;
	background: green;
}
 
#footer {
	width: 100%;
	height: 200px;
	background: #333;
	color: white;
	float: left;
}
 
#language-list {
	background: lightgreen none repeat scroll 0 0;
	height: 40px;
	position: absolute;
	right: 32px;
	top: 55px;
	width: 65px;
	list-style: none;
}
 
#language-list li {
	line-height: 20px;
}
 
#main-menu {
	background: red none repeat scroll 0 0;
	height: 25px;
	left: 190px;
	position: absolute;
	top: 70px;
	width: 700px;
	list-style: none;
}
 
 
#main-menu li {
	display: inline;
	padding: 0px 5px;
	line-height: 25px;
}
 
#copyright {
}
 
#bottom-menu {
	width: 100%;
	height: 25px;
	background: red;
	position: absolute;
	bottom: 0px;
	left: 0px;
	line-height: 25px;
}
 
#bottom-menu ul {
	width: 900px;
	height: 25px;
	background: orange;
	list-style: none;
	margin: 0px auto;
}
 
#bottom-menu ul li {
	display: inline;
}
 
/* ==== text styles ==== */
 
 #main-content h2 {
 	width: 720px;
	height: 30px;
	line-height: 30px;
	font-size: 16px;
	color: white;
	background: black;
	padding-left: 20px;
 }
 
 #main-content p {
 	margin-bottom: 30px;
	padding-left: 20px;
 }
 
 #sidebar h3 {
 	width: 200px;
	height: 25px;
	line-height: 25px;
	background: black;
	color: white;
 }

This gives us an underlying HTML structure that is excellent for SEO purposes and is logical and follows a clear outline. Yet by using some smart CSS we can create almost any type of layout we desire without modifying the base markup.

On a side note, as you can see in the full CSS code, I have given a min-height to several of our divs just to give you an idea of how the page would look with more content in it (using _height to adjust for IE6 which does not support min-height). I’ve also used the clear fix technique so content doesn’t escape our container div in Firefox, and in the HTML code, we’ve had to use conditional comments to avoid the disappearing content bog in IE6, as well as the old display:inline trick to avoid the double-margin bug in IE6.

That’s it, now you can check out our SEO friendly, cross-browswer, HTML and CSS template in action.

Flash and SEO: How are Flash Sites Indexed by Google?

Martin Przybyla — Sat, 10 Oct 2009 18:32:11 +0000

Why doesn’t my site show up in Google? If I had a nickle for every time I heard that question. A typical answer a couple of years ago would have been “well, of course it doesn’t show up, you built it in Flash!” But then Google started indexing Flash, and has since continued to improve their Flash search algorithms, recently adding the capability to index external Flash resources.

So Google can index Flash (.swf) files, that’s great you say. But does that mean if you build your site in Flash you can really get objectively good SEO results? Well, the answer is not that simple, although in theory it should be possible.

Of course, techniques have existed for quite some time to allow Google to index alternative content in the object tag for Flash. And a least one such technique, utilizing SWFObject to load the Flash and the alternative content, specifically an image with ALT text, is officially endorsed by Adobe.

I recently came across an interesting set of Flash SEO experiments, which show how Flash does get picked up by Google.

It is nice to see that indeed, if you build your Flash site correctly, you can show up in search engine results. Embedded text in Flash files is indexed, even if that content is loaded with SWFObject, or if it is pulled in from an external source.

The fact that Google is now indexing Flash content is an important step forward for those who want to use the technology for a rich multimedia experience. However, I am still not entirely convinced about sites that are purely built in Flash. In fact, even Adobe themselves suggest that at least the main navigation of your site be in HTML.

If SEO is a serious concern, my general recommendation to clients is that if they want to incorporate rich media in their sites, they use a hybrid of HTML for the text based content, and Flash for the multimedia aspect of the site, if possible. Hybrid layouts offer a lot of benefits over purely Flash based sites.

The problem with 100% Flash sites is in order to get your site to really do well on the SEO front, you are still essentially going to have to build two versions of your site, a Flash version and an HTML version. And depending on your budget, this could be too costly to develop. Smartly built hybrid HTML/Flash sites can offer the same multimedia experience while still providing excellent SEO results.

Choosing the Right Open Source PHP CMS for the Job

Martin Przybyla — Thu, 17 Sep 2009 20:09:47 +0000

Choosing the best CMS (Content Management System) for a website or web based project can be a daunting task. Take a look at OpenSourceCMS.com and you can see that currently there are over 200+ CMS demos you can try out in the PHP category alone. Faced with this many options, and having to make a decision within a limited time frame, what do you do? The choice can be even more complicated if you are building a site for an important client, as the CMS you choose can have enormous consequences for the client further down the road.

For this reason it’s important to read the reviews, check the technical specifications, look at the code, and most importantly, know the requirements of the project. Over the years I’ve worked with many different open source PHP-based CMS systems, and, like everyone else, I’ve got my opinions as to which are best, and why.

Here’s a quick rundown of my favorite PHP based CMS systems, and why I think they excel.

MODx

MODx considers itself to be an Open Source PHP application framework and although it is a functional CMS out of the box, it is very modular, allowing you to pick and choose the features you want and easily extend it’s native compatibilities. It also features a slick AJAX based interface, and a modern architecture. Other strong points for MODx incude:

SEO friendly from the ground up
Built with Web Standards in mind
Fairly easy to create custom content using “chunks”

That said, it does take some time to get used to MODx, it’s terminology and its templating structure, and it is a bit lacking in pre-built 3rd party plugins and components.

Silverstripe

Silverstripe is another modern CMS system that also has its own framework, Sapphire, behind it, as well as a modular architecture that allows for a great deal of flexibilty. Silverstripe has been used for some high profile projects and has a slick, professional interface.

Other strong points for Silverstripe:

Allows you to use your own HTML/CSS structure
Great translation module available
Easy and flexible content editing

Like MODx however, Silverstripe does require some time to get used to, and you will need to learn the Sapphire framework to take full advantage of its capabilities.

Frog CMS

Frog CMS started out as a PHP version of the Radiant CMS for Ruby on Rails. It’s main strength is best described by the Frog CMS tagline, “It’s fast, it’s simple, and it works”. This CMS is a great choice for small to medium sized sites and those who already know some basic PHP.

Advanages for Frog CMS:

No templating languages to learn, just HTML/CSS and PHP
Clean interface that’s easy to modify

The main downside for the Frog CMS is it’s lack of pre-built extensions, and if you don’t know PHP this is probably not the best choice.

Drupal

Drupal is a classic, one of the most well-known CMS systems, it has been around for a long time and has a huge community behind it. This is both the best thing and the worst thing about it. It’s great because there are a huge amount of extensions for this CMS, and there have been numerous high traffic sites built on the platform, but at the same time it has a steep learning curve, and simply wrapping your head around the architecture and various extensions is a job in and of itself.

Plus points:

Robust, tested, and reliable
Lots of extensions

As far as critiques go for Drupal, the primary complaint seems to be the learning curve, and the somewhat limiting architecture, it is not the easiest system to style, and it’s hard to get a Drupal site to not look like a Drupal site.

Wordpress

No CMS roundup would really be complete without mentioning Wordpress. Many people think of Wordpress as simply a blogging platform, but it is actually a very capable CMS system, and can be used for almost any type of site. The advantages of Wordpress are quite obvious, an insane amount of prebuilt components and plugins, excellent documentaion, and a huge community make developing sites with Wordpress lightning fast. Before moving on to other CMS systems I would probably check to see if the site could be built faster with WP.

Kudos for Wordpress:

Mind boggling amount of prebuilt components available
Excellent documentation
Very large and supportive developer community

Of course, Wordpress is not a viable option for certain types of larger sites, as its main focus continues to be blogging and smaller scale sites (though it must be said that WP can handle high traffic sites).

At the end of the day, the type of CMS you choose needs to fit the type of project you are building. My experience is that there is no magic bullet. MODx, Silverstripe, Frog CMS, Drupal, and Wordpress are all excellent options, but you need to carefully examine their capabilities and the extensions available, and match those to your requirements or those of your client.

Depending on the type of development that needs to be done, one of these CMS platforms could be the perfect option for quick development, or you might need a more customized solution, in which case you may want to look at a PHP framework such as Zend, Codeigniter, Kohana, or Symfony, or decide to build your site from the ground up with PHP.

Building Optimized, SEO Friendly XHTML Templates

Martin Przybyla — Tue, 08 Sep 2009 13:54:15 +0000

Depending on which sector your business is in, or what topics your site or blog deals with, your SEO strategy (or lack of one) could be what determines whether your site receives traffic or not, and therefore whether or not it is successful. I hear a lot about the importance of the title tag, meta keywords, meta descriptions, internal and external linking, and body copy optimization. But if you are in a highly competitive market, most top-20 sites probably already have these elements optimized. So how could you gain further advantage over your competitors?

One overlooked aspect of Search Engine Optimization is HTML/XHTML template structure. There is some debate over how important HTML structure is in search results, and it certainly is not going to “make or break” your site’s results. This is obvious just because of the shear number of absolutely awful table-based layouts that make the top-20 results on most Google Searches. But I’ve built many high profile sites in highly competitive markets, such as the hospitality and tourism industry, and my experience is that Search Engines like lightweight, semantic, optimized markup and generally clean code.

Like most developers who have been coding for some time, I have my own framework/base templates that I use to start most standard layouts. It looks something like this:


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
	<title>Your Site - Your Location - Your Tagline</title>
	<meta name="keywords" content="Your site purpose, Your Location, Your other keywords..." />
	<meta name="description" content="Your site in your location, the rest of your description..." />
	<meta name="copyright" content="" />
	
	<link rel="stylesheet" href="http://www.yoursite.com/templates/yourtemplates/css/template.home.css" type="text/css" />			
	
	<script src="http://www.yoursite.com/templates/yourtemplates/css/jquery.min.js" type="text/javascript"></script>
</head>
 
<body id="your_page" class="your_page_type">
<div id="container">
	<h1>Your Business in your Location – Your Services</h1>
	<div id="branding">
		<a href="http://www.yoursite.com/default-en.html">
			<img id="logo" src="http://www.yoursite.com/templates/yoursite/images/logo.png" alt="Your Site" />
		</a>
	</div>
 
	<ul id="language-list">
		<li><a href="http://www.yoursite.com/default-en.html">English</a></li>
		<li><a href="http://www.yoursite.com/default-es.html">Spanish</a></li>
	</ul>
 
	<div id="main-content">
		<h2>Your Secondary Title</h2>
		<p>More paragraph content here...</p>
		<h2>Another Secondary Title</h2>
		<p>More paragraph content here...</p>
	</div>
 
	<ul id="main-menu">
		<li><a href="#">First Link</a></li>
		<li><a href="#">Second Link</a></li>
	</ul>
 
	<div id="additional-content">
		<h3>Third Level Title</h3>
		<p>More Content...</p>
	</div>
 
	<div id="sidebar">
	</div>
 
	<div id="footer">
		<div id="copyright">
		</div>
		<ul id="bottom-menu">
			<li><a href="#">First Link</a></li>
			<li><a href="#">Second Link</a></li>
		</ul>
	</div>
 
</div>
</body>
</html>

There are several points here to take into consideration:

Use as little markup as necessary to create the template structure, later styling and moving content around with CSS
Use semantic markup that follows a logical order, as if you were writing an essay
Make sure you have only one H1 heading, this is the main heading for the entire page, and the rest of your headings should reflect the importance they have relative to this
Make sure the content, or “meat” of your page is as high up in the code as possible so spiders can find it as quickly as possible (this requires optimizing the head and making css and js files external
Place menus (including main-menus) below the main content of the page, or include a method for skipping the menu and going straight to the content

The result of all these techniques is that you end up with a page that is as light as possible, loads quickly, and and when you switch off css styles, the page itself follows a very logical structure and is more readable (this is great for screen readers as well, making the site more accessible).

The trick, of course, is to then style this page using CSS to fit a wide variety of possible designs. Keeping the H1 and the main content of your page at the top of the markup, when perhaps in the design it is at the very bottom of the page, is a great way to take your CSS to the limit.