Bruce Lawson’s personal site

Archive for the 'Opera' Category

New Year CSS resolutions

Browser competition is hotting up again. Today’s release of Opera 10.5 pre-alpha New Year edition now includes HTML5 video, is the fastest browser on the planet, and also introduces lots of new CSS properties such as fancy borders, backgrounds and box-shadow like multiple background images, and CSS 2D transforms and transitions.

Many developers have assumed that only Gecko and Webkit browsers will ever render CSS rounded corners or transitions, so have only specified their CSS with -moz- or -webkit- prefixes—sometimes while simultaneously berating other browsers for not supporting these properties yet. Note that Microsoft has announced that IE9 will support border-radius but if you only specify Firefox and Safari in your code, your future IE9 users won’t see those wonderful rounded corners anyway.

So, to widen the reach of your super-sexy designs, please take a minute to add the -o- prefix to your CSS transitions and transform declarations, and to add border-radius and box-shadow without vendor prefixes.

Happy 2010. May your corners always by curvy.

Friday 13th: 43rd birthday in Jakarta

The miserable bloody English weather has conspired to give me two colds more or less back to back, so it was with only minimal trepidation that I spent 24 hours travelling by plane to Indonesia, to spend my second birthday on the trot jetlagged in Jakarta where I’m embarking on a frenzied schedule of university visits to persuade Indonesian students of the value of Web Standards.

The kindly Indonesians laid on a huge rain storm just as I landed (so the 30 celcius sun they’d been enjoying didn’t make me too culture-shocked). Cue flooding and gridlock. The 30 minute drive from the airport took two and half hours of buttock-clenching frustration—but at least it didn’t end up like that other Friday 13th.

Vodafone 360 Widgets

I was invited by some nice people at Vodafone to come along to the launch of Vodafone 360.

Amongst all the glitz and glam PR ladies that made me feel like I’d walked into a Bond film was a real product: a couple of new Samsung phones and a raft of applications and services provided by Vodafone. I’m not their marketing department, so you can read all about it on the 360 site.

After watching a sexy video about Nick (a “typical 360 customer”) who seemed to do nothing else other than take black cabs around the West End to hang out with glamourous 20 year olds, only one of whom ever did any work (and that was restricted to nodding her head and languidly sliding up a fader on a mixing desk), we looked at the tech.

The 360 services are applications pre-supplied by Vodafone. There was a live-demo (brave!) of an application made by Domino’s Pizza that allows the user to buy a pizza incredibly easily; the phone’s GPS told the nearest shop the user’s location, and the cost of the pizza is added to the user’s VF phone bill.

What’s interesting thing about the 360 applications is that they’re not built using Java, C++ or some vendor-specific language. Instead, they’re written using HTML, CSS, JavaScript and packaged up according to (draft) W3C spec called Widgets 1.0: Packaging and Configuration. The packaging is as simple as writing a config.xml file or using the Widget Packager wizard to do it for you, and zipping up your config, HTML, CSS, JavaScript and any images and renaming the resulting file with a .wgt extension. (Widget tutorial: Making a mobile Twitter client.)

For Widgets, read “applications”; I think the name does the spec and concept a disservice, as it implies trivilality or toys. What’s cool is the Vodafone implementation has “live” icons that can display info even when the application isn’t fully opened.

The advantage to using W3C widgets (and presumably the reason that Mr Vodafone invited me) is that if you know how to write standards-compliant web pages, you know how to make mobile phone applications. Vodafone are encouraging developers to write and sell through their app store which operates a 70/30 revenue split, favouring the developer. (There will be a €1million prize fund for the best new widgets, they said.)

The emphasis on standards continued in a surprising way; a venture capitalist lady on a Q&A panel talked of W3C standards being advantageous to both developer and customer. There was a VF suit with a whole slide listing standards and a W3C logo. This was all music to my ears, of course, given that I’ve been banging on about the benefits of standards for years, but it was odd to see so many suits repeating it.

The success of 360 remains to be seen; I think it’s launched to consumers in a month or so. Its DRM-free music is a plus, but the quality of the handsets will be the Christmas make-or-break, in my opinion. I’m no fan of the iPhone, but for user experience it’s without equal so the new Samsung hardware will need to be pretty special in a way that my Samsung Omnia isn’t.

The day was surprising in that I met three people I didn’t expect to see; the first was Opera’s CEO Jon von Tetzchner (=my boss) who was speaking on the expert panel as Opera is the 360 browser.

The second was ever-cheerful Cathy Ma who introduced me to people with an anecdote about nipples, and the Mobile Web Best Practices Working Group’s answer to John Steed, Jo Rabin, who I’ve spoken to every Tuesday afternoon for many months but had never met.

