a n d r e w – i r v i n e . c o . u k

Need help deciding what to cook in Café World? This site can help you choose what to put on your stove, to have it ready and waiting for when you're next back on-line playing! You can even order by whatever your current priorities might be; getting as many café points, or café coins, as you can.

This is a website that I made in my own time, however I have stopped development on it due to my drop in interest in the game. Details of all the features of this site can be found here.

This is my very first Wordpress website, launched in May 2011, and built in my final month with ESP Projects. The website was originally going to be built with I-CMS, Digital Umbrella's in-house content management system, but a decision was made to make the switch to an open source system instead, with the consent of the client. The reason for this was firstly to provide the client with more options for the website, and to allow the staff at ESP Projects (as well as myself) to gain proper first-hand experience of this publishing platform. Due to this change, we had also taken the decision to include some of the features inherit to the I-CMS system, which were promised to the client in the original proposal.

The original proposal included an editable panel. To meet this requirement, I designed this site's theme to contain not one but five widgitised areas: Two in the header, one in the strapline bar, one under the menu, and another in the right-hand side column. I made many of the areas outside of the main content editable in order to give the client more options in changing the additional information stored there (e.g. add more unique buttons or change the text), instead of being restricted to just one area.

The website also includes a number of plugins downloaded from the wordpress website, however I modified them specifically for this website in order to make them easier to use. I rewrote the slideshow plugin, used on the right-hand side of the page, to show only images listed under a specific category, as opposed to showing all uploaded images (which the plugin originally intended to do). This was done to provide the client with a slideshow that was promised in the original proposal, but it provided more as it let the client pick and choose the images whenever they wanted.

When bringing the content over from the client's original website, it had come to my attention that they had a vast archive of all their past newsletters dating as far back as 1991. It occurred to me that they will continue to archive their newsletters on the site, so I downloaded a plugin that would list hyperlinks onto any page using a shortcode. I re-wrote it so that it would instead list documents filed under a specific category. This would make adding newsletters to the archive much easier for the client.

Other I-CMS features included in this site are the font resizer (located in the top-right corner of the site), an inline editor (to allow the client to edit pages without needing to go into the dashboard), easy access to a dynamic sitemap, and a simple photo gallery.

In essence, the Partners in Practice website is one very large directory of voluntary sector charities and groups that contribute to improving health and social care in and around East Cheshire. The aim of CVS Cheshire East was to have all the details of these charities and groups all together under the "Partners in Practice" name. This involved creating a detailed printed document and also a public-facing website, both containing the same information.

The design is largely based on the design of the printed booklet. I felt by making the two resources resemble each other it would help to maintain the same image and would be recognisable to those who might be familiar with the printed version. Thankfully, by doing this, it meant that I could spend less time on design and more time on the development of the directory.

