Worpress and Search Engine Optimization

When it comes to SEO, there are absolutely no open source platforms that I’ve seen that do as superb of a job providing tools and automating the process. Keys to wordpress SEO include meta control, monitoring, links and social networking. Here are the best tools for the job:

WordPress Stats Plugin

The WP Stats is actually two essential plugins, one by the creators of WP and the other as a dashboard tool to take analytics through the roof. The WP stats plugin lets you monitor social traffic, alexa, compete, and far more — all enabled and monitored without leaving your admin!

WordPress SEO by Yoast

For years, i used the All in one SEO plugin, and even gave headspace a shot but Yoast knocked them both out of the water for me. The yoast plugin boasts some great tools to help you generate meta content, plus looks and works the way a good WP plugin should.

SEO Smart Links

Internal site links are a huge usability and SEO boost, and nothing helps you build these links better than this plugin. I usually dump in a keyword list that I’ve built with Google’s Keyword tool and over time I aim to write articles and link them to those keywords.

Worpress SEO requires a Sitemap

Don’t let the name fool you, Google SEO sitemap covers all the major search engines and notifies them automatically whenever you publish new content. Don’t skip this one, a sitemap is a must in helping a search engine index your site, and is even more crucial for frequent bloggers.

Faster page loads in WordPress

We all want more cache don’t we? WP Super Cache speeds up your site significantly making your pages load faster, which is favorable for both man and machine! Follow that with Smush.it, Database Optimization and Minification and you’re looking at a 20-30% faster site on average (estimated from personal use and client sites).

Get Social with WordPress

Social networking is huge and most blogs completely fail to engage their audience (guilty), part of the problem is obviously content but the other part is often the tools and approach. If your website is large and well known (or has the capacity to be) why not extend WordPress with BuddyPress and launch your own social network? Or keep it simple and drop in Socialize widgets and Disqus Comments so that your users can engage using existing social platforms.

WordPress Utilities you can’t Live Without

There are a TON of utilities that I would love to talk about, but for brevity I will only mention Scissors and WP DB Backup. Scissors lets you crop and rotate media which is something I hope wordpress will include in its core. WP Backup makes a data backup for you automatically and emails it to you, allowing you to have a backup outside of your host.

I hope these plugins help, and if you feel I missed one that HAS to be on the list, just mention it in the comments below and I’ll argue about it a bit

The completed list:

• Learn: skateboard, guitar, tattoo
• Program: PHP, C++, front-end
• Develop: websites, web app, crack
• Start: a business
• Buy: a nice camera
• Read: Screwtape Letters, Bible
• Climb: bouldering, top rope, hike a mountain
• Travel: Canada, Colorado, California
• Tattoo: needle, razor, coil gun
• Family: have kids

Yet to be accomplished

• Develop: mobile app, desktop app, keygen, completely JS based app
• Catch: scorpion, sun spider, black widow, all the snakes in CO/MI
• Start: a band
• Climb: 14′ers in Colorado
• Skate: big spin, spine transfer, ollie down 6+ stairs
• Program: Ruby, Perl, Python, .NET, Java, FORTRAN
• Become: a certified minister, a millionaire
• Travel: kayak trip, Amazon, overseas, Mexico
• Family: adopt kids, grow old with my wife
• Buy: a gorgeous house with lots of property, a sword
• Live: Florida, Costa Rica, Puerto Rico
• Tattoo: bone and hammer, pneumatic gun
• Learn: to airbrush
• Build: a house, my own car, custom computer, flip a house
• Speak: Spanish, Latin
• Own: a Boa Constrictor
• Read: every Stephen King book
• Lead: youth or young adult ministry
• Try: skydiving, kite boarding, mountain boarding, bmx

The first is quick and easy to drop into a Magento theme, but only gets the static block content:

<?php echo $this->getLayout()->createBlock('cms/block')->setBlockId('indentifer')->toHtml() ?>

Where, by calling the static block model, you can then get all fields associated with that block such as the static block title

<?php
$block = Mage::getModel('cms/block')->load('identifier');
echo $block->getTitle();
echo $block->getContent();
?>