And so to the party, where much beer was consumed and CSS Media Queries discussed.

Standards.Next: cognition and accessibility

When Henny and I dreamed up the standards.next format, we were privileged: we work for Opera, which really supports standards so we get allocated time to work on these day-long geekfests without having to aggressively pimp the company or worry about turning a profit.

However, when we decided to run what I think was the first ever event dedicated solely to cognition and accessibility, I expected only a dozen people or so to show up.

Wow! Over forty came, including one lady who flew from Madrid specially (thank you, Emmanuelle!)

I knew it would be a great day when, hopelessly lost at Angel tube, I asked a guy on a “no ID cards” stand for directions to City Uni. “Are you going to standards.next?” he asked me, promising to show up 30 mins later (and he did).

I shan’t repeat what each of our excellent speakers said, as their slides and videos are available on their sites:

Here are some write-ups of the day:

On the styling of form fields

In Ian Pouncey’s talk, Ian mentioned that people with cognitive needs (including older people, people new to the Web) need consistency of look and feel with controls. Don’t style form buttons, he suggested.

This resonated with me as lately I’ve been thinking a lot about the new features HTML 5 brings to forms. When I demo them, I’m always always asked if they can be styled. At the moment, they can only be styled up to a point: for super-specific styles to new sliders, calendar widgets, we’ll probably need new pseudo-elements from CSS Working Group, perhaps in the Basic User Interface module.

Ian’s comment led me to wonder should they be stylable at all, a question I asked of the meeting.

Antony Kennedy told me that they should:

Because:

1) If you don’t allow it, people will do it anyway. If HTML 5 does not support this we will have to create our own bastardised JavaScript replacements, which will be inaccessible, unusable, and unrecognisable by anything querying the DOM as what they actually represent.

2) Although we know they ought to and recommend that developers use the default OS styling, to take away the option is too strict. We are pushing standards, not limits.

3) Allowing developers and designers more flexibility allows them to come up with new more intuitive and surprising interfaces and uses for these elements that we would never have thought of.

4) It’s what the customer wants. And what they want, essentially, they get. The biggest complaint about the “select” tag is that we cannot style it. This led to on my very first day at BSkyB me blogging this www.zeroedandnoughted.com/?p=14 because of this: http://tv.sky.com/tvlistings

The dropdowns had to match the branding. There was no option otherwise. Because I could not “colour it in” we had to make our own bespoke dropdowns. Immediately, failures were made to recreate the OS’ behaviour. The selected content of the dropdown did not match what was displayed. No keyboard access. JavaScript only. If we had been able to style the dropdown then we would have been able to achieve all of this, and in far less time. Without being able to, yes, we were pushed along the path of using the OS default. Was that the chosen option? No. We ended up with a pretty (subjectively) but inaccessible solution, with no decent business case to improve upon it.

5) If we do not allow this, developers/designers will use the next available attribute that will let us do this with the least pain. Submit buttons become anchors, for example, and then we have dependencies on JavaScript, and the entire web become less accessible and less semantic.

I would love to know your views on the stylability of forms.

Jamie Knight’s screenreader and HTML5

Something else that made me think of HTML5 (because I’m heavily focussing on accessibility there) is Jamie Knight’s discussion of his screenreader use. He’s not blind, but sometimes finds it easier to listen to a page than read it. He made his own screenreader that listens out for certain ids or class names like “navigation”, “menu”, “sidebar” so that his screenreader can skip the peripheral information on repeated views.

With the “baked-in” elements like nav, footer etc, this would be achievable with much greater precision.


What did the day achieve?

Personally, the after-conference chats are as important to me as the “official” talks. I was delighted that conversation and debate continued into the night, with people who hadn’t met each other swapping ideas, insights and business cards. That’s one of the results I’d hoped for: connecting people who might have been working in isolation.

I also met one of the accessibility good guys, Matt May from Adobe. I’ve known him for ages on-line; most recently he’s been helping Lachlan Hunt and I understand the kind of things that will be needed to make canvas accessible—the kind of things that got added to Flash in version 5 to retrofit it for accessibility.

I was clutching my battered copy of the excellent book Universal Design for Web Applications that he wrote with Wendy Chisholm so he could sign it for me:

Mr Blorsensen: thank you for your support. Sorry, no refunds

So, in conclusion: thank you to all our speakers and all who attended. I wholeheartedly agree with a tweet from isolani:

Today reminded me again what a marvelous accessibility community we have within the UK.

(A few more photos)

Opera Mini: what, why and how

