(c) escipaul

Welcome back all, a brand new year and new blog posting – yahoodle! Okay, here goes with our ten ways of Orange.

Why?

Well, like kicking the tyres and checking that the toffees are in the car somewhere, we find it useful to remind ourselves how we do, what we do. I blogged about our general approach to our process, so this is more of an overview to the ways of Big Orange. Nope, it doesn’t related to the work of the great man himself…, it is certainly not Clockwork and won’t get you to Ibiza, but they are the words of the gospel according to Big Orange Software. Amen.

What are the ten then?

1. Bring fresh ideas to everything
2. Get good briefs
3. Measure twice, code once
4. Choose the right tool for the job
5. Basecamp the world
6. Go round and around then stop
7. Aim for 100%
8. Big clear deadlines
9. Eye for the detail
10. Review after the launch party
11. Turn the world orange
12. Launch an airline

1. Bring fresh ideas to everything

Our strapline is ‘Fresh ideas for the digital age…’ – okay, we decided we needed one, we did some **thinking** over some tea and came up with that one. We do quite like orange so the fresh part seemed to make sense but over the last few months looking back, I think we generally do try and fulfill that. There have been two situations recently where we have been invited in to companies to chat through some initial digital project ideas, mobile, web, social and so on. Both times the people we have been talking too have been really pleased with our ideas, “…instead of just suggesting blowing a large pot of cash on PPC Google ads!”. Which is nice. Living the strapline.

2. Get good briefs

What makes a project go well, is similar to a good meal in lots of different ways. You need lovely ingredients, hand nurtured, Fair Trade, locally grown, preferably cooked by Hugh Fern-Whit. However, the recipe is the most important thing after that. Good briefs on a project are the same for the digital world. They have to be right, contain all the information about what the project and the customer wants to achieve. Not reams of paper, but honest goals and objectives. With the odd chart.

3. Measure twice, code once

My father in law has taught me many things. Mostly, about looking after his daughter and the right way to carve a turkey. Another one of his good ones is about carpentry. He always says, “…measure twice, cut once…” as you cannot stick wood together. Terribly easily anyway. It is the same with our code. We make sure we chat, drink tea, draw things, plan and write it all down before we code anything as it saves confusion and poor products at the end of it. In the digital world it is too easy to think that you can just repeat or undo without thinking of the time implications on a project.

4. Choose the right tool for the job

Carrying on the tool analogy, it is always worth choosing the right tool, technology or software for the job when planning the first stages of a project. Sometimes, you might need to wireframe. Sometimes, you might be better creating a prototype. Sometimes, you might actually need to meet people and do some more talking before you can get to either of those. Whatever the project is, match the tools to the job as one size doesn’t fit all when it comes to projects.

5. Basecamp the world.

Les cartes est sur la table. Nous aimons le Basecamp. We just do. Our customers love checking and seeing what the latest is on a project. Our designers and developers can post up files or messages for comment. Everybody we give it to just seems to pick it up and run with it. It is cloud hosted so is available everywhere pretty much everywhere and all the time. It just works and we love it.

6. Go round and around then stop

To make sure things are clear for everyone and that we are not running around after our tails, we have some clear rounds of amends for our projects. Once we have delivered the first version of anything, there are two rounds of amends. An amend is a batch of feedback really, if that helps. As long as customers chug through all the parts that you send them, in one great hit, this does work very well. We can fix these as project milestones so that everyone knows where we are. It isn’t on the moon. It’s happy projectland (TM).

7. Aim for 100%

There is a great story about errors in manufacturing, an urban myth I am sure but this time, no aliens and no autopsy. The story goes that in an American car factory, cars start rolling off the line with one wheel that falls off, as they are driven to the other side of the plant. “Darn!” says the foreman and lets the line carry on chugging out shonky cars while he tries to see where the fault lies. All the while the shoddy three-wheelers are piling up, ready to be fixed once the fault is found. In a similar factory in Japan, the foreman has the same problem. “Aiiiiiiiii!” he exclaims and stops the line immediately to go and find the fault there and then, fix it, before any other shoddy cars fall off the line with three wheels. We love Japan and we always aim for 100% working. Correct. As described. Less errors, everyone happy, no pile of three wheelers.

