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

Responsive Design Experiments 2

Screengrab of Responsive 1.1

I’ve been working some more on the responsive template I’m building. I’ve introduced a menu switch with a bit of JQuery to make a drop down menu replace the main horizontal one for viewing in mobile devices. I’ve also added image styles for the sidebar and in content blocks. I’m ready now to make it into a child template of Twenty Eleven, and begin to integrate it with wordpress content and categories. Have a look here. If you want to see the styles change, drag the bottom right corner of your browser around to see the switching between states.

Screengrab of Responsive 1.1

I’ll be installing a few plugins, including one to enable contextual displaying of menus and widgets, and this responsive slider http://codecanyon.net/item/slider-revolution-responsive-wordpress-plugin/2751380. I like the facility to overlay video and text on an image, and I think it will be a good way to present video content.

I’m going to install the new test template in a sub folder of here, and will post the url as soon as it works!

A brief history of dressing up!

We’ve been doing a photo shoot for Mayhem Festival today, the horror and cult film and television festival I co-direct with Steven Sheil and Chris Cooke.

This year’s festival will be our fifth full weekend. I’m going to be working  a lot on the website for this year’s festival this week, and getting the brochure ready for print. The website and full programme will be live next weekend, with the print following soon after. Each year, we have had a new site for the festival, but this year, I will be making the site bigger to support an archive of previous festivals and guests.

Since 2009, we’ve made a different visual theme every year, featuring the three of us as sinister characters. We’ve been zombies, Lovecraftian monster hunters and creatures from fevered dreamscapes. Here are some of our previous incarnations;

Mayhem Flyer 2009

Mayhem 2009: We Only Come Out at Night

Mayhem Flyer 2010

Mayhem 2010: At the Mountains of Madness

Mayhem Flyer 2011

Mayhem 2011: Where The Weird Things Are. I’m the owl in this one.
Gareth ‘Owl’, geddit? Ahem.

And what for this year? Well, that would be telling! But here’s a clue;

Hands of Blue

Two by two, hands of blue…

Responsive Design Experiments 1

I’ve been playing with creating responsive layouts for my template. I want to ensure that my theme is available and adaptable across a range of devices, and to ensure that it is flexible enough to cope with different device resolutions, now and in the future. I like the skeleton framework, which uses media queries to adapt to four sizes – 960px wide (desktop), 768px wide (tablet portrait), 480px wide (phone landscape), and  320px wide (phone portrait). It uses fixed widths, with the pages being delivered to output based on device detection.

I decided to adapt the  template to a percentage based fluid layout, with a maximum 960px width layout. I’m still sticking to the four key layouts, but with percentage spacing between. This ensures that I can define specific ‘looks’ to the four states, but am able to cope with non-standard resolutions. I’ve made a start on the adaptations, defining the columns (skeleton uses a 16 column grid) and gutters as percentages, and typography as ems rather than pixels. The next step is to work into images, making auto resizing images, and looking at how to code a swap, so WordPress loads resolution-sized images, to reduce filesize on mobile devices.

Below are the wireframes for the device states, and you can see it in action here (if you drag the bottom right corner of your browser and manually resize it, you’ll see the layout change). These aren’t the finished layouts, but demonstrate the principle;

Desktop
Desktop/Tablet Landscape
Tablet Portrait
Tablet Portrait
Phone Landscape
Phone Landscape
Phone Portrait
Phone Portrait

Clearly, it is very unpretty at the moment, but it does give me an opportunity to test that fluid resizing is happening, and that my breakpoints are happening where I want them to. I can confidently start to layout pages, and begin to look at responsive layouts for specific post types, such as video pages and image galleries. w00t!

Meet the 2.0s

During my time working at the National Space Centre, I’ve been developing these little characters to accompany pages and events.

The 2.0s (two point ohs) were created by NSC Creative, as the stars of their award winning full-dome film ‘We Are Astronomers’. The 2.0s are mini, orange versions of us, intrepidly scanning the skies for distant galaxies and undiscovered planets, in a never ending search for the origins of the Universe. Their newest adventure sees them embarking on a search for intelligent life, in their forthcoming film ‘We Are Aliens’.

Before I arrived at the National Space Centre, they had developed a 2.0 character called ‘Brock Anchorson’ as part of the interactive Weather Pod exhibit, as a news anchor introducing weather reports presented by visitors. When we redeveloped the site for the National Space Centre, they were keen to use the characters across the site, and so we started to work with the 2.0s to become site guides, asides and to accompany pages.

I’ve really enjoyed making the illustrations. I’ve enjoyed adapting them to different aspects of space culture, history and geek culture. I’ve mixed flat 2D vector graphics with the 3D models of the 2.0s, and textured and shaded them in Photoshop.  One of the concerns the Space Centre had with the initial brief is the worry that the 2.0s are too childish, and would alienate adult visitors. I hope instead that they have a more contemporary illustration feel, and will appeal to adults as well (To be honest, I don’t really get the doodles for kids vs. doodles for grown ups thing!).

Here are some of the 2.0s in various states of fancy dress. You can also find a lot more over on the National Space Centre website.

Iron Man

May the Fourth

All star

Batgirl

Mary Poppins

a thousand (fifteen) tiny fonts

Some experiments with different fonts. I’ve been playing with more delicate fonts, and serif fonts, and the idea of using a single letter for icons and favicons. I really like the second one, but I’m not sure how it will hold up with the spotty background. I also like number five, the curly single ‘t’ works really nicely. I’m going to work into these six, adding spots to see which works best. What I’m trying to find is a font which feels ‘natural’ and can sit well with the sketchy illustration ideas I’m keen to develop, but to not use a strictly comic or hand drawn font.


Here are a selection of some other fonts I tried too. Some of them are effective, but similar to the others. I like the fourth one in this set, but the single letter/icon looks like a crucifix! Let me know what you think!