Theres currently  a discussion going on that is about the process of making a website, every developer has their own method. Mine is very simple but the points below are an excellent way to make and plan a website. Many websites take alot more, thinking and people to make so the process can get switched or messed a round a lot. Please comment with your methods.

1. Do your research – What is the purpose of this site? Who is it for? etc. Become the website.
2. Write your content – Finding a decent copywriter will pay off here.
3. Work out the page structure for the website – Basically a sitemap. Knowing the content will help at this stage.
4. Code your content in semantic (X)HTML – Don’t think about the layout or styling at this point; just content!
5. Start brainstorming and sketching layout designs – Knowing the content will help immensely at this stage.
6. Modify your (X)HTML to contain any classes, ids and structural elements you may need when writing the CSS.
7. Code any behavioural JavaScript elements – It’s helpful to do this without any styling on the website at first.
8. Code any backend elements in your desired language – PHP, Ruby, etc.
9. Code your CSS and insert images – This is where you make the site look how you designed it.
10. Go back over anything that is still left – Tweaking and finishing any JavaScript that relied on styling. Finishing backend coding. Adding any structural elements you forgot about.
11. Profit!

I am currently working on a client (see listing here) the building they’re in uses IE6 so many of the users will be seeing the site on IE6. Website developers shouldnt have to put up with the site of people that cannot click the update button. I am not being stupid when i say that. I know that updating a few hundreds PC’s on a network will be hard but the point is. Your software is seven years old, YOU NEED TO UPDATE. Either way as much as i hate the shortcomings of IE6 i have to prepare for them. Annoying as it is I’m grabbing a little fun out of the whole situation. At the top of the website i have embeded this php script that quite clearly says to any IE6 user, UPDATE! Such a lovely message i think, so i suggest everyone follows suit and adds this adoring message.

The one advantage of this version of script is, it has built in jQuery to have effects and you can close the box at the top of the page.

http://www.thatgrafix.com/php_detect/

In a current project i am working on, I need to be able to copy some posted content to my clipboard. Well I looked for a solution so I thought I’d show you….

<span id=”texttobecopied” STYLE=”height:150;width:162;background-color:pink”>
This text will be copied onto the clipboard when you click the button below. Try it!
</SPAN>

<TEXTAREA ID=”holdtext” STYLE=”display:none;”>
</TEXTAREA>
<BUTTON onClick=”ClipBoard();”>Copy to Clipboard</BUTTON>

We have a button here and a span that contains text that will be copied. The button is calling “ClipBoard();” . This is a function that we have written in javascript. It is below…

<SCRIPT LANGUAGE=”JavaScript”>

function ClipBoard()
{
holdtext.innerText = texttobecopied.innerText;
Copied = holdtext.createTextRange();
Copied.execCommand(”Copy”);
}

</SCRIPT>

This script reads the inner text of the span, we defined the span on the first line of the function…

holdtext.innerText = texttobecopied.innerText;

and then holds it in the computers memory. You can assign when clicking an image to copy text or other data by just adding

onclick=”ClipBoard();”

To any Link,Image, script

This is something every website developer should have uploaded on their servers, i have:

http://www.jakemchugh.co.uk/dev/lightbox

Many of my clients have wanted image gallery’s and this is a nice little effect that brings more attention towards the image being shown, You can download it here:

http://www.lokeshdhakar.com/projects/lightbox2/

How to use this:

• Download and extract the contents

• Add the following lines to your “HEAD” section of your HTML page, change to be appropriate.

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

• When you have added the image add rel=”lightbox” into your img code, like this:

<img src=”IMAGEURL” alt=”" rel=”lightbox” />

Whey hey, there it is… Working
[Please check the lightbox website for more info] Here

I hope to post your more effects to help you enhance your web UI.