Going responsive

Recently a client of mine, who I designed a website back when responsive design was a low priority, asked if this could now be rectified.

The Scooter Paint Shop website on a mobile, before adding responsive styles.

The Scooter Paint Shop website on a mobile, before adding responsive styles.

My client’s potential customer base, like that of most people now, was seeing a steady increase in mobile browsing, so having a responsive site was becoming increasingly important.

The site as it stood, used a wide layout, with an image poking out of the main content area into a white background. On a small screen, such as on a mobile, this made for poor design, and difficult for users to navigate without zooming in and having to push the screen around in all directions.

The Scooter Paint Shop website after adding new responsive style rules.

The Scooter Paint Shop website after adding new responsive style rules.

So I went back into the style sheet for the website, and started making some changes. Firstly changing the main content width from a set “width” style to “max-width”, which meant when the screen width was below this figure, the width would fit automatically to the screen size. But this is also when you can see all the potential problems, such as elements being cut-off, sitting on top of one another, ugly alignments etc. I also found that the main image on the home page didn’t just need the styles changing, but the entire image changing altogether, as the large screen image is just too “landscape” for a small screen.

This image was one of the most problematic, and getting it to swap using media queries on smaller screen widths meant using a large div with a background image instead. There are other ways to do this, and I’m still looking into these, but the new site is certainly an improvement, and you can see from the images here.

That pesky WordPress sidebar

Sometimes you want it and sometimes you don’t. The sidebar, specifically here the one that appears to the side of content on your WordPress site (see on the right here), can be tricky customer when you don’t want it to appear throughout your site. On your posts pages you may want it with the categories, archives or meta widget inside. Some pages you may want it with a custom menu inside, and some you may not want it at all. So how do you achieve all that? Well, you’ll need to have a child theme set up (otherwise on your next update all your good work will be undone, arghhh!) and inside that you’ll want to create a new page template and have a copy of the default theme’s functions.php copied in.

… Continue reading >

Welcome to the new site

Well, I’d let the old site go a bit stale and realised I’d fallen into the trap of spending so much time on client’s sites, I’d neglected my own!

Anyway, there’s plenty more to do, but I’ve used it as a chance to try out some techniques I’ve been interested in for a while. One of these is the masonry tiling effect which I’ve used on the main portfolio page. This means that each element falls into place like a piece of a jigsaw.

The main site uses WordPress, of which I am now a huge fan. Certain changes and add-ons in recent years have made this now the perfect CMS for most projects, and I will likely be using it on many future ventures.

A versatile CMS is worth paying for

As a web developer often on a tight budget, it’s can be difficult to find the right tools for the job.

As far as a CMS (content management system) is concerned, it’s convenient to turn to WordPress or Joomla, amongst the popular out there. The only problem is that even with all the templates on hand for these products, they can still be difficult to translate a clients brief.

Also, I often have clients that just want a small site developing of a few pages, and when I mention a CMS, they insist this is not necessary for their needs.

As a small web developer, often my clients are new to owning a website, and it’s usually a few months down the line, after realising what I site can do for them, they start asking questions about regularly updating and adding to the site themselves.

So when I discovered the Perch CMS it came as a revelation.

Despite having to pay around £40 (inc VAT) for a one-off license, I feel it’s really worth it. The perch CMS can be implemented into any page of an existing site, and using it’s add-ons features you can have events sections and galleries that can easily be added to or updated through a web browser – and even the ability of an adminsitrator to add new pages based on templates you design. The time saved here whereby you can avoid redesigning a clients site in a free CMS like Joomla, makes the license fee in my opinion more than worth it.

Reasons to go green

Anyone who is familiar with my site probably thinks I have an obsession with green.

But this isn’t true – I can appreciate every colour in a rainbow’s spectrum, but I will admit that the colour green does hold a special place for me.

Green is used on my site to tie in with the jungle theme derived from the name, with green being the predominant colour for plants in nature. It is thought that this association with nature is what gives green its calming properties, and has made it a popular choice in decorating when a relaxing effect is desired.

It was for this reason that a green colour scheme was used on a recent website I worked on (no – not my own ;o).

Sandy Farley is Psychosexual therapist based in Leicestershire, and commissioned the site www.sandyfarley.co.uk

The site design is based on a corporate theme that is also used on her promotional literature and business cards.

But whereas green was used in sharp contrast on my own site against black and white for a contemporary look, pastel shades of green against light greys were used on Sandy’s site for a tranquil appeal.

Monkey swings

This an animation I worked on which uses a combination of methods. Whereas Flash can have shortcuts with tweening etc., some of the animation here involved old fashioned frame by frame tweaks (see below).

Animating the monkey's head

Animating the monkey’s head

The monkey in this animation is made up of three different movie clips joined together. The butterfly and bird are also separate movie clips. Some of this is still a bit rough, and will be polished up in time, but I wanted it to have an old style animation feel – like the early Mickey Mouse animations (see Steamboat Willie).

Visit Northern Warwickshire booklet

NWTA brochure

NWTA brochure

Thirty-two page booklet for NWTA goes to print

A thirty-two page booklet produced by Design Jungle for the Northern Warwickshire Tourism Association has just gone to print.

The guide, which contains maps of the main towns throughout Northern Warwickshire as well as a two page fold-out map of the entire area at the back, allows visitors to this part of the county to easily find places to eat, sleep, shop, be entertained or even educate themselves. The booklet uses colour-coded entries which can be cross-referenced with the area map for a quick reference to what’s availabe where they’re staying.

For more images of the booklet, click on the cover shown right, or you can find it by browsing the portfolio section under brochures and mailers.

The booklet is based on the NWTA website which can be found at www.visitnorthernwarwickshire.com