Web was conceived about 25 years ago, by Tim Berners-Lee and Robert Cailliau. It was actually developed on the French site of the border, and not in Switzerland. But it has Swiss, German, American, and Japanese influences too.
Kind of multinational, but mostly from developed countries.
Fifteen years later. the most users online come from the countries who started the web. Developed companies got there first. Mostly North-America, a few out of Japan and Korea.

The internet penetration is still quite low in other countries. Although there is lots of traffic from emerging economies now. 3 billion people still have to enter the internet. Thanks to the smartphone these people will be online quite faster than we expected.

Xiaomi for example. The company is kind of like Amazon, it has devices but sells apps, accessories, etc. They give the devices away, but they earn on the apps. They are now moving into South-East Asia. They have forked Android, but made it look very different although it is still compatible with the apps. They have crowd-sourced development. There are new updates every week. These are really cheap devices, between 20 – 50 euro, but they are not that bad devices.

What kind of internet will these people find?
We begin this story with sheep. Sheep are for sale on Instagram. If you have an Instagram account, you can slap a price tag on it and take a picture. People are hacking little businesses on platforms they found on the internet.
In Thailand there are 10.000 businesses that are only on Facebook.
For as long as there has been people, there are ad hoc businesses. It’s easy to add a phone number, or social messaging app account to these sites, but they are also pretty accurate. Some of Them even have tracing numbers posted on their Facebook page.
83% of the Thai use Facebook. It’s easy to get notifications, and it works even on old, crappy phones.
The largest growth for these kind of businesses is on the countryside, where there are not many brick-and-mortar shops.

41 cities in China have more than 2 million inhabitants. They have a middle class that’s growing at a rate of 80.000 people a day. Reaching 600 million rural residents in China can be hard. Reaching 700 million urban residents can be expensive to reach, even in cities.
Using a mobile phone isn’t a modern alternative, but their primary or only means to reach the internet.
In China 90% of online retail goes through market places to small businesses. it’s the modern version of the old market. The largest one is Alibaba’s Tmall. It has 180 million customers, 150.000 merchants, 200.000 brands. Brands are charged an entrance fee – to add a barrier for fraudulent businesses – and a commission for each sale.
The merchants get high visibility, high traffic, and a customizable, social media optimized platform.

There are even businesses that make sites in Tmall as a business. Hosting on Tmall is sometimes better than opening physical stores. Apple opened one last year and now even Amazon has one.
Taobao is a site like eBay. You pay for advertising to get people to your page.
You can buy your trip there for example, but also everything that you might need on the trip, from transport to visa.
On Tmall you can get a Peugeot or a Lamborghini.
Being on those sites is also a national pastime, like a second job or hobby. These sites have created millions of new jobs. People who make things can now enable the whole Chinese market.
Tmall goes to a village, sets up internet, trains people who know a bit about technology and makes them the resellers for the whole village.

Also Western consumers go to Alibaba. They buy stock directly in China and sell the finished product to North Americans on Etsy for example.
Send your measurements on Etsy and get a piece of custom clothing in a few weeks.
We now have a new kind of consumer who is digital-first.
How can consumers find the products they truly want? Young people have a Weibo micro-blog about fashion for example and also sell stuff that looks like what they wear and some of the more popular ones sell out in mere hours.

Online shopping neighborhoods have started that curate products. Kind of like Pinterest. Meilishuo has 32 million users. They get 5 million clicks, which earns them 3 million a year.
Social media is really big in China and other emerging countries. They are not sites, but platforms.
Wechat is entirely mobile. It has 500 million daily users. Nobody uses their phone to call, just to Wechat. It has an customizable API, and payment platform. You can make a kind of store inside the app via the API. You can chat with a virtual bot to ask about products they offer.
There’s no ‘one web’ over there. In China, and South-East Asia mobile is becoming a selling point. You need light apps, that run on old phones.
They are creating mobile only websites. You can see a poster, scan the QR-code, get to a page, and the call-to-action is to go to Wechat. It uses SVG etc. to keep it light-weight. It’s not working very well on desktop, gets stretched-out.
Why do they have it there, but not over here? There is almost no penetration in normal financial services.
Fear of counterfeits.
How do you know who to trust? There are millions of vendors. They have virtual escrow systems. The money you pay gets put in escrow until you say the product arrived fine.
Alibaba now started with Alipay, to get a payment system for other things.

yy.com is like Google Hangouts. You can find Karaoke, educational courses, podcasts, etc. But it has a virtual currency. You can teach things, and people can buy you things for credits. The top karaoke singers make 25.000 a month.
Wechat generates QR-codes for every new account. That’s your identity. You can subscribe by scanning a QR-code. They are using QR-codes to interact, and transact. For example at Starbucks.

They don’t have the baggage to wear them down.
Lamoda in Russia does e-commerce. But Russia has a problem with poor postal infrastructure. Also they are not trusting credit cards. They tried to send assistants to shoppers. You’re paying at the door, but they bring extra stuff that you might also want to buy and you can try it for 15 minutes and decide if you want it.
In China they call it a mobile fitting room.

In South-Korea they paste a supermarket on the wall, you can scan the QR-code and it gets delivered when you get home.

Combine drones with Lamoda up-selling? Nobody can predict what happens next.

