Viewing entries in
Website development

Comment

Say Bonjour to Laura Ashley France

Laura Ashley’s quintessentially British style does extremely well globally. It’s true that style knows no boundaries and the iconic Laura Ashley look is very popular with our European companions.

Comment

Comment

An Intro into CSS Frameworks

One of our developers Crunchie (we have too many people named Chris in the office so have to resort to nicknames!) explains all about front-end CSS frameworks.  

So what are front-end CSS frameworks?

Front end frameworks provide a way of grouping together similar concepts, practices, and functionality with a view to serving solutions for specific sets of issues that arise time and time again. For example, a carousel here, a sticky nav there! As front-end developers, we're requested to provide these nuggets on a regular basis. Wouldn't it be great to simply call upon a pre-determined set of files to quickly build such elements from a single generic codebase? Front-end frameworks seek to provide developers with the ability to do just that.

CSS frameworks such as Twitter's Bootstrap ship with default grid styling out of the box, with additional functionality available at the flick of switch. Using jQuery we can easily lay our hands on modal windows, carousels, mobile/responsive grids, forms, buttons etc. There's a whole heap of fun stuff to play around with.

And Zurb's Foundation 4 is another framework that covers all bases in terms of Javascript, CSS and responsive grid layouts. With all this lovely functionality and styling under the hood it's easy to see why many front-end developers adore CSS frameworks.

 

What are the benefits?

Rapid prototyping

The ability to rapidly layout advanced grids, alter styling and add lavish real-time functional Javascript elements directly lends itself extremely well to rapid and efficient prototyping. Presenting working skeletal builds to clients early on not only negates the need to explain functionality, but also serves as a test environment, where unforeseen complexity and bugs in the presentation layer can get ironed out or suitably squished!

All browsers, all devices

Thankfully, much of the cross-browser compatibility testing and responsive CSS has been done. Call me lazy if you like, but why re-invent the wheel? Surely it's better to re-use CSS/JS code that's proven to work cross browser and on plenty of mobile devices as a jump off point? Frameworks (with some ‘tweaking’) can be real time savers when it comes to rapid responsive development.

Documented system

In an agency, enterprise or studio environment, many developers, both front and back-end will be working with the code. Documentation for the aesthetic layer is a valuable asset to have, especially as a production site grows through various designs, layouts and changes. Projects often out-live the developers that built them, so having solid documentation makes handovers a sweeter experience as new developers have a solid framework and documented best practice to work within.

 

But what are the pitfalls?

<div><div><span></span></div></div>

Mark-up can be rather span and div heavy, resulting in massively bloated code and CSS. However, familiarity with your framework and a staunch adoption to the 'way' of the framework will stand you in good stead to combat the bloat. You can’t code for a framework as you would if you were coding for a bespoke project - you need to learn the framework to a suitable level before using it for production code. 

It's easy to spot framework based layouts

Although we seek some form of presentational uniformity, it has been suggested that a grid / framework based approach can often be too constrictive for designers and developers. We all struggle to think outside of the grid sometimes, so entrenched have we become in our box based layouts, so viewing it all in neat little square boxes can lead to numerous homogeneous designs. This may not be a bad thing as a certain level of standardisation is required in all human / computer interactions. But targeting users in an emotional context, i.e. making them ‘feel’ something often incites great click-through / conversion and interaction. Having said that, we must force ourselves to remember that a framework is just a tool, there's always a way to break out of the grid if you really want to.

Too much stuff

Granted, many frameworks do ship with an awful lot of stuff. It may be stuff you don't need, or stuff you will never use, and if it is, maybe a framework is not what you need! A harsh lesson, best learnt from tales of woe, as opposed to experience. Frameworks will drive you crazy on small builds that don't require them. Instead they are best used for projects that tick all the requirements.

 

To conclude

If suitably tailored to the right project and managed with a sound understanding of the subtleties of the particular solution used, frameworks can readily lend themselves to aiding the production of great work. They are by no means an all-round solution; they can be complete overkill on small sites. It is possible to roll your own solution and further reduce the overall burden by minifying the CSS and removing the JS components you don't need. But sometimes, only bespoke will do.  The smartest thing you can do with front end CSS frameworks is know when to use them. Figure this out and you will see how useful they can be.

 

And to back it up…

Talk is cheap, so next time, we will be building out two test sites with one using Foundation4 and another using Twitter’s Bootstrap. Let’s see how they bench, can we break them and more importantly can we improve their overall performance through planning and intelligent use of each framework? Either way, it will be interesting to see real results.

 

