Mobile Empathy Challenge: Edit posts with embeds

My posts often have embedded tweets and YouTube videos. Conversations start on Twitter and then make their way into blog posts, where the tweets are cited. These days, a whole lot of journalism and advocacy features embedded tweets.

Here’s a sample of what my posts with embeds and videos looks like in the iOS app.

IMG_3885

Newlines have been stripped. This is an uneditable, run-on mess. I don’t even try to edit this for fear of messing something up. The iOS app is not a valid option for editing the kind of posts I write.

Unfortunately, neither is Calypso in mobile Safari. When a video is present, the text overflows the viewport. (Notice also the blank space below the title.)

IMG_3883

If I pinch to zoom all the text into view, I get this.

IMG_3884

This overflow and zooming is caused by embedded videos.

IMG_3886

The video overflow is not the only frustration. The Twitter embeds do a jittering resize dance that interferes with scrolling and cursor placement. I’m too tired to do a screencast, so here’s a static shot of two tweets that exhibit the behavior.

IMG_3887

Most of my posts contain embedded tweets. I think that is fairly typical of self-advocates bringing social media discussions into their posts. Many of my posts contain a related video or two from other self-advocates. Between embedded tweets and videos, I cannot edit my posts on my phone with either the iOS app or Calypso. I have to get out my laptop. I’m disabled, in chronic pain, and spend much of my time in bed. My phone is my primary device. I use my laptop only when I have to, which seems to be whenever I want to publish or edit posts on wordpress.com. Many of my posts are living documents that I continually update. I cannot update them from my phone using either the app or the web.

Other problems with editing on the mobile web (some of which apply to desktop too):

  • The editor toolbar is not pinned
  • Sometimes embeds load as blank placeholders.
  • Embeds cause reflow as the load, stomping vertical scroll postion and cursor postition.
  • Scroll bleed in settings menu.
  • Scroll bleed in preview.
  • The author selector doesn’t dismiss with outside taps.
  • Info bubbles in the settings sidebar sometimes run offscreen.
  • Jittery embed reflow when switching from HTML back to Visual.
  • Losing vscroll and cursor position when toggling settings.
  • Settings opening scrolled down to the bottom.

#editor, #embed-reflow, #embeds, #mobile, #scroll-bleed

Session notes: Instagram widget auth flow, editor flow, embed reflow, list flow, vscroll

Notes from my past couple weeks-ish of sessions.

Instagram widget auth flow

So I tried Cmd+click to open auth in a new window. After completing instagram auth in the new window, I was redirected here.

The widget is not added in this new session.

I added it in this new session and hit the same auth blocker.

I went back to the original session. It is not authorized. I Save & Publish and then reload the customizer, still blocked at auth.

I couldn’t find a workaround.

Editor layout after AYS

After triggering AYS

Content area disappeared

I think this happened while typing.

The only thing in the console was

Cropped embed

Switching to HTML and back to visual fixed it.

Like, video overlap

Undo reflow

#undo-reflow after hitting Cmd+z.

Editor flow

The familiar frustrations of:

  • embed reflow
  • undo reflow
  • vscroll loss when an embed is selected and you click another embed
  • having to switch to the html editor to move embeds
  • waiting for embeds to load every time I re-enter a post
  • reflow, reflow, reflow

Idle editor wish: Outline of headers for easy jumping around. I use this a lot in Ulysses.

Lists of links

Today’s frustration: Links losing their href on paste, last mentioned here.

https://test.wordpress.com/2016/11/10/session-notes-back-buttons-hidden-sites-touch-image-flow-notifications-site-switching-flow-keyboard-flow-media-section-desktop-first/

Issue opened:

https://github.com/Automattic/wp-calypso/issues/10669

Also, the inline link toolbar gets in the way when rearranging lists of links. Whenever I work with lists of links, these two bugs/behaviors make for #frustrated.

Back button vscroll respect

Audit back buttons for vscroll respect. Losing vscroll kills browsing flows. For example, I prefer wp-admin themes flow to Calypso themes flow. Calypso loses your vscroll place when you return from the theme details page to /design. This makes for awkward theme browsing flow. wp-admin remembers your place in the /themes list as you navigate in and out of theme details.

wp-admin uses a modal for theme details, which flows much better for me. It respects vscroll.

Scrolling /posts/

I’ve had trouble with scrolling /posts/ several times today. Posts stop loading into infinite scroll. Sometimes the loading placeholder gets stuck showing. The screen becomes inured to clicks. Chrome gets CPU happy.

Embed reflow

I spent lots of time in the editor today, waiting for embed reflow. Embed reflow is the #frustrated. I work tweets into my posts, a not at all uncommon thing.

When I paste a tweet into a post with several embeds, reflow dances my vscroll. I lose my place and can’t remember what I was doing. Over and over.

Alt text flow

Wishing I could add alt text from an image modal. Make alt text available to drag-and-drop image flow. I encounter this lack all the time when writing about disability. Lamenting the lack of an image modal right now as I work on…

The Segregation of Special

#accessibility

https://github.com/Automattic/wp-calypso/issues/307

Blockquotes and embeds

Adding stuff after embeds is frustrating, particularly if there is a blockquote nearby. My attempts at creating a new line between embed and block quote get block quoted.

Editor flow

Today’s editor flow harshers:

  • Editor unsaved changes #ays
  • #undo-reflow
  • #embed-reflow
  • links losing href on paste
  • inline link toolbar getting in the way of list editing
  • can’t blockquote lists without using html editor

Wishing I could toggle embed expansion so I can edit my posts without all of this reflow grief. Reflow and vscroll loss every time I Cmd+z or paste in another embed makes me wish Ulysses would hurry up and release editing of published WP posts.

Posts at the top disappear when I scroll back up

If I don’t touch anything, they’ll wink back in after 30-ish seconds.

Moving embeds

To move an embed, I:

  • flip to HTML
  • scan tag soup
  • cut the embed link
  • flip to visual
  • paste the link (If I past while in HTML, the embed won’t unfurl.)

List Soup

The bug where links lose their href when cut and paste pushes me to the html editor, where this greets me.

Working with embeds

I want to get at the underlying link so I can visit it and copy it.

An inline embed toolbar? An embed modal?

Sometimes embeds don’t load

Embeds can be slow to load in. Sometimes they don’t load at all. The links for the embeds don’t show, giving the appearance of vanished content.

After reload.

Remember size of notifications comment box

Wishing the comment box remembered the size I set with the drag handle.

In the comment box, ping backs display with “Reply to” followed by a link that is partially offscreen. The link is followed by an ellipsis, which makes me think the link has been truncated, although that’s not the case here.

#auth-flow, #editor, #embeds, #session-notes