Better Brief LLP entered creditors’ voluntary liquidation on 28 November 2014 following meetings of the members and the creditors of the Partnership. Ian Franses and Jeremy Karr of Begbies Traynor (Central) LLP, 24 Conduit Place, London, W2 1EP were appointed as Joint Liquidators. Please note that the Partnership is no longer trading. All enquires should be directed to Begbies Traynor (Central) LLP on 020 7262 1199.

Knowledge / Blog

Heat maps - How can they improve your website?

25 July 2013 - Tom Speak

What is a heat map?

A heat map provides you with a visual representation of how the user interacted with a website. It covers a range of interactions such as mouse movements, clicks, scrolling and how long they hovered over an element.


In the image to the left, the user’s cursor activity on a web page is represented by the colours: blue means they passed over that area, with the green, yellow, orange and red indicating increasing levels of intensity, red being the most intense. Where the user has clicked is represented by the purple crosses. As you can see in the example the users attention is focused heavily at the top of the page while content to the bottom right is largely ignored.


Why use a heat map?

Heat maps are useful for businesses as they show how you can improve your website, especially if the site is selling a product. A heat map will show the best place to put the download or buy buttons. It can also identify problems with the flow of your website, and identify high impact spots where you want the visitor to interact with your site as much as possible. Google Analytics don’t include heat maps, so if you’re spending money on marketing and user experience (UX) consultants, heat maps should be included to deliver a website with a great user experience and throughput.

How do you use a heat map?

There are many different companies offering heat map services, but the one we use at Better Brief is Crazy Egg. We have found it to be the most user friendly and informative with great pricing options. Adding heat maps to your website is straight forward, all it takes is some code added to the page you wish to track and you’re off! CrazyEgg will deal with the rest so you can view your data through their dashboard.

Proof!

Here at Better Brief we have used it with a number of clients and it has helped us to reduce bounce rates by 40% and increase conversions by 30%! Massive returns for such little investment.

12 July 2013 - Tom Speak

An intern's guide to getting an internship

15 July 2013 - Tom Speak

Why?

In the current age computers are king, the incredible technological boom that has happened in the past ten years has generated a huge demand for people with IT and Computer Science related skills, in turn the competition has gotten fierce, all battling for that dream start up position to live their own rags to riches story or working for the tech giants like Google, Facebook and Twitter. But why should these companies take a risk on you? The biggest problem with new graduate hires is that you don’t reap the rewards until a few months after they are hired due to them adjusting to code bases, learning industry standards, applying their education to how the real world works and well, actually learning how to code. If this effect can be minimised you become instantly more valuable to the company and have a better chance of being hired.

Preparation

You have to put all the odds in your favour, the web development industry is full of passionate people who love what they do and they are scouting for likeminded people. The first thing you need to decide upon is what type of developer you want to be. Front End, Back End, do you want to specialise in a certain framework (i.e Ruby on Rails). Or do you want to do a bit of everything? Your answer will shape where you go from here. The next thing on your to do list must be getting stuck in, build everything and anything that can be shown off; create a blog, web app, CMS module or fiddle with some of the many free APIs (Twitter/Facebook/Last.fm etc). A really big bonus to have is open source contributions, this shows your passion for web development clearly, but more importantly shows you can develop under strict conditions/standards and survive code reviews from the unforgiving open source developers. Now you need a place to show case all of this hard work. This will be your masterpiece, your portfolio. Register a good domain, www.[firstname][lastname].com/.co.uk is always a safe choice! Then meticulously design and execute the website, all the way through to being perfectly validated by W3C! Ensure that you make your website as aesthetically pleasing and easy to use as possible, have your projects well formatted with useful information, source code and how to contact you. But remember most importantly, web presence is everything; it does not matter if you write flawless code that would make Zuckerberg shed a tear if nobody knows you exist.

How?

