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.

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.

Philadelphia Magic Gardens by Alex Thomson (CC-BY-SA 2.0).

My favourite Chaos, Magic Gardens in Philadelphia by Alex Thomson (CC-BY-SA 2.0).

 

Of course Sara describes it much better herself in the blog post on which this talk is based, but writing is remembering, right?

 

It’s actually ugly, but also what I like about Philly. A city that’s beautiful and shambling at the same time. One thing I don’t like is that it’s filthy.

 

When you look at the litter in the city, there’s always other people to look at. People blame city workers not doing a good job, animal owners who don’t clean up, kids who get home from school and throw their stuff on the floor.

 

The city doesn’t want this filth either so they make campaigns about it. And laws. There’s a whole chapter in the city code. It’s not that hard actually.

 

But I also love the web. I work with content all the time. I knew I would write since I was 6. I like a lot of it. I think a lot of sites are ugly too.

 

I got to the Verizon site. I was trying to decide if I should stay or go to a different provider. So I got to their site and after scrolling, I got to the section trending now. There’s an article about metadata. I look at the photo. It clearly looks like a stck photo, but who makes such a thing? It’s even worse if it was custom made than not. What would Verizon do about metadata?
As I am a content strategist I click and go down the rabbit hole. Soon I realize it’s a garbage article about metadata. Some standard text that doesn’t even help. How could it be, as it’s not about them. About their business.

But I notice I ended up somewhere else, on the solutions lab. I click on and get at a weird collection of articles. It asks me if would like to download a paper. I’m going all the way down now, so I say yes of course. I get an FAQ and all the way at the end it says: “How do I sign up?”. That’s not an FAQ. That’s a Call-to-action, and a very bad one.
How many people get all the way down here and don’t know what’s happening.

 

Why is content so difficult to do well?

 

Content is always late, too long. not mobile ready. A PDF of 99 pages. Some PowerPoint. The content is messy.

 

My job is to help people fix stuff like this. I think a lot of people have been talking about it. Spending time on making content better.

 

We can’t change anything because this department wants it. And BTW, the CEO still wants her letter on the homepage. You try to keep the content up with the chaos. but it always catches up with you. It feels like a game of whack-a-mole.

 

Time for a new approach. The idea to fix content is exhausting.

I try to think about content, companies and the sites we work with as difficult. I try to think of it as cities. They are chaotic and imperfect. You have to change a lot of little things over a long time. The same is true for organizations and content. What we can do is turn projects into a catalyst. Do something for the longer term. As opposed to looking at the next redesign.

 

Something that helped me and you can all use. Change feels difficult. People have given up because it’s demoralizing. People want to do a given job, but if things feel big people stop trying.

 

Citizen-driven effort to revitalize one Philadelphia city block on West Rockland Street. Only trying to fix their block. We can’t change everything, but we can fix this block.

 

Big problems feel big. We go in with a grand idea: the only thing you have to do is rewrite everything. Cut everything in half to work for mobile. Transform all 4.567 PDFs to structured content. It’s hard for them. Avoid the overwhelm.

 

I’m starting with just one thing. I want something that’s visible, valuable and scope-able.

  • Visible: something that causes pain. For visitors complaining, or employees who have to work with it.
  • Valuable:  What is something that has immediate value for the company and it’s users, that you can get people behind with.
  • Scope-able: What can be changed in a reasonable period of time. People need to see some results if you want to keep them engaged.

Find where your skills align with the customers problem.

 

For example, let’s say you’re part of the team changing an existing site to responsive design. Everybody is excitedly resizing their browser windows. Along the way, you come upon those thousands of old PDFs. They’re not ideal, but there are far too many to deal with now. What if you found a subset for example, something like product spec sheets?
You’ve just found your one thing. If you took the product information out of the PDFs and turn them into a structured system. It’s something you know about, and it causes a lot of pain for the customer (having to update them all the time), and the users.

 

It’s tempting to fix everything, down to the root cause. Trusting to design a clean system with good interface etc. Instead focus on fixing some little thing. Little changes make people feel optimistic. Improves the morale.

 

