1. Clean House

First things first, let’s clean up! Before we add anything new let’s make sure that everything that is currently there, needs to be. So any script tags you find, unless otherwise noted should be removed, minified, then gathered in one large document and placed in the footer. Next any linked stylesheets you find should be treated the same way. Gather all the css, dump it into one file, minify and then put back. This step may require some testing to make sure nothing breaks, but minifing and consolodating resources will make your site faster and easier to update/maintain. Read my other page on page speed tools to learn more about making your site faster.

2. SEO Tags

Including a title tag, description meta tag, and a keywords meta tag is your first step to better SEO. These tags are not only part of the algoritum that determinies page rank, but they’re also the first thing the user sees when they’re decided to enter to site. Make these tags as relevant to the page they’re on as possible, and watch your site raise in the rankings on Google, Yahoo and Bing.

1
2
3

<title></title>
<meta name="description" content="">
<meta name="keywords" content="">

3. Content Related Tags

Two tags that have been under utilized over the years, but are extremely important, are canonical link tag and author meta tag. These tags make sure that robots and spiders that crawl your site from Google, Yahoo and Bing aren’t confused when they reach you content.

As we all know there are several ways to enter a site. In the beginning of a url you might add www or not. At the end you might add a slash, have index.php, or some sort of query trailing behind. It’s possible that web crawlers could read all of these various ways of getting to your site as separate pages and thus duplicate content. You may even be penalized in your ranking for such an offense. Enter the cananical link tag. This tag should be assicated with only one URL, so no matter how the crawler gets on your site, the content will always be attributed to that URL. Read more about the canonical link tag.

Another handy tag to let crawlers know this is your content and no someone elses, is to use the author tag. Using the author tag will ensure that if your site is linked to or quoted anywhere, that you and your site are being attributed the rights to the content.

1
2

<link rel="canonical" href="">
<meta name="author" content="">

4. Getting Social

Social media has exploded in the past couple of years. Social media compaigns, sharing, liking, etc. have become the norm in the web world. One way to make sure your site looks good when liked on Facebook is to use the Open Graph meta tags. Open graph meta tags are a series of tags, that list the title, description, image, etc. that will appear on your facebook wall when shared or liked. Making sure these tags are present and looking their best is a great way to make your site is eyecatching on the social media giant. Learn more about open graph tags here.

One more tag you might want to consider adding for sharing purposes is the alternate link tag. With the alternate link tag you can add the URL to your blog’s RSS feed and make it easier for people to subscribe to updates on your site.

1
2
3
4
5
6
7
8
9
10

<!--START OPEN GRAPH FOR FACEBOOK-->
<meta property="og:title" content="">
<meta property="og:type" content="website">
<meta property="og:url" content="">
<meta property="og:image" content="images/ui/facebook.jpg">
<meta property="og:site_name" content="">
<meta property="og:description" content="">
<!--END OPEN GRAPH FOR FACEBOOK-->
 
<link rel="alternate" href="blog/feed/" type="application/rss+xml" title="">

5. Bookmark Icons

The favicon isn’t the only player in town anymore. From tablet icons for the IPad, and smart phone icons like the iPhone, bookmarking icons are a great finishing touch to your site. These icons appear when booking your site on the browser, and appear on your home screen when bookmarking via a smart phone. This snippet is grabbed right from 320andUp a really great resource for coding a mobile first design.

1
2
3
4
5
6
7
8
9
10

<!-- For iPhone 4 -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="images/ui/apple-touch-icon.png">
<!-- For iPad 1-->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="images/ui/apple-touch-icon.png">
<!-- For iPhone 3G, iPod Touch and Android -->
<link rel="apple-touch-icon-precomposed" href="images/ui/apple-touch-icon-precomposed.png">
<!-- For Nokia -->
<link rel="shortcut icon" href="images/ui/apple-touch-icon.png">
<!-- For everything else -->
<link rel="shortcut icon" href="images/ui/favicon.ico">

6. Tracking Codes

Finally add all your tracking codes, from Google, Bing, etc right before the closing >/head< of your page. This makes sure that the tracking code is sending its signals to its homebase properly, doing so will result in more accurate reporting. Learn more about Google Analytics.

All or most of these tags or practices aren’t a requirement for your website. In fact, many things in HTML rarely are. HTML is a flexible language, and its one of the reasons its survived for so long. Regardless of how flexible the language is, there is always best practices and standards. Making sure your HTML is optimized for users and web crawlers is another step forward in making a great site. All of these tags are included in my Site Skeleton, check it out on GitHub.

So what do you think? Did I miss anything? What tags do you typically add to a web build? Are there some tags I forgot or misused?

From design and development, to HR and office mechanics, content stands as the pillar all other sects of a web company are built on.

Content as Design

