New Media Campaigns http://www.newmediacampaigns.com New Media Campaigns is a full service web design, development and marketing firm specializing in high end web sites created at an affordable price. en-us Copyright 2005-2009, New Media Technology Group A jQuery Plugin to Create an Interactive, Filterable Portfolio http://www.newmediacampaigns.com/page/a-jquery-plugin-to-create-an-interactive-filterable-portfolio-like-ours See a Demo

Read The Documentation

Download the Plugin and Zip

Last week we finally launched our new site design. One of our favorite new features is our filtering portfolio. We've selected 50 of the websites we've done to be featured and we've categorized each one. Using jQuery, it is possible to filter through the big list to see sites that apply to certain categories. Feel free to test it out and sort through it here.

Some of the requirements we had when we built it were:

  • It should be easy to update
  • Each item should be able to be in multiple categories
  • We should be able to link to certain filters with a url hash

To get this done, Josh, Eli and I collaborated on different aspects. We've finally finished it up and wrapped it up in a plugin that can be used by anyone. To download a zip with the plugin, see the bottom of this post.

Documentation

Markup

The plugin is configurable to work with just about any markup. Here is an example of what we used for the filters and the portfolio items.

Filters


Portfolio Items

  • Saranac

  • ...

Of course the markup can be completely arbitrary. All of the styling is done in css. There are only two major requirements:

  1. Linking Filters to Items - The hashed href of the filter link must match the class of the portfolio item. In the example above, the #jquery filter matches the last class of the only portfolio item.
  2. Portfolio Items are Wrapped - As you'll see in the JS section below, the plugin is called on a wrapper of the portfolio items. In this case, the wrapper is the
      .

Javascript/jQuery Setup

The jQuery is really simple to set up. If you use the same markup as I have, you can even leave out the settings and it should work out of the box. Simply do the following after you have included the filterable plugin:

$(document).ready(function(){
	$('portfolio-list').filterable();
});

The plugin will also take a number of optional parameters. These are the defaults:

settings = $.extend({
	useHash: true,
	animationSpeed: 1000,
	show: { width: 'show', opacity: 'show' },
	hide: { width: 'hide', opacity: 'hide' },
	useTags: true,
	tagSelector: '#portfolio-filter a',
	selectedTagClass: 'current',
	allTag: 'all'
}, settings);

To change any of the defaults, just pass them in to the initial call:

$(document).ready(function(){
	$('portfolio-list').filterable({
		animationSpeed: 2000,
		show: { height: 'show' }
		useTags: false,
		etc...
	});
});

Fun Features

Adding a Hash to a Url

If you have the useHash setting enabled, you can link directly to a single filter. You can see this in effect on our portfolio by visiting http://www.newmediacampaigns.com/section/portfolio#jquery.

Exposed Events

Once filterable() has been called, there are a number of events that get bound to the wrapper. Here they are:

/* Handles the state of the filter buttons as well as the portfolio items
 * Expects "tagToShow" to include a hash. */
$(this).bind("filter", function( e, tagToShow ){});

/* Just switches the portfolio items.  Expects a class name */
$(this).bind("filterportfolio", function( e, classToShow ){});
			
/* Shows a tag in addition to those being shown - expects a selector */
$(this).bind("show", function( e, selectorToShow ){});
			
/* Hides a tag - expects a selector */
$(this).bind("hide", function( e, selectorToHide ){});

The most useful of these is the first. It will allow you to programatically change the state of the filters and portfolios. So lets say you have a link somewhere on a page that you want to use to make sure your jQuery tag is shown. You could code something like the following:

$(document).ready(function(){
	$('portfolio-list').filterable();
	$('#linkID').click(function(){
		$('portfolio-list').trigger('filter', [ '#jquery' ]);
	});
});

For more details about these exposed events, feel free to check out the source or ask a question in the comments. If you're ready to test it out, just check out the zip below.

Download the Zip

To download this plugin and a sample project, click here.

To see the sample project first, click here.

]]>
http://www.newmediacampaigns.com/page/a-jquery-plugin-to-create-an-interactive-filterable-portfolio-like-ours Wed, 08 Jul 2009 15:00:00 EDT
Controlling typographic weight and contrast with text-shadows http://www.newmediacampaigns.com/page/typography-with-text-shadows Face it, we don't have a lot of control over typography on the web. We have about a half-dozen fonts to pick from, we don't know what size or exactly what color the type will be, and the exact same type will render very differently on a Mac than a PC. But the increasing browser support of the CSS text-shadow property is giving us more fine-grained control of text weight and contrast.