Hope this helps you with static blocks in your custom magento theme. Happy coding!

Magento Wallpaper

Click the image to view full-size and download this fiery hot Magento Wallpaper.

With growing technology and standards, I take pride in meeting new standards according to W3C, in order to achieve a highly functional site and good user experience for everyone. These standards include but aren’t limited to W3C standards, semantic markup, meeting WCAG usability standards, and Section 508 Compliance. This guide provides a medium level of understanding of accessibility standards. If anything in this article is confusing you, then I recommend you refer to Nathan’s post on Accessible Web Design for a more broad prospective.

Semantic Markup

Working with HTML and XML markup languages, it’s important for the code to be standards compliant by using tags, structure, and information that can be read and translated by all browsers. Semantic Markup is just a way of structuring code so that a browser/machine can do more work and take less off the user. For example, search engines, like Google, are heavily driven on specific tags such as Meta information, Alt tags for images, recognizable XML and HTML formatting, etc. Using meta tags for keywords, content definition, and descriptions all improve functionality for search engines and browsers.

Section 508 overview

• Software Applications and Operating Systems: includes usability for people that are visually impaired, such as alternative keyboard navigation.
• Web-based Intranet, Internet Information, and Applications: assures accessibility to web page graphics by the visually impaired using assistant technology such as screen readers and refreshable Braille displays. This is accomplished by using text labels and descriptors for graphics.
• Telecommunications Products: addresses accessibility for people who are deaf or hard of hearing. This includes technology compatibility with hearing aids, assistant listening devices, and TTYs.
• Videos or Multimedia Products: includes requirements for captioning of multimedia products such as training or informational multimedia productions. Captioning or video descriptors must be able to be turned on or off.
• Self Contained, Closed Products: products with embedded software, such as information kiosks, copiers, and fax machines, often cannot be used with assistant technology. This standard requires that access features be built into these systems.
• Desktop and Portable Computers: discusses accessibility related to mechanically operated controls such as keyboards and touch screens.

WCAG summary

The Web Content Accessiblity Guidelines (WCAG) is the only international draft for following web standards. It describes standards that may be used, should be used and must be used. The WCAG is considered the stable version of standards, but for more current standards for accessible websites you can refer to the Web Accessibility Initiative (WAI). They define standards more relevent and specific to newer Web Browsers, Operating Systems, and so forth.

There is a lot of best practices and examples defined in the WCAG and WAI, and though these standards are important, not every web developer needs to know them by heart or implement them into every site. They are mainly important for sites that provide a service, such as e-commerce, educational resource, government sites, etc. That’s why many times you’ll notice that government sites and educational sites have poor creativity, because they need to focus on delivering content to all audiences more than aesthetics. However, if you’re a web developer and interested in learning more about standards and implementing the, refer to the WCAG and the WAI and start creating hierarchy using headers, putting navigation into lists, and using Title and Alt tags appropriately.

W3C summary

The W3C is a working draft defining all aspects of markup languages and some Object Oriented Programming (OOP) languages used on the web. They define standards that are compatible across multiple browser, operating systems and languages. As web developers, we live by these standards and must know them to properly breakdown a website. These standards are a guideline that we follow in order to have our sites be dynamic and compliant for future technologies and software.

Where does your site fall according to these standards?

Below are some highlights that you should become familiar with as you populate a site with content. It’s important that if your site is developed by a professional that applies these standards, to ask for documentation on how to use functionality that may have been put into place for you, such as Meta tags, Header Tags, and Listed Links.

• Compliance across all major Operating Systems: Windows XP, Windows Vista, and Mac OS X
• Access to the visually impaired: JAWS, Window-Eyes, and Hal
• W3C & WCAG standards
• Organic Search Engine Optimization
• Meta information for pages, scrips, and images
• Alt tags for alternative text on images
• Color contrast and color schemes legible for those with color blindness or vision problems
• Em based layout and font: allowing sizes to be relevant to the browser-defined size for compatibility with mobile devices, increasing the font size in the browser, and different screen resolutions.
• Listed links for navigation hierarchy
• Header tags to establish Hierarchy and SEO

How I try and meet those standards in Web Development

