With the support of a European funding grant , Hawkswells’ were able to install a state-of-the-art milking machine at the dairy which would allow an ‘up’ in production while still retaining that genuinely unique way they produce and deliver their milk products.

This was the perfect opportunity to ease a traditional family business into the 21^st century by developing a suite of communications that would extol the virtues of their heritage, whilst positioning them as an up-to-date forward thinking business.

We were commissioned to design and develop a new product range name, labels and website for Hawkswells’.

The name

The first stop was a new name for their range of milk products. Making clear market differentiation was key and creating a naming strategy that would be distinctive yet represent the fundamental USP of Hawkswells’ – a local family dairy producing and bottling pure, fresh, natural milk products on their farm in the Yorkshire Dales.

The answer was PureDales…‘it does exactly what it says on the tin’.

Pure Dales Logo

The labels

The name gave us the perfect foundation for the creative development of a label range, enabling us to add personality and character to the product lines through the creation of a little fun character ‘fluffy the cow’ (a name given to one of the ‘girls’ in the herd by a younger Hawskwell family member). The result is a set of eleven different product labels for six product lines, delivering great individual on-shelf presence and the potential for developing additional lines in the future.

Pure Dales Label's

Pure Dales Milk Bottles

The website

The responsibility of the website was to build on the character and personality of the labels, while making the user experience engaging and communicating the Hawswells’ USP in bucket loads. Developed using HTML5 and CSS3, the clean simple approach to the site really hit the spot, a neat homepage scrolling banner,  product gallery and contact footer, combined with our easy to use ForeCMS delivered on all fronts. We even created a nice little iOS icon too, just to put the ‘icing’ on the iPad/iPhone users’ cake. We like the attention to detail.

Pure Dales Website

Pure Dales iOS Icon

The outcome is a package of communications for Hawkswells’ that says ‘the right stuff, to the right people in the right way’ and has the potential to deliver genuine results for the business. Watch this space for feedback.

Astute class website - Design Section

We were honoured to have been chosen to produce the website for the Astute class submarine programme, in order to showcase the advanced technical capability of BAE Systems and the skills and expertise of their staff, contractors and supply chain. The design and content of the site was based initially on the award winning publication, Astute Exit Barrow, which was previously produced for BAE Systems Submarine Solutions. The site itself is to be continually updated and enhanced to run in parallel with the ongoing development of the Astute class programme.

Astute class website - Holding page

We led from the front on the development and management of the project, working closely with BAE Systems in defining the strategy, goals and objectives to launch and also the social media awareness strategy, in order to drive traffic to the site whilst the countdown holding page was live. This enabled subscribers to register and receive progress updates to the launch of the microsite and the Ambush roll-out event. One day into launch and we have already received rave reviews both internally within BAE Systems and externally via Twitter. The stats speak for themselves, visits are on the up and visitors are spending time navigating around the site.

Astute class website - Take a tour

The site has been developed using the latest emerging web technologies such as HTML5 and CSS3. This has allowed us to produce a responsive website that is not constrained by the limits of older browsers and delivers an appropriate user experience to any browser or device. Users of contemporary web browsers such as Chrome or Safari will receive a significantly enhanced user experience, which fully exploits the advantages of technologies such as HTML5 and CSS3.

Astute Facts in IE6 and Safari

This ‘Hardboiled’ approach to development is clear throughout the site, more so in the more interactive areas of the site. For example in the ‘Astute Facts’ section users of contemporary web browsers such as Chrome or Safari get an experience which is appropriate for their browser which utilities the latest CSS3 properties such as transforms and transition to create a slick 3D interface allowing users to flick through the different fact cards on an infinitive carousel. Users of older browsers are presented with a simpler slider as their browsers aren’t capable of rendering the more advanced CSS3 properties such as transforms or transitions. CSS3 has been used throughout to enhance other areas in simple ways; such as the 404 error page, which makes use of CSS3 animations to animate the radar.

Astute class website - Email Updates

The topic of the conference was CSS3. The first couple of speakers covered the more technical aspects of CSS3. Then one speaker in particular, Andy Clarke, grabbed everyone’s attention when he started talking about what it meant to be “hardboiled” and showed us some pretty cool things you could do with CSS3.

At this point rounded corners was about as far into CSS3 as we had gone and when Andy began to show us cards flipping over, pictures moving around and things fading in and out, well we sat up and got really interested.

Andy also stressed that it should be expected that websites look different between browsers and that we should be designing for the best most capable browser.

Our next step towards becoming “hardboiled” happened, a couple of months later, when Lewis and I attended the Future of Web Design conference in London.

We were really impressed by two fantastic speakers, Aral Balkan and Aarron Walter, who presented on User Experience (UX) and how we shouldn’t be building websites that just do the job, we should build websites that are truly enjoyable for the user and can evoke emotional responses from them.

Aarron Walter at FOWD

CSS Guru and Dribbble founder Dan Cederholm re-enforced this notion on UX and explained how we can use CSS3 to enhance and enrich a user’s experience. Dan’s ideas seemed to fit very well with what we had heard previously from Andy Clarke.

