designsimply 9:19 pm on May 25, 2015
Tags: customize ( 18 ), customizer ( 14 ), iOS ( 64 ), menus ( 6 ), phone

Testing Menus in the Customizer

WordPress 4.3-alpha-32600
Menu Customizer 0.4-20150525 (a coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. feature-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 candidate)
Safari iOSiOS The operating system used on iPhones and iPads. 8.3 on iPhone 6

Observations

Note: this feature is still in development so there are some known issues (which I’m sure I’ve hit here).

Blocker: tapping “+ Add Link” in a new menu resulted in a phantom UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing. (looks like it doesn’t move over into view like it should?).
The “+ Add a Menu” button is hard to spot on mobile if you have several menus saved already.
The “+ Add a Menu” button is sits really close to the bottom menu bar in Safari on iOS. Some space below it could help make it a bigger tap target.
After tapping the “Reorder” link, I was surprised I could still tap and hold to drag menu items.
Scrolling is really hard on iOS, especially with the menu items being so wide on a small device screen.

Start in the dashboard.

Land at the customizer menu panel after tapping Tap menu icon > Appearance > Customize.

Land at 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. menu panel after tapping Tap menu icon > Appearance > Customize.

Try tapping the arrow to the right of Menus and accidentally tap the 4-square-boxes icon which opens the advanced menu properties. This surprised me.

Tap Menu Locations.

Change the Primary Menu to “Shorter Menu” and tap “Done.”

From here, tried tapping “+ Add a Menu” and the “+” turned into an “x” but couldn’t see the form at fist because it was still off screen below the button.

Scroll down and then can see a form to enter a new menu name.

This is what I saw after creating a menu, but I think I tapped something I shouldn’t have and the blank keyboard seems like an iOS bug, so I tap “Done” and try again.

Tap “+ Add Links” button.

Got stuck here. The cursor is present but the UI is invisible (very odd).

Next, try editing an existing menu. Tap “Testing Menu” and it opens very low on the screen so I have to scroll down.

Tap “Pages” since it’s a duplicate. Tap “x Remove” and it gets rid of the menu item.

Some of the items/arrows have a darker outline, but I’m not sure why. They seem stuck. (This could be user error because I tapped around a bunch.)

Tap “Shorter Menu.”

Tap “Reorder.”

Tap indent icon to make “About” a submenu.

Open a menu with lots more items in it and scroll down to the “Reorder” link.

Tap “Reorder” and notice that I can still drag and drop while in this mode.

#customize, #customizer, #ios, #menus, #phone

Sofia Rose 12:19 am on May 14, 2015
Tags: iPhone 6 ( 2 ), multisite ( 7 ), phone

Multisite Flows (iPhone 6+)

Install 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.

Not relevant on iPhone

Adding a new site for existing user as admin

: Start on My Sites (Invalid save button)

: Open the My Sites menu

: Open the Network Admin submenu

: Click Sites

: Page refreshes showing all sites

: Click add new

: Page refreshes showing add site form

: iPhone keyboard shows when filling form

: Ajax user search when filling in Admin Email

: Click Add Site

: Page refreshes with confirmation message & the options to edit the site/visit its dashboard

Adding a new site for new user

Same as the previous 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

, except there’s no results from the ajax email field.

Install & enable, a theme for the entire network.

: Starting from the dashboard

: Click the burger icon to open the main menu

: Click themes to open the submenu

: Click add new

: Page reloads listing themes. Click on a theme image. (upload button at the top is no use on IOS)

: A modal opens showing the image/description & an barely visible preview of the theme.

: Click Install

: Click Network Activate

: Page reloads & shows a vague success message

Install & enable, a theme for a single site on the network.

Follow steps 1-7 from previous flow

: Click return to the theme installer

: Installed themes have a banner telling you there installed

: Click the burger icon

: Click Sites to open submenu

: Click all sites

: Page reloads listing all sites. Click edit.

: Click the themes tab

: Click enable on the theme you want to enable

: Page refreshes showing a vague success message

Install & network 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.

: Start on the dashboard

: Click on the burger to open the 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..

: Click Plugins to reveal the submenu. Click Add New.

: Click install now on the plugin you wish to install (Upload button at the top is redundant on IOS))

: Click Network Activate

: Page reloads with vague success message

Install & activate a plugin for a single site on the network.

Follow steps 1-4 from previous flow.

: Click My Sites

: Select the site you wish to activate the plugin on

: Select Dashboard

: Page reloads on the WordPress Dashboard

: Click the burger icon to reveal the sidebar

: Select plugins

: Click Activate on the plugin you wish to activate

: Vague success message

Edit the path for an existing site.

: Start on the dashboard

: Click the burger to open the sidebar

: Click sites

: Click all sites

: Click edit on the site you wish to alter

: Page reloads showing current settings

: Select the field you wish to edit brings up IOS keyboard (spellcheck tries to capitalize domain names)

: Scroll down

: Click save

: Success message

Edit the domain for an existing site.

Same as previous flow, just edit the other field in 7

: WordPress adds trailing / automatically if omited.

#iphone-6, #multisite, #phone

Ryan Boren 4:54 pm on March 5, 2015
Tags: iOS ( 64 ), login ( 5 ), login-registration ( 5 ), phone, scroll-bleed ( 6 ), sessions, threshold-friction, web ( 44 )

Scroll bleed through in the session expired log in modal, iPhone 5

Another case of bad scrolling behind a modal.

Previously:

https://make.wordpress.org/test/2015/02/13/scroll-bleed-through-and-scroll-position-loss-view-plugin-details-iphone-6/

https://make.wordpress.org/test/2014/10/05/scrolling-beneath-modals-nexus-5-iphone-5-4-1-alpha-20141002/

https://core.trac.wordpress.org/ticket/31381 (Needs review and commit)

https://core.trac.wordpress.org/ticket/29909 (fixed)

#ios, #login, #login-registration, #phone, #scroll-bleed, #sessions, #threshold-friction, #web

Ryan Boren 5:50 pm on December 12, 2014
Tags: android ( 15 ), login ( 5 ), login-registration ( 5 ), phone, web ( 44 )

Log in, input autocomplete, and great big links, Nexus 5

The WordPress logo 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. is a great, big link. When dismissing things like autocomplete suggestions, I often tap away into the header. The resulting redirect is bewildering and unexpected. With the keyboard up, half of the view of the log in page is a link directing away from log in.

#android, #login, #login-registration, #phone, #web

Ryan Boren 2:13 pm on October 5, 2014
Tags: android ( 15 ), iOS ( 64 ), links ( 4 ), media ( 30 ), modal ( 14 ), phone, scroll-bleed ( 6 ), web ( 44 )

Scrolling beneath modals, Nexus 5, iPhone 5, 4.1-alpha-20141002

The media modal, attachment details modal, and link modal all have scrolling problems on mobile/touch devices. The page beneath them scrolls, resulting in stacked scrolling and a bad experience.

Nexus 5 Media Modal: