Awwwards Barcelona – Day 2

Mathias Bynes

JavaScript ♥ Unicode

Mind blowing”stuff”. Check more sane solutions at or

A photo posted by Monica Messaggi Kaya (@monicakaya) on

My notes:

He is currently working at Opera.

Created – a collection of various subtle and not-so-subtle shell tweaks that will slowly drive people insane (but maybe you could ignore that I even mention it – disclaimer: I won’t be held responsible if you go ahead an test his script! )

He gave amazing examples of things that simply don’t match and “suppose to” with explanations and some solutions to work around it. Be aware: this section is “link-heavy”: is a tool that uses Punycode.js to convert domain names between Unicode and Punycode (ASCII).

Nice site with insights on javascript and “those very special irregularities, inconsistencies and just plain painfully unintuitive moments” of the language –

  • Unicode standard varies from U+000000 to U+10FFFF possible symbols (not all used)
  • Basic Multilingual Plane (BMP) U+0000 to U+FFFF
  • The rest are “astral planes” (need at least 4 hexadecimal digits to represent)

ES6 uses brackets and uses the whole scope of unicode but this is not implemented in all browsers. The current solution uses surrogate pairs. – library that counts the strings more accurately.

Now, in ES6, the string character count gets the correct number of chars, check how it works on

Countable.js – is a JavaScript library to add live paragraph-, word- and character-counting to an HTML element. It is a zero-dependency library and comes in at just about 1KB when minified and gzipped.

Check: about JavaScript’s internal character encoding. – unicode normalization on ES6.

A Unicode-aware string reverser written in JavaScript –

Check: A robust & optimized ES3-compatible polyfill for the `` proposal for ECMAScript 6/7 –

Create unicode-aware regular expressions – and

A source code transpiler that enables the use of ES6 Unicode regular expressions in ES5 –   

The “Pile of Poo Test (TM)” – just use that symbol on your own unicode tests and check if it is returning what is expected or not.

  Complete article/slides at – the examples will blow your mind… @mathias 

Hvass And Hannibal

Collaboration – Making/Thinking/Illustrating Together

The story of Hvass&Hannibal and how we work with different materials and medias.

Amazing colourful and inspiring talk on design and illustrations by @HvassHannibal #AwwwardsBCN   A photo posted by Monica Messaggi Kaya (@monicakaya) on

My notes:

Working more on music industry, illustration and exploring textile and 3D spaces. Started as fun, playful, as friends and with illustrations on wall/bars, playful creations with costumes and the ‘smoking ring’ until an ‘official’ poster for school when they decided to create the studio.

She showed some of their work and they were very inspirational to me. The process was of a “ping-pong” where Hvass and Hannibal were working on each other’s drawings and building up their design together. Some very creative ideas, and some “simple” ideas that were just so well executed that created amazing effects. A few:

  • Working on “jungle theme” around and the illustrations got to furniture, aprons, plates, etc. Now using loads of MDF for creation and textiles.
  • Working with ribbons and dancing on a project (which was raining), working outside and on “the field’ is much harder… lots of try-and-error techniques, amazing efforts.
  • Sustainia Award 2012 – amazing work using glass design and materials for the awards. Glass layered with coloured glue.
  • Cover for “Ghost of a chance” – manual work and origami-style paper work for a photoshoot. She mentioned that looks graphical/computer design but was manual work!

Unsuccessful sketches can be a “panic database” for future projects.

  • Conference design, creating a more “human” conference, more tactile design props and elements, like cut shapes, wooden crate and boxes, hand painted chairs and hand-drawn name tags, posters, panels and decoration. including hanging elements cloud-shaped. Also using pallets for tables, boxes painted for stools, hand-tied name badges. Photo-booth with the props as well.
  • Design for children’s library. With shapes allowing characters creation, signs all with the playful arrangements of these shapes.

And many more amazing work can be found at their website:

Check also Stupid Studio – a graphic studio in Denmark that they worked with.


Jeremy Keith


We’re working on increasingly complex websites. There’s a temptation to match this growth with increasingly complex solutions. But there’s a real value in keeping things simple…or at least _starting_ things simple. If you can build a solid robust foundation, there’s a good chance that your work will be future-friendly. Prepare to have your brain subtly rewired as we look beneath the surface-level implementation details of the web to reveal the semantic structure below. Whether you’re publishing content or building the latest hot app, the principle of progressive enhancement will change the way you think about your work.

