Press This on Desktop

Mirroring the initial iOS design concept by @marestad I tried to give a first try on how it will look on desktop.


Not much different in a sense, but throwing in a few things…

  • Header Background: the header can’t clearly replicate iOS, so while keeping the same structure, I went borrowing the wp-admin background setting. I’m not sure if it’s technically possible, but if it is, it will also help recognizing which site I’m posting to.
  • Header Options: just an icon, that is to allow for adding multiple blogs. This is something that of course will not be in in the case it’s the “Press This” autogenerated by the blog, it’s more a plugin thing if we release this as a standalone pluggable tool too (this is up to discussion).
  • Title, Embed, Body, same as the iOS mockup.
  • Auto-resize: I don’t think this is possible, but if it is, we should auto-resize the window while the user is typing.
  • Post Options: to allow for scheduling, tagging and so on. I haven’t mocked this up yet, but I think it should just add stuff on the page, so it becomes like an “extended” post edit view, instead of being an entirely different page, and that setting is likely remembered.
  • Cancel, Save, Publish: should be quite clear. 😉

I have in mind the idea that most of the work should be done in the middle “Embed” block. If that works, the rest becomes a breeze, almost a 1-click affair. If that requires editing, then it’s more complex.

There’s one use-case that isn’t mapped to any technical backend that imho needs special care for its usage: when you select content on a page, it should not just insert the block as a blockquote in the post body, but also add ideally a reference to the author, title and link, something like:

Lorem ipsum gaium
– Author Name, <a href="...">Post Name</a>

Note that Facebook does this well: notice that when you share something the pre-compiled title, thumb and body are… editable on click. 😉