People say you see your life flash before your eyes in the moment you think you might die. That wasn’t the case for me, the only thing I noticed was the smell of grass.
I was 6 years old. In the small town in Tanzania where I grew up there was a man called Bwakila. He was a cray, madman. One day I was walking home from school with a friend. There was a man walking down the road. A man walking with a machete, which wasn’t quite common around there. But we noticed it was Bwakila. My friend that this was a smart time to provoke him.
Bwakila gets a different face and starts chasing us. Fight or flight. You think before you think. My attention span was filled with grass, as that was my escape route. This is also called tunnel vision.
The information coming into your attention space is very limited. Attention is zero-sum. Attention in one place is poverty in another. We often take for granted how much information is normally being ignored.
All information spaces have a factor that limits their bandwidth. Your attention span is limiting. There is a pretty constant amount of processing power in your head.

Human attention doesn’t scale.
How can we maximize our attention. With more devices that are connected every day. What happens when the rest of the world gets onto social media.

If we cannot manage our attention, we can fall of the cliff. Stephen Wiltshire is mute since his youth and severely autistic at 3 years old. He was knighted at 32 because he was brilliant. He draws photo-realistic drawings from his memory. Why can he do what we can’t. Those who study autistic say we just perceive as much as he can, but as he lacks some things his attention is bigger in other parts. He remembers and sees it all. it comes at a cost though. If attention is a scarce commodity, that means that the amount of attention he is paying diminishes the capacity on other things. It’s a capacity of our bodies that we forget a lot of things. it’s a proxy, a firewall.
If we can build user interfaces that don’t make us fall of a cliff. We need to know ho we got here.

Moore’s law is an observation that the amount of computing power tends to double every 2 years. Computers aren’t getting faster, they’re getting a lot faster a lot faster. What’s hard to grasp are the consequences. It’s not about computers doing more things, just being faster.
Because everybody has a computer in pocket that can determine location, it enables you to build a service that disrupts taxi services. Netflixing of tv. Amazon. Spotify.

Changing protocols
Telephone numbers have changed, it used to be kind of an address. If you’d call me at a certain time, we could agree to have a conversation. It was the social protocol of telephones. But this changed with mobile, and the need of location disappeared.

Changing metaphors
Computers are like the bicycles of the minds. Just apply force, and computers take us further. The blue line is our attention capacity. This has staid the same in contrast to computational power. At a certain point computers are sending signals faster than we can process them. We would go into Google and search. The information is pushed now in streams and notifications. All of this is run by algorithms. Who, where, when, what you want. We are the bottleneck.

Reverse time-sharing
We used to do time-sharing. Go to a computer, enter your query, and go to do other things and get back to get the result. Now they are much faster. Optimized to advertise. Now it’s them waiting on us. Will we do something with what computers push to us.

If your phone turned off this month, it was probably by accident (Some exceptions left aside 😉 ).
Computers communicate with us through notifications. on average we receive 60 notifications a day. facing a usability cliff to our attention.
The biggest spam bot ever is the internet.

We can’t go back. You can forget something, but you always come back somewhere else.
What do our bodies do if there is too much information for us? They help us reduce the load by doing more work and trying harder. Switching of notifications was a quite crude way to do things. I put my phone on the table and set it on silent and had a conversation. Half an hour later I came back and had a lot of signals. if it is too much information, it’s just noise. You don’t know anymore what’s more important.
You won’t know if something important has happened until you spit through it all.

Theoretically we have Bluetooth and telephones can communicate together. In theory it can now know that friends are in a cafe talking, so it should know it is not important for you at the moment. You need to queue and group and snooze the notifications.
Maybe at 7 o’clock alone at home the phone should push the messages. Most of them shouldn’t have been there in the first place (isn’t that the users fault too?). At most a notification that your house is on fire should be popping up.
What would it take to make a phone think for me? The phone needs to know me much better. My identity.

My body knows I want to go home and see mom and not being hacked apart by a madman.

“The first company to fully execute on embedding your identity into your phone making a truly first class experience wins the next decade.”

This is not your identity: your contacts, user account, password. etc.

Identity is how a user manages their attention.

We could have almost the same followers and the same handle (nickname) but still be totally different persons.
The people who get my attention at the office are my colleagues. at the dinner table it’s family.
We need a program or code to measure our attention.
The best place to manage attention is the OS. Apps can only see a part of what you do.
We have a central OS that manages our whole body, not only what the eye sees.

Some players are at an advantage, because they already have operating systems. Facebook for example knows they’re not an OS, but they have a huge amount of data. Facebook Home is a take over of your homepage but it didn’t work out. But their messaging app does. It’s a separate run time on top of your phone. controlling your attention stream.

Privacy
once you’ve enabled the platform to know information it has this creep factor. Privacy is a misalignment of a user interface. There is not enough transparency of what is happening with your information.

Just because a bank has your wealth doesn’t mean they own it. What if we can decide what information to share with who. What if information was our property. That would take the creep factor a bit away.

Alan Key – Programming is literacy. Programming, anybody can do it. There is a limit to how many people in Palo Alto can learn about our lives.

What if instead of programming we can create filters. This is why we created object oriented programming. one of the worst things is state and it being scattered.
They requested money from the US government to reinvent programming. Taking away the silos. Taking away the barrier of entrance. Take away the creep factor.

Apps are not pushing notifications, but you can write subroutines. Allowing you to group information. What if you could write an algorithm that would not disturb you if you’re in a cafe. The hardest part about Moore’s law is the implications.

Identity is a layer in software. Your information will always be in the client, and your phones are the thin clients. Where do these things fit in. Think beyond the horizon. Lots of challenges, but it’s a great way to build things that are of great value.

The impossible is the inevitable.

A trip back to 1991. Not yet 25 years yet, some journalists last year got it wrong.
The all of the USSR, the first gulf war. sonic hedgehog, and my favorite: SNES.
The web is 24 years old. Probably older than some of you in the public.
Because we’re a young industry, we sometimes don’t know anymore why some things were like they were.
We have to work harder to keep our past accessible. A lot of it is gone already.

