Site History

Site Update March - April 2014

Web Developer section added, now that I am established as Senior Developer at Smartloan, part of the CT Capital group based in Norwich, UK.

Site Update July 2012

Extensive restructuring of the underlying HTML5, jQuery & CSS code of both Portfolio site and weblog site. Responsive to devices such as phones and tablets.

I used a combination of Twitter Bootstrap and HTML5 Boilerplate as the starting points for this reconstruction. For a more detailed explaination, please view the article on my weblog,Bootstrap and Boilerplate

Site Upgrade May 2012

Expression Engine upgraded to 2.5. Fancybox 2.06 - solving issue with iphone where the popup moves to right, mostly off-screen. jTweetsAnywhere V1.3.1. Permalinks set on Wordpress Weblog pages.

Homepage top Slideshow - extensive JQuery work so that the slide moving behind the Focus now replaces the work in the focus area.

Complete Site re-design & Expression Engine CMS 2011 - 2012

The long needed update/complete re-design to this site began in February 2011, the aim to create a site that can be updated easily and at regular intervals. Coding updated to HTML5 and CSS3. Over the coming months the basic templates were built and in September 2011 these templates cut up and placed into the Expression Engine 2 CMS system. Working through November and December to transfer old text and images from the old site and include all work done at Pod1, MI Commerce and the Tenerife News. The site went live on xxth January 2012.

Update July 2007

This month involved widening the site up tp 1024 pixels, adding clearfix to reduce code on page loads and adding accesskeys and accessibilty information. Skip links to content and navigation.

Update June 2006

This month sees the Freelance section added to show the work I have completed during the last year since I was made redundant from Workthing when It was sold by The Guardian Media Group. I have also changed text and links on the homepage.

Update January 2005

This site has taken me the last four months to get near completion, from October 2004 to New Years Day 2005. The original was finished in 2000/2001 and was badly in need of a revamp and bringing up to date. I wanted to change everything to CSS table free layout and that took some time to get the right combination of code html layout and CSS structure to be viewable on the widest range of Windows and Mac browsers.


Original Objectives

The aim from the outset was to produce a table free website dedicated to my Printmaking, Desktop publishing and Internet website design work over the last ten years or more. Another priority was to make this site render much the same on a windows platform or an Apple Mac platform. The primary browsers I have crossed checked this site with are:

  • Internet Explorer for Windows and Mac, back to version 5.01.
  • Firefox for both Windows and Mac
  • Safari on the Mac

Table Free & CSS

Inspired by such websites as Eric Meyers CSS Edge and the CSS Zen Garden for cutting edge inspiration, a CSS based framework enables the rapid development and changing of the design globally over all the pages.

I used the added Developer Extensions available for Firefox to check page code validation and also used Tidy to begin to adhere to W3C accessibility guidelines.

What is CSS?

CSS is a formatting language, used to provide more customised web pages and make it easier to make multiple pages use the same style. The acronym stands for Cascading Style Sheets. Sadly not all browsers handle CSS even though it is the best formatting language produced to date. Some very popular browsers do not handle it as well as they should.

(see the section on browser problems) but largely support is good and developers are tending to use it much more often.

Using CSS, you can define colours, backgrounds, borders, margins, alignment, fonts, sizes and loads of other things for almost any part of your web pages.

The word cascading describes many of the features of CSS. Firstly, it means that many stylesheets can be used and will be merged by the browser to provide a computed style for each element. If styles defined for one element oppose each other, the later one will be used, unless another one more specifically refers to the element (for example, if all paragraphs are made red, but a paragraph that is in a <div> is made blue, the blue will override the red for paragraphs in a div, as it more specifically refers to the desired element). Cascading also means that each object inherits from its parent object or parent class. The parents are not the same as the parent objects in JavaScript but use a similar idea. The objects are refered to by their element tag. The highest object in the structure is the body. If any elements do not have their own CSS defined but the body does, then the cascading behaviour means they will inherit from the body. So, if in the body we define the text colour to be white, then any tables will also have white writing in them (NOTE see the section on browser problems).

Each element can be in a class. For example, if we define the ‘p’ tag to have a text colour red then every paragraph will be red. But if we then define a class of paragraph called mybold where the text is bold and we create a paragraph of class mybold, it will have bold text. But remember that style sheets cascade and elements inherit from their parent class, so the text in the paragraph of class my bold will also be red. If we define the class mybold to have blue text then the blue will override the red and the text in the paragraph of class mybold will be blue.

One of the features of CSS is that if the browser does not understand something, it will ignore it and move on to the next attribute (except Netscape 4 when using inline styles - see the section on browser problems). It will not display warnings.

What is CSS Positioning?

“Positioning CSS” is where you use CSS (rather than tables) to position elements on a page. This not only reduces the size of code needed to build a page, but gives you more flexibility.

Advantages of CSS Positioning

  • Easier to make site-wide changes - one css file rather than all the pages.
  • Smaller files and faster download times - less code on the page.
  • Easier to code after the initial learning curve - less code on the page.
  • More control over code - can deliver code in preferred order for screen readers.
  • Files are more accessible to wider variety of mediums. We can build one page, but write separate css files to suit particular mediums like hand-held devices, web tv, printers etc.

Disadvantages of CSS Positioning

  • Non-standard and semi-standard compliant browsers have problems rendering full CSS sites.
  • standards-compliant browsers are still buggy.
  • Dreamweaver 4 and MX do not render positioned CSS or XHTML correctly, tho great improvements can now be seen in the MX 2004 release.

What is validation and WC3?

  • One of the W3C’s core roles is to set standards and makes code recommendations for the overall web community.
  • Developers and browser makers should adhere to these standards and recommendations, but they do not.
  • In the past, browser manufacturers have made up their own tags (e.g. <marquee>) - throwing WC3’s recommendations into disarray.
  • Web developers have often got away with sloppy code practices due to built in tolerance in browsers (e.g. not quoting attributes, not closing table cells etc.)
  • Web developers have also had to resort to deliberately writing invalid code as “hacks” to get around known browser problems.

We currently have a situation where most sites built today are invalid in the purest sense, meaning that they use code that is not recommended by W3C