Background

I met with mediaburst a couple of months ago and we both decided that the whole site didn’t need to be made mobile; instead just certain aspects of it did. We both agreed that people wouldn’t be likely to want to sign up for mediaburst products via a mobile site rather they’d want to read more about mediaburst via their blog posts and case studies.

Mediaburst also felt that not having a mobile site considering their position as a mobile supplier may look a bit odd so they wanted one to cover that gap. They didn’t feel a mobiles site would get a lot of traffic therefore it needed to be kept simple and within budget.

Content

I think it’s a common myth that people on their mobile phones are in a rush to get stuff done and don’t want to read that much. I spend a lot of time on my phone reading websites when I’m utterly bored e.g. when I’m on the bus or waiting for my girlfriend and in those situations I want content to read.

The homepage of the site leads customers in to read the work and blog posts – hopefully they will read enough of these for them to absorb the mediaburst brand and to get in touch about purchasing products/services from them. It also gives existing customers an easier way to stay in touch with mediaburst – perhaps they’re an existing customer who can’t be bothered to read the blog but when they’re on the train home after work they may feel more open to reading mediaburst blog posts.

Refactoring the design for mobile

StiffRowlands did such a great job branding the original site and creating a mobile version was simple – it was just a case of decided what information was paramount and which information could be cut away.

The idea was very much to keep it simple and to copy, where possible, existing iPhone design ideals such as Back buttons and next/previous arrows in page headers. The Guardian’s iPhone app was a major source of inspiration as I feel it does a great job of making lots of content easy to navigate through.

Separate mobile site vs CSS stylesheet

In a lot of cases, it makes sense to simple add a different CSS stylesheet to create a mobile version of a site – but in this case, the mediaburst.co.uk website is quite heavy; it uses lots of WordPress custom fields and lots of different templates for different pages and I felt that a mobile user should get a much more streamlined site – one that was quicker to download and respond because it was doing less work on the server.

Mobile URLs

The site lives at www.mediaburst.co.uk/m/ and further sections of the site have URLs like:

• mediaburst.co.uk/m/work
• mediaburst.co.uk/m/blog
• mediaburst.co.uk/m/blog/blog-post-slug

The /m/ is a handy way for me to a: keep the site structure simple and b: recognise when WordPress should be showing a mobile themed template. I could have opted for an m.mediaburst.co.uk subdomain but that would have complicated matters further and this was to be a small project with a quick turnaround time.

WordPress set-up

The three main pages: Home, Work and Blog are set-up as normal pages in WordPress (just with a mobile-friendly template) so the client can edit the title and introductory copy. The individual work posts and blog posts are complete copies from the full website blog and case study pages- I didn’t want the client to have to rewrite these posts to make them mobile friendly as it would have meant too much work for them There is a switch in the template that works out if the blog post/case study should be showing the mobile template (worked out by whether the /m/ is in the URL).

There is some jiggery-pokery in the functions.php which checks if the user is running a mobile and if they are it redirects them to the mobile site. At first I wanted to simply show the site with the option for mobile users to switch to the mobile version but mediaburst felt it was best to redirect clients automatically in case they missed the mobile site link.

Project duration

From start to finish this project took 4 days. Including all meetings, design work and client approval. A very fast turnaround time thanks in all to the commitment from both parties to keep the site very simple.

Further reading

Mediaburst wrote more about their new mobile website on their blog.

Background

The original design for stina.co.uk featured a very dark palette which I really liked. However, the client (who also happens to be my girlfriend) admitted she hated it and so I starting to think of concepts that reflected her personality more and made it more obvious she was as an interior designer. One Friday night, whilst eating a curry in Manchester city centre curry house we both noticed the restaurant’s feature wall which was covered in a large flock wallpaper and the idea hit – why not just use a large flock wallpaper for the background.

The idea further developed into the making the website’s design capable of supporting different wallpapers styles. Perhaps there would be a wallpaper or a texture that Stina had used in a recent commercial interior that she wanted to feature. The wallpaper would be linked in the footer of the site allowing people to find it and buy it if they wished.

The site

This simple is as simple as they come. It has a homepage, about page, portfolio, contact page, and a blog. The idea is to keep the site simple and to showcase the work whilst simultaneously ensuring it is obvious to visitors who Stina is and what she does.

CSS3, HTML5, etc

With more browsers supporting CSS3 features it felt like the right thing to do to use CSS3 to layer semi-transparent black and white boxes on top of the colourful background using rgba colours. This way the design would work if the background image was any colour (to an extent anyway).

The design also features the usage of @fontface via Google web fonts and a nicely formatted iPhone version too.

