SpicyWebDesigners.com by Luc Arnold

Being an avid lover of Google Analytics allows me the ability to stay on top of the latest changes to the web analytics platform.  They recently added the ability to add annotations to the web analytics data that you collect about your website which is now available on all Google Analytics accounts.  This is really a very useful improvement to Google Analytics and for anyone developing a website over a period of time it’s pretty valuable.

So what’s the big deal with Annotations?

Annotations give you a way to mark a specific day on your Google Analytics account to track and manage changes you are making to a website.  In the past I’ve found myself saying “How do I know that this change I am making to my website is a good change or a bad change?” and that answer largely went unanswered until now.

Now you can add annotations to days when you’ve made changes to your website and know exactly what day a change was made when you look at your web analytics.  It’s very useful if you are from the school of thought in web development that when you change your website it does have an effect on your visitors.

How to add Annotations in your Google Analytics Account

So now that you understand how annotations can be used to help you and your website let’s talk about actually how you can set them up and use them in your Google Analytics account.  First of all, you’ll need a Google Analytics account.  Click here to get an account if you don’t already have one and once you’ve got one simply take these steps…

• Login to your Google Analytics account
• Click on your website’s website profile
• Click the down tab located in the main dashboard visits area
• Click the “+ Create new Annotation” link
• Enter the date of the annotation, add an annotation a.k.a. “a note”, select whether you want the annotation “Shared” or “Private” (You would select “Shared” if you had were sharing the annotation among other people who have access to the Google Analytics account and website profile you are setting annotations on specifically)
• Lastly, click “Save” and you are now done creating an annotation

Now that you’ve got it the annotation created you can view it by selecting the day you created the annotation on or a range of days that contain the annotation.  When it’s all said and done the ability to add annotations in Google Analytics can help you identify changes that you made to your website and the outcome of those changes giving you greater insight into what your website is doing and how it’s doing it.

Luc Arnold

With the dawn of database driven websites and website platforms like WordPress, Drupal, ExpressionEngine and countless others it’s clear that lots of people want to run websites that use database technology to generate web pages.  Originally before this trend in web development you would simply host HTML pages on your web hosting server and preserve the URL structure and it would look similar to this…

http://www.mysite.com/category/page.html

Everything was great, then as dynamically driven websites (a.k.a. websites that use databases to grab content and display that content in a generated web page) became more popular there was a problem.  The problem was that the URL structure became and looked dynamically generated as well leaving it looking like this…

http://www.mysite.com/?p=881

This left things looking messy, confusing and not very pretty to look at.  That’s why they call it an “Ugly Permalink”.  So what was the solution to this problem? Pretty Permalinks, of course! But what are permalinks exactly?

Permalinks come from the concept of “Permanence” meaning that people want to link to something that is “permanent” so that they can source it, refer to it or link to it without thinking that it is going to change.

A permalink looks like this…

http://www.mysite.com/my-about-page

So what CMS website platforms support using permalinks?  Here is a list that should help you choose a website platform that uses the permalink structure.

• WordPress
• Drupal
• ExpressionEngine
• Moveable Type
• TypePad
• Blogger

Using Permalinks in WordPress

WordPress has done a great job for a while of allowing people to use Permalinks in their blog and website posts and pages and I believe the reason is because they’ve made it easy to use for everyone.  If you currently use WordPress for one of your websites and you’ve never tried to customize your permalinks or you don’t know the first place about where to begin then hold on tight.  The first thing you need to do is log into your WordPress website and follow these steps…

• Look for the “Settings” section and then look for the “permalinks” section and click on it.

• Next, you’ll see something similar to the screenshot below that allows you to customize your permalinks in WordPress

Depending on how you want to custom your permalink structure you should be able to find a solution that allows you to display URLs the way that you want to show them.  If you are interested in all the supported permalink attributes click here to get a list of them that WordPress currently supports then click here.

For those of you that don’t currently use WordPress on your website here are some links to other documentation for different platforms like Drupal, ExpressionEngine and others.

• Permalinks in Drupal
• Creating permalinks in posts using Blogger
• Using the permalink variable in ExpressionEngine
• Publishing Settings in Moveable Type
• Using Permalinks in WordPress

Benefits of Permalinks

