Warning: Creating default object from empty value in /home/meatjunk/whiskeyandaspirin.com/wp-includes/functions.php on line 364
Anatomy of a Website - Whiskey & Aspirin
Skip Navigation

Anatomy of a Website

August 27, 2006 | The Practice of Holistic Web Design

In July 2005 I wrote a blog post called Make Money with the Internet in which I posited three rules for building a revenue-generating website. I ended the post by claiming I had a few ideas for such a website and promised that I would update this blog with a case study once I had built something. The good news is that now, over a year later, I’ve finally put the finishing touches on a new website called Inherently Funny, a database of funny names, funny songs, and more. Of course, the requisite bad news is that the site makes almost no money. There are a lot of good reasons for this—for one thing, I only followed one of my three rules for building a revenue-generating website—but despite this lack of success, I don’t believe Inherently Funny was a wasted effort. Whether or not my idea for an online database of jokes without punch lines was any good, building the site did remind me that good web design requires more than simply knowing HTML and Photoshop. Good web design is in fact a holistic practice requiring the additional knowledge of search engine optimization, web usability, and web analytics. I wouldn’t expect anyone to simply take my word for it though, so what follows is a discussion of each of the three fields and examples of how I applied them to Inherently Funny.

Search Engine Optimization
Placing high in search engine results is the easiest, most cost-efficient way to drive traffic to your website. While you can’t control everything about search engine performance (especially your competition), you do have control over the following.

1. Domain Name
Search engines reward sites when search terms appear in the domain name. (It’s one of the reasons Travelocity ranks first on Google for the search term “travel.”) Knowing this and knowing that “funny” would be an important search term for my website, I selected inherentlyfunny.com as my domain. I was lucky it was available, though, so if you can’t find a good domain name, start thinking about subdomains as well. For example, if you want to create a website about an 80’s sitcom and www.mytwodads.com is unavailable, you instead can register www.twodads.com and then create the subdomain my.twodads.com through your webhost service.



2. URLs
Search engines also reward sites with URLs that include search terms in natural language. This, for example, would be a great URL for a page about raccoon eating habits:

www.raccoons.com/raccon_eating_habits.html

Instead of natural language search terms, though, most dynamically generated websites produce URLs comprised of confusing query strings. When I first built Inherently Funny, my URLs suffered this same problem. For example, my URL for the Funny People page originally looked like this:

www.inherentlyfunny.com/results.php?cat=people&page=1

By adding fairly simple URL rewrite rules to my site’s .htaccess file though, I was able to change that same URL to this:

www.inherentlyfunny.com/categories/funny_people_1.html

Notice that it’s much easier to scan and that the words “funny” and “people” appear together to form the phrase “funny people.“ This seems to work especially well for the MSN search engine.

3. Page Titles
A concise page title that accurately describes the content of your page in common search terms is essential. The page title (seen at the top of a browser and in the head of the source code) of my Funny People page is simply “Funny People - Inherently Funny. ” Please note that the search term is listed first and the name of the website is listed last.

4. Search Term Density
Search engines also reward sites with pages that include a search term 10-15 times. For example, the Funny Things page contains 13 instances each of the words “funny” and “things.” Make sure to spread your terms out and don’t go overboard though—a search engine will likely consider your page spam if you use a term more than 15 times.

5. Semantic Markup
Semantic markup simply means coding a headline as a headline and a paragraph as a paragraph. In other words you should use the H1 tag for the most important headline on the page and the H2 for the second most important headline on the page. Search engines will look at these headlines for information about the page, so the more search terms you include in headlines the better. You can see an example of semantic markup by viewing the source of any page on Inherently Funny.

6. Website Footprint
The greater your website footprint (i.e., total number of pages), the more pages search engines will index and the greater chance someone will land on your site. That said, most new sites start with a limited amount of content, so it’s helpful to find creative ways to repackage that content on several distinct URLs. For example, on Inherently Funny each entry can be viewed by comments, category, author, or tags. As a result, a single entry like “Spuds MacKenzie” can appear on four separate URLs with four distinct page titles. (Please note, because Inherently Funny is always adding content, some of these URLs may have changed.)