8. Big clear deadlines

Over the years we have found it is much more efficient to work in blocks on projects. To do that, you need to work with everything you need, all the fonts, images, files, content and so on. Customers also like to know when things are going on so they can get their organisation ready and also track the progress of the project. How did we help with this? Well, we just keep to 5 or 6 steps for a project and don’t move from one to the other unless it is complete. Then, everyone is clear when we are doing what and makes sure they can either help by providing **pretty pictures** to us, or really good advice. It definitely helps.

9. Eye for the detail

Projects can sometimes seem like marathons stretched out over many months. Everyone gets fatigue towards the end and wonders if things are ever going to launch. What you do have to make sure at that point though is that you still have an eye for detail, what was the link for their Facebook page that needs to go into the footer? Are those really the right images to use? Is the Google Analytics account really that one to go into the footer? We don’t just trust our eyes though, we also have a very nice checklist to run through to remind us. There is a devil in the detail. He is called Cecil and we hunt him down religiously.

10. Review…after the launch party

For every project we do, it is nice to celebrate the launch. Caaaaaaaaaaake! After the sugar rush has subsided however, we always meet up with customer over some vitamin shakes and chat through the project. What went well, what didn’t go well and what can we do better our the three most important questions. Three is a magic number.

What’s next?

Over the next month or so, I was going to blog a little about **the process that Dares not speak its name** namely, testing. In a few different forms and with some nice, fancy but free tools. Nice. Yep, that met my test script – yahooodle!

A lovely cup of tea...

Kicking back in the office with a fresh brew, after finishing another proposal this week, I realised that I had included quite a large section on ‘how we do it’, namely our process for tackling web projects. Web development or project management strategies are like diets – there are so many of them out there and most web people have probably tried them all. Actually, not many based on cabbage soup to be fair, so maybe that doesn’t quiiiiiite stack up, but you get what I mean. Scrum vs. Agile vs. Waterfall, the list goes on. So, which do we follow? Hmn….can I duck that question and instead let you know:

1. What we do
2. What we don’t do
3. What we have learned from our join experience

as that is probably more illuminating. Over the next few weeks, I will break apart the individual elements above and give some examples from recent projects to illustrate how they work in reality. Do you do any of the following when starting a web project?

What we do

1. Research - put on a very large brew and grab a pen and paper, its research time! Before we put finger to key and set out what the project is going to be, we throw ideas around, talk about what we have seen recently and browse around to check out similar projects that have succeeded or fallen at the wayside, to see if anything can be borrowed.

2. Proposal - all of our best ideas go into one of our proposals, designed to be easy to read and to allow you to pick and choose what you want to go ahead with. We like to give you more than you were expecting, maybe even some surprises and things you weren’t thinking of, to give you some real choice there.

3. Kickoff - the most important meeting in the world! We like meetings about as much as you probably do, but the first one, the kick off is the most important. Its a chance to meet everyone on the team from our side and yours, as well as sketch out the main details of the project. When we say sketch, we do mean sketch. The large paper and pens come out to draw new pages and discuss.

4. Survey – after hearing from you about what you want from your digital project, we really recommend you ask some of your current users / listeners what they think. It might re-inforce what you are current thinking, it might well not. Even so, it does give you a good baseline opinion to return to later on, once the new shiny project is installed. We can help you set this up so don’t worry if this sounds daunting.

5. Moodboard – once we have heard what you think and what your users think, its time to make a moodboard. This is really a collection of colours, fonts, layouts and other rough design ideas to match your early thoughts. We find it a very useful first step to show you some early ideas and get a quick response to feed into the next stage.

6. Write – it is very easy to forget that websites actually need to be written. Before anything can really be designed, the design team need to know what type of content they are going to have to include.

7. Design – coming with a design that suits you and your project can be tricky. It should always be done with the users in mind, which may or not equate to your own personal taste or not. We have collected a large amount of visual bookmarks that you can flickr through, to see what sort of styles you think are good for the project and the ones you don’t. We then create a design and revise it twice before signing it off.