Some of the benefits of customizing permalinks include that it can help you in a number of ways like optimizing your URLs for search engines and specific keywords, having a pretty link that people can link to and read, removing the “chronological” structure from your site and allowing you customize the URL as you see fit!  It gives you a great amount of choice as to what your readers see, how they see the content and experience your website.

What are post slugs?

No they aren’t the kind of slugs that you find in the garden on your Tomatoes and the term “slug” does really give you a good impression of what it actually does.  Simply put, a “Slug” is a one or two word description of a post that is used in the permalinks when you post an entry in WordPress.

How to edit Permalinks in WordPress at the Page or Post level

If you are creating a page or a post in WordPress then you might have noticed once you’ve entered the Page Title or Post Title the Permalink is filled in automatically with the contents of the title you’ve entered.

At the Post level the permalink will include the structure you’ve chosen under Settings > Permalinks mentioned above but at the Page level the only thing included is the contents of the page title.  Have a look at what I am talking about…

Page Level Permalink Example

Post Level Permalink Example

Are Hackable Permalinks bad?

A note about “Hackable Permalinks”: “Hackable” Permalinks are permalinks that are easy to break down and allow the user to navigate to a different part of your website easily.

Hacking and being hacked has had a bad reputation associated with it in the computer and internet world but the truth is that Hackable Permalinks are some of the best kinds of permalinks available according to WordPress.  WordPress has this to say about Hackable Permalinks…

“The best Permalinks are “Hackable,” meaning a user might modify the link text in their browser to navigate to another section or listing of the weblog.”

Source: WordPress Codex

What are the best permalink structures available?

Having the best permalink structure to your links is up for debate because some people prefer to do some things one way or another and there is no standard out there that says “This is how you produce the best permalinks”.  Some of the experts out there have their own ways to produce the “best” permalinks but again this isn’t set in stone because largely what they (the experts) are writing about is what has worked for them.

• SmartBlogTips – Best Permalinks URL structure for your WordPress blog
• Zemalf.com – Quest for the Best Permalink Structure
• EnlightenedWebMastery.com – Best SEO WordPress Permalink Structure

Permalinks is a core topic if you are using a lot of website platform technologies like WordPress that are out there today because they control what types of links you generate and what types of links people can use to link back to your website.  Links are the bricks and mortar that hold the web together and paying attention to this means that you will build a stronger and more structurally sound website ready for search engines, referring sites and the people who visit your website.

Luc Arnold

Permalinks are cool and useful!

After writing one of my last articles “5 elements that can improve your website’s usability” I thought that it was time to let you in on some of the best plug-ins to help you accomplish better web usability in your own website.  A lot of web usability uses common sense and some things that may even seem dumb to the average web designer out there are considered by web usability experts as standards like labeling the search on your website “Search”.  In this article I am going to focus on breadcrumbs and the use of breadcrumbs in your website to help you enhance the usability of the website and also point you to some plug-ins that you can use to achieve this.  Jakob Nielsen, a web usability expert and author of UseIT.com defines breadcrumbs as…

“…a single line of text to show a page’s location in the site hierarchy…”

Source: UseIT.com; Jakob Nielsen

Now that we know what a breadcrumb is let’s explore them in a little more depth.

Breadcrumbs Explored

Many times (more than I’d like to count) you’ll see breadcrumbs on ecommerce websites, community based portals or other large sites but this doesn’t mean that you can’t or shouldn’t have this functionality on your own website.  Breadcrumbs, most notably the ones from the story of Hansel and Gretel and they act in the same manner allowing people to find their way back when they navigate back easily and they look like this…

When you think about improving your website’s usability regardless of whether you run it on WordPress, something custom or some other platform it’s important as web developers and web designers to understand that you don’t have the same knowledge of the web that your visitors do for the most part and it’s your job to make navigating the website easier to use.

Breadcrumbs are considered as secondary navigation on your website because they work similar to sitemaps in that they provide a site hierarchy breakdown and usually they only take up minimal space on the website.  They show users where they are currently in the grand scheme of things on your website and allow single-click access to higher levels of the website to help people go back without the use of the web browser’s back button.

