Archive for the ‘Search Engine Optimization’ Category

Making A Website From Start To Finish – Part 2

In Part 2, I’ll go over the initial setup of the development of the website. In particular, because I’m a big supporter of using WordPress for most websites, I’ll go over how to install and setup WordPress on your self-hosted (not hosted by WordPress) website. I’ll also talk about the other preparation needed for your early development stage. Here’s the list of what we’ll talk about:

  • Determining CMS Needs
  • Installing and Setting Up WordPress
  • Building Out Site Content
  • Search Engine Optimization
  • Link Building and Marketing

As in Part 1 of this tutorial, I’ll use our example restaurant website as an example for each item in the list.

1. Determining Your CMS Needs: The first thing you need to do before beginning your development is determine if you are going to use an out-of-the-box content management system for your website. This will be determined a lot by whether you, as an experienced web developer, will be maintaining the site, or if a client with no web experience will be managing it. If the site will include a blog, or regularly changing pages, a strong CMS would be an intelligent move. If the website will be relatively static, not change regularly, and when it does, will be updated by someone with web developing experience, then a CMS might be overkill. Setting up a CMS can also take more time than just building a site from scratch, so don’t just opt for a CMS by default.

For our restaurant website, let’s pretend they update their menu seasonally and they want to post specials online weekly. I think that’s reason enough to set up a CMS so that they don’t need to regularly ask you to update it.

2. Installing and Setting Up WordPress: If you ever work on a website that needs a CMS, I hands down, every single time, will recommend WordPress. It has so much flexibility, but at the same time, has a very usable interface for anyone who tries to use it. So I’ll walk through the steps of installing and setting up WordPress for a self-hosted (non-Wordpress.com) site.

Step 1. Install WordPress! Luckily, WordPress has a great installation walkthrough to help you through this process. It is definitely more complicated than if you use WordPress.com and don’t host your site, but it isn’t that bad at all.

Step 2. Download and install the theme and plugins you want. If you are planning on building a more complex site, start with a basic theme that meets as many needs as you can. You’ll adjust it later. Find the plugins that you’ll want. For a basic WordPress install, I recommend the following plugins: Askimet, All In One SEO Pack, Google XML Sitemaps, Jetpack, and Sociable. Askimet is the best for blocking spam comments, Jetpack is created by the WordPress team and comes with a lot of other built in plugins like stats for your site. The SEO pack, Sitemaps, and Sociable are all great plugins to help with SEO and increasing website traffic. All of these plugins (except for Jetpack) make more sense only if you are including a blog in your website.

Step 3. You’ll also want to delete the original page, post, and comment that by default come with the basic install. I never understood why the install came with this content, but it is best to start with a clean slate.

Step 4. Create a new blog homepage separate site homepage. By default, WordPress sets the blog post listing as the homepage of your site. If you want the blog to be in a subdirectory and you want a different homepage, then you’ll have to create these two pages BEFORE you complete step 5.

Step 5. Setup your site preferences under settings. There are a lot of default settings that you might want to change, so be patient, and go through each settings page in WordPress. Most importantly, if you want a separate homepage and blog homepage, then pay attention to the Reading Settings. Set your front page display to a static page, with the homepage as your newly created homepage, and the posts page as your newly created blog homepage.

Step 6. Adjust your theme as needed. This step really ties in with your real development, so I’ll talk about this more in Part 3 of this tutorial.

For our restaurant website, I would definitely use WordPress. I’d try to find a theme that was intended for restaurants in the first place, but I’d make sure it wasn’t overly complex first. I’d definitely set up a static homepage, and I would leave the blog out of the setup for the site. Just because WordPress is by default a blogging software does not mean you have to use it that way.

3. Building Out Site Content: You can’t have a website without content. I usually leave this item to my clients, but they frequently struggle with this task. It is hard for someone who doesn’t build websites, and doesn’t create marketing materials regularly to build out content for a site they haven’t seen yet. It is often a catch 22 situation for me because my clients struggle to build out the content before they see the fully designed site, and I need the full content before I can finish designing certain pages. For example, I can’t design icons, pick stock photos, or handle content layout very easily without the content itself. This is something you always have to go back and forth on, and the content usually ends up being the last thing changed on the site.

