Web Design

There is a certain mystique about web sites that leads many people to shun them. This is unfortunate as they can be a very good selling tool, especially for an industry like ours, which has a high visual content. The inner workings of a web site are so well hidden that many people will be surprised to learn that you can build a web site with nothing more than a few images and a working copy of "Notepad", the freebie typing program that comes with Windows. Indeed, when your Editor attended the Liverpool University one day course on web design we all had 4-page, working web sites by lunch time on day 1 and we never used any software other than the typing program!

HTML

Web sites are made up with Hyper Text Markup Language (HTML). To see the underlying HTML to any web site you simply have the web site up on your computer (from the web) in Internet Explorer. If you click View>Source then a new window pops up in Notepad showing the raw HTML code. This consists of words, abbreviations, file names and lots of > marks. (See the captions to the screen grabs)

What Does it all Mean?

Well for starters if you type you immediately alert the computer to the fact that a web page is following in the rest of the file. Do a View Source and then save the Notepad file as a dot txt file on your Desktop. If you then rename the file (Right Click, then Rename) as a dot htm file it is then recognised by your computer as an Internet Explorer file and, when you double click it, part of the original web page will pop up as it was on the web (it may be missing a few linked files, as in our example). This is because the "links are broken" in other words the commands built into the HTML to go and get a file cannot be accomplished because the file is not available on your PC (it's on the web!)

Where does this lead?

Hopefully we have convinced you that even if you can't write web pages because you don't know the "syntax", the process is essentially quite simple. The web page is a collection of typed commands and instructions. If the typing says "src="images/buttons/photography.jpg" the computer goes off into the images folder, then to the buttons sub folder, gets the JPEG file called photography and plonks it on the page where it is told.

What is a web page?

A web page is like a page in a book. When you have a single web page in front of you on your screen you can scroll up and down to see all of it.

What is a web site?

A web site is usually a collection of web pages and it also stores all the required images so that the instructions on the web pages can call then up for you to see. In a real world analogy, HTML is like the English Language, a web page is like a page in a book, a web site is like a book. An ISP or Internet Service Provider “hosts" numbers of web sites and is like your local library (in that if you call, they will let you see the books (sites)). Just like your local library they also lose books, and are not always open for business!

Help is at hand

If all this is a bit much you can avoid typing any HTML code by using a web design software package. If you want to have a go yourself you can dip into the web design pond at a number of levels as listed in the table (left). While it is straightforward to type code you cannot make mistakes or the web site will not work. Very few people can type with that accuracy and although professional programmers type raw code. They modularise their work to get round the problems associated with fault finding and error correction

What Happens Next?

Some people believe that once the web site is up and running the phone is never going to stop ringing! This is NOT so. For starters people have to know you are there. At the beginning of the web site "index" page you let the world know what you do by means of meta tags. These tell the search engines that are used to look around the web what the content of the web site is about. Obviously if you are a wedding photographer you would make "wedding photographer" one of your tags. You might usefully mention where you operate so you don't get besieged by requests to pop round to Alaska to do a wedding next week (although you might go if they paid!).

The sad fact is that the phone does not automatically start to ring after you launch your site. You might consider the launch as a reason to mail shot your clients or invite them to an opening though. In addition if a prospect phones you and asks to look at your portfolio you might point them to your web site as a first port of call. This is why your site has to be good. If it is poor, slow or un-professional that will reflect upon you and the second call may never come. Today many people plan their weddings without moving away from their computers so web presence can be a significant bonus.

What does it cost?

You need a domain name (e.g. www.mousepushers.com) by which you can be identified. These cost about £20 for a .com, a little less for a .co.uk. With your domain name registration you are usually provided with a number of email addresses and a certain amount of space on the host computer to put your web site. This enables anybody in the world with internet access to email you or go and look at your web site.

Hosting costs about £20 per year although you can get free web space. Like everything else in the world there is no such thing as a free lunch; if you pay for your hosting you get better, faster service and don't have horrible little adverts popping up in front of your prospective clients to annoy them!

And the Images?

You pay for your space on the host computer or you have a very limited amount (sometimes both). You do not, therefore, plonk any old image on your web site. It has to be sized carefully and compressed. This also means that the viewer spends less time waiting to see your site; they tend to go away very quickly if you keep them waiting more than a few seconds. The subject of optimising web images is a subject that needs several pages to itself so we will leave it there for the time being.

Above: The Source code looks very complex, but when it is broken down it is simple. The snippet directly above tells the web page to display the picture “Pixelstorm” as a table at 150 pixels wide and vertically aligned to the top. The alt=”Pixelstorm” is the alternative command for those people who have not got images turned on - they are told what it is they should be looking at.

Website

As a website appears on screen

Website The Source Code is shown in a Notepad window. This is one of 4 screenfulls of HTML that describe the content of this web site and control navigation around it.

The SWPP 2008 Convention was an outstanding success,
we have 93 days to get ready for the 2009 convention - which starts on January 14, 2009

Photo Quote: The world can only be grasped by action, not by contemplation. The hand is the cutting edge of the mind. Diane Arbus