Website Design - Revision history

LeonBambrick at 12:58, 7 November 2009

2009-11-07T12:58:27Z

LeonBambrick: added headings

2009-11-07T12:54:02Z

added headings

LeonBambrick: New page: At last we've made it to Step 3 of the '25 steps to create your own MicroISV' -- Design your website. I've had this written for a while, but everything has intervened to slow me down. It ...

2009-11-07T12:51:04Z

New page: At last we've made it to Step 3 of the '25 steps to create your own MicroISV' -- Design your website. I've had this written for a while, but everything has intervened to slow me down. It ...

New page

At last we've made it to Step 3 of the '25 steps to create your own MicroISV' -- Design your website.

I've had this written for a while, but everything has intervened to slow me down. It turns out my baby girl is damn entertaining and exhausting. I bought a book on Powershell. Work has been unsane. Easter happened. I've been tinkering with Lisp (yes, bloody lisp!), we slipped out a release of TimeSnapper, started packing in features, improvements and bug fixes for the next version like a pair of raving software lunatics, and i've been quietly developing a heap of new million-dollar-ideas to replace the previous pack of duds ;-).

Now where were we? Design a website...

Unfortunately, there's a catch ;-)

Step 3, "Design a Website", needs to be performed after Step 4 -- "Provide Basic Website Content".

Catch is: the best time to perform Step 4 (provide basic website content) is once you've completed Step 3 (designed your website)

That's some catch, Catch-22. It's the best there is.

So I suggest you perform Step 3 and Step 4 more or less together.

And of course, I'll release Step 3 now, but Step 4... you'll have to wait for that ;-)

Here we go.

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:

OpenWebDesign.org -- High quality, and an emphasis on standards compliance
Open Source Web Design -- Emphasis on Free -- huge selection, some excellent
(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 http://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:

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  (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'. ;-)

← Older revision		Revision as of 12:58, 7 November 2009
Line 172:		Line 172:
	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.		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.)~~	+	[[Category:MicroISV]]
−
−
−	~~== 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'. ;-)~~

@@ Line 11: / Line 11: @@
 Catch is: the best time to perform Step 4 (provide basic website content) is once you've completed Step 3 (designed your website)
-That's some catch, Catch-22. It's the best there is.
+  That's some catch, Catch-22. It's the best there is.
 So I suggest you perform Step 3 and Step 4 more or less together.
@@ Line 21: / Line 21: @@
 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.
@@ Line 36: / Line 38: @@
 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.
@@ Line 59: / Line 63: @@
 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.
@@ Line 70: / Line 76: @@
 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.
@@ Line 96: / Line 104: @@
 "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?
@@ Line 103: / Line 113: @@
 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.
@@ Line 120: / Line 132: @@
 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.)
@@ Line 144: / Line 158: @@
 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.
@@ Line 151: / Line 167: @@
 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.
@@ Line 158: / Line 176: @@
 (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'. ;-)