Content Author Toolbar

Problem

When a user is logged into the CMS, they needed to accomplish a number of tasks from the CMS admin page preview without costing them time or losing context. Here are some of these tasks:

  • View the page they are editing as end users see it
  • View one of the 22 localized variants of the page they are editing as the end users see it
  • Preview the same page as it is on production
  • Send the current page for translation for one or more languages
  • Quickly edit supporting assets in the CMS like images, add widgets, etc. to be used on the page they are editing (in a new tab)
  • Upload files to the Box CDN, then add them to the page

The CMS did not support extending the existing sidebar, therefore, we had to add this functionality ourselves. In addition to this, we needed to allow for provision of any future tasks from the same CMS admin page preview. Also to consider, there are three server environments that developers and/or content authors will be using, which meant the domain and API translation calls needed to be dynamic.

Initial Prototype

Prototype

The user experience suffered to say the least, and this is when just using the out-of-the-box CMS Admin UI. For instance, any time I walked through creating, editing, and publishing a page, I found myself needing functionality like previewing the page in a new tab outside of the CMS admin preview or viewing the localized content of a page.

It is all about context, it was clear to me and others using the CMS that we lost track of what we were trying to do as soon as we had to leave the CMS admin page preview to do something.

In an effort to setup a go to place for, I came up with a content author’s toolbar concept. It could be extended as we needed it for launching dialog boxes, triggering REST API calls, and so on. The only screen area it occupied when collapsed was a small icon’s worth of space on the right side of the page.

A framework and defined approach for integrating the much needed content author functionality while being platform agnostic.

Completed Toolbar

Final Toolbar

Through the CMS build project, many of the software engineers needed to provide content authors with a button, link, or dialog box to trigger server side calls to APIs or other endpoints within the CMS. They quickly adopted the content author’s toolbar as a logical place. Each of the additions went through several iterations after API changes and contextual inquiries with end users.

The result is a user interface for content authors to quickly carry out daily tasks. They are able to send the page for translation, preview the page in a new tab as an end user can see it, preview the localized page to check different regional sites (such as .de, .co.jp, and 20 others), preview the page on production, QA the meta tags, as well as having several quick reference links at their disposal.

Final Thoughts

As a developer, engineer, and end user on this project, I quickly realized how many of the CMS or applications I was accustomed to using provided a framework for which to extend. When the platform does not provide a framework to build on, look for a different one. That being said, a framework should also provide a preferred approach that keeps development from going down a dangerous path that may require major refactoring or a complete overhaul. Somewhere between opinionated and sensible.

Final content author’s toolbar within the Page Preview mode in the CMS

 

Smartling Connector for sending the page for translation

 

Initial Prototype

See the Pen CA Toolbar by Pete DeGraw (@pdegraw) on CodePen.dark

 

Lazy Form UI

I have been filling out lots of forms lately and keep finding some very bad form UI. There have been some really fantastic, easy to use forms as well. Rest assured, the Internet is improving! (I think)

Much has been written on why good forms work best, how they work, etc. The bottom line is, use of common form UI is extremely useful in filling out forms. In 2016 there are ridiculous amounts of blog posts, UI libraries and frameworks, and research done to determine what is considered best practice. As a developer, even if you cannot change the style, maybe you can change the HTML or visa versa.

Below are several examples of the kind of thing I’ve been finding.

Cramped Labels

bad form - cramped
This happened because the column to the left had a huge textarea element that was cramping these labels. I read this as, “Company Name Company…” then I stopped and just saw a bunch of Company’s, some fields on the right, and no clue what they were even asking for.

Issues

  • The column with these input fields was not wide enough
  • There is no margin-top or margin-bottom set on the input element.

Possible Solutions

  • Add some margin for when the label and input collapse due to the width of the column. margin-bottom: 10px; will work
  • Increase the width to an appropriate size, don’t allow it to collapse beyond a certain point
  • Always test what happens when the window or columns collapse too much

See the Pen Bad Form – Cramped Fields by pdegraw (@pdegraw) on CodePen.dark

Tiny, Cramped Buttons

bad form - tiny cramped buttons
The developer here must have applied some reset or normalize CSS but then didn’t add any UI styling.
Issues

  • They are too small to click on easily
  • They are too close to each other

Possible Solutions

  • Add padding
  • Add some margin to separate the buttons

See the Pen Bad Form – Tiny Buttons by pdegraw (@pdegraw) on CodePen.dark

Poor Layout

bad form - bad ui
After filling out this “Filter By” field, I promptly clicked the “Clear All” button anticipating it was the “Search” or submit button. Instead of submitting the form, I cleared all the form fields. This was pretty annoying. I know the user should be reading the form elements and not just clicking on stuff. However, this could have been prevented.
Issues

  • The search or submit button is an icon only, there is no “button”, difficult to click on while using a mobile device
  • The “x” is right next to the search “button”, also difficult on a mobile device
  • The “Clear All” button is where many search buttons are placed

Possible Solutions

  • Add a submit button
  • Style the “Clear All” button differently, I like using a link for clearing a form
  • Add some margin and padding to the icons in the input

See the Pen Bad Form – Form UI by pdegraw (@pdegraw) on CodePen.dark

Blank themes for WordPress

In my never ending search for a decent blank WordPress theme, I ran across this theme by Digging Into WordPress. BLANK WordPress Theme

As I’ve found, most of the starter themes have too much going on, too many libraries or frameworks pulled in, and then the PHP templates are like three folders deep. While the BLANK theme did not have support for a menu or CSS for image alignment classes (easy enough to add), it was incredibly simple, easy to use, and proved to be a great base to build from.

In a recent Shop Talk Show Rapidfire podcast, Chris Coyier mentioned that he doesn’t use Bootstrap or Foundation, just writes the code himself. It was refreshing to hear others are not using frameworks to build everything.

The result of using the simple BLANK theme, one super fast website! I added enough SASS variables to allow an even better starting point for my next project.