Thursday, May 17th

WTFWG

Tim Kadlec does a great job at breaking down the process which has led to the recent community disappointment in the WHATWG over the srcset attribute.

What message does it send when developers try to contribute their time, energy and effort to help solve a problem only to have it so casually dismissed?

Wednesday, May 16th

Saturday, May 5th

Thursday, May 3rd

WebKit is the most popular mobile browser in the world. I alluded to this a bit in my article yesterday, but here are several reasons I think the chart above is misleading: The breakdown The first, most obvious, reaction I have is: The iPod Touch and the iPhone have the exact same browser. So already, “Mobile Safari” is the most popular browser in the world — My friend Hans was even kind enough to demonstrate. And what about Android? Android’s default browser has been notorious for not being quite as smooth as the iPhone’s, but generally, the two are kept quite consistent. In fact, even BlackBerry, since BB6, has used WebKit, and even that is pretty on par with the others. They all even use the same browser prefix, -webkit-. But then what about Opera? It sure seem fortunate that there’s only one version of Opera out there, except… Opera Mini As an organization, Opera has done a great job at blurring the line between Opera Mobile and Opera Mini. For those who don’t know, these are very different browsers (much more different than, say, those found in iOS, Android, and BlackBerry). I have yet to see a chart showing geographic and traffic breakdowns between the two with real world numbers, so some of this is speculation, but I imagine Opera Mini makes up the vast majority of Opera’s userbase. Look at it this way: The only places where Opera has maintained a significant amount of traffic is Africa (where it simply dominates the competition) and Asia. Opera Mini is the browser Opera installs on most feature phones, or, as I like to call them, “phone” phones. As Opera mentions, for many people, this is their only access to the internet. It uses a proxy system that basically creates an “image” of a website, server-side, sends that image down the wire, which is great, as it’s both faster and cheaper for feature phone users, especially on limited data plans. It is, essentially, the IE6 of the mobile web — A browser with an unfortunately high number of remaining users and a sadly minimal feature set. Opera Mini does not support: HTML5 Video, Audio, new form fields, drag and drop, Session history, app cache, geolocation, orientation (though feature phones are generally vertical), any local storage option, or, on the CSS side: border-image, any gradients, the content property, transitions, animations, transforms (2D or 3D), and most text controls like text-transform, text-align, and text-indent. Let’s not even get into what it supports in regard to interactive JavaScript. Interesting to note, that, if my theory is correct (“Mini” being more popular than “Mobile”), the prefix alias solution that they are recommending will only fix the CSS3 UX issues for the minority of their users. Tablets matter (a lot) The chart above also doesn’t take tablets into consideration. Now consider this comScore report from last year: In August 2011, iPads delivered 97.2 percent of all tablet traffic in the U.S. iPads have also begun to account for a higher share of Internet traffic than iPhones (46.8 percent vs. 42.6 percent of all iOS device traffic). In addition to the fact that over 97% of all tablet traffic is from the iPad, it’s important to note that it’s also higher than the iPhone when looking at iOS as a whole. You can practically just double the iPhone bar above. But WebKit isn’t a browser! And that’s not really crab in your maki roll. So what? It’s a rendering engine. It supports HTML5 and CSS3. Still, as noted above, it’s far more consistent in its capabilities and features, in all the different versions of all the different browsers it’s used in, than something like Opera Mini compared to Opera Mobile. Why is this important? The point is this: Don’t let people tell you where your values should be. Most developers reading this post don’t care about how their sites look on Netscape Navigator 4 or Internet Explorer 3, or even half of the “still active” browsers listed here. Lots of services and apps are even moving away from IE6 (which, according to NetStats has just about marketshare as Opera on the desktop). How do we deal with all these browsers? We don’t. We pick a subset which represents the majority of our users, and usually spend a little extra time making sure the page looks extra spiffy for the modern ones (especially the modern ones with lots of users and amazing features). For older, but sadly still relevant, browsers like IE7 and IE8, we make sure our pages aren’t “broken.” For everyone else, we cross our fingers and hope this “web standards” kinda works like it said on the box. This is how I treat Opera Mobile/Mini. I do my best to be a responsible developer. I always craft CSS with all the vendor prefixes (thanks Compass!), and I’m finally starting to get more and more into media queries. By no means do I think any browser should ever get a blank page or a “This browser is not supported” message. But does that mean I need to test in every single browser? No. Does this mean I should spend time optimizing my sites for feature phones, which are most popular in Africa and Asia, and the minority of my web traffic? No. Would it be a terrible idea to build a progressive horizontal carousel, for iOS and Android, when they make up over 98% of my mobile audience. Of course not. Work everywhere, absolutely — but don’t be afraid to go a step further for WebKit. It’s insanely powerful, fun to build with, and most likely represents a strong majority of your existing mobile web traffic.

WebKit is the most popular mobile browser in the world. I alluded to this a bit in my article yesterday, but here are several reasons I think the chart above is misleading:

The breakdown

The first, most obvious, reaction I have is: The iPod Touch and the iPhone have the exact same browser. So already, “Mobile Safari” is the most popular browser in the world — My friend Hans was even kind enough to demonstrate. And what about Android? Android’s default browser has been notorious for not being quite as smooth as the iPhone’s, but generally, the two are kept quite consistent. In fact, even BlackBerry, since BB6, has used WebKit, and even that is pretty on par with the others. They all even use the same browser prefix, -webkit-.

But then what about Opera? It sure seem fortunate that there’s only one version of Opera out there, except…

Read More

Wednesday, May 2nd

CSS layout gets smarter with calc()

Didn’t even know about this feature, but it’s brilliant. A quick idea of what you can do:

#bar {
  height: calc(10em + 3px); 
}

And regarding current support:

The calc() property for lengths is available now in Chrome 19 (Dev channel build) by use of the ‘-webkit-calc’ property, in Firefox since version 8 using the ‘-moz-calc’ property and in Internet Explorer since version 9 unprefixed.