Allchorn Blog

Most of you are probably on holiday already and it’s coming close to the time that I pack it in for the year. Unfortunately, there is no rest for the wicked busy, and there are still some active developments on the to-do list.

We’ve officially moved out to Waterfall and no longer occupy office space with the SA Web Design crew, but I’m sure we’ll continue to work together on a number of projects we’ve collaborated on over the course of 2008/9. Waterfall is a beautiful place and as you can see in the pic above, my new workspace is really inspiring (for me anyway).

This post is really something to explain whats on the cards for 2010 in a work sense, both for myself and for anyone interested in working with us.

Greater focus on security

This year has taught us some important lessons in web security not only in a local sense. The fact that Twitter got hacked twice in 2010 tells me that its becoming more and more necessary to employ more stringent security measures across the board.

Considering that we work quite heavily with third party content management systems, there will be a far greater emphasis on locking down any vulnerabilities and employing a more structured update regime.

Seeking relationships

The past 5yrs of business has seen a large number of projects pass through our production line (over 150 projects) and it has become clear that the vast majority of success stories are the clients that we have an on-going relationship with. In this vein, we’ll be looking into bundle service offerings which will run over a number of months. Some services to expect early in 2010:

• Web consulting (analysis of  your needs, technical requirements, project scoping etc.)
• Website analysis & strategy
• Design & Redesign of websites
• Content creation and management
• Online advertising and search engine optimisation
• Social media strategy, implementation and monitoring
• Email broadcasting
• Customer data collection campaigns (see our latest viral campaign offering here)
• Analytics and reporting
• Online training

Each one of those topics has a number of sub-categories but listing them all here would be tedious and a waste of yours and my time. Needless to say, the best thing to do is just pick up the phone and call us or drop us an email and find out if we can help you with your online presence.

Allchorn Rebranding

One of the great things about working predominantly in the online medium, is that its not too much trouble to visually re-invent our brand every couple of years. 2010 will see a new look for Allchorn Design. One which we’re quite excited about and one that is still technically on the drawing board. Above is an early preview mockup of how it might look.

All in all, as usual, a new year approaching is exciting, and I’d like to wish everyone a fantastic Christmas and awesome new year!

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.

I’m in a position at the moment where I’m frantically writing training material for the web design course I’m teaching next year at Hirt & Carter… and at the same time, I’m working on my own business and it’s marketing and procedures.

One thing I’ve been looking into quite a bit lately is the lifecycle of a website project. That being the initial discussion with the client, all the way through to publishing the site live for the consumer. I’ve written a lifecycle based on the waterfall method of development, which while not always ideal, it has it’s pros. One of them being an easier way of keeping things on budget and time.

The main sections I came up with were:

• Initial Discussions
  From the first phone call/email to signing a contract and cost/time estimate.
• Pre-production
  Researching and spec document creation through to information architecture.
• Production
  Design, development & testing.
• Post Production
  Content insertion, focus group testing, snaglists, final tests & fixes through to launch.

You can view the full document here.

With all this talk of Agile Design and moving straight to HTML/CSS before even touching Photoshop, I’m actually quite interested in creating a design and site from the ground up beginning with code. I’m not saying I won’t be using a graphics editor, but I want the frilly aesthetics to be of secondary concern.

Lots of people disagree with this method, and I’m sure it won’t suit every design requirement. Just thinking out loud, I will most certainly do pencil sketches before going to code, but that will only serve to ascertain the rough layout.

What I envision the benefit of this method will be is that the content will become of primary importance. Certain elements like form widgets will be easier to mockup and you can give your client a user experience workflow demonstration much earlier in the project. We all know that the client is a visual being (on the most part).

I’m sure there will be hickups, but I think it’s worth a bash and I’ll push for my next project to be done in this manner. Perhaps if the client does not have a CI, I can reconsider and hold off, but if it’s an established brand, it will be an interesting exercise.

I’ve been hard at work on the buggy template today. I think it’s coming along nicely and I’ve launched an open source alpha v0.02 this evening. I’ve written a brief (to be expanded upon) readme file explaining how things work, but as time goes on, I will improve it and the template itself.

I still want to add some nice navigation elements, lists, image styling etc. Possibly integrate lightboxing and look into some other semantic, non intrusive javascript that is realistic to use in as wide a variety of systems as possible. I’ll probably look more into jquery, but I do want to keep things as simple as as scalable as possible.

The more it goes in one direction, the more difficult it is to backtrack. I guess this will be an evolutionary process.

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.

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.

This was an interesting little experiment for me. It was an idea I got from filming myself take a motorcycle apart and playing it at 3x normal speed.

I found CamStudio which very effectively recorded all my on-screen movements, and in Movie Maker (I’m a web designer, not a video guru), I stitched it to some video from my Sony Handycam. Threw in some nice music and put some titles and credits in.

Here’s the result.

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.