For our example site, I’d make sure that the owners provided their menus ahead of time, along with descriptions of the restaurant, contact information, hours, and any other marketing materials they may have already prepared previously. I’d try to build my designs around this content, but I’d definitely try to build the content into the site as I begin the development process.

4. Search Engine Optimization: SEO is an ongoing process. But you should start thinking about it early. To begin with, I’d register the site on DMOZ, an online website directory. There are other directories, but some of them charge to be listed, while DMOZ is always free. Next, you want to consider some of the plugins I mentioned earlier in this post, but you should also consider SEO for your HTML page structure. The faster the page loads, the better the META information you have in the head of your pages, and the better tagging you use with keywords (good header tags and quality content), the better off your site will be. You can also look into using schema.org which helps search engines display information more appropriately in results. This can help you a lot when users are determining whether they want to visit your site or not.

I’d definitely do all of these things for our restaurant website. I’d register on DMOZ, setup good meta descriptions, keywords, and a quality title for each page, keep the page HTML small, use quality keywords in the content, and place them strategically in header tags, and I’d definitely use the schema.org restaurant schema to help with search engine result displays.

5. Link Building and Marketing: The last thing you should consider before you start your full development process is marketing. You want to get a head start on this process before the website is complete. Getting links to your website out there is vital to showing up in search results. The more sites that link to yours, the better off you’ll be. Now is the time to develop any marketing ideas around your new website that you might want to use for advertisement. Pairing marketing and link building with the launch of your website is a smart idea.

For the restaurant website, I’d definitely consider some sort of website special or coupon to reward customers that came to the restaurant via the website. It will encourage them to revisit the site and the restaurant, which is ultimately what we want. I’d also look for local listings to make sure that the website is included in those listings. If you are worried about the website not being done before those listings are public, you can put up a temporary splash page indicating the website is coming soon. That is a common practice for companies that are getting going, want to build an online presence and market, but don’t have their full product ready yet.

Now that all of the pre-development issues are taken care of, it is time to start your real code development which I’ll go over in the final part of this tutorial series, Part 3. I’ll also touch on site optimization and analytics to track the success of your newly created website.

SEO Friendly Two Column Layout

SEO Friendly Two Column LayoutMost website owners, for obvious reasons, want their websites to be highly trafficked. When I build a site for a client, I always make an effort to keep search engine optimization (SEO) in mind so I can help them grow their traffic/clientele/customer base. There are thousands of companies out there claiming they know the secret to landing you at the top of Google search results, but when it comes down to it, there is no one answer… there are a lot. One such item to try for your site is keeping the relevant content of your pages at the top of your HTML code. Sometimes this can be difficult for people working on websites that have a multiple column layout with something like navigation or ads on the left and the main relevant content on the right. Now some might say there are simple solutions to this problem involving using float left and right CSS properties for your respective divs that contain each column, but there are some layouts that require a more sophisticated solution, that is much less prone to break regardless of the actual content.

When implementing this for a website I was working on, I stumbled upon a genius post by Matthew James Taylor who has a series on multi-column liquid layouts that are all cross-browser compatible and SEO friendly in the sense that I speak of above. I adapted it a little bit to account for some specific 10px margins and a specific navigation width of 300px, which you can also adjust. The requirements are quite simple to implement, and here’s how to do it:

The HTML:

<div class="mainWrap">
  <div class="mainSubWrap">
    <div class="mainContentWrap">
      <div class="mainContentSubWrap"><!--All your main content goes in here--></div>
    </div>
    <div class="navContentWrap"><!--Nav content goes in here--></div>
  </div>
</div>

The CSS:

.mainWrap {
  position: relative;
  clear: both;
  float: left;
  width: 100%;
  overflow: hidden;
  margin: 10px 0px;
}
div.mainSubWrap {
  float: left;
  width: 200%;
  position: relative;
  left: 290px;
}
div.mainContentWrap {
  float: right;
  width: 50%;
  position: relative;
  right: 290px;
}
div.mainContentSubWrap {
  margin: 0px 10px 0px 310px;
  position: relative;
  right: 100%;
}
div.navContentWrap {
  float: left;
  width: 290px;
  position: relative;
  right: 290px;
}