My notes:

Rewiring the brain…. the double meh, Fedex arrow, Toblerone bear, Ducks wearing dog masks – this last one I will never forget… take a look:

OMG! Ducks wearing dog masks!

The moment you realise all ducks are wearing dog masks…

Remember the Dao of Web Design by John Allsopp – more relevant now than it was then.

Tapping into the Zen Garden to remind us of the separation of structure and presentation.

Progressive enhancement as well: HTML  > CSS  > Javascript

Shearing layers on architecture/building, where all layers are dependent on the one before.

HTML is fault tolerant, not throwing errors if tags not closed or not understood. He suggests to be structurally honest

don’t use a <div> or a <span> to represent a button, use a <button>!

CSS is also fault tolerant, it won’t stop parsing or showing content, just without style…

Javascript is not fault tolerant (it will throw errors), use safe defaults, but do not rely on them.

In the web front-end stack – HTML, CSS, Javascript and Aria – if you can solve a problem with a simpler solution lower in the stack, you should. It’s less fragile and it will just work.

Suggests: ember first then angular and then backbone.

“No one wants to think that what they’re doing is trivial” – John Resig

He sees a problem with the phrasing of “the web platform”. It is not a platform… if you have iOS and I’m serving an iOS app you get 100%, if you don’t have an iOS device you don’t get anything, but if you are developing for the web “anyone” can get your content if it is on the web (even using devices in other platforms).

Do websites need to look exactly the same in every browser? Answer:

BBC – cutting the mustard, supporting FEATURES not which browsers type/version… If a feature is supported then you can get the enhanced version.

“Cutting the mustard” checking for features! If supported, then get enhancement. #AwwwardsBCN

A photo posted by Monica Messaggi Kaya (@monicakaya) on


Henry Daubrez

No guts, No glory

We are Dogstudio and we come from Belgium. Well, not especially the place you would dream of to grow a digital agency, isn’t it ? You’ve got to grow a pair, dream big, fail bigger and trust your guts. This is our everyday guide on how being weird, integrating research & development, personal projects and taking bold decisions got us to look into whole new perspectives.

My notes:

DogStudio does loads of amazing projects, from printing, web, 3D printing, light installation (and ‘weird stuff’), animation, etc.

A few of the projects they showcased (can we even flex this noun as a verb?)

Keep the creative juices flowing (yeah, sounds naughty)

  • Gifcup website loads of visits in 24hs (had to be taken down)
  • Waterloo battle

You need to know what you are doing, without inspiration and creativity an immense budget won’t help

They use lots of videos, nice imagery, effects, sound effects.

Project cycle: rising up your team’s skills > higher expectations > high quality > better project > repeat.

“50% of a remarkable experience lies in the details.”

Live by your vision. Trust your guts. Aim for quality. Party like there’s no tomorrow

@benguedj Benjamin Guedj – @sarrimaxime Maxime Sarri

Amazing super production of sites by Dogstudio… *NEED* to check their website:

Divya Manian

Responsive Design: Current State of Affairs and Where do we go from here?

In this talk learn about what we mean by Responsive Design, the workflows around responsive design that exist today, the problems that we have noticed amongst the current workflows and how we are addressing them at Adobe.

My notes:

Product manager at Adobe – her main focus lie in new features on Photoshop to help people on responsive design.

Design decisions outside of canvas…

The researched showed that people were not satisfied with workflows, they wanted to use tools they already have (not learn another), they didn’t like updating tools, there was an increasing collaboration, but lack of tools for collaboration.

The clients don’t really know what is responsive design, they feel hard to keep pace with changing browser feature set, tedious to update design for different devices.

She advocates to determine where the design breaks, determine the breakpoints and prototype for them.

Implementing the design – use same grid as prototype, inventory features you will use, use responsive frameworks.

Check site: html5 please – use the new and shiny responsibly

RD is necessary for websites and data agrees.

OMG! she did all slides in Photoshop! check this: (didn’t work much for me though… 🙁 )

@divya –

Ricardo Cabello & Jaume Sanchez

The Web in the age of WebGL

In just three years after its conception, WebGL has emerged as the de facto technology for creating web experiences and it is now supported by all the major browser vendors. During this presentation, Jaume and Ricardo will talk about the possibilities the technology brings to the table while sharing the process of developing some of their projects, giving a comprehensive overview of their current workflow and toolsets.

