@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.