Tribal& Trance Festival – a clean modern website design

It’s a new year and a new look. My brief for this was a modern & clean website for
Tribal & Trance Festival

screenshot

I moved the site over to wordPress so its not just a reskin – the previous site was joomla –
And so far the client seems really happy getting around wordPress. We wanted the site to be easy to navigate and as simple as possible.

Tools used :

Photoshop,Dreamweaver, wordpress, html ,css, php.

Process:

We used a standard theme (twenty thirteen) as a good solid base. and customize it  by making a child theme, this means when the original theme is updated it wont override our theme. Having set that up we started to customize. My aim was for it to be done with a minimum fuss and with future maintenance in mind.

plugins
Pluggins in wordpress are great, however you want to have a minimum amount of plugins on any site for several reasons. Firstly updates can kill you, yes that’s right inconspicuous update may cause a clash with other plugins causing it to fail or sometimes break other things. So I’m try and keep my plugin habit to a minimum.

Bare basics
Disable comments – I dont know what id do without this plugin , its simple but it does a might job. Often clients dont want comments on their sites, Even if they have time to moderate the comments most of them are spam anyhow, and really its a chore. To avoid security issues and spam violations this is a gem.

Some sort of backup !
Rule 1 of multimedia always have a backup. You can restore a site from a backup, make clones and sleep somewhat soundly. Knowing that if the server fails, if the site gets hacked if you need ot move it in a hurry  you have a plan.

Special functionality
I’m always trying new things  I looked around at a few “event” plugins and picked one , although I could have built a directory of events with a pay pal link from scratch its sometimes faster and cheaper to grab a plugin and style it . the one I picked had extra features like  csv export  (exporting all the bookings to an exel file) , Ical integration and google maps.  Its not to bad if your running an event based site so ill give them a plug  its called event organizer pro.

Budget responsiveness
Whats responsiveness? its how your site looks on a mobile and a tablet eg  smaller screens.   Twenty Thirteen is fairly responsive..but it did require a few tweeks. As I was using  the main header section for the logo and for some reason.. (dont ask me why) The header doesn’t scale the image !

Ok well there’s a few ways to tackle that.. you can write your own function , hack the header.php file and general spend a great deal of time messing about and testing  or…
you can do it with CSS (cascading style sheets).

Here’s my fix for what its worth – load smaller headers  in the media query.  It sort works ,I don’ttf mobilet consider it beautiful. I made two smaller versions  of the header.

A tiny but mighty one at 400 pixels for mobiles  and a slightly larger one for the tablet at 600 pixels. For me that’s great, load time will be faster, the logo is scaled correctly – a little under whats available just to be safe . ttf_header_tablet

 

 

 

Then you have to load them in the CSS (cascading style sheet)  here’s an example:

@media (max-width: 480px  or what ever your target) {

     .site-header {
    background: url(images/load a much smaller header! );
    background-repeat:no-repeat ; (unless you want an ugly tile..)
    max-width: however wide the image is;
    max-height: the image hight;
    background-size: 400px Auto !important;
            }
}
d