Home Page
Trinity Court, Stockton Brook  Original artwork by one of our nursery school children! Navigate to Home Page
TC logo

Site structure

Foreword

Throughout this page I've dropped the corporate "we" from the narrative. It's me that has put the site together and it's easier to discuss it in the first person. So who is "me"? I am Mark Shadforth, Trinity Court's Business Manager.

Overview

I put Trinity Court's first website together in 2001 using MS FrontPage 2000. Within a few months I realised the site had serious shortcomings (below) but had neither the expertise nor the time to address them.

In November 2005 I bit the bullet and began a long planned revision. Within days I realised I was building a new site with the same faults! I downed tools and started trawling the internet for information about how to do it better. One excellent resource was Ross Shannon's yourhtmlsource which I feel a moral obligation to acknowledge. He offers a good amount of well written information (and presents it with rather pleasant humour).

Armed with some details about XHTML, CSS and the W3C I pushed on and began to bring a basic structure together.

I am still using FrontPage 2000 but only for the purposes of find/replace, hyperlink updating, previewing and publishing. It does these jobs pretty well but makes a bit of a hash of coding. [I have to be fair though: at the time that FP2K was written the web was not the web of today. I haven't used more recent versions of the program which could well be better].

Top level architecture

We are in the business of Early Years Education & Childcare, not internet trading. "www.trinitycourt.co.uk" does not sell anything and I hope the day we make an internet only "sale" will never come!

People need to visit Trinity Court (in a physical, knock on the door way) and absorb the atmosphere to understand what we do and why. Most importantly, they need to trust us.

Our site is for our parents and their children (both past and present). It provides a little window through which they can see what we are doing and learn more about how we work.

I wanted to achieve a compact site that was simple and reasonably intuitive to navigate. There are only 5 main sections to the site. From every page there is a link to each of these sections:

  • Nursery School (self explanatory)
  • TC Club (our out of school club)
  • About us (our history, our staff, our website)
  • News (a frequently updated area giving information about what we've been up to)
  • Contact (details of how to contact us or find us)

There is a sixth (cop-out) section called "Info" for miscellaneous pages that don't fit the mould! I don't reference that but send you there from time to time.

Page layout

The page is structured with divisions and constrained within an rigid outer "container".  This fits an 800x600 display (and I apologise for the horizontal scrollbar if you have a 640x480 monitor). I decided against a fluid design using floating sidebars. Rightly or wrongly, I don't think the page would look right on a high resolution display with short, wide content and sidebars pushed to the extremes.

The sidebars are home to navigation links, content based links and photos. These are not content rich but help things along by adding some visual levity and aiding navigation.

The top bar is unnecessary, wastes space for content and takes time to download. I rather like the graphics though and can't think of other places to put them!

The previous version of the site used frames. I have kept a pseudo-frame layout for the main content by using a scrolling Div. I  know that this can be a nuisance at times but there are a number of long documents (such as policies and prospectuses) that I would prefer not to break into multiple pages. A content area of unlimited height would leave the navigation links too far away to be useful. The scrolling div keeps these links close at hand and allows the pictures to remain in view as you trudge through the print.

Style-sheets

I'm not entirely sure how Cascading Style Sheets escaped my full attention with the previous "build". They existed and I knew they existed: somehow, the benefits didn't seem to outweigh the apparent complexity of learning to use them (very wrong!).

This site is almost totally dependent on CSS1 (formatting) and CSS2 (positioning) for its layout. All pages link to a single external style-sheet. I have made very little use of inline styles (though I resort to them from time to time).

The pages are broken into more divisions than is necessary and there are a number of styles that appear to do the same thing. This adds a few extra bytes to the pages but leaves the site more "customisable" if required.

All pages link to an external print style-sheet which sends only the main content of the page to print (a little autocratic, I know). The body of the page has the graphics left in since since I reckon there's a chance you'll want those to print. If you do want to print the page as it appears on the screen I'm afraid you'll need to unhook it from tc_print.css - that shouldn't be too tricky to do but I'll let you work out how!

The drawback of relying on CSS is poor support in older browsers. Browser versions 4 and below have patchy, unpredictable or non-existent support for style-sheets. If you have an old browser I apologise for presenting a scrambled or dull looking site. I suppose that you've grown to accept your lot but would still recommend a move to something like Firefox.

Coding

It is all very, very simple. Pages are just coded in nice, clean XHTML. There are no JavaScripts, no DHTML effects, no Flash Graphics. The three main reasons are:

  • they are totally unnecessary
  • they would annoy 56K modem users
  • they would require me to work out how to use them properly!

Almost all pages pass the WC3 validation for Transitional XHTML (external hyperlinks prevent the rest from passing - not that it really matters). This should make the site "future proofed" and (possibly) remove the need for urgent revisions. For my efforts I have the honour of displaying the W3C window sticker on valid pages. Although it's a little tacky I've popped one on the index page of the site. A standards based web seems wholly appropriate and the logo is a statement of support for the W3C's vision (rather than a poor attempt to show off!).

With the use a "handheld" style sheet, a rather fun advantage of writing in XHTML is compatibility with the WAP2 standard for mobile devices (i.e. phones). The site should be viewable in handheld friendly format on "standards compliant platforms". I have no idea how many such platforms are nestled in bags/pockets but do know it presents perfectly (or at least, as well as it's intended to) on my Sony Ericsson D750i.

Conclusion

I will never claim expertise in website design, CSS or XHTML. I'll even admit, in a moment of self deprecation, that as websites go Trinity Court's isn't overwhelmingly impressive. I do, however, think its content paints an accurate picture of us and, in so doing, feel it has done its job.


If you have a lighter view of life and want to meet our team of talented site designers go here: Meet the team. You could, if you prefer, go back to the top and read this page again!


Appendix: shortcomings of the old site (Back to top)

Frames Using frames seemed a really good idea, allowing commonly repeated page elements to be written once and edited easily. Sadly, it led to compatibility problems with some browsers and caused a nightmare of nomenclature (with "container", left, top and body all having similar but subtly different names). Finally, without the knowledge of how to restrict search engine robots, a Google result often included one of the three component frames, rendering the results embarrassingly unhelpful!

Tables I hate tables (though they are still in limited use on this site). They were the only way I knew to put things where I wanted on the page - which would have been okay if things really did end up where I wanted on the page. Some bizarre browser compatibility quirks (which continue to defeat me) led to very different looking pages across the platforms. Divisions still bring their challenges but are, quite simply, quicker, slicker and better.

Style-sheets There was not a style-sheet in sight. Boy, was that a mistake?! Every paragraph, graphic & table cell had its own style definitions in-line. Combined with the horrendously complicated looking style information imported from MS Word, pages ended up being 2.5 times the size they are now - significant for the many who enjoy 56K internet access.

Architecture The previous site grew like a sprawling metropolis and, quite honestly, lacked any form of global architecture. This version is nothing special but has tighter rules about what goes where, speeding the update process. Sadly that doesn't stop the author getting confused from time to time.

Yes, it was a first attempt but the result was a slow site that was a little tricky to navigate. It had problems with consistency across browser platforms and, worst of all, it was a pain to update.

2006-03-17 (Back to top)

About our website

Learn a little about our site designers and the architecture of the site.

Meet the team

Meet Trinity Court's website design team

Page Contents

Foreword

Overview

Architecture

Page Layout

Style-sheets

Coding

Conclusion

Appendix - problems with our previous site

logos and content © Trinity Court (2020)