Here’s the write-up of a talk I gave yesterday at the Betavine second birthday party (Betavine is "an open community for mobile application developers"). It stimulated some great discussion there (“Thanks to Bruce from Opera for putting forward the case for one web and stimulating a lot of debate!”); I hope it can continue here.
The talk was without slides, so here are reconstructed notes from the keywords I jotted down on postcards.
Is the One Web getting .mobi dicked?
Confession: I didn’t own a phone with a browser until started working at Opera. I had broadband in the office, and at home (where there are two adults, a ten year old and a seven year old) there are four computers. So why would I need the Web on a phone too?
My recent university lecture tour of Indonesia opened my eyes: whole university faculties using a line a quarter of the speed of my domestic line. Infra structural problems that can’t cope with the massive demand for internet mean that for many, mobile phones are the only practical way to access the Web.
As you might know from Opera’s State of the mobile Web reports, the biggest growth for mobile web is in the developing economies. It’s interesting to look at what people are looking at. Because the world’s most-used phone browser, Opera Mini is a proxy system, we have aggregated data that tells us what any particular country surfs (note to conspiracy theorists: it can’t look at individuals even if we wanted to, which we don’t). What’s perhaps surprising is that people all over the world look at the same stuff from their mobiles. From Jakarta to Johannesburg, from Berlin to Bombay to Beijing, from Brazil to Blighty, people surf trusted, uncensored information (BBC, Wikipedia), search engines, social networking. And porn.
Furthermore, we know that they want the “full web: from our April 08 mobile report: "Full Web surfing comprises more than 77% of all traffic. Content on WAP and .mobi sites accounted for 23% of mobile Web traffic. This share continues to decline.”
An anecdote illustrates the demand for the "full web". Orkut is the most popular social network in India (and Brazil. Who knows why such different countries should favour that over, say, hi 5 or facebook? Therein lies a PhD thesis). Anyway, Google introduced some device-sniffing code and began serving Opera Mini users a cut-down mobile version rather than the full version that they’d been served before. Cue outrage from mobile Orkut users who wanted the full website and a swift reversal by Orkut.
When I first started work, I had an ATM card that could only be used in my bank’s machines. Then along came the Link network, and I could use it any of four banks’ machines. Why shouldn’t you be able to use a Halifax card in a Lloyd’s machine? Now I can use my card in Thailand, Indonesia or anywhere else.
And the Web is like those ATM machines. Why should a site only be available for one type of machine? I’m very fond of the One Web. Philosophically: a web is interconnected. No-one is left out. Why should things look different across browsers, operating systems, devices? This is why we have standards: you write one web site that works anywhere.
But we’re seeing more and more mobile-only sites. More and more sites are "optimised for iPhone" (how is that any different from the now hilariously archaic late-90s message “best viewed in IE4 at resolution…). In fact, why are there "mobile" web sites at all?
So why walled garden sites?
Perhaps one reason is cultural? Mr Boss walks in one day and demands "a mobile site". All your competitors have a domain like mobile.acme.com, so that’s got to be the way to do it, right? Simply coax your CMS to squirt out the information that you think your mobile customers want, and job done.
It’s also hard to make web pages that work across devices and hard to find information. The web standards movement built up a huge bank of best practice on how to build cross-browser sites (and not sweat the minor rendering differences) but there isn’t that corpus of best practice yet for cross-device development.
Deja vu
But we’ve been here before. It reminds me of web accessibility, back when websites were steam powered back in 2002. Tesco launched a website that was highly optimised for users of assistive technology, and made a fortune from it. Blind people obviously have great difficulty going round a supermarket, locating products and then lugging it all home. From the comfort of their homes, they could order their goods without advertising or other distractions and have it delivered.
But some people with disabilities resented the fact that there was a special "disabled-only" walled garden website. They felt "separate but equal" was a kind of discrimination. Some said, why shouldn’t we get to see the ads too?
Since that time, web developers have built up a body of knowledge, user agents (browsers and assistive technologies) got better and now people who care about accessibility no longer build special accessible sites; we build just one website that can be used across browsers and assistive technologies.
Mobile browsers help to get over usability problems because they know they’re mobile devices so they optimise the experience with no input from the developer:
By zooming into areas of a site, you can overcome the fact that most sites are "wider" than a mobile screen.
Touch screen makes horizontal scrolling much more palatable.
Opera browsers can reformat a page into a single column via a setting
Opera users can choose not to download images (this is better than using CSS to hide them with display:none; as that method downloads heavy images and does nothing with them; this method stops the browser even fetching the images, saving lots of bandwidth).
using media types to send handheld stylesheets didn’t work because some user agents didn’t do what they were supposed to do; see Return of the Mobile Style Sheet (but beware the tables which mention the non-existent IE 7 and 8 for mobile).
media queries: sending CSS depending on different attributes of the device, so you can say @media screen and (min-width: 400px) and (max-width: 700px) { ... } to send certain CSS to devices depending on the screen size (in this case, those with screens between 400 and 700 pixels wide). This works in Opera. Safari, and is apparently going to be in Firefox 3.1. It won’t be in IE 8 (but no IE 8 for mobile anyway, as the miserably anti-standard IE 6 has been resurrected as Microsoft’s flagship mobile browser.)
I’ve heard arguments that some content isn’t appropriate for mobiles. I say, let the users be the judge of that (and remember the Orkut anecdote).
Some say that some content is only appropriate to mobiles for example, the tel: URI scheme that lets you set up a link like <a href="tel:07888123123">Call me on 07888 123123</a> and, when clicked, it causes the phone to dial the number. But I want that on my desktop, too—except there, I want it to fire up Skype and call the number.
A biggie is location-aware content. At Opera we’re very interested in that; our head of the browser core, Lars-Erik Bolstad, co-chairs the W3C‘s Geolocation group. But isn’t Geolocation equally applicable on the Nintendo DSi, netbooks and laptops, now that laptop sales outstrip desktops?
The main use case I hear for mobile-only sites are things like train and bus timetables. The thinking is: If you’re out and about and you hit a rail network site from your mobile, you must be either buying a ticket or checking a timetable, so make those the most prominent tasks of the site.
I agree. But that’s not because those are only appropriate for mobile users. Those tasks are what most visitors to those sites want to, regardless of where they are or what device they use. It’s true that mobile users are task-focussed. But so is everybody else!
Because desktops are big, there’s the assumption that punters want to see a message from your chairman, how well you’ve done on your E&D strategy or any of that kind of organisational vanity publishing. But people almost certainly don’t care about your immersive web experience just because they’re at home with a desktop. Wake up Mr Web Manager! People go to train websites to check timetables or buy tickets, regardless of whether they’re on the move or holding a small-screen device. There’s no excuse for my local station timetables to be a hulking PDF regardless of my device.
Like the fact that non-disabled visitors use the Tesco accessibility site because it’s faster and task-focussed, I’ve heard anecdotes (from Ribot and others) of people using mobile walled garden sites on their desktops, precisely because the transactions are more quickly accomplished using those. That supports my argument that most mobile content isn’t more suited to mobiles, it’s just better content than its flabby narcissistic non-mobile equivalent.
We’re approaching the tipping point
The market still fragmented, with lots of different devices, but convergence is happening. The most-used web browser in the world, Opera Mini, can optimise "full web" sites for the mobile phone. In America, 50% of the market is iPhone and Android operating systems, which can run browsers capable of rendering sites for the one web. Connection speeds are ever-faster, user agents are getting smarter.
Are the walled-garden mobile sites the equivalent of 2002’s "special accessible" sites that need to be developed alongside the full website, thereby costing more and yet are unnecessary? I think we may be at the tipping point when we can start to develop websites using standards that ensure the site can be read by any device, running any decent browser, for people with assistive technology or without.
Most were due to WAI-ARIA roles being applied to new HTML 5 structural elements, which isn’t currently allowed (both specs are in draft, remmeber). I’m not worried about those; accessibility trumps validity for me, and ARIA doesn’t validate in HTML 4, either.
I was also getting an odd error with Remy Sharp’s groovy HTML 5 enabling script, which I’d surrounded by a conditional comment as only Internet Explorer needs it. Part of the JavaScript has a double hyphen and HTML 5 doesn’t like “--” in comments, so fearphage sent me a rewrite that reversed the JavaScript. You don’t need to do this as you would have the script in an external file; I have it included in the head of each page so that visitors can see what’s happening.
However, none of the embedded Flash movies from YouTube would validate. I was using the default code given by YouTube which nests an embed tag inside an object tag and which doesn’t validate in current flavours of (X)HTML because embed was never in any spec.
Fearphage suggested using just the object tag for the Flash movies, but Patrick Lauke pointed out that there are some problems with that approach:
Internet Explorer can’t stream videos but must download the full movie before showing it
screenreaders can’t access accessibility information within the Flash movie (admittedly not likely to be a problem with most YouTube uploads)
One of the HTML 5 design principles is to “pave the cowpaths”. Because everybody uses embed, it’s been added to the spec. So by rearranging some of YouTube’s suggested code (self-closing param elements, escaping ampersands in URLs and repeating the URL for a third time as a data attribute on the object element) I came up with an accessible-as-possible, cross-browser, valid HTML 5 way to embed Flash movies:
<object width="425" height="344" data="http://www.youtube.com/v/8-pFwbHMuwA&hl=en&fs=1">
<param name="movie" value="http://www.youtube.com/v/8-pFwbHMuwA&hl=en&fs=1" />
<param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always" />
<embed src="http://www.youtube.com/v/8-pFwbHMuwA&hl=en&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344" />
</object>
What we need now is for some kind soul to write a wizard that converts YouTube’s default code into code formatted as above.
It’s with some irony that I write this post, because one of the exciting things about HTML 5 is the video element that allows video to be added to a page with a simple <video src="blah.src" controls>I'm fallback content</video> and then plays it without any plugins or scripting. It allows an open, patent-free video codec to interact with canvas and SVG and it doesn’t require duplication of data twice or three times like the code contortions above.
I’m too lazy to amend every instance from the last five years, but my home page is now valid apart from ARIA roles and an objection to the feed: protocol on a link to my RSS feed.
Langridge tagged me with one of these meme things. It is supposed to be called “seven things you may not know about me”, and Langridge wanted some comedy, but looking at my list I think my title is more accurate.
I’ve had carnal knowledge of women from all the world’s major religions except Judaism. Before you shout “anti-semite”, I tried very hard to rectify this deficiency with Ayelet from Tel Aviv but her room-mate came home too early.
When I got married I decided that abandoning this particular spiritual quest would be prudent to preserve nuptial harmony. My wife agrees.
I have difficulty playing the basic F major chord on guitar.
I’m actually quite shy, but conceal this with an loud egocentric persona. People think I’m quite easy-going, but I have a vile temper.
I once got a girlfriend pregnant and we agreed she should have an abortion. Our never-was daughter would be 17 years old now. That thought haunts me.
I’m not racist, sexist or homophobic. But I dislike spending time with stupid people.
About a year after we were married, my wife woke up and told me that she’d had a dream of a small girl swimming towards her in the ocean. Later that day she used a pregnancy testing kit and it was positive. That’s why our daughter is named Marina (after the T.S. Eliot poem).
I can transform myself into a duck in my guise as The Great Duckano.
Microformats are a good idea, but some have accessibility problems because they expose machine data to humans by misusing the abbr element. These problems led to the BBC removing those microformats from their sites.
One such misuse is encoding dates and times in microformats such as hCalendar, hAtom, and hReview. Ultimately, this problem goes away in HTML 5, as that introduces a time element which is obviously better than an abbreviation for marking up dates and times (a tenet of microformats is to “use the most accurately precise semantic XHTML building block for each object”).
So, an example of an HTML 4 based hCalendar microformat (taken from the spec) is
<div class="vevent">
<a class="url" href="http://www.web2con.com/">http://www.web2con.com/</a>
<span class="summary">Web 2.0 Conference</span>:
<abbr class="dtstart" title="2007-10-05">October 5</abbr>-
<abbr class="dtend" title="2007-10-20">19</abbr>,
at the <span class="location">Argent Hotel, San Francisco, CA</span>
</div>
After replacing the abbr element with time and replacing its title attribute with datetime we get
<div class="vevent">
<a class="url" href="http://www.web2con.com/">http://www.web2con.com/</a>
<span class="summary">Web 2.0 Conference</span>:
<time class="dtstart" datetime="2007-10-05">October 5</time>-
<time class="dtend" datetime="2007-10-20">19</time>,
at the <span class="location">Argent Hotel, San Francisco, CA</span>
</div>
Of course, this only works for dates and times. Other microformats use the flawed abbr pattern to code locations in microformats such as hCard, hCalendar & ‘geo’.
Here’s an example
Let’s go to <abbr class="geo" title="30.300474;-97.747247">Austin, TX</abbr>
“Thirty point three oh oh four seven four semi-colon minus ninety-seven point seven four seven two four seven”
A leading microformatter, Ben Ward, recently proposed an extension to the value-excerption pattern (no, I don’t know what that means, either) which allows this machine-readable information to remain in the DOM while hiding machine date from people.
My test page plays nicely with the following screenreaders:
JAWS 9 and JAWS 10 on Firefox 3 and IE 7 with high verbosity settings and abbr and acronym set to always be expanded (says Jared Smith)
WinXP Window-Eyes with FF3 and full punc reads human date. It pauses before the .dtstart spans in Mouse mode, but not in Browse mode (thanks dotjay)
Safari 3.2.1 on OS X Leopard with VoiceOver (thanks dotjay)
WinXP Window-Eyes with IE 6 and full punc reads human date (thanks dotjay)
I’m really excited by this as it may be the end of the microformats versus accessibility debates (that I’ve helped stir up). If you have access to assistive techologies, please give it a test.
Problems with this pattern from a microformats perspective might be
The machine data is “hidden” so might more easily fall out of sync with the human data
The machine data must be the first child of the property. If it isn’t, a parser won’t see it – but it will be trickier to debug because the developer will still see it in the source code
I hope, if screenreader and parser testing allows, that the new pattern will be adopted so that those of us who want to use microformats and care about accessibility can use it.
The future of microformats in HTML 5
I had naively thought that many microformats would use the HTML data-* attributes, which are for “embedding custom non-visible data” and thus seem perfect for embedding such information on structutal markup.
Any element in HTML 5 can have any number of data-* attributes. The asterisk is a wildcard; you can call them what you want. An example from the spec:
User agents must not derive any implementation behavior from these attributes or values. Specifications intended for user agents must not define these attributes to have any meaningful values.
I was uncertain what this meant, so asked Anne van Kesteren who told me that these attributes are for passing data to scripts that are private to the page, rather than to indicate meaning to external parsers:
It’s so that non-private extensions that need User Agent implementation a) won’t break sites using those names for other purposes and b) get due consideration by the Working Group and a proper name without data-
This is because these attributes are intended for use by the site’s own scripts, and are not a generic extension mechanism for publicly-usable metadata.
So, microformats won’t be “rolled up” into HTML 5. I imagine that some of the microformats community will wish to lobby the HTML 5 working group for a proper name for the data they wish to store with an element, so that the data can be parsed reliably without the “hacky” nature of the microformats. There is a process for adding new features to the spec.
Others will want to ignore caveats that HTML 5 places on using the data-* attributes for publicly-usable metadata and use them anyway.
Perhaps most likely, microformats will continue to use class=, rel=, and the like as they do now. That would be valid HTML 5 and require no changes to specs or parsers.
So it seems that microformats will continue in an HTML 5 world. And, now that there seems to be a will to fix the accessibility problems, I think that’s a good thing.
It seemed to go well although I exceeded my time; thanks for listening, everyone. A 7 minute video was made.
What the slides don’t show (but the video does) is the reason why you might volunteer to comment on the draft in your own time, without acknowledgment, so the BSI can sell the end result. It’s the same reason as I participated in the drafting committee; it’s right to help make sure that the standard guarantees a good experience for disabled people, and it’s better to be in the process to ensure a useful end-result than not get involved and then have clients ask you to adhere to a standard which is bonkers.
Songsmith generates musical accompaniment to match a singer’s voice. Just choose a musical style, sing into your PC’s microphone, and Songsmith will create backing music for you.
It’s also fun listening to the melody lines of famous songs being interpreted by it. For example, Oasis’ “Wonderwall” sounds like those crappy dance remixes that chart sometimes:
“Sgt. Pepper’s Lonely Hearts Club Band” is less successful:
The Police’s “Roxanne” also loses in translation:
It’s a great toy. But I think it’s fair to say that Microsoft Songsmith does to music what Microsoft Internet Explorer 6 does to websites.
Even I will admit that Mr Obama might have more pressing things on his agenda than open web standards once Mr Bush is pretzeled with extreme prejudice later today.
The Obama Administration has a comprehensive agenda to empower individuals with disabilities in order to equalize opportunities for all Americans…
This commitment to accessibility for all begins with this site and our efforts to ensure all functionality and all content is accessible to all Americans.
But he’s not prez yet. Let’s hope for some technological openness once the troops are out of Iraq, Guantanamo Bay is shut, all yankees have health care and Messrs Bush, Rumsfeld and Wolfowitz are in the same prison as Tony Blair.
Not so much a blog post but a collection of links.
UK government browser guidelines: good sense prevails
The Web Standards community changed some guidelines for government webmasters that would encourage designing to browsers into something that requires valid code, web standards and progressive enhancement. UK government browser guidelines: good sense prevails.
A while ago I speculated that the lack of a validator for ARIA might slow adoption. Steve Faulkner has written a proof-of-concept HTML4+ARIA Checker and hopes, as I do, that “the W3C validator adds support for (X)HTML +ARIA documents so I when check a document and it contains no errors in the HTML (except for the use of ARIA) and ARIA code, I see a message like this: this document was successfully checked. Passed (1 Warning)”
Should you think that ARIA is just w3c vapourware, there’s a podcast on ARIA by Freedom Scientific (the manufacturers of the JAWS screenreader) available:
Freedom Scientific’s Chief Technical Officer Glen Gordon explains ARIA and its benefits. Jonathan Mosen then demonstrates some applications with ARIA enabled for improved accessibility.
Didn’t see a transcript anywhere, surprise surprise.
It boils down to this: the title attribute is meant for human consumable content, just the same as the inner text of most of the HTML elements.
Everytime you put machine-formatted data into a container that is for human consumption, then you run the risk of it being exposed to a human being. In microformats this a feature’, in accessibility this a bug’.
I think that’s throwing the baby out with the bathwater to say “the easiest approach right now is to say Microformats are inaccessible, and move along”; it’s just this pattern that’s inaccessible.
Patrick suggests, “why not make a ‘title attribute’ pattern that allows for the use of the most semantically appropriate element? span with title in cases like datetime, abbr when it is actually an abbreviation.”
That makes sense to me. How would those plugins that make use of microformats cope if I marked up hCalendar dates with a span. Anyone know?
The European Union, in a “preliminary” view on a complaint by Opera, said it believes that the company “distorts competition on the merits between competing web browsers” by bundling IE with every copy of Windows. (see The Guardian, Slashdot).
I’m an Opera employee and there I’m not allowed to comment on this. Here’s the Opera press release about it(a glitch in the matrix has prevented us publishing it on the official website).
European Commission accuses Microsoft of illegally tying Internet Explorer to Windows
Oslo, Norway and Brussels, Belgium 16 January 2009 Following its investigation of Opera Software ASA’s antitrust complaint, the European Commission confirmed today that it sent Microsoft a Statement of Objections yesterday, accusing it of illegally tying Internet Explorer to the Windows PC operating system.
Opera’s complaint filed in December of 2007 described how Microsoft has been abusing its dominant position in PC operating systems and preventing competition on the merits for internet browsers in favor of its own Internet Explorer. Opera requested the Commission to take the necessary actions to compel Microsoft to allow consumers a real choice of browser.
“On behalf of all Internet users, we commend the Commission for taking the next step towards restoring competition in a market that Microsoft has strangled for more than a decade. The Commission’s Statement of Objections demonstrates that the Commission is serious about getting Microsoft to start competing on the merits in the browser market and letting consumers have a real choice of internet browsers,” says Jon von Tetzchner, Chief Executive Officer, Opera Software.
The Statement of Objections comes almost a year and half after the judgment of the European Court of First Instance confirming the European Commission’s 2004 Decision that Microsoft had illegally tied Windows Media Player to Windows.
“The Court of First Instance’s judgment was clear that Microsoft illegally tied Media Player to Windows. We are not surprised that the Commission has issued a Statement of Objections based on the principles in that judgment. We are confident that the Commission will ultimately conclude that Microsoft has violated European competition law again and that it will take all necessary actions to restore competition and consumer choice in this important market,” says Jason Hoida, Deputy General Counsel, Opera Software.
The Commission’s action has not come a moment too soon as the internet browser, now more than ever, is the most important application on the PC.
“The browser is the consumer’s gateway to the Internet and a critical platform for application development itself. Today the Commission has confirmed that it will do what it can to make sure consumers are able to continue to freely enjoy one of the most important innovations in the history of humanity: the Internet,” says von Tetzchner.
About Opera Software ASA
Opera Software ASA is a Norwegian company providing innovative products that make the Web a reality on any device from computers and cell phones to portable media players and game consoles. As the first company that brought the full Web to the small mobile screen, Opera has an unparalleled track record in giving users the full Web experience across platforms.
Opera’s product range includes its flagship desktop browser, a fast and free Web browser for mobile phones called Opera Mini, and Opera Mobile, a version of the browser designed for today’s advanced smartphones. All Opera’s products support open Web standards which make the Web a home for innovation. Available completely free, Opera’s desktop browser or Opera Mini can be downloaded at www.opera.com.
Opera Software ASA is headquartered in Oslo, Norway and has offices around the world, including in the United States, Japan, Sweden, Poland, China, Korea, Czech Republic, Taiwan and India. Opera is listed on the Oslo Stock Exchange (Symbol: OPERA).
I’d never used Twitter before I started working from home, but increasingly have used it as a widely distributed group of people that you would chat with round the photocopier, if you work in an office.
Whereas before I’d chat to colleagues about the weekend, the weather, a film I saw, a joke I heard or something silly on the web, I now post it to Twitter. Before, I would have shouted at IE 6 and John or Nedjma would point out where I was guillotining my three pixel drop float bug. Now, I howl on Twitter and some nice person has a look. (When I left commercial web development last June, I severed all links with IE 6 by buying a Vista computer, thereby swapping one curate’s egg for another.)
Last week when I began recoding this site into HTML 5, something magical and twitter-tastic happened. People I’ve never met took the time to send me screenshots, suggest bug fixes, or simply messaged me to say they were enjoying my updates.
It might be a timesink and 97% banalities (most generated by me) but I now officially love Twitter and those who subscribe to my banalities. If I ever meet you, I’ll buy you a drink or sleep with you. (I get to decide which.)