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.
This is the broad idea behind progressive enhancement.
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.
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.
Build escalators instead of elevators. Elevators fail if there’s no electricity, escalators can still be used as stairs.
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.
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.