Embed mockups

Started styling for embed UI

So far, just an oEmbed iFramed object and a video:

I need to research native WP video/audo/playlist UI before I mess with that. (we should probably use that for uploaded media if it’s nice on touch devices.

#desktop-mockups

Media galleries mockups

I decided to avoid trying to replicate how the gallery could look when published and focused on making interacting with it a breeze on any device (hopefully). This means I opted for the familiar same-sized square grid accompanied with a label and options.

How it could look on larger viewports:

And on smaller viewports (vertical in this case):

After selecting an image:

I’d love to hear your thoughts on these interactions. Thanks!

#desktop-mockups

Desktop Modal

• Added minimal WYSIWYG
• Added modal toggle button (needs a bit more iteration)
• One image selected for featured/first image with left/right buttons to cycle through other images

#desktop-mockups

Press This Desktop

I’ve taken into account ideas from @folletto and @stephdau in these latest set of mockups.

Post after pressing an website

* The images are arranged and sized by priority using meta-data.
* The interface colors and buttons are pulled from WordPress defaults.

Post with images selected

* After selecting images, they are inserted where the cursor was last or at the top.

Image dragging

If feasible, it would be nice to have drag and drop usage as well to add and move media around. I think it would be a nice fairly discoverable way to easily move images around on both desktop and mobile.

The paragraphs shift to show where the image will go.

Image Added

On release (if dragged) or insert, the image is dropped in full-width.

Empty post

An empty post to show the placeholders

A pressed quote

* This is still using markup.
* Strong and emphasis are shown.

#desktop-mockups

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:

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

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

#desktop-mockups