Home page

Services page

Contact page

Date launched: February 2012
Website type: Starter Package

Elm Electrical are an Essex-based electricians. They came to us looking for a clean and simple website to promote their growing electrical engineering business. With so many electrician’s engineers looking the same, we wanted to make Elm a little bit different.

We wanted the site to be bright but also stay away from the colour blue, as it’s used not just on some of Elm’s competitor’s sites but on so many electrician sites in general. We decided to go for a slightly more unorthodox green and complemented it with shades of light brown and white. We also added a wood texture background to really set off the colours and give it a more friendly and homely feel.

Hopefully the design will help Elm Electrical continue to grow and help them stand out from the crowd of blue electrical engineers.

For literally years I’ve been playing with different tools for bookmarking and moodboarding. I’ve tried pretty much everything going – Imagespark, Delicious, Diigo, Pinterest, Zootool, Evernote and the rest.

Finally! I have a solution to a long term and quite frustrating problem. Part of my web design process when working with a client is to look for sites that inspire the client. Sometimes they want to see the kind of thing that can be done. Sometimes they want to see colour combinations. Sometimes they just want some ideas. Previously I’d have to dig out my bookmarks from somewhere like Delicious or Diigo and filter through them by what I think it is they want to see. Both are good enough at keeping my content organised. But both also lack that visual impact that’s necessary for the early stages of client interaction.

I took my frustrations online via Twitter. And luckily so. What I got was a reply from Nick Cernis about a service I remember hearing about a while back, but didn’t fully investigate for whatever reason.

@WhiteHeatDesign Try http://t.co/HfDMCkzV -- takes screenshots of sites you capture, auto syncs with Dropbox. Very neat.

February 1, 2012 3:23 pm via Tweetbot for iOSReplyRetweetFavorite

@nickcernis

Nick Cernis

Turned out, it was the perfect solution. Yay! Social media is useful.

Enter Gimme Bar

Gimme Bar allows you to create collections of bookmarks. Crucially, the javascript bookmarklet allows you to take entire screenshots. This is key for me. When I’m showing clients websites for inspiration, it’s useful to be able to see a whole moodboard of similarly styled or coloured sites.

You can add descriptions for each item you save and make it public or private. The only thing missing for me is tags. Collections are great but I’d like to be able to organise my bookmarks a little deeper. For instance, I’d like to be able to mark a particular screenshot as both ‘e-commerce’ and ‘blue’ without needing to add it to two collections. Still, it’s a fantastic free service (free for now at least).

Now, even if I don’t know what type of site a given client is likely to want to talk about going into a meeting, as long as I’ve spent a bit of time organising my Gimme Bar account, I’ll always have something relevant to show them.

Long term problem solved. Cheers @NickCernis

While everything I read is telling me that this is great and absolutely the way to be designing websites ‘these days’, I can’t shake this feeling that it’s only a matter of time before it goes the same way as every other website: outdated and running off now-frowned-upon code.

What’s the problem?

I’m not happy with the website, despite it checking lots of boxes. I’m already looking forward and thinking ‘right, what’s next?’. Replace all images with SVGs? Change all links to be CSS3 animated? Cut down the framework to be even simpler and more lightweight? It feels like a never-ending cycle of pressure to update and improve every website I build, as they come along. There is no end. And I’m ok with that – I understand that mine is an insanely fast-paced industry with a virtually insurmountable breadth of avenues to explore and master.

But it becomes a problem when you don’t know where to start with your next project. It becomes a problem when there is a degree of choice-paralysis. More so when you don’t know the correct answer. And given the speed of development in web design, the thought of falling behind is petrifying.

I’m at the stage now where I feel like I need to just wait. To put off designing any more websites until the full spec of HTML5 has been scoped. Until there is a more efficient stylesheet reset. Until there is a standard level of browser support on every mobile device. Until a higher screen resolution is adopted across all smartphones. Until I know that what I’m creating now….will last forever.