Learn from the past

’91-’00 the Wild West
Browser wars, Dotcom boom.

’93 Mosaic browser launched. It supported inline images, before that it was all text.
CERN devoted the web to the public.
’94 W3C formed. The founders of Mosaic formed a new company called Netscape.
’95 Netscape’s IPO
’96 CSS level 1
’97 Full swing browser wars, but not in supporting CSS, more propriety features.
Microsoft licensed Mosaic to become IE
’98 WaSP (web standards project) launched. Never meant to be an acronym, but literally a swarm of wasp. Bugging browser vendors to support new features. But people didn’t get the name, and the acronym fitted nicely.
It was a browser upgrade campaign, inspiring users to put a banner on their site, to ask users to upgrade to a newer browser. Didn’t matter which one. It was not meant for users, but for developers to be able to start experimenting with new features.
’99 IE overtakes Netscape. Would take until 2012 before Chrome finally overtook them.

Yahoo site in ’94. just a grey background, and a menu. With a list of links below it.
’95, they were experimenting with logos. That was still pretty common back then.
’96 They came out with the well known homepage most of you remember them for. This one probably stayed for 5/6 years, which was quite a long time in these days. There were little changes made in 98/99 though.

Hotwired – the online version of Wired. They had the first banner ever. It had click through rates of around 80%. Nowadays we don’t even count click-throughs anymore, we just go for impressions.
Ads with countdown timers, modal popups, etc. All these can be traced back to this.
Before Google, we had Altavista. Before Gmail we had hotmail as web mail.
Geocities was the wild west for personal sites. It was the #3 most popular site once. Until they got acquired by Yahoo. It went fast after that.
Tim Berners-Lee worked for CERN. It was a scientific organization, and the web was a scientist project.

The web isn’t print, but everybody wanted it to be. You can’t expect something new to come around and people directly knowing what to do with it.
We wanted the web to be a visual medium. Images, flashing images, Flash.
In the mid 90s HTML was about presentation. Killer websites (there’s that book again, maybe I should get a copy?). Pixel GIFs. Good and bad things.
People would build entire sites in flash or as an image, because it has some nice features, and it would look just as they wanted to. Didn’t have to consider browsers compatibility anymore, as there just was IE now. You could make a site with visual tools, without knowing how to code.
CSS was designed to fix this, but it was not good enough to fix all this at the time.

2001-2006 quiet years
This era has defined the web. Things felt small. There was more of a community. Blog comments worked, there was no spam or flaming yet. Blogging was hot. Movable Type, WordPress. exciting time with lots of collaboration. Slack is the closest to it what we have now (So much talk of Slack, I should probably look into it).
’01 Wikipedia launched. Could you think of that we had a time before Wikipedia and Google. Well, Google is a little older, it launched in ’98, but didn’t became very know until 2000.
’02 CSS hacks started to gain ground. CSS layouts worked, except in IE. Hacks started to get a live of their own. It got out of hand quickly, just start hacking because we can. The box model hack the first CSS hack?
’03 CSS Zen Garden. This was my project, I can’t really talk about it objectively. It was build out of frustration that nobody used the standards. Jeffrey Zeldman said show people standards, don’t tell them. I was just an advertisement person talking about it.
’04 Firefox 1.0 started using the Netscape Suite and stripped it down.
WhatWG started, who you might now from the HTML5 standard.
’05 Adobe buys Macromedia. We ended up with one tool, instead of it getting improved. The state of authoring tools didn’t really grow. I like that we have tools like Sketch now to give Adobe some competition.
A List Apart. Digital web magazine was like it. many people forgot about it. It was a great way to get visibility and promote things for the web.
Launch of Wired news. The first site with a full CSS layout. Wired was the Microsoft of that time, who was the showcase for responsive design. The fallback sites for older browsers were very ugly.
ESPN came along a little bit later. The developers of both site worked at twitter later. What does that say? With Wired people said it was just a site for techie people, but that didn’t count with ESPN.
By this time the browser development had stalled. The update cycles went from weeks to years. Netscape 4 was still around, but the last release was around 97. It even had a significant share 6 years later. It finally destroyed itself from the inside.
This was the start of ten years of slowdown. After auto-updating we started to go much faster again. IE6 FUD, at that time had over 90% market share. They didn’t shape the web at all. They walked away from it. It’s hard to not be cynical. It’s not clear what they were doing. Did they see the web as a competition? They didn’t predict mobile or the cloud… making a single OS obsolete. Other browsers didn’t really matter.
CSS 2 was released, but buggy. Although it didn’t matter. CSS3 was still very far off. Nobody knew what CSS really could do. The ones who knew, weren’t designers and couldn’t show it. Selling standards to your boss was hard.
We got past this by doing small projects at a time. As a community. There was no browser evolution, but we needed to do our job. We created new techniques in an accessible and semantic way. We were figuring out how to build layouts. There were two options: positioning and floats. Positioning didn’t work very good. Floats were actually a hack.
We could start downloading themes that were the base of our current frameworks.
Sliding doors, tabs were very popular at that time. It used two images that had text in the middle and could slide back and forth. This was also how we did rounded corners
Also very common were fixed faux columns, and various image replacement techniques.
The term DHTML was used a lot, kind of like JavaScript++. In that time JavaScript was thought of as evil. This changed at the time that AJAX came around.
Lots of new, independent companies, like flick, Delico.us, Feedburner, Upcoming. These came along when the internet was revived. They revived the general interest in the internet. One company saw chances and bought projects. it seemed they got it. That company was Yahoo.
Too often now a company gets bought and its former product destroyed. Including the data generated by the users.

