SchoolHistory.co.uk forumsStudents' History Help ForumHistory Teachers' Discussion ForumSchoolHistory.co.uk homeSchoolHistory.co.uk logo
Home / Help with the site / site redesign
Site redesign

You are 1 of 42 current users

In June 2003, the server where SchoolHistory.co.uk was hosted failed. Normally such failures are fixed within a few minutes, occasionally such outages last for an hour or so. In June 2003, the site was not fully functional for over a week.

The total failure to restore the site convinced me to look for new webhosts. Thankfully we soon found UnitedHosting.co.uk - more details of whom can be found on the server status page.

Every month demand for the site has increased. Yet since August 2003, there has been an enormous increase. Between August to November 2003 I had to pay to increase the available 'bandwidth'. This refers to the data that can be transferred from the site to users' computers. In August it was 40Gig, in September 60Gig, in October 80Gig and in November it was set up for 120Gig. That is an immense increase in data transfer!

In November 114,000 megabytes of data was transferred, 114Gig - thus nearly breaking the increased limit for the month. This helps explain the changes made to the server that the site is hosted on (see the server status pages for more). Clearly there are many popular resources on the site - the excellent downloadable resources provided by all the kind teachers who have been willing to share their materials, the immensely popular interactive games and quizzes, the entertaining and enormously helpful teachers' discussion forum and the history homework help forum. This is hopefully only going to increase with new areas of the site such as the 'interactivities'.

The site has also been mentioned in the media which has obviously had a major impact. The site has been promoted and mentioned repeatedly including in the TES, the Sunday Times, the Guardian, on ITV's GMTV and made site of the day on BBC Radio 2's Steve Wright in the afternoon. All these mentions are excellent - yet all contribute to increased demand.

I was thus encouraged to reflect on the status of SchoolHistory.co.uk and where the site could develop in the coming years. Initially designed and launched in June 2000 the homepage of the site has been redesigned a couple of times but the overall look of the main site pages has remained largely unchanged, as illustrated in the image below:

old design of SchoolHistory.co.uk
The original tabled-based design

I decided to overhaul the design of these basic pages. An additional problem was cross-browser compatibility. Most users of SchoolHistory.co.uk view the site using Internet Explorer. Soon after the site was launched I was forced to make an 'alternative' home page available for those who used alternative browsers - such as Netscape Navigator (then in the notorious version 4.7).

With the new design I wanted all the pages to work as effectively as possible without having to provide alternatives. It soon became obvious that Cascading Style Sheets (CSS) were the answer. I also decided to change the main program that I used to create the site. Since the beginning I had used Microsoft Frontpage. I found this a really good solution as it was immediately accessible but also allowed instant access to html code to allow hand coding where necessary. However, as the site has developed I have wanted to explore more advanced capabilities such as server-side scripting and closer integration with the other tools I used to create the site such as Macromedia Flash and Fireworks. A Macromedia solution seemed the obvious choice.

To design the new site I decided to use the Macromedia Studio MX (which soon become MX2004) suite. This involved close integration between Flash, Fireworks and Dreamweaver. I have been really impressed with the Studio MX 2004 suite, but experienced particularly frustrating errors with the 2004 version of Dreamweaver. It was great while it worked, allowed much more effective use of CSS. However, on my system, it frequently crashed. After many futile attempts, reinstalls and various system changes I still couldn't depend on it. I wasted an enormous amount of time that could have been spent developing SchoolHistory.co.uk. Thus I recently decided that enough was enough. I moved back to the previous version. In March 2004, Macromedia released an update, so I hope this will improve on performance issues. This page is the first I'm updating using it - so it will be the test!

In the three years that the site had been live I had taught myself to make more and more use of Macromedia Flash - gradually developing games, quizzes and exercises that I had found really useful. I wanted to explore how Flash could also be used effectively across the site. One major issue with Macromedia Flash is that it is such a dynamic program that people seem to use it 'for the sake of it', not adding value to the page. I was also determined to make positive use of Flash, but not prevent people who didn't have it installed from using the site.

Using tutorials from Macromedia.com relating to their new design I developed my own version of a menu bar. This was very carefully designed to 'fail safe'. Javascript detects which version of Flash a user has. If Flash 6 or above is installed, the menu bar loads and works quickly. Being only 6kb in size it offers complete navigation across the site. However, if Flash 6 isn't detected a graphic version of the menu appears. This can still be clicked to visit the different areas of the site, but also includes a polite suggestion for the user to upgrade Flash. If a user doesn't have Javascript activated, a non-clickable image is displayed, similarly encouraging the user to upgrade.

New menubar
The new menubar

