Planning your Site: The How

In my last blog, I talked about two of the most important questions you ought to ask yourself when planning your website: "Who will this site be for?" and "What do I want them to do?"

In this blog, I will look at some of the most obvious tasks a website can perform for you, and the technologies that are needed to make those tasks possible.

Most professional or business websites fulfill one or more of the following functions:

• present information about your work or your products in an easily accessible manner that can conveniently be kept up to date - the "brochure" website
• sell things, either directly through a shopping cart system, or by enabling people to place orders from a product catalogue - the "online shop" website
• offer user interaction: guest books or message boards to leave feedback, search functions to find targeted information, forms to request quotes, online booking systems, online help desks - the "interactive" website
• inform and entertain: blogs about topics relevant to your industry, collections of helpful or fun links, image galleries, online video or flash presentations, interactive games - the "brand building" website

Different technologies are needed to fulfill these different functions: a brochure type site may only require straightforward html/css - though it may be advisable to include features like a search function, login system, or catalogue type features, which would require Php/MySql, or another programming language that works with a database. And unless you are comfortable to update your own html, by using an html editor or even writing your own code, you may wish to have a content management system included, which also requires some programming.

Shopping carts can be installed either as ready made packages - Zendcart or Cubecart are popular systems, though it requires some programming expertise to set them up - or they can be custom programmed. Security is an important issue when it comes to e-commerce applications: you would want to make sure that your client's credit card information will be well protected! The simplest (and free) solution is using the Paypal system. This is only really advisable for shops with relatively few products, but it is a feasible solution if for one reason or another, you cannot run Php/MySql on your web server.

If you would like to interact with your clients via message boards, have "members only" features on your site, enable visitors to do site searches, or even upload content themselves, you will not get around using Php/MySql or one of the other web programming languages, such as ASP. All these features work with an online database, where information can by uploaded, by yourself or even by visitor to the site, depending on how it is set up. The Php scripts then pull this information from the database and automatically write the html code that is at the base of what your site visitors see. Not only does this make site maintenance and updates much faster and more painless, it also allows for all sorts of customizations - to the point where no two people will see exactly the same content when they visit your site! It does require a bit of setting up and programming, and the price tag for an interactive site is therefore quite a bit higher than that for a simple brochure type site or even an online shopping cart.

Flash is another technology which is very prominent on the web. Flash has got a bit of a bad name in some web design circles: not just because of the infamous (and once so popular) "Flash intro" that takes fifteen minutes to load and is a surefire way to make most prospective visitors click on to the next site - but mainly because sites which are built entirely in Flash, cannot be indexed by search engines. Obviously, this is not good for your search engine ranking! A Flash site essentially is a self contained file that is embedded in an html page. Search engines only read html, they do not read Flash - so any keywords you display within your Flash site will be invisible from the search engine's point of view.

The beauty of Flash, however, lies in using Flash components within an html context. Flash also comes with its own very powerful programming language, Actionscript 3.0. It is an essential technology if you wish to include rich multimedia content in your site: music clips, video, slide shows, animations, little interactive games or even just a few cool buttons that do interesting things.

Asni: Multimedia Art & Design:: http://webdesign.asni.net :: http://www.asni.net

Planning your Site: The Who's and What's

The two questions you ought to ask yourself when you are planning to set up a new website, are: "Who will this site be for?" and "What do I want them to do?"

Determining your audience really needs to be the first step in any web design or online promotion project. If you are planning a business site, you will probably have some sort of a business plan, even it it is just in your head (though writing it down really *is* a good idea, I can tell you from experience!). Who do you want to sell your products and services to? Who is likely to buy them? What, in other words, is your target market? Those are the people you want to design your website for.

Are they older people or younger people? Educated? Professionals? Employees? Business owners? Stay at home moms and dads? Kids? Elderly? LIberal or conservative? Rich or poor? Idealistic or cynical? Are they likely to have visual impairments or disabilities? Is English their main language? Will they be able to deal with long chunks of text, or might it be better to rely more heavily on graphics or video? A lot of younger people are accustomed to take in information by audiovisual media - video tutorials, slide shows, comic style storyboards - rather than read through long reams of text. If you are targeting a younger audience, you might want to think about integrating video, audio, or perhaps even an interactive game into your site.