2007 – present: Multi-device web
Often it was asked in the media: will this be the year of mobile? 2007 would become what we think of the year of mobile now. When smartphones got around, they had browsers but these were terrible. Until 2007. until the iPhone. It had the first browser that mattered.
Steve Jobs sold it as three products, a phone, an iPod and an internet communicator.
08 A flurry of activity, CSS animations, web fonts. Chrome gets released. Android released the first time.
The web won’t stop at at the phone. We need tools to present the web in the best possible way. Fixed width websites were easier to do. People like Ethan (Marcotte) and Jeremy (Keith) proposed responsive web design.

Last thoughts
Major vendors are committed to the web. there is a lot of active development. There are new specs, a constant change. Continuous growth. Specialize yourself, but don’t get stuck in there. Keep looking around for how things evolve.
Be vigilant. Things look good for the web, but don’t let your guard down. Net neutrality, and government surveillance threaten the web. One company dominates the browser share. That might make it hard, but I don’t think a new IE is to happen.
The web is resilient. Should we worry? We have survived before, so we can be cautiously optimistic.

2015
1 billion sites. 3 billion people online. The future is unclear. I love the web. I want it to be there for the rest of my life.

Slides: http://www.slideshare.net/CrowChick/animation-and-the-future-of-ux-33573726

I used to be a cartoonist and storyteller at the age of 17. I lived in the middle of nowhere. The internet let me connect to others.

Then I needed surgery, so I needed to get a ‘real’ job to pay the expenses. In the USA you don’t have health care normally, only if your employer organizes it for you.

I love story-boarding. I even story-boarded this talk, makes it so much easier to explain things. Everybody is now creating animations.

Animation and the human mind
This is a visual representation of a rate of change over time.
If something doesn’t animate, the brain takes a snapshot of the first and last state and makes up what happened in between.
In animation movies, these in-between states were made by in-betweeners. Mostly done by interns, juniors, or shipped overseas. If you don’t have in-between states, users might not understand what happened.
In the 90s OSs tried to differentiate themselves on animations. A lot of papers have been written about it in those years. If you animate something, the animation gets offloaded to the virtual cortex (GPU of the brain). Keeps the heavy work away from your brain.

Ground rules for animating stuff.

6 principles of UI animation.

Animations add contextual information where there is none by default. An animation guides a user by reinforcing relationships, structure, cause and effect.

Causality
Humans have the ability to see a relation where there is none. For example a bouncing effect with two balls, which are in fact two balls who start after each other.

Feedback
Happens when something is caused by a human action, like clicking a button. Might sometimes be unclear if something happens elsewhere.

Hierarchy
iOS zooming. people were getting dizzy when this was first introduced, but I really liked it. Shows where you came from

Animation
You can never catch op with the little car (Sorry, these notes don’t make much sense without the slides :-)).

Transition
There are no natural transitions in the wild, but some people disagree they are just much slower. Like the sunset or ageing.
mabu.dk They change the color when opening the menu, and hovering over an item. Just too bad the hover color not the same color as the item you jump to.

Physics
Baby’s expect a rolling ball to stop at a point. After two months a baby knows that objects fall.
Easing to accelerate or decelerate.

Animation in practice
Does the animation reinforce at least two of these?
People shouldn’t see animations, because they might not like it after watching it the 70th time.
It might be expensive to off-load animations to the CPU. Is it necessary and useful?
Scroll-jacking. Don’t do that too extensively.

Where does it fit into my process?
In an ideal situation the animations happens between prototypes, because you can test them and show them to users and clients without having to change it all afterwards.

Story-boarding and prototypes cost money because they save money.

Recap:

• Causality
• Feedback
• Location
• Progression
• Transition
• Physics

Slides: http://slides.com/sarasoueidan/tips-for-avoiding-common-svg-pitfalls#/

Applause to Marc for fixing the VISA issues.

I’m here to talk about SVG. Like PPK did yesterday, I’m here to crush your soul today.

I love SVG. Not because it’s the new hot thing, but because it fascinates me. I have always loved drawing and illustrations.
I was fascinated about SVG as soon as I found out about it. when I started to code looked familiar. It looked like HTML, but it is fundamentally different. So today I will give you some tips to avoid headaches I had.

#1
Presentation attribute are like regular HTML attributes but intended for styling, for example: fill, stroke, etc. But they are overridden by any other declarations.

Use element references on a different element like a symbol.
If you do not apply any styles, the browser will use the defaults.

svg * {all: inherit; } This is an extreme measure, as it will reset all styles on the elements. Only use it if you’ll style everything.

With SVG you can use variables. Define them in CSS with –coll and reference them (with –coll) in SVG.

#2
There are 6 different ways to embed SVG: <svg>, <embed>, <iframe>, <object>, css background, and <img>.
Recently the <picture> element was added to this list.

Pages with targets open in the same part. use xlink:target to fix it. But you need to set the namespace first.

#3 Setting the fill property to “none” disables pointer attributes.
Use fill:transparent; or change the value of pointer events.

#4
<script xlink:href> Values in  the script like <,>,& will sometimes be interpreted as HTML. Use CDATA to fix it.

#5 SVG viewbox attribute

SVG has a limit in width and height, just like an iframe. But can have a different width/height inside of the view. This scales the SVG.
Clip it with clip-width that equals width of element.

#6
CSSOM (CSS Object Model) methods on SVG give unexpected results. Use SVG functions instead.

#7 SVG lacks relative positioning.
No z-index, everything is absolute positioned. If you want to overlay things, the order of objects needs to be changed in the source.
SVG doesn’t have a box model
You can fake overlaying by nesting <svg> tags.

#8 Sizes in editors and generated tools won’t always be right in SVG. Needs a bit of modification. error-prone.

Slides: http://www.slideshare.net/cheilmann/beyond-tellerand2015

This is something I’m concerned about. We live in a time of clashes.
Somebody is wrong on the internet.
Native vs web.
io vs node.
virtual DOM vs DOM.
app vs. website.
sass vs. CSS.
angular vs. react.
gulp vs. grunt.
Düsseldorf vs. Köln, oh no that’s a very old one.
I’m getting tired of this. The discussions always end in the same ways. Maybe I am just a tainted, grumpy, and old coder.

Back in the days, web developers were innovators. We didn’t do something that requires to run on 5 different abstractions. We had no clue what browsers did, how they worked. We used what we had and hacked around the problems.
Things like sliding doors, CSS sprites, FIR, and other image replacement techniques after that, clearfix, etc.
All these techniques were aimed at creating better user interfaces. Nowadays we don’t care so much about the users anymore. We cared about the web as an infrastructure. Today we think we have to compete with native apps.

We know how browsers work these days.
A lot of the innovation happens in the open.
JavaScript is server and client side now. Do you know everything about how to run the client and the server just because you know JavaScript?
Mobile treats content and technology as 2nd class. They just want to sell devices.

We don’t demand the important basic things from browsers. Like the ability to style a <select>.
As modern developers we need, task runners, pre-processors, package managers, MVC frameworks, unit tests, etc.

Everybody talks about code, not about design or good content. Everything needs to be in a new technology.
Everybody needs to learn to code. Governments try to keep up, they missed the internet as a platform.

Coding is like a brick. It’s a tool. We need to have an idea first and then find the right code, the right type of brick, not the other way around.
To me code was always writing. WordPress is amazing, it enables a regular user – like his sister – to maintain a website.
My twitter handle is @codepo8 at purpose. I’ve always thought of coding as poetry.

We need this interface because I like this tab control. but was that the best solution? well I like it, so now I need to use it right?

We don’t empower people to be creators anymore. We stopped saying you do this five things and let them see that it works in a browser.
The next generation of developers wont start with the web.
We super-sized the web. The average page is 2mb.
That’s why I started at Microsoft, I want to reach the people who need to work with CMSs.

We need to change and adapt. We are talking to the wrong people. Lets face some commercial fact. the web isn’t the cool stuff to make money on anymore. First things companies now build is an iOS app. On the web i don’t know who my end users are.
For the new generation the web is just there. People now expect internet to just be there, like electricity.
In the 50’s people created great stuff that wouldn’t break. That was great, but it means they would only sell it once.
You want this content, you need to be on iOS or need to be in country x.  The web has been taken over by vendors who lock-in.
Somebody gave me a Tizen watch, because it was open and he knew I was into that. But then it seems it can only syncs with a Samsung phone. So I had to buy that to use my watch.

We’re trying to compete with a marked designed to be short-lived. Developer tools in browsers are outstanding. Browsers offer features we dreamed of in the passed (canvas, web audio, animations, filters)
Edge is the end of the: “we need to support IE argument”.
We have services that show how fast your site is, like WebPagetest.net.
Cross-platform tooling. manifold.js allows you to create native apps.
Microsoft implements adobe CSS blend, Google implements Microsoft pointer events, etc.

Remake of old C64 game We have much better tooling. Experience. Shared trickery and knowledge. lots of shits given.

Excellence = (talent + effort +  tools) * shit given.

A friend of me always tells me, when I’m upset about something or the other: “You’re angry and this obviously annoys you… so what are you going to do about it?”
No victim blaming, but stop finding problems or solutions. I started doing that and I’m so much happier about it. It’s up to you to find happiness for yourself, or burn yourself up trying to compete.

Video is available here: https://vimeo.com/129198643

I left Adobe last year. The things we do today (at Typekit?) looks nothing like what we did a few years ago. I work as a venture capitalist now in a Silicon Valley business. Not very common for a designer, but I think a user-centric and design-led culture is good for a business.

I could give a talk about capitalism, but this is Europe. This talk will be about culture.

Imagine paddling down a river towards the sunset. Just you and the elements of nature. Suddenly your boat tips over and you end up in the water, grasping for air. When you look around you see some kids swimming away, laughing at you. What do you feel? Anger? Fear? Anxiety? Maybe all of them.
Now go back a few moments before and instead of getting tipped over, you look around and saw that your boat ran into a floating log. Would you feel the same? Probably not. They’re pretty much the same situation, than why are you feelings not the same? The feeling you should have is equanimity – grace under pressure.
Another example, one morning I woke up at 6.24am to the sound of water. It came from the bathroom, and there I found my son pushing down rolls of toilet paper down the toilet with a plunger. He was very proudly working down his third roll already (I always found it amazing how people always manage to take a picture of this first in these kind of situations). As a parent you know the feelings rushing through you at that moment.

Typekit allows you to use custom web fonts on your website. When you choose a font on our site, your fonts get compiled for you into something we call la kit. Next the kit gets moved to our CDN where it’s placed at the origin server, and gets distributed from there.
Jeffrey shows a graph about how their server load normally looks, and how it was showing a sudden spike one day. After some investigation it seemed like s lot of kits were stuck in the queue on the road to the CDN.
On normal days they hold a short morning meeting about all the active projects going on, but that morning it was all about that spike. One of our customers seemed to be creating a very large amount of traffic via the API. So I call their CEO, and say that they’re doing a great job. The CEO agrees and tells him that they just released their new site to 400k users. Great! Nice that you informed us about it up front.
He goes on telling that there will be more coverage coming the next Monday, as they just got acquired. This all happened just before the Thanksgiving weekend. We got a group of engineers together and made a plan. We had three days to be able to handle 3 times more traffic than that’s crippling us at the moment.
We decided we had to identify the problem on Friday, build the solution on Saturday and integrate it with the rest of the site on Sunday.
We tried to do it like NASA, where they created a room where everybody knew what to do.
So then we removed all the business decisions, and provide them with all the moral support (in the fridge ;-)). There would be one person who would update us regularly, and discussing what they needed. So everybody else could work on fixing the problem
Here equanimity comes in. We set everything up, structured everything. Let all the anger go about the situation you’re in.
First we looked at generating the kits, that only took milliseconds to do. Clearly that wasn’t the problem. There was no problem with the bandwidth either. But everything was clogging on the way to the CDN server.
With the problem being outside of our infrastructure, and not having the time to wait on our provider to fix it. We chose to ignore the CDN and started to build our own.
This had been on our list of things to-do for a long time, it was going to be a project that would take three months. Only instead of doing it in 3 months, we had to do it on Saturday now. On Sunday morning they had a just viable service.
There was a tremendous amount of traffic on Monday, but our new CDN managed to handle it quite well.

What did we learn?
There are enough lessons to learn here, but I’ll focus on just one.
The world is complex, we are connected to everything and everything breaks. Everything we do is user experience. It felt like it was always holding him back in doing what he wanted by making the best user experience. Perhaps the biggest thing we learned is that teams thrive if they have equanimity.
If you look at sports, and more specifically at cycling. The journalists often ask about somebody’s changes, and if they say they will win and do they’re all amazed. And if they ask how he did it he said “The team was very strong”. Cycling like how birds do it, they keep somebody out of the wind.

“Some people believe tension is a good creative tool. I’m not one of those people” – Steven Soderbergh. Not controlling his actors, but trying to amplify them.

The old way of motivation is based on factory work, where human labor is asset you need to squeeze as much as you can. In a creative environment other things are needed. Like shared values, trust, and camaraderie. What working at a start-up is really about is a shared feel of values.

This is about meetings. “If you are tired and alone, you can always hold a meeting.”
We had a set of meetings that helped us reach equanimity.
The first type of meeting is the chat room. Email is corrupt, we need to over-communicate to act distributed. Chat does that better. Email is a large communication medium, not about compression.
The information you needed was only available in the chat-room. Created a set of accountability. And yes, things like animated GIFs are part of it.

I was always very frustrated with meetings. In a distributed setup it was easy to feel adrift. We aimed to get it as fast as we can. We started it at 10.05 because nobody would be late. If we started at 10.00 it would often take half an hour to get everybody there, but if we did it at 10.05 everybody would be there. I have no idea why it works that day.
Every single person in the company would be there. What at the time was about 30 people. One of the rules is nobody gets to talk. Only the people running the meeting and the person running a project. No problem solving in meetings, or else the rest would be waiting. But everybody could do it in parallel afterwards.

We just had a text file as a project management tool. There was a daily email to everybody on the team to keep them updated.

Meeting two: the weekly meeting
This one happened on Friday afternoon with beers and we shared what had happened during the week. Issues closed, things shipped. Valuing design in everything.

Meeting three: product review.
The first product review I had was when I still worked at Google and it was terrible. If you presented it was a bunch of engineers shooting things down. Nobody knew how to give good feedback.
With us this was an optional meeting. But if you are there, participation is mandatory. We don’t leave the room until the problems we’re discussing are solved. It is not a forum for expressing opinions.
Bad: I don’t like that blue.
Better: Why is that blue.
Great: Is color important here.

Will it be a convergent or a divergent meeting.
Divergence: solving a problem. like brainstorming.
Convergence: evaluate, drive towards consensus.
This is why these meetings go wrong, people have the wrong expectations.
One thing that was important is user testing with the right expectations. Use it to build empathy, see them use your project. Purely qualitative. More exposure to users means better design instincts for everybody involved.
Sometimes we would explore Behance together. more exposure to great work gives you a better design vocabulary.
Good taste can be cultivated. You can work on it as a team.

Last meeting: post-mortem.
Nobody wants to be there. This one comes from manufacturing. test-driven development with multiple setups a day, can also cause a lot of problems.
The person who pushed the button, thought it was the right thing to do. It’s the human nature to look for the villain. It’s called the fundamental attribution error, very well know in psychology. That person is an idiot and don’t know what they’re doing. People should feel safe experimenting, and we shouldn’t be blaming people.

Sakichi Toyoda. He always asked why 5 times to get to the root of a problem.
Jeff Bezos used to do the same thing at Amazon. One of the warehouses was shut down because somebody got his finger in between one of the machines. The cause wasn’t that he was an idiot, but that there wasn’t a place to store his stuff what caused his bag to fall on the machine and him trying to get it out and getting injured in the process.
Zoom out. Purpose is timeless. People with a clear purpose have a longer life expectancy.
The ability to communicate across generation is why some civilizations succeeded, where others failed.

Blog post related to this talk, but not about the whole talk: http://www.filamentgroup.com/lab/weight-wait.html Makes it a bit more visual though 🙂

Responding. That sounds passive, but that’s hardly the case if you build across devices. It’s actually a quite active task. The more we anticipate our users, the better services we can deliver. Our interfaces need to respond to viewport sizes. Fluid images, videos, media queries.
Along that we need to go qualifying the features that are needed to not break the interfaces.
Don’t make presumptions about things in a user interface being available.

We need to deliver first. How to render a page progressive.
Performance priorities. The web broadens our reach. It’s common to see sites that are build very exclusively for one platform.
We are an exception between our users. More users on Facebook use 2g than 4g.

The average webpage is 2mb. Not website. Optimize, minify, and gzip. Optimize everything you can. Don’t optimize images, offer different versions for different resolutions. Use things like srcset or picturefill.
Reduce framework bloat.
Reduce dependencies, make custom builds. Sometimes we don’t need them at all.

Optimizing only gets us so far. We need to update how the interface feels too.
“The problem is latency, not bandwidth”. Latency depends on type of connection WiFi/3g and time since last contacting a tower. Can differ between 150ms and 2 seconds. Also geographically based on where the server is located.

Prioritize for progressive rendering.
On the first round-trip to the server the browser gets the HTML and can show it to the user, but it wont do so before it gets the stylesheets and JavaScript.
Avoid making render blocking request.
We have some nice tools to help us, like WebPagetest. “Start render” is the time until something is shown to the user. Timeline tool to see how it progresses.
Cram your initial view into the first 14kb of your HTML. Lets prioritize what we can fit into it and render something useful right away.

Google PageSpeed Insights.
Prioritize on the top part of the page.
How do we detect this? Bookmarklet by Google. Using tools like Grunt to extract the critical CSS and putting it into files.

Load the rest in a non-blocking manner
rel=preload is a new standard being discussed, but there other ways with javascript. onload=“this.rel=’stylesheet’;” (What would Jeremy say about this?)

What JavaScript is critical. Ideally none. Gracefully enhance in modern browsers. Conditional logic for loading images. loadCSS. Test if loadCSS will be supported. Sending the text in caps to check for support, if it returns in lower case the feature is supported.
Same for JavaScript with loadJS
You could also use async or defer attributes that you can apply to a script tag.

Avoiding the FOIT (Flash of Invisible Text).
Can happen if we use custom fonts. Browsers hide the text in a page while a custom font is being loaded, showing the users an empty page. Standard groups are trying to come up with alternatives. Safari on iOS doesn’t support this though. Listening for when fonts have loaded.
Add an extra specificity tag to import the font if it is loaded. If the font is detected with JavaScript, the right class name gets added to the DOM.
New feature in WG (working group?): font-rendering: swap 3s;

Case study: Wired.

Wired recently had a redesign. If you check the site in WebPagetest, the content starts loading after 12 seconds on a 3g connection.

Can this be optimized? I put a copy of the site on a test server with a really similar timing to the original. Adding the optimizations – also for the ads, which was pretty hard – critical CSS, asynchronous, fallback fonts.
Managed to get it down to 4.6 seconds.

Weight doesn’t need to increase wait.
How we load stuff matters more than how much stuff we load.

Looking ahead
I showed a lot of workarounds today. HTTP2 makes a lot of what we do today unnecessary. server push is what we do with inlining resources now.

The number of active requests which we try to increase with CDNs aren’t necessary anymore as are spriting, or concatenating. Besides that we are moving to SVG for icons now. HTTP2 will never load in older browsers, like IE10. We have to figure out ways to support the forward features and keep backward compatibility.

It won’t happen overnight. something we need to think of ahead of time.

We can build beautiful, complex interfaces without excluding people. It’s our job. The interesting part of it, if you ask me.

Jeremy Keith wants to change our mind. Like fed-ex did with the arrow in their logo. You see it right? Oh, you didn’t. And the bear in the Toblerone logo. Did you knew about that?
Consider the duck. All ducks are actually wearing dog masks (their beak looks like a dog if you look good, for those who don’t know the image).

More important ways in which are minds were changed, like Galileo and Copernicus did with their heliocentricism model instead of geocentrism.

When Darwin posted his paper, everything changed and nothing changed. Things had been like this all the time, it’s just that we started seeing them differently. Like the arrow in the Fed-Ex logo.

This paper by TIm-Berners Lee started the web and it’s behind glass now. He didn’t just had to invent http and other protocols, but he had to convince people, rewire their brains.

You didn’t need a specific system

Problem of developing and designing for this system. First we started on the way we did before. Who remembers the book by David Siegel? This was a great book, as it got many people started on the web. But it also had bad parts, as he invinted the pixel gif and other hacks.

We had to design on 600×480 screens, where a large part of the screen was taken by all kinds of navigation and other OS stuff. If you compare that with the current situation it seemed limited with only 216 colors (256?).

John Allsopp wrote A Dao of Web Design. Who read it? You should, there is not much writing in our industry that’s still relevant after 15 years.

We take on the tropes of systems we used before. Like theater on radio, or radio on t.v. etc.

History of design and development.
Started with the Web Standards Project (WaSP). Their goal was to convince browser makers to start supporting new features. This was only half the work. The other half was convincing us. To use web standards. I have met people who said that Designing with Web Standards (by Jeffrey Zeldman) changed their minds (It did exactly that for me!).

Separating presentation and structure. Allow CSS for presentation, or HTML for structure.
One website that did that. CSS Zen Garden. I heard people say, I get it now that I’ve seen this. All of this is the same HTML with different CSS.

JavaScript for behaviour.
This is the broad idea behind progressive enhancement.

Shearing layers.
Buildings have different layers. The building site, is geological. The structure is long lasting. As are the walls and rooms. The furniture you can move around daily, but you won’t change the structure often.

The fault-tolerant nature of HTML is like the building site. Element with an opening and closing tag. I you give a browser something it doesn’t understand it still shows the content between the opening and closing tags. A browser doesn’t give errors or stop parsing, it’ll just go on with the next element.
Because of this we can add extra stuff to HTML. Canvas has a closing tag on purpose, so browsers can render stuff in between the tags. This wasn’t in the original version suggested by Apple. HTML’s fault-tolerant nature has allowed it to grow.

Structural honesty.
You can keep using it. Tables for layout isn’t honest. Using the button element for a button, but often we even see more tags being used for this like span.
Then there’s CSS for presentation, and it’s also fault-tolerant. Stop for a moment and think about the websites out there. How different their CSS must be if you look at all those sites, but it all bogs down to a simple pattern. You have a selector, a property and a value. That’s all there is about CSS.
The browser doesn’t stop parsing the CSS if it encounters something it doesn’t understand, it just ignores the line. That’s a really powerful thing, making us use new features right away. Got material honesty for the job. We used to slice-up an image, now we can use border-radius.

JavaScript.
Jeremy has a little issue with his throat, not with JavaScript and he doesn’t wants to hear it on the loop in the next break.
JavaScript isn’t fault-tolerant, but it can’t be. JavaScript is a programming or scripting language, and you what it to tell you if something is wrong. It will stop the JavaScript and stop running. As long as we are aware of that it does that it’s ok.
Enhance your site with JavaScript, don’t rely on it. Don’t get me wrong I like JavaScript, I even wrote books about it.
Build escalators instead of elevators. Elevators fail if there’s no electricity, escalators can still be used as stairs.

Jeremy shows Instagram with a failed JavaScript. It will only show the logo. JavaScript has become a single point of failure. It’s not about picking on Instagram, it happens on many sites. Why would we put all our eggs on the most fragile layer? It’s not about joking about these sites. It’s about using it in cases where JavaScript fails out of your control.
Progressive enhancement is about technology failing on something that’s not being supported.
If it’s HTML/CSS it’s ok, not with JS.

Pastels law: be conservative in what you send, be liberal in what you accept. You see it in development and designs all the time. Send as few as possible. Don’t make users format their credit card or phone number.

Design principles.
I’m obsessed with it. we talk about opinionated software, but to a degree everything is opinionated. You can design to go along with it. PhotoShop was never intended to make a site in. It was designed to create pretty pictures
The first thing it asks you for a size for your canvas. The same for CMSs, or frameworks
Those are all important questions, but I search for tools with the philosophy that matches my own. If it does, it makes you work faster. That’s why people can have different opinions on certain frameworks.

You can work fine with backbone.js. Angular.js is a bit more opinionated, but you can work around it. Ember.js is very opinionated. You have a body tag and that’s all.
If you agree, use them, but if you don’t, you’ll fight them all the way.

John Resig, the creator of jQuery once said: No one wants to think that what they’re doing is trivial. You need something complex for your project.
These are systems for building elevators, not escalators.

“It’s hard not to be disappointed by HTML if you develop for iOS, Windows or other mature platforms, as I have.”
The web isn’t a platform. Language is so important in this. The web is not a platform like Flash or native is. It’s a bit misleading. I’ll build something and if you have it you can see it, or else not. 100% of it or 0%.
On the web, you’ll never get 0%. Often you’ll get a big part of it, but at least you’ll get the content. As we first thought of websites that it was a print design, now we see it as an app.

Lots of things are a pain in the ass to implement on the web. Only they are implementation details. If you look at what people come to your site for, they don’t wake up thinking: great, today I go swiping! No they wake up to find information.

Changing minds is like Ethan (Marcotte) did with responsive design. In the article that all started it, he mentioned the Dao of Web design. It’s like responsive enhancement.

It’s not that the web isn’t responsive . The web starts being responsive, but we screwed it up and decided that sites should have limits. First 600 pixels, later 800 pixels and the magical 980 pixels. We should talk about keeping a website responsive, instead of making it responsive.

Do websites need to look exactly the same in every browser? No 🙂

If you accept it doesn’t needs to be, you don’t need to worry about all kind of devices.

Luke Wroblewsky – bagcheck. Menu jumps to navigation in the footer, and if you close it you go back to the top. Just with a regular anchor element. Now you have that you can enhance that, with fancy features.

Kew – Royal Botanic Gardens
Things can jump in or out, slide open, but it doesn’t need to work everywhere as long as the content is still available.

Looking at browser features, not User Agents. If a browser doesn’t support these, nothing will happen and nothing will break. Look back at PPK’s talk to know why checking for UA is not smart.

It’s perfectly fine that media queries work in some places, but not in older browsers.

I call this aggressive enhancement. You give browsers what they’re capable of, but don’t give it to other browsers. Like we said before, things don’t have to look the same in every browser. But marketing says you have to support IE, or Netscape Navigator. Who of you have worked with Navigator 4? I would choose optimizing for IE6 every time above Navigator. You should support browsers, not optimize for them. I support every browsers, i optimize for none.
I hear you guys already. You have not met my boss or clients. it seems like a waste of your time to be confronted with it. It’s ridiculously hard to do it. You’re solving the wrong problem. if you need to make a site look the same in every browser, the real problem to be solved is changing the mind of who thinks it does needs to be like that. Technology is easy. People are hard.

it seems impossible to convert people like them, but it was hard to switch from table layouts and still we did it. The best way of being future-friendly is being backwards compatible. Progressive enhancement isn’t something of the past. It’s a way of thinking about the features. What about watches? What about devices that won’t have screens. What if the network isn’t available. I showed you the first website ever made in the most recent browser and it still works. if you build websites the right way, you can look at it in a browser from 20 years ago or 20 years in the future. you don’t get the web until you see a person with a Nokia and an iPad sitting next to each other visiting the same website.