Iarfhlaith Kelly - Code agus Craic

Wireframes and Prototypes

The best practice for dealing with a fresh web app project is to meet with the client, map their business processes and then wireframe the solution. Often this involves an intense conversation discussing all aspects of their business, followed by shadowing their workforce or interviewing the intended users to learn exactly what they need.

After I know what the client needs, I usually start building the UI first. It’s a top down approach that focuses on the end result first rather then worrying about the internals of a project.

The Paper Prototype… On Paper

To do this I create what’s called ‘paper prototypes‘. These are mocked up screenshots of the final application as the user will see it. Up until yesterday I did this the old fashioned way with pen and paper. It was a slow process but incredibly valuable to both me the developer and the client. It set in stone the agreed features and acted as a template for building the real thing.

Now though, I’ve got something far more powerful. There’s a new software product just launched called Mockups and it’s made by the talented guys at Balsamiq. Using their new kit, paper prototypes have gone digital.

Enter Mockups: The Rapid Prototyping Tool

Mockups is a rapid prototyping application that lets you build UI screens in just a few minutes. The software lets you drag and drop all the typical objects used in modern web applications onto your design. There’s over 60 in the default set. This includes everything from scroll bars and menus to more advanced objects like tag clouds and even Apple’s cover flow.

The best thing about these mockups is that they still look hand drawn, so there’s no risk that your client will mistake it for the finished product. Often, I’ve done up prototypes in Photoshop and when I show them to the client, they get confused when I tell them it’s just a mockup, they actually thought it was real! Mockups prevents this from happening by using slightly squiggly lines. It makes for a more ‘hand drawn’ effect. Here’s an example of what’s possible:

Also, this demo should give you an idea of how important this new tool is going to be for developers. A mockup of iTunes is put together in less then three minutes:

The Mockups software is built on the Adobe AIR platform which makes it natively cross platform. So it’ll work on Windows, Macs and Linux boxes.

How Much Does It Cost?

Another great aspect of the software is its price. Balsamiq have said that they’ll give it away free to developers of open source projects. They’ve also said that if you talk about them at an event, they’ll give you two copies for free, one for you and another to give away at the event. And finally, they’ve said that if you write a convincing blog post about them, they’ll also give you a copy for free! To everyone else it costs just $79.

This software has been coming a long time, and I’m delighted I stumbled onto it. It’ll greatly speed up the prototyping phase of my web app development cycle and allow me to be more creative too.

UPDATE - As a result of writing this post I received a free license for the product. I had a suspicion I might get one, but honestly, I would have written it anyway.

Microsoft has a tight grasp on Institute of Technologies, and it’s choking the life out of the students.

The vast majority of computer science based courses in Ireland focus largely on teaching Microsoft technologies to the students, despite the fact that they’re only used in niche areas of the industry.

Ever thought about using VB Script as your client side scripting language? Of course not, it’s only supported by Internet Explorer. Want to build a web application powered by Microsoft Access? Don’t even think about it, it’s got a total absence of security features. Oh and it’ll also collapse in on itself with just a handful of simultaneous users. Want to build a web application with ASP? Don’t even bother, ASP is a joke.

Here’s a list of the typical technologies covered in computer science based courses in Ireland right now:

• Microsoft ASP
• Microsoft Visual Basic
• Microsoft Batch Scripting
• Microsoft Access
• Microsoft SQL Server
• Microsoft Active Directory
• Microsoft VB Script
• Microsoft IIS

Do you see the pattern here?

Microsoft has it’s fingers in all the educational pies across the country that teach the next generation of IT workers and they know exactly how to maximise the use of their technologies in industry: to get’m while they’re young when they don’t know any better. But the reality is that these technologies are not used by the majority of Irish companies in the web industry. In the job market there’s only a minuscule portion of employers looking for graduates with skills in these areas.

Adjusting for the Industry

For college graduates, the majority are blissfully unaware that they are now armed with a set of useless skills that have no practical use in the real world. It’s only after a few job interviews and a rude awakening do they realise that the last four years has been spent learning skills that are worth almost nothing in the work place. They now face the long hard struggle of relearning everything all over again, getting to grips with the actual technologies used in the industry.

Here’s what that the above list should have looked like:

• PHP
• Java
• Perl
• MySQL
• Oracle
• JavaScript
• Apache

But it a seems that unless you can provide lucrative course sponsorship or another similar type of sweetener, big businesses such as Microsoft, will win the syllabus wars over open source technologies for as long as colleges find the lure of the greenback more appealing then providing their graduates with real industry strength skills.

Better Doesn’t Mean Harder

Learning the industry standards, isn’t any more difficult or doesn’t take any longer then learning the poorer Microsoft alternative. It simply means a shift in the content of the course syllabus. Why spend time learning ASP and Access powered web applications when you could just as easily learn how to make a scalable, well structured PHP, MySQL powered web app? It makes no sense.

Calling All Students

If there are any students reading this doing an IT based course, then please consider going to your course director tomorrow morning and ask him/her why there are so many irrelevant Microsoft technologies taught in your course and request that a larger emphasis be put on open source technologies instead. It’ll save you having to relearn what you thought you knew, on a platform that’s actually used in the real world.

