Customizer: Browse, Install, Preview Themes on Mobile

I tested the patch proposed on #37661 on Windows Phone 10 with the Edge browser. Here’s a visual record of that experience:

The biggest potential fixes I found were to show a loading indicator in the filters (next to the theme count button in the header?) when a new filter is loading, and to scroll the themes container to the top whenever a new section is opened or a search/filter is changed (which should be happening, but isn’t).

I should also note that since it is impossible to reorder images in galleries with Chrome on laptops that support touch, see #31652, I had to go to the text editor to fix one that jumped out of order when creating this post.

#customize, #customizer, #edge, #phone, #shiny-updates, #visual-record, #windows-phone

Editor, Media: Inline image toolbar obscured by selection, copy edit toolbar, iOS

Taping an image to bring up the inline toolbar results in a selection box around the image and the cut-copy-paste toolbar popping up. Depending on where you tap, the image toolbar can be unusably obscured. Tapping through to the buttons doesn’t always work. Editing posts that contain images is very frustrating on iOS devices. I often accidentally insert individual images into posts instead of galleries thanks to the media modal defaulting to individual insertion. Removing twenty images from content while dealing with the inline image bar is joyless.

Contrast with Android, which is well behaved.

 

#android, #editor, #images, #inline-image-toolbar, #inline-toolbar, #ios, #media, #phablet, #phone

Customizer, Preview: Visual survey of customizer device preview

Screenshots from my testing sessions for #31195 and #35875.

Macnchrome, sidebar expanded

Macnchrome, sidebar collapsed

Macnfirefox, sidebar expanded

Macnfirefox, sidebar collapsed

 

Tablets and phones don’t have device preview.

iPad Air

iPhone 6+

iPhone 5

Nexus 5

#31195, #35875, #android, #chrome, #customize, #customizer, #desktop, #ios, #macos, #phablet, #phone, #preview, #safari, #visual-survey

Comments: Comment bubble enhancements for accessibility and usability (#32152)

#comments, #desktop, #list-tables, #phone

Toolbar flow: Delete a post, Create and chain edit a post, iPhone 6+

Here are a couple of toolbar flow vizrecs I had laying around. These were done with 4.3 alpha, before the Customize icon landed in the toolbar.

Delete a post. Exercises Edit and Home in the toolbar.

Create a post and then chain edit it. Exercises + and Edit in the toolbar. Uses View Post in the publish/save notices to link from back to front, rather than the toolbar.

#32947, #4-3, #beta, #editor, #ios, #phone, #toolbar, #web

Toolbar Visual Survey, 4.3-alpha-33003, iPhone 5

For #32678. 4.3-alpha-33003. Single site install. Logged in as an Administrator.

#32678, #4-3, #beta, #ios, #phone, #toolbar, #visual-survey, #web

Multisite Video Flows (iPhone 5s)

Add a new user to a site when the user does not currently exist as a network user (a few elements overrun width):

Add a new user to a site when the user does exist as a network user (a few elements overrun width):

Install, enable, and then activate a theme for a single site on the network (an url overruns width):

Install a theme and enable it for use on a network (an url overruns width):

Install and then activate a plugin for use on a single site on the network (a few elements overrun width):

Install and then network activate a plugin (a few elements overrun width):

Setup multisite from scratch in a subdirectory configuration (skipped)

Setup multisite from scratch in a subdomain configuration (skipped)

Create a new site on the network (looks good no issues!:):

Upgrade WordPress, including the network upgrade (skipped)

Update a plugin (looks good no issues!:):

https://cloudup.com/cSV0lJhdcFM

Update a theme (theme list overruns width):

https://cloudup.com/cPXCnVXdmXe

Edit the domain/path for an existing site on the network (looks good no issues!:):

https://cloudup.com/cAFhraatXap

Bonus: user list (all kinds of bad):

https://cloudup.com/cF2irq9fqwP

#multisite, #phone

Advancing the cursor through input fields on iOS

On iOS devices, I can’t advance the cursor through text that lies beyond the bounds of the Title input. The cursor stops advancing through text once it hits the left or right border of the input field. This causes me to abandon my mobile session and pick up editing when I get to a laptop. Mobile abandonment of edit flow is not good.

This happens on all my iOS devices. Android looks good. We could use an audit of all input fields for iOS.

 

cursor sometimes breaks out of the box

 

I can’t cursor left

 

Can’t cursor right

 

#boxed-input-scrolling, #editor, #input-scrolling, #ios, #mobile-abandonment, #phone, #safari, #web

Menus (admin) with Windows Phone on 4.2

  • WordPress 4.2.2
  • Old menus admin screen (to be compared with Menu Customizer)
  • Windows Phone 8.1, IE11 Mobile (only browser allowed on this device)
  • Testing on an actual site whose menu I actually needed to make a couple edits to… because why not 🙂

#4-2, #customize, #customizer, #flow-comparison, #menus, #mobile, #phone, #visual-comparison, #winphone