Ownership

It’s easy to get in the mode of waiting. Waiting for others to pick up the litter. On West Rockland Street they ask their neighbours about how to tackle problems and which ones first. Stop waiting and start doing.

 

We need people to take charge too. Need more people to be engaged.

 

It’s not enough to have one team to fix the site, because the organization doesn’t learn from it. How do we get to a place were all people feel engaged to fix this. Content is the thing that is created most often by the largest number of people. If you can’t get them to take ownership, they’ll never learn to manage the chaos.

 

Ask them, don’t tell.
Don’t tell what they do wrong. Figure out what their problems are and what they want to do.

Content people often don’t have a web background. But when I ask them about the site, they are invested, thier opinion matters. Then get them together. We need to start making decisions, not just talk about it.

 

I worked on a project where several people were organizing the content. The economist on the team tagged the content. In the end they had 600 tags. They wanted to connect people who were new to the topic. Want to make them go to a specific page. We looked at the tags and thought there was no way to connect them all together. Let’s cluster things, make decisions how you want to make your story.
They talked through the important choices and left the room in 4 hours and having decided on the 4 main topics and 28 sub topics. To get them to agree, was massively important because they chose it. It’s not an arbitrary thing somebody told them to do.

 

Pair up people.

It is hard to make content fit in a design comp you just got handed down. Get people together to start writing and talking through how they’ll do it. Talk about it together and doing it together. Not feeling alone. Have somebody to do things with. Do things with other people instead of for people.

 

Get commitment for the project. Over longer time.

I hear it all the time. We made a beautiful thing, but the client made it turn back into garbage after 6 months.
Okay here’s the new site and content. Run with it. They really want to, but it’s hard. They’re excited and try to take the leap, but jump off the cliff.
So just give them a map with small steps to take over a longer term. Where are we and how do we move forward.
They know why they shouldn’t to upload PDFs, but why should I do this content. For my customers.

 

East Passyunk

East Passyunk was a neighbourhood with lot of Italian-American enclave of family shops and restaurants, but younger people moved to the suburbs and people got older. The place didn’t move along. People got together and thought about how to get a declining neighbourhood thriving again.

 

They wanted to create a neighbourhood with not only fancy restaurants. Places where locals would like to go. Getting a beer, or groceries. They decided to:

  • Purchase property
  • Revitalize and rent it to local businesses.
  • Use he income for neighbourhood cleanup.
  • Plan long-term civic-improvements

Their roadmap works because it’s sustainable. It’s not all at once. As they improve the neighborhood, more businesses want to be there

 

Define where your headed. For the long haul. Not just get some copy on the site. Go from unstructured content to structured content that can be used for multiple purposes.

Move from churned out, to purposeful. Made by a content department that decided they needed a blog with x posts and articles. Long-term changes. what we do is break it down in smaller projects.

 

A List Apart

How do we reach more people at ALA that don’t know about it yet. Lots of younger people joined the industry lately, who haven’t heard of it. Which ideas are viable, most helpful, important. Identify projects. Breaking them down in smaller things.

 

Who will lead the project. People need a sense of responsibility. Look for a cadence when do they happen?

Get things on sticky notes and line them out on a wall. When, who. Sort them What’s the next step?

 

**Beamer suddenly stops working and only shows snow, but Sara goes on undisturbed :-)

 

I love being in charge and fix things. But with content you can’t. Its chaotic. People are chaotic. Messy. Weird.
Made by people so its a pain to deal with. like people.

 

We’re not here to make it perfect, we need to accept that the web and content ebbs and flows. As it also happens in organizations and the people who work there. Instead of fixing that, we need to make people see their content differently.

 

If you work with content, help people work through change.

@ppk‘s slides are online here (PDF)

Chrome on iOS isn’t Chrome. Apple doesn’t allow other rendering engines. If you want to make a browser on iOS you need to use WebKit. Uses Apple WebView.

The only advantage to Chrome on iOS is that it lets you connect to Google Cloud en Services.

 