As with most of the many ideas I’ve had, FrontEnders got shelved until one day when I had some free time I decided to go for it. I launched it with a simple tweet ‘Introducing, FrontEnders‘ and I hoped that a few of the other web developers I’d met at Northern Digitals might get a giggle from it but, thankfully, a few more people liked it too.

Unfortunately, too many people liked it and my server ground to a halt. The beautiful design I’d created with the huge map of London in the background and the high quality images of the scenes were killing the server, so cue some optimisation.

Optimising the site

I’d originally saved all the images out at 80% quality but this was giving file sizes which were too big and I felt this was one area where people wouldn’t notice a compromise so I resaved those images as 40% quality and took the file sizes down from an average of 30Kb to 12Kb. I did the same with the large background map image too.

After resaving in Photoshop I then used (the Mac OS X software) imageOptim to strip a few more bytes from the images.

But that still wasn’t enough, so I decided to give Amazon S3 a whirl. For those who haven’t heard of Amazon S3, it’s a service which allows you to host your media on Amazon’s servers for a nominal fee. Amazon S3 documentation makes it seem a lot harder than it is and it took me quite to work out how to:

• set-up the DNS records so I could use subdomains like media.front-enders.com
• upload files to Amazon S3′s ‘buckets’
• change permissions to people could view these files on S3
• log-in to Amazon S3′s management console and find my security credentials

Bizarrely, that last point was the hardest part of all of this.

Thoughts behind the design

My main desire for this design was to keep it simple and therefore quick to build and deploy. I wanted to use a splattering of bleeding-edge CSS3 for the sake of it to try and impress some of the potential audience. Font-face was used for the logo purely to save me time designing a custom logo.

If I’m completely honest, a lot of touches of the design involving CSS3 are extremely self-indulgent and are only there because I felt they’d lead to more people retweeting or linking to the site.

CSS3  used on the site

• Background image that stretches to full width/height of viewport (webkit browsers only)
• @font-face for logo
• rgba used to give certain background colours an opacity
• text-shadow (coupled with rgba) to give text slightly more readability
• CSS transformation/transitions to move the episodes images on hover

Quirky touches

There are some aspects of the design that I wouldn’t dream of putting on a live site such as the rude message that any IE6 users get or the 404 error page that features no useful information. I don’t believe in the ‘hardboiled’ approach of giving IE6 users a crap experience but once again for this non-important site I felt I’d be more likely to get kudos from an audience made up of web developers with this approach.

Statistics

At the time of writing, FrontEnders has been visited by around 3,000 different people. It has steadied to getting around 200-500 people on the day of an update. The site also jumped to a PageRank of 5 in 2 months.

Lessons learnt

Twitter is a powerful marketing tool, and getting the attention of the right people on twitter (at the right time) can lead to huge swathes of traffic with little or no other forms of promotion. It proves that having the right idea in the right hands can produce great results.

Initial briefing/project scoping

My initial job was to explain to the client, what could be achieved and how long it would take. I managed to persuade the client that WordPress was the best option for what was a relatively simple website that needed to be easily updated.

Wireframing

I then produced interactive wireframes of how I felt the site should work with the aim of guiding the graphic designer through his process and ensure important parts of the site were included.

HTML/CSS build and WordPress integration

The templates were relatively straightforward as was the WordPress integration with some small sections of customisation to enable:

• A customised contact form
• Pages with slightly different styles: An example case study and the News headlines

Training

The final piece of the puzzle was to train the client in the use of WordPress and CampaignMonitor. I choose those solutions because of their ease of use and teaching them proved remarkably easy.

Summary

As a whole, I think this new website works very well. The content is well laid out and doesn’t feel at all cramped. The navigation is simple and uncomplicated which is another real positive.

Finally, a big thanks goes out to Andrew Kirwin who helped me get this project finished on time when the deadline suddenly became much tighter.

The concept was simple – to create a community around the venue and build upon the idea that gigs shouldn’t end as soon as the final member of the crowd leaves the venue. Rather, those attending the gig should be able to share their experiences through comments, photographs and videos allowing the gig to live on through a permanent online presence.

Cahoona created the design, overall concept, and managed the project and client whilst I delivered the functionality which included amongst other things:

• Full bespoke CMS
• API integration with Last.fm, CampaignMonitor, Flickr, YouTube and Vimeo
• Social media/user area with friends, comments and direct messages
• Events calendar
• Ability for staff and users to share images, videos and documents for events
• Simple online store including ticket sales (for educational courses) and charitable donations
• Comprehensive tagging and site search
• News engine
• RSS feeds for content

Best bits

This site is actually very large and if I were to cover every detail of it – it would take too long. However, there are some great bits within the system that I am particularly proud of:

Simple intuitive AJAX tag selection

Both the front and backend of the site feature really easy ways to add tags or in the case of the above screengrab – musical genres.

Easy to use, yet powerful search

