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.