And I know this is wrong. Because it isn’t possible. You cannot indefinitely design for the future in any one moment. More than anything it’s a mental block. For me at least. I find moments where it almost completely inhibits my productivity.

What’s the answer?

The correct answer is…. that there is no answer. Nobody is right. Because nobody really knows what lies in wait. The more experienced, educated, conceptualists amongst us will have their ideas. And they might be closer to the mark than you or I. But they don’t know.

Fear of working in the now for what lies ahead is a silently dangerous and debilitating state of mind. There will always be the option to wait it out and see what happens before you employ a new technology, technique or whatever it may be. But you can’t do this forever. Sometimes you have to take what you know, the hours of research you’ve put in, the lines and lines of text telling you what so and so considers the best approach – take it and run with it.

Work in the present – just do it the right way

There is little point in continually worrying over changing technologies. You can’t control that. What you can do is use the tools available to you, the most reliable resources and the most considered approach to everything you do.

There is so much content out there about what is the “correct” way to design for the future web. You won’t be able to read it all, digest it all, compare it all and then make the most informed decision. It’s too easy to lose sight of what you are trying to achieve in amongst all the noise and differing opinions.

Design for what’s in front of you. And do it with confidence. Because if you’ve done your homework and you believe in what you do, you’ll make the right decision.

Just to clarify, the thing all of these sites have in common is that they are built in such a way that they adapt/respond to the device/screen they are viewed on. So if you look at them on a regular 21 inch computer screen (for example), they will display at full size. But if you then look at them on an iPhone or other mobile device, the site will change its shape to fit the content in in a much more legible and practical fashion.

The website changes shape according to the device it's viewed on

So, fueled by the seemingly endless saga of trying to get some furniture delivered to my new flat, and sensing it was time I dived into this new world of design, I put together the wheresmysofa.co.uk website. Try it out. If you’re reading this on a desktop computer try resizing the browser and  watch how the website resizes itself and moves the content around. Smart huh? If you can, try viewing it on a smartphone or other mobile device. You should see a longer, single-column, scaled down version of the site.

Designing sites this way will add a significant amount development time for each project. But when you look at the results, it’ll be totally worth it. Anyway, this is my first go. Designing for all devices and screen sizes is yet another challenge web designers and developers have to overcome. But unlike fixing IE6 bugs, this one is actually very rewarding.

Update: The site has been featured on the Media Queries website

We work very closely with our clients and by far the most popular request we get post-website-launch is help sending notification emails or regular newsletters to existing clients/customers/subscribers or recipients. This normally means looking to external software or applications, sometimes resulting in incompatibility issues or crazy high pricing.

We decided to bridge the gap.

MailStrike can run seamlessly and simultaneously with any website we build. Everything goes through us so you can guarantee it’ll not just work, but also perfectly reflect your brand and look super pretty :)

I won’t go into the nitty gritty of what MailStrike can do in this post (please check out the dedicated site for a full list of features) but here are a few of the highlights:

• WYSIWYG (what you see is what you get) email editor
• Drag and drop content builder
• No ugly logos or links – it’s all you
• Crazy-powerful reporting (down to who opened your emails and what they clicked on)
• All sorts of email personalisation
• Export and import email lists (unlimited)
• No send limits
• Pay as you go or pay monthly (email us to arrange a custom pay monthly plan)
• and plenty more…

Simple WYSIWYG email editor

Powerful, intelligent reporting

See who opened and clicked your emails and from where

If you’d like to find out more about MailStrike, you can visit the website. Alternatively, email us directly and we’ll answer any questions you might have.

Homepage

Pricing page

Contact page

Resources page

A gated Resource article

Date launched: September 2011
Website type: CMS Package

Email marketing is still one of the biggest and most valuable marketing tools used by nearly every successful business out there. We have always helped our clients with their email marketing needs, but we decided it was time to take things a step further.

We have therefore built a promotional website for the MailStrike application. The focus of this site is very much on showing users the features available through the system. It uses lots of imagery of the admin area that users will be directly accessing, coupled with some of the HTML email designs that we have produced to be used in conjunction with it.