For many years content has been something we all fill in later. It’s usually one of the last step we take when deploying a new site. The design was created using Lorem Ipsum, the front end creates all the different possible content templates, the backend devs code what goes where and what can be editable, then finally, the content is added in a couple of weeks before the site goes live.

We all do it, and for the most part this method works great. The client wanted a website where they could add a bunch of content, have blog posts, a Twitter feed, etc. And of course they’ve been “working” on creating all this content for you so its ready to go once the development is through. But this isn’t the case, the client hands over a couple sentences of content for each page, even though the design called for at least a few paragraphs. Now the sidebar is longer than the content, on wide screen monitors, the footer isn’t reaching the bottom of the screen, and inevitably, that one block of content that only appears on that one page that you didn’t add to the CMS, needs to be edited…

Now a couple of months go by and the site has launched, and the bugs were fixed. Remember all that rich functionality we added like a blog, Twitter feed, etc? It hasn’t been updated once since the site has launched. Who is going to add fresh content to the blog? Or interact with people on Twitter? Or keep track of keywords and page entry points and adjust the content to fit?

How did we end up here? When did building websites become building a shell that the client is responsible for filling in? Why wasn’t all of this taken into account from the beginning?

Content Strategy

Enter our hero, Content Strategy. A relatively new field in the web world, Content Strategy’s goal is to solve the issues above. Content Strategy’s mission is to make sure the design always fits, that the CMS always works, that the front end is not overloaded, and that the workflow… well…works.

Define Needs

One of the first and most important steps in content strategy is defining needs. Defining the needs of the customer, user, etc should be at the forefront of every feature. Answering the questions “Who, What, Where, When, and How?” should constantly be brought into the conversation to help keep the project on track and on budget.

Okay, so the client wants a blog on their site, great! What is its purpose? What kind of content will be added? Will there be pictures? Will it need categorization? Who is going to update this content? Where on the site will it appear? Do they need a widget of recent posts? Do they want comments? Who will moderate the comments? When and how often do you plan to publish? How will this help the end user? Do your users even read blogs?

All of these questions (and that’s just scaping the surface) for just adding a blog to a site. If the system is already in WordPress, it would take a couple of hours—but before you blindingly follow through with something, ask yourself these questions and start a conversation with the client. How do they think this will benefit them? Who knows, you might talk them out of a blog, but perhaps talk them into a whole new site…

Content Strategy is still a very new and “exciting” field. It is changing the way we all think about how websites are built. A website with a good content strategy is what separates a good site from a great site.

I found that most people are the same way as me, and I suppose forced social settings aren’t exactly comfort zones for most. In addition some of these events are held in loud, crowded bars and not the most conversation friendly places. In the age of Internet anonymity, however, there is a strange relationship with people you know really well and people you’ve actually spoken to. Social networks like Twitter, offer the ability to get to know your fellow developer or programmer without actually having to interact with them. So what happens when you want to?

I’ve found myself in several situations where I’m either in the same room, group, or social situation with someone I’ve been following on Twitter for several months. Now what? Oh hi, I not only know what you had for breakfast, and that you were up late last night drinking, but that project you posted on GitHub the other day was really great, congrats!

This post is more of an open poll or plea if you will. How do you engage your fellow developers/colleagues? What are some good ice breakers? What do you typically talk about? Which events/event types do you typically have the best success with?

So the idea behind Rapid Documentation Prototyping is that a lot features from WordPress or any build for that matter, Drupal, Expression Engine, etc, are similar if not identical from build to build. Common tasks like, How to Login? or How to Publish/Edit/Delete content is most likely going to be the same from build to build.

Now I know what you’re saying… isn’t that what the Codex is for or the hundreds if not thousands of blogs, tutorials, etc that are easy to access with a simply Google Search? Yes, and you right, finding out how to do something on a popular piece of software is fairly easy, but that doesn’t get you off the hook. Sometimes the clients we build projects for, or the employees they hire in order to maintain said sites might be less than tech savy, and navigating the WordPress Codec, or finding an up to date article on Google about how to Set a Featured Image in WordPress might be a monumental task.

With the help of Rapid Documentation Prototyping, however, you’ll be able to create useful, interactive and personal documentation that can help your client navigate the site you built quickly, easily, and without hazard. Instead of Googleing “How to login to Drupal,” your client can now simply click a link the directs them there instantly. By grabbing one of the pre-built templates, you can start writing documentation quicker and with less annoyance.

Currently there is only one template ( WordPress ), and the text is very limited right now. Eventually I’d like to have support for multiple platforms, popular plugins, etc. If you’d like to contribute to the project, fork it on GitHub, send me a message or tweet @pete_schuster.

So what do you think? Good idea or bad idea? Do you typically write documentation for your clients? Why, why not?