Basically you end up using relative positioning to move the navigation box over to the left of the main content box, and visa versa, yielding the main content appearing on the right side of your screen, but appearing first in your code. The benefit to this over a simple float is the ability to assign background colors that you want to fill to the bottom of the screen regardless of whether or not the background colored div is the largest in height. It is also pretty much a sure bet that it won’t break across browsers.

Definitely give it a shot, and if you have any questions, don’t hesitate to ask!

SEO Simplified

SEO or Search Engine Optimization is a very complex process. People make a living doing SEO work for other individuals. Entire companies exist that tout the best SEO practices. Well, for the simple minded, for the not so wealthy, and just for the interested, let’s break down what SEO really is and what simple steps you can take to help out your own site.

Okay, first a definition. Simply put, Search Engine Optimization is an attempt to get your website higher up on search results run by Google, Yahoo, et cetera. Why is this important? Don’t you want visitors!?! Search engines are the best marketing tool out there. You’ll never come close to getting more direct or referral traffic than search traffic to your website (unless you are as big as say facebook.com for example). Even the biggest of businesses such as Amazon.com still rely very heavily on search traffic. So how can you push yourself higher on those results?

Well, there are countless articles out there trying to tell you how to perform SEO. I’m not saying you should listen to me, in fact, I consider myself a novice when it comes to SEO, but I do have a few easy suggestions that just about anyone can do.

1. Make sure to set up a redirect between the www and non-www version of your website. Search engines see http://www.example.com as a different site than http://example.com. If you set up a permanent redirect, then search engines will bump you up higher, links to your site will be consistent. Here is a great tutorial on it.

2. Register with sites like dmoz and yahoo and zoominfo. These sites are essentially listings of websites and companies and people. Being listed on these helps show search engines that your website is essentially more reputable than websites not listed there. Yahoo costs money, but dmoz is free. Hurry up though, it can take months for them to get you on the list!

3. Write a BLOG!!! I know, ironic right? The reason that I started this blog in the first place was to drive more traffic to my site. Sites with blogs have tons more content, and because the content is constantly changing and updating, it is much more likely to pop up in search results. Even more than that, people might start bookmarking your blog posts on sites like del.icio.us and digg.com. Bookmarks on these sites can drive hundreds of visits in under an hour once they are posted. Also, when there are bookmarks to your site from these websites, search engines use that as another form of validation that your content is useful, just like being listed in those conglomerate sites mentioned above.

4. Get lots and lots of links to your site. The more links that exist on the web to your site, the better. Search engines see those links as even more validation for your content. Try establishing relationships with other businesses you work with on a regular basis and get them to link to your site in return for a link to theirs. Make a facebook page for the website with a link. Anything that will add more links to your site out there in the web is good!

5. Lots of content, that you update, with good header tags. Google is known to use the content of a website to determine what is on it. Go figure right? In the past, all search engines used the Meta Keyword and Description tags, but then people started stuffing their tags with thousands of unrelated words in hopes of landing on tons of search results. As a result Google, and many other search engines have followed suit, do not use them anymore. Stick to under a dozen keywords, and then just pay attention to your content. Having useful header tags (h1, h2, h3, etc), lots of good content, preferably that you update, and purposeful images will do wonders.

6. Check out Marketing Grader. This site will help you keep track of your progress. As with any of these tools, take it with a grain of salt, but so far, this is the best one I’ve found on the web. The same company previously ran Website Grader which was solely focused on SEO, and then they expanded that tool to including other marketing techniques like social media. They can offer some good ideas toward better SEO and marketing though, so check it out.

The Hullabaloo on Blogging

I never got it. Heck, I still don’t get it. Why are blogs so popular? Why do people find the need to write about their mundane lives? Even more puzzling, why do people find the need to read about other people’s mundane lives!? All these questions for naught. It seems no matter how much it disgusts me, I’m going to give in, but for a specific reason.

I’m going to use this blog as a way to help drive traffic to my online portfolio. Also, working as a full-time web designer, I’ve discovered that whenever I can’t figure something out, I google it. More often than not, I end up on a blog site, reading someone else’s CSS trick that saves my life. Well, by now, I seem to have quite a few tricks up my own sleeve, so why not unite them under one roof?

From recent issues I’ve dealt with, here are a few of my upcoming posts that you can look forward to:

Other suggestions are always welcome. We’ll see how I do with moderating/reading comments. Please feel free to make requests.