Spuds MacKenzie - Inherently Funny
www.inherentlyfunny.com/comments/Spuds_MacKenzie.html

Funny Animals - Inherently Funny
www.inherentlyfunny.com/categories/funny_animals_1.html

Tyler’s Funny Entries - Inherently Funny
www.inherentlyfunny.com/submitters/tyler_3.html

Entries Tagged 80’s -Inherently Funny
www.inherentlyfunny.com/tags/80's_1.html

7. External Links
Having other sites link to your site is the single most important factor in search engine optimization, but I’m mentioning it last because it’s also the factor over which you have the least control. Ideally your site will be popular enough that other sites will voluntarily link to it, but it also helps to get the ball rolling by setting up a reciprocal links program like I’ve done on the Inherently Funny links page. Don’t be discouraged, though, if you’re having trouble getting links. Very few sites currently link to Inherently Funny, but because I otherwise executed well on items one through six, the site nonetheless appears on the first result page for the following competitive searches: Funny Phrases (Google and MSN), Funny Words (MSN), and Funny People (MSN).

Web Usability
Good search engine optimization will pull visitors to your site, but unless those visitors hang around for a few clicks, your optimization efforts will be for naught. To keep visitor clicking, you must build a site that’s easy to use, so here are a few usability basics to keep in mind.

1. Page Load Times
A usable website requires pages that load quickly. So how quick is quick enough? Usability authority Jacob Nielsen claims that “hypertext browsing requires response times of less than one second for the user's navigation to feel unencumbered.” That doesn’t mean, of course, that pages that take longer than one second to load will cause your site to fail. It does mean, however, that if you do break the one-second threshold for high-speed connections you should have a good reason for doing so. To diagnose a slow page load, it’s helpful to understand that when you click on a link two distinct things must happen before a page appears in your browser. First, the server must communicate with the database and run any server-side scripts required to assemble the HTML file. During this assembly, site traffic, server and database hardware, poorly-designed databases and programming scripts, and overall page complexity can all delay a page load. Second, the browser must download the assembled HMTL file and any additional CSS files, images, or external client-side scripts it references. The size of those files and the speed of a user’s connection will affect the page load time during this stage. An easy way to check file sizes is through a free service like Web Page Analyzer. I’m happy to say that according this tool, the home page of Inherently Funny takes only 0.5 seconds to load.

2. Interface Conventions
The internet has matured considerably during the past ten years, and a number of interface conventions have emerged. Most users now know, for example, to find the site logo in the upper left, the menu bar across the top or along the left of the page, and the site search at the top right. By leveraging these existing conventions you can ensure that users needn’t waste time learning a new interface. When designing Inherently Funny I wanted to allow users to sort columns by both submitters and ratings, but I was initially unsure about how to lay this out. Instead of designing a new interface, though, I simply copied Apple’s iTunes and assumed that anyone who knew how to use the iTunes sort functionality would also understand how to use my site. Before trying something new, see what major sites like Google or Amazon do and check out Yahoo’s free Design Pattern Library.

3. User Feedback
When a user commits an error, he or she has a right to expect friendly, informative feedback. For this to occur, designers must build with the expectation that users will make mistakes. There’s no better way to explain this than to demonstrate, so go to the Inherently Funny submission page, scroll to the bottom, and click submit. Because you haven’t filled out the form, the site returns a set of short error messages and—just as importantly—highlights the missing fields on the page. Now choose a category and click submit again. Notice that the site remembers the selected category even though other errors still exist on the page? Too many times sites frustrate users when one improperly completed field triggers the loss of some or all of the other data entered. In this case, the usability issue occurs because a programmer hasn’t taken the extra step to temporarily store the data. Please note, building a site that’s easy for users often means it should be difficult for programmers.