What is the visual style that would appeal to the people you are trying to get interested in your site? Colourful and playful, artsy and sophisticated, or down to earth and businesslike? More importantly, what are the keywords they might be looking for, and what is the information or functionality they might expect to find on your site? How computer literate are they likely to be? Will they be comfortable doing transactions purely online, or would it be best to leave a phone number so they can call you and chat you up? Or if you are targeting an overseas market, why not get your pages translated into their language? This is bound to immediately get you better search results, seeing that the vast majority of content on the web is in English - so any content in any other language will have much less competition.

Location is also important for your choice of a web hosting service. Search engines rank sites according to geographic preferences - if you are entering a search term in New Zealand, the search engine will assume that pages from New Zealand are more relevant than pages from overseas. It is the physical location of your web server that determines this: if you are targeting a local or national market, you should definitely choose a web host located in New Zealand. If you are targeting your products or services overseas, it is often a better idea to get off shore web hosting - if you are targeting a particular country, choose a host in that country, or if you're going for world wide coverage, you might be best advised to pick a host located in the US. Hosting is usually cheaper there, or at least, you tend to get more bang for your buck.

After you have figured out who the people are who will come to your website - a good exercise is to actually draw up a few "typical" personality profiles and even give them names - then you need to think about what it is you want them to *do*, once they have found your site.

If your site is an online shop, the obvious answer would be "I want them to buy something". But there are many other ways you can sell things over the net, other than getting people to click ye olde Paypal button. You could offer them a quote calculator, or ask them to fill in a form so you can get back to them with a quote. You can ask them to email you, or give you a phone call, or visit your store. You can advertise events and special promotions. You can use the site for your market research and introduce quizzes or polls to get customer information. You can get people to sign up for a newsletter and leave you their email address. You can ask people to tell others about your site - perhaps via Facebook, or Twitter, or Digg, or any other of those new fangled social media. Or you can even just use your site as a portfolio to refer people to for samples of your work, your cv and recommendations. You could also use your site to be blatantly political and get that opinion out there that none of the newspapers wants to print - though this option would be mostly interesting for non-profit organizations.

The point is, you have to ASK people to do whatever it is you want them to do - don't rely on them figuring out for themselves.

If you want to sell an item, put a Paypal button where people can see and click it, ideally right on your home page. If you would like for people to give you a call, put your phone number in bold on your front page. If you want to get emailed, put an email link. If you want people to sign up for something, set up a login system so people can't access all of the content of your page unless they sign up. If you want people to tell others, ask them to, and make it easy for them - Facebook, Twitter etc have applications that allow people to post links to their profiles at the click of a mouse.

Sometimes it is better to not be too much "in people's faces". If you have a new and innovative product or service, it might be best to get people to read up your information and recommendations first, before you try to get them to click that "Buy now" button. In those cases, think carefully about the click flow - the sequence of pages - that you want people to follow, and make it easy for them to follow that flow. A good web designer will be able to assist you with this. That is, in fact, what good design really is all about!

Asni: Multimedia Art & Design:: http://webdesign.asni.net :: http://www.asni.net

HTML Basics 4: Images

Another tag which is very common is the <img> tag - this embeds image files into your page. Imagine how drab the internet would look if it weren't possible to display images on a web page!

Images are separate files which need to be stored online separately, and then embedded in the HTML document. You could almost think of the image tag as another kind of link tag - except that, instead of opening a new document on a new page, it displays an external file as part of the page you are looking at. It is important to remember that all image files you are using in your website need to be uploaded to your server as well - unless they are already stored on another website, and you are pointing your image tags there.

In another blog, I talked at some length about the image formats that are used on the web - the most common are .jpg and .gif. Say you have written a piece of text for your web page, but now want to embed a graphic logo on the top of the page, and a photo next to your first paragraph. Both things are achieved with the same tag. The logo will most likely be a .gif file - which is more suitable for text and line art - say it is called logo.gif, and it will be stored on your own web server, in a folder called "images". To embed it in your page, you need to write the following line of HTML: <img src="/images/logo.gif"> - that's it! The part after the img src, between the quotation marks, needs to contain not only the file name but also the *path* to your file - directions for the browser to where your image is stored. In the above example, the file would be stored in a folder called "images" which is in the main directory of your web page (more about directories some other time!).

