Tablets and Touch UIs in WordPress 3.4

Welcome!

The WordPress coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. development team builds WordPress! Follow this site for general updates, status reports, and the occasional code debate. There’s lots of ways to contribute:

Found a bugbug A bug is an error or unexpected result. Performance improvements, code optimization, and are considered enhancements, not defects. After feature freeze, only bugs are dealt with, with regressions (adverse changes from the previous version) being the highest priority.? Create a ticket in the bug tracker.

Want to contribute? Get started quickly with tickets marked as good first bugs for new contributors or join a bug scrub. There’s more on the reports page, like patches needing testing, and on feature projects page.

Other questions? Here is a detailed handbook for contributors, complete with tutorials.

We’ve had some terrific progress made in the realm of supporting touch interfaces and tablet UIs for 3.4!

The main areas that we’ve focused on for this release were improving touch support in the user interface, resolving incompatibilities for our target devices, and enhancing the UIUI User interface’s methods for adapting to more restrictive screen sizes.

Target Devices

Our target devices for the 3.4 release were the iPad and the Kindle Fire. The iPad stands as an obvious choice, and the Kindle Fire’s steep climb to over 50% of market share amongst Android tablet devices justifies its presence as well.

Improving Touch Support

For touch-supportive devices, we’ve added a fantastic jQuery extension to the coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress., jQuery UI Touch Punch. This has enabled ‘drag and drop’ support on mobile devices. Whether editing a post, customizing the dashboard, or modifying a Nav Menu, you’re now able to easily reposition items on a touch interface to your heart’s content, just as you would on your desktop browser.

Caveat: Windows Phone Devices

Windows Phone 7/7.5 phones are wonderful devices. Unfortunately, when Microsoft based the phone’s web browser off IE9, they didn’t add in any touch support. As such, there is no way to detect touch events in the browser — `ontouchstart` doesn’t exist. Dragging support does not work on Windows Phone 7/7.5 devices, but should on Windows 8 tablets and phones when released.

Resolving Incompatibilities

This boiled down primarily to the Kindle Fire. The version of WebKit used in the Kindle Fire’s native Silk browser doesn’t support the contentEditable attribute, so TinyMCE wouldn’t work! To accomodate for this, we added an override to test for the version of webkit that the client is using, and just disable the visual editor if the browser doesn’t support it. This patch should also cross-apply to older versions of iOSiOS The operating system used on iPhones and iPads. and Android as well.

UI Enhancements

In Ticketticket Created for both bug reports and feature development on the bug tracker. #20015, we migrated the dashboard and write screen columns to use primarily @media queries, rather than the JSJS JavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors. that had previously been used. This should provide some performance optimizations in mobile browsers.

The Tableteer team for 3.4 was comprised of Andrew Ozz, Zach Abernathy, and George Stephanis.

#android, #mobile, #target-devices, #ui-enhancements

Isaac Keyet 6:27 pm on May 3, 2012

Great work guys, looking forward to everyone having this. Tablets are here to stay!
- Kiefer Southerland 8:23 pm on May 3, 2012
  
  I guess tablets are okay and im definitely mark this as a go
donnacha 6:47 pm on May 3, 2012

I am grateful that work is being done on touch UIUI User interface, it’s definitely the future, but … the Kindle Fire at 50% of Android tablets? Seriously?

It is disturbing to hear that scarce dev resources are been allocated based upon comScore figures, they are an industry joke and base their numbers upon a highly suspect interpretation of private page view data. Their MO has always been to drive forward their main business, which is essentially an extortionate racket against websites, by generating sensational headlines and anything Apple-related is a sure-fire hit.

IDC today released their figures, based upon actual shipments: iPad is 68% of the entire worldwide market of 17.4m tablets, the Fire is 4% (around 15% of Android tablets) and is soundly beaten by Samsung in 2nd place.

http://www.idc.com/getdoc.jsp?containerId=prUS23466712

Again, I am grateful that this work is being done but you should wait until at least six months before anointing any new tablet as a sort of standard, especially as Amazon have not even revealed how many post-Christmas returns they received.

It is also worth noting that the upcoming Fire 2 is rumoured to be radically different machine i.e. the first Fire was a rush job to catch the Christmas market, the 2 may follow a very different design philosophy and that would put your UI decisions back to square one.

I’ve never seen a Fire or Samsung tablet in real life but I presume that Samsung are running a less proprietary and, therefore, more representative version of Android than Amazon, why not target that instead?
- George Stephanis 7:58 pm on May 3, 2012
  
  While we had the Fire and iPad as our ‘target’ devices, please don’t misunderstand this as stating that they are the only devices that we paid any attention to.
  
  All our work is based on coding web standards — building for the future of the web so that the work we do today is maintainable and will look just as good (if not better) tomorrow. When we say that something is a ‘target device’ it just means that these are the devices that we’re making the conscious decision to purchase and test thoroughly on. I can tell you that we’ve also done a great deal of testing in a number of other Android tablets, BlackBerry Playbook tablets, Android Phones, and Windows Phone 7/7.5 devices.
  
  The reason for the Fire being a target device was that it was more likely to need a bit of special attention to get it up to working order. The native browser that comes bundled with stock Android works beautifully, but the bundled Amazon Silk browser has some problems, to put it graciously, primarily due to running an outdated version of WebKit as the rendering engine. There’s also a lot of missing CSS3 properties. If anyone would like to contact Amazon, one of the people to speak with would be Jon Jenkins ( twitter: @jonjenk ) — he does a lot of work on their Silk browser.
  
  Regarding your IDC citation, I’d be very intrigued to learn what devices they are including in their tablet calculations — the significant bump for Samsung may very well be due to the release of the Galaxy Note, which could have been more aptly lumped in with tablets than phones.
  - donnacha 8:31 pm on May 3, 2012
    
    Thanks for clarifying what was meant by ‘target’ George, I took the other meaning but, yes, I can see that you would need to target extra attention towards the quirks of the Fire and the unique nature of Silk, even if it is not the leading Android tablet.
    
    I’m not actually sure what product lines were included in the Samsung numbers, I’m only going on the press release that I linked to, but I agree that the term “tablet” should only really include screens 7″ and up, the Note at 5.3″ strikes me as more of an overgrown phone than a tablet.
    
    The distinction between comScore and more reputable operations such as IDC is, though, still important to bear in mind when you are making decisions. One conducts closed box surveys heavily skewed towards people dumb enough to waste their time on incentivised surveys, the other does it’s best to jigsaw together an accurate reflection of reality based upon available shipping data.
    - George Stephanis 8:37 pm on May 3, 2012
      
      Just for reference, the target devices were decided at some point before January 11th, when they were announced at the weekly dev chat.
Emil Uzelac 7:04 pm on May 3, 2012

Great job indeed, fantastic stuff. Keep up the good work.
Dan 9:24 pm on May 3, 2012

just disable the visual editor if the browser doesn’t support it

Big win, I’ve worked with a lot of users that were frustrated that the editor didn’t work on their older Android devices. Nice job!
Pingback: WordPress trunk news #13
Pingback: Tips Tuesday and 53 Google Search Changes for April
Pingback: 10 Things You Need to Know About WordPress 3.4 — Technosailor.com
Pingback: 10 Things You Need to Know About WordPress 3.4 |
Pingback: Outside the /wp-admin box: Mullenweg on a radically simplified WordPress for mobile | WPCandy

Comments are closed.

Welcome!

Communication

Target Devices

Improving Touch Support

Caveat: Windows Phone Devices

Resolving Incompatibilities

UI Enhancements

Share this: