Tag Archives: phone

Nick Halsey 12:47 am on October 1, 2016
Tags: , , edge, phone, , , windows-phone   

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:

Open the 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., tap “change.”
Tap “see 10 themes.”
Scroll through the themes.
Tap a theme screenshot.
Tap the right arrow.
Tap the close icon.
Tap “FilterFilter Filters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output. themes.”
Tap “featured.”
Tap “See 15 themes.”
Should this have scrolled back to the top instead of starting down the page? Scroll to top.
Tap “Filter themes.”
Tap Favorites.
Tap the username input.
Enter username, tap get favorites.
Tap see 12 themes.
Tap filter themes.
Tap feature filter.
Scroll through list, tap on some features.
Tap see 294 themes.
Tap theme screenshot.
Tap install.
Installing… tap close icon.
Installed. Tap Filter themes.
Scroll up.
Tap search input.
Enter a search, tap see 7 themes.
Scroll.
Tap live preview.
Loading…
Tap preview.

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

Ryan Boren 4:08 pm on February 24, 2016
Tags: , , , inline-image-toolbar, , , , , 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

Ryan Boren 2:21 pm on February 24, 2016
Tags: 31195, 35875, , , , , , , , , 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

Helen Hou-Sandi 9:41 pm on July 10, 2015
Tags: , , , phone   

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

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

Ryan Boren 4:35 pm on July 1, 2015
Tags: 32947, , , , , 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

Ryan Boren 7:31 pm on June 30, 2015
Tags: , , , , phone, , ,   

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

Ben Hansen 7:30 pm on June 2, 2015
Tags: , phone   

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

Ryan Boren 8:11 pm on May 26, 2015
Tags: boxed-input-scrolling, , input-scrolling, , mobile-abandonment, 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

Nick Halsey 1:52 am on May 26, 2015
Tags: , , , , , , phone, , winphone   

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 🙂

Open site (logged in). Tap dashboard icon.
Tap Menus.
Menus page loads. The menu I want to edit is selected. Scroll down to the menu.
Trying to delete “Big Buddies”. Tap on it. Nothing Happens. Try zooming out.
Tap on the arrow for the item I want to delete.
After a delay, it opens. Tap remove.
The menu item is deleted. Now need to add a new item. Scroll up.
The item I need to add is a post. Tap posts.
Tab the checkbox for the item I want to add.
Tap add to menu.
Loading indicator, then stops. Scroll down.
Item is at the bottom of the menu. While scrolling, hierarchy and positioning is messed up for several items at the bottom of the menu. Need to drag it up.
Try dragging the new item up. It needs to be a sub-item of “PSWC”, which is much higher up the screen, just out of view. It lands three items up. Repeatedly try dragging it up higher with various techniques, no luck. Look around for another way to move items. Try tapping the arrow icon again.
Tap “up one”.
Item moves up, continue tapping up one several more times.
More up one. Eventually get to top and move “under PSWC”.
Scroll back down, need to cleanup broken hierarchy from trying to scroll earlier. Tap arrow icon.
Tap “under Environmental”.
Tap arrow for the Geotech item.
Tap out from under environmental
Tap to close the menu items (2 taps).
Look for save button. Scroll up, then down all the way.
Tap save menu.
Loading…
Tap home icon.
Tap visit site.
Site loads. Tap menu icon.
Item was successfully remove. Scroll down.
Item successfully added, messed up items successfully restored to correct positions.

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