Make space for the next users of the web – Webvisions Barcelona 2013

WebVisions is an interesting series of events in the US and Europe. The audience is incredibly creative and mixed and the workshops range from the traditional web tech topics to robotics to hacking for good and up to getting kids to build their first machines.

This year I got invited to give the closing talk of the Barcelona instance of WebVisions and I went all out on that one. Instead of giving a detailed technical talk I took the opportunity to remind ourselves of the importance of a web for everyone and how we fail at delivering that old dream of its inventors.

The slides (without notes) are available on the web and the video of the screencast is on YouTube:

Here is a (long but also short) summary of what I was talking about: please don't hurt the web

I started the talk with an example how things can go wrong when they should be right. Richard Strauss’ “Also sprach Zarathustra” inspired by Friedrich Nietzsche’s book with the same title is an iconic piece of music. It was brought to a totally new audience with its use in 2001 – A space odyssey, the – in its own right – iconic movie by Stanley Kubrick. Now if you listen to this version, however, it sounds more like terrible things being done to elephants than the original song.

What happened? Were the musicians just terrible? Yes, but also, no. The second version is by the Portsmouth Sinfonia, a classical ensemble put together by either people who did not know how to play, but also by people who are gifted musicians, but weren’t allowed to play the instrument they know. It was a tongue-in-cheek experiment to see if musical genius is something that is given or can get taught to anyone with the right amount of effort.

The horrid, cacophonous outcome of this shows one thing – the wrong instruments in the hands of the right experts will not yield good results. And this is the vibe I am getting a lot when people speak about “the mobile web”. When smartphones came about everybody got incredibly excited: web developers saw a whole new market opening and new, interesting challenges coming towards them and native developers out of a sudden were asked to build things with web technology (this includes in my book Flash developers, who out of a sudden were asked to “do HTML5 as this works on iPhone”). The new form factor of smartphones brought up some new challenges for developers, who, until then, were used to catering to desktop users on fast, stable connections with computers that were in a certain range of resolutions. Out of a sudden, we found ourselves with new challenges:

  • Unknown, smaller screen size
  • New ways of interaction – touch, voice
  • Flaky, slow connections
  • Limited data plans
  • Less patient end users

Or so we told ourselves and people got very excited and worried about all these “new” things. We threw out a lot of truisms like “users on the phone are always busy and want a few big buttons as the interface” and started to consider locking our solutions down to one phone on one platform the only solution to delivering “exciting experiences”. If you took your job as a web developer serious though, then none of this should be new to you. We never were able to tell what the end user has at her disposal to consume what we put on the web and that is the beauty of it!

When Tim Berners-Lee came up with the idea of the web, the concept of what hardware and in what resolution or what connectivity it is consumed in was never, ever included. It is a system to deliver content and get it consumed by other computers. Or, as stated in the W3C Accessibility guidelines:

The Web is fundamentally designed to work for all people, whatever their hardware, software, language, culture, location, or physical or mental ability.

In other words: fiercely flexible is what the web should be. And the advent of smartphones and mobile computing consuming web content rather than just email and text messages brought this original idea more than ever back into the spotlight.

And instead of embracing it and finally giving in and saying “well, we have no clue what people use, so let’s use software to do what it does best – test and then adapt” we overload users on the desktop with lots and lots of widgets and an avalanche of content and we limit the mobile interfaces to the bare minimum, in many cases not even in a working fashion. The current mobile web is a failure, so much that clever marketers manage to sell to many companies the idea that asking users to “download the app” when they come to the site using a mobile device is the best choice. It reminds me of popup windows and Flash tunnels – both of which, luckily, are hardly ever used any longer.

Which is weird and disheartening seeing just how blessed we are these days with great tools to learn our trade. There are dozens of online course companies out there – many of them free and even then very high quality. Our browsers have amazing debugging tools and there is a large amount of collaborative editing tools out there where you can try and debug together with other people.

How is it we are losing ground? How is it that webstandards based interfaces are such a disappointment? Well, there are a few reasons:

First, we are too busy fixing things that are not a problem yet. The whole web world is abuzz trying to find solutions for the “retina problem”. We have a few very shiny, very cool devices that need high resolution images to look good. We also have an infrastructure that doesn’t support that much image data to be transferred in time. So we bash our heads together trying to solve that problem. Why? Why not ask the companies who break the web with their proprietary hardware and secret roadmaps to find a way to fix it in their hardware? Why should it be upon us as developers to reverse engineer and hack around issues that are man-made?

The very frustrating part about this is that we are solving a problem of a small minority of people. Granted, the richest ones and the ones that consume the most. But the web is more, and we should be thinking about tapping into the group of those that are not on the web right now, but have demands and needs that could be fulfilled by it.