As a web developer, I know the standards well. Like an electrician must know state codes and regulations, I follow standards laid out by federal law (Section 508), good practice guidelines (W3C) and usability requirements (WCAG). I also make sure to read up on other articles and refer to other professionals to practice what is most commonly needed and used, for more in depth on how to tackle accessibility as a web developer, check out Nathan’s post at redswish.

jQuery.fn.modal = function() {
	return this.each(function(){
	var ah = $(this).height();
        var wh = $(window).height();
        var nh = (wh/2) - (ah/2);
 
        var aw = $(this).width();
        var ww = $(window).width();
        var nw = (ww/2) - (aw/2);
 
        // Trim body height, append overlay, and disable scrolling (this can be undone with a custom close button)
        $("body").height(wh).css('overflow','hidden').append('<div class="overlay"><\/div>');
        $(".overlay").fadeTo("slow", .8);
        $(this).css({'top':nh, 'left':nw}).fadeIn("slow");
	});
};

This code is what i use for the overlay, you can customize as you’d like. The actual div is appended to the body with JavaScript.

.overlay {
	display: block;
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 110%;
	background-color: black;
	z-index:1001;
	-moz-opacity: 0.8;
	opacity:.8;
	filter: alpha(opacity=80);
}

This is an example of a modal/lightbox i did using this plugin. Very simple CSS:

.modal {
	background: #00121b;
	min-height: 54.5em;
	width: 56.5em;
	border: 1px solid #111e24;
	box-shadow: 0 0 1em #000;
	-moz-box-shadow: 0 0 1em #000;
	-webkit-box-shadow: 0 0 1em #000;
	display: none;
	position: absolute;
	z-index: 1002;
}

and some of them sold at $300 or more such as this custom design (all done in pen mind you).

There were hundreds of people in and out all night, creating so much opportunity to network with other creatives in the Denver area. Nick and I happened to be at the event as volunteers, but we had so much fun, I wouldn’t even consider it work. We were assigned the role of outdoor security and setup which meant we helped setup ramps and lights for the Yellow Designs Stunt Team, and I also took a ton of pictures.

Overall, Nick and I made some new friends at Yellow Designs and managed to even make a few business contacts unintentionally. You can see the rest of the night was just goofing off, as the last performance was finished and we were wrapping up the night. Can’t wait to get involved with Bordo Bello again next year!

If you’re in the Denver area (or heck, anywhere in Colorado) I suggest you to check out EE Camp, which is a local meet-up that aims to share and teach about ExpressionEngine at a very awesome price. It’s open to the public to participate and volunteer, and ticket price covers food and happy hour as well as insane amounts of learning and networking.

I signed into facebook today to start my projects for the day (I’m a facebook developer, mind you) but before I dive right in, I like to check out the facebook stream and see how my friends are doing. I’m quite used to facebook changing things around on me, but when I saw a status that said Facebook was publishing phone numbers, I thought it had to be fake.

Turns out, I find out from a friend that facebook privacy is once again an issue rather than getting a notice from Facebook. All you have to do is go to Account > Edit Friends > PhoneBook and see it for yourself.

Considering the fact that they’ve received flack about privacy since day one, you’d think this would be something that they’d take a little bit more seriously and notify users of. What do you think? Is facebook overstepping and shorting us by lack of notice, or do people not care?

Developer Extensions

Developer toolbar:

http://www.magentocommerce.com/extension/2271/developer-toolbar

Blueprint Theme:

http://www.magentocommerce.com/extension/2245

Free Magento Extensions

Product Image lightbox:

http://www.magentocommerce.com/extension/1487/magento-easy-lightbox

Product Detail tabbing:

http://www.magentocommerce.com/extension/1725/magento-easytabs

Teaser Box:

http://www.magentocommerce.com/extension/1778/teaserbox

Free Magento Themes

Absolute Magento Theme

http://www.magentocommerce.com/extension/2031/magento-absolute-theme

Paid Magento Extensions

Abandoned Cart Alerts

http://adjustware.com/shop/magentomods_abandoned_carts_alerts.html

Quickview

http://www.magentocommerce.com/extension/574/quickview-1.1