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