After visiting thousands of web-sites of ISV's big and small, I've decided that there are two aspects of your website design that far outweight every other aspect put together:
Download and Screenshots. Download and Screenshots. Download and Screenshots.
In an instant, a new visitor to your site should be able to find where to
download the software, and where to look at screenshots.
The visitor should be able to tell these things from ten paces away, with their
monitor upside down, even if they're illiterate, half drunk, vision-impaired
and looking the other way.
(Okay -- if their monitor is upside down they might mistake downloads for
uploads, so forget that part).
There must be images, that the eye is drawn to, to indicate each of these things.
And ideally, they should be able to get to these two things from any
page of your website.
I'm not going to belabour this point... just take it to heart and assume that if you haven't made your downloads and screenshots extremely obvious then you FAIL! Got that? F-A-I-L. ;-)
Now onto...
How To Design a Website: Don't!
Maybe you've noticed this. Other people have already gone ahead and designed a
few websites for you. Several billion of them in fact.
There are thousands of free web templates to pick from -- run a google search
for 'free web
templates'.
And here's a popular
recent
article that contains a nice run down of websites that provide free web
templates.
I ought to mention some of my preferred places for finding templates:
(I think it's fair to mention that for
TimeSnapper
we use a design by
Andreas
Viklund.)
You need to check the license associated with any template you like. Templates
can have all sorts of restrictions on them. Some are only usable by
non-commercial ventures. Some insist on certain forms of credit. Free templates are non-exclusive, meaning that anyone else is free to use them. (But don't be too afraid of that: fear is the biggest enemy you have to overcome). But do take the time to browse their license.
For example -- here's a note on the license associated with the first template
I stumbled onto just now:
BoxedType
is a free template from Free CSS Templates released under a Creative Commons
Attribution 2.5 License. The photos are from PDPhoto.org.
You're free to use it for both commercial or personal use. I only ask that you
link back to my site in some way. Enjoy :)
That's the sort of note you're hoping to find.
And the Template you should pick is...
You need to make your own judgements about how suitable a design is to your
particular needs. No-one can prescribe aesthetics. But you should check
that the website works under these conditions: in the most common browsers,
both with and without javascript.
Once you've downloaded your template of choice, what you usually get is a zip
file containing:
- the license
- one web page
- associated Css files
- associated image files
So it's up to you to work out how to turn this single page into the basis for
an entire website. And it's pretty easy to do everything wrong and go
completely nuts at this stage. The thing you need to keep in mind is...
Maintenance. It's all about the Maintenance.
In your MicroISV there will be various types of changes you will need to make
to your website. And you want to make these changes quick and clean.
I've done something I almost never do at this point -- research! I've written
to various other people who run small software companies and found out what
sort of changes they've had to make to their site.
Based on this, and my own experience, here's some examples of the types of
changes you will make:
-
You decide to change your slogan -- and need to have this reflected on every
page
-
You offer a 'special' for a month or so, and want this shown on every page
(and later -- not shown)
-
You suddenly realise the copyright notice is two years out of date!
-
You change the name of the file that can be downloaded -- but you've
referred to it all over your site!
-
Product features are changed, and frequently asked questions are updated or
added
-
Release notes or news items are added.
And a lot of other changes too.
They fall into a few categories:
-
Modify every page at once
-
Add a new page
-
Modify the content of one page
-
Add an item to a page
So you need to find some solution that lets you maintain your site in an easy
way.
And yet, this can be the departure point into insanity for a lot of people. It's too easy to think:
"Ah -- this is what content management systems are for. I'll write one of those!"
Pitfall: Rolling your own CMS.
You're a programmer -- so why not write your own CMS, to manage your little
website?
This is such a tempting pitfall and relies on the psychological shortcoming of
the invididual. I've made this mistake myself (see
https://secretgeek.net/SmartJelly.asp).
Basically, writing your own CMS at this point is an enjoyable form of
procrastination. It feels like you're making progress -- but deep down you
know that you're deliverately delaying the possibility of failure.
So maybe you ought to use someone else's CMS? Think again.
Pitfall: Using an expensive or complex CMS
When I started this chapter I wanted to declare: you don't need any kind of
stinking content management system to manage a micro isv website.
I wanted to try and start a new techno-political movement -- the ANTI-CMS movement.
But I try not to trust these old instincts of mine. So I asked around -- and the answer
I got back was surprising. Unanimous agreement!
None of the MicroISV's I quizzed were using a content management system -- some didn't even know what a CMS is. They tend to use static html, managed by hand, uploaded from home PC to website via FTP. It seems that for once my instinct is aligned with practice -- a CMS is a waste of time for a Micro ISV.
You only need to focus on the problem at hand. How do I:
-
Modify every page at once
-
Add a new page
-
Modify the content of one page
-
Add an item to a page
To use an agile warcry...
Do the simplest thing that could possibly work
I've got a very minimalist technique that I'm happy with for
now. (And there is one other technique you can use an alternative. I'll get to that next.)
The emphasis is absolutely on minimal.
I get the template page, and i cut several parts out of it -- placing them in little files of their own. I then use "server-side-includes" to reuse these chunks on every single page. I cut out the header, the main menu, and the footer.
'Server Side Includes' (SSI) are an old old old web trick. Dinosaurs used to use them before they all became extinct. I'm not suggesting a direct correlation between SSI and the extinction of dinosaurs. By the way.
This isn't the place to describe how SSI works (go and read a decent tutorial... we'll be waiting for you to return). It's sufficient to say this:
- You include a chunk of text inside a html page by writing a comment like this:
<!--#include virtual="headerfile.txt" -->
- They are generally ignored, and therefore useless, on files with a ".htm" or ".html" extension. The page that contains the 'include' comment must be a file that is 'parsed' by the server (not just served, like so much text). Hence, your files may need to have a file extension of ".asp" or ".shtml" or ".php" or ".aspx" or even ".chm".
This second one is a very important. So for this reason you have to make all of your files end with something other than plain old 'htm' (or 'html'). You should instead use whatever file extension you're likely to end up needing. (I'll talk more about choosing a file extension in the next article, cause it's a point that requires some educated guesses)
So you need to find the 'header' part of your template, the 'menu' (there might be two or more of these!) and the footer. You then need to place these chunks in little files of their own. And where they used to be, you include a line that says <!--#include virtual="headerfile.txt" --> (assuming 'headerfile.txt' is the name of the file that includes the chunk you are treating as your header.
It takes a little bit of skill, a little bit of theory, and a little bit of practice, to grab the right chunk each time. It's worth getting it right though, because you are trying to avoid doing extra work later on.
You want these included chunks of text to include all the parts that are common on every page -- and to exclude all the parts that are potentially different on every page.
In practice this means you ought to avoid the 'title' tag, and you ought to avoid the meta tags as well.
A different technique
The other way to simplify maintenance, without using a CMS, and without using SSI, it to stick with static html, but to sharpen your skills at using Search and Replace across multiple files at once.
This has the disadvantage that you must have an up to date copy of every web page, downloaded to your local PC before you perform the search and replace. But other than that, it's a pretty slick technique.
To perform the actual 'multi-file' search and replace, you've got a lot of options. You can use a grep-style command. You can use an editor, like TextPad, that lets you search and replace in multiple files at once. You could use perl, batch files, or the exemplary DataBatcher. My preferred technique is (of course) powershell. Just remember to keep it simple.
But Content Precedes Layout (which Precedes Content)
Okay -- now before reading the text above, please make sure you've read the next article -- creating content for your website. Without content there is no purpose in designing a website.
Best of luck!
(Your feedback is of course required. Be critical. Be polite. But be harsh, too.)
Resources:
Some
Images for your 'Download' link... (and more here) (note -- respect the copyright of these images.)
(And an amusing example of a website that used an Andreas Viklund template, but didn't think to update the default text -- (scroll to the bottom to read 'Copyright © 2005 Your Name'. ;-)
secretGeek.net