Speaking to a few hundred developers this week at Future of Web Design Bristol and Glasgow, some attendees were surprised to learn that Opera passed the iPhone to lead the mobile-browser market. This seemed counter-intuitive as “everybody” in the web development world has an iPhone, just like “everyone” uses a Mac.

Of course, we know that in the real world, most people do not have an iPhone and don’t use a Mac. This is a demonstration of the potentially dangerous belief that “my customers are the same as me”. As everyone wants to make their sites mobile-friendly, and as today sees the release of Opera Mini 5 beta, now is a good time to explain what Opera Mini is and how you design for it and test it.

What is Opera Mini?

Web browsers are hugely complex beasts. Working out the interaction between HTML, CSS, SVG, JavaScript and rendering it all is highly processor-intensive. They rely heavily on Operating Systems (which is why making cross-OS browsers like Opera and Firefox is hard).

World-wide there are 100 million or so smartphones, each of which has an Operating System that can run a full web browser such as Opera Mobile or Safari.

But there is an estimated 1 billion lower-specced phones around the globe, many of them in the developing world (but by no means exclusively so; how many people do you know with featurephones rather than smartphones? A lot, I’ll bet).

Because it’s a world-wide web, and not just a wealthy Western web, we developed Opera Mini, which works on all phones—even on the lower-end ones, as long as they support Java.

There often isn’t enough processing power to render the page on these phones, so the requests are pre-rendered on servers running Opera’s layout engine and the result is sent to the phones from the server as a heavily compressed “snapshot” of the page. It’s by no means uncommon for this to be as small as 10% of the size of the original page.

Because of this heavy compression, displaying pages on the user’s device occurs much faster than if it had processed the page itself, and for those who pay by the amount of data downloaded it’s also a huge cost saving. This compression and data saving also explains why many Western users of smartphones use Opera Mini to reduce bankruptcy-inducing data-roaming charges when they travel to a neighbouring country.

How to ensure your site works in Opera Mini

The same way that you ensure your site works in every other browser: design using Web Standards and make sure your code validates.

A useful technique for cross-browser and cross-device development are to use the Hijax methodology for adding Ajax interactions.

Don’t be immediately tempted to start building a special mobile-only verson of your site (see my ZDNet article Forget the mobile web: One site should work for all). Using CSS Media Queries, you can send reformatted screen layouts to devices according to their display properties.

Leverage those accessibility synergies!

Another secret of developing with mobile devices in mind is to consider accessibility. If you think about it, having a small screen with no keyboard is somewhat like browsing with assistive technologies.

Many people on expensive data plans browse with images turned off, so sensible alternate text gets the content to them. Many older mobile devices have limited fonts and colours, so by not using those as the sole way of giving information makes your sites both accessible and available to mobile devices.

The W3C produced a useful cross-reference that rejoices in the title Relationship between Mobile Web Best Practices (MWBP) and Web Content Accessibility Guidelines (WCAG) which explains this in more detail.

Further resources

Opera 10

Today saw the first major release Opera since I’ve worked there, when Opera released version 10. As Molly says,

Opera 10 marks a new time for our browser, with its sexy new UI, cherry-red restyled “O” logo, standards support including many advanced features not found elsewhere, and improved developer tools. Not only that, but to coin a silly Carpenter’s song…”we’ve only just begun.”

What is particularly exciting for me is the amount of features it offers for the consumer. (There’s lots for developers, like Web Fonts, increased standards support and an enhanced Opera Dragonfly debugging tool.)

Opera has always had a reputation of being a browser for the “power user” as it’s so customisable, but that can often be off-putting for non-geeky customers (I’m thinking of my Dad here).

So Opera 10 adds spell-checking and auto-updates, as well as a much sleeker user interface in which you can move the tabs where you want them by hovering over the tabs, right clicking and choosing “Tab bar placement” (see my 45 second amateur YouTube tutorial).

Speed dial is now easily customisable (before you had to edit a config file—never much fun for a user) and you can add a background image too.

These make all the pre-existing features (sessions, mouse gestures, excellent keyboard support) all the more usable to the mass market.

One feature outshines all the others, though, for people using Opera 10 desktop outside of the industrialised world (or in crowded WiFi hotspots), and that is Opera Turbo. This speeds up browsing dramatically over slow connections, by compressing images —on the assumption that mostly you want to read the content rather than look at the pictures; if picture quality is important, you just turn Turbo off. (This works on slow connections, when compressing the images is faster than sending them down a slow line. On broadband, it’s faster to send them down the line than it is to compress them on a proxy.)

I’m proud to see this release, which strives to bring an excellent browsing experience to all, regardless of geography or infrastructure.