So you may be sold on using breadcrumbs now but they aren’t included in your website’s current features.  No need to panic!  If you happen to be running WordPress, Magento, Durpal or some other pre-built website content management or ecommerce system here are some plug-ins that can help you get this functionality working on your website.

Adding Breadcrumbs in WordPress

Yoast Breadcrumbs – This great little plug-in allows you to all a breadcrumb trail to your website and gives you plenty of ways to tweak it.  It was designed by Joost De Valk to give people control in adding breadcrumbs to your website and also provides the ability to edit them in a wide range of ways with good SEO practices in mind.  Click here to read more about it and download it as well.

Breadcrumbs NavXT – This is a great plug-in for people looking for the ability to control their breadcrumbs specific to the Pages & Posts, Categories, Tags, Date Archives, Current and Miscellaneous web pages in your website.  In comparison to the Yoast Breadcrumbs plug-in if you are looking to be able to control your breadcrumbs specific to what is being accessed this will definitely help you out.  Click here to read more about this plug-in

Adding Breadcrumbs in Magento Commerce – Breadcrumbs are included in this ecommerce system by default under their “Catalog Browsing” features. Click here to read more about this

Adding Breadcrumbs in Joomla! – If your site runs on Joomla! They have some instructions on how you can go about adding breadcrumbs.  Click here for more information.

Adding Breadcrumbs in Drupal – If you run Drupal 7.x or later the ability to add breadcrumbs is included but if you run another version of Drupal before 7.x there are modules that Drupal specifies and that you can download to give your website this functionality.  Click here to get more information about this.

Adding Breadcrumbs in ExpressionEngine – If you run ExpressionEngine there is a simple piece of code that you can add to your website that allows you to display breadcrumb hierarchy.  Click here for this information.

As you can see the major CMS platforms and ecommerce systems have ways that are pretty easy to add this functionality to their web platform.  Even if you are developing your own custom solution adding a breadcrumb hierarchy will help your visitors get around your website quickly and keep them happy!

Luc Arnold

Remember “Follow the Breadcrumbs!”

I think that everyone that runs a website should know about web analytics and if you are reading this for the first time then perhaps this article will help shed some light on basic web analytics metrics like bounce rate, pages per visit and what visits, bounce rates and pages per visit are exactly.

If you are just beginning to understand what web analytics can do for your business then there’s a good chance that you are looking to understand what you are seeing when you open up your web analytics platform and are starting to analyze the data in order to apply it to your business.

There are a few things that are “universal” in web analytics and website traffic in general.  As long as there are websites there will be visitors, visits and unique visits and because there are people visiting websites they will always spend time on a website, look at pages in a website and leave a website.  These web metrics are universal and even though, how a web analytics platform chooses to view this elements the concepts remain similar but not the same.  So what web analytics come standard in web analytics platforms?  Well, just have a look at the following web metrics…

• Visits – This referrers to the number of times that some visits for website in a given timeframe.  From here the number of visits can tell you where the website traffic came from for certain posts, pages and content on your website.
• Pageviews – This website metric will tell you the number times that a web page is viewed.  This metric can pose some issues because users refreshing web pages over and over again and also robots that “crawl” your website have been known to inflate these numbers as well.
• Pages per visit – This metric shows you the number of web pages that are viewed during a visit on average over a given time period on your website.
• Bounce Rate – This is the rate at which people come to your website and leave after looking at only one page.  A sudden spike in a bounce rate can allow you to test your website’s usability to lower this number and keep your visitors coming back for more.
• Average Time on Site – This average tells you the average amount of time people spend surfing your website.  This tells you how long on average they will spend reading articles on your website.

I use these metrics on a daily basis when I analyze website traffic for SpicyWebDesigners.com.  The data from bounce rates to the number of visits that I am receiving help me to make decisions about how to change the usability, navigation and gain insights into why a particular article on my website was successful.  Naturally once you’ve mastered the core web analytics terminology you can start learning more advanced topics and applying them to your website analysis.

Pretty much any web analytics platform that you pick up today is going to have these metrics available.  The essence of web analytics is related to visitors and the pages that they visit on your website.  Without those two things you cannot begin to track meaningful website metrics to base your decision making on and because the study of web analytics is growing, advancing and changing rapidly it’s great to know that some things stay the same.

Luc Arnold