Secondly a big problem that we have is reminiscent of the Portsmouth Sinfonia: we have a lot of developers doing design and designers doing development. Either because they are asked to, or because they are deluded enough that they think they can do everything or because our project plans are not catered for allowing specialists to do what they do best but instead to roll out the product as quickly as possible.

Almost weekly there is some rant by developers that CSS is too hard, not logical enough and needs replacement. Or designers answering “just use a jQuery plugin” for any problem that comes up in web development rather than finding a much simpler, more scalable and easier to understand JavaScript solution.

Maybe instead of trying to replace something we don’t get along with we find a person who loves doing it and partner with them? If I hire a plasterer to fix my ceiling I don’t expect him also to check out the plumbing of my house or build me a nice cupboard. Instead of ranting and calling a technology inapplicable we should leave it to other experts to do that part of the job for us and deliver the product with us.

All in all, this is just laziness or unwillingness to learn something new. We keep to our small worlds and see everything as a nail as we have one hammer at our disposal – not realising that in many cases the nail turns out to be a thumb once we have a go at it. A developer giving other developers design advice on Stackoverflow telling them to “use a layout table, as CSS isn’t ready for this” or a designer telling other designers to “just use this library” without understanding what it does under the hood is stagnation and fleeing into quick solution land where everything can be healed by applying a band-aid.

One big thing is people claiming that they have no talent for programming or others for interface design. One person that told this the right way is Bob Ross:

Talent is a pursued interest. In other words, anything that you are willing to practice, you can do.

Practice makes perfect, and you can only get better by learning from people who know the thing you want to learn. That is why the most important thing we need to do as creators of the web now is to collaborate and learn from another.
We are experts and experts use expert tools and talk to other experts. They do not just go and buy the first thing that promises a fast solution. That’s what frauds do. If we don’t want to be frauds, we should stop doing a few things:

  • Looking for technical solutions on Google. This is what underpaid helpdesk people do. “Any answer will do”
  • “Use this, it will solve all your problems” is nonsense used in advertising
  • Finding out the “how” doesn’t give you anything if it doesn’t answer the “why” at the same time.

All of these lead not to solutions and products, they lead to stop-gap solutions. And as we are normally not on the same project for a long time following these principles means we fill up the web with quick hacks and stop-gap solutions.

Instead we should tap into the community when we have a problem:

  • Write a demo of your problem and post it on JSFiddle, JSBin, Dabblet, Codepen or whatever has collaborative coding.
  • Go on Twitter/Google+/Facebook and ask people
  • Let’s use #cssissue or #jsissue as hashtags? That’s what the cool kids use!
  • Get fixes and share your learnings with the community

In other words: we should talk more. The web became what it was by collaboration, sharing and open discussion of problems and solutions. If we make these work around code and tangible examples we can avoid a lot of nonsensical, dogmatic discussions and “meh, just use $x” answers.

We forgot how to share knowledge, as we are stuck in a rat-race about innovating to “keep up with native”.

The question is though, what is the future of the web? I don’t know, but I feel very deeply that it will not be about a certain hardware. I also know deep down that it will not be about one browser. I also know that there is no such thing as an SDK or an IDE for the web (something native developers keep asking for when they start building web apps). And I know for sure that it is not achievable when mainstream media and governments keep trying to tell us that the web needs to be controlled to avoid people getting content they shouldn’t get. That last ship has sailed recently with – ironically – the release of a certain powerpoint presentation.

Is it trying to give users the same experience native solutions do? I don’t think so – at all. I find apps to be a step back and a step into a direction of controlled consumption rather than distributed discovery and consumption. And it hurts me to talk to new developers asking me where they can get a certain hardware before they can build their first web app. No, you do not need the hardware to build an app – you need the knowledge and the tools and both are available in the form of standards and freely available information and editors. The latter will sooner or later simply be part of the browser.

It hurts me to see that developers start thinking they need to “pay to play”. This is a horrible step backwards to me. The web is there for anyone to become a publisher. Closed environments work very much against that idea.

It is not surprising that sooner or later people would try to reign the web in and make it easier to sell and digest. This is how selling always worked and it is actually based on a principle defined in 1955 by Victor Lebow in an article in the Journal of Retailing:

Our enormously productive economy … demands that we make consumption our way of life, that we convert the buying and use of goods into rituals. That we seek our spiritual satisfaction, our ego satisfaction, in consumption … we need things consumed, burned up, replaced and discarded at an ever-accelerating rate.

In other words, things need to break. The phone has to die, so people buy a new one. That doesn’t work with intangible things like software and with things that are distributed and copied as soon as they become available. Which is why it needs even more to make people consume more. Clifford Brooks-Stevens defined the priniciple to make that happen in 1954 already, that of planned obsolescence:

Planned style obsolescence occurs when marketers change the styling of products so customers will purchase products more frequently. The style changes are designed to make owners of the old model feel out of date.

Do end users really need Retina displays? Or is it a wish, is it a need caused by damn good advertising and giving them a feeling of “not belonging to the hip people” when they don’t have it? As early as 1960 the concept of planned obsolescence was critiqued. My favourite quote is by Vance Packard in “The Waste Makers“:

“The systematic attempt of business to make us wasteful, debt-ridden, permanently discontented individuals”.

I am afraid that this dark prediction is coming true. Yes, Moore’s Law is in full effect and things get faster, smaller and cheaper all the time but not everybody who buys an iPhone just to go online can really afford it. And whatever new and cool we buy, we are annoyed with a few weeks later and consider it outdated.

How can we break this cycle? How can we bring the original ideas of the web to the mobile space, rather than the self-destructive cycle of perishable and – by design – soon obsolete products?

I am very happy to be part of one of the anti-movements of this: Firefox OS. FirefoxOS is a completely open operating system, built on web standards and available for download. It is not there to kill iOS or Android. It is there to bring web connectivity to the people who do not have it yet and who could never afford to be part of the race for new, faster, higher-resolutioned and shinier every half year. It has a few unique features:

  • It is targeted at new, emerging markets – true, the first country FirefoxOS phones are available right now is Spain, but that was a decision by our partner Telefonica. In the long run Firefox OS is going where the other players don’t bother to go – yet. If they go later on and offer affordable hardware, we as Mozilla have reached the goal we set ourselves: opening the mobile space
  • It runs on very affordable hardware
  • There is no credit card needed – apps can be bought on the phone bill or via prepaid cards (this is a big obstacle for people)
  • It is web technologies through and through – the OS and Apps are HTML5
  • You have full hardware access via open APIs
  • We have 21 mobile partners and 6 hardware partners

Apps for the OS can come from the marketplace – much like any other mobile platform – but you can also easily make them installable from the web with a simple JS API call. A web page can become an app just by defining a manifest file.

The really disruptive idea, however, is that Firefox OS turns the “find app, install app, use app” on its head. Instead of having to find an app by name in a marketplace, the search functionality of the OS allows you to find applications by entering a search term, like a band name, a movie name or anything else. After the system found an applicable app in the marketplace or on the web it shows you its icon. Clicking the icon sends the search term to the app and you immediately get what you came for. No need to enter the data again or go through an install process. If you like the app, you can long-tap it and install it. Your HTML5 mobile-optimised web sites become the ad for your app. You can see it all in the following video:

All in all, Firefox OS promises web developers a few things:

  • A whole new audience
  • HTML5 without the lock-out
  • Your web site is your ad!
  • Minimal extra work, it works across platforms

You don’t need to build apps for Firefox OS – you build them for the web and Firefox OS gives you the most APIs to play with and full access to the hardware.

All in all, we need makers of the web to unite and to ensure that what we know goes to the next generation. If we do not fight this fight right now, the web as we know it will play a second role to closed systems. Those will fade away – as they always do – but, to me, it seems like a big waste to spend lots of money and effort when we already have something that works. You can innovate faster and better in a closed space – no doubt about that – but being flexible makes you succeed in the longer run and reach people you don’t even know yet and who are hungry to get something new.

View full post on Christian Heilmann

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Dr.Seuss and Persona – Mozilla at Webvisions Barcelona

Last week Webvisions, a 3 day conference covering everything UX and web lured a few hundred enthusiasts to the sunny Barcelona. Mozilla sent Crystal Beasley and Chris Heilmann to talk about logging into the web with Persona and the future of the web.

Crystal gave a workshop on login systems and how to improve them and a talk on 13 signs your UX needs an exorcism.

Having watched The Lorax on the flight over, and seeing that the audience consisted of a lot of parents we thought it a good idea to write the “Future of HTML5 and the web” talk in the style of Dr. Seuss so people can read to their kids and reflect on what we tried to convey at the same time. Many thanks also to Eric Shepherd for some rhyming help.