Text shadow has been supported in Safari since version 1.1 (as well as other Webkit-based browsers like Google Chrome) and in Opera since version 9.5. With the release of Firefox 3.5 last week, all the major browsers aside from Internet Explorer support shadows. Fortunately, since we will only be making subtle adjustments to our typography, it isn't a big deal even if the viewer is using a browser that doesn't support shadows. They will simply see the default look.

Typographic Weight

Normally, there are two font weights on the web: normal and bold (in theory there are a range of weights from 100 to 900, but there is little practical support for that). However, we can fake an intermediate text weight by setting the text-shadow color to the text color, and setting the blur to zero.

Normal text / Bold text / Text with text-shadow: 0 0 0 #000;

We can also reverse the trick and make the text a bit lighter with nearly-transparent shadow with 1 pixel of blur behind the text. I first saw a similar trick on Wilson Miner's site, although he has since removed it. The version using alpha transparency was developed by Komodo Media. Unfortunately, this technique is a little less predictable in browsers other than Safari, particularly in the current version of Chrome which actually darkens the text.

This has no text-shadow / This has text-shadow: 0 0 1px rgba(0,0,0,.01);

Local Contrast Enhancement

There is a trick commonly used in Photoshop to make photos "pop" with more contrast, but without modifying the overall tonal range of the photo. You can read more about local contrast enhancement elsewhere, but the essence of it is increasing the contrast of every edge in the photo—making the darker side a bit darker and the lighter side a bit lighter. We can use text-shadow to do the same thing with low contrast text.

Note: I am not advocating low-contrast text on your website! Make sure the text is readable even before you add any shadows.

So for instance if we have some brown text on a tan background, we would need to add a lighter tan "glow" around the text. That will increase the contrast immediately around the text itself, without changing the rest of the background.

No contrast adjustment / With text-shadow: 0 0 5px #f1e2cd;

You can see that this method lightens the text-weight slightly (just as in the previous example) but it also makes the text look sharper. The trick here is to pick a shadow color that sets off the text without looking artificial. In particular, this can be useful when you are overlaying text on a background image: the slight glow will make the text easier to read.

With all of these techniques the trick is getting the right combination of shadow color and blur radius: keep experimenting until you get it looking the way you want. And make sure to browser test! We are using cutting-edge technology here, so it will look a little different from browser to browser.

Finally, there are undoubtedly many other interesting effects to be had by manipulating the text-shadow property. If you find others, please share them in the comments.

]]>
http://www.newmediacampaigns.com/page/typography-with-text-shadows Wed, 08 Jul 2009 11:50:00 EDT
Blogging for Business Part 2: Writing Your Business Blog Posts http://www.newmediacampaigns.com/page/writing-your-business-blog-posts

Part 1 of the Series: Preparing to Start a Business Blog

In part 1 of this series, we examined why a business blog is important and how to build one.  After living in the space, deciding on a topic, and building your blog on your domain, it's now time to actually start writing posts and publishing them for everyone to read.

How Often and How Much Should You Post?

One of the first concerns that many of our clients have about posting a blog is the "time factor."  They're scared that blogging will be too much of a time commitment and they don't have sufficient resources to posting thoughtful content.  This is a valid concern and I always appreciate people not wanting to get in over their heads, but blogging isn't really as much of a time commitment as many people fear.

Our general rule of thumb is that you should write at least one post every seven days.  This guideline can differ based on what you're truly trying to accomplish with your blog (for example, we post daily, as this blog is one of our main marketing efforts), but we think once a week is a good baseline to start with.

A post every seven days ensures that your site is frequently updated with fresh content, and you also acclimate prospects to the idea that you're dedicated to your business and generating quality content on a regular basis. 

Furthermore, your posts don't have to be the quality or length of Moby Dick - we generally recommend making sure each post is between 300 and 700 words.  It's fine to occasionally have a shorter summary post or a longer thought-leading post, but people are generally coming to your blog to be informed quickly, so 300-700 words ensures you generate good content while not alienating readers with your verbosity.

What Should You Post?

