Frontend 2011 – A summary – by Roger Dudler

From October 10 to 12, the Frontend 2011 Conference took place in Oslo. This is an international web conference with well-known speakers and a good mixture of topics like UX Design, Frontend Engineering and conception, but also marketing and research. I had the opportunity to participate and I would like to sum up some interesting talks and impressions in this article. I deliberately chose talks outside my daily business topic, development. In my opinion, this broadened my horizon extremely, and I can only recommend that. The conference consisted of two days of talks and one day of masterclasses, a kind of workshop.

Embracing the ebb and flow by Simon Collison (@colly)

Simon Collison gave the conference an inspirational kick-off. His talk was about general topics regarding finding new ideas and the recent development in UX Design. We should try to understand why in real life as well as in the internet we like some things within few seconds and others we dislike. In his opinion, we should not be misled to make decisions regarding the design based on tools (like e.g. CSS3 effects), but to make them because the user gets an advantage. In additon, the browser window should not be considered to be a closed frame, but an extract of a whole. Of course, he also talked about Trending Topic Responsive Design. In the future, Simon would like people to work on a kind of visual grammar, like with the concept Responsive Design by Ethan Marcotte, so that customers can also get a better understanding for these topics.

Sketchnotes by Eva-Lotta Lamm, Designer (@evalottchen)

A not exactly new but exciting way to make notes was presented by design expert Eva-Lotta Lamm with her talk about Sketchnotes which is about making notes in form of visual elements away from classic text notes to a universally understandable mix of text and picture. According to this creative talk, not being able to draw is not an excuse. Of course, I tried this approach during the next talk by the Standardistas. Besides having fun while listening, I really had the feeling that I got more out of my notes. Definitely try it yourself! Here my notes

What it looks like when Eva-Lotta does it can be seen in her Flickr Collection “Sketchnotes”.

Designing the Fluid Web by the Standardistas

The Web Standardistas gave us an interesting exercusion into the history of the web. I have to admit that the OLMA (a Swiss thing) poster on one of the slides might have influenced me, though. The two gentlemen from Belfast talked about Responsive Design, but also about the so called secret formula for good websites. It includes proportions (size, spaces, ratios), hierarchy, typography, compositions & systems (consistent, recognizable concepts, e.g. with colours, titles, content, etc.) Many book recommendations, a case study about the german railway and a bit more Responsive Design rounded this talk off nicely.

Crafting the User Experience by Sarah Parmenter, Designer

In my opinion, Sarah Parmenter gave a very good talk. She works as UX designer in the iOS field. Her talk was mainly about examples of small but effective actions or changes which influence customers, just like Coca Cola did with the Happiness Machine Project . Or like 7-up which got a notable increase in turnover with the simple increase of yellow (+15%) on the can design, which made customers think that the drink was now more refreshing. Beside many more examples, colours were also an important topic because they can cause problems since their meaning can be different from one culture to the other (Colours in Cultures) or Dark Patterns. In the end, many impressive and helpful examples from Amazon and Co. gave a good overview about simple and effective methods to (fairly) influence your customers.

Lettering by Jessica Hische, Designer

With her talk about Lettering, Jessica has proven that passion is an important ingredient in the work of a designer or a developer. She talked a lot about the design of single letters or typodesign. She explained why fonts may seem so expensive but are really a fair price. Just think of the popular type Gotham, whose production cost an estimated million dollar.

Ecosystems by Albert Shum, Designer, Microsoft

The presentation by Albert Shum was about that topic Microsoft is having difficulties competing with their competitiors, above all Apple, namely the Ecosystem. In his talk, Albert has shown what is important when building a new ecosystem around one’s product. I’ve listed some of the mentioned principles:

• Give people something to participate
• Don’t try to do everything yourself, only plant seeds
• Leave it open, but set constraints
• Make it easy to build on it
• Start a conversation
• The design is only finished when the community takes it over

Time will show if Microsoft succeeds in building a successful ecosystem with Metro.

Everyone acts differently by Joseph O’Sullivan

Joseph works as „problem solver“ for Intuit, an US american software company, which nearly completely dominates the market for private tax software. With creative methods, Joseph has changed the corporate culture and has made it very customer oriented by applying the following principles:

1. Principles over processes
2. Companies are networks, not hierarchies
3. Swim downstream
4. Say / Do ratio
5. Hand over control (e.g. every employee can design)

According to Joseph, it is important to treat every problem in a company as a design problem. In practice this means many workshops with storyboarding, sketching, testing, as well as hands-on of the management and the involvement of the creativity of all employees. In my opinion, this is a extremely fruitful strategy, although it might be risky in an organization of this size.

Here is an example of the first storyboard made by me in Josephs Masterclass about Storyboarding.

Persuasive Web Design by Andy Budd

O think this was one of the best talks at the conference. There was a lot of psychology but a very intersting talk given by Andy Budd from ClearLeft. Andy started to intensively examine the behaviour of people in certain situations as well as their influencing, if in Las Vegas in front of the Wheel of Fortune, at the supermarket, in the classic advertisement or in the internet. Everywhere we are influenced. Also primary instincts like „What’s beautiful is good“ have a lot of influence especially in the web. Or let’s take the facebook button as an example: We always try to orient ourselves by others to find the social standard. As a result, we are more willing to press the “Like” button if we see a high number of likes than if we see a small number or even 0. Or another example is the facebook wall: analyses have shown that remarks on the wall get responses in 99% of all cases. Just because we don’t want to seem impolite but want to be answering friends. This knowledge can be used in the web as well. Other topics like Gamification or that a limited offer can boost the demand (see Apple) were also mentioned.

A short break with an image of the stunning Oslo harbour :)

Object-oriented JavaScript by Sara Chipps

Sara Chipps’ talk was mostly about the basics of the application of object orientation in JavaScript without libraries. Besides many code examples Sara also showed some examples related to maintability. For beginners, especially those without any background of object oriented programming, this presentation was very helpful. Sara briefly mentioned projects like the JS Template Engine Tempo, as well. An important bottom line is that a clear, maintainable Frontend Code will get more important in the future. I am convinced that future frameworks like Terrific will significantly contribute to this goal.

CSS3 Secrets by Lea Verou (@leaverou)

As far as CSS is concerned, this lady cannot be fooled. Her talk, similar to a talk at the Frontend Conference in Zürich, was definitely worth a visit. Lea presented 10 CSS techniques, which have not been seen before in this particular form. She surprised the majority of her audience with tricks like diagonal stripes with pure CSS (gradients), clean styling of check boxes, animation magic with Bezier Curves and many more. Naturally, essential parts of the presented functions are not availabe in older browser versions. But in recent versions of FF, Webkit, Opera and also IE the support is appealing. Lea presented what can be done now and especially in the future with the help of CSS3 and that is fantastic. These 10 CSS3 secrets can be found on SlideShare. By the way, during the conference Lea put her latest project PrefixFree online and it is definitely worth a visit.

Lea is a very nice person and really passionated about what she’s doing, we had a great time at the IXD afterparty. Do you see the Dreamweaver & Flash pillows, they were added against her will ;) Because of the bad image quality, i had to make the image a little bit artistic, sorry about that.

Module Driven Development von Dustin Diaz (@ded)

Dustion Diaz was certainly one of the most famous speakers. He has worked as a developer for Yahoo, Google, and Twitter, was responsible for the new Twitter and is considered to be the JavaScript expert. For a few months, he has been working for a startup called Obvious. In his talk he presented Ender. In short, Ender is a package manager of JavaScript modules. Based on npm (package manager for node.js) modules can be installed (e.g. Selector Engine, Query Engine, Animations, etc.) and that limited on those which you really need for the respective project. As a result, the JavaScript gets in parts significantly smaller. It is supposed to be an alternative to libraries like JQuery. It is an ambitions but certainly interesting project.

That’s it

This was a brief glimpse into the contents of this year’s Frontend 2011 conference. If somebody likes more details about one of the talks, you can reach me via twitter (@rogerdudler) or skype (rogerdudler).

Many thanks to the IXD Team (@ixdnorge) for organising this conference. I met some very interesting and cool people like Matthias (@digitalcult), Elisabeth (@sortenke), The French Guy (@stratosferik), Roooooger (@rogerguttormsen), Jenny (@jennysjogren), @mikkelrom and the danish lego team, Wolf from HotGloo (@wdbecvar) or Joisten (@jhuglen) and many more (Tonje, Morten, etc.). Hopefully, I will be back next year. This article was originally written in german and was thankfully translated by my brothers future wife Sandra. Thanks!

We thank Roger Dudler for a great summary!