Entries Categorised as 'Development'

Tips from the Obama for America New Media Campaign

June 12th, 2010 · 1 Comment · Development, Product

Scott Thomas, Design Director for New Media and overseer of the ‘Obama for America’ election campaign web site, took time out to go over what made the campaign a success from his perspective. What techniques, means, methods and more they used to achieve their ultimate goals. The video available over at The 99 Percent is worth every minute of watch time.

For those less interested in watching and more interested in a summary of the 14 minute talk, Scott Thomas highlights some interesting core notions, ideas and areas, but to preface what he says and to quote the 99% website:

Scott Thomas is constantly seeking the simplest answer to complex problems.

With that said, here are the salient points of note from the lecture given by Scott Thomas:

Design Consistency

From the outset the team realised that they would need consistency of design throughout, from the digital, right through to the traditional. Consistency was essential not just for brand awareness, but also in terms of being ‘on message’ and in providing strength to the campaign.

He doesn’t say as much but there is clear value in consistency, on many different levels, and to this end they derived processes that would help drive this need forward, defining consistency of output in terms of colour, elements, message using:

Mission statements … helped define everything that was being done. They focused on an ethos of making sure every aspect of design was “clear” and “concise” and that all design should engender “hope” and “experience”. Slogans that encapsulated these ideas were created and posted everywhere, forcing the team to think about them at all times.
Brand Groups .. were used to help define exactly how these mission statements were to be executed. Consider them as mini corporate design guides, that make it easy to consistently deliver output int he same clear and structured fashion sot hat it hits the target.

Effective Triage

The reality is that when you are in a fast moving environment, and you need everything done “now” the design process will reach a bottleneck at some point. It is therefore important to have effective triage; to be able to sort tasks on a basis of need and to be able to defer responsibility or things more readily. Not necessarily by giving up your core design values, but but opening up access to assets for others, providing transparency and for the ability of other stakeholders to feel like they are more involved in the process.

Effective apportioning of tasks and responsibilities, as well as letting go with clearly defined rules and guides, as outlined in point one, makes it a lot easier to accomplish much higher level and more important tasks. If you focus on the minutae, it is super simple to lose control of the bigger picture and of the more important things.

Use IT to Better Ideas

Simplicity is key to success, and information technology should be used to improve upon ideas for the sake of that simplicity. Lots of processes are over-complicated and can be reduced down, thus enhancing their efficacy and conversation rates. When you want to involve people, you need to lower the barriers to entry. Open you door, let people in easily, and ask pertinent questions later by deferring the need for them. This is a definite key to their grassroots success, with individuals being able to start cold calling fellow politicos in no less than 3-4 clicks.

During the course of the campaign they used analytics and process flows to monitor what was happening, and constantly aimed to improve the situation by reducing roadblocks. This was an on-going process and proves that there is little point in rolling out designs and code without observing and enhancing it as you go in order to avoid diminishing returns of scale.

Bring Output In-House

Back on the old cherry of ‘consistency’, the team weren’t afraid to bring any task in-house. Ensuring quality of output wasn’t ever up for discussion and where they had to do things internally, from design digital content or even physical objects and signs for TV appearances, they would just do so. When much larger things are at stake than merely budget, you need to keep your eye on the ball and make what would not necessarily be business-friendly decisions. Ultimately you need to resource your teams and processes properly to maintain the aims of your campaign. False economies only spiral out into bigger costs later, and that is not just in terms of monetary costs.

Collaborate Successfully

Success is about collaboration. Knowing what you can and can’t achieve and working with people that inspire and motivate you. When working closely with a set of people you need to have confidence and a desire to drive things forward. As soon a this is lost you loose a necessary cohesion in the high-pressure environment. Belief and passion are real drivers and tapping into those goes a long way. It pays to draw this ideal through every strain of what you do and maintain it from the beginning to the end of any project. It’s easy to let it wane, but with consideration can be avoided. Who doesn’t love to work with empowered and passionate individuals, right?

Evolve Your Ideas

Evolution of ideas is important. If you look at the ’2 year lifecycle’ of the new media campaign there is a clear evolution of the designs and implementation. Evolution isn’t a dirty word – even if creationists thinks so – and when the pressure is on to get work done, it allows you to design and implement, and then enhance, not just the once but again and again and again.