Here are just the rhymes with all the links (also available on GitHub):

  1. There’s a big web out there, 
    it’s huge – I tell you, 
    it spans the whole world
    but it was boring and blue
  2. Then change came about, 
    in the shape of a fox
    it was cunning and open
    and it broke all the locks.
  3. Others showed up,
    and joined the good fight
    a singer, an adventurer
    and a shiny new knight.
  4. These all played together
    and spoke the same tongue
    which brought back old players,
    to join them in song. 
  5. A standard was set, 
    and it changed a few things,
    a richer web for apps
    was the promise it brings.
  6. Bah, standards! Who needs them?
    Some flashy ones said, 
    till a phone that was smart,
    kicked them out of its bed.
  7. We moved past one standard, 
    as web work is richer,
    so HTML5 and friends,
    paints a much better <picture>.
  8. Things that are fun
    should be shiny and cool,
    that’s why the new standards
    bring many a new tool.
  9. Watching and hearing,
    are what people like to do.
    Using <audio> and <video> is simple,
    and you can do it, too.
  10. Both of them are web-native,
    which is a reason to clap.
    They can interact with other content,
    and Mozilla Popcorn makes that a snap.
  11. If beats and frequencies are
    what you need to play,
    check the Web Audio API
    it gives you just that – even today.
  12. To play nice with batteries,
    use requestAnimationFrame(),
    don’t let it stop you
    that it has such a long name.
  13. 3D graphics are thrilling,
    as gamers will tell,
    we now have that on the web
    and it is called WebGL.
  14. Water goes everywhere you pour it,
    just ask Chris about his Macbook Air 🙁
    MediaQueries allow you be as fluid
    and respond instead of despair.
  15. Natural movements are smooth,
    just open your eyes.
    With CSS animation, transforms and transition,
    you can mimic this – nice!
  16. “The web means you need to be online”,
    I hear smartypants gloat,
    well, we have offline storage,
    so there – take your coat.
  17. Got a cam and some friends,
    and do you want to chat?
    WebRTC is what you need,
    even to show off your cat.
  18. Rhymes sometimes don’t come easy,
    as you just became aware.
    So let’s just move ahead quickly,
    this was just too much to bear.
  19. An artist needs a <canvas>,
    and HTML5 gave us that.
    Read, write and convert pixels,
    All in the client, it’s mad!
  20. “We don’t have rich elements!”
    many people complain,
    Use Web Components with X-Tag
    and create them – easy to maintain.
  21. Passwords are tough, 
    it is easy to see, 
    so allow login with emails,
    using BrowserID.
  22. The web is a mess,
    with third party buttons abound.
    Web Intents make them pointless,
    let’s not have them around.
  23. By design HTML5 is forgiving,
    its parser is great.
    It didn’t want to break the web,
    so let’s not break it in its stead.
  24. Course you can write weird things,
    and they will work – there’s no doubt.
    But will they be readable by others?
    This is what it’s about.
  25. You don’t create for yourself,
    or your friends who are the same.
    You develop for the next guy,
    so make sure you’re not to blame.
  26. You don’t jump in a river,
    if you don’t know its depth.
    On the web using Modernizr,
    should be your first step.
  27. Give new stuff to new players,
    and use it to enhance.
    Don’t support when it’s not needed
    IE6 walks – it can’t dance!
  28. With a vendor prefix browsers tell you
    “this is not ready”.
    So by all means, give them a go,
    but don’t expect to go steady
  29. And those prefixes vanish,
    you mustn’t forget!
    End with a prefixless version,
    It’s your very best bet.
  30. So we ask you to help us,
    build a web that will last.
    Be future friendly and look forward,
    and stop building for the past.
  31. The web is on phones,
    tablets, computers, TVs.
    We have to move it forward.
    or else our existence will cease.
  32. Hardware that is locked up,
    is not what we are about,
    so check out Firefox OS,
    if you like the web – you will like it – no doubt.
  33. Last but not least,
    if you find something’s wrong
    please file a bug and tell us,
    this is how things get done.
  34. So there you have a lot to play with,
    check out and share.
    We really want you to do that,
    come on, show us you care.
  35. Unless someone like you
    cares a whole awful lot,
    nothing is going to get better.
    It’s not.
  36. So well done for reading and listening,
    and going great lengths,
    that’s all we got time for today,
    so good-bye and thanks!

Encountering a lot of hardware problems we couldn’t do a recording of the talk so I made a screencast of the presentation available on YouTube.

Alternatively, you can also have a video version with just the rhymes

Other formats for you to download and use:

The audience reaction was very positive and we found out that when you rhyme your talk it flows much faster. The 45 minute slot was 20 minutes of our talk and another 25 minutes explaining in detail what we covered in a Q&A.

All in all Webvisions was a great event and watch out for videos of the other talks being available soon and other slides on the web.

View full post on Mozilla Hacks – the Web developer blog

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Sencha’s James Pearce Talks Up Rich Mobile Web Apps at MWC Barcelona

BARCELONA, SPAIN Mobile World Congress : Sencha , the company that enables developers to create amazing web apps built on web standards, is participating at this year’s Mobile World Congress in Barcelona, Spain. James Pearce, senior director of developer relations at Sencha, is speaking at the WIPJam…

View full post on web development – Yahoo! News Search Results

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)