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

• CMS Matrix can help in evaluating content management systems,
• CMS Report can also help in evaluating content management systems,
  
• The Free Site has a webmaster section,
• The Web Developer's Virtual Library is a general resource,
• Builder.com is a useful resource,
• The devlounge is worth a look,
• site admin stuff has a good webmaster/web developer page,
  
• webbuilderzone is a useful webmaster resource, and
  
• this page has a tool that analyses a website from Web site optimization.

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:

• PHP - is a language that is useful for web applications, it is also the underlying language for drupal, joomla and Wordpress (many content management systems have the ability to also use mysql as their database). W3 Schools also has a php tutorial.

• Perl - allows you to do a number of useful things on a website, such as a form, counter or simple search. A good source of Perl scripts is Matt's Script Archive (also linked above). See also resource index's perl resources.

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:

• WWW FAQs: How do I host my own web site at home? from Boutel,
• how to host a website from your computer from Casey Tech, and
  
• two guides from Geek to Live, part of life hacker, How to set up a personal home web server and How to assign a domain name to your home web server.
  

Other useful resources in this area include:

• DynDNS,
• free dns hosting from free webhosts,
• my domain, and
  
• free URL redirection services from the Free site.