Content, typography and geeky stuff (#MKGN)

As another Milton Keynes Geek Night approaches, I’ve realised what a terrible blogger I’ve been lately… heck, maybe I don’t even qualify as a geek any more! I thought I’d try and make amends with these notes from the last event – which was, as always, an enjoyable evening with a real mix of speakers providing plenty of food for thought.  If these little tasters leave you wanting more, check out the audio on Soundcloud:

Future Perfect Tense

The first talk was from Relly Annette-Baker (@RellyAB) – bursting with energy as she blasted through her talk on “Future Perfect Tense” – or creating content for in imperfect web. The talk is worth another listen but, effectively, Relly spoke of the separation of content and design so that websites can evolve as technology moves on.

Taking a physical world example, every piece of Lego is built to combine with every piece of past and future Lego, whereas Playmobil have hard-cast mounds.

On the web, our content needs to be structured chunks that build packages (screen sizes, needs, requirements, points). Once we understand what the content is, it can be put in the CMS, and we need to understand how people are using that content.

Additionally, we shouldn’t fork content – pragmatically there are times when we may need a separate mobile site but that’s short term – long term we need to cope with a plethora of devices (from a 1″ watch to a 50″ smart TV – we can’t have a new site for each one). We need to have a plan to move content to new sites.

Netflix is on 100s of devices but only has 3 content formats – short, medium and long.  And, as for the next big thing – Google “iPhone will fail” to see how, in 2006/2007, people were seeing an expensive smartphone, not a cheap portable computer.

None of us know the next cool thing but we don’t need to. Build teams, tools and content that adapt whatever the conduit. Create chunks that can move around and be repurposed. The rest will look after itself…

Knowing you know nothing

Knowing you know nothing was a short talk from James Bavington (@JamesBavington) who started out with a quote, from Socrates no less:

“The only true wisdom is knowing you know nothing” [Socrates]

Or, to paraphrase:

“You’re stupid if you think you know everything” [James Bavington]

There are many, many tools available to help us in creating websites (thankfully we don’t have to know them all) but web design concepts can be limited by our technical knowledge and ability:

James used an analogy about how he started investigating the Google Maps API to push his skillset and improve the user experience in a site he was creating.  This led him to a side project using the Google Maps API and experimenting with many features.

James takes the view that expanding your technical awareness (not necessarily ability) gives your creativity more to play with.  As someone who struggles with seeing loads of interesting “stuff” that I rarely investigate as fully as I’d like, I may try James’ advice for expanding my knowledge:

  1. Little and often.
  2. Set project challenges.
  3. Have a side project.
  4. Know that I know nothing.

Distributing the future more evenly, with JavaScript

Jeremy Taylor (@jdt_me) was next up – talking about distributing the future more evenly, with JavaScript.  The gist of Jeremy’s talk was that we’re not using the “slab of glass in our pocket” (i.e. smartphone) properly and that, instead of collaborating and solving the grand challenges of our age, corporations are in battle.

Many socially-ethical businesses will use “free” services that rely on ads – it’s just not healthy, Jeremy believes.

Browser is no longer a document browser but is effectively a hypervisor with each tab running in its own sandbox, and WebRTC peer connections to connect them, making the entire web a giant playground.

Citing the examples of Browserify (introduction) leading to WebTorrent, Jeremy suggests that we need simpler tools to create distributed systems and that JavaScript provides new ways to integrate and collaborate.

Sass: a whistle stop tour

Stuart Robson (@StuRobson) gave another 5 minute talk – about a CSS extension language called Sass (Syntactically Awesome Style Sheets).  Stu’s slides are on SpeakerDeck and he describes the talk as “a quick blast through what makes Sass an awesome extension of CSS that you should use no matter how marginally”.  It certainly looks useful to me – with variables, nesting, code snippets and more…

One minute talks

Then, there were the one minute talks with the usual bunch of recruitment pitches, conference plugs, and two that made me sit up and listen:

  • A new TechHub co-working space coming to Milton Keynes (although I can’t find any details on the web).
  • Fibe (sp?) are a young startup of school kids who understand they can only do so much (having said that, the speaker was really confident and came across really well). They are looking for an HTML hermit, a JavaScript genius or a database [demon] to work with and help them…

Take your stinking paws off my design you damn dirty developers

Finally, Andrew Clarke (@Malarkey) gave a provocatively-titled but fascinating talk that is intended to help developers udnerstand design issues.  Andrew’s talk normally takes an hour, so he cut it down to just typography (the full set of slides is on SpeakerDeck) and I could have listened for hours. whoever thought that the finer details of lettering could be so interesting?

I learned how it’s important to understand the size of type to be fused and how the measure (the width of the body of type) can be controlled for comfortable reading by reducing column widths or increasing font sizing (2-3 alphabets, i.e. 56-78 characters is ideal). I learned how adjustments to the measure need to be accompanied by changes to line hight and how different styles should be used for reversed out content to improve readability. I learned that the tracking (word-spacing in CSS) can be used to improve readability and that san serif typefaces need looser line heights.

Then there’s the area of typographically-correct glyphs:

  • Hyphens break words over multiple lines, or join-words.
  • En dashes are longer and denote a range (equivalent to the work “to”), for example 1–10 or Earth–Mars.
  • An em dash is even longer — for a pause — or a separate train of thought in the same sentence. Either use no space or a hair space. And two adjacent em dashes can indicate a missing letter in a w——rd.
  • Single and double primes should be used for feet and inches or minutes and seconds. Never for quotations!
  • Quotations use curly quotes: “ ” or ‘ ’.
  • And an ellipsis is not just 3 dots — it’s one entity… which marks a continuation.

[Related reading: 10 HTML entity crimes you really shouldn’t commit]

Moving on, Andrew spoke of markers and margins in lists, and of using CSS relative positioning to place © close to the baseline – and adjusting parentheses too!

In summary: designers and developers need a better understanding of each other’s work. They need to know how to work together!

When’s the next one?

If you think this sounds good, follow @MKGeekNight or check out the MK Geek Night website – MKGN number 9 is coming up on 12 June 2014 and speakers are:

  • Rachel Andrew (@RachelAndrew): Your own definition of success – choosing a profitable side project idea.
  • Dan Donald (@hereinthehive): Designing evolution.
  • Robert Bavington (@RobertBavington): Responsive Web Design Today.
  • Ben MacGowan (@BenMacGowan): The era of gratuitous animations.
  • Mark McCulloch (@wearespectaculr): Are you speaking Scottish in Tokyo?

There’s usually free beer and pizza too… so what’s not to like! 

What do Aston Martin, design, learning styles and digital storytelling have in common? (#MSRN)

Every now and again, I get invited to a fantastic event and, earlier this week, I found myself at a former school (now a “creativity and innovation space”), on one of Britain’s first council estates, in Shoreditch, East London, home of our very own “silicon roundabout”, to discuss research, disruption, invention and innovation.

If time permitted, I could write a dozen blog posts based on the discussions at Microsoft’s Research Now event. Unfortunately, the highlights are all I can deliver right now, but there were many of them…

The art of design

Aston Martin Parking OnlyFirst up, Head of Design at Aston Martin, Marek Reichman (@Design_Dr) gave a fantastic presentation on the iconic brand’s approach to design. Living, as I do, just a few miles from Aston Martin’s spiritual home in Newport Pagnell, I may be a little biased but there are few brands that stir the imagination as much as seven-times bankrupted Aston Martin – which is partly why they have been the coolest brand in the UK for five out of six years (the anomoly being the year that Apple temporarily took the top spot, since reclaimed for 2012/13 with YouTube in second place and Aston Martin in third).

The company’s new headquarters is a modern version of a castle in the middle of England, built from local stone, in a circular shape, with a moat, a drawbridge and narrow windows and signifies how design is integral to the culture of Aston Martin. Even so, Aston’s design studio (the company’s first in house studio, created in 2007) is a separate building with 6m tall windows, joined to the main complex with a glass corridor – an ivory tower in which to design, with transparency so others can see in.

I won’t continue to reproduce Marek’s presentation – I just can’t do it justice – so here are just a few choice words: power; beauty; soul; cool; exclusivity; luxury; creativity; and craftsmanship.

“Coolness” is something that one cannot claim – it has to be bestowed – but Marek Reichman describes it as stylish, innovative, original, authentic, desirable, unique. That’s a great set of adjectives that, for me, perfectly describe Aston Martin.

Design from the boardroom to the shop floor

With the unenviable job of following Marek Reichman’s keynote, Chief Design Officer at the Design Council, Mat Hunter (@mat_hunter) started out by commenting on the relationship between job titles and confidence, mocking has own grand title in comparison to Marek’s understated “Head of Design”. Mat’s presentation was no less engaging as he took us on a journey with:

  • A logistics company that’s seen improved revenues since they started to better communicate what they do through branding and graphic communications.
  • A discussion of form and function with the kettle evolving from a stove-top model to an electric kettle, one with an automatic off switch, to a cordless model, to a stylish model.
  • Disruption through changing meanings – why do we need a kettle? Why not simply have a tap that dispenses hot water for a cup of tea? Or how about the wrist watch, with Swiss craftsmanship commoditised by cheap Japanese digital timepieces, only to be usurped once more by Swatch, who took analogue technology and made it a fashion item? In another example, Streetcar (which became Zipcar and is now owned by Avis) proved that, in some markets, people want access to a car, not necessarily to own one. Then there are concepts like The Amazings – for people to try something old and learn something new.
  • Looking at innovation, Mat described the “double diamond” design process where we use the left side to redefine the brief before finding new solutions to a problem. Examples include: the Mailbox app which is aiming for a a clean mailbox and using a queuing system to manage demand [only time will tell how successful that is – I’ve lost interest already]; Casserole Club which uses the social web to connect people and provide peer to peer “meals on wheels”; The Matter which gives young people work experience and drives a better quality of output by involving them in local planning and decision-making; and even the Government Digital Service, aiming to transform the way in which the UK government provides online services with a set of human-centred design principles, integration, board-level leadership (and recruiting the best people).

Design-led transformation and innovation

In the next slot, Microsoft Consultants Fred Warren and Phillip Joe spoke about why and how to innovate using design. I really need to take another look at the slide deck to properly understand what was presented as we jumped from anecdotes such as Virgin Atlantic’s redefinition of transatlantic flight by “reframing the experience” in Upper Class, getting travellers from A to B (not Heathrow to JFK) and removing friction points to Pine and Gilmore’s Experience Economy and on to customer experience evolution but I got the impression Fred’s part of the presentation (the “why?”) could be summed up as “step back and look at the problem from a different angle” – and “don’t die hesitating”.

Phillip spoke about the “how?” with four themes of orchestration (guide the vision), envisioning (explore scenarios and define visual and textual narratives), empathy (understand what users want), and execution (take the vision and make it real – which parts of the narrative will be built out).

To be perfectly honest, this was the session that I didn’t really get. Maybe I was tired. Or maybe the previous presenters had given me so much food for thought my brain needed time to adjust… but the basic premise is sound: finding out what the problems are, rather than offering solutions right away (although isn’t that just what consultants do?).

Organisational DNA

This slot was the surprise for me. A real gem. Strategic People and Organisation Development Consultant, Elizabeth Greetham gave a talk on getting an organisation culture aligned for innovation. The concepts that Elizabeth visited are not new, but it’s good to re-visit them.

Honey and Mumford’s learning styles are a cycle of learning by doing (activists, jumping in at the deep end), reflecting (think and observe), theorising (through models) and trying out (pragmatists, starting in a safe environment). Often we skip the reflection, eradicating the time to think creatively, which in turn stifles innovation.  Meanwhile activist-pragmatists skip the theory, which can be valuable to re-engage with from time to time.

Moving on to perception and memory processing, Elizabeth spoke of four learning strategies:

  • Visual (pictures, written word).
  • Auditory (spoken word).
  • Kinaesthetic (actions and movement).
  • Tactile (touch).

Whilst visual and auditory learning are well understood (e.g. leading to success of PowerPoint) kinaesthetic learning is about doing, reaching, feeling. Restricting people to one screen limits this – the movement is important (mind maps can help). So does hot-desking – some people need their own space. The implications of touch are still being explored and, whilst it’s discouraged in the workplace there are some benefits that have been discovered through work with autistic children.

On cognitive styles, Elizabeth described two types:

  • Verbal-imagery: words vs. pictures (not everyone’s brain creates images – sometimes they need to be provided)
  • Wholist-analytic: global vs. components (some people need the big picture and to know what comes before and after their part vs. individual widgets in detail); another way to look at this is breadth first vs. depth first.

The psychological contract is about the perceptions between an employer and an employee about their obligations to one another – more than just a written contract of employment. Promises are often made or implied, e.g. during recruitment, in appraisals, at a social event, when travelling together – and we shouldn’t make promises that are not in our gift to deliver.

Elizabeth then spoke of the sixteen Myers-Briggs personality types, before highlighting that intimacy is key to success – for every person in an organisation, someone else needs to know what makes them tick. Organisations need a structure that supports this; small working groups enable people to get to know one another much better.

In summary, “well it’s how we do things around here” is made up of people, how they learn, the psychological contract status, and personality factors. And that, is the organisational DNA.

Design in the digital physical world

In his presentation, Principal Interaction Designer at Microsoft Research, Richard Banks (@rbanks) explained some of the ideas he’s been working on for digital storytelling. His team’s ethnographic work is a combination of social science, computer science and interaction design; they look at people, see how they work, spot anecdotes about life – and spark ideas for things that can be designed. Specifically, Richard talked about the theme of the future of looking back: creating new value from reflecting on the past.

For example, on inheriting his late grandfather’s box of photos, Richard discovered they had been recorded with “metadata” (names written on the back). But with most of  us creating thousands of digital images each year, that’s a lot to pass on when our time comes.

Technology has moved past the point where it’s a play thing, it’s now an integral part of our lives and we need to deal with death on social media too. We all have boxes of sentimental objects that we don’t keep on display. The question is whether digital artefacts be sentimental too? To take another example, old diaries provide an insight into others’ lives – even if the points recorded seem mundane at the time. May be our tweets will be the same some day?

Richard showed pictures of physical items created to store digital artifacts, such as:

  • A box to backup your tweets.
  • A digital slide viewer which backs up Flickr images into a box that looks like an old Boots slide viewer.
  • A digital photo display focused on one individual containing events throughout their life structured on a timeline [à la Facebook] providing the context for where things fit.

Another interesting angle is the motivation behind digital storytelling, perhaps just creating a record for a sense of permanence – not necessarily interesting now but it may be later. And then there are the new possibilities afforded by digital media – such as putting two people into a picture that could have been together, but were not (e.g. a grandfather and grandson when one had passed away before the other was born). I’m currently taking something in the region of 10-12,000 pictures a year and I have hundreds of slides in the loft inherited from my late Father. It’s high time I took a good look at my own digital curation and storytelling…

Envisioning the future

Microsoft Chief Envisioning Officer, Dave Coplin (@dcoplin) gave the final talk before the inevitable panel session to wrap-up the day. I’ve blogged about Dave’s talks before – fast paced and highly entertaining. The twist this time around was to ask the question “What can you change in your business that you do because you’ve always done it?”. See the big picture. Avoid the arrogance of the present. Look for outcomes, not process. Set your people and your data free. Fundamentally, think human, be human. And empower others.

Conclusion

It’s been a while since I attended a Microsoft event that was as thought-provoking as this one. Most of the company’s output is pure marketing but this was a refreshing change; enabling others to lead the conversation, facilitating discussion, and leading thoughts without the distraction of a product pitch.  For this reason alone, congratulations are due to the Microsoft UK Enterprise Insights team (@MicrosoftEntUK), who hosted the day. Add in the first-class speaker line-up and it was well worth it.

As for takeaways, well, I’ve written many of them in this post but, whilst design is not at the core of my work, it can help me to think about things differently and the organisational DNA talk has given me plenty to consider as I plan for building my own team inside the organisation where I work.

Where’s the line between [IT] architecture and design?

This week, I’m attending a training course on the architecture and design of distributed enterprise systems and yesterday morning, somewhat mischievously, I asked the course instructor where he draws the distinction between architecture and design.

We explored an analogy based about a traditional (building) architect in which I suggested an architect knows the methods and materials to use but would not actually carry out the construction work. But the instructor, Selvyn Wright, made an interesting point – if we admire a building for it’s stunning architecture, often we’re talking about the design. Instead, he suggested that architecture is a style or philosophy whereas design is about the detail.

In the UK IT industry, the last 10 years or so have seen a trend towards “architect” job roles in business and IT. Maybe this is because the UK is one of the few countries where to be a great engineer is discouraged and technical skills are undervalued, rather than being held up as a worthy profession.

In reality, there is a grey line between an architect and a designer and I had frequent conversations with my previous manager on the topic (usually whilst discussing my own development on the path towards enterprise architecture – another commonly mis-used term, probably best saved for another post). Regardless, architecture and design do get mixed (in an IT context) and there comes a point in the transition when one can look back and say “ah yes, now I understand”.

I suggest that point is when someone is able to abstract the logical capabilities of a system from the technology itself. At that point, they’ve probably crossed the line from a designer to an architect.

In other words, an architect can understand the business problem from a logical perspective and create one or more possible solutions. The required capabilities are the logical model and the physical elements are those which need be bought, built or reused to match those capabilities. Architecture is about recognising and employing patterns.

Having decided what an architect is, we come to the issue of design. Indeed, design is a word more often used in a creative sense – a website designer, for example, has a distinct set of skills that are very different to those of a website developer. Ditto for a user interface designer or for a user experience designer. Within the context of the architect vs. designer debate, however, a designer can be viewed as someone whose task it is to work out how to configure the physical elements of the solution and create designs for elements of software applications, or of IT infrastructure.

Architect or designer, either way, I still struggle with the term “architected”. Designed seems to be a more grammatically correct use of English (adding further complexity to the design vs. architecture debate) but it seems increasingly common to architect (as a verb) these days…