Search for a band/artists and you’ll get back all the gigs they’ve played or are playing at the venue — and any content in which they feature on the site. Search results are clearly defined as to what type of content they are so users can quickly see what they’re getting if they click through.

Simple content population

The Band on the Wall team needed to be able to easily add content. With that in mind the popular Tiny MCE software was modified to ensure it was as easy as possible to add images and links from the site to the content whilst maintaining the semantics and accessibility of the HTML code and preserving the design.

Simple solutions to large dataset issues

Band on the Wall’s new site currently contains over 2000 events and 1500 artists each occupying a row in the database. This presented issues when the staff wanted to set up a new gig. They couldn’t simply select the relevant artist from a 1500 strong drop down list. Step forward AJAX to the rescue:

Speed

All database calls on the site are cached locally after their first call which speeds up the site by as much as 260% on some sections. In development, PHP page rendering speeds were very carefully monitored to ensure minimal load on the database and with a view in mind of visitors having a good experience — and not a slow one. Undoubtedly there will be times when — despite the venue’s modest capacity — the server could get significant interest if a very strong act is booked. The website has been built with this in mind at every stage and it should cope.

Project management

This was a fairly sizeable project, I was initially brought in to consult and quote for the project in November 2008 with the project going live in July 2009. All in all, there was around four months of development work spread over that time.

This project also saw me outsource a sizeable portion of work for the first time in my career. As the project deadline loomed Tim Fletcher helped me out with frontend work. Frontend development is my core skill and outsourcing parts of this work was a truly weird experience for me. Thankfully it worked out well and being able to concentrate on the backend really sped this project along.

Summary

Less than a month after launch, it’s too early to say how successful the website is. It’s easy to see that it’s a beautifully designed site and initial user feedback has been very positive – but as with every website the measure of success will be seen months down the line when/if visitors numbers can be sustained.

Working on this project was hard and at times challenging due to its sheer size but it was also pleasurable. I feel the design is fantastic and the overall concept produced by Cahoona is very exciting. The way Band on the Wall as an organisation have embraced a website of this nature says a lot about their progressive view of music — and deep understanding of how gigs must work — in this digital age.

Personally, I can’t wait to see how this site evolves as more content is added by staff and users.

This app (still in development) will help small time freelancers manage their finances so much more effectively.

Feature set

Financial management software is a crowded market so I must be worried that this product won’t sell. Well I’m not worried – this app has several key selling features that put it above the competition:

• users can email invoices/quotes
• clients of that user can login and view new and previous quotes/invoices
• users can manage their outgoings/expenses and easily see their financial state

Lessons learnt

Producing this web app myself has taken discipline and has taken my PHP code to a new level. Everything has been written with excellence in mind a – total quality approach to coding if you will :)

This is a very exciting time for me, I fully expect this venture to be full of surprises, twists and turns. It’s not my only idea and I fully believe there is a huge market for the type of smart yet simple software that 37signals have pioneered.

MVC

MVC stands for Model-View-Controller and that’s how Bean Counter is programmed – well that’s how I’ve tried my best to code it! It’s allowed me to cut down on the excessive files and folders and structure the code in such a way that will be easy to extend in the future.

Comments, comments and more comments