There were lots of changes made to the directory on this website, cosmetically and functionally. Logos and colour coded dots (representing the different categories) are shown on results pages and, when viewing an entry in more detail, the information is split into two sections which can be expanded/collapsed as required by the user (because there's so much information). Categories could be altered in such a way that even the text and background colours could be specified by the client, in case new categories were to be made in the future.

While I had been working at Digital Umbrella, I had the opportunity to redesign their website twice in order to keep up with the times. The first design was nice but was really one of my first projects back in 2008. Nearing the end of 2010, I felt a revamp was necessary.

This design, I feel, really modernises the website with the latest of design techniques; light gradients to show depth, plenty of whitespace on the sides to keep clutter to a minimum, and a large (and can't possibly be missed) header with rotating carousel. The carousel used Flash and AS3, and took it's content from an XML file that is generated dynamically from the website's portfolio module and database. Sites can be added/removed from the carousel in the portfolio at any time. The images are edited dynamically on the server as well, as required, in order to keep the aspect ratio of the images.

Compared to other I-CMS websites I've made with horizontal menus, I modified the menu slightly on this one in order to better allow for more sections to be added while still maintaining the correct measurements for the website. There's also a members-only part of the site where I included a collection of all the stock images that Digital Umbrella had bought. If we ever needed a stock image, we could save ourselves some time and money by checking our own collection before stepping out into the world wide web for any more.

I was approached to produce a website for a project that specialised in providing training in suicide awareness. They wanted a corporate-yet-approachable look to the website, which mirrored their marketing material, and they also wanted people to be able to leave feedback on the website after they had taken part in a training session.

Thanks to their marketing material, I was able to come up with a suitable design for them. One of the requirements was that they wanted everything to be "contained", hence the border around the edges. The background is a green beacon that continues from one corner of the page to the other, based on their existing logo.

The feedback aspect of the website had thrown me off at first. They wanted to be able to send each person who took part in the training a unique URL to the training form that would determine which training course they were on and who to send it to (because there are multiple different trainers). To answer this, I added an option that would dynamically generate the link they required, so all they had to do was specify the date of the training and the email address of the trainer, and then copy and paste the generated URL into their emails to participants.

Libraries & Information East Midlands (aka LIEM) have been a long-term client of Digital Umbrella. We had made a website for them back in 2008 with a temporary layout in order to get them an internet presence. They planned to have the website redesigned at some point in the future and, 3 years later in April 2011, that honour fell to me.

They wanted a website that was more "modern" to what they had previously. I produced a series of designs using similar techniques used for my redesigns for both the Digital Umbrella and High Peak CVS websites, as I considered them to have a "modern" design and appeal. When they were presented to the client, they didn't agree with some of the ideas I used. In tone with the "customer is always right" saying, I took the designs back to the drawing board and produced a new series of designs. After some further shaving and colour alterations, the current design was chosen.

This design is slightly different from most websites built on the I-CMS platform. The menu was designed so that the submenus, when the user hovers their mouse over the buttons, appear to form part of the button itself. This technique was used previously on the Derbyshire Learning & Development Consortium website (also in this portfolio).

Performing a redesign of the website allowed me to add some extra functionality that was previously missing. A contrast option was added to make reading the content easier for anyone with poor eyesight or with dyslexia.

The Cumbria Equality Resource Centre needed a new website to encompass all of the different charities that are involved in their cause. They wanted a website that could support four or more "mini" sites that could be updated by the various different people who are involved. They approached Digital Umbrella because they liked what I did with the InvolvingLincs website, as that was exactly what they were looking for.

After producing a number of designs, Equality Cumbria chose the "torn paper" design, which they said - in conjunction with the different colour schemes - helped define the different aspects of the website. Piecing together the design for the site proved more difficult than I anticipated, as it required clean gradient transparencies and a number of nested DIV elements. If CSS3 was more mainstream and cross-browser compatible, using that would've been a whole lot easier.

A unique feature of this site is the existence of an Incident Report Form. It's largely based on their existing report form, except some javascript is used in order to ensure that the bare minimum of information is emailed to the Resource Centre. For ease of use, the report form is available on every page and is easily noticeable.

One more unique feature is the events feed. To the unsuspecting eye, it looks like a standard list of events. In fact, the source of these events is an external website running Drupal that generates an RSS feed of latest events. Again, this doesn't sound all that remarkable, except that much of the content of the events are pasted into the site using external editors such as Microsoft Word and Publisher. As a result, un-supported characters pass on to the RSS feed and these would normally break external sites if they were ever accessed. The Equality Cumbria website, however, filters out any and all un-supported characters from the feed before processing it. This ensures that the website does not fall down because another source website has not conformed to W3C standards.

This website is one of the largest, most expensive I've ever done. The client needed a website that had mini-websites in it and also had a custom questionnaire. Neither of these existed in Digital Umbrella's in-house CMS system, so they needed to be made from scratch. It was from here where I really started to spread out my programming wings.

I took a couple of different approaches to this website. The first approach, and which out of the two I believe would've benefitted the client the most, was to create a custom script that would allow the client to generate a new mini-site with a list of template pages whenever they wanted to. The second approach was to alter the website in such a way so that we, the developers, could add a new mini-site when we wanted to. This latter option was the cheaper of the two, and this is what the client went for.

The questionnaire on this site was nicknamed the "Toolkit", as this was what it's primary purpose was: to be a self-assessment process for an organisation to determine if it passed the necessary requirements to get further tenders in the voluntary sector. This was the very first module that I had made for Digital Umbrella's in-house CMS system, and was an extremely daunting task to say the least, as there were lots and lots of different variables to take into account (too many to list here) in order for it to work smoothly. After some time, I managed to build it from the ground up and produced ASP/VBScript code and an appropriate Microsoft Access SQL database that could accommodate the client's needs. It took me a few months to finish.

To this day, this is one of my proudest achievements. It was only used once more on another website for the High Peak CVS, which is a shame considering the effort put into it's production.

This SportsAid/b-active website was to be slightly different to the other SportsAid websites, in that it was to have the option to create unique pages for different young and upcoming athletes, and to allow the athletes themselves to produce their own blog and post about their achievements.

This was done by configuring the blog module I had produced to automatically post a user's entries under a specific category based on their username. The username was mostly the user's full name, so the category would be named after the athlete themselves, which made for an easier structure to be made and a quicker website to be produced. Only Administrators and SuperAdministrators could override this.

Because of the unique properties of the blog, the news feed on the left of the site had to be altered in order to also include entries from the blog. This proved troublesome at first, as I ended up getting every entry adding themselves to the feed. After a short while, this was resolved and the feed just appeared "as is" and didn't deter anyone from the fact that the feed was populated from two difference sources.

Crane Gregory had a website built and hosted for them by BlueInk, but they wanted to be able to change the content on the site themselves. It was at this point they approached Digital Umbrella to have a content management system added to the website. They wanted to keep the current layout and style of the site but be able to log into it and update the pages.

I built this site using Digital Umbrella's I-CMS system, and used a variety of tools, including the Adobe Master Suite and Firefox Plugins, in order to recreate the website and make it pixel perfect to the original. Even to the most trained eye, there was visually no difference between this site and it's original.

I also added options for the client to alter different aspects of the website outside the main content. The header image can be replaced with another image, or even a Shockwave FLash (SWF) file. Other editable parts included the large blue speech bubble in the top right, the navigation bubbles on the bottom of the page, and the background image.

The Regional Homelessness Forum website was produced at a time where I was experimenting with different approaches to web design and development, and luckily for me it worked out for the best. When this site was made, I was at the turning point in my design technique where I was starting to produce websites that weren't all "straight lines". I wanted to produce something more graphical and dynamic, and which also confirmed more with W3C XHTML standards.

This website was the first of this line of sites. With regards to the design, the client's only specification was that the background had to be "a canvas-like colour". I had provided the option to make it look more like a canvas but they went for this colour instead. The rest of the design is loosely based on their "door" logo, which they seemed to like. The difficult part of this design was to make the borders down the left and right join up with the header and footer - and with itself, as it repeated itself further down the page - seamlessly without leaving gaps or displaying unexpected elements.

Another different aspect to this website was the inclusion of a directory. Adding a directory wasn't anything new to us at this point, but the presentation of the directory was to be slightly different. The client wanted visitors to search before getting anything back from the site, and the layout of the directory elements needed to be changed. After I'd made the customisations to this site, I rather liked them, so I pushed for them to be included in future copies of directories based on Digital Umbrella's in-house CMS system.

The website used to be one made by another developer at Digital Umbrella. When the client wanted to make a change to how the website looked and behaved, the job fell to me to make them a new website. The design of the site was produced by Victoria Creative, but anything further was my own work.

What made this site very different from the original was the inclusion of the Resource Bank; a members only area where documents and information could be downloaded. I extended on the existing registration system in order to achieve what the client wanted; to allow members to register to the website and be approved by select administrators.

The menu structure of the website is quite different too. The main menu resides along the top of the page, but as you go into the site the sub-menu appears down the left hand side. This proved tricky for me at the time, as previously the main and sub menus were always generated together, not separately.

A Flash map on the home page was the icing on the cake, allowing visitors to go to other websites that were affiliated with the East Midlands Learning & Skills Partnership.

In my first few months at Digital Umbrella, before I had clients of my own, I helped with easing the workload of my fellow developers. One of the websites was for the Derbyshire Learning & Development Consortium. When I took over the project, it was still in it's very early stages. Only a few website designs were produced. After meetings with the client and making alterations, one of my final designs was chosen based on the originals.

Compared to all but one I-CMS website, what made the style of this website rather unique was the menu. I had made alterations to the original menu module in order to make the main menu and sub-menus appear more integrated to each other. Continuing the client's arrow logo design, the menu featured blue arrows all the way down. When hovered over with the mouse, further arrows using the same colour scheme would protrude from the side and shape perfectly to the menu.

This website for the South Western Regional Library Service is one of the first full websites that I produced while at Digital Umbrella. The straight line design was inspired by another regional libraries website that Digital Umbrella had produced before.

The SWRLs website is one of the few that I like that have come from my early days at Digital Umbrella. A lot of the options on this website were new to me at the time, but not quite so much now, such as the News and Developments feed, and the rotating image in the corner.

Almost two years later, the client wished to have extra functionality to the website, including RSS feeds. When it transpired that it would've been cheaper to update the site to our newest version of I-CMS instead of making only the additions they wanted, the client opted for a full update. This gave me an opportunity to remake this website with it's same layout but make the code a lot tidier. Instead of using tables for the layout like before, I changed it all to use more strict XHTML and CSS rules.

I look at this site and think of it as a good example of what is achievable without any real customisation whatsoever. It's not entirely breathtaking, however it does the job very well.