QuirksBlog - Mobile web dev
Part of Mobile.
This week I ran an eight-question survey of media query use, responsive web design fundamentals, and one viewport question. 1251 web developers reacted. This entry presents the results.
Most important conclusions:
- Nearly 50% of web developers (occasionally) use device-width and expect it to work the same as width. It doesn’t right now, but it will in the future.
- Many web developers are not aware that a cross-browser resolution check needs both the -webkit-device-pixel-ratio and the resolution media query.
- The most popular resolution query is “larger than 1.5;” a very welcome bit of sanity.
- ems in media queries are not used all that often — only 31% use it in more than 50% of their projects.
- 16% use more than five breakpoints in their responsive design.
Last week Luke Wroblewski published an important article in which he said that web developers practising responsive design rely too much on a device’s screen size to determine which device it is.
Currently I’m working on a media query test suite, and I’ve run into one of those weird things: the proper syntax of
Note that I’m only interested in the @media syntax. I cannot use the rest because I can’t fit it into my test suite.
Now that we have the iPad Mini, web designers waste no time in wanting to distinguish between it and the iPad 2. Tough luck.
Incidentally, it appears that native developers can distinguish between the two, making the playing field for the grand match between native and web unleveled (disleveled?). If you wish you can blame Apple.
That’s not what I want to write about, though. Instead, it’s about web developers’ expectations and physical units in the W3C spec.
In the past week I’ve done the viewport tests on the latest crop of devices, and things are definitely looking better. The visual viewport dimensions are now well-supported, and a consensus on position: fixed is in the making.
- On average, respondents used 3.5 libraries in the past year, and about 2 in more than 50% of their projects. (Of course the latter figure might mean they use one library in 50% of their projects, and another in the other 50%.)
- 95% used libraries, which means that 5% didn’t. That’s something, though not much.
- 59% could have done without a library in his last project. That’s not too bad, but it still means 41% could not.
- 42% sticks with his current libraries because learning to use a new one takes too much time.
- The most-used library is jQuery with 91%. Duh.
- Second-most used is Modernizr (58%), and then come underscore.js (33%) and backbone.js (30%).
- From 25-40% of the users of a library use it in at least 50% of their projects. For Modernizr, underscore.js, and especially jQuery this percentage is higher. For Zepto, Sencha Touch, and Raphael.js this percentage is considerably lower.
OK, there’s a budding consensus on how
position: fixed should work on mobile. Android WebKit and Chrome both do it, and in iOS6 Safari has dropped the weird iOS5 stuff and moved to a sensible solution.
Instead of explaining it in words, here’s a video. HTC One X, Android 4.0.3, Android WebKit default browser. Test page.
When I spoke at From the Front I was asked what I thought was the worst case of thoughtless copy/pasting I saw going on around the web. My answer: jQuery.
Yesterday Horace Dediu tweeted:
A browser is an infinitely flexible interface, but is it the best interface for everything? Apps allow experiments in new interaction models
The browser is not the most advanced interface there is. It’s too easy to build the wrong features into something as flexible as a browser, and once a badly-designed feature gains traction it’s impossible to get rid of it. (See HTML5 drag and drop.)
Three news items that have nothing to do with each other, except they caught my eye yesterday and today, and might be of interest to others, too.