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.

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.

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.

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.