One way to help ease the time burden associated with the weekly posts it to repurpose content you've previously written and turn it into posts.  Some good sources of content are:

  1. Emails to clients and colleagues.  Did a client or colleague write you an intriguing email that prompted you to write a thorough and thoughtful response?  Does it seem that this question comes up pretty often?  Make some changes to the email to make it more generic and post it to your blog.  It will then serve as a permanent reference for the question in the future, and the poser of the question will likely be flattered that you deemed their question worthy of an entire blog post.
  2. Previous Articles Written for Other Publications.  Have you been a guest columnist or blogger for another publication?  There's no reason that this content or similar content shouldn't also live on your site, especially if the original article only appeared in print form.  Make some changes to the column and post it to your blog, so people can always get access to the useful information from your site. 
  3. Summarize Important Industry News.  Was their big news relevant to your industry or your clients' in the past week?  Post a summary of the article (be sure to link back to the source!) and how it affects you and your clients on your blog.  Clients will appreciate that you've provided them with valuable information and were perhaps helpful in decoding a confusing news event and how it affects them.

By repurposing previous content, you can be sure that you didn't write that long email in vain or write a column for a rarely read publication, and you also cut down on the weekly time necessary to maintain your business's blog.

So, while a blog is certainly an undertaking that you shouldn't take lightly, I think the overall committment is not nearly as intimidating as many people think.  By posting 300-700 words every week, you have the ability to infinitely expand your footprint on the web, increase inbound traffic, and gain thought leadership with your target.

]]>
http://www.newmediacampaigns.com/page/writing-your-business-blog-posts Tue, 07 Jul 2009 11:55:00 EDT
This Week at NMC - July 3, 2009 http://www.newmediacampaigns.com/page/this-week-at-nmc---july-3-2009 We celebrated the 233rd birthday of America this past week by giving ourselves Friday off, but before we could start celebrating we were busy making websites and launching the new and improved NMC site. 

Our blogging initiative continues to churn out great blog posts. In two weeks we've generated 10% of the traffic we had in the previous 3 years. 

We've been making adjustments to our new site as well as working on the Allegretti for Congress website.

Funny

Around the Web

Development

These are the sites/projects we have launched:

 

]]>
http://www.newmediacampaigns.com/page/this-week-at-nmc---july-3-2009 Mon, 06 Jul 2009 12:25:00 EDT
10 tips for writing a business email http://www.newmediacampaigns.com/page/10-tips-for-writing-a-business-email Email is a great way to communicate with a business partner. You can collect your thoughts, say exactly what you need to say, and speak your mind in a non-disruptive manner. The recipient can respond/address the issue when they have the time, reply, and then rinse and repeat. As a project manager, I spend several hours everyday writing and reading emails and I really appreciate (and try to write) thought-out and to-the-point emails. Here are a few tips for ways to improve your emails.

1. Make sure your email should be an email

Before you sit down to write your email, make sure that email is the appropriate venue for your message. Should you be picking up the phone instead? Maybe a face-to-face meeting is the best way to address the issue? Think about what you're trying to accomplish and be certain an email is the best tool for the job. But hey, oftentimes it is!

2. Write a meaningful subject line

In this day and age, it's likely that the recipient of your email sends and writes over a hundred emails per day. There's a chance that yours gets lost in the mix and the subject line is your first (and best) chance to prevent that. Make it relevant and a call to action. First impressions matter, especially in emails.

3. Use 'URGENT' and 'IMPORTANT' sparingly

This goes along with #2. While people will probably read an email with URGENT or IMPORTANT more often, the first time you use it inappropriately, you lose your credibility and won't get nearly as quick of a response the next time. Even when this time, it actually is as important as you say it is.

4. Address the person individually

If you know the name of the person you're sending the email to, use it. Not only will the email look more personal, but you'll better grab the recipient's attention. Use first names only when appropriate and get their title right, they spent a lot of time and effort getting that 'Dr'.

5. Length: keep it short

This goes for both the email as a whole and the individual paragraphs and even sentences. As people read an increasing number of emails, their attention span is getting shorter and shorter. And your emails should too. Don't write a novel when a short story will do. Don't write a short story when a few bullets will do. The goal of your email is to get a response with the information you need. Don't wear out your reader by writing more than you have to.

6. IS THIS REALLY NECESSARY?!?!?!

Use caps lock, underlining and exclamation points. But use them only when you have to. I suggest only capitalizing a word or a phrase at most. The same goes for underlining. And don't put an explanation point at the end of every sentence. You and I both know you aren't THAT excited!

7. Don't assume they'll figure it out