8. Build – one of the most exciting and probably the longest phase in any project, is the welding together of the design and content created so far, to build the project. This is usually in our Content Management System VEBO on our staging servers. This allows you and us to play around with it before it goes live, so we can perfect it, polish it and tweak it as much as we like.

9. Test – an area that we could easily devote several blog posts about, testing the project is key. This will usually involve lots of different types of testing including browser testing, code validation and more. Do ask if you want to know more about this before we cover it in a future post.

10. Redo – you only test, because you want and need to redo things. This is an iterative process, gradually refining the project until its ready for final launch.

11. Launch – break out the sparkly, its launch time! Usually, in the two to three week period before this, we will help you roll out a marketing campaign to make the most of this event, through social and conventional media. We do this because we want your project to succeed as much as you do. It’s also fun, being able to tell people how good the new thing is.

12. Re-survey – remember those user surveys we did way back when? Yep, now is the time to repeat them. You could either do this with the same group of people, or just ask random visitors to the site to repeat the survey work. This could also involve elements of A / B testing on key parts of the site, to make sure they are doing as much as they can for you.

13. Measure – it is all about the numbers these days. Well, I think it probably always was, but anyway, visitors, page view times, referrers and more are all important. Are the numbers up or down? Are they the right numbers? Where is successful and where isn’t?

14. Review – two to three months after the project launches, we like to arrange a review of the whole process with you. How did you feel the project went? What was great about it all? Anything we can do better for next time? The main focus of the review meeting is to assess whether the project was a success based on your criteria and what the future holds for it. Rarely does a project get launched and just end there, there is always a future for a project, even if it has to change form slightly.

What we don’t do

Rush. Use Comic Sans. Impose Ideas. Do The Same Old. Be Too Conventional. Take Too Long.

What we have learned from experience

Get Content Early. Listen. Revise and Adapt. Get Feedback. Survey and Test throughout. Have Fun. Launch great things.

The Big Orange 14 Steps – 2 more than the average bear

Coming soon, the more complete guide in the next issue to the first few steps here, with some practical examples and great links. Honest! Stand by for incoming…

With the plethora of mobile devices around these days, well, within the offices I tend to work in, the car parks with *YouTH* hanging around on the devices…crikey, mobiles are everywhere! As to how best to approach the mobile sector, do have a look at our guide to all things mobile. For those companies that are already mobile, several have created specific sites for touch devices, namely Apple’s iPhone, Android powered Google devices (such as the recent lovely Samsung Galaxy) and others. How does this differ to designing for standard mobiles? Touch is the new click!

What is YouTube up to?

YouTube recently launched a new version of its mobile site at http://m.youtube.com to offer a better mobile browsing experience. Specifically, it aimed to:

• provide an HTML5 powered video experience (without Flash)
• give users better quality than video through YouTube apps on devices
• be targeted at more devices, including ones with smaller screensizes
• h.264 codec for video, instead of WebM or anything else more open source

So, how does this shape up with their touch site? Which would you prefer to use on a touch device?

Touching YouTube

YouTube rolled out a customised version of their old mobile site for touch devices about two months before their new mobile site. Strangely, it still contains features that would be good for both standard mobile handsets and touch ones. Do check out the gallery on Flickr and add your comments, or just the site a try and let us know what you think. Specifically, the site still wins because of:

• tabbed navigation for content areas
• use of JavaScript functionality
• advanced searching
• better use of screen size
• its use of vertical layouts

Tabs will save us all

Laying content areas out with a tabbed navigation just seems like a no-brainer for both mobile and touch devices. There is a much smaller screen size to design for so using short, often single, words as the labels on tabs to get to content is a real winner for the touch site. The mobile site on large screens seems lost without it.

Send for Javascript!

JavaScript support is patchy in the mobile world, but better than you may think to start off with. Even mobile devices with a medium level of support for XHTML, CSS and JS, will be able to carryout basic manipulation of the XHTML that the page is made of. The touch site uses JavaScript for some lovely show and hide interactions, only showing the minimum of information to start off with and allowing you to find more onClick, as you browse around.