The other major part of the redesign is the use of CSS. I had used extremely limited versions of CSS to customise the Internet Explorer browser scrollbar and create hover-over hyperlinks. With the new design I was determined to make full use of the potential. I discovered a fantastic book that helped me learn CSS and design the new site - "HTML Utopia: Designing Without Tables Using CSS". This covered both the theory and the practice, allowing me to develop the new design.

The aim was simple - reduce the amount of code in each page by using CSS. This meant every time a different font or style was used CSS would be relied on, removing the need for the cumbersome and now outdated <FONT> html tags. As the redesign has progressed it is clear the difference this has made. The newly designed homepage loads in half the time. As I have converted each page, the amount of HTML code has reduced by nearly 50%. Nearly all the presentation is controlled by CSS. The immediate effect can best be seen on the new homepage. Here the options, that I would previously have used a table to display, appear nearly instantly as they are displayed using CSS positioning without any HTML tables at all!

Homepage image in Firefox 0.8
New quick loading structure on homepage (Firefox 0.8)

I haven't totally dispensed with HTML tables though. I still use them to display the links and downloadable resources. This seems a sensible and practical use of tables - to display data in a structured way. However, unlike the previous design this is about the only <TABLE> command on each page. So, perhaps not quite HTML Utopia - but maybe approaching some sort of HTML promised land?

Thus, the 2003-04 redesign was based on clear concepts - making effective use of CSS and Flash across the site, but without restricting users of older browsers. The CSS used on this site is ideal in this respect. If a user's browser doesn't support it, it fails safe displaying the text on the page in an unformatted way.

Related to this I was also determined to 'validate' the site. Each page that is redesigned is checked against HTML standards to ensure it will display in as many browsers as possible. Small things like ensuring each graphic has an alternative text label and that the HTML is correctly formatted make the difference (but also take a great deal of time!). It isn't cutting-edge validation covering the XML specifications or enough to become Bobby approved (this was a hope, but the need to provide paragraph / table summaries for screen readers was too much). Nevertheless, this really shows an attempt to create a new dynamic SchoolHistory.co.uk that will be as accessible as possible to all users of the Internet:

Internet Explorer 6.0 on Windows PC
Home page in Internet Explorer (PC) running Windows

Netscape 7.0 on Linux PC
Homepage in Netscape 7.0 (PC) running Linux

Opera 7.0 on Mac
Homepage in Opera 7.0 on a Mac

Apple Safari on Mac
Homepage in Safari on a Mac

When the redesign is complete, it will allow me to carry out many complicated site tasks automatically. Dead links are the bane of this site, but automatic link checking will enable me to find and fix links much more effectively. Similarly with the smoother and easier to update pages, new resources, activities and games will be added without the frustration and delays of older versions.

A major problem with the resources pages has been the download counter that I installed. This takes a note each time a resource is downloaded and was designed to display the number of downloads. Unfortunately the site became far too popular, causing the script to crash - unable to update the information quickly enough. Adding the script into each resource had taken long enough - removing it is taking even longer. Again though, this is a long-term measure aiming to allow the continual development of the site. Basically the new design makes the site (hopefully) easier to use both from your perspective and mine.

This isn't the end of the redesign as the process continues - it has taken nearly 5 months to find the time to develop the skills and then put the skills into practice - and it still isn't complete. However, hopefully this page provides some insight into the reasons for the redesign and the approach that has been taken. Please feel free to contact me via the feedback page - I am always delighted to receive suggestions and corrections.

Update January 2005

SchoolHistory.co.uk continues to grow and grow. There are now some 45,000 resources downloaded each week, with over 12,000 individual visitors each day. The update to Macromedia Dreamweaver 2004 MX has fixed all the issues I had been experiencing. I am now in the process of getting the site moved to my own unique dedicated server. I continue to be impressed with UnitedHosting.co.uk and recommend them whenever I can.

Update March 2006

The work continues with the website - doesn't it always? The number of visitors continues to grow (now regularly topping 18,000 individual daily visitors) with huge numbers of downloads. The dedicated server works really well and provides the extra capacity that is required. I now use the latest version of Studio, Studio 8 which has made the Macromedia (now Adobe) programs even more useful. I plan to make a few improvements and adaptations to the home page in the coming months as I want to make more of the really popular site forums. More soon!

Andrew Field, March 2005.

Read more [external links]

Why use CSS? - Macromedia
SitePoint - empowering web developers
Macromedia.com redesign



SchoolHistory.co.uk
Page updated Tuesday, April 11, 2006

Hosted by UnitedHosting.co.uk

Valid HTML 4.01! Valid CSS!