Website Inspiration Blog | SpicyWebDesigners.com by Luc Arnold

Just as WordPress is a CMS framework allowing designers and developers to create blogs and CMS websites with greater ease, so too are there many tools on the market to assist in the design of individual WordPress sites.

I have always been interested in the comments and discussions generated by the comparisons of theme frameworks by the design community. I suppose I keep hoping to find an acknowledged “best” framework – but it seems that it isn’t that simple. Just as designers and developers tend to gravitate towards their favourite CMS systems (Wordpress, Textpattern,  Expression Engine, ModX, etc.) – everyone seems to try out a few and settle on the tools that seem to work best for them. And sometimes it becomes obvious that certain jobs are just easier to develop from scratch.

I hope to provide an overview of some of the different options currently available to designers and developers – leaning towards my own bias towards desirable aesthetic outcomes and ease of use, over robustness and extensibility.

Of the hundreds of available pre-designed Wordpress themes, it is likely you’ll be able to find a few that meet your structural, functional and/or design needs. Using a pre-designed theme can dramatically reduce the time required to bring a site to a finished state. But be aware that every developer has their own little coding quirks, and if you fail to scrutinize the code before committing to a theme you may end up in a frustrating battle against the code – and end up with an increased development time the long run.

Theme Frameworks

This category can be further broken down into CSS-naked themes and frameworks that are essentially design/development tools.
Blank themes essentially provide the HTML and PHP framework upon which a designer can develop a site mainly through CSS. These blank themes come with a variety of functions already embedded, but new ones can be added via regular Wordpress PHP tags. Some of the more popular themes  include Starkers , Blank and Whiteboard.

Frameworks are generally more robust systems that use proprietary tags and hooks to add functions to a theme, while styling is done either through CSS, the admin panel or though a WYSIWG feature. These frameworks also support increasingly popular child themes. Some of the more respected free frameworks include Hybrid and Thematic.

There is also a growing commercial market for these frameworks including Genesis, Canvas, Thesis , Headway, and the new kid on the block, Startbox. Each of these tends to be geared towards different markets and levels of skill.

The main benefit of working with a theme framework is that you can generally feel confident that the coding behind the platform has been created by Wordpress experts and is up to web standards. Especially so when those frameworks that have been around a little longer and have made improvements based upon community feedback.

Building Aids

Gravy – A fairly basic blank theme geared towards front-end designers that comes with a corresponding set of labeled PSD files to make slicing and converting a Photoshop design into a Wordpress theme easier.

Theme Dreamer -  A plugin that allows you to build Wordpress themes within Dreamweaver.

Divine -  A program that works in Photoshop to convert PSD files into to Wordpress. Full version will be released within the coming months.

Themepress -  An inexpensive way to outsource your xhtml/CSS conversion. For $10 and a little pre-conversion preparation you can submit your code, and test out the conversion before you download the finsihed product.

Plugins

Elastic - An exciting new addition to Wordpress’ amazing array of plugins, Elastic is a WYSIWYG drag-and-drop that works in Wordpress’ admin area to develop the layout and styling of the site. The plugin is still in development, but judging by the buzz surrounding it, this may be one to watch. And you are able to freely download a test version today.

A Custom DIY Framework

Sometimes developing your own “framework” is the best way to go. Wordpress code is made for reusing and recycling. You’ll often find that each project contains about 80% of the same code, so why not make your life a little easier and carry things from one project to the next?

About the Author

Heath Waller is a guest writer for SpicyWebDesigners.com.  She is a web designer based in Calgary, Alberta in Canada and currently you can view her portfolio of design work and her new blog called “Code Alchemy“.

Feel free to read some more about her here:

• “Headfirst: A new designer’s adventures in coding for the web” by Heath Waller
• Featured web designer interview with Heath Waller

Being an avid and interested user of web analytics platforms in general I’ve managed to install Google Analytics a number of times in various ways.  Many first timers get confused with the documentation that Google Analytics gives or the code provided.  Then you’ve got the problem of trying to decipher the standard reports that Google Analytics provides to you.  All is not lost!  Depending on where you are in your implementation or understanding of Google Analytics this article will walk you through the finer points of getting everything setup.

Getting a Google Analytics Account:

First things first, if you haven’t signed up for a FREE Google Analytics account you will need to do this first.  Click here to do this now! Once you do this you can move onto the following steps.

Creating a Website Profile

The first step that you need to take once you have your Google Analytics account is creating a website profile.  A website profile allows you to define the domain name that you are going to be tracking and whether it’s an existing domain name from your Google Analytics account or a new one.  To create a website profile for the domain name you want to track you are going to need to take the following steps…

1.  Click the “Add Website Profile” link

2. Fill out the information for your website’s domain name

3. Click the “Finish” button

Getting the GATC (Google Analytics Tracking Code) from Google Analytics:

Now that you have an account open with Google Analytics and you created a website profile you are going to need to generate the Google Analytics tracking code that you will later add to your website and do get this you will need the Google Analytics Tracking Code.  To do this you will need to do the following…

1. Click “Edit” next to the website you’ve setup.

2. On the “Profile Settings” page for your website click the “Check Status” link which will take you to the “Tracking Code” page.

3.  The Google Analytics Tracking Code comes available in 3 options including Standard, Advanced and Custom

The Standard Google Analytics Tracking Code comes with the ability to be used on a single domain name (This is the option most beginners should choose), one domain name with will multiple subdomains or multiple top-level domain names.

The Advanced Google Analytics Tracking Code comes with the built in ability to be used on a single domain name (This is the option most beginners should choose), one domain name with will multiple sub domains or multiple top-level domain names or tracking websites built for mobile phones and devices that use either PHP, ASPX, JSP or Perl coded web pages.

The Custom Google Analytics Tracking Code comes with a copy and paste functionality so that you can use this however you see fit.  This option is more for the advanced user who is comfortable with coding so I personally would NOT recommend this option for beginners.

Implementing the Google Analytics Tracking Code

Google Analytics recommends that you copy and paste the snippet of code into the head section just before the end </head> HTML tag on the pages in your website.

<script type=”text/javascript”>

var _gaq = _gaq || [];

_gaq.push(['_setAccount', 'UA-#######-#']);

_gaq.push(['_trackPageview']);

(function() {

var ga = document.createElement(’script’); ga.type = ‘text/javascript’; ga.async = true;

ga.src = (‘https:’ == document.location.protocol ? ‘https://ssl’ : ‘http://www’) + ‘.google-analytics.com/ga.js’;

var s = document.getElementsByTagName(’script’)[0]; s.parentNode.insertBefore(ga, s);

})();

</script>

Once you’ve got this added you will need to go back into your Google Analytics account and click the “Save and Finish” button.  This will cause Google Analytics to verify the tracking code installed on your website and you’ll be able to capture the core metrics of your website.

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!”