My notes:

WebGL vs Stage3D (Adobe)

Project 3 Dreams of black – (2011) – code now on

Unity or Blender? They actually used Maya for many of their projects…

Check – Three.js is a library that makes WebGL – 3D in the browser – easy to use. While a simple cube in raw WebGL would turn out hundreds of lines of Javascript and shader code, a Three.js equivalent is only a fraction of that.

Google maps cube game – started using Maya – from .OBJ converted to .js

Example (very summarised) of workflow for the project Wind&Sun (2013): they used Maya again, but terrain and repeatable objects in Collada. Then review and fix meshes (CSI Models) then optimise and output to binary, finally webgl engine with camera edits.

Gravity (2013) – website for the movie – assets from movie > siplify meshes > preview assets > camera edits

WebVR – Oculus/Cardboard devices –

SmartWater experience

@mrdoob / @thespite

David Navarro & Claudio Guglieri

Where we’re going we don’t need roads

It’s freaking hard to predict the future. Will there be flying cars? Flying skateboards? Self-drying jackets? What can we learn from movies about how the future is going to be? In this talk we will explore what we can learn from the big screen and how that can be applied to our daily jobs with the internet. As digital designers what we do today will have consequences tomorrow, it’s a great power that comes with a great responsibility.

My notes:

Digital interfaces in movies, touch screens, interactions everywhere. Example of Back to the Future II – the date on the display is this year!

The presentation is full of movie clips, frames, images that exemplify all these interfaces that we had contact on a movie (possibly first) and slowly becoming real (or already here!).

Movie references: Matrix revolutions, Avatar, Her, Back to the future, Minority report, War games, Blade Runner, AI, Knight rider, 2001 (Hal), Star Wars, Pacific Rim

Speech – voice interactions bring machines close to us

Movies: I robot, Time Machine, Minority report (store), Moon


Hendo Hoverboard (a la McFly!)

Touch – the tactile, the feeling

Movies: Strange Days, Metropolis, StarTrek (original series), Next Generation (surfaces), Sleeper, Jonny Mnemonic – feedback on wrong password. (right now I don’t remember why Brad Frost was mentioned… maybe about Atomic Design?)

Glass tables, glass tablets, surfaces where you put the hand and options appear.


Movies: I robot, A.I., Black mirror (smart houses), Minority report (delivering content according to emotional states).

“Future is design agnostic”

Note to self: check “Black Mirror” on Netflix (mentioned twice on the presentation…)

Augmented reality

Holograms – projected in public spaces

Holograms – private spaces

“the human body is the next computer interface” – Fjord on FastCoDesign

Possible future job descriptions?

  • Brain director
  • Augmented Reality Interior Design
  • and so many others fun to hear…

@davidnavarro and @claudioguglieri

(if you know where they added their slides, please share on twitter and send me a note @monicams)


Conference site

Awwwards Barcelona – Day 1

Awwwards Barcelona - Great event, inspirational talks and projects.

Conference venue was easy to find from my hotel, it was a building with nice clean lines and staff was very helpful. Coffee was nice and strong, despite coming from Nespresso machine.

Swags were sooo nice!

Awwwasome swags! The “100% brain food” is packed with case studies! #AwwwardsBCN

A photo posted by Monica Messaggi Kaya (@monicakaya) on

Book of use cases and a nice notebook with some tips of places to see in Barcelona.

Great  fun welcoming talk from Josh Holmes @joshholmes, including raising the near fire alarm (none visible inside auditorium), no tweets and no selfies with firemen and/or fire before the fire is completely out.

So, here come the notes…

Haraldur Thorleifsson

Real artists ship

Designing something nice in photoshop is easy. Designing something that solves the business problem, gets through the multiple stakeholders, looks nice and eventually launches is a lot harder.

My notes:

Designers have loads of sketches, ideas, mocks, prototypes created but all sitting in cloud/drive without being published. Company UENO. How they setup rules to avoid lost projects…

Haraldur is from Iceland and he says that most people there are generalists, not specialists. There’s usually a small team and one man does-it-all is the designer.