The evolutionary process breaks down barriers to getting work signed off and implemented, and allows you to work more readily on the fly, to hit the ground running and to keep your momentum. It’s super easy to let road blocks of design and function get in the way of rolling out product, losing sight of the most important thing, which is to have something out there, working for you which provide implicit usage feedback and which can be worked on and improved over time.

It’s A Wrap!

So there you have it. Some golden words, thoughts, and ideas from Scott Thomas. All things that make so much sense, but which get lost in the maelstrom of any big project. Oh … And a last little bit of advice? Write things down.

How To Enhance Your Website Search

June 5th, 2010 · 1 Comment · Development, Product

Today I came across an interesting blog post by Dan Zambonini entitled Museum Search: Recommendations. In it he talks about his analysis of museum web site search data and what he learned from looking at it, both in terms of trends and in terms of determining web site form and function.

I liked the post because it reflects the fact that in using a web site, your visitors are providing you with potential data, which, if you choose to capture it, can be taken and molded into enhancements that improve the usability of a site and encouraged prolonged use or, even better, repeat visits.

Dan makes some great points, all of which back up my own experience in working with search, and matching data whilst working at Last.fm. You really should take the time to read his brief post, but in outline the highlights the following points:

Any search text entry field should readily accommodate the median length strength at least (and then some).
Soundex, Levenstein or other such probabilistic matching techniques should be used to help smooth over typical typos, errors and misspellings. Even a library of miss-typed words could be used to speed up searches.
Advanced search functionality needn’t be brought to the fore. Open up such functionality, only as required, and certainly only in the background, as an option, given that few site visitors will use it.
Pre-load popular search terms to help speed up the search process for a sizable number of your site visitors.
Use client-side validation techniques to help streamline the search strings before submitting them to the database, taking up valuable database resource by prolonging queries. Definitely a consideration on popular sites.

All valid points and ones which I would whole-heartedly agree with. They underline the need to ensure for an optimal experience. To my mind in developing search you need provide for the following:

Speed – Any techniques that help decrease time spent search, from web service calls to pre-loaded and popular searches improves the experience. The long tail is great, but the reality is that 9 times out of 10 people will be searching for the same, or similar things.
Accuracy – Smooth over the cracks. That is to say, use whatever means to help match typos etc. whilst at the same time, use best matches, direct hits and other means to send searchers to the desired page rather than a results page, with a possible link back to the results if the chosen result is not the one they wanted.
Usability – Whatever you do, provide use logic in the process, and make it easy to understand for users as well as easily readable. Auto-fill should be split into sections as necessary, such as collection, exhibitions, etc. much like on a results page. Simplicity is required, because people will likely make a beeline straight for the search box once they hit your site.

Even with a strong navigation, which every site should have, site visitors will use search, and you should treat it as part of the navigation of your web site. Search isn’t just for people who are lost, it’s the clever site user’s means by which to get from A-to-B in a single click or so.

Anyhow, thanks to Dan for sharing a nice summary and info-graphic of his research of the search data.

JS Unit Testing with jQuery and Qunit

June 1st, 2010 · No Comments · Development

For those that like to do test-driven development, even in javascript, then you might be more than interested to learn about Qunit. Qunit is a test suite developed by the team at jQuery for their own use and which they have of course made available for others to use. And the great thing about it? All you need to get started is a JS and CSS file + a bit of HTML, of course!

Pre-existing JS Unit Tests

To get things kicked off the jQuery team provides access to a slew of their pre-existing tests, which can be downloaded and included as part of the range of your own tests, from AJAX, to dimensions, to events, to selector tests. You can find these tests are under the Reference Test Suites on the Qunit docs page of the jQuery website. They provide good fodder and resource for developing your own tests and ideas for them as well and are definitely worth a review for anyone just starting out in JS development and wanting to learn more about unit testing.

How to Set-up the Unit Tests

So what do you need to get started with jQuery Unit Testing? To begin with download both of the following files, Qunit.js, & Qunit.css, and include them in the head of your HTML document along with the latest version of jQuery. Then add the following HTML to the body of your document so that Qunit can render the test results properly:

     <h1 id="qunit-header">QUnit example</h1>
     <h2 id="qunit-banner"></h2>
     <h2 id="qunit-userAgent"></h2>
     <ol id="qunit-tests"></ol>

As you can see, getting set up with a basic testing environment is easy and pretty simple. With this set-up you can then include your own Qunit tests either in a SCRIPT tag or in your own JavaScript external include.