What if you want to use an image that is stored on a different website though? Say, your brother has taken some beautiful photos on his last holiday in Switzerland and uploaded them to his personal website, and you have asked him to use one of them to decorate your essay about dairy farming in Europe. In this case, you use the same tag, but your path is the full url of the image - that is, ithe precise location on the internet where the image file is stored. So your brother's website is called www.mybigbrother.com", the image is called "cow.jpg", and it is stored in a folder called "images within the main directory of your brother's website. The tag would then read: <img src="http://www.mybigbrother.com/images/cow.jpg"> - as you can see, the tag itself hasn't changed, only the information where the image is located.

By default, images are displayed at the point in the site where the image tag is inserted, and displace text. If you would like to float it on the right or left side next to a piece of text, insert the following in your image tag: <img src="http://www.mybigbrother.com/images/cow.jpg" float="left"> - this will display your brother's photo of a beautiful Swiss dairy cow on the left side next to the paragraph of text that follows it in the HTML code.

Asni: Multimedia Art & Design:: http://webdesign.asni.net :: http://www.asni.net

HTML Basics 3: Links

In my last blog, I have been looking more closely at the <head> tag which is one half of every valid HTML document. A couple of blogs ago, I already talked about some of the most basic HTML tags that make up the <body> of the page: <p> for Paragraph, and the different levels of headers, <h1>, <h2>, <h3>, <h4> and <h5>. Today I'll introduce the next most important tag you'll find in almost any web page: Hyperlinks.

Hyperlinks - or links, for short - are fundamental to the whole idea of the internet. The very name of the coding language we use, HTML - short for Hypertext Markup Language - includes the idea that there be links. "Hypertext" means an enhanced form of text, where virtually every word or piece of information can lead off in a different direction, by virtue of linking that word or short piece of text to another page with additional information. Remember that originally, the internet was intended for academic and research purposes - and Hypertext is the triumph of the footnote. If you've ever written an academic paper of any sort, you may know how tempting it is to drown your main argument in reams and reams of footnotes providing additional - but sometimes barely related - information. With a Hypertext document, you can have all the footnotes you want, at a mouse click, without burdening down the main argument of your text.

All you need to do is insert a link that leads off to another page. And obviously, without links, there would be no World Wide *Web*, but only a vast collection of individual and separate pages, with no way to navigate from one to the other.

The link tag has a slightly different format than most of the other tags we have encountered so far, which simply open and close - for instance <p> and </p> which are the tags that surround a paragraph of text. The link tag also consists of an opening and closing tag, but the opening tag contains some additional information - most importantly, the url of the page you are linking to!

Say, I would like to insert a link to my own home page, www.asni.net. The correct url for this page actually read: http://www.asni.net - and if you are linking to a different domain on the net, you always need to include the http:// prefix (links from one page to another on the same website are a slightly different matter, but I will cover this some other time when I talk about navigation menus and directory structures).

The format of the link tag is <a href="http://www.asni.net">Link to Asni's home page</a>. The basic tag is <a></a> - this stands for "anchor" - these tags enclose the link text which is displayed on the site. Note that the text of the link does not have to be identical to the url of the page you are linking to! I could have written this link as <a href="http://www.asni.net">www.asni.net</a>, but still, the bit that tells me where the link is pointing to is the part after the 'href=' - the url of the page I am linking to, which is always enclosed in double quotes, and needs to include the http:// prefix.

By default, the new page opens in the same browser window or tab you have just been looking at. It is often a good idea to tell the browser to open a new window or tab intead - for instance if you are linking to an external page but would really like your visitors to come back to your page after they have looked at your link. This is achieved by inserting a target="_blank" into your anchor tag. The tag then reads as follows: <a href="http://www.asni.net" target="_blank">Link to Asni's home page</a>.

Asni: Multimedia Art & Design:: http://webdesign.asni.net :: http://www.asni.net

HTML Basics: The Head Tag