In terms of functionality, the site is pretty simple. It has a features area that allows users to flick through the advantages of using the application and also has sign up forms they can use after they’ve chosen a price plan.

There is also a separate gated (membership required) Resources section that is only available to MailStrike clients. This section contains tips an tricks, graphics, templates and anything else that might be beneficial to people interested in email marketing. The site allows all users to see the intro to the each article, but to see more you’d need to sign up for an account ;)

Being a personal project, we could do anything we wanted in terms of design, so we chose a vibrant orange and a nice contrasting dark grey for the colour scheme. Textured backgrounds are used all over the site just to make it feel a bit more tangible, and we’ve gone for a stitching effect in some areas just for that little bit of extra detail.

If you would like more info what’s on offer through MailStrike, you can visit the website itself, or email us with any questions you may have.

If you’ve ever looked at a website and thought it looks beautiful, but you couldn’t quite work out why, it might be worth looking at how it uses images. Something I’ve noticed is that a lot of designers tend to slice off a chunk of their images so they look incomplete. But not just any old chunk.

While much of the time the shape and space available to you in a webpage will dictate what size your image should be, it doesn’t necessarily dictate the content or composition. Let’s look at some examples.

gingermonkeydesign.com portfolio

The Ginger Monkey Design portfolio uses cropped thumbnails for every item of work. Such is the level of detail in each piece, it only needs to show a small area to entice users to click through.

Jesse Bennett-Chamberlain's homepage

Jesse Bennet Chamberlain‘s homepage displays some of his recent work using a porthole type effect. Combined with a slight inner shadow it really gives an illusion of depth and layering. This is an example of circular cropping. Not as common as regular square or rectangular cropping, but it’s a very nice effect all the same.

What makes a well composed image attractive?

If you can find the focal point(s) of an image, you can crop it to a dimension that will really impact on the viewer. It can be quite difficult to get the proportions right to begin with, but with practice you’ll begin to pick out these focal points and see exactly what shape and size the image should be before you start work on it.

When cropping your images you want to capture the most interesting part of the image and zoom in on it. But make sure your focal point isn’t directly in the centre, unless the image you’re using is very symmetrical. Also, don’t be afraid to cut off an area of the image that doesn’t add anything. Having an image slightly to one side and cut off hints at more outside the picture tempting the viewer to click through or continue browsing your site. It can really add interest to otherwise boring images.

Before

This is a photo of a little ginger guy I snapped on my iPhone while he was snoozing in the shade in a hotel in Cyprus. He’s cute, but he image itself is not particularly inspiring and it’s a little bit boring.

After

Taking his face and that upturned paw as the focal points, I’ve zoomed in on the image and moved his head (the primary focal point) off centre and to one side. You can see more detail in his face and although we’ve chopped off a large section of his slumped body, you still get a sense of all that laziness. This is miles better.

Banneton wood fired breads

The Banneton website uses close-up shots of the bread they make. Rather than showing whole loaves, they simply zoom in. From a user perspective, it shows the company has a genuine confidence in what they offer and it is therefore presented front and centre. If you look closely, every one of the slider images on the homepage is cropped and focused. None of them include a complete loaf of bread, cup or bowl.

Apple website uses plenty of cropped and incomplete images

Apple are known for producing beautiful, aesthetically pleasing products. But their presentation through the Apple website is also consistently appealing. They use plenty of zoomed in and close-up shots to give viewers a real sense of quality and luxury. Take a minute to click through the site and look at how many places incomplete images are used or cropping is used to focus the eye on a particular detail of a product.

What you might also notice is that images are rarely cropped at a 50-50 scale. As in, they are rarely cut directly in half or only show exactly half of the product/subject. The idea of the rule of thirds is regularly applied – something I intend to write a separate post on, as it is beyond the scope of this one.

Using ‘incomplete’ images to break the grid

