Website Inspiration – Website Planning

Now comes the exciting part – learning how to build a website from scratch . This is where your creative flair can come into its own.

There are a number of web building options available to you. The option you choose will depend on your past experience in website development as well as the purpose of your website. So let’s look at the different types of websites so that you can decide which type best suits your needs.

Planning Your Website

What Type of Website Do You Need?

1. Static Websites

This type of website consists of a number of web pages that provide information and display images. These pages, once written, usually do not change unless the content needs a revision further down the track or an image is replaced etc.. The page that is loaded in the browser is the same page that the web developer published. The code is HTML supplemented by CSS for styling (formatting & layout). It can also include some kind of a scripting language which adds a little more interactivity to the static pages.

Static websites can be set up for informational purposes only or can be monetized to provide some kind of an income.

2. Dynamic Websites

Pages on a dynamic website are usually generated from a database as needed.  Scripting languages, such as PHP,  generate the HTML code so that the requested page can be loaded in a browser. Hence, they are often referred to as database-driven websites.

Pages stored in a database can be easily updated at any time; creating and updating such pages is not dependent on programming knowledge. Content Management Systems (CMS) are particularly useful in facilitating the creation and updating of dynamic sites, especially if they are large sites.

One of the most common types of sites in this category is a blog. Blog posts typically allow readers to post their own comments and queries which add to the dialog that goes on around the topic being discussed. So content is not static but is constantly being updating as more and more comments are added to various posts. Blog posts are usually labelled with the date they were published and then listed on the site in reverse date order.  The content on this type of website is constantly being refreshed. Interactivity is probably the main distinguishing characteristic of a dynamic website. It is this aspect that promotes a community-style interaction around a common interest or commentary on a particular product or service.

Blogs have evolved over time from their initial incarnation as a way to let friends know about what you have been doing to the current form where we see many more authoritative, informative sites that add real value to the Net as a place to learn. I find more and more that the sites I get the most from are blog sites and I’ll be pointing some of these sites out to you as we progress through the web building journey.  These days, blogs (those with high quality content) are finding it easier to rank in the search engines.

Dynamic websites or blogs can be set up for informational purposes only or can provide information and be monetized in some manner. Either way, provision of information that people find valuable is critical to the success of this type of site as it is to any site.

3. Combination Websites

You can also have a combination of the 2 listed above. In that case you could have a static website that incorporates a blog within it.

4. E-Commerce Websites

These websites are set up like an online storefront for the purposes of selling products and/or services. They provide a shopping cart and a transactional capability that allows processing of credit cards.

How to Build a Website From Scratch

I am going to assume, given that you have found this post, that you are a beginner with respect to how to build a website. Later on, as demand dictates, I can go into more advanced topics on website creation  But for now, I will outline your options and then provide some of my recommendations.

I have created sites by programming from scratch; I have used HTML editors and WYSIWYG editors  and I have used Content Management Systems (CMS). One thing my experience has taught me is that, no matter how skilled someone might be in web coding, there is a level of productivity output and ease of website design that is hard to beat with the more advanced packages such as CMS. So my goal here is to lay out the easiest path for you to take.

Which Website Development Tool Should You Choose?

1. Text Editors
These editors are readily available but only highly skilled HTML coders would choose a text editor to create websites. However even top coders, who prefer to code from scratch, probably combine text editors with more advanced editors to speed up their development output.

Skill Level Required
You still need to have a significant level of HTML and CSS knowledge to program from scratch using just a text editor.

Examples of HTML editors include:

• Notepad – free

2. HTML Text Editors
There are free and paid options here but, whilst easier than with a text editor,  you still need to have a significant level of HTML and CSS knowledge to program using an HTML editor. And if you wish to add any degree of interactivity to your site, you would need a knowledge of JavaScript and/or a server scripting language such as PHP.  These editors usually provided syntax highlighting and a range of other options that can speed up your productivity.

Skill Level Required
It depends on the editor chosen. With some editors you would need to code most sections. With some other editors you can click on a menu of some HTML tags and have some code elements created for you. But generally speaking, you need to be prepared to code if you choose one of these editors.

Examples of HTML editors include:

• TextPad   – free to try, then requires purchase
• NotePad++   – free
• Programmer’s Notepad   – free

4. WYSIWYG HTML Editors
The letters WYSIWYG stand for What You See Is What You Get which means that you can get the package to do a lot of the coding work for you or in fact all of it if that is your preference. These editors usually provide a split screen view so that you can see the code and the browser output in side-by-side windows (or top and bottom panes). You can usually employ drag-and-drop technology or select and click. That is, with a WYSIWYG editor you can for example use the menu options to select the headings, tables, lists etc. that you would like on your page.  The editor does all of this for you and you can see what the code looks like “behind the scenes”. Similarly you can write some HTML code yourself via the code window and then view on the design screen what that code has produced.

Examples of WYSIWYG editors include:

• Aptana Studio – free and paid version
• Adobe Dreamweaver – paid
• Microsoft Expression Web – paid

The workload is much less with a WYSIWYG editor than with an HTML editor, although seasoned programmers often prefer the latter because it affords them more flexibility.

I have used all 3 (but only the free version of Aptana). I have probably used both Dreamweaver and Microsoft Expression Web (replacement to Frontpage) the most. I find these 2 packages very, very useful. I particularly like the split screen arrangement where I can look at the page as it would appear in a browser and then click on the heading or sentence that I would like to change via the code window. Aptana also has the split screen view but in the free version at least, I found it harder to locate the code that matched the sentence that I had highlighted. Given that I like to tweak the actual HTML code myself, this location feature is very, very handy in both Dreamweaver and Expression Web. However, you don’t need to do this, tweak the code that is. You can just use the menu options to specify what you want where and how you would like it to look, with respect to tables, color schemes, font colors and font types etc.

Skill Level Required
Optional. You can have the WYSIWYG editor do everything for you. Or you can choose to have just some elements created for you to speed up the process and then go into the code to make your preferred changes.

Content Management Systems (CMS)

Blogs are probably the most recognizable form of a CMS. They are quite easy to set up and, best of all, they can be created for free. You can of course get paid themes but there are many, many free themes from which to choose. Setting up a blog requires no programming knowledge. At the same time, if you have some knowledge of HTML, PHP and CSS, then you can easily reach the code behind each page and do some direct tweaking if you like.

Examples of Blog software include:

• Drupal
• Joomal
• WordPress

These Systems can be used to create static sites as well as blogs. WordPress was really set up predominately as a blog creation software. However, it is true to say that its ease of use and extensive plugin provision have made it so powerful that many developers now use it to create both blog sites and static sites. (I have done the same.)

You can set up a blog on the WordPress site (www.wordpress.com) but then your site name will always include  wordpress.com, such as sitename.wordpress.com. You are much better advised to utilize the software provided by your hosting provider.  For example, I “installed” WordPress for my site on Lunarpages by simply clicking the appropriate option.

Skill Level Required
No programming skills are needed to set up a blog.
Those who do like to program can still reach the code behind a blog and make modifications etc.

I hope this gives you some idea of the choices there are when it comes to deciding a) what type of site you would like and b) which editor or tool you would like to use. In my next post I will provide a tutorial on how to use WordPress because this platform can be used for static sites as well as blog sites. And I will let you know what I ended up doing with respect to themes (free versus paid) and which plugins I have found the most useful to start off with.