Category Archives: General notes

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.

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.

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

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.