Grid-based layouts are very popular across the web design industry. They provide a starting point at the beginning of a project and a reference point throughout. While many consider it to be a standard practice, not everyone wants their website to look ‘rigid’ or ‘boring’ as can happen if careful thought is not applied. One way designers get round this potential boxy appearance is by using large images that sprawl across the background of the page, seemingly transcending the grid. Normally they are quite subtle so as not to distract from the main content, but they are also sometimes used for impact.

The beautiful Love For Japan website has trees in the background that point inwards to help focus the eye on the main content. It still uses a 960 grid.

Another method that I’ve seen used is to rotate an image so it’s at an angle. This helps to break the grid visually without actually affecting the layout. A sort of ordered chaos.

The Promise Me Chocolate website uses angled, nicely cropped images. The focal point of the image (the faces) are also off-center, obeying the rule of thirds

Wrapping up

The point of this post is not to argue that every image should be chopped up and presented in the same way. It’s more to point out that you don’t have to use an image in its entirety. If it’s too long or too wide for a particular space on your site, don’t be afraid to open it up in an image editor and play around with cropping it to different dimensions. You might be surprised at what you can find. Sometimes the perfect detail or the perfect focal point is sitting right in front of you. You just need to find it.

Keep an eye out while you browse the web today. I guarantee you’ll see examples of this everywhere.

Xavier’s knowledge, dedication and enthusiasm when it comes to web design combined with his creativity is a rare commodity. But what has impressed me possibly even more is his support during and ever since the launch of the site. For me, building a social media presence is very important, and Xavier is always there to answer my questions or give me useful Twitter tips. The response I’ve had to the site so far has been amazing. Everyone comments on the clean, fresh, beautiful design, and all agree that the site is very easy to navigate. And the main thing is, I love it!

I couldn’t have done it without him – it’s as simple as that.”

Homepage

Single article

Events page

Single event

Date launched: July 2011
Website type: CMS Package

Live Urban Love Rural is the new online magazine designed for people who live in London, but are after that little something extra that only rural life can offer.

Rachel came to us with the idea in April 2011 and we were taken by the idea instantly. With so many websites dedicated to events in and around London, we loved the idea that this one would aim to tackle quite a niche market. Rachel is extremely knowledgeable and experienced in all things arts, craft and country. We were impressed with her passion for the project and therefore knew we had to take it on.

The Live Urban Love Rural website consists of 5 different channels: How-to – a section dedicated to growing, making and creating your own rural life in the country, Creative Hub – a guide to creative projects and arts and crafts events in the city, LULR Interview – interviews with inspirational city folk, In-Focus – an in depth look at ‘rurban’ trends in London and, finally, an Events section that lists upcoming rural and community events in London.

As the website’s popularity would initially be measured almost solely on the amount of traffic it receives, we were keen to work with Rachel on the social media aspects of it. Naturally, a Twitter account and Facebook page were set up, as well as a Feedburner account, offering readers plenty of different ways to subscribe and keep up with her regular content.

We decided to build in a featured article section to the top of the homepage so that articles could be given extra prominence if Rachel and her writers wanted to highlight something in particular. There is also a tabbed section on each page that offers the most popular articles to date, the most recent comments and a tag list so it’s easy for readers to drill down to the content they most want to read.

The Events section consists of a calendar that is browsable by month or year and can also be switched to list view if you prefer to view the events that way. Each event contains more details when you click through to it, revealing a dynamic Google map, telephone number, venue, entrance fee and pretty much any other details needed for an event.

With this website we wanted to go for a slightly more quirky and charming feel, without over-cluttering it or making it too twee. It needed to be obvious what it was about, but readability and legibility were pretty much key. To achieve this we decided to go for a light canvas background and added a few stitching elements to different areas of the site just to give the idea of arts and crafts, without going overboard. As LULR is predominantly aimed at women between the ages of 22 – 35, we used 3 different shades of pink accent throughout the site and incorporated a pink butterfly in the footer to enforce the rural element also portrayed in the logo.

We’ve always wanted to design a magazine website and we finally got to do so with LULR and Rachel, who has been really fun and a real pleasure to work with.

We wish Rachel and her writers all the best in continuing to grow their readership.