Category: casestudies

Client Showcase: Madison Green Box

Moving a business across state lines can be difficult in that you have to re introduce who you are and what your business can do.  In the spring of 2011, Brit moved from the rocky mountains of Colorado to the dairy queen lands of Wisconsin.  Continue Reading..

Client Showcase: Dan Bennett Real Estate

Dan Bennett Real Estate is a full service real estate agency located in the North Shore of Massachusetts. Dan Bennett has been a client of MDS for 5 years now and we’ve thoroughly enjoyed working with him and bringing his business to the internet world. Dan is a very well known man in his community, having done lots of charity work, sits on the board of Trustees, the local school boards, as well as the town of Selectmen. He is a trusted notary, realtor and a family man. Continue Reading..

SEM and SEO: What’s the Difference?

Trying to promote a website? No double you’ve seen the terms SEM and SEO being thrown around. While similar, they are not interchangeable; SEM, or search engine marketing, properly contains SEO, search engine optimization.

Most people are largely concerned with SEO, which refers to measures taken to improve the visibility of a site in the organic results (in other words, the ones that come up naturally, not the results in the sidebar that you pay for). This encompasses a variety of techniques, from white hat methods such as building great content with proper keyword density and getting natural links, to black hat methods such as keyword spam, doorway pages, and comment spam. Google encourages webmasters to use white hat SEO techniques, but actively pursues and deindexes those using black hat techniques. There’s also grey hat: methods that aren’t exactly on Google’s list of spam indicators, but might not be the most ethical either. Here at One Ear Productions, we use white hat SEO only.

Notice how there are multiple links in this post to other articles on the One Ear blog. The anchor text, which is the words that you actually click on, tells both the user and the search engines what to expect from the page the link is going to. For the user, it makes it easier to find other posts that are relevant to what he or she is searching for. For Google, it makes it easier to decide exactly what the post is about and return it correctly. While we always prefer external links (that is, those coming from other websites, preferably in the same area), setting up a proper link net on our site helps improve its standing with Google.

Search engine marketing, on the other hand, is concerned with making sure that a website is getting traffic from search engines, and SEO is just one method that someone using SEM might be using. It also includes paid advertising, such as the contextual ads that show up next to the Google results and the targeted ads that show up in Facebook and GMail. Some search engines (not including Google) allow webmasters to pay a fee to be included in the search listings. While an effective SEO campaign is the most efficient way to build up traffic in the long run (as the improved search engine visibility will continue after the campaign has concluded), many companies prefer to use paid advertising as it can lead to immediate results. Generally, the advertiser has a choice of paying for ads either by CPC (cost per click), where they pay a certain amount of money for each click, or CPM, where they pay a certain amount for every thousand times the ad is displayed.

Is one strictly better than the other? No. While we believe that SEO is more cost effective in the long run, and have run some small SEO campaigns to get this blog to position #1 for certain keywords, we’ve also used paid advertising to get the word out about limited time special offers, targeted at the people we wanted to see them. When those campaigns ended, however, there was no longer-term effect. The SEO should keep growing our traffic indefinitely.

HTML5, Part V: Forms

When it comes to forms, one thing I hear a lot about is setting them up using PHP; HTML has basic form capability, but don’t you want them to do more?

With HTML5, forms can indeed do more, without the need for any fancy scripting. The best part is, all of the new  features degrade gracefully, which means you can use them now without spending a lot of time worrying about what they’ll do in legacy browsers.

Let’s start with the basic elements of an HTML form, which are the same in HTML 4 and 5:

<form>

<input name=”name”  type=”type” value=”value”>

</form>

That’s all there is to it! Let’s take a look at each of these elements. The name tag identifies the input, which lets you refer to it later; this is particularly important when you’re using it to pass information to the next page. The type tag tells the browser what type of input to use, such as a button or dropdown. Finally, the value field is the default value; for a button, this would be the displayed text. Each of these tags is optional.

The nice thing is that when a browser doesn’t understand the given type, or the type is not given, it simply displays it as a text field rather than giving unpredictable behavior. This means we can use new HTML5 input types, knowing that people with older browsers will still have a way to provide input.

How about an example? Suppose I want you to choose an even number between 8 and 22, with a default of 12. I can do that using the following code:

<form> <input type=”number” min=”8″ max=”22″ step=”2″ value=”12″> </form>

If you’re using an HTML5-compliant browser such as Opera, the following should show up as a spinbox that allows only the even numbers between 8 and 18. In older browsers, it will show as a simple text field, but will still be validated – the form will refuse to submit if the user enters an illegal value. The second field is the same code with the type changed to range.

 

So why use these special tags instead of just having the user type a number? For one thing, it can be optimized in various ways. If you’re viewing this page on an iPhone, you won’t get a spinbox, but your keyboard will default to numbers. A search field (another new type) may be functionally the same as a text box, but if you’re using Safari on a mac, it’ll have rounded corners to look like the standard mac search boxes; on both Safari and Chrome, once you start typing a little x will appear to erase the field. While browsers don’t handle these tags in the same way, telling them what type of data is expected allows the more appropriate data entry.

Aside from new types of input, you can also do new things with the old types. For example, one thing that drives me crazy is scripts that autofocus on an input box; when I check my email on the web I tend to have finished typing my username and be halfway through my password when the page finishes loading and moves the focus back to the username field. Now, instead of using javascript, we can stick with HTML and accomplish the same thing in a less annoying (and more consistant) way. Consider the following code:

<form> <input name=”tellme” autofocus  placeholder=”Placeholder Text”> </form>

Depending on which browser you’re using, both, one, or none of the new attributes we’re using will take effect; whichever ones don’t will simply be ignored. Autofocus (predictably) sets the focus to this field, while placeholder text appears in light grey to tell you what you’re supposed to type:

Again, the nice thing is that this degrades gracefully, so it provides a better user experience for people with compatible browsers without annoying those people who don’t see it. (Of course, you may want to detect compatibility and use javascript to provide the same functionality so that more people can see your site as designed). Note that in the above example, we used autofocus and placeholder text together, which is kind of silly because putting focus on that window removes the placeholder text, but it will come back if you click on something else and remind you what needs to be typed there! Also, the autofocus brings this box into view as soon as you load the page, which means you have to scroll back up to get to the top of the article; not particularly good design, but it does demonstrate the power of this attribute.

Building a Blog, Part VI: The Importance of Permalinks

If you’re reading this from the main site page, go ahead and click through to the article. Now look up at the url for this page. What do you see? The link looks something like this:

http://blog.oneearproductions.com/2010/07/building-a-blog-part-vi-the-importance-of-permalinks

Now, if we were using the default WordPress settings, it would actually look like this:

http://blog.oneearproductions.com/?p=316

Which version tells Google what the page is about? Bingo! You always want to use the first type of link because (assuming you picked a good post title), it tells people and search engines what your post is about.

 

Doing this in WordPress is easy; just go to the settings dropdown and click permalinks. You’ll see a half-dozen options; we’re using year, month, and post title, but anything works as long as it includes the title. If you want to make your own custom style, use the last option; just be sure to include %postname% in your url template.

How does this affect your SEO results? Suppose Google is indexing this page (which will happen about two minutes after I hit “publish”). First it reads the url and sees the keywords blog and permalinks. Then it reads the page and sees those same words repeated again. Bingo: Google concludes that this webpage (that is, this post) must be related to those terms, and this is a relevant result for people who want to read more about them!

If I was trying to  make this page show up in the first SERP, I’d start by making the page search-engine friendly (as well as user-friendly); a relevant url is one way to do that. After that, I’d get started building links to this page from relevant websites. Notice that the link in that last sentence uses anchor text that includes the keyword (links) for the page it’s linking to; that page contains the same keyword in the url and title (and, of course, in the body of the post). At this point, Google has a really good idea what that page is about!

Remember, the whole point of search engines is to help users find the most relevant results; accurately describing the content of your pages helps them match the correct page with the correct user. While some people try to abuse the system to get as many visitors as possible to worthless spam pages in the hopes of getting advertising money, when running a legitimate site you want to attract exactly those users that are looking for the content you can provide. Why waste bandwidth (and people’s time) on users who don’t want what you’re offering? Google, of course, is always on the lookout for spam sites (and has human evaluators, as well as software, to help find them), and will happily remove them from the search results. Stick with white hat SEO; don’t let delisting happen to you!