Allchorn Blog

We recently launched a redesigned and re-engineered website for a skills development initiative in KZN.

Dionysus approached us with a brief to realign the website to better leverage the online medium. The site features a full CMS implementation, user registration, search, a blog, events calendar, discussion forum and a photo gallery.

This project for Dionysus went from initial consultation through information architecture, interface design, HTML/CSS coding, CMS implementation (Joomla!), content insertion and training.

The client was an absolute pleasure to work with, and we wish Irene, Seth, Kathy, Angie, QJ,  Jeannette and everyone else all the best with their new website.

This short video was created for one specific client, but I thought it might be useful to others too, so published it on Vimeo for whoever is interested to watch. It’s a tutorial on how to resize an image with an online photo editing service at Pixlr.

How to resize an image online from Ross Allchorn on Vimeo.

If you’re getting a website designed or redesigned (or doing it yourself) it’s important to have all your bases covered to make sure the site is optimally set up to perform. We have a checklist of things to test for and I thought it a good idea to share this with all.

Here is our checklist.

1. All links checked
   Are your internal and external links all correct? Think about hardcoded links and dynamic links. If your site is database driven, you can check all internal links with a script.
2. Page title tags consistent & optimal
   Your page title tags are those that appear in the title bar above File, Edit, View etc. It’s important for search engine indexing that the title is clear, concise and depicts what is on the page.
3. Search engine friendly URLs
   If you’re using a CMS you should ideally have some form of URL rewriting feature in place that converts dynamic URLs to search engine friendly ones (example.com?pageid=15 to example.com/product-name)
4. Search functionality
   If you have search functionality on your site, does it work correctly? Is it intuitive and are the search results accurately portraying the information the searcher is seeking?
5. Screen resolution
   Does your website display nicely on screen resolutions your visitors are likely to be using?
6. Content rendering
   Sometimes content can become a bit mangled when copying characters from MS Word or other web pages, and as such a good thorough toothcomb inspection of your content should allow you to rectify any issues.
7. 301 redirects
   If you’re redesigning your site, you want people who have possibly bookmarked your old URLs to automatically come through to the new pages. 301 redirects are the universally recognised “change of address” for web pages and to retain existing traffic and rankings this is gravely important!
8. Custom 404 error pages
   When someone hits a URL on your site that does not exist it will display a 404 error page. These can be customised, and are an effective catchment system for preventing the loss of visitors that hit a generic 404 error page. The page should ideally display with the same/similar aesthetic as your site and offer a clear explanation, navigation and search.
9. Analytics implementation
   If you have a website online, you want to measure it’s efficacy. You can track visitors, bounce rates, conversion rates and a multitude of other interesting and useful information by simply installing analytics software.
10. Favicon implementation
    A small visual feature which can give your site a more “complete” look. Not only will it be an icon used in tabs, but also in bookmarks making it easier for people to find your pages if you make them stand out.
11. Meta tag implementation
    Not as important as they used to be, but still worth doing once you’ve researched your keywords. Don’t stuff your keywords in, but rather keep them relative and to the point.
12. XML Sitemap
    A sitemap is an important feature which tells the search engines what your pages are and how frequently they can expect to be updated. This allows them to index your site at intervals which are in line with your updates.
13. Form to email/database
    If you have forms submitting to email addresses or to a database, make sure they all send correctly, and to the right people/places. Make sure those responsible for responding are aware of their duties as well as any autoresponders are setup correctly and working.
14. User administration settings
    If you have more than one user, you’ll need to make sure they have sufficient (and not too much) authority on the system managing your website.
15. Speed tests
    Is your server performing as it should? Are there scripts/flash/large images causing slow loading times?
