The location of Add Media on phones

Core post-new.php puts Add Media above the editor and Preview, Save, and Publish below the editor. This is a desktop design that requires a lot of scrolling on mobile. Scroll up to Add Media. Scroll down to Preview and Publish. None of the buttons stay on screen persistently. There’s no joy here.

The My Sites editor on wordpress.com also puts Add Media above the editor and Preview, Save, and Publish below the editor in a semi-fixed bar. This bar often goes offscreen for me. Although not nearly as bad as post-new.php, this requires up and down scrolling.

Press This puts Add Media, Save, Preview, and Publish all in a fixed bar at the bottom. It is truly fixed and stays visible even when the browser’s bottom bar displays.

The iOS app puts add media in the editor bar attached to the keyboard. This requires tapping into the content area before adding an image. Tapping the image icon with the editor unfocused is a noop. This tripped me up often, at first. When I’m single image blogging, I’m not adding text content and don’t usually tap into the editor. I still occasionally get tripped, but I’ve gotten used to it and have come to appreciate having add media available even when the keyboard is up.

#app, #editor, #ios, #media, #mobile, #phablet

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

Publishing a video to a wordpress.com blog with the iOS app 5.2.0.20150518bebf680, iPhone 6+

The 5.2 iOS app beta features a new media picker. Here’s a run through the picker uploading a single video to a wordpress.com hosted blog with an iPhone 6+.

#app, #ios, #media, #mobile, #phablet, #publish, #video

Publish a captioned gallery, iPhone 6+, Portrait

WP 4.2-RC3-32249 and iOS 8.3.

Bulleted flow:

  • Start on logged in front page.
  • Tap + in the toolbar.
  • Tap Post.
  • Tap title input.
  • Type title in fly up keyboard.
  • Tap Done to dismiss the keyboard. Page updates with permalink info. [7]
  • Tap Add Media
  • Opens in Media lib [2]. The dismiss button is missing [1]. Tap Upload Files.
  • The dismiss button is back. Tap Select Files.
  • Tap Irie Plank Image Feed.
  • Tap images to select.
  • Tap Done.
  • After a pause where nothing seems to be happening, upload progress is shown. The resulting screen is a known mess [4].
  • Tap Insert Media to show the flow selector dropdown. [8]
  • Tap Create Gallery.
  • Tap Create a new gallery.
  • Tap a caption field.
  • Type in caption text.
  • Tap another caption field.
  • Type in caption text.
  • Repeat for each image. Curse at bad scrolling, keyboard juggling, and focus panning that burn a lot of taps. [3]
  • Tap Insert Gallery.
  • Arrive back at the editor with the keyboard up and obscuring the content. At a glance, I can’t confirm the gallery was added correctly. Tap Done to dismiss the keyboard.
  • The inserted gallery is now evident. A big cursor blinks along the left side of the gallery.
  • Scroll down to spot check the captions.
  • Scroll down some more to find Preview [5].
  • Tap Preview.
  • A new browser window opens to the post page.
  • Post looks good. Tap the browser page switcher thingy in the bottom right.
  • Find the edit post page from the list of pages. This can be daunting if you have a lot of things open, particularly with multiple WP pages [6].
  • Tap the edit post page once you find it. Don’t dismiss the preview window.
  • You’re back in the edit window. Make some edits. Tap Preview. Nothing happens. Apparently nothing anyway. If you left the preview window open it is being reloaded out of site whenever you click Preview [6]. Sometimes clicking Preview in this state causes a cursor glitch in the region of the publish box disclosure triangle.
  • If the keyboard is in your way after all of that, tap Done to dismiss.
  • Here goes. Tap Publish.
  • Misaligned loading indicator spins. Editor reloads with a post published notification at the top.
  • Tap View post in the notification.
  • Post looks good. Tap the site title to get back to the front page.

Notes:

[1] The dismiss button is often missing from the media modal. This seems to be particular to the Media Library view. Dismiss never disappears if you stay on Upload Files. Bringing the modal up more than once may be needed to trigger this. Moving from the Media Library view to the Upload Files view restores the dismiss button, but tapping the dismiss button does nothing but hide the dismiss button again.

[2] Media modal scrolling in media lib view often gets stuck. The page beneath the modal seems to be hijacking swipes. I’ve developed the habit of giving a 15 second-ish cooldown when swiping gets stuck. The next swipe after the cooldown typical goes to the modal and normal scrolling is restored for awhile.

[3] Scrolling while editing captions is very awkward. The cursor often detaches from the caption field and seemingly joins the editor lying beneath the modal. The cursor isn’t always in the caption field. Especially with the last row of images, the cursor often shows below the caption field. Typing places the text in correctly in the caption field but the cursor is outside the field. The jittery focus pan that happens when a caption is tapped into is disconcerting. Overall, captioning is irksome and difficult.

[4] The image flow effort will eventually remove that awkward sidebar from mobile. Should we pursue an interim solution that removes the sidebar from the production media modal since image flow is a couple release out?

[5] I often tap View Post just below the title when I want to preview. View Post shows the last published changes, however, not your in editor revisions. Preview is the button I really want but it is farther from the editor than View Post and often gets forgotten.

[6] Mobile should never open things in new browser windows. This is a desktop bias that falls apart on mobile. Modal preview would be better on mobile.

[7] My permalink has the slug flow-loop-2 instead of flow-loop because I trashed an earlier draft due to interface frustrations. My frustrated bail out is later met with slug consequences. Ugh.

[8] The flow selector dropdown doesn’t dismiss with outside taps.

#captioned-galleries, #captions, #forked-flow, #galleries, #ios, #media, #mobile, #modal, #new-tab-window, #phablet, #post-flow, #preview, #publish, #vizrec, #web

Adding a widget via the customizer, iPad Air, landscape

4.2-beta4-32130, iOS 8.3, and Jetpack 3.4.1

#customize, #customizer, #mobile, #tablet, #widgets

Android app 2FA, Nexus 5

3.9-rc-2

#android, #app, #apps, #media, #mobile

Remove a widget with the customizer, iPhone 6+

The goal is to remove a widget from the hamburger accessed sidebar menu in Twenty Fifteen.

Notes:

When in preview mode, the stacked nav of widgets is pretty subtle. There is no transition other than < changing to X.

I accidentally move widgets when swiping to scroll all the time. I’ve taken to very carefully swiping along the edges to avoid the widget headers, similar to what I have to do in the post editor. I notice there’s a Reorder button at the bottom of the widgets panel. Should widget rearrangement be confined to it?

 

4.2-beta4-31998

#4-2, #customize, #customizer, #ios, #mobile, #phablet, #web, #widgets

Image rotation and editing, mobile vs. desktop

Images uploaded from my phone via Press This or post-new.php seem oriented as I wish when viewed from a phone.

When viewed from desktop, they look like this.

After rotating them in WP’s editor, they show correctly in the image details modal.

But they still show incorrectly in the editor and on the front page.

This happens to me often. I’ve learned not to trust images uploaded from mobile or the image editor.

4.2-beta4-31998 on Macnchrome and iPhone 6+.

#4-2, #desktop, #image-editor, #image-rotation, #ios, #macos, #media, #mobile, #phablet, #sideways

Previewing and switching themes in the customizer, iPhone 6+

4.2-beta3-31985

Switch back to Twenty Fifteen, this time using the Theme Details flow.

#4-2, #customize, #customizer, #mobile, #theme-switcher

Single image post with preview, Press This, iPhone 6+

4.2-beta3-31975

#4-2, #mobile, #press-this