His suggestions:

  • Understand the project (don’t start with UI)
  • Stop pitching (too early in project to do any pitch, understand the business first)
  • Create your own wireframes (they use a ‘flat design turned gray’ to communicate and build trust and work on concepts and ideas) – showed sample for Dropbox user/admin guide.
  • “A prototype is worth a thousand meetings”
  • Photoshop lies (easy to create something beautiful, perfect, but not real)
  • From idea to launch (ask the client how they think they will bring the idea to solution)
  • Only deal with decision makers (clause on contract: “if you want to have an opinion you have to be in the meeting”)

A few examples of work: Dropbox user guide, Medium design, Google Santa tracker, Reuters TV app (video cast) @hthorleifsson –

Bruce Lawson

<picture> and responsive images

Amaze your friends, confound your enemies! Oh, and save bandwidth and speed up your site by sending the correctly-sized images for the device with HTML’s new responsive images capabilities. Bruce proposed the new <picture> element in 2011, and it’s just gone live in Opera, Chrome and Firefox, so learn all about it now and put the techniques live tomorrow.

Fairy magic that works in browser! NOW all makes sense! #AwwwardsBCN @brucel

A photo posted by Monica Messaggi Kaya (@monicakaya) on

My notes:

<picture> tag and attributes Images are big and getting bigger, and not responsive properly. 3 years ago, retina images would be served no matter what, now you can serve the correct image size for each device.

Steve Souders, the “Galdalf” of performance said that:

preloading is the single biggest performance improvement bowsers can make

Media queries for video already existed and worked, so, @brucel and worked with the <picture>

Serving hi-resolution images properly – the only way to work is via the srcset, example:

<img src="'normal.jpg&quot;" srcset="hi-res.jpg 2x, super-res.jpg 3x" alt="desc here" />

Serving ‘stretchy’ images:
<img src="medium.png" srcset="big.png 960w, small.png 240w" alt="desc" />

Different widths but showing with the size of 100% of the viewport. Order of the media queries matters, the first to satisfy the requirements ‘wins’. You need the <img> as last option of the <picture> to carry on with fallback to other browsers.
  <img src="tree.jpg" alt="tree" />

Check his slides at: – @brucel

Tobias van Schneider

Side Projects are Stupid

Exploring the world of side projects and particularly why I believe side projects are stupid. The talk will bring light into this mystery.

My notes:

Tobias mentioned that side projects have to follow the KISS principle.

General concerns we have: not enough time, fear of failure, overthink, not the right moment, have kids and family, have to pay the bills, have to do research first, and all other excuses…

“The best way to complain, is to make things”. – James Murphy

A few of his projects:

  • Authentic weather app (simple, funny phrases, etc.)
  • Soundslike festival 2010 – open air festival – learning curve, not knowing about the process and all that was required.
  • Les Avignon project, one of the members setup screenprinting for t-shirts, then tried out the long boards (‘it was just a stupid idea that received amazing feedback and could potentially turn to business’)
  • His favourite project was Reflections, photographing reflections of these square glass objects and making artwork/prints/postcards. Playing with elements/objects and being creative without actually having an initial goal.
  • 2D flat surface shader
  • Semplice – Semplice is the first fully responsive case study portfolio system based on WordPress. Built by designers’, for designers’.
  • Projects can also appear out of a simple personal motivation: make people laugh, example:  PaP – Passive aggressive password machine
  • .Mail – naively optimistic (but we need to know when it is enough) – this was a side project that was fun but then was not fun anymore… (n.b.: link to a review, Tobias doesn’t have link to the project anymore)

The Principles

  1. simple stupid (if people say it’s crazy and stupid, you are in the right path)
  2. ignore everybody (Huh MacLeod)
  3. trust your gut
  4. be a jack of all trades (to be able to see the big picture)
  5. stay busy (“it is faster to run when you’re already walking”)

Example: Casey Neistat – youtube videos skate boarding – self-taught film maker @schneidertobias –

Meagan Fisher

As designers we spend most of our time toiling over the graphic design principles we need to master, or the best way to create progressively enhanced sites. These skills are vital to our success, and worthy of our attention. But there are other things to think about that are just as integral to the quality of our work. What larger role does design play in an organization, and how do we shape it? What kind of culture should we foster within our teams? How do we choose where (or if) we focus our efforts, and how does the focus of our work affect the development of our skill set? In this talk we’ll step away from the keyboard and explore the interpersonal side of design.

In-person testing to gather feedback #AwwwardsBCN

A photo posted by Monica Messaggi Kaya (@monicakaya) on

