Jason Santa Maria recently shared some thoughts about pacing content, and my developer brain couldn’t help but think about how I’d go about building the examples he talked about.
The one fool-proof way to achieve heavily art-directed layouts like those is to write the HTML by hand. The problem is that content managers are not always developers, and the code can get complex pretty quickly. That’s why we use content management systems—to give content managers easier and more powerful control over content.
There’s a constant tension between that type of longform, art-directed content and content management systems, though. It’s tough to wrangle such unique layouts and styles into a standardized CMS that scales over time.
For a while, the best we could do was a series of custom fields and a big WYSIWYG editor for the body copy. While great for content entry, WYSIWYG editors lack the control developers need to output the semantic and clean HTML that make the great experiences and beautiful layouts we’re tasked with building.
This tension leaves developers like myself looking for different ways to manage content. My attention recently has been focused on Craft, a new CMS that is just over a year old.
Craft’s solution for longform content is the Matrix field. With Matrix, developers have the flexibility to provide custom fields to be used for content entry, and can write custom templates (using Twig, in Craft’s case) to be used to render that content.
A Matrix field is made up of blocks, and each block type is made up of fields—anything from text inputs, to rich text, dropdowns, images, tables, and more. Here’s what a typical Matrix setup looks like:
Instead of fighting with a WYSIWYG editor, content managers choose block types to add to the longform content area, fill out the provided fields, and the content is rendered beautifully using the handcrafted HTML written by developers. I use the Matrix field to drive longform content on my own site, and you can see how much flexibility it gives me to create interesting layouts filled with images with captions, quotes with citations, and more.
To pull back the curtain a bit, here’s how my blog post Unsung Success is entered into the Matrix field:
Three block types are used in the post seen above—an image block, a quote block, and a text block. Notice that the text block is using a WYSIWYG editor for text formatting—they’re still good for some things!
The Matrix field is endlessly customizable, and provides the level of flexibility, control, and power that is needed to achieve well-paced, art-directed longform content like the examples Jason shared. This is a huge first step beyond WYSIWYG editors and custom fields, and as we see more beautifully designed longform pieces, our tools will only get better.
This is a huge first step beyond WYSIWYG editors and custom fields…
Your definition of custom fields seems much different than my definition of custom fields. This doesn’t look like a step at all.
Well you can do the same with the overall popular WordPress since a long time – and that’s what we’re using to build beautiful pages that are easy to update and handle. Scaling is also a factor which can be achieved with custom fields, page templates and a bit of coding.
Great overview of Craft and Matrix, Anthony.
The only downside I see to the “story builder” strategy is that a single post gets broken into pieces that are heavily dependent on the CMS for rendering and output, and this can have long-term consequences for portability and flexibility. Has that concern come up in your work?
For example, does it take clients time to understand that they to insert an image into an existing text block, they have to create an additional text block, cut and paste some of the content, then drag a new image block between them? Likewise, I sometimes wonder if offloading complexity to the CMS has the potential to cause problems when we need to extract, syndicate, or move the content four or fives years later.
To be clear, I think Craft is amazing and a huge step forward when it comes to clients controlling content within a designed and constrained system. And it’s obviously too much to expect most clients to be writing pure Markdown into a single text area (especially when it comes to to embedding media). But perhaps there are costs to the Craft/Matrix approach that will only show up further down the road.
If you haven’t yet, take a look at ACF’s “Flexible Content Field”, it’s what we’ve been using to achieve what we call Content Blocks. Same concept and clients love it 🙂
Remarkably similar to http://experiencehq.net/blog/craft-with-markdown-and-matrix.
I’m curious what Russell Heimlich’s definition of Custom Fields are and how they differ from this. Custom Fields in most CMS are, for the most part, the same concept; though implemented differently. (is UI-ed a word?)
Frank Herget, yes, WP has custom fields though, it was an after thought and was bolted on to it’s UI. By the way, I’ve used WP on many occasion as well so, I’m not starting a pissing contest here; just stating the facts as I see them.
ACF is great addition to WP though, again, bolted on. The main difference in CMS like Craft (and EE for that matter) is that Custom Fields weren’t an after thought and were integrated/integral parts of said content management systems right from the start.
If you guys like WP and your clients like their WP, great! Keep using it.
With that said, give Craft a “real” try as well when you have time. You might just find it’s a different way of looking at web development and also find you actually like developing a different way then you were use to in the past.
It will, however, take an open mind and a shift of the mind at the same time, I’m sure, coming from WP.
And I know devs often times get religious about their chosen CMS so, I don’t expect you to stray and that’s okay too.
Cheers!
P.s. if you guys are just “re-skinning” themes then please give me back my 5 minutes I just wasted on this comment because Craft really doesn’t apply to you.
I’ve been using Craft for awhile now and the flexibility of the platform is great. Clients love the ‘live-preview’ and really don’t have a problem using Markdown and the image blocks that I have setup within the matrix fields.
To James Muspratt’s point – Craft’s flexibility could help if you ever wanted to move the content away. Outputting every entry into JSON, for example, is extremely easy and you can just import that in the new CMS.
This both is and isn’t directly related, but it’s something that’s been on my mind for quite a while now. And yes, I realise that a lot of what we produce (or enable others to produce) is ephemera, but since this article is about long-form content, it brings the issue to the fore.
Ever read an old book? I don’t mean older than you, or even older than me. I mean something my grandfather’s grandfather might have called an old book. It’s hard, even once you’ve made allowances for a much more formal tone (in general) and sentences that outlast the Energizer bunny. The typographic conventions are different, the abbreviations are different, snippets of classical Latin and Greek are bandied about as if every schoolboy should know them in the original (and it’s likely they did), words that now seem as English as “English” were new imports and italicized, which will make you read them as stressed on the first pass… unless you get a recent annotated version, there’s a lot of work involved.
We now disseminate a huge amount of literature that’s meant to have some longevity electronically, using markup language that may not quite be SGML, but that has enough depth and richness to be much, much more than presentational. Yet we still talk about WYSIWYG (or quasi-WYSIWYG) as if it were a good thing. Will people fifty or a hundred or more years down the road know why that word or phrase is italicized, or just that it’s italicized?
Yes, I understand that the average blogger isn’t going to invest the time and effort required to make their latest conspiracy theory rant future-proof, but when we’re talking about curated, significant content, why are we so invested in making things quicker and easier for the writer (and cutting out the typesetter in the process) at the expense of the information? Perhaps we shouldn’t expect writers to be conversant with all of the intricacies of markup, but that typesetter’s job really ought to become a markup editor/tech’s job. The future deserves more than we got from the past, if for no other reason than that it is now possible and really pretty easy.
I think this touches on a long-standing problem that Desktop Publishing introduced: Authors want to art-direct their content on a quantum level, so they expect the WYSIWYG functionality because they think they’re laying out a magazine article. Unfortunately the web runs on markup and good design/good markup are at odds.
Shameless self-promotion: I blogged about this problem a few years ago (forgive the layout, it hasn’t been redesigned in about 8 years): http://www.alexburr.com/desktop-publishing-the-anti-web/
Personally I like Umbraco as a CMS, it takes a similar approach (it’s a Content Management system, let’s build a system that actually manages content) but I realize it’s MS tech so that won’t get it any points with the ALA community…
Cool, though Drupal7+ has this in core & D6 and earlier had it as a part of most builds through modules like CCK, Imagefield, Node Reference, and the like. Some great modules in D7 like paragraphs and entity construction kit make things even more sophisticated, as do the View Modes in terms of outputting the content. D8 will use Twig for the theme layer.
Thank you for the article. I disagree with some of your points.
You’re making it sound like Craft is the “first” to do this. But this has been possible with WordPress (not in core, but with Advanced Custom Fields), PyroCMS, and countless other CMSs.
This also doesn’t really solve anything you couldn’t do in a WYSIWYG already with, say, shortcodes or template tags. This is literally just creating more “WYSIWYG” editors on a page. Look at your screenshot; I count 3.
You also say this is beyond custom fields, but that’s all these are. These are just custom fields.
Relying on these content blocks in a CMS has numerous downsides as well, none of which are highlighted in the article. Although the benefits sometimes outweigh those.
Great example of the power of matrix blocks Anthony! Matrix blocks are really just one aspect to the power and flexibility of Craft. The possibilities are endless.
To the WordPress folks – even if there are similarities using custom fields, good luck with routing and functioning all the things to build your templates out. Falls apart almost instantly with any complexity. Further, the native WYSIWYG in Craft (Redactor) allows you to create as many configuration as you’d like and assign those to any instance of a rich text field.
@Donald: Craft isn’t the first to approach this, but in terms of admin UI, templating power, and ease of use, it’s definitely the best I’ve seen.
Matrix gives you total control over the HTML put out, in a way that isn’t possible, or at least easy, with WYSIWYGs. WYSIWYG editors are great for simple content, like headers, links, lists, etc. But with anything more complex, like images with captions, galleries, or blockquotes with citations, WYSIWYGs aren’t so helpful, because they don’t provide the level of control over HTML that we want or need to write the semantic markup that drives layouts.
This is essentially how my team and I have been doing CMS’s for the past 6 years. Instead of one big WYSIWYG editor, we fully customise each client’s CMS with unique fields for each piece of content they want to be able to add to a page/entry/item etc. That way WE the designers control the styling and formatting of EVERY element, while the client ONLY thinks about the text content (and images). If they want more freeform abilities to add different content blocks to a post, we provide them with pre made ‘sections’ that can be dynamically added to the form at the press of a button. Once submitted, each section is posted to a separate table, related to the master post. Works a treat.
Having a discussion on Twitter right now about this, and as someone who has seen what Craft’s Matrix field can do, I think a lot of it is being misunderstood in the thread because it comes across best in a screencast, showing a Matrix field being constructed with Live Preview showing how powerful it really is.
For example, @Sharon, this isn’t just Drupal’s CCK / Node Reference — it is like Panels but 10x more usable/flexible for both developers and content authors.
Have to agree with @MildlyGeeky
Craft have now have posted a screencast which should hopefully clean up many of the misunderstood concepts and point of differences.
https://buildwithcraft.com/features/matrix
It’s really powerful and flexible and as far as CSS styling it lends great to BEM like syntax without having to get over specific with your selectors to cater for anything a WYSIWG selector can spit out.
I’ve found the same approach really helpful for complex styles and layouts, as well as great for clients with limited CMS experience. Bonus points for performance being basically the same! I’ve only tried this on Single pages, have you found this works well on Channels (i.e. blog pages)?
First of all, absolutely love Craft. Launched our first Craft site for a client this summer. Raving reviews from the client with a very smooth training session. I do have a question for any of you who are using Craft.
Does anyone know how to solve the issue of numbered lists continuing between content blocks in Craft? I’d love to continue the numbers from one content block, add an image in between, then continue my numbered list in a another content block.
Interesting article. I agree with the fact that normally the marketers are non-technical people and they need technical support for updating content on traditional websites. The emergence of enterprise web content management systems has made the life easier for marketers and even for the website developers. Usually CMS comes with functionalities that makes the content management easier and painless. There are plugins and extensions that add features to the content editor and make it more efficient. Usually, working with CMS is very easy but to choose a platform that satisfies the needs of business is difficult. It is important to strategically plan the entire process and select a flexible and scalable platform. Security is another issue to look at while selecting a CMS. As described, Craft is a good CMS with limitless capabilities that can deliver powerful websites. Consistency and pace of development are the core features that make Craft a good choice. For large business, I still suggest to use WordPress, Joomla or other established CMSes for better results.