Making Mayhem!

I’ve been away from the blog for a few days, but desperate to write about the work I’ve been doing on the new Mayhem Festival site!

I’ve used the site as a way to test my adaptation of the skeleton theme for responsive devices, which was pretty nerve-wracking as we needed to get the site and the programme out.

It actually turned out really well, and I’ve learned a lot about responsive images and video and about structuring pages for fully responsive design. I spent a lot of time making custom wordpress category layouts and page layouts, and created a switch between a horizontal menu and mobile menu.

Below are some views from the site on desktop, tablet portrait and phone.

Desktop:

Mayhem Site

Mayhem Site

Mayhem Site

Tablet Portrait: In this version, the right hand sidebar moves under the content, allowing the film page to be the full width of the screen. The ads in the sidebar are made to be 50% of the screen width, otherwise the images are massive and blown up beyond their original pixel size.

Mayhem Site

Mayhem Site

Mayhem Site

Phone Portrait: Site is reduced to a single column. The three column block in the desktop and tablet version are now single column and full width, and the horizontal menu is switched to a drop down version. The images are quite big, but are easy to scroll through, as I was trying to avoid the need to zoom the screen.

Mayhem Site

Mayhem Site

Mayhem Site

Let me know what you think, and if you have any problems with the site (I used a jQuery plugin for a bit which crashed IE instantly!).

I’m really pleased with it, and excited about the festival! Please do check out the site, and more importantly come along!

In other news, I’ve been trying out Balsamiq Mockups to quickly layout page designs at work. It uses doodly, sketchy objects to make clear that the layouts are not finished design, just rough working out of key page placements and elements. It’s great to use, and really useful. I love the scribbly feel!

ATTP