Creating a Website

November 5th, 2007 by

I had my first real encounter with the Internet back in 1996 and started working on my first website shortly hereafter. Without any HTML nor Photoshop experience the resulting monstrosity was an amalgamation of animated gif’s (rotating buttons and mailboxes), Photoshop lens flares and the horrible wonderful HTML code Frontpage spat out.

But even if the website was a real eyesore I loved the fact that I was able to potentially communicate with millions of people around the globe.

If you happen to be in the same boat as I was back then – you want your own website but don’t know exactly where to start, then please read on and I’ll try to give you a few pointers.

Process Outline

Whenever I go about creating a new website I usually adhere to the following work process:

  1. Content planning/creation
  2. Design
  3. Coding
  4. Testing
  5. Launch

Of course this process can vary a bit from time to time – actually it’s been a while since I worked on a project that didn’t deviate a bit from the original plan, but it is still nice to at least have a basic framework to start up with.

It’s all about the content baby!

Before you start thinking about what background texture your website should have or if your navigation should have rounded or square corners you should sit down and decide on what kind of content you want to present. A website without proper content is just as interesting as a newspaper without articles.

Is it a personal website? Should it contain a blog? Or perhaps an image gallery to show some of those beautiful photos you took on your last vacation? The choice is yours (or your client’s)!

Is it a company website? If so, then you might want pages that list your products, a company profile page, a contact information page and perhaps even a corporate blog like the one you are reading now.

No matter the goal I recommend that you fetch a piece of paper and just write down whatever springs to mind – a good old fashioned brainstorm. Don’t start filtering stuff out, get everything down on paper and when you run out of ideas you can start picking the best ones and go with them.

If you are fresh out of ideas then try having a look at what other people are doing. If you are creating a company website, then have a look at your competitors’ websites and see what they are doing and perhaps you can do it better.

How should the website look?

Once the content is in place I start doing rough sketches on a piece of paper. Sometimes this part can be tricky and I’ll be stuck with a blank piece of paper staring back at me. In cases like that I seek inspiration from some of the many CSS galleries that have been kind enough to gather some of the best designs from around the web.

Here’s a list of some of the CSS galleries I visit from time to time:

Once I’m happy with my sketches I start doing wireframe layout in Photoshop. Instead of me going into detail about what wireframes are, I recommend you take a look at this article by Jesse Bennett-Chamberlain where you can see the benefits of wireframing.

When the wireframing is done and I’ve found a page layout I’m happy with I start doing the actual design work in Photoshop. Of course you don’t need to use an expensive application like Photoshop since there are a lot of great free/cheap alternatives like:

To HTML or not to HTML

Once you are done with your design it’s time to start putting it all together and this is where HTML (and CSS) comes into play.

There are a few ways to go about the creation of HTML documents – the WYSIWYG way (What You See Is What You Get) which works a bit like Word / PowerPoint where you can just drag and drop elements into your HTML document or the manual way where you code the HTML by hand.

Personally I prefer to do it by hand as it means I have 100% control over how my code looks, but if you are just starting out and aren’t keen on coding then I would recommend going with a WYSIWYG editor as it is a lot easier.

Here’s a list of some of the more popular HTML editors available:

  • Dreamweaver CS3 – 30 day trial (Windows / Mac OS)
    This is in my opinion one of the best WYSIWYG editors available at the moment.
  • InType – free a the moment (Windows)
    InType is still in early development but it looks like it could become really nice editor.
  • CoffeeCup – free (Windows)
  • Notepad++ – free (Windows)

And here’s a list to some great HTML tutorials and articles:

Testing your website in multiple browsers

If we lived in a perfect world there would be only one browser – Firefox. Unfortunately this is not the case. At the time of writing this there are 5 major browsers on the market, Internet Explorer 6, Internet Explorer 7, Firefox, Opera and Safari and they all behave differently. This means something that looks good in Firefox can look strange in IE6 and vice versa.

Of course I’m not saying that you absolutely need to test your website in all browsers, but if you are working on a commercial website I recommend that you do it. I’ve seen a few commercial websites where I couldn’t complete my order because it didn’t work in the browser I was using. Too bad for them – they just lost a sale.

I’ve become a big fan of the Multiple IE installer which enables me to run several Internet Explorer versions at the same time (usually you are only able to run one version per operating system). Since more than 40% of all visitors to the UK2 website are still running IE6 it really is worth the extra work making sure that your website works properly in said browser.

Launching your website

Once you’re happy with your website it’s time to move it to your web space. Web space is the place on the internet where you can store all the files that you have used in your website. Here at UK2 we offer several web hosting packages that allows you to do just this, you even get access to one-click installs which enables you to start a blog, launch an online shop, create a website using our sitebuilder and much more – all in a matter of seconds.

When you have your webspace sorted out you can start uploading your files. This is usually done using an FTP client which will ask you for a hostname, login and password that you should have received via E-mail when you signed up for your website.

Here’s a list of a few popular FTP clients:

In some cases there’ll be an FTP client build into your HTML editor in which case updating your site will become a lot easier as you don’t need to multitask back and forth between editor and FTP client when you need to upload a file.

Sitebuilders

If you don’t fancy doing any design or coding yourself it is still possible to get a website up and running in no time using a sitebuilder. A sitebuilder is an automated website wizard that in a few easy steps will help set everything up for you. Here at UK2 we’re using the RV Sitebuilder which is really easy to use and offers a lot of nice design templates.

“Well, why not just use a sitebuilder every time then?” you might ask, and you are perfectly right. Sometimes a Sitebuilder is fine, it all depends on what you wish to accomplish with your website. If you build something from scratch you’ll be able to tailor it too your exact needs, whereas if you build it using a Sitebuilder there might be some restrictions.

A final word…

As this was just a brief introduction to the wonderful world of website development there are a lot of topics I haven’t touched – like database driven applications (WordPress, Joomla, Drupal etc.), CSS, PHP and so on, but if you should feel inclined to read more about website development I’d recommend you check some of the following sites out:

And of course there are plenty other sites that are worth visiting – try and google “html tutorials“, “photoshop tutorials” and so on and you won’t be bored for the next couple of months 🙂

  • Share this post

Quantum Computers

Halloween Competition Winners

3 Comments

Sue Hutton
# 7th November, 2007

Some very useful pointers here

Paul
# 7th November, 2007

I have book marked this info looks great just the starting point I needed

Thanks for that

Sarah
# 16th February, 2008

This is just what i was looking for!!!!!!

Thanks

Leave a Response