Don't forward an email chain and let the recipient figure out what you want from him. Forward the chain and at the top, summarize the important information and what you need. Don't force them to read through the whole conversation and try to read your mind. It's not as obvious as you think.

8. The Internet allows for more than just text

Insert relevant links to help convey your message. Show pictures instead of explaining them. Utilize the resources that the Internet gives you. Don't rely on only text when you don't have to.

9. Know your audience

Choose your tone and wording depending on your audience. Don't joke around too much (no matter how funny you are) unless it's appropriate. Don't use lingo that your recipient may not understand (they might not find it funny, LOL).

10. Once it's sent, it's sent

Read over what you've written. Fix spelling errors and typos. Make sure you're not accidentally 'replying to all'. Because once you hit that SEND button, there's no taking it back. And you don't want to have to explain yourself again. But this time, with your foot in your monitor.

 

Hope these helped out. What other tips have do you have? I'm sure I left some out!

]]>
http://www.newmediacampaigns.com/page/10-tips-for-writing-a-business-email Sun, 05 Jul 2009 23:25:00 EDT
Make or Break your SEO: URLs & Title Tags http://www.newmediacampaigns.com/page/a-few-words-that-can-make-or-break-your-seo With a growing number of companies and organizations utilizing search engine optimization to increase their online visibility it is surprising to see a majority of them still using convoluted URLs and generic title tags on their websites.

URLs and Title tags provide information that helps describe your page and website to search engines and visitors so keeping this information relevant and accurate is one of the first major steps to making your website search engine friendly. So as a quick reminder or even a mini-lesson in SEO, here are a few examples for URLs and Title tags that serve to clarify what is good and bad in the world of search engine optimization.

URLs    

URLs should be descriptive, yet brief. Visitors should be able to get an idea of what kind of information will be on the page just by looking at its URL. If the page is at the end of several levels of sections of your website the URL should also reflect this. For larger companies it may seem easier to have a series of numbers and letters define each page but that does nothing for visitors or search engines, the two most important entities your company is serving.                   

URL Comparison for Sony 32" LCD HDTV


The Good: http://www.nextag.com/sony-32-lcd-hdtv/shop-html 

While nextag.com is a comparison shopping website, they do a great job of formatting their URLs to accurately describe the information on each page.   

The Bad: http://www.amazon.com/Sony-Bravia-XBR-KDL-32XBR4-HDTV/dp/B000RUNZVO

Amazon is a large company and often labels products with letter and numbers instead of using their actual name. However, at least a visitor or search engine could determine that this webpage has something to do with the Sony Bravia HDTV from looking at the URL. If only I could decipher the meaning of B000RUNZVO

The Ugly: http://www.walmart.com/catalog/product.do?product_id=9252002 

Walmart, like Amazon, is infamous for labeling products with numbers. While that may be conducive to their system of inventory, I, nor any search engine crawler, has any clue what Walmart is selling on this page.

Title Tags    

Title tags are most recognizable as the bold blue ink text that appears for each search result. They not only aid in defining keyword terms but also help drive click-through-rates from search results pages. Some title tags are generic; others attempt to name every detail on the page.

The Good: Milton S. Hershey - HERSHEY'S 

The Hershey's Company does a great job of creating great title tags for all of their pages, even the ones that share the history of Hershey. This page operates as the starting point to learning anything and everything about the man who built the Hershey Chocolate empire. Subsequent pages are well-titled and direct such as the page on Catherine S. Hershey titled "Milton Hershey's Wife".

The Bad: Animal Guide - Kids Corner - Georgia Aquarium 

The Georgia Aquarium does a good job of keeping their institution's name present in almost all of their title tags, but this page is actually about the American Alligator. The aquarium should consider removing Kids Corner from the title and add the name of each animal instead.

The Ugly: TVs, Computers, Cameras, GPS, Home Audio, Desktops, Laptops, Consumer Electronics, and more at CircuitCity.com 

Nice, Circuit City. I had to read through a listing of almost every possible electronic device before I even realized you were the company selling it. Instead of trying to run the gamut on everything your site offers, use your company name for the Title of your main website and keep your description for the meta tags.   

Diving into search engine optimization can seem daunting and leave you feeling overwhelmed, but by taking small steps and changing a few key words here and there can make this task a much more manageable one. 

]]>
http://www.newmediacampaigns.com/page/a-few-words-that-can-make-or-break-your-seo Thu, 02 Jul 2009 12:05:00 EDT
Websites are Wild Beasts: A Wrangler's Guide http://www.newmediacampaigns.com/page/websites-are-wild-beasts-a-wranglers-guide A website Beast, shown sleeping here, is dangerous when woken.