16. www and no-www
    If visitors access your website at www.example.com, they should be able to also access it sans-www (http://example.com). It’s a setting your host should enable, and if not perhaps consider another host.
17. Browser compatability
    What browsers are your visitors using? Global statistics can tell you initially, and soon enough you’ll know what your visitors are using from your analytics. At the time of writing, we feel it important for your site to work in Internet Explorer, Firefox, Safari, Chrome and Opera.

These items are in no particular order and bare in mind that depending on the project, there could be more or less items to consider (eg: spell checking, proof reading, legal requirements etc.)

I’m currently hard at work on a couple of developments that require a framework of sorts. Not only code, but a versatile design framework that I can effectively speed up production for a niche market. The first of these I’ve nicknamed Buggy after the image I used in the initial design.

Essentially it’s working on a 12 column grid and can easily accommodate a neat one, two, three or four column layout. Work in thirds, quarters, halve it, or use the full width (960px) of the design. It’s a fixed width, centered design and I will likely make it into a Wordpress theme in due course.

I started building this as an illustration for the course I’ll be teaching in web design for Hirt & Carter next year, and it’s grown so far beyond that. It’s good fun, and tests my skills and knowledge. Coding is going to be fun, but it’s so rigidly grid based, I suspect it’s going to be quite easy. Little do I know hey?

In my role as a web design consultant, I often need to do a fair amount of research into a specific client’s needs. In that research, I tend to come across a lot of really cool technology and parts of it that enhance a website in really useful ways.

As it seems Wordpress is the talk of the web publishing world right now, I’m busy with a lot of Wordpress related projects. I had to looks for some specific extensions for the system called Plugins. and in so doing, I came across some nifty addons that I’d like to share. Some I will use on client sites, some on my own, and others I’ll just keep a note of for future reference.

Google Sitemap Generator

This one was actually found in a search for a meta tag management plugin for Wordpress, and although I discovered that there are other ways to solve the meta tag debarcle (another time), this one was a good find, and already on this site.

Sociable

This plugin gives you a huge selection of social websites that your visitors can use to share the content of your site/blog. I’ll integrate it into this site, but need to do some offline testing before it doesn’t post links below my intro blurb on the front page (my entire site is Wordpress driven).

Wordpress.com Stats

Now, don’t get me wrong, I use Google Analytics every day, as I believe it to be the most effective and easiest to use analytics software available. However, the Wordpress.com (hosted Wordpress) stats plugin gives you instant statistics in your dashboard which is handy and doesn’t require you to log into GA for a quick glance at your traffic.

CForms II

To me there is no debate over this being one of the most useful plugins for Wordpress. Create, manage and edit your forms for your website. Publish them on pages, posts, whatever. Submit to email or a database. Built in AJAX form validation… etc.

Subscribe 2

Allow your visitors to subscribe to notifications of new posts and content. Even taking your content and sending an hourly, daily or weekly digest of your new additions. This one is really handy to keep those unfamiliar with RSS up to date via email.

Well, those are them. Some are almost essential (CForms & Google Sitemap Generator), while others are nice to haves that definitely won’t hurt.

It’s suprising how much of a difference it makes when a client actually goes out of their way to write you an email about how happy they are with the job you did for them. Completely unsolicited makes it even better…

Recently, I did a (very) small Wordpress driven website for a friend of mine for his up and coming laptop and notebook repair service. Things went anything but smoothly in some aspects like moving from his hosts at the time (no names mentioned) and then some controversy three quarters of the way through when someone criticised me to him sparking some doubt in his mind over my costs. This is what caused me to write about lowballers in the web design industry.

I won’t paste the entire email as there are some bits that are not related to this post (and personal stuff), but since he said:

“Feel free to post any of this on your blog, with my email address as a ref. Will be happy to advise others to use your methods.”

I decided to use this one paragraph which sums up the tone of the email and what he was saying:

“Most importantly: Your sites work – you can quote me on that. I think the value of the site far exceeds what you have charged, and I really want to thank you for going out of your way to sort me out on mates rates there. That CMS is absolutely necessary, there’s just no contesting that.”

Well, to me, that makes me feel a whole lot better in an industry where there is a lot to get frustrated about and it’s nice to know there is more to it than just the pleasure of working with technology in these exciting times on the web.

Please Note: This article is no longer relevant. You can now download this plugin and have all this and more. It’s a pleasure.

Wordpress by default makes use of the TinyMCE rich text editor and as such, it’s quite extendable. It’s very well documented in their documentation wiki and does a lot more than what Wordpress enables out of the box.

This is what I was looking to do

Wordpress’ WYSIWYG displaying table editing tools on the bottom row.

Shock horror! I hear some standardistas ranting about tables being evil already. Well, I hate to burst some bubbles, but tables were invented for a reason. Believe it or not, for tabular data!

Wordpress, the popular content management system was initially built for blogs, and I am guessing the omission of the ability to create and edit tables in the interface was a well thought out decision and I hold nothing against them for doing so. My clients however, they disagree. Well some of them at least.

Now that Wordpress is powering not only blogs, but online magazines, corporate websites and all different types of sites, it’s quick becoming a very powerful and popular generic CMS. Extending it has become a big game.

My client had a pricing page and needed the ability to add tables, modify cells, padding, spacing, background colours etc.

Cobus over at Fresh01 found this page on the Wordpress codex site which you’ll noticed I’ve commented on. I just felt the need to write this post with a bit more detail.

The process

Firstly I downloaded TinyMCE, and put the “table” folder into the plugins directory in wp-includes/js/tinymce/plugins.

Then in the file tiny_mce_config.php I edited this line:

$plugins = array( 'safari', 'inlinepopups', 'autosave', 'spellchecker', 'paste', 'wordpress', 'media', 'fullscreen' );

and added

,'table'

into the array.

I then scrolled down and edited

$mce_buttons_3 = apply_filters('mce_buttons_3', array( ));

by adding

'tablecontrols'

making it

$mce_buttons_3 = apply_filters('mce_buttons_3', array('tablecontrols' ));

Then opened up a post/page edit and refreshed the page…. Viola! Table editing tools.

Problem, I can’t edit the cell colours…

Well, after editing the config file and being familiar with the way it’s laid out, all I needed to do was look at the available buttons and controls for TinyMCE and find the button for background colour, and that happend to be backcolor.

Therefore, after ‘tablecontrols’ in the line

$mce_buttons_3 = apply_filters('mce_buttons_3', array('tablecontrols' ));

I added

, 'backcolor'

So it looked like

$mce_buttons_3 = apply_filters('mce_buttons_3', array('tablecontrols', 'backcolor' ));

And thats that.

If you want to add other buttons and controls, browse through that wiki page, and if they don’t activate, you’ll just need to upload the relative plugin folder from your downloaded TinyMCE package.

Having worked with content management systems both proprietary, home grown and open source in the past, I’ve taken a little time lately to step back and look at the pros and cons of each. Let it be known that while I’ve been heavily involved in the development of a home grown CMS in the past, and am a big advocate of the proprietary system Realm Platform, I do use Wordpress and Textpattern, so I am not necesserily bias either way.

This may come across as a rather opinionated post, but it’s my view, and my blog. Any thoughts (logical, non trolling comments) would be most appreciated.

I’ve broken the different types of systems into

• Home Grown CMS
  A system built in-house rather than buying one or customising another system.
• Open Source CMS
  A system built by a community of developers under a sharing community based methodology. Usually free. Examples – Joomla, Wordpress, Typo3.
• Proprietary CMS
  Built by one company, maintained, supported and available as either a one off cost, or licencing payment structure. Examples – Realm Platform, Expression Engine, Vignette.

Things Evolve, you can’t avoid that

You can’t always predict every facet of a project’s lifespan. Things change and evolve as you work on it. As detailed a scoping document you draw up, there are more often than not extenuating circumstances that influence the workflow and final result of any project.

• client expectations may differ from those of the designers and developers
• additional features may be required mid-way through the project
• features might need to be changed or removed during the project
• as much as we’d love it not to be the case, there are always bugs of some sort to contend with.

Believing otherwise is naive. If things on your initial agreement don’t evolve during the design and development phases, you can rest assured that there will be some form of maintenance, additions, changes, repairs or unforseens following launch.

You can’t turn lead into gold

Coming to grips with the fact that things will grow and change, you also have to look reality in the eye. You have to realise that a poorly conceived and hastily carried out project isn’t going to grow into a solid, stable and flexible one.

Making some good choices early in a project’s lifespan is imperative to the successful deployment of a website. Things to consider before starting work:

1. Have you done your homework?
   It’s important to know what you can budget on your web project. It’s not too difficult to look at the expected ROI to justify the expense. By setting a target amount of conversions to have it pay for itself you’ll know what you can afford, and a good website design consultant would be able to tell you if thats realistic or not. You do realise that just publishing a website doesn’t automatically guarantee success? Have you looked at the cost implications of online marketing?
2. Decent web hosting
   Do you own your domain name? Does your host do daily backups? What kind of support do they offer? Do they have all the technologies installed to launch your site? If all these questions were answered with a yes, or a favourable response, then you’re probably on the right track.
   Three last things I’ve learnt over the years…
   1. You do not choose your host based on price!
   2. You do not choose your host based on price!
   3. You do not choose your host based on price!
3. Development team
   It should be obvious, but it’s overlooked time and time again. Your nephew’s best friend might be able to get a little bit done for you… he might even do it quite well. But when he gets offered a job getting paid more every month than you’re willing to pay him for one website, he’s going to take it.
   A website design company needs to be sustainable, and for that, they should preferably show some form of business longevity.
   Client references? Ask, I know I’d be able to give a list of happy clients to contact if you were considering me for some work. If they don’t, either they’re so big that the NDA’s don’t allow them, or they simply don’t have.
4. Design team
   First and foremost here: Print Designers are NOT Web Designers! Web interfaces designed with a print mindset more often than not result in an unusable mess. The coding of which can be more than double the amount of time and money spent than having it designed by an experience web interface designer. Thats not to say that collateral assets cannot be sent to the website designer by the print designer with style guides, colour palletes, CI document etc. Just leave the the page layout and interaction design to those that know it best.
   Portfolios are an important way to gauge the creativity of a team. A good grasp of effective colour use, usable layouts and the general aesthetic value of their work.
5. Technology
   Believe it or not, I won’t even type one acronym in this part. The question here is… do you want to use an open source system (Wordpress, Joomla, Drupal, Typo3 etc.) because it’s free, or do you want to use an open source system because it’s used by such a wide community and will be supported at least in the forseeable future? If the latter, do you know if you can get the support you need in the country (or at least timezone) of your residence? Really? Do they work in their pyjamas or are they legitimate companies like those you chose for development?
   Your other option is to go for a fully supported, homegrown system. Developed, maintained and supported by the people who initially made it. Sometimes this is the best option. They should have the longevity and sustainability that you need.
6. Marketing & Maintenance
   Are you going to maintain content of the site yourself, or at least in-house? Does the vendor of the technology or development team (often the same people) offer training? If something goes wrong with the site, are there people on call to fix it promptly? Remember, it’s not always their fault… it’s like a car. You can’t get angry at a vehicle manufacturer when your tyres wear, or cam belt needs replacing can you?
   Marketing your website is a multi faceted process. It’s best explained by people like Christine at Altersage. It’s a serious topic and one that your development and design team have to take seriously, or don’t take them seriously… seriously.

Conclusion & Footnote

This post was sparked by a repair project we’re currently doing. It was a project that started small, on a very small budget, then as it grew it started to trip over itself. Regardless it grew more, changed development teams who made it worse and now it’s broken and in need of a considerable amount of fixing. To the extent of requiring a re-do.

It’s not the only time I’ve encountered this, and I think it’s safe to say that some people never learn, no matter how many times it happens to them. Hopefully after reading this you’ll be wise enough to not let it happen to you.

A good foundation laid by the right people with enough initial research to give you a better chance at success is what it’s all about.