My notes:

“The goal fo design is to provide the best possible solutions fo real human needs.”

Empathy as keyword

Where do we find constraints? – goals and limitations of the organisation, our aesthetic ambitions of a project (‘how we can solve this problem in the most beautiful way possible’), the needs of the users (failure of Coke creating the New Coke – without checking customers – and bringing back the ‘classic’ Coke; then Pepsi ‘crystal’ that didn’t taste good)

User on center of design process is well known but we fail to include the user quite often.

Innovation as keyword

Excuses: “User research belongs to someone else”, “I don’t now where to begin”, “It may raise inconvenient questions”, “It’s expensive and time consuming”.

Getting to know the user doesn’t have to be hard.

Interviews, remote testing, observation, analytics:


Listen to what your users are already telling you.


Keep yourself reachable, create more personal emails (don’t need branding), asking what the users expect, what they will use the tool for, etc.

HelpScout – gathering feedback

Example/suggestion on being in touch with the customer: 15 min spending on random support tickets every morning, get notifications for tweets people send to the organisation, ask sales rep to listen in on a call once a week.

Getting all this empathy will give you:

  • useful constraints
  • meaningful content
  • better critiques
  • iterative changes

“Become a better communicator”




Marko Dugonjić

Responsive Web Typography

Responsive Web Design done correctly is based upon content rather than actual device resolutions, and so typography should adapt to both layout and sizing across content breakpoints. However, mere font sizing along the typographic scale based upon two-dimensional viewport @media queries is not enough. Apart from setting the correct balance of the black and the white in letterforms and texts, there are other important factors such as reading distance, information density, screen sharpness and device orientation that also influence the reading process. Learn to look at typography multidimensionally and enhance the overall responsive experience.

My notes:

Check Creative Nights (agency in Croatia)

Pantographia – accurate copies of all the known alphabets in the world!

Things to consider

1. Reading distance (basic font size, differs from device/medium) – He created a detection test at (dependent on user camera and permission of user)

2. viewport width height (imagine a bullet point in each phrase and if looks like bullet list is too much height, also consider diactrics – giving enough distance to differentiate them in between lines – and other characters)

Book to check: Inside Paragraphs

3. Content Hierarchy (Tim Brown) – test different ratios and

4. Information Density (quantity information you can see on screen)

5. Pixel density
check – designed to function reliably at 9px to 18px also and

6. Device Orientation and

7. Aspect ratio
example with paper sizes perfectly aligned A0 to A6 and then all kinds of aspect ratios from devices (check his slides for the visual)

Article to read: Designing with context

All his slides are at: and the Awwwards Barcelona slides too.


Phil Hawksworth

Betting on the Web to #Win

The Web’s open nature has fostered ways of working which accelerate learning and innovation to an amazing rate. How do we keep up? How do we protect this asset for the future and can it compete with the fashionable application marketplace?

This talk will explore these themes and attempt to answer those questions by looking at case studies, examples and concepts from past and present.

Great roundoup presentation

A photo posted by Monica Messaggi Kaya (@monicakaya) on

My notes:

Phil works on R/GA (London) started as ad agency now they produce ‘other stuff’.

The Ted Nelson words (and his attempt at using them on the presentation) – hypermedia, hypertext, transclusion, intertwingularity, teledildonics, etc.

“Everything links to everything”

heich tee tee pee double meh – once you’ve seen it, you’ll never forget…
H T T P ://

Fashion and trends…. yes, trends appear and disappear. Standards and conventions versus trends.

Much more important now: accessible, stick to the principles you know to be true, resisting ‘the man’.

Check Google year in Search

‘We need to consider performance a design feature, not just a technical concern” – Yesenia Perez-Cruz via @philhawksworth #AwwwardsBCN

He mentioned Lonely planet style guide and highlighted that many others can be found at – also great article: A maintainable style guide

High level sitemap with sticky notes (and agile!) – example of his involvement on styleguide for google developers

The new way to Taco Bell isn’t on the internet it’s #onlyintheapp (problem about which App Store to cater for: Apple? Android, Amazon, other?)

Progressive enhancement is not about having javascript disabled, but to be conservative in what you do, be liberal in what you accept – Jon Postel

@philhawksworth –

Slides at

Paul Bakaus

Designing with Chrome DevTools

