My own experience as a Web professional has matured over the years that I have been working Online. From a budding web designer building with table based layout to adoption of standards compliant style sheets and XHTML followed by a sensibility to accessible and usable graphical interfaces. The latest adoption over the last few years has of course been everything mentioned within Web 2.0. The lines blur further as Web professionals are required to know how to market clients Web sites with improved ferocity. I for one am reading up on PR 2.0 and increasing my knowledge and skill set. The PR 2.0 and Web 2.0 professional cross over will require both parties to work much closer together within an agency environment. This is already being witnessed with companies such as McCaan Erickson appointing London’s Bite PR digital services and campaign arm—Robin Wilson, who was also on Bite’s board of directors—to bulster their own direction towards PR 2.0. However early adoption doesn’t seem to of taken place in the UK like seen in the US. A heartfelt and entertaining rant by Will McInnes highlights the problems being seen throughout PR professionals in the UK. There are a handful of digital PR agencies that do get it and probably one of my favourite websites for getting the message across is Diffusion.

I knew my strengths lay in what we—online experts—have come to call today, digital media. Whereas the technical specifications of a graphic designer are type setting and colour separation plates, the Web designer working knowledge is in Web page expansion, graphical user interface (GUI) design and accessibility considerations.

There are cross-overs in the disciplines. Sure. Typographic sensibility, page balance and colour selection are inherent disciplines in all good designers. Essentially graphic and Web designers are bound by their maturity to design. They’re separated by their focus.

Proposed with the job to layout magazine column or brochure I would naturally put fourth a contact able to carry out the task. A thumbling attempt at completing the project would require too much learning and error on my part. Nor would it stoke my interest. I would hope that my graphic design contacts would extend the same favour and thinking if the glove was on the other hand having been asked to produce a series of Web page layout designs.

From experience in the creative industries and speaking with peers this is not always so. There is a tendency to place Web design in the hands of seasoned graphic designers. They make the decisions, call the shots, before passing the Photoshop file to a Web developer to muddle through.

Web designers have a discipline entirely their own. A Web designer is to produce unique, functional and appealing strategies that take account of a medium that will change dependent on platform, for instance the type of browser, the viewing device, even the screen resolution set by the end user. This is ever more prevalent today with mobile devices and the like.

This is merely a smattering off the top layer considerations for a Web designer. I will return to this topic in future posts. For the time being, what experiences have you of graphic design professionals attempting Web design? Perhaps you are a graphic designer who is tasked with Web related projects. Do you feel you are unable to complete the task fully due to inexperience? Does work get returned by developers saying it won’t work? What do the Web developers amongst you say, have you had to redesign work signed off for you to develop as they were unworkable?

This post will assume knowledge of building static HTML web pages and will mainly benefit those that have no prior knowledge of using PHP or ASP.NET to build a website.

Firstly take a look at a simple open source solution that can be run on Linux, Apache or other equivalent server. You do not require a database to run this, all I am going to use is some very simple PHP includes which will allow the HTML web document to be broken down into different modules so that the content of a page is separated from menus, the Head tag and other parts of the website which will be accessed by several pages. For a mini site this may only be used for one page but you will be able to see the scope for expansion.

Firstly I will separate the opening HTML tag, Head and opening Body tag into its own document. Nothing special need be done here, as soon as you write the opening Body tag save the file as header.php.

Next we will create the main menu. In a new file we begin the next line after the Body tag which we opened in header.php. I have opened up a containing Div, added in the markup for the menu and left the containig Div open in this particular file. Save this file as menu.php.

Rather than moving on to the next markup that will appear after the menu, we will now skip right down to the footer which will incorporate the copyright statement, quicklink menu items and the closing container Div, Body and HTML tags. Save this document as footer.php.

Now that we have the header, the menu and the footer that will be consistent on each page we can now call each of these elements to each new page that is created in order to complete our HTML document. This is easily done with PHP includes which are written in the following example. The header first, followed by the menu and then the markup for the particular page being worked on. This is then all closed by calling the footer. Save this file as index.php so that it becomes your home page.

This should give you a taster of how to markup a page with PHP includes. Any element that is going to be duplicated over multiple pages can be written into a separate document and called from an include. Any changes that are then made to these files will reflect site wide without unnecessary repetition.

In the next part I will take you through ASP.NET master pages and how these can be used to template a website in an even more powerful way than you have witnessed here with PHP includes.

The third camp are the self taught. They have learnt HTML and CSS off their own backs and not content with this they are hungry for more teaching themselves around graphic packages such as Photoshop and Illustrator while also dabbling in the server side programming. This is the camp I established myself in. I am in this camp at the moment. I do not wish to leave this camp for another.