In South Korea you have a browsers called Puffin. Not going to talk about it, but the mobile web has a lot of strange browsers.

Mobile browser shares 2014. Global.

  • 24% Android browser
  • 23% Safari
  • 19% Chrome
  • 12% Opera
  • 10% UC – Chinese browser.

 

Germany

  • 35% Chrome
  • 32% Android
  • 26% Safari

 

India

  • 35% UC
  • 25% Opera
  • 22% Others
  • 12% Android

 

Who knows about Proxy browsers? Good, a lot. I’m not going to talk about it, so ask anybody who raised their hands. (It’s a browser that collects all the required data for the requested URL and parses it there, to send it back as a nice small package, BTW).

 

We’re going to talk about Chrome.

Netherlands

  • 39% Chromium 40
  • 27% Chromium 28
  • 18% Chromium 30

 

The Netherlands has 65% Samsung phones. Samsung only

  • 40% Chromium 28
  • 30% Chromium 40
  • 21% Chromium 30

 

Chromium on Android has a desktop view. Changes the UA (User agent) identifier. Pretends to be desktop Chrome. He thinks Windows, but not sure. It will not be called a mobile browser in the stats. This can not be helped.

If you don’t log into Google Play, you won’t get Chrome updates. Particularly in China (because of The Great Firewall ?).

 

Device vendors use older Chromia (plural form of Chromium according to PPK) as their default browsers.

Samsung used Chromium 18 starting at Galaxy S4. Now they updated to Chromium 28. WebView is Chromium 30.

30% of users prefer Google’s Chrome (version 40 in the stats) above Samsung’s version.

 

Why did Samsung do this?

Androids purpose was people using Google services, so Google could keep getting data and serve targeted ads. Made sense to offer Android for free. Still does.

In 2009 device vendors needed an answer to the iPhone. Android was readily available. Takes a lot of work to make an operating system, look at Firefox OS.

 

Nokia and BlackBerry thought they could survive, but they were too slow. Nokia had a good plan only never executed it, and got bought by Microsoft. There will be new Android phones in 2016 from the Nokia part that’s still independent.

 

Device vendors wanted to differentiate themselves. Not wanting to look the same with the same OS. That’s why vendors starts to differentiate. Google allowed Android differentiation.

Venders will change things because they can. Create their own interface layers.

Google had to allow this to get Android adopted. But they didn’t like this fragmentation. That’s why it gets called differentiation by people who like it and fragmentation by people who don’t. Read Android news through this lens, and it’ll tell you who supports it and who opposes it.

 

Let’s talk a bit about browsers (Weren’t we doing that already?)

Device vendors refuse to give their browsers names. The default browser is called Android WebKit or stock browser.
Each device vendor modified it slightly. There are 120 switches they can change. Which led to a lot WebKits. If you have two WebKits it doesn’t mean they render the same.

 

These things have changed as Google wanted to push Chrome. And because Chrome is a better browser, it’s good for us. Google stopped the development of Android WebKit (A very good piece about why Google stopped with various stock Android features). Device vendors can stick with it, or change to Chrome. Webkit had quite a lot of bugs, some of which are very serious 0-days.

…or the could build their own Chromium. Which is exactly what they did. So we ended up with exact to the same situation only now with Chromes.

 

Sony is an interesting one.

  • 64% Chromium 40
  • 23% Chromium 33

Most people use the regular Chrome. Chromium 33 is the WebView. Sony is the only vendor that uses the default Chrome.

 

Nexus, Motorola, and Sony use latest Chrome. Motorola got sold to Lenovo, so probably a Lenovo-Motorola Chrome will appear soon.

  • Samsung: Chromium 28
  • HTC: Chromium 33 used WebKit before, but got over the air updated to chrome.
  • LG: Chromium 30 or 34
  • Xiaomi: Chromium 34 or 35.
  • Cyanogen: Chromium 33
  • Huawei: Chromium 30

 