4. Informal Testing
You probably lack access to a formal usability lab equipped with video cameras and one-way mirrors, but that doesn’t mean you still can’t benefit from usability testing. Simply grab a friend unfamiliar with your site and spend a few minutes watching him or her use it. Ask your friend to perform a few tasks, and as you’re watching, avoid the urge to explain the site or dismiss difficulties as peculiar to that user. Watching a friend use Inherently Funny for less than two minutes actually prompted a significant design change. It’s not necessary to give the details of this change, but it is important to note that I wouldn’t have spotted the issue without this exercise.

Web Analytics
Almost every industry from advertising to the military to Major League Baseball has at one time or another undergone a transformation at the hands of statisticians. Few industries, though, are as suitable for statistical analysis as the internet, and you can now track everything from page views per visitor to the exact path a specific user take through a site. Happily for small web designers, Google has taken the very enlightened view that what’s good for designers is good for the internet (and what’s good for the internet is good for Google) and has provided a great suite of web analytics software for free.

The obvious question is what to do with all this information. The larger the website, the more interesting the answers, but at the most basic level web analytics allows web designers to implement designs not only because they look nice, but because they demonstrably perform better as well. For example, I originally designed Inherently Funny with a set of ads at the top of the page. I chose this location for no other reason than I liked how it looked. After launching the site and recording a few weeks of data though, I decided to test what would happen if I moved the ads immediately beneath the logo. Two weeks later I had enough data to show that this small change had actually improved my ad click-through rates by 40%. Feeling greedy, I then added a third set of ads to the page. Not only did this not produce a higher click-through rate, users must have felt the site was too ad-heavy because page views per visitors simultaneously dropped 20%. Even though each page had more ads, the data showed I was serving up less ads total, so I quickly removed the third ad and abandoned the experiment. Of course, you can use web analytics to run more sophisticated tests with more informative results, and many websites explain how to do just that. A great place to start is the Traffic Analysis section of Sitepoint.


Strict Standards: Non-static method bookmark_me::display_links() should not be called statically in /home/meatjunk/whiskeyandaspirin.com/wp-content/plugins/sem-bookmark-me/sem-bookmark-me.php on line 284

Strict Standards: Non-static method bookmark_me::default_services() should not be called statically in /home/meatjunk/whiskeyandaspirin.com/wp-content/plugins/sem-bookmark-me/sem-bookmark-me.php on line 180

Warning: Creating default object from empty value in /home/meatjunk/whiskeyandaspirin.com/wp-includes/functions.php on line 364

Strict Standards: Non-static method bookmark_me::get_services() should not be called statically in /home/meatjunk/whiskeyandaspirin.com/wp-content/plugins/sem-bookmark-me/sem-bookmark-me.php on line 187

Strict Standards: Non-static method bookmark_me::get_link() should not be called statically in /home/meatjunk/whiskeyandaspirin.com/wp-content/plugins/sem-bookmark-me/sem-bookmark-me.php on line 228
del.icio.us
Strict Standards: Non-static method bookmark_me::get_link() should not be called statically in /home/meatjunk/whiskeyandaspirin.com/wp-content/plugins/sem-bookmark-me/sem-bookmark-me.php on line 228
Digg
Strict Standards: Non-static method bookmark_me::get_link() should not be called statically in /home/meatjunk/whiskeyandaspirin.com/wp-content/plugins/sem-bookmark-me/sem-bookmark-me.php on line 228
Furl
Strict Standards: Non-static method bookmark_me::get_link() should not be called statically in /home/meatjunk/whiskeyandaspirin.com/wp-content/plugins/sem-bookmark-me/sem-bookmark-me.php on line 228
Reddit
Strict Standards: Non-static method bookmark_me::get_link() should not be called statically in /home/meatjunk/whiskeyandaspirin.com/wp-content/plugins/sem-bookmark-me/sem-bookmark-me.php on line 228
StumbleUpon
Strict Standards: Non-static method bookmark_me::get_link() should not be called statically in /home/meatjunk/whiskeyandaspirin.com/wp-content/plugins/sem-bookmark-me/sem-bookmark-me.php on line 228
Technorati


Comments are closed.