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 headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes.?) 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 iOSiOS The operating system used on iPhones and iPads. 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, sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme. 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 flowFlow Flow is the path of screens and interactions taken to accomplish a task. It’s an experience vector. Flow is also a feeling. It’s being unselfconscious and in the zone. Flow is what happens when difficulties are removed and you are freed to pursue an activity without forming intentions. You just do it.

Flow is the actual user experience, in many ways. If you like, you can think of flow as a really comprehensive set of user stories. When you think about user flow, you’re thinking about exactly how a user will perform the tasks allowed by your product.Flow and Context
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 pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party 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 multisiteMultisite Multisite is a WordPress feature which allows users to create a network of sites on a single WordPress installation. Available since WordPress version 3.0, Multisite is a continuation of WPMU or WordPress Multiuser project. WordPress MultiUser project was discontinued and its features were included into WordPress core.https://codex.wordpress.org/Create_A_Network. 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 iOSiOS The operating system used on iPhones and iPads. 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 abandonmentMobile abandonment Bugs that terminally block flow on mobile cause mobile abandonment. Users must do a huge context switch from mobile to desktop to resume flow, which usually means postponing an action until the next time a laptop is available.https://make.wordpress.org/test/glossary/#mobile-abandonment of edit flowFlow Flow is the path of screens and interactions taken to accomplish a task. It’s an experience vector. Flow is also a feeling. It’s being unselfconscious and in the zone. Flow is what happens when difficulties are removed and you are freed to pursue an activity without forming intentions. You just do it.

Flow is the actual user experience, in many ways. If you like, you can think of flow as a really comprehensive set of user stories. When you think about user flow, you’re thinking about exactly how a user will perform the tasks allowed by your product.Flow and Context
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 CustomizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings.)
  • 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