Teaching the basics of web analytics

Well its Christmas time and I don’t know about you but I’ve been busy visiting family, spending time with my wife (it’s our first Christmas in the new house) and also taking some time to relax over the holidays.  I enjoy reading and always find myself reading business books, technical manuals and those sorts of books.  I love digging into some new concept or principal whether it’s to do with web design or personal finance.

One of the gifts that I received for Christmas was Steve Krug’s book “Don’t Make Me Think”  It’s a quick little read, at around 200 pages that offers up some valuable thoughts for web design professionals from project managers to beginner web designers and everyone in between involved in the process of designing websites and it discusses the core concepts of web usability.

The book itself contains the interesting perspective that most web design professionals give users of their websites too much credit as to how they use the web and websites in general.  If you run your own website or you design websites for a living then you may have heard of the term “web usability” which is best defined by saying that…

“Web usability is the approach of making websites easy to use for end users.”

That is the plain and simple definition of web usability and the key to great web usability is that a website is “easy to use”.  This does not mean that it is easy to use for a web designer or web development professional but that it’s easy to use for the average visitor to your website who may not have the same technical abilities as the people who built it.  At the end of the day, most people don’t build websites in their spare time and can get lost easily if your website is not accommodating to the average website visitor.

The book “Don’t Make Me Think” contains hundreds of bite-sized chunks of valuable information about web usability but the true value of this information is in its application.  One such area that the book focuses on are the core elements that improve web usability specifically through how people use standard websites and their associated web pages.  The 5 key elements that help website visitors use a website more effectively are the “Site ID” also known as the Logo, the “Utilities” of a website, Sections and Subsections of a website, a way to search the website and Page Names.  So let’s explore each of these elements a little more in depth.

1. “Site ID” aka “Logo” – When users are on a website they usually identify where they are by being able to see the site name, branding and associated logo of the specific website they are surfing.  The Site ID allows them to make this distinction and allows them to trust in the website they are viewing.  The Site ID can and should be clickable allowing them to click and go to the Home page at any point in their journey on a website.
2. “Utilities” – Just like it sounds the utilities of a website are more about information or ways of getting to information that help you (the website visitor) when surfing a specific website.  Some examples of utilities are a sitemap, FAQs, Forums and an “About” page just to name a few.  As a general rule you should only include a few utilities because the more utilities you add to a website the busier it becomes and the more confusion it caused amongst your website’s visitors.
3. “Sections” and “Subsections” – The sections of a website are the main places you want people to go and are also referred to as the “primary navigation” of a website.  On an ecommerce website this would include sections like products, downloads, books and specials just to name a few.  These sections lead you to subsections of the website and if you have a section like Products some associated subsections would include Audio / Video, Computers, Gaming and other various related subsections.
4. A way to search the website – Not everyone that visits your website is interested in clicking and clicking some more to get where they are going.  Using search on a website allows you the freedom (if done correctly) to search and find things fast.  If the search is accurate then your visitors will be happy that they got what they are looking for in the first place and if it isn’t accurate then they will get frustrated and most likely leave.  The other thing that Steve Krug’s book states and something that I think most people forget is to name your search “Search” and not “Quick Search”, “Fast Search” or some other take on that because it confuses people and makes them think more then they need to.
5. Page Names – This particular element of a web page is important to website visitors like the ones visiting yours right now because it tells someone that clicks on a link that they’ve reached the correct page.  If your link is called “Store Hours” then the proceeding web page that is brought up should being called “Store Hours”.  Whenever you go into a store and look down the aisles what do you normally see?  Big signs that tell you what you are going to find in the aisle.  They are clear and you can see them from a mile away.  Page names should act in a similar way; easy to view and on a certain level easy to understand.  Put aside the styling and the color palettes for a while and draw attention to the page that the viewer is currently on because it builds trust and communicates clearly that they’ve found the correct page and no further thought is required.

Starting with these 5 key elements you can improve a website’s usability and its profits.  It’s all about clear and unified communication when maintaining, optimizing and designing websites that people actually want to use.  Without this your visitors can get lost, become frustrated and confused or simply give up and leave which raises that ever present “bounce rate” and stops people from coming back.  So give it a try and keep those “fans in the stands” so to speak.

Luc Arnold