A couple of blogs ago, I introduced the most basic HTML tags to build your own web page. As I mentioned then, each HTML document consists of two main sections: the <head> </head>, and the <body> </body>. The <body> contains most of the things that are actually displayed on your screen when you view a web page. Today, however, I'd like to take a closer look at the <head>.

Most of the information inside the <head> tag is not directly visible to anyone viewing the web page. That does not mean that the contents of this section of the page are unimportant. Quite on the contrary! The head contains information that is vital for the functionality of the website - such as <style> tags that ensure the page is displayed the way it was set up by the designer, and <script> tags that specify any scripts running on your computer while you are viewing the page - for instance the popular Javascript, which enables a lot of the enhanced functionality you can admire on a professionally designed site. These can either be included in each individual page's <head>, or they can reside in an external file - a CSS style sheet or a script file - in which case the <head> tag would include a link to the external files which are needed to display the page correctly.

The <head> tag also contains information that is very important for search engines - if you are keen on improving your site ranking and get your pages found by more people, don't neglect paying attention to the tags in your <head>.

In my last blog on this topic, I already briefly covered the <title> tag. The line of text inside the <title></title> is what is displayed on top of your browser window. It is not to be confused with the main page headline inside your <body></body> tag, though it may well be the same line of text.

Next to your domain name, the <title> </title> is the single most important part of the site that determines how a search engine ranks your page's relevance for a certain keyword. Say you have a site about biking equipment. If you are lucky, you might have secured the domain "bikingequipment.com" which ensures that if someone enters the search term "biking equipment", your site is likely to be ranked quite high - if your domain name is equal to the search term entered, the search engine will assume that your site will be a good match.

These days, however, really obvious domain names are getting quite rare, and it is likely that if you are starting a new business and building a new website, someone else will have secured the domain "bikingequipment.com" already, and even alternatives like "bikingequipment.biz" or "bikingequipment.net" or "bikingequipment.co.nz" may already be taken (if the first business is smart, they will have registered all those variations themselves, to avoid having a competitor with a very similar domain name in the future).

Even if your domain has to be called something else - like "Petesstylishbikes.com" perhaps - no one can keep you from having the keyword "biking equipment" in your page title. If you are a biking equipment business located in Featherston, it would also be a good idea to include this geographical indicator in your page title - so your page might be called something like "Biking equipment Featherston Wairarapa". But beware of the temptation of making the title too long - keyword stuffing is not something that search engines appreciate. In the case of the title tag, most search engines only consider them up to a certain length - about 35 characters would be good measure.

Another tag that has some relevance for search engines is the <meta> tag. There is some dispute about just how much value search engines place on <meta> tags, and some search engines ignore them completely. Since they are not visible to the viewer, this is a place where much keyword stuffing and attempts at manipulating search engine results have occurred in the past, which has given the tag a somewhat dubious name. However, some search engines - Google included - definitely take them into consideration, so it is worth paying them some attention.

There are several kinds of <meta> tags, and they don't all have to do with content - some of them specify which language or character set is used, and if the content is mainly text, or some other media type. The meta tags relevant for your search engine optimization are the "keywords" and "description" meta tags. As the name implies, "keywords" contains a list of keywords relevant to your page, and "description" contains a short line of text that describes your page. This is often the line of text that appears in your Google search results under the link to your page.

The format of those tags is somewhat different from what we have encountered so far. Say you want to include this short page description: "Pete sells the most stylish biking gear in all of the Wairarapa". The tag would then read as follows: <meta name="description" content="Pete sells the most stylish biking gear in all of the Wairarapa" />. If you wanted to break it up into keywords, write: <meta name="keywords" content="stylish biking gear Wairarapa" />.

Asni: Multimedia Art & Design:: webdesign.asni.net :: www.asni.net

Site Maps, or the Importance of Planning

A client recently asked me what a site map was. An excellent topic for my blog, I thought ! One can hardly overestimate the importance of planning, when it comes to web design.

One way to look at a site map is as a blue print, or the building drafts for your house. It is a graphic representation of how the website will be structured, and how the individual pages that make up the site will relate to each other: which pages visitors will see first, and where do they lead them? What are the main sections of the site? Which page links to what other pages? This will also determine how the main and secondary navigation menus are built and structured.