When returning to Forepoint we adopted a very clear development methodology, in which we develop first for all contemporary web browsers, using HTML5 and applying CSS3 techniques then degrading for the less capable browsers. This methodology can be seen in our own website, the WANO website and on some imminent websites we are working on right now.

World Association of Nuclear Operators Website

Last week saw the launch of Andy Clarke’s book Hardboiled Web Design. We had been waiting eagerly for this since Andy first spoke to us about his “Hardboiled” ideas on the Carsonified Conference. So last Tuesday Lewis and I waited rather impatiently for the book to launch – this basically involved us repeatedly refreshing the fivesimplesteps website until the book launched.

So far I have only managed to make my way through a few of the chapters, but I’m already completely hooked.

The book takes a no-nonsense look at the current state of working in web and casts a lot of the outdated ideas away. In the first few chapters Andy explains how it’s neither feasible nor cost effective in these modern times to expect websites to be pixel perfect across browsers. He then goes on to say:

“When we shift focus from looking backwards to looking forwards, invest time in design instead of in lengthy workarounds for less capable browsers, our bosses and customers will see real improvements in brand experience.”

And

“[T]hat designing from the top down ensures that everybody will see and experience a website in a way that’s appropriately crafted and responsive to the capabilities of their browser. Most importantly, no one will be left out.”

So far this book has confirmed that Forepoint’s development methodology is on the right path – we are getting hardboiled! The advantages are clear all round. Clients get the best website for their money, users get the best experience, crafted for their browser and we get to use the latest technologies to build our websites.

Hardboiled Web Design CSS3 Transformers & Transitions

Hardboiled Web Design is well on its way to being crowned the best book I have read this year … so I’m off to read to some more so that we can get even more “hardboiled”.

As a result, web designers have to keep their eye out for the latest trends but more importantly what the next big trend is going to be in order to keep their websites looking new and fresh for as long as possible.

We are now well into 2010 and so far this year it’s clear trends are changing quickly. With more designers and developers becoming aware of the powerful new features of CSS3 (Cascading Style Sheets), and to some extent HTML5, we are constantly looking for ways to utilise these new features to produce creative, impressive designs. With this, the differences in a website’s design between browsers continues to expand and what was once considered voodoo is now considered the norm.

So what are current trends?

Typography

Typography in web design was often frowned upon by usability experts, claiming that any deviation from the standard web fonts and font sizes will render the site inaccessible. The idea of mixing custom fonts and varying font sizes together was considered unthinkable. In reflection, web design has taken a complete U-turn on this and typography is now being used as a critical design element of websites. Designer & Writer Jacqueline Thomas explains:

“Fonts are meant to be explored, twisted, and moulded to fit your purposes. With the correct placement, a website that utilizes typography as its main design element will be more interesting to a reader than overloading the same site with tons of photos.”

Zurb

Custom Fonts

What was previously a difficult task and considered inaccessible; there are now a multitude of ways to use custom fonts on websites. From font embedding services such as Typekit and Font Squirrel, to text replacement techniques such as Sifr or Cufon. This use of custom fonts is now considered standard practice.

Magnox Exerience

Springfields Gradutes

Text Shadows & Letter-pressing

It would be very hard to look through a collection of inspirational websites or CSS galleries without finding websites using Letter-pressing techniques and text shadows to add depth to websites. By simply adding borders to the top of elements or adding inner shadows it is possible to create the illusion that text or an element has been ‘pressed’ into the design. By flipping it around and using drop shadows and borders on the bottom of elements, the illusion that text and elements is raised out of the design. This is a very subtle technique that can be employed to enhance the design of website. The trick is not to overkill it and use it on every bit of text and element on a page but to be selective.

Gowalla

365 Days of Astronomy

Textured Backgrounds

“Textures, textures, textures. The design community, both print and web, seems to be going absolutely texture mad” Skellie, PSDTUTS

A previous trend of large abstract background images is out and subtle textured background is in. As Skellie explains with very little effort, a texture can dramatically change the mood of your work. From paint brush strokes to scrunched paper and wood to metal, the list of textures is endless and they can be found anywhere.

This is one of my favourite trends that has developed, as the slightest little texture added to a website can make a big impact on the look and feel of the site.

One Vision Housing

Elliot Jay Stocks

A Massive Textures Showcase

Illustrative Designs

The use of illustration in websites can make a website look very ‘clean, bright and modern’. They tend to be very warm, welcoming and inviting which is what you want from a website. At the end of the day you want people to come to your site and have a nice experience. Illustrative designs were once only considered suitable for personal blogs and designer showcases; however they are now being implemented by professional and corporate websites.

We've Got A Ticket to Ride

Flourish

Carsonified

40 Brilliantly Illustrated Web Designs

CSS3 Techniques

As mentioned previously, CSS3 techniques offer web designers and developers a myriad of new ways to construct pages. However, these techniques are currently on supported by modern browsers such as Firefox, Safari or Chrome, thus meaning any enhancements added using CSS3 techniques will only be visiable to certain users.