Some time ago I met with a friend who showed his new, shiny high-end LG. And I asked what’s the browser. What’s the browser. What’s the browser. If I see your phone I’ll always ask what’s the browser is three times, or until I actually know what the browser is. It was Chrome 30. I went to the store the next day and bought a mid-end LG, to add to my test-suite. Which used an older chromium. 30. 34 has certain features that require high-end hardware.

 

Asian companies won’t answer you. I tried it a few times, but you won’t get any answers.
Who has heard of Xiaomi? It is a Chinese company, aims to be the Asian version of Apple. Their hardware is pretty nice. If you want a Chinese phone, go for Xiaomi. Got one from China and it ran on WebKit. After update it still was on WebKit. But this WebKit was very different from other WebKits. After more tests it seemed to be a Chrome, but it didn’t show in the UA string. It probably is 34 or 35. Has something that got introduced in 33, but not something that got removed from 36.

 

WebViews

It’s an embedded browser. If you use something in an app, it doesn’t start the browser, but the WebView.

  • < 4.3 Android WebKit
  • 4.4: Chromium 30
  • 4.4.3: Chromium 33
  • 5: Chromium 42, via updates

You can’t create your own WebView anymore as a vendor, but you can change the default browser.

 

This clearly isn’t complicated enough

Updates via the vendor go very slow. Google introduced Services a package of crucial apps, like Maps, YouTube, Play… and Chrome.

Device vendors may opt-in or opt-out of the entire package. No picking and choosing!

 

But this doesn’t make it the default browser.

For example Samsung’s, default browser is Chrome 28, but Chrome 42 can be found in the apps.

Google hopes user find the app and start using it. On Samsung this worked for about 40% of the users (huh? misspoken?).

Amazon doesn’t want to use Google Services, as they have competing services. Chinese vendors opt-out too, because China doesn’t like Google (the government?).

 

Other browser: Chrome, Firefox and UC

Are not being used as a default outside of China.

  • Firefox is dead on mobile.
  • Opera is doing OK with mini, but the full browser has never done much.
  • UC is doing fine in China, with their proxy browser.

 

What’s the difference

Most browsers show only a part if you zoom in. HTC does zoom re-flow, re-flows the text so it fits in your screen. Why does it do this? Broadly: differentiation. This is a performance hit, as it has to be recalculated.
Once saw it on Samsung, but only happens with a certain gesture combination.
Does this work. Will consumers notice the difference? I knew one guy who had a HTC before, and switched to Samsung but will switch back again because of the zooming.

 

Input type “datetime”. How many use it? A few. You get a very ugly interface on desktop, why probably not many of you use it. Looks magnificent on smartphones.
HTC, LG and Samsung support it.
Google, Opera, Xiaomi, Cyanogen don’t, but they do support date and time separately.

 

Border-radius 3px doesn’t work on Samsung 19, but separate radius worked. They disabled because of performance issues. But they forgot to remove the long-hand version.

Default of CSS property left: 0 or auto?

Samsung uses 0, the rest uses auto.

 

Position: fixed on Chromium is a problem – Chrome 18-39
Changes when the user zooms, to keep it on screen obscuring the view. Doesn’t happen anymore since 40.

 

How to deal with it.

Test each phone carefully. Not exactly the browser. Can be hard with certain by looking at the browsers. WebKit UA strings don’t have Chrome in it. Chrome usually does, not always..
But that doesn’t mean it’s Google Chrome. If it’s an older version it is a vendor’s Chrome.
If you’re uncertain. Use the pointer media query.

If you want to create a test lab, you should have at least these devices:

  • High-end Samsung
  • Mid-range Samsung
  • HTC
  • LG

Don’t bother with Nexus, very few people use it. Only devs like us.

In the last five years (which were actually 3 years, 5 months and 21 days) Simon got married, lost 2 stone, stopped writing books and talking at conferences. To instead work on his own company, Fictive Kin.