As a design document, the site map should also indicate any features that are needed: will there be a database, a login system, a search function? Any content that is dynamically generated? If so, what will be the sorting criteria available to the user? Will there be media files that require special treatment? Will parts of the site be built in Flash? Will there be feedback or enquiry forms, or will the users be able to leave comments and feedback? All these things should be at least considered, and hopefully decided, before work on the actual site design even starts.

The more thoroughly a site is planned out beforehand, the less risk there is of wasting time and money walking down a blind alley somewhere. The site map will also help the designer to give a more accurate estimate of the cost, and of the timeframes involved - particularly if it is a complex site with many sections and/or rich media and interactive content.

It is not only in at the planning stage that a site map is of use, though. It is a document that should be kept up to date as the design process develops - there are bound to be changes or additions at some stage, or things that seemed desirable initially, but may turn out a bit superfluous. A clear structure is user friendly, and keeping track of the site map ensures that this goal will be achieved. It will be extremely helpful when new sections need to be added to the site at some later stage!

Eventually, a site map also will be relevant to your search engine optimisation (SEO). Once the site is live, there should be a page that contains links to every page within the website. This will make sure that the robots which crawl the internet on a regular basis for Google and other search engines, will find and index every page that is part of your site. As you will probably have noticed when browsing on the internet, search engine results always return individual pages, rather than web domains - the page a potential visitor finds in Google may well not be your home page at all. So making sure that *every* page that makes your website is accessed by the search robots, and indexed, increases your chances of being found on the net.

Asni: Multimedia Art & Design:: webdesign.asni.net :: www.asni.net

Of Servers and Clients

Before I delve into more HTML tags - as promised in my last blog - today I would like to have a look at some of the actual pieces of hardware that make the internet possible. What precisely is a web page? What is it that you see on your computer screen when you call up a page, and how does it get there?

At the most basic level, a web page is a HTML file which is being opened in a computer program which has been specifically developed for this purpose: your browser. Whether you use Firefox or Internet Explorer, Safari or Opera, or even an outdated browser like Netscape, they all do the same thing: They find the location of the file you are looking for, and render it out for you the way the web designer has envisioned it (well - at least, most of the time).

What makes a web page a bit different from your usual word document, or spreadsheet, or the holiday shots you downloaded from your photo camera, is that the file is usually not sitting on your own computer. It lives on some computer which may be in the next town, or on the other side of the country, or halfway around the globe. Apart from slight differences in loading speed, you'd never notice the difference.

The computer where the file is stored is called a *server*. You can host your website on your own computer if you have the appropriate computer equipment and software - which can be downloaded for free from the internet, and Macs even come with all the necessary software already installed. One of the disadvantages of doing this is that the computer needs to be connected to the internet 24/7, or else the website will not be available when the computer is not online. There are also security risks, such as that your site might get hacked. For this reason, most websites are hosted by a dedicated web hosting service - for a reasonably small annual fee, you can hire a certain amount of storage space for your website files, and the company provides all the necessary setup, software and security. Usually they also include a regular backup service, which can come in handy for those times when things just go wrong.

How does your browser find the right file, among all the gazillion files that make up today's internet? That is what the URL is for - that little line of text that appears in your browser navigation bar, and starts like this: http:// . "URL" stands for Uniform Resource Locator - a unique tag that tells the browser where the page (the "resource") is located. URL's don't only apply to the main HTML document that is your web page: Each and every file that makes up the page you end up seeing on your screen, has their own unique URL. For instance, if a web page displays an image, that image will be a separate file with its own unique web address, or URL. The file does not even need to be located on the same computer as the main HTML document - a page can display images, or movie, audio or flash files, which are each located on a different computer, in completely different parts of the world.

The browser's job is to locate all these files, pull them down the wires that connect the server with your own computer, and assemble them in such a way that they look nice, and make sense. Not a small job! Your own computer, when it displays a web page, is called a "client" - as opposed to server. In one of my next blogs, I will go into the difference between server-side and client-side web programming, but for now, I will call it a blog post! Otherwise, it might end up being information overload.

Asni: Multimedia Art & Design:: webdesign.asni.net :: www.asni.net