CSS3 gives developers and designers a whole new level of control to the elements on a page. We are now able to animate the movement of elements using only CSS. Currently this is only available in webkit browsers such as Safari and Chrome but is still a very exciting prospect. Other design elements, which previously required a cornucopia of images and additional mark-up such as rounded corners or opacity, can now be completed using a single line of CSS3.

Partical Lab

Future of Web Design

(This examples are currently only supported in Safari or Chrome)

I am very much looking forward to a time when CSS3 becomes more widely adopted so that all the little design tweaks and enhancements we are currently employing become available to a wider audience.

As with every field though, trends come and go. It will probably not be long before these trends are considered yesterday’s news. So what do you think the next big thing is going to be?

We are all very much looking forward to the awards ceremony which is held at the Midland Hotel, Manchester on 26th March and have our fingers crossed that we will come out victorious – we will keep you informed.

As both a measurable and economical method a simple email marketing campaign can become a ‘first-step’ towards opening channels with your clients.

The beauty of an email campaign however is that hidden behind the simple facade of the campaign message is the information it gathers – often with tangible results. The campaign’s wealth of information can affect how you next respond to and follow up the initial campaign in that it provides you with new choices and more valid options; your contact list will be cleansed of out-of-date addresses, you will be provided with the number of received emails and how many were opened, you can view who opened the email and target those who showed interest in your links, or those who didn’t and collectively this can be used to follow fresh avenues and potential leads.

It was with this e-marketing application that our recent campaign for TeleCity Group realised the potential of such a campaign. A simple happy new year email to an existing client database, informing them of their new Data Centre site, produced a welcome response and some useful results; 959 emails sent, 9% bounced, 43% open rate within the first hour, 17% clicked and only 1 unsubscribe. Considering this was a preliminary mailing, the success of the campaign and the potential to target customers more directly, was the perfect springboard for the rest of the year.

One Vision Housing Website

One Vision Housing Website

One Vision Housing Website

February started with the launch of the newly redesigned Moto website. The website has matured in its function, mirroring the requirements of the Moto customers as we enter 2010. A bold functional design frames the newly introduced technologies whilst expressing Moto’s key brands and delivers wholly individual service area information. The website relies highly on the Google Mapping API (Application Programming Interface) to allow Moto customers to search Moto locations, brands and even plan routes. This shift in focus of the website provides a new and useful service to its customers. This website is powered by a totally customised version of Forepoint CMS, featuring a completely new look and feel compared to the previous version of the CMS.

Moto Website

Moto Website

Moto Website

Another project in its infancy is Cheetham & Jackson, a new investment company based in Chorley. We’re hoping to launch towards the end of February and we shall be updating the blog as we edge closer to the site launching.

Cheetham & Jackson

Improved Accessibility

By carefully structuring and coding your website, it is possible to ensure that people with visual, auditory or motive disabilities can access the content on you site just as able-bodied people can. In practice, this means the code used to create the pages of your website can be understood by screen-readers and modern web browsers alike, with no loss of context or message.

Compatibility with future web browsers

When defined standards and valid code are used, documents become future-proofed and the risk of future web browsers not being able to understand your code is reduced.

Fast Downloaded and Rendering of web pages

Less HTML results in smaller file sizes and quicker downloads. Modern web browsers are able to render pages faster when the code follows defined standards.

Better search engine rankings

The separation of content and presentation makes the content represent a larger part of the total file size. Combined with semantic mark-up this makes it easier for search engines such as Google, Bing and Yahoo to index your page, and provide more accurate search results determined by the actual content on the page. Google, Yahoo & Bing all reward websites that are built using structural and semantic mark-up.

Web standards can make it easier for developers to create websites and provide a better user experience to the visitors. If you’re website is not using web standards already, now is the time to start or you will risk being left behind.

If you are interested in updating your website so it adheres to the latest web standards, here at Forepoint we comply to the strictest web standards and strive to meet all accessibility guidelines, so why not contact us below.

Then AJAX arrived. AJAX let you deliver content to your website without having to leave the page. JavaScript had found its voice and we all started to listen. Interaction that had previously been reserved for software applications was now being exposed on the web. JavaScript had upped its game so we all paid it more attention; it just seemed that the more you wanted to do and the further you wanted to push it, the more complex it seemed to get. It felt like you wished you had studied it more.

So that is when we all got up … and went to the library!

“jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.”jQuery.com

There were several JavaScript libraries available, they all made JavaScript unleash its true potential and brought great interaction to websites but jQuery was the one that we just knew was going to make a difference. jQuery embraced languages we were already familiar with and let us talk so easily with JavaScript it became a pleasure. It works so effortlessly and when delivered well is so subtle yet powerful.

So the next time you are on one of our websites and it interacts, updates or even animates for you then you will probably just have had a conversation with our friend jQuery.

And could this finally mean an end to Web Designers spending hours ensuring that their latest creations are backward compatible with this last remaining relic of a time long forgotten?

Here’s looking to a brighter, happier and more standards compliant IE6-less future, fingers crossed!