Website Design

At a basic level, all analysis/design tasks are the same. Whether you're designing a car, a t-shirt or a skyscraper, design is about fulfilling a need, or solving a problem.

A website can be as simple as a single text document, or it can be as complex as a online banking system. The internet programming platform is simple yet powerful enough to support the most complex applications.

Too many websites out there look great, use clever techniques, but are virtually unusable. The most common problems are:

• Lack of actual content. Customers usually visit websites to get information and/or buy products, not to be awed the special effects.
• Unintuitive layout and navigation systems. If there's a lot of information, finding the information you want can be difficult, especially if there's no 'site search'. Some sites have a 'site map' which shows all the pages on the site - this can help.
• Pages take too long to load. If the code is inefficient, the graphics files are too big / too many, or there's too much flash / javascript etc. each page can take ages.

Don't lose sight of what you're trying to achieve. It's more important that you get your website running with some real content, than for it to just look good. It's assumed that your focus will be commercial success, and the course is written with that in mind. If you have other priorities, then most of the principles described will still be valid.

TIP: Most of your potential customers will be accessing the web via a modem. Although broadband is becoming more common, this will still be the case - especially in developing countries, for a decade or two yet. This means you should not infuriate your customers by making them wait for pages to load. You should also ensure they only need traverse the minimum number of pages.

In order to design your perfect website, you need to balance the following rules and requirements...

• RULE #1: Keep It Simple - Fewer pages is better.
  
  Navigating around lots of pages is not easy. The fewer pages you have, the less moving between them your visitors will need to do. For example, if possible - always carry a product's full description on a single page. If it has peripherals, or refills, list them too. The easier it is for people to use, the more sales you get.
  
  You do need separate pages for different functions, or areas of the website. And if you have a lot of content, you have to balance this against the next rule...
  
  
  
• RULE #2: Keep Each Page A Useable Length.
  
  Pages should be not too long, not too short. Opening a page to find it only contains a paragraph or less is annoying. Pages that are huge are difficult to navigate around.
  
  
  
• RULE #3: Keep Your Pages Small (In bytes).
  
  The smaller your web pages are - the quicker they'll load. This doesn't mean cut down the content...
  
  
  1. Your HTML code should be efficient.
  2. You shouldn't use too many images, too high quality, too large. (You can optimise your images for size and quality in any good graphics program.)
  3. Don't use video or sound unless you need to.
  4. Don't bother with javascript, or anything else which is just window-dressing unless it really helps.
  
  
  
• RULE #4: Provide As Much Relevant Information As Possible.
  
  Don't try to hide too much from your customers. If you give them what they want in a clear and obvious way, you'll get more sales, and fewer queries.
  
  Put your specifications and prices on prominent display. Don't assume people 'can't handle' technical information. Make your pricing plans or terms as simple as possible. Allow customers to order spares/refills etc. from the same page.
  
  
  
• RULE #5: Clear Presentation Is Key.
  
  Make Your website look nice, but don't over-do it. It's possible to have a really attractive website which only uses a few small graphics. Aim for clarity, and a feeling of professionalism. Understated quality is better than flashy.
  
  Note that many top quality sites out there use plain black text and a white background. People are visiting your site to read the pages and if the text isn't clear then they won't bother.
  
  

Most websites have lots of pages, and most of those pages have lots of bits in common, i.e. the same logo, background, fonts, colors, navigation bars, menus etc. Only the content changes from page to page, the layout stays the same. When you want to change your layout - you'll need to do it in all of your webpages simultaneously...

It important to realise that the layout of your web pages is separate from your content! There are two distinct tasks in your website design, to create a nice looking and easy to understand page layout, and to provide content.

TIP: The best way to quickly create a nice looking website is to first find one that you really like, then copy it! I don't mean copy it exactly (although you can download web pages to your PC) as you'd most likely infringe someone's copyright. However you can copy the colors, layout, fonts, and general look and feel. You don't need to re-invent the wheel!

Here are some different approaches to providing visual continuity among many pages. A website may use any combination of the following in its design:

• Manual Editing - you just change each page, by hand. Slow, tedious, prone to errors.
  
  
• Multi-File Search and Replace - using a tool such as Arachnophilia, you can search for, and replace text in all the pages in your website in one go. This is a low-tech solution, easy to understand and set up, but you have to re-upload your entire website. I recommend this method for your first website.
  
  
• HTML Frames - Frames allow you to divide up the browser window into sub-windows. Using this method you can have the top title bar, the side bar, and the content section as three different files, all displayed at the same time, and all independently changeable. A lot of people don't like frames. They can cause problems when your site is accessed via another site, plus they can prevent your webpages from being seen by search engine spiders.
  
  
• Dynamic Pages - Your content is held in a database, or simple text files, and your layout is held separately. You then write scripts to generate the pages when they are requested, using the different pieces. This is the most modular, efficient, and easily managed solution, especially if your website contains lots of fast-changing data. You only need upload the things that change. It does take a bit more initial thought and programming effort though.
  
  EXAMPLE: The navigation menu for this course is held in a separate file called right-nav.php.
  
  
• Cascading Style Sheets. This is an extension to HTML which allows you to define exactly what properties each element of an HTML page has. For example you can specify the exact font size and color for a heading, or sub-heading. This then is applied when the page is rendered by the browser. These specifications can be held in a single (.css) file and applied to each page in the site.
  
  CSS is a very powerful tool for formatting - it allows you to change the look of your entire site by just changing one file, plus gives much more control than standard HTML does. It is quite complex and a good understanding of HTML is essential.

Initially, you'll use the first two methods to create your web pages.

Later, you'll create a template layout file that contains all the static bits like your logo, navigation bar, background etc... When your content is ready, you'll add it into this file and re-name it. For each page in your website. This way, all your web pages will look exactly the same.

Static web pages don't change unless someone edits them, or uploads a new version. Any web page with a .html extension is usually a static web page. Web Server software (like Apache) - in its simplest form - just reads these static files and sends the text to your browser.

Dynamic web pages are generated when they are requested - i.e. the results from a Yahoo search. What actually happens is when the page (i.e. search.pl) is requested, the web server software realises it's actually a script (computer program) and runs the script. The script (often written in Perl or PHP) has the same access to system resources as any other program. So dynamic pages can include elements from many different sources, like databases, text files or even the output from other programs.

There are advantages and disadvantages to both. Static pages are simple to write, but limited. You couldn't display the time, or a hit counter in a purely static page. Pages can range from completely static (like this one!) through mostly static with some dynamic elements (e.g. page with a hit counter), to completely dynamic (like any forum, or the affiliates page). Dynamic pages are more complex to create, but have maintenance benefits and greater flexibility in what they can do.

Static pages may be fixed, but that may be good enough for their purpose. It's often appropriate to use plain old HTML.

On the whole however - it's usually quite obvious how any given page should be built. It's 'horses for courses' and with experience - you'll easily see how any page/site should be built.

The main technologies used to create dynamic web page features are:

• CGI - Common Gateway Interface. This protocol allows programs to be run from web pages. It's not language specific.
• Databases - this is where the web page elements are stored.
• Server-Side Scripting Languages - like Perl & Server Side Includes, PHP or ASP
• Client-Side Scripting Languages - like Java.

Most commercial websites out there are making a loss, while a few are making a mint! What is the difference between these sites? Why does one make a loss, and another over a million per year?

There's a whole industry dedicated to website marketing, but while there are some gems of wisdom in there, a lot of it's fluff and waffle. There are a a few simple rules to building real money-machines, and I'll reveal the secrets of effective marketing to you now and save you the time and cash of joining any of these sites. This info could save you hundreds and make you millions if you apply it right!

In essence, the answer to success is simple, can be summarised in one word: focus.

INFO: I read about a survey into success once. A group of American college leavers were studied: they had to fill out a questionaire prior to leaving college and ten years later their status was assessed. One percent of the group had been extremely successful in life and had become millionaires - as you might expect. This one per cent, however, all answered 'yes' to a question which the other 99% all answered 'no' to... The question? 'Do you know where you want to be in 5 years time?'

Check out carsecrets.com and see how Corey Rudel makes over $1million every year from this one single-page site alone...

The Internet Marketing Centre... is Corey Rudl's world famous website. He is a recognised master of marketing - his sites pull-in over $4million every year in real sales.

If you want to know how he does it, click here to visit the IMC:

To ensure that your website is as successful as possible, it should follow these rules:

• It should sell only one product (the 'mini-websites' concept).
• No distractions. It should have no more (distracting) content than necessary. (Long sales copy is ok.)
• There should be clear product branding. (i.e. a nice logo and company name you use a lot.)
• It should allow immediate purchase of the product.
• It should offer a full money-back guarantee.
• Your sales copy should be impeccable and lengthy - bulleted lists of benefits sell products.
• You should offer free reports or other giveaways to encourage traffic.
• You should offer an affiliates program to enable others to sell your product for you.

It has taken years of trial and error for the best marketeers on the web to figure this stuff out, and this information is still the basis of most of the marketing websites out there. It could cost you over $100 to join many of these sites, and the information is often simply what you've read on this page.

The term 'mini-websites' is fairly new. People started noticing that single product sites were the most effective. With the focus this allows, all aspects of the site, from the domain name up say 'We specialise in what you're looking for'. Customers believe they're buying from experts and have more confidence.

Any content which might distract customers from your product should be placed out of sight - below your sales copy and 'order' button. It would be a disaster if you wrote some wonderful copy, only to have a distracting flashing banner suck your customers attention away before they got to the order button.

The importance of a money-back guarantee is not to be underestimated. It tells your customer that you believe in your product. A guarantee will boost your sales tenfold, and as long as your product isn't truly awful - a 5% returns rate would be quite high!

To have an affiliates program is like having an army of salespeople out there selling your product for you. One of the course resources available to graduates is a full-featured affiliates management script written in PHP - with a full line-by-line explanation. This is the same script TWB uses! You'll be able to use this restriction-free with your own website.


The principles described in this tutorial can largely dictate the format of your website. If you are focussed on commercial success, then this information is absolutely bullet proof and will work... - providing your product is at least halfway decent.

Ensure you understand these rules and bear them in mind as you progress through the course, although you can ignore them. Even if making money isn't your priority, still try to make your site simple, intuitive and easy to use.

The first PHP documentation set to get is from PHP.net. They provide a downloadable documentation set which is pretty good!

See also the free template sources, and the books on CSS in the HTML page. You can use the templates as examples and inspiration, and CSS is part of how you'll implement your design!

Books (from Amazon.com)
Web Design in a Nutshell by Jennifer Niederst	Web Design in a Nutshell is the welcome second edition of a classic Web authoring guide. It is aimed at professionals, with the focus sharply on page layout rather than scripting or programming. Two things are outstanding. First, the book is a handy reference for core Web standards like HTML tags, character entities, MIME types and CSS (Cascading Style Sheets). Second, and most important, the author offers concise, meticulous explanations and comments on key topics including the various different approaches to text formatting, choosing and optimising image types, and getting good results from tables.
Learning Web Design: A Beginner's Guide to HTML, Graphics and Beyond by Jennifer Niederst	In Learning Web Design, the same author now turns her hand to a beginner's tutorial. The result is a foundation course in HTML, and an ideal starting point for learning how to build web pages. All Jennifer's books get a really good rating an Amazon - she seems very good at explaining her chosen topic to any audience.
Homepage Usability: 55 Websites Deconstructed by Jakob Nielsen, Marie Tahir	Most authors leave a significant gap between the theory and practice--a gap that it is left up to the reader to fill. Homepage Usability: 50 Websites Deconstructed boldly steps into that gap with specific observations and suggestions backed with solid quantitative analysis. This book focuses only on homepage design as the most important point of presence for any Web site.
Personal Websites: Pushing the Boundaries with Experimental Web Design and Graphics by Joe Shepter	A peek into the sketchbooks of top web designers. This book offers a fresh approach to web design. It presents insights from the best in the business and shows their own personal projects. Full of inspiration, ideas and new techniques personal webites are fertile testing grounds. These sites are also stepping stones, laying the groundwork for future commercial projects. Sites include: abnormalbehavoirchild.com, designiskinky.net, dhky.com, factory512.com, ndroid.com, surfstation.lu, threeoh.com
Speed Up Your Site: Web Site Optimization by Andrew B. King	Optimize your web site--using techniques in this book, your web pages will pop onto the screen faster, keeping users longer! Speed up the load time on your site to keep customers coming back for more. Discover how to use a variety of techniques to shrink the size of your Web pages, including HTML, CSS, JavaScript, PHP, XHTML, graphics, multimedia, and server-based techniques.