Search to the Power of 11

If you aren’t browing videos or following a few channels, the next thing you will be doing is searching. The touch site has some great searching, remembering recent searches and more. Admittedly, it can use the power of Ajax, so hovering suggestions boxes are very easy on the eye and draw you in. Apart from this, the actual layout of search results are also better on the touch interface, easier to browse through, clearer layout of the key information, a win all round really.

Screens The Size of Postage Stamps

One of the fallbacks of designing for mobile browsers, even if you are checking the user agents and serving different versions ( what, playing with media types too? you crazy dawg ), is that you will still generally have  a smaller screensize to deal with. This means the touch site is going to beat you hands down every time in the amount of space it will have to display content. Thumbnails are bigger, buttons can be used instead of text navigation, more than one option can be provided in menus and so on.

Verticality is the new black

Touch devices tend to major on the perceived degree of  **control** that users get, compared to standard mobile devices. Heck, it probably gives iPhone 4 users something to do while they work out how to hold their device and get a signal, right? High fives all round! Oh, you have an iPhone? Okay, lets move on…;-)

Vertical layouts for content are great on touch devices. People are getting more and more used to scrolling layouts and the YouTube touch side does allow for this to a much greater extent, allowing more content to be shown, providing more menu options and so on.

Just look, don’t touch!

So, if touch is all that great and easy to design for by doing those things above, what are the pitfalls to be ignored Mr Smarty Pants?

Well, these are probably the main ones:

1. Feedback for users is key, clicking 20 times on a button won’t help anyone, least of all the site (sounds and other visual techniques can be used to help here) 
2. User inputs need to be large enough to be used, but also ones that don’t need the non-existant hover state
3. Remembering data where possible, such as search results, so people don’t have to retype – cookie support is also better in mobile browsers than you might imagine, heck, get people to sign in and store session information too if you like!
4. Only thinking about one orientation and screen size – enter the accelerometer! 
5. Make sure your links are clear and ever present - use tabs where you can
6. Don’t forget that **touch** doesn’t mean Great Internet Connection (TM) so don’t go crazy on those large graphics, this is like the “Wild West Web of 1992 – Sheriff Neilsen“

Okay, I am SOLD! What else can I touch?

So far, the other touch-optimised site that has been recently released is Facebook – http://touch.facebook.com – but if you find any more you like on http://www.mobileawesomeness.com - let us know and we will check them out!

As Blackberry releases its latest OS, Apple iPads spread into Leicestershire then the EU and Nokia shouts about N8 it does seem like the world is going app-store crazy and that we should have definitely listened more to Dom Joy.  

So why bother with mobile?

As mobile devices have got cheaper and cheaper over recent years, their take up has increased. The amount of smart phones sold keeps going up and up each month. Apple iPads are predicted to sell around 300,000 units by the end of this year and even Rupert Murdoch thinks it is the way of the future.  

The main point for any owner of a web business, or organisation that has a website, is that people are often out and about or away from their computer, yet still want to get information from you and your site.    

Don’t believe me? As most people are using Google Analyyics on their site, why not drill down and check out either the mobile tab or the screen resolutions – the tell tale 320 px by 480px is the default size of the iPhone browser – check out the sample from our site below: 

Okay then, how and what should I bother with? 

If you don’t have any mobile site at all, you need a strategy. With phases. With a common sense approach (TM). Based on what I was talking about in terms of homepage design, you always need to consider your users first of all. Are they either: 

• high rollers (A B C 1) with the latest iPhone 4, iPad and iEverything
• students with a reasonably new phone, Android or Nokia powered
• my mother, with a Nokia from the days when phones were house-sized
• anyone else, with a generic phone and a very basic Internet browser

Why does this matter?

You have a choice of what to build for mobile users – a mobile website optimised for the smaller screen or the world of apps for particular phones. Oh and don’t forget SMS messages too.

Mobile websites

e.g. http://m.guardian.co.uk , http://m.flickr.com or http://www.bbc.co.uk/mobile

