Recently I have been tasked with designing, building and maintaining a website for the St John LINKS First Aid society that I am a part of at university. A couple of weeks ago I started the XHTML and CSS code, using my old website as a base to design on. The design of my old website has a container around the bulk of the page, with a “main area” in the centre – where the content for each page goes. For the LINKS website, I chose to design the page to be central and relatively thin compared to my wide 20″ monitors. The main area is 600 px wide, and the content (that differs between pages) goes in here. The whole page is about 866px wide, and this displays fine on 10.1 inch netbook screens, without the user needing to scroll to see things. I work hard to ensure that the sites I build are easily and pleasurable to view on all screen sizes.
Above the main area, there is the horizontal navigation bar. Above that is the top header image of the site. To the left of the main area is a menu of all the pages, which isn’t vitally needed as I have a nav bar, but I prefer to let the user choose which to use – as they will naturally use whichever they are used to. Below the main area, there is a footer that contains the date and a Google +1 button. I have tried to add a Facebook like button, but placing it has proved very problematic. I will also possibly add a “Copyright Aber LINKS” at some point too.
Over the past few weeks, I have worked closely with the President and PR and Media Officer to perfect the site, and ensure that it complies with all the St John procedures – as we don’t want to be putting on pictures of things being done wrong. Also the difference between St John (England) and St John Cymru – Wales has became evident, as I am not aloud to use some of the nice “LINKS” logos that I found – as they are the English ones. Nothing can ever be simple, can it? But I have adjusted and adapted where needed, and nothing but the odd image look has suffered really.
Another progress post coming up..