OK so now that you’re fully prepared for an internship, how do you get one?! There are several ways and a lot of it depends on your current situation and location. If you are currently in University then contact your faculty office, they have a lot of connections and may be able to assist you, but sometimes you have to take matters in to your own hands. There are more than enough job web sites to search through (UK Suggestions: http://www.milkround.com/ http://www.internwise.co.uk/ http://www.monster.co.uk/) some companies do not advertise that they take on interns or do not usually do it or have never done so, but may make an exception for a great candidate. If you find a company that you really like the look of, send them an e-mail! But make sure you send as much information as possible, as now is the time to show case all your hard work and look as appealing as you can, things you should include: Full name, portfolio link, linked in, github link and a well-structured message enquiring as to whether or not they take people on for internships and a little message on what you could offer them. If you get an e-mail back then fully expect them to request a cover letter! Ensure that it is hand tailored to the company, well formatted and grammatically sound.

Who?

It is important that you choose a company that will be able to nurture you in a positive environment, ensure that they have the resources, but more so the willingness to hold your hand through that initial learning curve.

Results

A very common question that is asked during interviews is “What would you like to get out of this experience?” (As well as the technical questions) and you better come prepared. This is an incredibly important question and ultimately can help you decide whether or not an internship is for you. What you want to get out of a web development internship is to have a place to funnel your passion and enthusiasm while acting as a sponge soaking up every scrap of information that you can, leading to you walking out of the office in a year’s time being as employable as you possible. Being able to discuss how you utilised and how code reviews have impacted your code will put you so far ahead of the other people applying for the same jobs in the future.

If you are fortunate enough to land an internship, make sure that you keep on top of personal projects, open source contributions, linkedin and of course reflecting these changes on your portfolio, you never know who may be looking! Also, working for free is in most cases illegal! Don’t be picky, but never sell yourself short!




5 tricks to using Silverstripe CMS

28 June 2013 - Will Morgan

If your website already runs on SilverStripe then I’m sure you know how easy it is to work with but here are some tricks that you might not know about to make your content editing experience even more streamlined.

tip 1

Tip 1. Creating new pages

Create new pages with ease by right clicking on a tree item and then either select 'Duplicate just this page' in SilverStripe 2 which will create an exact copy of the selected page in the site tree, or in SilverStripe 3 just select the page you want to create under the 'Add new page here' dropdown.

tip 1

Tip 2. Deleting

To delete multiple pages, use the ‘Batch actions’ dropdown in SilverStripe 2 or ‘Multi selection’ option in SilverStripe 3. If you delete a page by accident, don't worry just filter by all pages (including deleted) and the pages that you deleted will appear for you to restore. If it is some content, go back in time using the 'Page Version History' section on each page to revert a page to a previous state.

tip 1

Tip 3. Adding content

When adding content, hold shift and press enter to add a soft return to your text which continues the current paragraph, instead of creating a new line

tip 1

Tip 4. Adding captions to images

Sometimes adding a caption to an image using the caption text box can be a pain, so if you want more flexible caption text then I suggest creating a 1 column, 2 row table (with border set to none in the css styles) and then add the image and caption in each table column separately

tip 1

Tip 5. Importing content from word

Copying text from word is made easier by using the 'Paste from Word' button. However this button doesn't always work so well if you use the latest version of Word and may bring in html formatting that you don't want. If this happens, I suggest deleting the text you just added and use the 'Paste in plain text' button to copy your text into the content area. This leaves you with just the text so you can format your text correctly using the content editor.

If you have any other tips then feel free to share them here with the community!

12 July 2013 - Will Morgan

Code with focus: just get it working!

16 May 2013- Will Morgan

A week to build a website

We've recently finished a project with a very quick turnaround requirement - just a week's worth of development before we were to move on to bug fixing and content entry. As most developers know, tight deadlines don't always lend themselves well to assured quality.

So my technical strategy as lead developer for the project was quite simple: do the minimum required amount of work to make the features functional and useful. At first glance you would be forgiven for calling it lazy, but bear with me...

code with focus

Development aids

To start off with, I cut frontend design time in half by starting off with Bootplate, a SilverStripe theme created by taking the best pieces of Bootstrap and Boilerplate and putting them together. Overall I think this saved about 5 days worth of time in terms of development and bugfixing.

The next perk was Doug's wireframes, which made sure that instead of having several different kinds of page types, there was just one, but with a few different kinds of modules that you could mix, match and reorder to get a visually interesting, intuitive design and user experience.

Forms were coded to just save data and not do anything else fancy - no AJAX, just a page refresh and a thanks message

For the video functionality, I offloaded that work on to an API called Embed.ly. There's a SilverStripe module for that too, called EmbedlyField.

I also left all the JavaScript that wasn't handled by Bootstrap to the end. Unlike coding SilverStripe sites and business logic, anything creative that requires JavaScript tends to take its time because creative elements are subjective, which almost guarantees a time sink.

To aid content entry speed, I made all the modular elements of the site reusable by making them linkable to many pages. This meant that the content admin could simply tick a few boxes and they were set, and updates to one modular piece of content would be reflected everywhere else.

Somehow it's... ready?!

So after a week, we were there and ready for testing. As I'd done the least amount of work, and everything ran off one kind of page, there was less code to go wrong. This translated in to only small issues to fix and to-dos to complete. We found about 120 of them and between Mike and I, we fixed them all in a few days. I was baffled as I'm not used to having such a short development cycle.

This left ample time for polish, like allowing AJAX form submissions, adding pretty CSS transitions, tweaking typography and making content boxes adaptive.

Wrapping it up

I'm normally the one working on the bigger projects with much longer timespans, so I'm quite a fan of this alternative approach (breadth over depth), for a few reasons:

  • less stressful - there's more to show the client, and you don't worry about X features that haven't been started yet
  • starting minimal with less polish means less code, and less bugs, and a solid place to start from when you add the good stuff
  • things seem a lot more agile, and your commit sizes become smaller, which I think is a good thing!
  • we had a very happy client at the end

I guess you could liken this to coding with tunnel vision for the first phase of a project, and I think that's a fair comparison to make - only once you're done with the core functionality can you expand the scope to cover everything else.

Of course, this approach isn't for everyone or for every project, but for content heavy sites I'd like to use it again.

At the end of a pretty intense project, everyone was happy. We had the time and budget left over to add some nice features to go above & beyond the original remit. We used products where necessary to work smarter, took the time where necessary for bespoke functionality and generally put real thought into the job. The result is another project on-time and on-budget, with a very happy client.

You can have a look at the end product at: http://www.sword-achiever.com/ - it's something we're proud of. So proud of, in fact, that donuts were had by all to celebrate its launch.

12 July 2013 - Will Morgan

Stop Being Productive and be Productive

2 April 2013 - Doug Proctor

It's that classic moment that seems to happen to everyone: you're in the shower scrubbing away and idly pondering that problem you've been having. Maybe it's a piece of code that you can't get to work, or maybe it's something in Nietzsche's argument about truth that doesn't sit right with you. Whatever. There, in the shower, you suddenly come up with the solution. Why does this happen?

stop being productive

In her talk at From The Front 2012, Denise Jacobs dives right into explaining this phenomenon, which involves the beta and alpha states of the brain.

When you are in beta mode, you are in a state of sharp alertness, concentration and cognition. You can get a lot of things done in this state, if they are things that require this mindset. But the beta state does not always make you productive - sometimes this analytical mindset only takes you so far.

The alpha state is very different: it's a more relaxed, unfocussed state. When our minds drift into these states, creativity tends to flourish, and we approach problems differently. I know, it sounds counter-intuitive.

When you take your mind off a problem, or change the mindset in which you are thinking about the problem, you can suddenly make a surprise leap of progress. And I'm always surprised when it happens. "Why didn't I think of that when I was actually there at the computer trying to get that code to work?"

OK, interesting theory, but how is it useful?

When I'm at work, I'm focussed on the task at hand, and I'm often aware of other tasks that are competing for my attention. I know it's a skill to be able to prioritise and juggle these things effectively, and I've been told that taking regular, short breaks is a good idea. This always seemed to make some vague sense to me, but not enough for me to take it to too seriously. But now that I know why it's good for me, I can. Even better, I can find my own best way to reach that alpha state. Apparently, going for aimless walks works well, however paradoxical the idea might seem. Linda Sandvik keeps a tub of Lego underneath her desk. Mike Andrewartha flops on the office sofa. I always thought I'm "too busy" to do these things. But really, I think I've missed a trick.

So over the next month I'm going to be trialling different ways in which I can optimise my brain appropriately for the task at hand. If the theory is correct and I implement it well, I should see an increase not only in productivity, but also an increase in the quality of my work.

12 July 2013 - Doug Proctor

MySQL, NoSQL & The many varieties of Data Storage

26 November 2012 - Dave Hill

All Your Base

Recently we had the opportunity to attend the All Your Base developer conference in Oxford. This conference focuses entirely on databases and data storage for web developers. It offered an interesting insight into the current state of data storage.

MySQL could be better, but there's an easy solution

While MySQL is still king in the world of relational databases for PHP, its throne seems up for contention. It was the subject of only one talk by the Lisa Phillips of Twitter, and its flaws were regularly called out by the other speakers. Monty Widenius, the creator of MySQL, was speaking at the conference but his entire talk was focused on his current project. MariaDB is a fork of MySQL and is a drop-in replacement to MySQL.

MariaDB is the most likely technology we will adopt on our servers as it operates as a drop-in replacement for MySQL. The language, logs and database format are all exactly the same. The argument for switching is its performance gains with a very small amount of work. It's also worth mentioning most of the original MySQL team is working on this project. He presented a good case for switching.

Newly-popular storage paradigms

The more interesting databases were the non-relational / NoSQL methods of accessing data. Object stores such as MongoDB and CouchDB were a hot topic at the conference. Your data is stored and accessed using JSON documents instead of the standard SQL syntax, this means these new technologies are already well integrated with all modern languages. These databases are also very scalable and fast because the related data can be stored together in a single location.

CouchDB also has interesting use in the mobile and offline sector through a project called PouchDB. Dale Harvey, a developer at Mozilla and the creator of the project, presented this impressive JavaScript implementation of CouchDB. This allows for replication of server data to a local device where it can be queried locally and then be reinserted into the server database again when done - a powerful tool for offline synchronisation.

There were also key-value stores like Redis which are fast because of their simple data storage system. They act exactly like key-value arrays but they can be accessed across languages and systems. This makes them incredibly powerful for times when multiple systems need to frequently read and write data very quickly.

Graph databases, made popular by their use in the social networking industry, made their showing as well with OrientDB. Luca Garulli the creator of the project presented the concept of graph databases in a clear and concise manner. The concept is that all of the items you need about an object are only one or two levels away.

Wrapping it up

Despite all of this, for most of our current projects the relational database model is still the best fit. Here's why:

It is is readily available on servers

  • It is well supported
  • It is well tested
  • It is well known

The takeaway from this is that if you are working on a project with exceptional needs such as a new web-app then it is worth considering these new technologies. If you are going to build on top of SilverStripe or Wordpress then it is worth considering the new MariaDB instead of MySQL but only if you have direct control over the server.

12 July 2013 - Dave Hill

Rebranded!

16 October 2012 - Dan Hensby

For the first time since our inception in 2008, Better Brief is pleased to announce that we have rebranded: a new logo, a new colour, a new look.

We feel we have moved on from our origins of purely creating ‘websites’ as we now have a more varied skillset and client list. In recent months we have conducted social media campaigns, re-designed flagship web applications, built APIs, increased conversion rates and managed the production of an electronic toy.

better brief rebranded

We hope our new brand reflects our commitment to digital, our modern and focused approach. Look out for our new signage and ask for a business card!

Our website will be refreshed in the coming months, but is not scheduled imminently as we have a load of exciting projects to finish first.

Hope you like it!

12 July 2013 - Dan Hensby

Happy birthday to... us!

7 June 2012 - Josh Holloway

Better Brief is 4 years old this week, and wow, what a time it’s been. From day one we have been lucky to be jam-packed with work, and have delivered a range of interesting projects for fantastic people. In this post I try and give a bit of background into our origins.

Dan and I met at school and informally helped friends and family with their web needs. By the end of our first year at university, we were a “proper” business with 10 clients, including Landmine Action, Diana Princess of Wales Memorial Fund, Lambeth Council and a startup called My Last Song. Not bad for two 20-year-olds.

josh and dan

In April 2009 we won our first formal tender, for Devon County Council, to re-create the website for North Devon Biosphere Reserve. The business was growing, and in June we took the decision to put our degrees on hold and pursue our venture full-time.

The early days were intense. We had quit university and had to make it work. We had to make our parents proud.

A typical week would involve 70 hours in the office, plus another 20 hours of “strategy meetings”, usually in the local pub. We worked hard and the business consumed us.

old betterbrief offices

The Old Sweet Shop and Bishopsgate

The Old Sweet Shop (old) and Bishopsgate (new)


The projects we undertook were fantastic. Now we have grown, one of the few things I miss is having scores of projects that we could do in a couple of days and plop in our portfolio. These days we have to consider committees, Product Managers and sign-off procedures – which take time.

In 2010, as things got more hectic, we undertook our first major challenge: hiring the perfect employee to neatly fit in our small organisation. Introducing…Will Morgan! Will opened doors with his new skills, complemented ours and forced us to introduce necessary structure to how we undertook business. No more “verbal specifications”! Will had faith in us, taking a leap by quitting his stable job in a large organisation to join us. So, thanks, Will.

In 2011 we hired 4 more exceptional people: Doug, Mike, Matt and Dave. Most recently, Max joined our team as a User Experience Designer. Each has their core in web development while also holding a “bonus card” specialism. Organisations talk about “key hires” as if everyone isn’t amazing. Right from the start we made it clear that we wouldn’t hire anyone who wasn’t exceptional and who wouldn’t add value. Some of us are more commercially minded, others are more code-focused. Everyone holds value and is a core part of the team.

Our recent projects include designing two complex HR systems, a set of websites for Westminster Council, online marketing for a London hostel brand and a fresh website for a solar charity. We’re a stable and profitable agency with passion and skill at our foundations. You don’t need 20 years’ experience to make good websites: you need to understand the mechanics of the web and how people use it. We do.

We strategise and have a key focus on understanding and moulding the user experience through user testing, user interaction design and formal feedback loops. We are strong and capable developers, always pushing the boundaries of what is possible.

The future? Well – who knows? We hope for steady growth and more great projects. Our clients are varied and we have not settled in a niche, which I hope will still be the case in the next 4 years. Moreover I hope that the engagement and enthusiasm from the team continues, and that I am as happy then as I am now.

better brief staff

Thanks to all those who have made it possible: the team here, our lovely clients and those special people who have given us opportunities in the early days – Paul Hensby, Sarah Reed, Anwar Ishak, James Richardson, Mark Slocock, Joe Madeira and the many more...thank you.

A final word: business is hard. We have learned a lot and have a lot to learn. Dan and I were both hesitant to take the leap to start Better Brief but it’s the best decision we have ever made. As the kids say these days, YOLO! You only live once.

12 July 2013 - Josh Holloway

How can we gain more exposure for SilverStripe?

19 April 2012 - Dan Hensby

SilverStripe Meetup - 17/04/2012

At the latest London SilverStripe meetup we did things a little differently. Instead of presentations and discussions about aspects of SilverStripe, we assembled group of core SilverStripe users to discuss how we can promote SilverStripe in London and around the UK. ss uk meetup How can we help SilverStripe gain the traction it deserves in the current CMS market? How can SilverStripe compete with the more heavily-resourced alternatives, such as Drupal and Wordpress?We had a few ideas.

We talked about how we can promote SilverStripe and although the session covered a lot of areas, the discussion focused on three main ones: Marketing, Clients and Developers.

Marketing

Whether part of a company or individual developer initiative, we all agreed that marketing would definitely bring benefits. Actively promoting SilverStripe at other meetups and developing the existing SilverStripe meetup to more openly expound the strengths of SilverStripe more were some of the ideas mentioned.

SilverStripe awards could be handy for developers and agencies selling SilverStripe to clients. We already have Aram Balakjian’s SSBits Site of the Month award SSBits. Could this be leveraged to create a more purposeful marketing-orientated award?

Clients

Of course, in our day-to-day work we interact with clients regularly. During the consultation phases we try sell clients on the SilverStripe CMS (if appropriate for the project). So what can we do to help our clients see the benefits of SilverStripe?

We could collate and provide more information regarding how many companies and what kind of companies use SilverStripe. For clients, the fact that White House website Whitehouse is built with Drupal lends that CMS a lot of credibility. If we could maintain a list of websites using SilverStripe then that would go a long way to convince clients of SilverStripe’s merits. Especially if those sites are high-security and high-traffic sites. We know that big brands such as Debenhams, TalkTalk, the NHS and Activision (Guitar Hero) use SilverStripe and this is knowledge that we should promote much more actively as a community.

Another useful resource would be a detailed CMS / framework comparison website listing the benefits of SilverStripe vs other CMS systems. This could help clients as well as other developers see at a glance how SilverStripe compared to other systems.

Developers

Perhaps most importantly, there are the developers - the biggest part of the SilverStripe community. We spend most of the session discussing how we could encourage and promote SilverStripe to other developers that may not have used SilverStripe before. Some of the points put forward were:

  • More developer-friendly documentation and resources would make it a much more attractive option
  • Promoting SilverStripe to other developers and encourage them to ‘buy into’ it
  • A clearer way to find and implement modules on SilverStripe.org
  • Encourage the SilverStripe developer community to release modules
  • Emphasis that what you put in is what you get out of the community

We also discussed other facets of SilverStripe, such as the imminent version 3 release and using the system to create Web applications. SilverStripe 3 will bring a much-needed separation between the framework and the CMS which will allow greater flexibility when building applications with entirely different structures - another draw-card for SilverStripe and something that other developers should be aware of.

silverstripe meet up

Thanks to everyone who came along to the meetup and for adding your valuable thoughts and ideas. We got through a lot of discussion and we’re looking forward to seeing our ideas put into action and helping to grow the SilverStripe community in the UK. For those of you who didn’t make it – join us next time if you’d like to learn more about SilverStripe or if you want to help us spread the good word.

12 July 2013 - Dan Hensby

What is SilverStripe?

18 April 2012 - Dan Hensby

SilverStripe is an open source content management system and web application framework built using PHP. Created in 2006 by SilverStripe Limited in Wellington, New Zealand, the community has now over 436,000 downloads and over 6000 registered forum users.

silverstripe logo

When Better Brief needed a flexible and robust system to help us create websites that our clients could update by themselves without a lot of hassle, we chose SilverStripe and haven’t looked back. SilverStripe’s content management system allows the client to log into the admin panel, build the tree structure of the website, and publish content on pages with ease, by themselves without having to rely on us.

Keeping your site fresh and updated is a challenge but with SilverStripe, we can make this task easier by adding more flexibility to your site:

  • Multiple content areas can be added directly to the template so all content is editable via the CMS
  • We include widgets which you can add or remove depending on the page you are on
  • Modules can be added to improve the functionality of your site and are maintained by the community

SilverStripe is design friendly! We usually start with a clean template and only the default code required to build the menu structure. Then we build the site based on a designer’s template and from there it is up to the developer to build any new elements that the design needs in order for them to be editable in the CMS.

There is more to SilverStripe then just a content management system. Underneath the hood is a powerful MVC framework which allows us to extend the existing code and tailor it to our customers’ requirements which makes it perfect for building web applications of all shapes and sizes. As the framework is set up to help the developer create code faster, we can create a basic website quickly and then focus on extending the website.

I have personally used SilverStripe for a number of years and I have first-hand knowledge from working at SilverStripe Limited that it just makes things easier for anyone wanting to make a change quickly to their website. It’s also great to be part of the growing SilverStripe developer community based here in London. More and more developers are finding out the benefits to their clients by building their sites using SilverStripe which is awesome.

12 July 2013 - Dan Hensby

What is User Experience Design?

11 April 2012 - Doug

A little misunderstood

We could probably all guess that the term “user experience” refers to the experience that someone has of using a particular website. This is pretty self-explanatory. But what are the factors that make up the user’s experience? And how do we design the user experience? This is where there seems to a lot of confusion.

I asked a few people what they thought user experience design was and here are some of their replies:

“It’s designing a website that looks great and works well.”

“Designing from the users’ point of view, not from the designer’s point of view.”

“Building a website or application to be useable and beautiful.”

“Designing structure, content and interfaces for the user.”

“Improving the navigation of a site.”

Whilst some of these responses to do touch on aspects of UX design, none of them is correct, because none of them constitutes UX design on their own. From what I’ve read on the web and from asking around in the industry, the general perception is that UX design takes care of the following aspects of designing and building a website:

  • Usability
  • User interface design
  • Web design
  • Accessibility
  • Information Architecture (IA)
  • But designing an accessible interface or putting the most useful content in the most prominent place on the screen is not really UX design.

So then what is?

UX design is more about the ideas and principles that go into doing things like building an accessible interface and placing important content prominently. Often we do things that are regarded as best-practice without really knowing why we’re doing it. So the two key things that are missing from the above list are:

  • Understanding the business’s or organisation’s requirements
  • Understanding the user, who they are, what they need and how they behave

UX designers employ a variety of research methodologies to find out who the users are and what they are all about. They then combine this information with their understanding of the business or organisation’s requirements and work with designers and developers to create a website or application that meets the requirements of both parties. UX design is therefore a highly contextual process, which should ideally be deeply woven not only into the development of a website or application, but into its lifetime. Businesses change, users change and the context of everything changes.

user experience diagram

Diagram Taken from http://uxdesign.com/ux-defined

Research: who are the users, what do they need and how to they behave?

If you’re designing and building a website and you don’t know who’s going to be using it, then you’re flying blind. You’re making guesses and assumptions that could be wrong.

Businesses - especially online businesses - do not always know that much about their customers and the information they give you might be inaccurate or insubstantial, sometimes based on their guesses and assumptions. It’s the UX designer’s responsibility to find out everything that they can about these users, so that the business can deliver to them. They need to be asking questions all the time and they need to be listening carefully to the answers. It needs to be easy for the users to talk to the business about how they feel and what they think, so UX designers should also think about putting those critical communication mechanisms in place.

How do we ask the questions?

There are many, many ways in which we can find out about what the user wants, and how well we are doing in giving it to them. Showing the user sketches, wireframes or prototypes, and asking them about what they see is a great way to find out how users feel about new features or functionality. Being in the same room as your research subjects is great because you can see their facial expressions and body language when they react to what you’re presenting. If you can’t get people in front of you, or you can’t get enough, then there are numerous online tools for doing quick interviews and usability tests on people. They’re not all expensive; some are free, like Skype.

Web Analytics - for the questions we can’t ask

Whilst we need to know how they feel about your website, we also need to know how they behave on it. Web analytics give us data on page visits, navigation, calls-to-action and whatever has been defined as a conversion. Add to this traffic cycles, usages patters and search logs and we have some potentially invaluable information on user behaviour.

And repeat

We need to always be researching our users to keep our understanding of them up to date. We also need to always understand the businesses we work with, their markets and competitors. If we can’t keep our understandings current then we can’t keep up with changing contexts, which means we can no longer be sure that our websites are performing as well as they could be.

This is why user experience design is not usability, user interface design, web design, accessibility or information architecture.

12 July 2013 - Doug Proctor

All about Chrome Frame and why it's the way forward

4 April 2012 - Will Morgan
chrome logo

Having just wrapped up the bulk of the development of a cutting edge, graphics heavy module for a client, I was left with the challenging prospect of making it work in IE.

The only trouble is that when you’re trying to get things “working” in Internet Explorer, the definition of “working” can vary from version to version, and computer to computer. This especially holds true when we’re talking about SVG, and its less able cousin, VML.

What is SVG?

SVG stands for Scalable Vector Graphics. In layman terms, it’s a mark up language similar to HTML – what your web browser uses to understand webpages, only that it’s dedicated to drawing 2D shapes. It’s been around for over 10 years – its initial release was in 2001 but has been left widely ignored due to browser support issues, that have since been eliminated.

What is VML?

VML stands for Vector Markup Language. It’s to SVG what the ape is to the human, and works only in Internet Explorer versions up to version 9, where it was abandoned in favour of SVG. It’s an older language and was abandoned in 1998, and yet its implementation has been mangled in Internet Explorer all the way up to version 8, which was released in 2008. As you can imagine, 10 years after development ceased, lots of bad things happened.

Translating between SVG and VML

As both languages have an inherently different syntax, they are incompatible with one another. This is where a handy JavaScript library called RaphaelJS, developed by a smart developer called Dmitry Baranovskiy, comes in. It lets you define the SVG shapes in JavaScript, and then converts them in to the correct format based on what your browser supports.

You can also animate elements and interact with them in JavaScript as you would with any other HTML element, and a whole lot more. For what it’s worth, it’s a great library and does an amazing job of letting web developers use the latest technologies without headaches. It’s certainly saved the web development industry thousands of man hours.

Lost in translation...?

After the module was finished and ready to go, we handed it over to the client for some user acceptance testing. As is normally the case, it worked great in Firefox and Chrome, and even IE9, but in IE8 there were some serious performance problems, several times worse than IE7. So I went back and tried to make the code as light as possible on the browser’s processor and memory usage. I benchmarked several different ways of animating shapes, and while there was a slight improvement in performance, we were pushing IE’s VML engine to its limit – effectively redlining the browser. We still had performance that was choppy at best.

It looked as if IE8’s VML engine had taken one step forward and two steps back from its IE7 predecessor. Looking at what the greater development community was saying, we were right.

Another problem was the performance of IE’s JavaScript engine. Have a look at this pretty graph (lower is better):

chrome benchmark results

As you can see, IE9 is 17 times faster than IE8.

However, have a look at Chrome 11. Bearing in mind these results are a year old and they’re slightly contested, it’s still shown in the results graph as one of the fastest browsers. What if there was a way to use another browser’s rendering engine instead of being stuck in the slow lane? Well, there is...

Chrome Frame

At last, an extension for IE that isn’t a shopping site toolbar.

What does it do?

In essence, all it does is uses the engine that Chrome uses instead of IE’s. That engine is called Chromium. This isn’t installing a new browser; it’s simply offloading the display of the webpage to something else. It’s designed to be seamless, so that users who know nothing more of a big blue E as “Internet” will never get confused, and so that users inside large companies with change resistant IT policies aren’t left behind with their legacy intranet apps.

How is it deployed?

There’s a handy JavaScript file called CFInstall.js that, when included, will prompt users of a subset of IE versions to install Chrome Frame. It’s a short installation, and when done your page will refresh to display with Chromium.

Supporting IE6 users, kind of

As the browser merely acts as a host for the extension, you can include IE6 user support with your application, albeit with a tiny catch. In fact, it’s one of the main reasons why Chrome Frame was created – it allows the best of today’s web standards for yesterday’s web browsers, without any software having to change.

Tread softly

It’s also opt-in, which means you can selectively use it for all or few pages. For a relatively late change in the web app, this was essential for minimising testing footprint. We decided for the time being it would be best to be pragmatic and apply Chrome Frame only to the module that really needed it.

Summary

Having heard of Chrome Frame for quite some time, I finally had the perfect time to use this compatibility silver bullet. It’s like turning your grandma’s black and white telly in to a fancy HD TV with minimal hassle.

However, it’s still important that you give some level of support to users who decide not to install the plugin.

12 July 2013 - Will Morgan