I continue to be incredibly pleased with my decision to migrate this site to Craft CMS all those years ago. The authoring experience that Craft provides remains second-to-none (in my opinion) and the flexibility it provides has been ideally suited for a wide variety of secondary projects, microsites, and useful functionality on theAdhocracy – and I still feel like I'm barely scraping the surface.
Most recently, I've been slowly experimenting with a new back-end for the Journal section of this site. My aim is to provide myself with both a greater degree of granularity in terms of the memories I can capture, and to do so in a way that would be easier to play with in the future. Right now, Journal pages are little more than regular articles with a specific categorisation in the database, which can make me feel like I need to write a coherent narrative each time I want to add a new entry. That worked at first, but it's become restrictive over time, forcing me to just ignore events or occasions which don't neatly fit that format.
Instead, I want to be able to record aspects of my life that are typically "social" concepts, such as check-ins, event attendance, photo uploads, or quick "what I'm doing now" notes. I'm also hoping to use this new-and-improved Journal to replace some parts of social media use, like my beer tasting log over on Instagram, as well as expand my ability to record personal information I might find useful later, such as whether I enjoyed a particular dish at a restaurant.
What I want to be able to do is pull my phone out at any moment, jot down some quick details about something I'm doing, and save it to the Journal. That requires some new authoring flows, which is what I've been experimenting with in Craft for the last 5-6 months.
Using Craft whilst Out and About
For the most part, I've been pleasantly surprised with using Craft from a mobile phone. It initially could feel a little clunky, but actually, since beginning this experiment, a couple of notable new ideas have come to the CMS. The first is finer control of the layout for a new entry, baked directly into the CMS itself, meaning it's now fairly trivial to create tabbed navigation, divide sections, and generally refine the author flow for a particular entry type to be as intuitive and uncluttered as possible.
The second (and most recent) is the redesign of "slideouts", screens within screens that are used for creating or editing child entries. These are particularly useful for Categories and Tags, two concepts I lean on heavily to make quick categorisation of posts as easy as possible. Slideouts solved a lot of my initial gripes with mobile layout on the platform, particularly where I was using third-party field types such as Maps, which rarely had truly responsive layout designs. Now, they seem to work neatly, and previously hidden functionality, like slug editing, is intuitively accessed without cluttering the screen.
I'm also not sure when the dropdown on "New Entry" buttons was introduced, but being able to quickly specify a new entry type is much appreciated, and something I initially struggled with[1].
The Frustrations
Speaking of cluttered screens 😏, Craft is a little bloated these days. For the most part, I still think the Admin UI is pretty clean, clear, and concise, but, particularly on mobile, there are quite a few features I can happily live without. Some of these are just a bit baffling, like the secondary sidebar dropdown on Entry lists, whereas others make more sense for full-fat desktop authoring, such as the granular preview/draft controls the CMS now has. Entry lists can also feel particularly squished on smaller viewports, with tables that have far too many columns, making rows extremely fat, scrolling hard, and text difficult to read. Yes, Craft lets you completely customise the columns you see for each Entry type, but I have these set up to be as useful for desktop writing as possible; it's a shame there isn't any way of setting a mobile layout as well (or, better still, just have Craft auto-collapse all but the first column into a subgrid that can be hidden/expanded if needed).
On top of which, I personally choose to leave the Yii Debugger toolbar turned on at all times. Whilst it can be easily switched on/off from the admin panel these days, I just prefer the quick access if an error does occur. Unfortunately, its placement and "floated" state mean that it can obscure certain action buttons, most notably the "submit" on slideouts. I've found in most cases you can use keyboard submit, even on Android, to work around this, but in a few places this isn't possible (largely due to poor accessibility implementation on third-party field types, it must be said)[2].
Navigation can also be a little finicky. By default, Craft will populate the sidebar with very high-level links, but once you have a few entry types, with various subtypes, getting to the right subsection or entry that you want is often 4 or more menus away. I guess this is partially why that secondary dropdown navigation comes from, but given the sidebar is a tap away from any screen it's a shame this isn't more elegantly solved (though, read on).
Finally, the biggest elephant in the room is offline support. This is unfortunately one problem that I just don't see Craft ever "solving". In theory, I'm sure someone much smarter than I could develop a PWA version of the CMS that would store a cached version of entry lists, recent posts, settings etc. and then sync any changes made whilst offline as soon as a connection is established. But I can also understand why this system would be a nightmare to create, requiring very elegant merge control and caching, and likely wouldn't scale well to teams, which I feel is a majority of Craft's paying customers. It would be completely amazing for personal use-cases like mine, but it's not something I'm realistic on ever seeing supported.
The Solutions
Offline support aside, however, I have found Craft's small-yet-mighty third-party plugin ecosystem more than up to the task of solving many of my other grievances 👏👏👏
First up, sidebar navigation can be much improved through the Control Panel Nav plugin. This allows me to segment my sidebar into more meaningful clusters, making it easier on smaller screens to see what I'm looking for, and (crucially) lets me add new links to the sidebar for just about anything.
I combine this with the Sidebar Entry Types plugin; it does cost a small amount to purchase a license, but it's a minimal fee so I was happy to chip in. That plugin gives me a piece of functionality I'm actually baffled Craft doesn't support out of the box: entry type splitting and navigation. Quite a few of my entry types have subtypes, but natively you can only view a list of all entries within a given type; there's no way to sort or filter based on sub-type. This plugin adds these features in, with the added bonus of meaning there are now control panel pages for each specific subtype. That means you can add sidebar links to go directly to a filtered list – super useful for Journal types, which now include 6 separate sub-types and often have multiple similarly named entries.
With both working in conjunction I now have a very useful sidebar, with pretty much all pages I want to access at most two taps away, so that problem has been neatly solved.
The Yii toolbar issue was a more worrisome one, but again I found a third-party solution (albeit a slightly out-of-the-box one). Best yet, that solution also allowed me to declutter some of the UIs around the admin panel as well. What is this wondrous box of tricks? Why, the Control Panel CSS plugin, of course 😁 It's a very simple feature that gives you a control panel page for modifying a bespoke CSS stylesheet that is injected into every CP page. With that, I'm able to do the following:
- Set the Yii toolbar to
z-index: 1(rather than the slightly absurd100000it's currently at 😒) which puts it above the page, but below slideouts and popups; - Remove various buttons that I don't use from entry lists and new entry forms via
display: none; - Simplify entry tables, again by hiding various columns and headers;
- Rearrange entry list header blocks to take up less vertical space, whilst providing easier access to "New Entry" and search functionality;
- Make a few other small padding or margin tweaks that I feel just improve the general look.
Honestly, CSS grid has my eternal gratitude for making manipulating UIs so incredibly simple these days, letting me completely rearrange certain sections on smaller viewports in a handful of lines of CSS 👨🍳💋
If you're interested in what exact changes I've made, here's my custom stylesheet; just install the plugin and copy/paste it to see for yourself:
🔄 Update (05/09/23): Upgrading to Craft 4+ has resulted in some significant changes to the DOM layout and CSS selectors available, as well as introducing some extra clutter functionality along the way. The below has been updated to my current stylesheet; if you want the original one optimised for Craft 3 check the footnotes[3]:
/* Mobile UX */
@media only screen and (max-width: 600px) {
/** Entry Lists */
/* Make top section of entries a grid */
#header {
display: grid;
grid-template-columns: 1fr 1fr;
padding: 0.75rem !important;
}
#toolbar {
grid-column: 1 / -1;
}
#toolbar > div:first-of-type,
#toolbar > button:last-of-type {
display: none;
}
/* Place "new entry" button in a more useful position */
#action-buttons {
grid-column: 2;
grid-row: 1;
place-self: end;
}
/* Remove unnecessary dropdown navigation (just use sidebar instead) */
#sidebar-toggle-container {
display: none;
}
/* Tidy up table layout: hides excess columns, removes thead */
table.data thead {
display: none;
}
table.data tbody tr {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
table.data tbody tr th {
grid-column: 1 / -1;
padding: 0.5rem !important;
}
table.data tbody tr td {
display: none;
}
table.data tbody tr:nth-of-type(2n) {
background-color: #f8f8f8;
}
table.data tbody tr span.status {
height: 0.5em;
width: 0.5em;
}
/* Reduce height of floating footer */
.has-debug-toolbar #footer.stuck {
padding-bottom: var(--s);
}
#export-container {
display: none;
}
/** New Entry Page */
/* Remove unnecessary buttons from header */
#action-buttons > .preview-btn-container,
.context-btngroup,
#action-buttons > button.formsubmit {
display: none;
}
/* Align buttons */
#action-buttons {
place-content: end;
}
}
/* Fix for Yii Toolbar getting in the way of slideouts/popups */
#yii-debug-toolbar {
z-index: 1;
}
🔄 Update (25/08/21): Added some additional styles to ensure that "create entry" buttons on new post forms aren't accidentally hidden and align with the right edge of the page.
Closing Thoughts
Craft is still best experienced on a large screen, with a keyboard, but I've found using it as a mobile-first experience is far from horrible. I'd long held off on making these changes/experimenting with this functionality because I'd thought I would need to do the recording on a different app and somehow import into Craft, but I've been really pleased with how it's working so far.
Best of all, the very functionality I praise in Craft for desktop authoring experience makes it incredibly customisable for mobile-first entry types as well, meaning that with a little trial and error I've wound up with some excellent workflows. As a case in point, comparing my old Instagram-based beer log to the version with Craft that I've been trialling, I'm able to fully customise the form input to be exactly what I needed, have made tasting notes autocomplete Tags (so no more second-guessing how I phrased something in the past), and replicated all Instagram functionality (bar the actual image editing, which was never a necessary aspect of what I was doing), and it now takes 5 fewer menus/taps to do so. The data captured is more bespoke to my needs, more complete, more refined, and just more useful, and it's a faster UX – top marks!
I would love to see better support for offline authoring in the future (though, again, don't expect it), and the mobile UI could definitely use some love, but overall it's a surprisingly competent experience that I've begun to really enjoy.