Pros? – A mobile website can be accessed by a wide variety of devices, from the latest to the older. It isn’t tied to a store, like Apple’s App Store, so can be updated easily and quickly. Generally speaking, the development cost is also lower for these types of sites. Also, with the adoption of HTML5 by *some* devices, these sites can even work out where you are e.g. http://mobile.papajohns.co.uk so you can find your nearest source of Pizza Joy

Cons? -  Your mobile site is effectively another website, so you have to then keep two websites up to date as the content is slightly different on both. Text still works much better on mobiles so you won’t be able to use many images. The layout is very *vertical* in nature, so this might limit the number of pages you can have. Also, if people are browsing the site away from home, you need to keep the site relative small and quick so they don’t incur a bill for thousands of pounds for accessing the site. Last of all, despite the fact that mobile browsers are getting better, they often struggle with animation and other media like video so interactivity has to be limited.

Apps 

e.g. *plug alert!!!* our free, lovely SEO website analyser tool, produced with Impact Media – download today

Pros? Apps, especially iPhone ones, have a certain level of *cool* attached to them, even still. If you want to associate yourself with this and the latest iPad craziness, then you need to have an app. They can access parts of the phone that a mobile website cannot e.g. contacts and camera, so tend to be used more frequently than a mobile site. They are more engaging as they can contain video and other elements which mobile sites sometimes struggle with. People often want something to own, to take away from a site and an app is perfect for that, building a relationship with a person as they carry your app with them.

Cons? Generally speaking, apps tends to cost more to produce than a mobile site. Then which platform do you develop for? iPhone / iPad, Android, Blackberry, Nokia, Windows devices all take different apps which have to be produced separately. Each will then cost to produce so to cover all bases and app stores could be expensive.

SMS

e.g. “Get 10% off all our new products by quoting product code TENOFF – only valid this weekend! http://www.shop.com for details”

Pros? Texts are relatively cheap to send and every phone, even the old bricks, can use them. They are also quick so can be useful to send out updates and the latest news easily. They can also contain links to web pages, which devices that have Internet browsers can use.

Cons? None whatsoever, apart from the fact that some people find them annoying. Make sure users are opting in to receive them otherwise they may well hate you forever.

I think I get it now. Erm, what is everyone else up to? 

Recently, the big food retailers have been engaging in M-Commerce. Cringe. I mean mobile things. Here is a list of what they are all doing (some of these links only work well on a mobile phone!) :

• Marks and Spencers – mobile site? yes | apps? no (since May 2010 1.2m unique visitors to the site, 300,000 who purchased goods – marketingweek.co.uk 03 August 2010)
• Tesco – mobile site? no | apps? Nokia Ovi - iPhone shortly - Winefinder launched
• Asda – mobile site? no | apps? iPhone due Dec 2010
• Sainsburys - mobile site? corporate | apps? no
• Ocado - mobile site? yup | apps? Android - iPhone    (4.4% of all orders since it launched in July 2009 – nma.co.uk 20 April 2010)
• Waitrose – mobile site? yes | apps? iPhone
• The Co-operative – mobile? no | apps? iPhone
• Aldi – nope
• Lydl – nothing at all

What is interesting about this is that the offerings do seem to matched to their user base – as I pointed about above. Ocado is going to be targeted more towards the higher earner, so iPhone seems like a natural choice there. Tesco pitching their lot towards Nokia first of all, as well as iPhone later, is definitely done with their user group in mind, Nokia having a much greater user-base than iPhone, in all social groups.

Okay, so what’s a good first step?  

1. **blatant plug alert** contact us about a mobile site, app or for some advice – ding!
2. A simple mobile site
3. A content management system, that is mobile-enabled – our VEBO system will have this very shortly for you.

I would definitely suggest to anyone to get a basic mobile site up and running at http://m.yourwebsite.com or similar, just a few basic pages. If you hook in your Google Analytics, you can see how much use this gets and then see what device are using it, allowing you to target some apps in a second phase. Sound like a plan? Good! Enjoy