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

HTML Basics 5: Lists

In previous blog posts, I have introduced some of the basic HTML tags that format a web page: paragraphs, headers, the tags that make up the page <head>, links, and images: HTML Basics 1*** HTML Basics 2: The Head Tag *** HTML Basics 3: Links *** HTML Basics 4: Images

The next most important tag is the List tag - which comes in three different flavours: Unordered lists, Ordered lists, and Definition lists.

An unordered list is a list of items in no particular order. Unordered lists can have bullet points or various other symbols that mark each new list item, or no particular list symbol at all. The default formatting for lists is to have them indented from the main text, and list items separated by a line break - this is called a block list. But with a Style Sheet (CSS), a list can be formatted whichever way you want! Lists offer a lot of flexibility in that respect. This is because for each type of list, there are at least two different tags. All the more opportunity to define a variety of styles.

One of the main uses for unordered lists are navigation menu. In this blog, all three main navigation menus are unordered lists - the navigation at the top which says "Home - Shop - Look - Listen - Read - Interact - Join", the one on the right side linking to the various subdomains and main sections of the site, and the subnavigation menu on the left, which allows you to navigate to the other parts of the "webdesign.asni.net" subdomain. (Remind me that I should write a blog about domains and subdomains sometime soon!) As you can see, they all look completely different, even though they are built using exactly the same tags.

The tags for an unordered list are <ul></ul> which encloses the entire list and marks it as an unordered list, and <li> </li>, which encloses each separate list item. So the code for the navigation bar at the top looks more or less like this:

• <ul>


• <li>Home</li>


• <li>Shop</li>


• <li>Look</li>


• <li>Listen</li>


• <li>Read</li>


• <li>Interact</li>


• <li>Join</li>


• </ul>

As you can see, even though the code is written as a block list, with line breaks between each list item, the navigation menu is displayed as an inline list. This has been defined in the style sheet - if you view the page without the style sheet (if you're browsing with Firefox, go to "View" "Page Style", then choose "No Style" - or equivalent in other browsers) you can see thebare bones of the page navigation, without all the fancy formatting.

Ordered lists are lists where items are listed in a particular order - they are typically preceded by numbers, or letters of the alphabet. A list of the days of the week might look like this:

1. Monday


2. Tuesday


3. Wednesday


4. Thursday


5. Friday


6. Saturday


7. Sunday

(unless you prefer to count Sunday as 1)

The tags for an ordered list are very similar to the unordered list - the main list tag is <ol> </ol> (instead of <ul> </ul>), and the individual list items are enclosed by the same <li> </li> tags as the unordered list - this makes it easy to convert an ordered list into an unordered one, or vice versa, if you change your mind - it is only the main list tag that needs to be changed, not every individual list item. The list tag automatically inserts a bullet point or the correct number for the item, and if you need to insert a new item in the middle of a numbered list, the numbers of the following items will automatically increase by one. Handy, eh?

The third kind of list, the Definition list, is a little bit different in that it consists of three parts. A definition list is a list such as can be found in a dictionary, consisting of a word or expression, and a definition of the meaning of that word or expression. For instance:

Monday:

The first day of the week

Tuesday:

the second day of the week

Wednesday:

the third day of the week

etc, would be a definition list.

By default, the word or expression to be explained (the "definition topic") is formatted differently from the explanaition, for instance it could be bold, or a different colour. The tags for the definition list are <dl></dl> as the main list tag, <dt></dt> for the definition topic, and <dd></dd> for the definition. In code, the list above would read as follows:

<dl>

<dt>Monday:</dt>

<dd>The first day of the week</dd>

<dt>Tuesday:</dt>

<dd>the second day of the week</dd>

<dt>Wednesday</dt>

<dd>the third day of the week</dd>

</dl>

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

Fantastic Journeys

These last eight weeks I have been taking a bit of a break, and exchanged my funky web designer's hat for a more exuberant artist's head gear. "Fantastic Journeys - Paintings and Music inspired by Ursula Le Guin" at Thistle Hall in Wellington was my first solo exhibition, and an opportunity to dig out the old harp and showcase my musical talents as well. The good news that the space at Thistle Hall was available came at very short notice, leaving me all of seven weeks to put together the show, do all the publicity and advertising, as well as finish a few more paintings! Which explains the recent gap in my blogging.

Being an online promotion expert comes in handy when planning such a show on a shoestring budget. One of the first and most obvious things to do was to set up a dedicated page with information about the show, and downloadable press material, on my website - I even created an appropriate CSS layout for the purpose!

Once I have had time to catch a breath, I will expand this page into a little self contained section of the site, with photos and feedback, and perhaps even a bit of video. That way all my overseas friends who have posted on my Facebook event page that they would love to come, if only they could get the teleporter to work, can at least share some of the experience!

I have also made good use of my monthly newsletter, and dedicated the last two issues mainly to the show.

New Zealand in general, and Wellington in particular, are quite well endowed with sites which provide free events listings, and I have availed myself of that that opportunity very systematically. The Eventfinder website is a relatively new site which offers the great advantage that a whole host of other sites pull their content from there - so with one listing, one can get a plethora of adverts all over the net.

The Big Idea is considerably less streamlined - I had to upload my information in three different places and fill in a lengthy upload form each time to do it - but offers the advantage of a large and dedicated readership of people involved in, or interested in the arts sector in New Zealand. I also managed to find a couple of wonderful volunteers to help me with the preparations for the show, and with making things go smoothly at the opening!

Wotzon, Feeling Great and WellingtonNZ.com are sites which are dedicated to events in and around Wellington - I found the last site to be particularly well presented, and they even showcased my show, which was very kind of them!

Apparently my media release did the trick this time - apart from scoring two radio interviews, on RadioActive and VBC (both also streamed on the net), and having one of my images printed with the events listiing in the Dominion Post's Thursday Arts Supplement, I was particularly pleased that the staff at Wellington City Library took the opportunity to write a blog post recommending Ursula Le Guin's books, with a mention of my show and a big picture of the bright yellow dragon which also graced my posters and flyers for the show.

Last but not least, the show offered an opportunity and and excuse to send out nicely designed html email invitations featuring some of my work, to all the publishers and gallery owners in Wellington, along with a great bunch of friends, business contacts and fellow artists. Over the six days, I had a total of 246 visitors come through my show, which, for a little self promoted first show at Thistle Hall, strikes me as a fairly solid number. :)

Fun was had, and valuable lessons learned. But now, back to web design!

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