As a biology major gone web developer, I though I’d offer an organic perspective: websites are wild Beasts. Come with me on an adventure into the Web Wide World and I’ll share my knowledge on wrangling these Beasts.

Understand Your Beast

Websites are simple Beasts. They compete, evolve, and, ultimately, live out their existence in a place known as the World Wide Web. Thriving in this world doesn’t mean survival and reproduction. It means pageviews. Thousands of pageviews.

To compete for these page-views, Beasts must evolve. While Darwin’s evolution is driven by an unintelligent natural selection, website evolution is purposely driven by intelligent, web developer demi-gods and occurs at a much faster pace.

The Google (genus .com) is considered by many to be the largest, most powerful of the web beasts.

Web beasts live in an ecosystem

Web Beasts live together in specific ecosystems, such as the jungle of non-profits, the plains of political campaigns, or the steppes of social media. A Beast living on an island with no outside connections (often called “links”) dies. Conversely, the more links a web beast maintains, the more likely it is to thrive. All Beasts must occupy a useful niche in their ecosystems to thrive. Some offer unique services, humorous original content, or a convenient way for humans to communicate. Furthermore, the niche occupied by a beast is constantly threatened by competition, which brings up the next point.

The competition evolves

Ecosystems change overtime and new beasts come on to the scene better equipped to thrive. For example, search engine’s criteria have shifted, blogs have revolutionized the news ecosystem and the Twitter Beast is redefining the nature of social media ecosystems. In addition, new standards of design sweep the World Wide Web and your beast begins to look outdated. Essentially, it’s a fact of life that beasts become outdated every few years. Fortunately, I have some tips on how to better keep your beast up to speed with the pack.

  1. Ensure your Beast is born with a decent content management system. This will allow you to update content and news on each of your pages. And having fresh content attracts pageviews.
  2. Feed your Beast only the freshest content. A blog is an excellent source of powerful content.
  3. Connect your Beast to social media through such mega-Beasts as Facebook or Twitter.

But a Beast’s time does come. Therefore, I recommend having a team of experts on hand to put down your old Beast and craft a new one.

Forget the leash, grab a lasso

The Web Wide World has come a long way since multi-celled tables. Beasts are now dynamic creatures with features such as server-side scripts and database functionality. Beasts are quicker and more powerful than ever before. They have helped elect presidents and empowered revolutionary political movements. A few final words of advice: Beasts serve humans by providing useful information. Figure out what “useful” will mean tomorrow and hone your Beast accordingly.

]]>
http://www.newmediacampaigns.com/page/websites-are-wild-beasts-a-wranglers-guide Wed, 01 Jul 2009 13:50:00 EDT
HTML 5: Should we be excited yet? http://www.newmediacampaigns.com/page/html-5-should-we-be-excited-yet Update 7/2/2009: I incorrectly credited Jeffrey Zeldman as the creator of HTML5 Doctor. Instead, the actual creators of the HTML5 Doctor website are Bruce Lawson, Rich Clark, Jack Osborne, Mike Robinson, Remy Sharp, and Tom Leadbetter as described at http://html5doctor.com/about/. This change has been made below.

It's an exciting time to be a web developer. The browser wars are in full swing, reminiscent of the mid-90s. Firefox 3.5 was released only yesterday with plenty of cool, new features including HTML5 support for audio, video, offline and local storage, and canvas text. Google's Chrome and Apple's Safari are blazing fast, already sporting cutting edge HTML5 features. The HTML5 draft specification, although years from completion, is already influencing web browser development and will revolutionize the way we develop for the World Wide Web. The future is here! But should we be excited yet?

Microsoft's Internet Explorer still boasts a 65% majority share of the web browser market as of May 2009, according to Net Applications Market Share1. Older versions of Internet Explorer are still very much in use: version 7 with 41%, version 6 with 17%, and version 8 with 7%. Only in Internet Explorer 8 did Microsoft provide near-complete CSS 2.1 support. But Internet Explorer 8 still falls far short of its competitors in terms of features and speed. Yes, Internet Explorer 8 makes our web development lives easier assuming we are content with CSS 2.1, and assuming Internet Explorer 6 and Internet Explorer 7 users choose to upgrade to Internet Explorer 8. But what about HTML5? What about CSS3? Forget about XHTML: it is a lost cause that can be directly credited to lack of development and Microsoft's refusal to support the standard in its Internet Explorer web browser. Even Dave Shea from Mezzoblue says HTML5-ready HTML 4.01 is the way forward2. Unfortunately, I fear the future of the World Wide Web is at Microsoft's discretion.