Paul is currently working on many design-specific features with the ultimate goal to make DevTools a tool for designers, as much as for developers. Come by for a sneak preview of crazy new things, such as improved responsive design controls, rich live editing of animations and more and more fun with colors.

My notes:

The anchorpoints: design, develop, iterate

Paul gave various examples of new features coming up (and some already in place) on the dev tools.

DevTools for designers for today – eye dropper can pick colour hovering on the page, with a few steps it will allow editing css/less/sass files straight from browser, the inspector shows exactly which font is being rendered.

Live editing in Dev tools, go to settings: workspaces – add the folder and allow editing (when question comes up), and in sources tab on browser you can map to file system resource (double check docs later).

(Note to self: I understood that works for CSS but does it work for less/sass? how about compiling?)

Other amazing features: Animations tab to control animation speed. Cubic bezier editor showing onion skin previewing how it will look.

You can play with the Google Canary version and check for the effects

@maxwrk is a new designer at the dev tools team

“SCRIM” term and story: Smart, Colourful, Responsive, Intuitive and Material
S – typography and layout audits, flex assistants
C – colour swatches, gradient designer, colour theory
R – always-on, simplified device mode; device art and centered rulers
I – css transform builder, layout mode
M – material UI builder, material colours and animations

How to contribute?

  1. (Trello board)
  2. comment away
  3. add your own ideas and mocks
  4. ???
  5. profit – @pbakaus



A tomato, a picture, an elephant and a bunch of jugglers

Everything we talk about is inspired by the stories that frame our personal and working lives. There are seemingly few other experiences outside of those two contexts. What we have learnt – after all these years! – is that each story does matter. Every single story, from the smallest anecdote to the most profound tale, can become utterly unique and unequalled. What matters most is how you tell a story. We would like to tell you something of the diverse stories and experiences that have shaped who we are, and what we believe in. Let’s do that by discussing creativity. Creativity is a force that can change everything, turning all it touches into a work of art. It is a universal language that makes dreams come true.

My notes:

Stories allow us to be creative, be happy.

Helping hands – a picture story – #7mml an humanitarian project, around the world, and about food – creating a travel diary, photos, maps, instagrams, twitter, videos (youtube)

Apparecchiato – a tomato story – local food and ecomerce (buy fresh local and good food).

Scruud the vegetarians – a band of jugglers – game ‘scruud’, developed internally, (a bit like ‘angry birds’ IMHO)

Diumbo – an elephant story – app to meet people, approaches only ‘closer’ people to you so you can meet personally using only wifi triangulation.

“nothing to rethink, everything to invent”



Vitaly Friedman

Responsive Web Design: Clever Tips and Techniques

Responsive Web design challenges Web designers to adapt a new mindset to their design processes as well as techniques they are using in design and code. This talk provides an overview of various practical techniques, tips and tricks that you might want to be aware of when working on a new responsive design project.

My notes:

He started with a few examples on screen…

Use of ‘ascii’ art in 1800s
C-fax / teletext – Vitaly getting embarassed explaining how it works to the audience.

The Smashing conference:

Considerations: components, strategy and layouts

Check Atomic Design by (check the whole history of a project, from the big picture showing one big image/canvas with design elements, then refine and work up to a prototype/sample page, general look and feel)

At smashing magazine they try to define component behaviours for xs, small, medium, large, x-large and xx-large but undefined to exact pixel constraints

They also use a styleguide and boiler patterns on Drive just showing where they can shortcut depending on the type of components used for each project.

StyleDocco generates documentation and style guide documents from your stylesheets.

‘peta library api’ –
lonelyplanet/rizzo (github)

– Design workflow –

slightly better linear workflow -> content . ux . design . front-end . back-end . launch!

Build smaller, tactical teams that are capable of executing multiple rounds of planning, design, and code quickly and independently. — Trent Walton

Ask the customer to prioritise instead of asking what it is important (after all, everything is important for the customer).

His trick: “fast-fake” a competitor URL loading time and show the client site using Slowy

Close and sign off the performance budget at this stage, since emotions are high and customer is concern that is performing badly compared to competitor. Later on, whenever the customer wants to add new features, give 3 options:

  • remove existing feature to add new one
  • optimize the new feature
  • don’t add the new feature

(most of the time no feature is added)

Update (09/03/2015) – check my notes on Day 2.

Conference site:

UXOxford with Nathan Ford and Fabio Carneiro