There are of course some cross over and lines get blurred. I for one studied graphic communication but self taught everything web related.

We have here a wide spectrum of people that work with the web. Those that have logical minds and those that have creative minds with everything else in between. Is it possible to develop your mindset from a far more creative side to both a logical side too? This is currently what I am trying to do. To further my progression I wish to learn an object orientated language, my weapon of choice is C#. I have attempted this before but found the books I tried to learn from too much of a learning curve and demanded some prior knowledge of programming. I have now found a book that I would recommend for fledgling programmers with no previous knowledge. Visual C# Step by step, Microsoft Press. It has eased me in with the makeup of the language and familiarised the syntax in easy to understand examples. However, approaching the third section of the book I found that with the shear amount of information that I was taking in with the read so far I was unable to remember everything and then trying to look up how a particular method conducted itself quickly while following the later chapters became difficult. Instead of plodding on I began searching around the web for cheat sheets. There are some decent cheat sheets out there, but with such a sheet not everything will be detailed and of course it is all very cut down. Next I tried printing off the summaries of each chapter in the book. This wasn’t particularly manageable either. Instead, now I have begun rereading parts of the chapters and writing up C# documents with my own commenting and examples of how each method/function/whatever works. Each item is given it’s own document and saved under the name of the element I am describing. This has built up a library of easily referable documents I can call upon while reading the book and following examples.

This will be of use to others in my position so I will be making this library readily available once completed. It should be a good alternative to cheat sheets and provide just that little bit more scope when trying to learn not only a new programming language, but a new way of thinking.

So let us take a look at the small things:

Skip to content

This is also sometimes called ‘skip navigation’ and is known throughout the web standards community as an item that should be applied for enabling users with disabilities to skip past the navigation menu to the main content of the page without having to hear the list of links when using a screen reader. Imagine listening to the possible pages you could visit every time you visit a new page on the website? Bored? Yes.

The skip content feature is usually hidden away from the visual website version, possibly deemed as inappropriate for able users or perhaps visually ugly.

However it is useful for able users viewing the website visually. Some websites may make use of horizontal advertising blocks underneath the menu or possibly some kind of Flash movie. This allows the user to navigate past this quickly and easily without having to manually scroll past advertisements and other guff (in the visitors’ eyes). This is one that isn’t always necessary but should be considered more by user interface designers.

Breadcrumb trails

Where you are and what section you are in with a quick glance at how deep into the website you have burrowed yourself. This is what the breadcrumb achieves. The highly effective feature allows visitors to be able to orientate themselves and navigate back through a section with ease. As mentioned before, unless the website has multiple sections with several pages deep within a folder directory a breadcrumb trail is pointless. For juggernaughts packed full of information, missing off a breadcrumb trail feature will leave many visitors bewildered.

Top of page

Website pages can be long and packed full of information. Take a privacy policy or legal page for instance. Plenty of meat there. Once a visitor has been brave enough to read right to the bottom of the page it is only polite to add a nice little button that allows them to jump right to the top of the page again, you know, where the navigation is?

There are also certain documents where there is lots of individual information. Let’s take a facts and questions page for instance. We are viewing lots of individual chunks of information on one page. With a layout like this it is beneficial to make sure there is a ‘top of page’ button after each content block as the visitor is highly unlikely to be sifting through the whole page. They will grab the information that they need, possibly from the middle of the document and then want to go elsewhere. Make it easy for them and allow quick transit to the navigation menu.

Anchor points

Again, we will be taking the previous example of the facts and questions page. Forcing the visitor to sift through all the individual content blocks in order to find the information they’re looking for will prove unfruitful. They just won’t. Provide a block of links towards the top of the page that link to anchor points within the document. This coupled with the ‘top of page’ links creates a usable system. Of course if the page is so gargantuan that you would need anchor points to get around the link block then you should look at bringing in a search query form. See below.

Search query form

Some visitors to a website may want something very niche to your service and something out of the ordinary. Such people will probably not be catered for in the main navigation structure. They may not be catered for at all. Let them search by keywords by providing a search query function. They can then get a list of results from pages that contain that particular keyword of phrase. Alternatively they will not find a result to their query. Clever search queries will supply alternatives or ask the visitor to complete a form suggesting an addition to the website content.

Back button

In addition to the breadcrumb trail, or in some case instead of to simply allow the visitor to navigate their way back to the section home page rather than having to jump through hoops within the navigational structure.