Portfolio Website: Bronco

Last month the new Bronco website was launched but the previous version was not even two years old, so why the change?

Why?

There are various reasons why a website is redeveloped, in this case some were personal and some were company focused:

Personal

When designing the previous website I was fairly new to the company and learning my trade, and since that point I have learnt a lot. I felt the time was right to redesign the website as our current website was no longer indicative of my own or the companies’ skills. By redesigning the website we could present a better image of ourselves as a company to prospective clients.

Initially it was my own wish to redesign the website and as I manage the project solely I anticipated no issues in gaining approval for rebuilding the website.

Company

The functionality we added to the previous website over its predecessor was substantial; however it was built with unrealistic expectations of the time we would have available to update the website. Due to this some functionality was never launched, leaving sections of the site static or time consuming to update. In rebuilding the website we could correct these flaws and ensure the site worked both for us as a company and for our users.

Design

Once the project was approved it was important that the design showed off the best of our abilities as a company; however it was necessary to ensure the new design would be recognisable to returning visitors. The redesign of the website required consideration of various factors:

Screen Size

Previously, to keep sites accessible, we would design to an 800×600 screen resolution. However more recently the number of users with the smaller screen size has diminished so where appropriate we have been increasing the size we design for to 1024×768. Due to factors including audience and content I decided that designing for the larger resolution would be the most suitable option.

Blue

The Bronco company colours are predominantly blue; however over the years the tone of blue used has altered slightly. Where the previous website used a dark blue I decided that a lighter blue would provide the website with a softer and more inviting colour scheme. This it ensures the website is recognisable and there are no inconsistencies with our offline branding.

Services

Bronco has always offered a wide range of services, with these falling under one of four section headers. In our previous design these main service areas were colour co-ordinated to provide a distinct identifier for the services that fell under each section heading. For this design I originally intended on dropping the concept in favour of icon identifiers. However it seemed excessive to do away with the colour coding altogether, instead I used the colours in conjunction with the icons in a more subtle manor to complement the existing colour scheme.

Navigation

Drop down menus have always been a useful method of displaying a large navigational structure in a constricted area, but can result in accessibility and usability issues. For this design I reverted back to a tab based navigation to provide easier access to content with the fewest number of clicks.

Layout

Usually when redesigning a website I would have to change the layout of the page to accommodate new content or features. In the case of the Bronco website the content on the home page was undergoing very little change. Therefore it seemed best to retain as much as the original layout as possible, again supporting my objective of keeping the site recognisable for returning visitors.

Fairy Dust

One of the most creative elements of the previous design was something we call the sites ‘Fairy Dust’. This was in fact the large background used to provide the website some visual interest for users with larger monitors. In designing the new website I moved away from the strict borders of the old site to employ a repeating background with the content appearing to float central to the page. This meant using the ‘Fairy Dust’ in the same method was impossible, if retained it must be incorporated in a different way.

As the website is largely textual it was important to provide some graphical imagery within the content of the website. This seemed like the best situation in which to incorporate the ‘Fairy Dust’ and with the addition of other imagery we were able to keep yet another element of the previous design and also refine it.

Development

One of the benefits of using CSS when building a website is the ability to make quick changes to a website without editing large amounts of code. Although this potentially allows you to redesign a website completely without impacting the base HTML code, I tend to find this can be slow and results in dirty code. Therefore in such situations I always prefer to start with a blank canvas. Working in this way allows me to bring in all the latest techniques and coding standards we use from the start ensuring the website conforms to the highest levels of standards and optimisation.

As the old website was written in classic ASP and at a time when I was still learning the language the code was very bloated. By starting from scratch it gave me the opportunity to reuse sections of the code that worked, replace bits that did not and rewrite the rest. I also took the opportunity to edit a number of databases and rewrite a selection of the stored procedures in an effort to optimise the website throughout.

When developing the website it was important that we add extra value for its users, some of this came from the design, some from improved usability, and some from added functionality. The biggest addition to the website would be the client section. This section was built initially as a method of presenting new designs to clients, but provides the opportunity to add further functionality to better support the Bronco/client relationship.

Completion

When it comes to internal projects the time scales involved can be much longer and disjointed than similar work due to client projects taking precedence. This can result in a reduction of quality as the project drags on and work is rushed to ensure speedy completion. Although this was a concern and client work did disrupt the project flow the website’s quality was not affected due to the importance of the project.

Upon completion the website was presented to others within the company and selected external associates to gauge reaction to the website and also suggest any issues with the website. There were a number of opinions and suggestions provided that aided us in refining the website ready for launch. When the site launched we had a far superior website in design, usability and functionality that communicates effectively our abilities and services.

The Future

It is common that upon completion of a company website that it can be left to stagnate with infrequent updates. With features such as the news and portfolio sections we’ve always tried to ensure there is fresh and informing content added frequently to the website. With the addition of improved functionality the static content of the website is also easier to update and integrate into the navigation of the website. Over time we hope that the website will expand to provide even more value to our users, promote our growing services and attract more work so the company can expand and improve further.