Comment

Comment

Stodgy Web Design

“Stodge” is a word we’d hope isn’t associated with our work too often, but in the case of the annual agency founders’ dinner held in Manchester, we were delighted to be asked to come up with the concept for the whole event and design the website. Stodge Podge has been run by Phil Jones for several years as the Northern version of his infamous Podge dinners. Phil wasn’t able to run the event this year, so asked Natalie Gross from Amaze and Spencer Gallagher of Catc.us (and also one of our non-execs) to step into the breach.

The dinner – held in the plush surroundings of Harvey Nichols restaurant – gives digital agency owners the chance to get together, discuss the industry, where digital is headed and of course partake in some good food and drink.

We came up the concept of Northern Lights (celebrating digital talent in our region), branded the event and built a very well received multi-platform site; praise indeed considering our target audience were the founders of most of the North’s digital agencies.

The event itself was a resounding success, with many war stories swapped and new friendships founded.

The site is well worth a visit here.

 

Comment

Comment

Digital Trends 2013

With a new year comes new challenges, and we're here to help you achieve your goals. At Blueleaf we like to think we're spotting digital trends that could make you more money and improve your digital marketing. As a result, there's a link below to a report of the top 5 trends in digital for 2013. We hope you find it of value and enjoyable.  Please feel free to distribute it far and wide. Click here to view the PDF

If you have any questions about this report or just fancy a bit of chat  don't hesitate to call us on on 01829 260600 or drop us a line.

Written by Rob Smith

Comment

Comment

What's so good about PhoneGap?

Here at Blueleaf we're always looking for the latest new technology and we're rather excited about something called PhoneGap - one of our senior web developers Pete explains why.

If you haven't heard about PhoneGap, in a nutshell it gives you the ability to build an app as you would a website. So, think of PhoneGap as being a "chrome-less" web browser that displays HTML5, CSS and JavaScript content, where "chrome-less" is a term to describe the look of a website without the address bar, bookmarks and navigation that a normal web browser would display. A little bit like the view when you press the full screen button.

With this in mind, PhoneGap enables application build using HTML5, CSS and JavaScript to take advantage of the full screen of the device and is a great way for a web developer to get involved in app development. Further information on PhoneGap can be found here.

 

When would you use PhoneGap?

From our experience, we'd say that apps providing information about a service, product or event are perfect for PhoneGap, where you can do 99% of what you can do on the web without any problems at all.

One great feature of PhoneGap is that it allows integration with the iOS Accelerometer. A simple example of this would be to create a game with the objective of moving a ball around the screen by tilting the device. This can be done by hooking into the Accelerometer and using a little Javascript. Further information on this can be found here.

 

Tips for using PhoneGap

PhoneGap is great as long as you keep it simple. The more things you add, the more memory that the little app will begin to use on the device and if you're not careful, crashes will start occurring. A good thing to remember is that you are still limited by the web technologies on which the app is based, so it's best to avoid any heavy graphics processing or highly interactive features.

It's recommended to use as much CSS3 as possible for animations and transitions and the less JavaScript you use the better, as the devices have a limited amount of memory allocated to JavaScript and if you hit it, then the app will crash.

If your app seems sluggish, try getting some more power by using Hardware Acceleration. Adding “webkit-transform: translateX(0)” to the CSS will trigger this because translateX is used for 3D animation. It doesn't always work (can make it even slower) but it's worth a shot.

Another quick tip is that if you want to hide the Quicktime logo when videos are loading on an iPhone or iPad, here's the answer. I exhausted almost every idea and forum possible but in the end I used translateX again but this time with the addition of a little bit of jQuery. When the video isn't playing, use “webkit-transform:translateX(-2048px)” to hide it off screen. Then detect when the video is playing and send it back, try this as it works a treat -

[javascript] function adjustVideo(videoblock) {

//When this function is called we'll shift the video element 2048px to the left.

$(videoblock).css("-webkit-transform", "translateX(-2048px)");

//We now wait and listen for the video to begin playing.

$(videoblock).bind("play", function () {

//Once it starts playing we shift the video element back over to the right.

$(videoblock).css("-webkit-transform", "translateX(0)");

}); } [/javascript]

Conclusion

Remember that the principle behind PhoneGap is that it’s essentially a website that makes the user believe it's an app. As such, the end user will expect app-like features and performance. The expectation is in the eye of the beholder; show them a website and they will expect a delay while the pages load, show them an app and they expect multimedia activities to happen instantly. Trying to explain problems such as slowness and lag to an end user (or client) when an app looks like an app but isn't actually an app, is a tough challenge.