As a follow up from my previous post, I’ve put together this quick guide on how to add a comment button to your Wordpress blog.

It’s a fairly easy process that should only take about five minutes.

1. Save Your Button to the Web Server

The first thing you need to do is select your favourite button. I suggest picking one that fits with the existing colour scheme of your blog site. Try to avoid adding a button with a colour that clashes with the rest of the colours on your site. I know you want people to notice it, but you don’t want to blind them!

Once you’ve picked your favourite button, use an FTP program to upload the button to the image directory within your theme folder. For example, the image folder of Wordpress’s default theme is located at:

/wp-content/themes/default/images

2. Edit Your Theme

Once you’ve uploaded the button to the right directory, you need to add the code in your theme to display it.

In Wordpress, each theme is made up of a variety of different files. But we’re only interested in the one named index.php. Open this file in your favourite editor and find the line that looks like this:

<div class='entry'><?php the_content(); ?></div>

Directly after it, add the following code:

<div class='commentPrompt'>
<?php
comments_popup_link(
  "<img src='/wp-content/themes/default/images/comment.gif' />"
, "<img src='/wp-content/themes/default/images/comment.gif' />"
, "<img src='/wp-content/themes/default/images/comment.gif' />"
, "commentPromptLink","Comments Closed");
?>
</div>

Remember to replace the URL in all three places to the location of your own comment button.

If you would like to know the full meaning behind this code, visit the official Wordpress documentation for the template tag. It’s very well written and doesn’t assume that the reader has previous coding experience (provided that you start at the start).

3. Add Some Style

If you look closely to the above code, you’ll see that I wrapped a div tag around it and gave it a class name of ‘commentPrompt’. This will allow you to add some style to the area directly surrounding the button and help integrate it with your theme’s original design.

For my own blog, I’ve centered my comment button within a box and given it some padding and a dotted border, but I’d encourage you to try your own design so it looks ‘at home’ in your own blog’s design.

Here’s the CSS code I used for the box surrounding my comment button:

.commentPrompt
{
    padding:10px;
    text-align:center;
    border:dashed 1px #FF6600;
    background-color:#fefee2;
}

Well that’s about it. Hopefully this has been helpful. I’d be delighted to hear from anyone who found this code useful.

To the untrained eye knowing where to add a comment on a blog can sometimes be difficult. Darragh Doyle has done a great job outlining it here.

After reading his post, I added a large new shiny button to the bottom of each of my blog posts encouraging readers to leave a comment.

I’ve been prompted to release more of these so that other site owners can use them on their own blogs, so I’ve designed the button in various colours and sizes and wrapped them up in this zip file so that anyone can add the buttons to their blog and hopefully encourage more people to post more comments.

Let me know if they’ve been of any use to you, and feel free to distribute them to others too.

Restaurants do it, printers do it, and even gyms do it. Looking around, it seems that almost every area of commerce has some sort of franchising opportunity available. So why aren’t there more in web design?

As far as I can tell, there’s no good reason why it hasn’t happened.

A Perfect Fit

I think that the area of web design is a perfect franchising opportunity. Granted, it’s a skill that needs to be learned, and you need a certain flair for creativity, but you also need a solid business plan and a sound strategy for success. A franchise in web design could provide this to freelance website designers struggling with the business aspect of their endeavours.

A typical franchise provides:

• Permission to adopt its valuable brand
• Usage of its proven business model
• Support and Training
• Pooled advertising funds
• Access to established products and services

Stick to What You Know

From my experience, web designers are great at creating interesting websites and beautiful graphics, but not so great at running a business. A franchise could help with this aspect of the business.

The most difficult parts of setting up a web design firm are, in my opinion, the following:

• Getting legal contracts drawn up (maintenance contracts, terms and conditions, software licences, etc.)
• Generating best practices for business (lead generation, advertising, tendering, CRM etc.)
• Creating a sound pricing structure (with recurring revenue streams)
• Paper trail workflow management
• Company branding

These are the kinds of things that could and should be provided by a good franchise.

Hit and Miss

Searching through Google, there seems to be a few companies offering this type of service already, but none of them have convinced me that by buying their franchise I would be any better off then if I went out alone.

What’s needed, is a strong brand with a proven track record to put together all of their successful business practices and package it up as a franchise offering. Allow the franchisee to sell their CMS or e-commerce package, and to use their legal documentation, and to adopt their best practices for lead generation and to pool their advertising budgets.

In return, the franchisee would pay an initial purchasing fee and a royalty from their gross monthly revenue (in 2006 the national average was 6.5% - Franchising in Ireland 2006 - PDF). Often, there is also a pooled advertising fee (typically around 2%).

Possible Opportunity

If there are any existing web design franchises that I’ve overlooked, please leave a comment and let me know. But to be honest, I think a franchise in web design is a great opportunity for some of the more established design firms to expand their brand and make some profit at the same time.

Heck, if someone else doesn’t do it soon, I might even give it a go.