1. Introduction, headfirst into building a website
1. Introduction - Head First into building a web site
What this guide does
Head first is a quick guide to how to build a website.
You'll have to make your own assessment of the usefulness of this guide and all of this is at your own risk.
But a little about us. We've been involved in web development since 1998. We've used for the various iterations of this site alone at least, three web hosts, two domain name registrars, and five types of technology to create the website.
If you follow the guide (read through before starting), you should produce a pretty decent effort the first time. Perseverance can pay off.
Criteria for a successful site
The main criteria for success for a site could be:
- does it do what you want?
- does it do what your audience want?
- Is the site cost efficient?, and
- how easily maintained is it?
This guide and steps
This guide focuses on free software, resources and on teaching you to learn how to do it yourself.
The main steps are:
- Introduction - the purpose and scope of this guide (you are on this page),
- Concept and name of the site,
- Site technology and hosting,
- Testing, usability and promotion,
- Tips and useful resources, and
- Feedback.
You can navigate the guide in order, or use the navigation to flit around. It is recommended to at least scan the whole guide before creating a site to avoid some of the worst website atrocities.
We've gone for quick rather than comprehensive. So while we welcome suggestions, we emphasise the main features of good site design rather than create the 'war and peace' of websites.
2. Headfirst into the concept and name of the site
2. Headfirst into the concept and name of the site
Site concept and planning
A site that is not planned is usually terrible to use. A site that is well thought out is likely to maximise repeat site usage through attractive features and minimise the loss of visitors due to impatience.
Who is the page for? What will they find attractive and useful? How much time do you have to build the site and maintain it, how often? Is it a core part of your business?
What do you want to achieve from the site; provide information, gather information, sell, interact with others, blog or show off your holiday picturess? Is it essentially a brochure?
People won't look at most of the site unless there is useful content on it. You have to set aside resources (most importantly time) for site development, promotion and site maintenance.
So, plan. Get a sheet of paper and draw a tree diagram of the site you want. Each page leads to another page or pages. If you want a database driven site, the same applies, although the planning is often more complex.
From your initial page have your branch pages coming off it. And if the site is big enough, other branch pages coming off them. Not sure what this means? See the google site for a simple set of navigation.
Now you have a fairly messy tree diagram in front of you - is there a better way of doing it? Can you simplify the navigation? Have a look at some similar sites to the one you are going to build. What makes the best sites good is ease of use and having somewhere to go.
Domain names and alternatives (the name of the site)
What should the site be called? Many sitenames (where you choose one such as sitename.com it is called a domain name) are taken.
There are alternatives to domain names (domain names give the siteowner the most control over a name), as most internet access includes some free space and there are some free services that exist (such as free services for blogs and free web space that often includes advertising).
These latter options tend to give the site owner less control over a site name. It may not be appropriate to have your own name as the site name (be very careful about putting your personal phone number(s) and address on any website as once it is released it is hard to take back). So you might want to have some sort of anonymous name, but note that it is hard to remain anonymous with whois tools for mining information such as that from domain tools and dns stuff.
Six tips on choosing a domain name, some of these tips also apply to any site name:
- make the name fairly short (to allow good promotion and memorability of the name),
- minimise mistakes in typing by avoiding numbers (they can also be spelt) or words that have alternate spellings in names, so the domain name can be easily typed in,
- don't buy a domain name from the same place as you get hosting, so you can easily move the hosting for any reason,
- check out the reputation and pricing of the domain registrar using resources such as google groups and other websites and make sure that they can provide domain names (ICANN registrars can),
- you may not want to make the domain name too personal (you may want to transfer the site at some point), and
- avoid brand-names and trademarks, as this reduces the risk for dispute over names later on. ATMOSS from IP Australia allows you to search registered trademarks in Australia.
There are a number of domain name buying guides which I won't replicate here - see for example, the Domain names buying guide from PC World Australia and the ICANN FAQ. You may wish to checkout namecheap or godaddy (both US based).
3. Headfirst into site technology, hosting and uploading your site
3. Headfirst into site technology, hosting and uploading your site
Site technology (tools to build your site and tools to run your site)
No matter what technology you use to build your site, make sure that you check how long sites have been up on average on your prospective internet host (or at least how long your prospective host's site has been around). This will help in your assessment of both the prospective operating system(s) for your site and the hardware on the server for your site. The longer it is hassle free, the better (see tools from Netcraft to help in this assessment).
There are essentially 5 choices for website building, using:
- hyper text mark-up language (html), the main language for the web (which requires time to learn), see the w3schools html tutorial, html code tutorial.com, html guide from davesite.com and/or Sizzling Jalfrezi's html guide,
- software applications that produce html for you such as the following applications, NVU is probably the best for beginners and Arachnophilia which is a multi-platform text editor and requires some knowledge of html,
- content management systems - such as the the following open source options, Wordpress.org may be best for small beginner sites, drupal which is likely to be better for bigger sites (see How to install drupal CMS in 3 simple steps) and zope /plone which requires serious knowledge to use effectively but seems to be very flexible,
- a hosted software service such as wordpress.com, blogger, typepad, or movable type for blogs, or yahoo or google for other types of sites, photos and services (if they fit your needs - note that many of these services allow the software to be used in your own web space), or
- paying someone to build a site for you and/or an element of it and/or maintenance of it (any of which can be very expensive).
The fourth option arguably gives you the least control over the technology, but you can spend your time to focus on the site content. The fifth option may, or may not, give you control over the site technology (depending on how it is set up).
The decision regarding site technology and what to include in a website needs to be yours but you may wish to look at these factors at least when deciding:
- check out other sites made with the technology you are considering (to see what it looks like in operation),
- features (does it do what you want, rather than having a big list of features),
- check out similar sites (what features are common to those sites and are they what you want?),
- value,
- ease of use (for both your prospective users and you),
- does it support common features that are on sites generally (e.g. creation of pages 'about us',' contact us', etc.),
- stability and compatibility (e.g. are you happy with the operating system?) of the technology including the security of the technology (which can affect the availability of the site),
- licensing (are you tied to one vendor?),
- future development (if you want to upgrade your site later do you have to start from scratch?),
- use of standards (standards may make it easier to make modifications with other software, services and support a wider audience reach), and
- the level and type of support for that software/product/service.
If you want to have e-commerce (also called eCommerce or ecommerce) on your site, then there are a whole range of other considerations.
Space to put your site (hosting)
You have 5 main alternatives for web space for your site:
- The free space that you probably get from your internet access provider for opening up an account with them (there may be issues about having your own domain name),
- the free web space from some sites which often comes with advertising and may not be as reliable as some space (see sites such as Google Sites or this guide at freewebspace.net),
- hosting your own space from your own computer (where you have to factor in - what else the computer is used for, do you have enough bandwidth, can you monitor and fix security issues, is your connection and computer speed sufficient and how long and efficient is other people's access to the site?) - see page 5 of this guide for more resources on this,
- a hosted software service (see 4 above), or
- purchasing some space from a commercial provider (purchasing space from a provider that just hosts websites is usually for the a site that requires high reliability). It's usually on a faster server than other options, often has better features and can be much more reliable than the others, but of course you pay for this. The option that we have not given much detail on is buying a server at a web host. This is generally for really big sites or sites with very specific requirements and is beyond the scope of this guide.
Tips on choosing a web host are:
- does the host sufficiently support the technology you need?,
- don't buy a domain name from the same place as you get web hosting, so you can easily move for any reason,
- check out the history, reputation, support expertise and pricing of the web host, (is the host likely to be there next year?). Use resources such as the prospective hosts web hosting forums and other forums, reviews and sites that focus on web hosting. Be a bit wary of sponsorships. Also, search google groups and other websites for information on the prospective host. Useful places to look are Web Hosting Talk and whirlpool (Australian based),
- don't pay for hosting for more than a year. A (currently) good web host may not maintain equipment, may grow too fast and overburden servers, or may be bought and managed by another company with different conditions. A maximum of 12 months outlay of fees reduces your risk,
- check example sites and speeds from the host using web host speed check tools (such as speedtest.net ); and
- make sure that the conditions of use/ terms of use are compatible with what you want.
You may wish to also factor in where your audience is in your choice of server (nearer can be faster), but the above factors may be more important.
Getting your site onto your space on the web (uploading your site)
Once you have site files that are in a fit condition to become live, you have to get them from your computer to your space on the Internet (this can be ignored for hosted solutions). This can be done using FTP clients.
FTP stands for File Transfer Protocol and it's software that allows you to get the site files from your computer to the hosts computer on the web.
Note that you should back up your files before transfer so that you can recover them later if you need too.
Many web editors have FTP clients incorporated. Good standalone FTP clients include filezilla. Secure file transport protocol is available using something like WinSCP.
Your provider of web space will have (usually pretty good) directions on how to upload your site. So print them out and follow them.
Once you transfer the files, test the site to see that it all works as intended.
4. Headfirst into testing, usability and promotion
4. Headfirst into testing, usability and promotion
Testing
If you want your website to work well, then testing helps make sure it all works in accordance with your wishes. It is worth testing the technology and testing the way the site works from a user's point of view.
Getting friends (of different user levels) to test the site can provide useful feedback on making the site function better.
Below are some useful links to test your site:
Useability
Many sites could benefit from being more usable, see:
Promotion
On the Web
When you build a site, generally you want people to find your site.
There are 2 ways to do this, get known on the web and using non-web advertising.
Below is a list of sites to submit to (search type sites so people can find you) and it assumes that your site is Australian, if it's not, then omit the Australian search engines and submit to international search engines.
Before you submit you need to check that you have page titles (especially the first page). Also, make sure that your metatags are right (see page 5 of this guide for resources on metatags) before you submit your site.
Sites to submit your site to include:
It may also be worthwhile submitting to other Australian search engines, see this search page for references to search engines.
You can also freely advertise your site by inserting an auto-signature in your email program. That way every time you send an email you advertise your site.
Off the web
Some possibilities:
- Tell your friends and family about your site,
- put your business website on each page of stationary, on business cards, promotional material and on packaging, and/or
- have references to your website on your vehicles.
There are lots of options, and many are cheap.
If you are confident about your site and it is finished, submit it for review in a relevant area.
5. Headfirst into tips and useful resources
5. Headfirst into tips and useful resources
This is additional to those resources in previous pages.
Content, speed and usability matter
- A fast content driven site is an excellent site,
- People tend to come back for usable content, and
- Fast is fast to use (not just fast to load).
The newest technology may not be the best to use because it may not be widely supported, it may not be stable or secure and it may have unintended consequences. Steer away from using really new technology as the main source of site navigation, as reliability is paramount in this area.
Keep files small as possible
Whether you are concerned about bandwidth usage or short attention spans, small (and therefore short) page downloads are a good idea.
Generally this is the size order for material from smallest to largest: text, images, sound, audio-visual material and games.
There can be many variations on this, such as games that are only text based, but that is a general rule of thumb. Most people use text and images (logos etc.), so I'll focus on images.
Tips for all files:
- It's a good idea to name a file for the web without a capital letter or space in it (less server issues); use logical sounding names (to remember them later) and under_scores for readability (e.g. holiday_greece.htm, small_sunset.jpg),
- Try not to use too many sub folders. If different servers have different conventions about naming folders you may have to alter too much on your site if you want to move to a different server, and
- Test your site (or use a test folder) before making it public, draft sites do not engender trust.
Tips for email addresses
Be careful about including them on websites as you can get a huge amount of spam from software that automatically searches for and copies email addresses. Other contact details may be appropriate such as a contact form (which emails you the results) or comment features (in some software).
Speedy pages and sites
- Nested tables (tables within tables) are bad because they increase site load time.
- Have content on practically every page, the more clicks a user has to use to navigate a site, the more they need to click to get to content, the slower the site is to use.
- Where you can, use text as a means of navigation, or at least backup navigation, so you don't have to wait for a page to fully load to use the site.
- Have basic elements like navigation in consistent and easily accessible places.
- Don't have a massive wad of text fill up the whole screen, it's unreadable, use bullet points, headings, columns and shading to break up the page.
- Try and avoid having too many slow loading things on one page.
Usability
- Some sort of logic in site design is usually nice to find your way around - 85 weird symbols as a means of navigation does not encourage revisiting.
- The newest technology is NOT the fastest if you have to spend a long time downloading a plug-in you don't use again.
- Punctuation is useful.
- Slang or acronyms can be annoying if too obscure.
- Follow a few web conventions to help people understand the site structure quicker, for example, clicking on a logo should always take you to the main page.
- Links that work are nice (don't laugh).
- Having Capital Letters At The Start Of Each Word Slows Down Reading. This is bad as it is unnecessary.
- If you are converting a large number of pages from a word processor, saving them as text (such as in a text editor) before pasting them into the page should remove half of the formatting and speed up the page download.
- Have somewhere to go on your site, rather than just dead ends, to encourage people to explore.
- Use white space to make your page readable. Try not to have a great big slab of text and images, as this is not easy to read.
Tips for image files
- A good image editor is GIMP.
- Use .gif files or .png files for logo type images (with simple colours and few shades, these tend to be smaller and more efficient).
- Use .jpg files for photo type images, but don't make them too large (with shades and tones).
- Use appropriate images over again to add consistency to a site (they are also generally pre-loaded for the next page).
- Think about how your images will look on a small monitor as well as a large one.
- Consider the person with a slow connection to the net, are they ever going to come back to your site? If you have big images, why not thumbnail them (provide smaller versions of them that you can click on for larger versions). Some software does this automatically.
- Be careful about the palette you use as colours can look different on different monitors and browsers. Some browsers also display sites differently.
- Use the alt tag to describe an image (people can see what is loading and some search engines will 'see' more of the page).
- Don't use distracting background images if you want people to read your content, life is too short to spend peering into a monitor unnecessarily.
More image tips
- Crop images if you can (cut out the unnecessary bits).
- Reduce the image's size so that the most that you have to scroll is in one direction to see it on a small monitor.
- Reduce the number of image colours if you can.
- Use some sort of image compression on websites if you can (you can halve the load time of a site through this).
Additional things for your site
There are a number of different things that you can add to your site to add value to it. However, in the end, people will visit the site (or not) for the content you provide. This content can be as simple as your opinions.
If resources are free, check the conditions of use. For instance, many services require some form of advertising on your site. In general they also provide no guarantees about service.
Resources - specific
- Hyperspin has some free site monitoring (to see when your site is up),
- You can make parts or all of your site discoverable using a robots.txt file, here is an online robots.txt file generator from McAnerin International,
- Matt's Script Archive, and the GGI Resource Index are for those who have access to a cgi bin (CGI can generate dynamic content),
- Hit counter for your site from Statcounter or statistics from Weboscope,
- Forms can be found at php form generator (software), Wufoo (online form generator) or Freedback,
- Google can provide search features for your site,
- Favicon provides icon generation for your site, the icon shows up in the address bar of some browsers.
- Link checkers will check your site for links that do not work e.g. Xenu Link Sleuth (software), linkchecker @ sourceforge (software), w3.org checklink (online service) and linkalarm (online service). Arachnophilia has a site analyse feature that checks internal links.
- Metatags can help search engines find your site (they are generally not visible to users. See this page from siteowner.com, this page from hypermart.net, this page from trafficzap or this page from abakus.
- Cascading Style Sheets (CSS) - adds style to web documents. CSS presents things well in browsers, is efficient (small), has been around a while and separates content (such as text) from style (such as colours) See the W3 guide to CSS, their guide to CSS tutorials and other tutorials on CSS such as Dave Raggett's Guide - adding a touch of style and links to CSS editors (software that produces the CSS code for you) from the css-discuss mailing list.
Resources General
Updating Tips
- Check links regularly, they go out of date incredibly fast, and
- update the main page (or have updates somewhere logical such as a what's new or updates section), it can be what people are looking for.
Languages
You don't have to learn underlying programming languages to get a basic site up. However, they are useful if you want to customise your site and have more control over it.
If you want to learn a language, I would suggest learning html (the basic language of websites) first (see page 3 of this guide for html tutorials), then following your interests (perhaps css next as it allows systemic styles across a site, see css links above). Below are two specific languages that may also be useful:
Hosting your site at home
Hosting your site at home may be problematic for some (e.g. security and bandwidth) and it may not be easy to do, particularly if you are not technically minded or don't have a lot of time to spare. Useful links on this include:
Other useful resources in this area include:
6. Headfirst into feedback
Headfirst Step 6. Feedback
Your site
It is worth repeating the main criteria for the success of any site should be (at least):
- does it do what you want?
- does it do what your audience want?
- is it for the right price?, and
- how easily maintained is it?
Now go through your site and see if it is successful. Spelling mistakes (these sites may be useful for potential spelling mistakes, Site owner spell checker , texttrust) and links that don't work (see previous page for link checkers) are not likely to engender trust in the site.
Our guide
You've had a look through the headfirst guide to building a website.
- What do you think?
- Mistakes? Improvements? Thoughts?
- Too technical or not technical enough?
Feedback is what keeps the site improving so please drop us a line (we don't use your information for marketing or pass it onto others unless required by law) through the feedback form, it might also be a good idea to have some form of feedback on your site for the same reasons.
So you've persevered to the end, why not have a look at our site that puts these theories into practice...
advertisement