Writing Your Own Unit Tests

So now you’re ready to start writing your own tests, lets keep it clean and simple. The unit testing API is split into 3 sections:

Setup – The basics for defining tests, grouping them and getting them started.
Assertions – The Yay and the Nay of whether conditions have the met with boolean tests, comparison tests and recoursive comparison assertions for arrays, objects, etc.
Asynchronous Testing – Functions to stop and start the test runner.

Putting this together – not that we have looked in depth thus far – a very basic unit test would look as follows:

     module("Initial Test Module");

     test("Test with multiple assertions", function() {
       expect(2);
       equals( true, false, "failing test" );
       equals( true, true, "passing test" );
     });

Deconstructing the above test. “Module” provides a means by which to delineate individuals sets of unit tests. The “test” function with title and callback function params includes 2 further functions: “expect” and “equals”. The former sets the expectation for the number of assertions that have been defined and follow, whilst the latter obviously does the grunt work and returns the results. In defining an assertion you need to provide 3 things:

The expected result.
The result.
An error message.

As you can see writing even the most basic tests is super simple and pretty much a no-brainer. Adding complexity to the mix, with more test modules, multiple test and assertions interlinked and daisy chained together makes for a powerful brew.

Wrapping Things Up

To my mind there is little point in re-inventing the wheel, especially when so many good test examples exist, and which you can draw on for ideas in your own testing, but I thought it might be worth highlighting various points that can add flavour to your unit tests:

“Module” provides lifecycle hooks for running code on setup and teardown of each test and you can just as easily bind tests to functions and events via jQuery also. Good examples exist in the actual jQuery core tests for the AJAX calls (core.js, ajax.js, etcetera).
Daising chaining your assertions together makes for useful testing when wishing to assert that different types of scenarios, for example when making invalid requests to an AJAX web service with illegal characters, insufficient parameters, unauthorised params etc will fail properly, and thus pass your tests accordingly. Definitely worth using when testing forms and data entry.
Manipulate the DOM and everything else has much as possible during the course of your tests. Alter the underlying code and test for the results as you go. You shouldn’t be afraid to try and break things and test against them. It’s very easy to get into the developer mindset where you know how they should work, and you are can make them work perfectly all the time.

So there you have it. Hopefully more than ready to go out and unit test your way to heaven, or at least your dev team lead’s heart. If he or she even has one. We know what vamp-like figures rule that roost … hahaha!

Learning HTML5

May 29th, 2010 · No Comments · Development

As of today, May 27th 2010, don’t go looking to Amazon for any books on HTML5, all of the titles on search are in the pipeline and only available for pre-order. So where to? Where can you find content for offline reading? At this point I don’t know and I wish I did, because I am rearing to go.

In the meantime the hype, according to The Register in their post HTML5 Unhinged, is over taking the reality and HTML5 is fast becoming all things to all people, just as AJAX and Web 2.0 did in the past. Probably more than just a few of those said people could benefit from actually having a read about the topic, rather than bluff, argument and counter-arguments all round.

Anyhow, for those happy to read online, here are a bunch of useful posts, resources and anything else I deemed might be worthy of an HTML5 learning collection:

HTML5 – As laid out on Wikipedia and the context of its development, from the standardisation to the markup to the new apis, to the different between HTML5 and XHTML and onto other things such as error handling. Definitely a worthwhile starting point for those that are less technically inclined.
Dive into HTML5 – is an awesome online resource in the public domain, styled as if a medieval edition hot off the Caxton Press. It covers a bunch of useful areas from Forms to Canvas to Audio-Video, and on and on. The online document is going to end up in print via O’Reilly and the Google Imprint, and you can pre-order, but until then it is available online for FREE.
API Rocks HTML5 - A nifty online presentation and code examples for HTML5 that bring more of the functionality face-to-face with you, rather than just the written word. The interactive presentation makes it super simply to understand HTML5, CSS3 and JS and how they interact, with plenty of take homes for use on your own site.
Bread & Circuits – Dave Humphrey of processing.js fame and MUCH more has been dabbling in HTML5 and Audio stuff. It’s an interesting insight into some of the possibilities. His distinct style and view make for interesting reading above and beyond the simple realm of pure HTML5.
The WHATWG blog – The blog for the Web Hypertext Application Technology Working Group (Sorry for the mouthful) contains a plethora of really interesting articles on HTML5. With the archives stretching back to 2006 they have a lot of posts on topics ranging from the Browser API to Conformance Checking and onto Tutorials.
HTML5 Tutorials – Talking of tutorials, this web site which is dedicated to HTML5 and the art of the tutorial has a wide range of excellent posts and illustrated articles bringing you up to speed on the topic. They highlight examples, on using the new API such a local file storage, and provide good links to live sites that are already using HTML5 out in the wild.
Preview of HTML5 – A list Apart always does GREAT tutorials and articles, and this HTML5 preview is NO exception. Definitely worth checking out.
HTML5 Demos – Getting to grips with soemthing is 2often about seeing it in action and then dissecting how it works. To this end the HTML5 demos web site is super handy and provides examples of demos from 2 videos playing in sync to interactive canvas gradient and onto drag and drop and so on.
Can I Use - Last but not least is the Can I Use web site which outlines “Compatibility tables for features in HTML5, CSS3, SVG and other upcoming web technologies.” Definitely a useful tool when it comes to compatibility and cross-browser happiness charts.

No doubt more will be added in due course, here, or in supplementary posts, but it s a good start for now I think. And if you have any good suggestions, feel free to shout them out in the comments. Thanks in advance!

What Matters More? Speed or Perfection?

May 26th, 2010 · 4 Comments · Development

In my various travels online today I came across an interesting post Taking Stock on the Museum in a Day web site, the blog used to keep track of a project to start and finish a museum based site in a day using cheap and cost-effective means to design, code and implement.

Of most note was a comment made about half way through the post itself:

“… although no museum is every likely to (want to!) build a website in a day, there is a tendency for the timescales created by the political nature of museum decision-making to actively damage projects. The raw enthusiasm and energy that is created by doing things rapidly, cheaply and – frankly – without the polish of perfection – is hugely important to any project.”

Having been fired up with a passion for an idea before now, I completely understand where this point is coming from. Capturing that raw unfettered power of enthusiasm and harnessing it for some good is critical to the success of a project and the maintenance of that ‘esprit de coeur’ throughout the lifetime of any project is also key to its success.

Any aspect of a project and the management of it, from planning to execution, needs to be underlined with best practice. As projects become more and more drawn out there is an easy tendency for them to veer away from the initial intent, for changes, scope creep and backtracking to occur, which undermines the will and the drive of those actually putting things in place, the developers.

To maintain a critical mass for any project and for it to succeed you need to apply yourself in a dogged fashion and to persevere. The following high level overview to do so makes sense:

Draw up an outline – What you wish to put in place and how this ultimately benefits your site users.
Break down the workflow – Assign tasks based around the outline and agreed means implementation.
Build, Test and Roll-out – Get on with it and finish it as quickly as possible.

Getting from A-B as quickly as possible makes total sense, on many different levels, but mainly because it avoids deviance from the initial plan. Any incoming requests for changes, unless critical, should be pushed off to a second phase of, yes you guessed it, another round of A-B. Some of the beneficial side effects of this route, include, but are not limited to:

Savings – Both in terms of cost and time, less time spent = less money spent.
Quality – Deviance, changes and more only lead to hacky code that requires re-factoring in the long run, proper planning and execution of said plan tend to avoid this, notwithstanding poor coders.
Feedback – Following up on yesterday’s long post, smaller, iterative, implementation phases allow for feedback earlier in the process so bigger changes don’t have to be made later.
Thought – in waiting for the following phase to start, this gives you time to think about your needs and desires, and to search out evidence and justification for the requests you want to have implemented.

Working with so-called stakeholders, managing their expectations and making sure that they now when and how their input is required in the process and the implications of any requests, and how they fit into the grand scheme of things will help ease the flow of the project. Constant and disruptive input can only harm your project, whilst at the same time, elongated time lines and the opportunities it provides to upset initial implementation plans provides exactly the same issue.

So back to the starting point? What makes sense? Speed or perfection? To my mind speed. This is because speed doesn’t mean reaching an end, and then stopping, with no more opportunity to finesse a product, but to accomplish set goals as quickly as possible and then to move on as quickly as possible the next ‘pre-planned and scoped’ phase so that everything can be outlined and accomplished in an orderly and sensible fashion, without undue and unnecessary pressure.