I really like what Chessbrook are doing, and they were perfect clients to work with.  At the end of the project, I did usability testing with the students to get their feedback on the website.

The navigation was a bit of a challenge.  The selected state was quite fiddly to develop because I wanted the text to resize without dropping out of the green strip. Here’s what I did…

Above is the text at normal size, and below is the text 5x bigger than normal.

I extended the white background at the top of the image so that it would cover the green strip when the text is resized and not look too out of place.  The selected state is actually two images.

This is what the background image for the right half of the link looks like.  It’s long to allow for long links.  When the link is small, it looks shorter.

While I was working on the site, Nat showed me a really good way to make the site more maintainable and use less code.  The site is made up of strips of content – the header, main content, sponsors and footer, and these all have very similar properties (things like they all have a width of 80% and the same amount of margins).  Rather than repeating the CSS for each class, we added a class within each strip called “section”.  So if we needed to make a change to the layout and instead make the width 70%, we would only need to change this in one place.

While interning at Clearleft, I helped work on the front end code for the Mozilla Addons site, pair programming with Natalie Downe.

This was the first project I worked on while interning at Clearleft. I pair programmed with Natalie Downe on the HTML and CSS.

The Portland Arms pub website was commisioned by the landlady to provide information to locals about events at the pub, as well as an up-to-date seasonal menu. The pub dog, Buster, updates his online blog (http://www.theportlandarmspub.co.uk/blog/bustersblog.html) with his perspective of life at the Portland Arms, with photos of the people, and other dogs, he meets.

The landlady takes photos using her iPhone of the food served in the kitchen and uploads them to the website via Flickr. She also takes photos at special events, and these are automatically posted to a slideshow on the site (http://www.theportlandarmspub.co.uk/gallery.php). Many locals didn’t know where the pub was, so I added a Google map which shows users where the pub is, and they can plan their route to the pub using this feature.

So what’s this all about?

It’s not easy for young people starting out in the web design/development industry.  There seems to be the assumption that teenage-webbie-wannabies are only interested in making a quick buck.  Many don’t attend conferences or meetups, and there are few courses that use up-to-date material.

There are so many young people aspiring to work in the industry who have grown up with the Internet, and are pro-active in using it.  Many have learnt HTML through customising their MySpace profiles.  In a few years, there will be a huge increase in the number of people in my generation publishing content, and not knowing about things like accessibility and web standards.  This could slow the pace at which the web is progressing.

When I became a part of the Boagworld production team, I was contacted by a number of people my age who were just starting out in the industry and asked for careers advice and tips on starting out.  Many more have come out of the woodwork since. I got in contact with a few of these people to ask them if they thought it would be a good idea to build a website aimed at young people starting out in the industry.  We decided to work together to build ScrunchUp to give advice on best practices, accessibility and web standards.

ScrunchUp will be a magazine-style website with content aimed at young people.  We’re working hard to bring it to you as soon as possible, although many of us are starting courses this month so you’ll have to bear with us!

So a big, big thank you to everyone who has made this possible including Jamie, Teifion, Ollie, James, Alistair and Jane.

The British Band Instrument Company website was launched as an online brochure of instruments being sold to across the world, specifically in the Middle East. I added a translation feature, and made all the text editable so it could be translated into different languages. After some research, I placed the navigation on the right rather than the left because people in the Middle East read from right to left. I also added images onto the buttons (using the “sliding doors” technique) so that the user could visually distinguish the instruments. I used the sliding doors technique to speed up load time and ensured the site was usable on IE6 at a screen resolution of 800×600, as I anticipated that many users in this part of the world would not have fast Internet speeds or high-end technology.

Room for Improvement

Some of the aspects of the website that the Headmistress, Mrs Murrell, was eager to improve was the site’s accessibility (to comply with the disability act), usability (to make it intuitive for non-Internet-savvy users) and also the image that the site represented of the school. (At the end of the project, I produced an accessibility report and manual for the website editors).

Design

I presented the school governors with 20 different designs to choose from. Some might say this was perhaps too many, but the governors were not sure exactly how they wanted the website to look, so a range of rough ideas was, in this case, more ideal than a few.

Construction

In December, I started making the website on the CMS (content management system) Drupal.

The features include:

1. a 360 degree panoramic view of the entrance (with hopefully more to follow)
2. an interactive map of the building
3. the photo in the header is randomly selected from a library of photos, showing different aspects of the school
4. there is a search box to help the user find the content they need