But enough seriousness. Check out this fun video about Norwegians’ love for compression and flat-packing:

Meffys, @media, standards.next

Corblimey what a week and no mistake guv. (Sorry, still getting the last Lahndahn molecules out of my system.)

The Meffys

Firstly, on Tuesday, I attended a formal event on behalf of Opera as our Opera Mini mobile web browser was up for Best Mobile Application at the Mobile Entertainment Forum’s Meffys awards. I’m not really a suit-and-tie business dinner type person, but duty called so I went along in my wedding-and-funeral suit for the onerous task of drinking free mojitos while listening to the host Hardeep Singh Kohli. (Lots of people said they found him too abrasive, but I thought he was a good choice.)

Lo and behold – we won! Feeling very proud and, forgetting my acceptance speech that our PR types had prepared, I clambered onto the stage and made an impromptu thankyou speech which would have the PR team having palpitations were it recorded anywhere, did a quick video interview for a journalist and took the coveted award home back for a couple of relaxed tie-less beers with David Storey and Chris Mills in the hotel bar.

@media

At media was primarily a great gathering of the clans—I thought that the line up was playing it safe (entirely understandable in the current climate). I [particularly enjoyed persuading 30 people away from some poncey overpriced South Bank bistro in favour of a Waterloo greasy spoon where they stayed open especially to serve us snake and pygmy pie with beans and chips and a pint of lager for under a tenner.

The best speech for me was Robin Christopherson’s, in which he discussed ARIA and CAPTCHA as well as phone accessibility. I made an unscheduled appearance on stage as the HTML 5 cowboy during Molly’s presentation and donated the backless faux-leather chaps to Chris Wilson of Microsoft who’s the co-chair of the W3C’s HTML 5 working group. He said that he would pass them onto Ian Hickson. I hope that they do the rounds of HTML 5 movers-and-shakers.

Standards.next

On Saturday the first standards.next informal emerging tech bootcamp took place. I was delighted how it went, having co-organised it with Henny Swan. We cajoled a stellar line-up of speakers to sit in a friendly (but very hot and sticky) atmosphere and really get under the skin of HTML 5. I humbly thank every one of them.

Me

I over-ran on time without finishing my slides, discussing some myths that are causing unnecessary FUD and doing a basic demo of markup for a blog.

Remy Sharp

Remy demoed the state of play with the new JavaScript APIs. You can check out his HTML 5 JavaScript APIs slides and try his HTML 5 JavaScript demoes, or watch the HTML JavaScript: video of his presentation.

Dean Edwards

For the first half of Dean Edwards’ HTML5.js talk, most people couldn’t grasp the magnitude of what they were seeing. Dean was showing his new JavaScript library that plugs the holes in browsers’ HTML 5 implementations. If a browser does do something natively, ther library does nothing; otherwise it fills that gap—so now you can have Web Forms with all browsers, canvas in IE. As a bonus, it’s all keyboard accessible, everything looks like native UI controls and it even inherits the native Windows themes. I’m looking forward to helping beta test this baby.

Martin Kliehm

Martin showed several demoes of the new canvas element that blew my mind. I’d rather assumed that it was just for wiggly graphics and maybe on-the-fly graphing but Martin showed some combinations of canvas interacting with video (because once everything is in the browser rather than plugins, they can all talk to each other).

There is real potential for new interaction models for people with learning disabilities, older people and kids.

Steve Faulkner

Steve discussed the accessibility issues of the HTML 5 spec and its relationship with ARIA. I came away from Steve and Martins’ talks convinced that the biggest barrier will be the lack of real support for canvas accessibility and commend Steve for fighting this in the Working Group. I shall be standing with him in future.

I want to thank all the speakers who volunteered to share their knowledge, passion and expertise with us, and thanks to all who attended, and interacted with all the speakers to help us firm up our knowledge.

Although there were some problems (heat, pillars in the way), the event went exactly as Henny and I hoped: a relaxed pub (£1.95 a pint of bitter and you can take your own sandwiches in!), short focussed speeches of 30 minutes so speakers don’t feel the need to pad and a genuinely interested crowd who participated rather than passively absorbed the information. This lady is an excellent example:

Stephanie (?) have a riveting time at standards.next

HTML 5 Doctor

I plugged it at @media and standards.next (and forgot to give out the moo cards), and we’ve launched the bare bones of it today – HTML 5 Doctor (named in homage to an early Zeldman feature called “Ask Dr. Web”).

High Standards t-shirts

If you got a freebie High Standards t-shirt from us at standards.next, please post a picture of you wearing it to Flickr and tag it highstandards, because I want to remember how lovely you are.