He gets weird technical emails from his business-partner Phil at Fictive Kin (or maybe I shouldn’t take notes and try to listen to mails being read at the same time). There are 11 colleagues in all parts of the world from SF to South Korea, and Aarhus (In Denmark, not in the middle of our street as Simon joked).
Slack is IRC for people who are scared of IRC. Everybody is on IRC, but nobody really is.
Everything is on trial forever. All sizes of projects, some secret, some he is on, some he isn’t. And sometimes on multiple at the same time.
The devs he works with like to make everything dark and sinister. They have VPN’s. Every project has a VM and he has to use the terminal. He has to reload or put vagrant up. But than he gets errors. terminal errors.

Git
On who’s branch is stuff, my branch, your branch, is it the right branch, and then we have a conflict. How do I fix this? There is documentation somewhere. Is it on the wiki? On Slack? No, it’s on Workflowy. Why is anything ever on Workflowy. Why is it called Workflowy?
A lot of these projects have really weird names. Somebody made something, worked hard on it, put it out to the world and called it Tasty Pie. And that’s a real thing!

Is this how I design now?

He can disconnect and be happy, because he is learning stuff. I hope nobody anywhere ever gets comfortable with everything. As it means we aren’t learning anymore.
The amateur doesn’t stand still, the professional often does.

Responsive design.
A better language to determine what we do.

We stopped making pretty pictures of websites, that other people make into a website.
Rethought our strategy to HTML and CSS. Used to keep HTML lean and have extremely long CSS with lot’s of specificity, but we flipped now and added more classes to make it more useable. More animation and SVG. Better at delivering meaningful content. Using Pattern libraries and the device landscape. Thinking about what deliverables are. Delivering components of websites.
Speeding up website performance. accessibility. I think we’ve done pretty well.

It’s not about tools, PhotoShop got out, sketch got in. Still a lot about languages. languages like HTML and CSS. As a designer I often think about my role.
There’s still a huge role for somebody who can think as a designer.

This work continuously asks us to read and learn. Nobody knows it all, but also nobody does it better than you. It’s about picking your own path. And where you can in turn help your colleagues. Part of the bloody mess we call designing for the web.

Tellerrand = think outside the box. Look beyond everything evolved, look over the edge.

Look beyond ourselves and move the industry forward. So, my beauties. Go forward and do that.

 

Update: The camp was organized by the awesome Marc Thiele and not by Aaron and Jeremy as I wrote earlier.

So, I guess this #indiewebcamp was quite a success for me as I have a site now. This domain has been mostly empty (the front page at least) for 7 years now, probably longer. Still it doesn’t feel as everything has worked out as I wanted, as I ended up with WordPress in the end.

The theme I have for now, SemPress, has the same problem as almost all WordPress themes have: They are just too complex, but yet not very customizable in it’s design. Why does a theme need 12 content pages, but only 1 CSS file (not counting the rtl one)?

On the other hand I saw a lot of people with not very well-known CMS’s or even custom made systems who were all doing the same trick in one way or another. These systems might nice, but how long will they be around? And how much support, extensions, etc. do they have? While all this stuff was already around for WordPress, and I haven’t done much more than configuring everything, testing, and re-testing it. I doubt I wrote more than 5 lines of code.

There will probably be a few systems I’ll try out, but for now I’m staying with WordPress I guess. These two days gave me enough stuff to think about and do, as I don’t fully understand half of what I have installed so far and neither does everything work perfectly yet.

The things I still want to change:

  • A nicer and more customizable design (hack SemPress, extend it, or build something myself?)
  • Post to app.net, ello? and Pinboard.
  • Get teacup running at a separate and private location, and find out how to permanently extend the default options.
  • Figure out why quill won’t work, it’s the only tool so far that can’t find the MicroPub endpoint.
  • Find out how to let all those tools post into draft, or at least not visible on the blog directly.
  • Do something with favourites on twitter (post them to instapaper) and retweets (separate page on the blog, or a separate tag? Although that means I need to make another exception for a certain tag on the main blog).

Before I forget it, many thanks to Marc for organizing this, to Aaron and Jeremy for presenting this, and to Amy for making notes. Will reference those quite a few times in the near future.