What Do We Do?

This is not a rhetorical question. I want to know what you think. Some suggest web developers begin charging for Internet Explorer 6 support. Andy Clarke proposes a bare-bones IE6-only style sheet that provides adequate support for the aging browser3. Others express a more blunt technique best described by John Gruber of Daring Fireball:

Firefox 3.5 is out, and, among a slew of major improvements, it now supports the HTML 5 <audio> and <video> tags. I don't post many video clips to Daring Fireball, but henceforth, when I do, it'll be with the <video> tag. IE users can suck it.

John Gruber - http://daringfireball.net/linked/2009/06/30/ff5

Still, my question remains unanswered: when should we get excited about HTML5 and CSS3? When will it be truly realistic to develop cross-browser compatible websites using these modern technologies? Even Microsoft has released online advertisements4 encouraging users to upgrade from "browsers several generations old"... Microsoft, er, might you be referring to your Internet Explorer 6 web browser? Here is the Microsoft advertisement called "GRIPES" featuring Dean Cain of Lois and Clark fame.

This humorous and well-intended video is proof that even Microsoft wants users to ditch its Internet Explorer 6 and Internet Explorer 7 products in favor of its much-improved Internet Explorer 8 web browser.

Start Now!

We must usher in the future of web development. If your business model permits, drop support for Internet Explorer 6. Start learning HTML5. Jeffrey Zeldman Bruce Lawson, Rich Clark, Jack Osborne, Mike Robinson, Remy Sharp, and Tom Leadbetter have launched HTML5 Doctor, a website dedicated to teaching HTML55. O'Reilly says Google is backing HTML56. And Chris Wilson, platform architect of the Internet Explorer platform, says that Internet Explorer 8 will steadily increase its support for HTML5; Internet Explorer 8 already supports a few HTML5 features such as cross-document messaging, the window location hash, and network connection awareness7. As I see it, the problem we developers face is IE-users' slow adoption of Internet Explorer 8. As much as I dislike Internet Explorer, it is imperative that we encourage, coerce, or even force Internet Explorer 6 and Internet Explorer 7 users to upgrade to Internet Explorer 8. Only then can we really get excited about the future of the World Wide Web.

Learn More About HTML5

HTML5 Doctor
http://html5doctor.com/
A List Apart's Preview of HTML5
http://www.alistapart.com/articles/previewofhtml5
Differences between HTML4 and HTML5
http://dev.w3.org/html5/html4-differences/
W3C HTML5 Draft Specification
http://dev.w3.org/html5/spec/Overview.html

Footnotes

  1. http://marketshare.hitslink.com/browser-market-share.aspx
  2. http://mezzoblue.com/archives/2009/04/20/switched/
  3. http://www.forabeautifulweb.com/blog/about/universal_internet_explorer_6_css/
  4. http://www.youtube.com/watch?v=2aA_PEltVTw
  5. http://html5doctor.com/
  6. http://radar.oreilly.com/2009/05/google-bets-big-on-html-5.html
  7. http://www.sdtimes.com/content/article.aspx?ArticleID=31806
]]>
http://www.newmediacampaigns.com/page/html-5-should-we-be-excited-yet Wed, 01 Jul 2009 09:45:00 EDT
Three Basics of Search Engine Optimization http://www.newmediacampaigns.com/page/basics-of-search-engine-optimization Almost all of our clients come to us with questions about Search Engine Optimization and how to run a campaign for their site.  Most people view SEO as a deep mystery that requires years of HTML experience and an education from Hogwarts.  However, while there are many intricacies to the craft that re reserved for the masters, basic SEO doesn't have to be that complicated and can be accomplished with steady committment and the help of a good Content Management System.

Here are three of the basics of SEO, ranked in order of importance, and how you can help your site rank organically high for targeted terms.

The 4 C's: Consistently Create Compelling Content. The most important element of ranking high in search engines is having great content.  If you have good content that relates specifically to your organization, you'll get ranked higher for the targeted terms within your content.  However, it doesn't stop with just having a baseline of good content, it's essential that you are consistently churning out interesting and informative stuff.  It's important for a few reasons.