Nathan Ford – Connecting aesthetics and UX by focussing on the content

“Designing for everyone is designing for no one”

How to communicate for different types of people?

Their team tried: Waterfall, then Agile and what works now is “everything all the time” (EATT)
With all that happens to cope with RWD, basic principles of design still apply (typography, colour theory, etc.)

1. Workflow – who is doing and who is responsible for RWD
2. Testing (then test, test, test…)

Examples of problems with grids: sevens, drifters, pinches, giving up
Remember – as designers – to use type, colour and form.

Check Grid Systems book.

A more natural approach to fluid layout…
Idea of ‘content out’:

  1. Start with content
  2. Construct your layout from the content out.
  3. Bind the content to the device (in meaninful ways)

Harmonious proportions (in book design) of content within the page –> ratios

Connecting content
1. Constraints (check sizes, proportions, aspect ratios, fonts sizes)
2. Patterns (what type of site you are building?)

build content with relationships instead with columns, using ratios.
Types of ratios: “Golden ratios”, 12 orthogons Quadrat (Square/Even) – 1:1 <--- many others here ---> Doppelquadrat (Halves) – 1:2

Check article: Composing the New Canon: Music, Harmony, Proportion – Owen Gregory

The formula: target/content = result (a further explanation/examples by A List Apart)

Example of relationship: text and image (example 27% / 73% approx ratio)

Using ratios instead of grid. Use ratio in general, then apply again for the internal/child elements. So, apply ratio for main layout then apply again for aside elements, other posts or highlights.

Connecting device
1. choose a ration and scale based on your content demands
2. build content grids for patterns
3. divide available viewport space with layout grids
4. (missed that one 🙁 ) (cmd + g to show/hide)

Chaparral website/layout created with grid based on height of lowcaps and highcaps letters and the delta in between them.
The font: Chaparral –
The article: “Deriving layout from your typeface”

Fabio Carneiro – Hard-won Lessons in Email Design
Neapolitan – Mailchimp new tool, with drag-and-drop ‘components’

So, why bother with responsiveness on email?

91% of people in EU own a mobile phone
majority of people (67%) send and receive email via mobile

30% of world have mobile internet

Incredibly fast mobile growth, need to adapt and be responsive for this demand.

User experience in email

“Cardinal rules”
Design within constraints
Email readers not supporting latests technologies (many of them strip headers, css, allow only inline styling)

Design for distraction

“one eyeball, one thumb and at arms’ length”

Making the experience easier and less interrupting for people, helps transmit a clearer message.

Design with purpose
In social media people ‘come to you’ for a message; in email, they trust you that you won’t fill their inboxes with ‘garbage’ and and transmit a focused, concise information message and sometimes, well-crafted images.
Examples of email types: selling or offers (sales/announcements usually with images); call for action (subscribe/attend/etc); reading emails (blog posts, news, etc.); transaction email (very specific finite amount of data, but with all the relevant information, appropriate – no space for jokes

Design for email
Do not bloat email with headers, navigation, loads of footer links and sharing elements. Make it simple, focused, related to interest of recipient (if possible – personal).

Building responsive emails

Modular pattern-base email – reduces the likelihood of email will break, reduce the amount of CSS.
Fabio maps out patterns (sketches) that have purpose on emails. He starts with scaffolding, in a Zendesk example we could see a header with company logo, social icons, then a ‘free form’ in the middle that any component/module can be inserted and footer has contact information/unsubscribe. Minimal, clean and uncluttered email.

Mobile first in email – most email clients don’t support media queries and/or max width – he worked with a table container with 100% width (not supported in Outlook), solution was to use conditional comments with a fixed width. Issues in OS still (Apple mail) that he solved with media queries (since it is webkit).

Table layout shifting – in emails you cannot use floats or positioning, to solve you can use a hack. Example, to use two columns on email, each column would be represented in a table, one after the other with their own width. The ‘hack’:

@media only screen and (max-width: 480px){
     table[class="templateBody"], table[class="templateSideblock"]{
display:block !important;
width:100% !important;

Email design resources
Email Template Reference from MailChimp –

There is also a github repository with email templates

UX newsletter on mailchimp –

From SmashingConf, another templating resource that was mentioned: ZurbInk –

Litmus community – forward emails to various email clients and send you back screenshots –

Event link:

Bunnyfoot – @bunnyfootsays