I think code can be beautiful and creating code that was structured and well commented was a major goal for Bean Counter – although I plan to host Bean Counter accounts myself (or do I? – hmmm still haven’t decided, I still want anyone who gets their hands on the code-base to be able to understand and extend it.

My own mini-framework

All my projects now run on my own mini-framework, and Bean Counter is no different. My framework is a simple set of PHP classes which allows me to get projects moving quickly without worrying about copying and pasting myself into a state of boredom.

I jumped at the chance to help Vicky with her new venture and the results have been very positive. I was very hands on with this project and I performed many duties including:

• web designer
• copywriter
• brand consultant
• SEO

Homepage

The homepage has to convey a lot of information and do so without looking cramped. It also has to appeal to 2 completely different audiences the teachers looking for a placement and families looking for teachers. It was interesting coming up with a design and content that would appeal to both parties.

Families page

This page is meant to entice parents and families to want to join the scheme by spelling out the benefits, clearly and concisely which it does.

Families questionnaire

To join the scheme, prospective parents must fill in this questionnaire which ius emailed to Vicky. The form is simple to ill-in and easy to use. Any mistakes made are clearly highlighted to the user in plain English.

Contact page

This page features the contact details (with correct microformatting) and a PHP powered contact form with built in auto-responder.

FAQ page

A page packed with little unobtrusive JavaScript wonders – rather than show all the answers to common questions at once, the user can choose which to view in a very intuitive manner. People without JavaScript will have no problems viewing this page.

Meeting the needs of the content

Physical appearances carry a lot of weight, but jaw dropping interfaces can often conceal a clumsy, ill-thought out user interface. My main concern was taking Redeye’s content and displaying it in a such a way that their users could get to it quickly and simply.

Redeye had lots of pieces of content – all of which wanted to be as important as the next. It was crucial to determine which sections actually were most important.

Images are everything

Despite being a photographic network there didn’t the site needed to focus more on information rather than showcasing photographic talent. The images used in these designs were intended to be easily inter-changed with other images to ensure the site could maintain a fresh look – without the need to constantly redesign the site.

Content managed

The Content Management System (CMS), is the designer’s arch nemesis, she takes your beautifully crafted design with pixel perfect copy and allows any number of images/text to be placed into the space. Therefore, each design idea takes into account that the site would be running on a Content Management System and would have to be easy to integrate for the development team and easy to update for the Redeye team without easily breaking the design.

Picking favourites

This portfolio page features 5 very similar designs – so, which is my favourite? Well, I have a really soft spot for those light grey vertical lines on design number 5 (the client didn’t share my enthusiasm) but, overall, I think the first design works best.

Decisions, Decisions

In many ways, Redeye were a very challenging client. Different stakeholders had different ambitions for the website and so the design went through many different iterations in order to try and impress as many members of the team as possible.

Sadly, after much discussion, Redeye opted not to use any of the designs produced.

This project had a few important characteristics:

• a short deadline: 10 days
• quite a few different designs per page
• a quite complex design

A CSS template takes 2-3 days depending on its complexity – sometimes up to 5 days if it is really complex. This time includes slicing up the images in Photoshop/Illustrator, writing the HTML, writing the CSS and testing the results in multiple different web browsers e.g. Internet Explorer 6 on Windows XP, Internet Explorer 7 on Vista/XP, Safari on mac and many more before fixing any discrepancies.

I usually complete a CSS/HTML template within a week or two after being given a design. This design had quite few different layouts for different pages all of them with their own complexities so this design took a little longer – all in all it took me 5-6 days to complete.

Code examples

The only way to examine the quality of a website’s HTML/CSS is to visit that site and select ‘View Source’. To see the code for Leave it out here is a list of links:

• Homepage
• Menu
• Menu (with map)
• News
• Article
• Articles
• Contact page
• Links
• Share page

The CSS can be located here:

• Global stylesheet
• Example individual page stylesheet

More details

The website design was done by Norwegian agency, Polyesterland.

It was my first public facing project for JJB Sports and it is a project I am still very proud of. It was a website powered by a bespoke content management system designed and built exclusively by me.

I used my initiative to create this site, nobody explicitly requested it, but I recognised the existing recruitment site was not performing well in any aspect. So when I had spare time during my working hours, I spent it making this site – and it certainly paid off.

Administrators needed to be able to add/edit jobs quickly and easily and I provided a solution for them that allowed them to do just that. This website/CMS made their lives easier, whilst simultaneously making it easier for members of the public to see what jobs JJB Sports had on offer.

CMS features

The CMS consisted of a login area, control panel and the option to add/edit/delete jobs and frequently asked questions to the website. The CMS had several cool features:

• A help area which explains how to perform key tasks in the system.
• A simple text editor that turns plain text into HTML so administrators need never learn HTML.
• RSS feeds which are automatically created with the content created� by the administrators.

Website features

At the time, this website and CMS, represented where I wanted JJB’s future web redesigns to progress to. It was a forward-thinking website that put RSS at the forefront in a bid to educate people about how best to use a frequently updated website.

The site featured:

• Valid XHTML 1.0 Strict web-pages. It must be noted that every attempt has been made to make it difficult to add non-valid mark-up.
• RSS 2.0 feed converted to XHTML 1.0 Strict with XSL.
• CSS Print style-sheet.
• CSS Handheld style-sheet for mobile phone users.
• Easy to understand structure
• Fully functionally Content Management System for administrative purposes, complete with unobstrusive JavaScript that aids usability and limits errors.
• Basic search engine.
• Flexible vertical design – meaning the site works if people resize the text in their browser or if a section of text added by an administrator is unusually large, the design will not break.

Accessibility

Accessibility was at the forefront of my mind when designing this site and I hoped any disabled users found it much easier to use than the majority of websites made by large companies at the time. Turnign off the CSS revealed a solid HTML structure with skip linsk that meant gettign around the site was easy.

Browsers

This design worked in the following browsers:

• Internet Explorer for Windows versions 5, 5.5, and 6
• Internet Explorer for Mac version 5
• Mozilla Firefox for Windows and Mac versions 1.0 and 1.5
• Safari for Mac versions 1.3 and 2.0
• Opera for Windows and Mac version 8.0

Note: JJB’s recruitment website was re-branded and relaunched in late 2007. However, the CMS I designed was still in use in 2008.