PhoneGap has its uses but it’s not a native app.  Before deciding to use it, assess the requirements of your app carefully before diving in. Don't be lured into a false sense of security just because you know how to develop for the technology behind PhoneGap (HTML, CSS, JS).  It might not be possible to make your app as awesome as you (or your client) would like using PhoneGap, you might just have to go native. But PhoneGap is certainly worth considering.

To be continued...

Comment

Comment

Mobile friendly forms in minutes

Did you know that approximately 70%* of people make their first visit to a website using a mobile device? This visit may be just a quick glance to follow up later on a desktop or they may complete a contact form requesting further information but this first visit could be the difference between gaining a sale or losing a sale. One of our senior developers Daz looks at how contact forms can be made easier to complete. I often find that a lot of forms on websites are not easy to use from a mobile device.  When it comes to entering my email address for example,  it's often the case that the first letter automatically appears in upper case and neither the @ key nor other commonly used keys such as dash and underscore are readily available. Does this look familiar to you?

As you can see in the example you have to press the shift key in order to find the @ symbol, thereby increasing the time it takes for you to complete the form. Some people may even choose to abandon the form entirely at this stage.

Essentially what is happening is that the mobile device is expecting standard text. With a very simple change to the code behind the form however, it becomes mobile friendly thus saving the user minutes and helping your conversion rates.

All it needs is the following change:

From : <input type="text" name="email" /> To:  <input type="email" name="email" />

What surprises me is that the majority of sites on the modern web haven’t changed their forms, even though it's so easy to achieve. Here is the same example as above but changed to be mobile friendly and all it took was a matter of seconds.

This change simply takes advantage of the new HTML 5 input types designed to enhance user experience and supported by mobile devices.  For a comprehensive list of input types, click here. The great thing is that even if a particular browser doesn't support the HTML5 code, it will revert back to a standard text input field thereby always ensuring that your form is functional.

So there you have it - a simple way to make your forms more user friendly for those on a mobile device and a great way to help your conversion.

*Based on an average of analytical data gained from client websites from October 2011 to October 2012, thanks to Scotteo

And to finish off, just a quick tip if you use ASP.NET standard textbox controls - you will need to download a patch for the .NET framework to allow an input type other than text to be specified. Here is a link to the required patch  - thanks to Dan Branwood for highlighting this.

By Daz Taylor

Comment

1 Comment

Blueleaf launches a new site for JLA's Circuit Division

We've recently launched a new website for Circuit - http://www.circuit.co.uk - a division of the JLA Group, the UK’s leading supplier of laundry equipment. Circuit work closely with leisure parks, colleges, universities and housing associations across the UK to provide on-premise launderette facilities. They work in partnership with 90% of the UK's top universities, delivering state-of-the-art laundries. Blueleaf were tasked with building a site that reflected their new branding and amalgamating three separate websites into one, to show a simple to use system that incorporated clearly defined end user pages and corporate areas. The site allows users to create an account and top up their Circuit Laundry cards, as well as view when a washing machine is free. They can even receive an email alert when their load has finished.

The site was built using WordPress and then heavily customised to create a tailored, bespoke solution, integrating with Paypal to allow for the laundry card top up feature.

Lindsay Glover, Digital Account Manager at Blueleaf who has worked closely with the Circuit team during the project said:

“This has been a really interesting project to work on as we had to bring three sites into one, whilst targeting two very different audiences (end users and corporates). We also had to keep the strong branding prominent throughout the site. It has been great to see everything come together in a simple, effective and informative site that is used by thousands of students across the country as well as major brands in need of a laundry solution".

1 Comment

1 Comment

A trio of new business wins for Blueleaf

Continuing our record-breaking year, we are delighted to welcome three new clients into the Blueleaf fold. Firstly, we’re delighted to be working with another part of the Red Bull family. As you know, we've already been working with Red Bull on a number of design and build projects and as they're so pleased with the work we've done to date, we've just been given a project for Red Bull UK, which will go live in the next few weeks.

We will also be working with JLA, the UK's leading supplier of commercial laundry equipment, who are looking for a new website that enables their clients to reorder detergents online with the minimum of fuss.

Our third new client is MPL Home, recognised as being a dynamic force within the small electrical appliance industry. They’re looking to develop a new website to continue to build their brand presence, bringing this up-to-date with their market positioning and current marketing strategy.

We're really looking forward to growing great working partnerships with these clients and welcoming many more in the future.

1 Comment