First, Google looks at how often your site is updated when judging how frequently it should spider (inspect) your site for organic rankings.  So, if you are frequently creating content, you increase the likelihood that Google comes back to your site a lot to judge your content and accordingly update your rankings.

Second, every page you create is indexable by Google, helping your long tail of search terms.  So, whether you're creating content in a blog, newsfeed, or somewhere else, you're increasing the amount of total pages and search terms that you'll be indexed for.

Third, good content serves as excellent "link bait," meaning that other people will link to your site.  When other people link to you, it passes along their Page Rank juice, which will in turn help your site rank overall better in search engines.

Get Linked To.  This doesn't mean buying 50 links for $50 from a Nigerian Prince, but it does mean trying to get valuable links to your site from others.  Remember, the more legitimate and popular the site doing the linking, the more value Google will credit to that link and thus to your site.

One easy way to accomplish this task is through having multiple presences for your business online (i.e., Twitter, LinkedIn, Facebook, a Microsite, etc).  By having these other presences and building links from them to your main site, you'll pass along valuable Page Rank points to your site.

Also, by following the first rule of the four C's, you increase the likelihood of other blogs and social media presences linking to you.  Finally, don't be shy to ask for links from folks that write about you.  If your featured in a local newspaper or blog, be sure to ask for a link back to your site.

The anchor text (meaning the words that form the actual link) of the links is also very important, as Google uses that to determine what keywords best describe your site.  So, when possible, be sure to use your targeted terms (i.e, political web design, for us) as the text for the link.

Descriptive URLs and Title Tags.  If you're using a good CMS, you should have the ability to control the URL and Title Tags (the description at the top of a browser window for a site) for each page.  After content, these are the two most important "on page" elements of SEO.  Your URLs and Title Tags should be optimized with targeted terms, but also should be consistent with the actual copy on the page.

One of the cardinal sins of good Search Engine Optimization are sloppy or unreadable URLs, such as newmediacampaigns.com/a98y3498.asp.  It's important that you have clean URL extensions separated by dashes, like newmediacampaigns.com/clean-url-description/.  By having the URL match up well with your Title Tags, Google will get a good idea of what the page is about (or what terms you want it to think the page is about).

While there are many other elements of SEO, these are the three that are easiest to control and of the most importance.  Have you optimized these elements and experienced success?  I know we have.  Also, what are some other SEO elements that you focus on with your site?

 

]]>
http://www.newmediacampaigns.com/page/basics-of-search-engine-optimization Tue, 30 Jun 2009 23:40:00 EDT
Moving your script tags: The quickest way to improve site performance http://www.newmediacampaigns.com/page/moving-your-script-tags-the-quickest-way-to-improve-site-performance At this point almost every web developer is familiar with YSlow. If you're not, YSlow is a Firefox extension that integrates with Firebug that analyzes the performance of webpages based on a set of rules Yahoo! has developed. By following this set of rules, you can make your website load much faster for visitors.

While working on the new NMC website, I ran YSlow and began making improvements. What I found shocked me. Perhaps the greatest gain in performance came from the easiest rule to implement:

Put Scripts at the Bottom

That's right, moving your script tags from the site header to immediately before the closing body tag can dramatically improve your site's performance. As an added bonus, this can almost always be done naively if you're using a modern javascript framework like jQuery.

So why does this work? When a browser downloads a site, it first works on the html and encounters additional components like stylesheets, scripts and images. If it can, it will download this in parallel. However, in all browsers (not just IE!), loading external scripts is blocking. The browser will not begin downloading anything new if a script is being downloaded. You can see this in effect by looking at Firebug's Net tab:

Before:

After:

As you can see, the blocking effect is dramatic. It is certainly worth moving your script tags to the bottom of your page if you can and also look into the other tips Yahoo! has.

Issues to look out for

  • document.write - If you're using document.write to insert content in place, moving your scripts will be an issue. That said, this generally isn't the preferred way of modifying content using a javascript framework so it is not often an issue with newer sites.
  • Timing/Appearance - If your scripts are doing any appearance manipulation to your site, you should be aware that putting them at the bottom will cause them to load later. This could make the loading process jarring for visitors.
]]>
http://www.newmediacampaigns.com/page/moving-your-script-tags-the-quickest-way-to-improve-site-performance Mon, 29 Jun 2009 16:10:00 EDT