Posted on
by

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.

Posted on
by

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.

Posted on
by

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.

Posted on
by

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

Posted on
by

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.

 

Posted on
by

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.