Mobile/Open Web

	THIS PAGE IS A WORKING DRAFT
	The page may be difficult to navigate, and some information on its subject might be incomplete and/or evolving rapidly. If you have any questions or ideas, please add them as a new topic on the discussion page.

The Mobile Web must be opened, like the Desktop was. Evangelism is a key point of the plan to reach that goal, but not the only ones.

This page tries to list the different attacks points and to lead to more specification action plans to reach the goal.

Evangelism: reach non-conforming sites

See the more detailed plan.

Reach existing sites and ask/help them to fix them. We don't want only to stigmatize them but we want to help them fixing their sites.

• As Opera and MS said in the CSSWG: "but it doesn't scale" — which means it is worth mainly for big sites, the most difficult to reach.
• This will takes time with little success. We've seen with the Fx 10 2-digit version number evangelism. Sites almost never move before the problem is critical. Even with a precise diagnostic and an offer for help.

This means that this won't be sufficient by itself, but is worth to be conducted and we have to focus on important sites first. Consequence: we have to measure our success to devote adequate resource to this.

Allies

we want to promote the Open Mobile Web and not only a Gecko-Webkit mobile web. Our message should (and will) reflect this. Other mobile browser vendors have the same problems (Opera, Microsoft, ...). Can we work together?

Evangelize Web developers and their managers ("Stop the bleeding")

Web Developers must get accurate information about how to do a mobile web site that works on every browsers:

We need good practices

There are no ultimate good practices. We need to be pragmatic. Ideas of good-practice-related MDN articles:

• How to do proper UA sniffing for mobile sites?
• How not to forget a prefix?
• I'm using a prefixed property, what other prefix/polyfill do I need to add to keep the Web open?
• How to decide when to put an unprefixed CSS properties?
• Progressive Enhancement (and polyfills to reach them)

These good practice should be in references pages (on the MDN). Then we need to advertize them in conference, blogs, tweets, ...

We need to lead Web developers to tools that simplify the process of writing/testing

These tools will help them in producing Open-Web-friendly sites

• preprocessors (Sass, Less, ...)
• validators (CSSLint, ...)
• ... (Feel free to complete)

But reaching Web developers is not easy: they are busy and not all haunt the blogosophere or events

• we need small campaigns on specific subjects (to occupy almost permanently the blogosphere and social networks)
• we need big coordinated campaigns between vendors(?) (to reach Web dev that are not reading blogs, going to events, ...)

Web devs have managers

... and we should turn them into our allies. We should craft messages to convince the managers that asking for sites for 'iPhone' only is a lost of money (they could ask for all devices for the same amount of money)

Improve and provide tools

Provide tools and functionality that help authors find incompatibilities earlier ("Web Devs will take the easier path"):

Preprocessors

Check that SASS, Less, ... (Feel free to complete) do not have bugs.

CSSLint

Be sure that the entries are correct and up-to-date

Online tools

There are plenty online tools that generate prefixed and unprefixed syntax (for animations, transitions and especially gradients), we have to check them and reach their authors if there are bugs

JS un-prefixing tools

We should not recommend them (most of them are in O(n) of the CSS size at best, and degradation if network slow to load the script may lead to problems like FOUC or similar).

But as Web devs use them, we need to check that they do their job correctly! And reach their authors if needed

Automatic regression finders on different engines

there are companies offering that: we have to be sure we are tested) (Cloud Testing?)

Remote debugging

debugging and regression testing in an automated way?

Desktop testing

https://wiki.mozilla.org/Mobile/Desktop_Extension

New Tools

(feel free to list ideas)

Work at the CSS & HTML spec level

See detailed thoughts about the CSS part of the problem: [1]

Remove prefixes as soon as possible

"as they are shorter, there will be a bias to adopt them instead" — Tantek's opinion

We need to push what's possible to CR.

Be sure that useful CSS properties are all on the standard track

There are a some that are not:

• -webkit-scrolling-overflow: touch; looks new and not yet submitted. Looks to be praised by some articles: Happily, the very new -webkit-overflow-scrolling: touch property, which debuted in iOS 5, is also now available in Chrome for Android. It’s smooth and fast. (See http://www.sencha.com/blog/html5-scorecard-chrome-mobile-beta/ )
• ... (complete please!)

Drop prefixed ones once unprefixed

Convince other vendors to drop them once the unprefixed shipped (even only Google, it would be nice as it would create uncertainty again in using them). This uncertainty will force Web developers to maintain their sites and will favor simplicity (i.e. unprefix) over complexity.

Remove the need for UA sniffing

Web developers sniff UA for several reasons:

• To work-around bug in browsers. This is not a big problem as that means that they are already considering different engines
• To provide different HTML for mobile and desktop as they have different layouts. This is necessary in different cases:
  • First if we they have completely different Web sites. We should convinced them, that this is not necessary the right way to go: Progressive Enhancement (PE) is much more future-proof.
  • Second, they do this when the layout of the mobile and desktop can't be achieved with the same HTML. We should push the adoption of new CSS layouts (CSS3 Columns, FlexBox and perhaps Grids). This improved flexibility will reduce the need for UA Sniffing ([2], under Source Order)
  • To serve less big HTML images for the mobile than the desktop (no Media Queries for HTML, only for CSS!) ([3], under Media). We need to solve the <img> HTML problem (See HTML has an <img> problem):
    • The <img> tag has not the flexibility of the audio and video HTML elements that allows the client to choose the most adequate versions of the media.
    • A SVG image is blurry in Firefox if resized, defeating the opportunity to recommend to use SVG images where possible. (Bug 600207)

Technical changes on Firefox for Mobile

There are changes to Firefox for Mobile that can be done to facilitate its adoption. With a relevant market share, our stance towards the Open Web will be much easily heard (Market share is a mean not a goal per se, though it is always nice :-) )

• UA that gives the Mobile/Tablet information to the site.

This allows them to do adequate Mobile detection

• support for some webkit prefixed properties...

There are a lot of buzz today with the CSSWG discussing Mozilla intention to support some webkit-prefixed properties. Which leads to a lot of evangelization buzz.

• Fix bugs that prohibit the drop of UA sniffing (at least in some cases):
  • Bug 600207: SVG-as-image is fuzzy/pixelated when zoomed or printed, when we trigger the tiling codepath

Other

There are a lot of other small actions to be conducted:

• Some sites (like touch.facebook.com) are using lists of mobile UA (WURFL-> so we need to reach them)
• Fix on github (see Pre-fix the Web http://codepo8.github.com/prefix-the-web/ by Chris Heilmann)
• What about isitopenyet.com website with a number representing the amount of top-100 websites w/ a correct CSS ? (An automatisation of J. Jensen results?)
• ...