Resuming ...

As you might have noticed, I have been taking a creative break from this blog. I've been away traveling, and afterwards, life got hectic: I had to catch up with a mountain of work left lying about while I was away, and I've been trying for the past several months to buy a house! Besides, I've been somewhat running out of topics. I think I have now covered most of the Online Promotion 101 I set out to cover, so time to think about a new format for this blog. I'm still working on it, but I have an idea or two. No, I won't tell. You'll see.

The work never really stops, but the house buying is now accomplished. Since last week, I am the owner of 51 Wakefield St in rural Featherston, an hour out of Wellington: the same house I have been renting for the last two years, and also the location of my business (I work from home. Much nicer that way). This promises to bring some much needed stability to my personal life: I have lost count of the times I have moved house since I moved out from home some 20 odd years ago. It does get very tiring.

Now that I have found the house and garden I have always wanted (I've spent the largest part of my life living in city flats) - in a location that as far as I am concerned, is just about perfect, combining the advantages of living rural, with closeness to a major centre, and with some of the most beautiful landscapes and beaches on the planet within easy driving distance, even biking distance! - I would like to stay. And plant some trees. And quietly get on with my work. It's all that really matters in the end, isn't it.

So much for the personal stuff. More importantly, I have also completed another major web design project: Belinda Brown Photography features a variety of image galleries displaying this photographer's portfolios for weddings, portraiture and travel photography. The image galleries are fully searchable - enabling visitors to quickly locate images concerting a particular topic, location, date or other parameter the image has been tagged with (unfortunately, the fanciest technology can do nothing if the client does not tag their images. Just saying.)

The site comes with a complete content management system, enabling the client to create and delete galleries, add or delete individual images, and enter information such as captions, location, date, and relevant keywords. This is the first time I have coded such an extensive, database driven content management system, so this site represents a major step forward in terms of what I have to offer, and I am really proud of how it has turned out.

Here is what the client said: "In terms of the layout, it looks fab and I like the fact the boxes aren't too close together so the images remain strong and not crowded by the one next door. Generally I think it is smart, clean and I like it."

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

Content Management: Keeping Things Fresh

So you have a bright and shiny new website, the launch went well, people have complimented you, and everyone is excited. What happens next? Do you just let it sit there for the next couple of years? In that case, you shouldn't wonder if your visitor statistics are disappointing, the search engine ranking goes from poor to non existing, and the site generally doesn't do much for you.

The importance of regular updates cannot be stressed enough. There are the obvious reasons: Information, prices, services, timetables will go out of date. It is frustrating for a client to look up information on the site, then find, when they call you or visit your store, that the model they are after has gone out of production last year, or the class or event they were coming for isn't actually taking place. Do you think it promotes trust in your business if it presents information which has not been updated for the last three years?

The other good reason is that search engines favour fresh content. The principle behind search rankings is, simply put, that the engine tries to find the content which is most likely to be relevant to the person doing the search. The four main factors which play into this are: keyword match, popularity of the page (i.e. the number of previous visitors), number (and reputation) of sites linking to the page, and how recent the content is. So updating your pages regularly already takes care of one quarter of your search engine optimization!

This is one reason for the popularity of blogs: blogging sites allow users to input text and other content themselves, with no need for any web design or programming knowledge. Blogs are, by definition, frequently updated - and it turned out that search engines really liked this! Many people even choose to only set up a blog, not an entire website with their own domain. For some businesses this makes perfect sense - especially if you're only just putting your feelers out in the online realm. Most blogging sites are free to use: some of the most well known are Blogspot (which is hosting this blog), LiveJournal, and more recently, WordPress.

Wordpress even offers the ability to sign up for your own domain name, and a few other features which allow you to set up an easy to manage site yourself. These services are available for a monthly fee. Again, this can be a good solution for a first web site - but as with all out-of-the-box solutions, there are limitations to how well you can adapt this system to your own requirements.

Easy to use online content management systems are quickly becoming the standard for personal websites. They are often built using one of the available content management packages as a backbone - Drupal is one such package, which is popular with website developers. These packages offer a wide range of advanced interactive features: blogs, forums, image galleries, shopping cart solutions, password protected areas, you name them. The capabilities and adaptability of such a system go well beyond a humble Wordpress site - but it still is limited in some ways, particularly in the ways you can lay out and structure your site.

My personal preference is to create my own content management systems for my sites. The last two sites I have built - www.margarethiley.com and www.wellingtonyogacentre.co.nz - are both fairly small sites, and using a massive online content management system requiring hours and hours of setup or programming, seemed like overkill. Instead, I choose to work with text files, which can be updated by the user in one of the common word processing programmes, without the need for special web authoring software, or being fluent in html. This does require a certain level of feeling comfortable with computers, and a willingness to familiarize yourself with setting up an FTP connection, folder structures, and a minimal amount of html tags. But it helps to keep the cost down - in both cases, adding an online administration area would have doubled the work, and hence the price.

The site I am currently working on is a gallery site for a photographer. Here, one of the main requirements is that the client can easily add new images, and the associated information. This site will have a full featured online content management system - fully flexible, and adapted to this specific client's needs.

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

Introducing: www.margarethiley.com

This month has been mostly busy with proper paid web design work, which is just how it should be. I've already introduced the Wellington Yoga Centre website in my latest - it is now properly online and live, and can be admired here: www.wellingtonyogacentre.co.nz

Next up was a business website for a client in the UK, Margaret Hiley. She is the sister of a fellow budding illustrator friend I met online, and a specialist on Tolkien and music! A little while ago she asked me if she might cite from my Travels in Middle-earth CD booklet for a review she was writing, and things sort of developed from there. Incidentally, her father is a professor of Musicology, and the author of a big fat scholarly study and reference on Medieval Plainchant, which has been gracing my bookshelf long before I ever met either of his daughters. Such is the smallness of the planet.

Margaret is a professional academic and keen folk musician, and - having grown up bilingual - has recently set up a business offering English/German translation, editing and proofreading services for academics, writers, and the cultural and creative industries. Her areas of specialist expertise include fantasy and science fiction literature, music and musicology, myth and mythology, media studies, and breweries … so we do have quite a few interests in common!

This site has been a real pleasure to work on - not least because I could play with the beautiful cartoons created by Margaret's sister Catherine, an illustrator and print maker currently residing in Edinburgh.

I am really pleased with the look of this site, and even more pleased with some of the behind-the-scenes functionality, which is based on some smart and economical application of PHP scripts: for instance the "testimonials" page, where new referrals can easily be added by uploading a text file to the appropriate folder on the web server. This task is easy to do even for the not so computer initiated, and it is a much more simple and streamlined solution than setting up a complex content management system requiring a database.

Have a look at my latest brand spanking new website! Proudly introducing: www.margarethiley.com

Some feedback from the client: "Well, what can I say - I love it!!! Very clever what you have done with the watercolour image - thanks!" :: "I can't wait till the site is up and everyone can see how great it looks!"

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

Introducing: www.wellingtonyogacentre.co.nz

The other day when I was having my exhibition at Thistle Hall, I got into a chat with one of the visitors, who asked me about my web design work. She told me she was having a bit of grief with her website. Apparently she had gotten a young person who had offered to do the job for very cheap, for the sake of the experience (really, *very* cheap - in fact, on hearing the price, it was quite apparent to me that this poor person probably did not know what she or he were doing, though unfortunately, I am also aware that quite a few potential clients seem to actually expect that they can get a decent site built for that amount of money) - but she was now getting the impression that this person was not really up to the job.

When I looked up the site, it was quite apparent that indeed, whoever had set up those pages, had not the first clue how to write a proper CSS layout. The paragraph text was floating awkwardly next to the main navigation menu in a way that was clearly not intentional. There were no proper page margins, one link in the main navigation menu was not functional, and what layout elements there were, were plain to say the least, and somewhat oddly proportioned. The logo and existing branding elements that were available had not been integrated at all, apart from the general colour scheme.

The owner of the site was understandably concerned that this would not give a good impression of her business - but she had also noticed that the website was definitely doing the trick, in that she had already been getting some enquiries through the site. She was quite anxious to get it fixed up and looking professional as soon as possible.

At first I thought this would be a matter of simply turning what existing design there was into proper HTML and CSS, but as we got talking, she decided to invest in a proper redesign of the site. The result went online earlier this week: www.wellingtonyogacentre.co.nz

The main thing I concentrated on was to create a simple, calm and functional design with pleasing proportions and a clear structure, and on making the site look good regardless what screen size, resoluation or browser is being used. I was fortunate to be able to base this design on the excellent logo and branding done by another design studio - I really do love the colour scheme they came up with, and decided to stick with it throughout, apart from introducing a couple of matching shades for the graphics on the home page.

The "rising sun" logo gives a calm yet structured background for most of the pages, and works well in that it does not distract from the main content and images. For the home page, however, it did seem a bit dull, so I introduced the yoga silhouettes in their concentric circles. After a bit of initial resistance (not uncommon when one sees something that is a bit different from what was expected for the first time), my client ended up loving them.

In terms of functionality, it was important to enable my client to create news announcements on the home page, and to be able to update the timetable. To this end, I set up a couple of PHP includes which can be edited without having to actually change the code of the respective pages. It does require an understanding of simple HTML, and an ability to upload pages via FTP, but the site owner assured me that she was confident to be able to learn those skills. It is a far more simple and streamlined - not to mention less pricey - solution than setting up a full database integrated content management system for what are, in effect, only a couple of items that need to be regularly updated.

As a bit of an extra, I also created a PHP script that builds the image gallery on the gallery page, which will make it easy for the site owner to upload additional images without having to change the page code at all.

Here is what my client said: "It looks really terrific, Astrid (i'm not just saying that)" -- "The site is really good, thanks Astrid" -- "It is a lovely site Astrid. Do you want to make up a flier for me now??"

Mission accomplished. :D

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

How to Choose a Web Host

One of the first things to think about when planning a new website, is where to host it. Unless you have the technological know-how and equipment to host your site on your own computer or dedicated web server, you will likely end up choosing a web hosting service.

There are half a gazillion of those out there - so what should one look for when choosing a host?

Don't be tempted to simply jump for the cheapest package. The first decision should be the location of your server - search engines take geographical location into consideration for their search results, so if your business mainly operates locally, choosing a New Zealand based server is definitely a good idea.

If you are aiming for a global market, it might make sense to host your site in the US - web hosting contracts there tend to offer more bang for your buck, but do make sure you read the fine print. One web hosting company I have been dealing with in the past, kept sending me "upgrade offers" which I had to opt out of within a certain timeframe, to avoid being forcibly upgraded to a more expensive contract. Not a good look - and definitely not a company I would consider ever dealing with again!

Another thing I have come across a few times are "budget" web hosting packages which do not enable PHP. These days, one should be able to expect that PHP is enabled as a matter of course - while it is possible to work around it as long as no interactive features are required, it does mean more work for the web designer, and a lot less flexibility when it comes to keeping the site up to date. PHP 5 is the standard that should be expected - make sure your web server enables PHP 5, and at least one MySQL data base.

It always pays to compare features such as the amount of data storage, bandwidth, email accounts, number of parked domains that are allowed, and any other limitations that the hosting contract might impose. Having access to your own web statistics is also vital - make sure your hosting service offers a decent package of applications.

This said, most small business sites do not require vast amounts of bandwidth - unless you plan to upload large amounts of images, video, audio or other multimedia files, you will be fine with a smallish space and bandwidth.

If in doubt, it is probably a good idea to talk to your web designer before signing up for a hosting contract - they will be able to tell you exactly what features they will need to pull of the site of your dreams, and how much bandwidth and disc space this will require.

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

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

An Introduction to Web Technologies - part 3

In my blog post on 11 November, I introduced the web coding language PHP, and some of the things it is used for. Today I will look a little more closely at one of the most important applications of PHP coding: Login systems, sessions, and cookies (yum).

PHP does not only pull information *from* a database - for instance, to automate the building of product catalogues or image galleries - it also allows you to store user input *into* your database. One of the most common applications of this are page registration systems, or login systems.

Surely you have come across sites that ask you to register with a username and password. Most commonly, you will also be asked for a valid email address, and perhaps some other information such as age, gender, place of residence, occupation, etc. etc. Often, the site, or certain sections on the site, can only be accessed after user registration. Even more commonly, users can only leave feedback - on message boards, forums or blogs - after they have registered and logged in to the site.

As well as providing a measure of security and protection from spam robots, from the site owner's point of view, collecting this information is an easy and efficient way to do market research. It helps to build a database of people who are potentially interested in what the site owner has to offer. If people are interested enough in accessing the information on your site, to take the time to register themselves, then perhaps they will also be interested in receiving, say, a newsletter - and in eventually buying from you. Of course, anti spam legislation has to be respected: often the site registration form will give users the ability to opt in or out of receiving emails or additional information in the future.

A more advanced use of this technology is to provide users with personalized information. This can be very simple - for instance, greeting people by their name when they log in. An application of this I am working on at the moment, is to offer one of my clients the ability to provide their clients with personalized updates about their building projects. Instead of being sent an update by email each week, the idea is that clients will be able to log into the site and check on their project's progress at any time.

Some of these applications can be quite complex. Amazon's customer recommendations are an example of that - the site will recommend books based on what you have previously bought there, as well as on what other customers who have ordered the same items have also bought.

The time between an user logging into a site, and logging out again, is called a session. For the duration of the session, the site remembers who the user is and what previous information they have entered. This is usually achieved with a little piece of code, called a "cookie", which is stored on the user's computer. A cookie permanently stored on the user's computer enables a website to recognize a previously registered user, the next time they log in. Cookies can also be used to track user's browsing habits - Amazon's recommendations would not be possible without this tracking.

Most cookies are quite harmless, and are really only there to streamline your online experience and make everything go smooth. Tracking cookies, in particular, can be used for malicious ends though - be wary of accepting cookies from sites that look a bit dodgy!

Besides, the idea that someone might be able to track every website that an individual person clicks on does not sit comfortably with many people, including myself. And that's not because I visit a lot of porn sites, but simply because I am wary of the uses this can potentially be put to by, say, governments, or other institutions of power.

Even Amazon's elaborate recommendation system tends to leave a stale taste in my mouth. I prefer to make my buying choices myself. Not to mention, that they are usually completely off. Being presented with a selection of cooking and knitting magazines, on account of the information I have volunteered about my age and gender, does not sit well with this web and multimedia designer!

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