Update of Content Editing experience.
For new updates of the Frontend editing experience development check:
Customizing TinyMCE to make it even more user friendly. Having most used buttons at the top level and visible.
Styling inside TinyMCE.
Extra functions inside the right fixed content block area.
Widgets areas used on page top right.
On the side there could be a fixed area for adding content blocks. At the bottom of this area there could be a publish button.
As the page gets longer the fixed area moves with the scroll bars. In Dreamweaver CS 6 at the bottom right is an area where the user can click the mobile, Ipad’ish or desktop icon to check various screen sizes. I added it in here as well to the bottom middle area.
I have also added in a Grid view beside the Styling area one begins in. Grid view is where one can move all blocks around. Moving blocks automatically also creates columns or one can also use the column icon in the top area (not seen in the image). One can click a block in Grid view and add styling directly to a block. Nest box blocks etc.
Here is a trac ticket for WordPress: https://core.trac.wordpress.org/ticket/24067
Here is Josh Lobes test site: https://joshlobe.com/tinymce4/
Ubernaut posted about doing away with the distinction between editing the front end and back end.
Avryl made a page with mockups and a video showing some of his ideas.
He also made a Git Hub project page: https://gist.github.com/Avryl/6333070
My comment on his video:
I’ll add some comments along the way to what I see in the video.
Hovering over an editable area something should show that it is editable. Perhaps a box around the text. Clicking editable area an edit bar should show up with edits that fit for the item or box selected. For text some of the options would be font (drop down to show various font types representing what they actually look like using their name), size, style, heading, color, background etc.
Clicking a box the edges could be dragged left/right or up/down. Add curves to the box, background color, shadow, border (and thickness, image for border, border style, color etc.)
Adding image (border, margins, padding, text wrap, popup, link to etc)
Responsive. Resizing page clicking boxes to refine how they should react to a resizing page.
A very nice beginning! I look forward to the next version..:)
The below comment I made is in relation to ubernaut posting mockups on his web site:
Thinking out loud about the Frontend editing process….
The first thing one sees is the default theme front page. A box up in the right corner to login. The user logs in. The dashboard bar shows at the top. Since it is the first login a link below the login box is seen: “tour the interface.” User clicks and a short video is seen.
– How to select a theme from the front end. Perhaps a link all the way to the right of the Dashboard top bar with the name of “Choose Theme”. Click the link and see a drop down of small thumbnails and at the bottom of the drop down a see additional themes option. As the user moves the cursor over the thumbnails they are automatically bigger to the side of the drop down showing 2-3 fairly lage screenshots with some key info below the screenshots. The user selects a theme and the front end automatically adjusts to show the theme selected.
– Hover over elements on the page an outline is seen and one can click inside and an edit bar is seen.
– Drag elements around to replace.
– Turn on grid to align elements.
– Click directly on an menu link to move to the page.
– At the top Dashboard bar click the +New (OR use the Template button next to it to use an existing saved page) to create a post/page/category.
A blank page is seen and blocks are seen on the right side (depending on if it is a post/page/category). Main elements – Header, menu, sidebar, content, footer.
Elements (widgets, shortcodes, block elements all in one).
One drags the various elements to create the page. Click the save button top right to the left of the login area. Beside it is the copy page button on hover it will say save as template.
Create a new page – top right – save, copy, use template button.
A lot of these things can be very similar on the backend and frontend.