Why I built Mariposta, the Tablet-First CMS for the masses

Guest Post by Jared White, Co-Founder & Architect, Mariposta

I've always wanted to build my own CMS. Of course, every web designer or developer at some point in their career wants to build their own CMS. That's why there are so damn many of them on the market!

Put simply, I've always wanted to build my own CMS that did things a little bit differently than anyone else. In the early 2000's I designed a database for local filesystem data that featured rich metadata, tagging, and searching capabilities. Certain aspects of it were inspired by the BFS filesystem of BeOS (which at that point had unfortunately gone defunct). This was prior to Apple's Spotlight feature in Mac OS X.

However, once Spotlight came out, I decided to abandon my sideproject and put some of the ideas into a web-based CMS. Early on, however, I switched gears and developed a PHP 5-based web framework called Willowgarden -- essentially a competitor to the up-and-coming Rails framework. I also started working on an XML-based document editor that could create mashups of content from various web services available. This was in 2006-2007, before there even was the plethora of amazing cloud APIs that we now enjoy.

Should I Stay or Should I Go?

After releasing a couple of versions of Willowgarden into the open source community, the bombshell announcement landed that Zend was releasing their own PHP 5-based framework. At that point, I had a choice: keep working on my framework, switch to another framework like Zend's, or (gasp!) leave the PHP world behind and learn Ruby on Rails.

I chose the latter, but things weren't that easy. In 2009, I escaped from corporate web programming and became a consultant/freelancer. For a time, most of the projects I worked on were for local small businesses, so I built websites on top of WordPress. After two years of WordPress site building, I was at my wits' end. I was tired of plugins that barely worked, spaghetti code, and design constraints due to limitations on the CMS-side of WordPress.

Programmers may tell you WordPress is almost limitlessly customizable, but I found that only to be true if you simply don't care at all about usability for the site administrators (who are often non-technical to the extreme!). I was also frustrated that WordPress (and nearly any CMS) was such a poor solution for iPad users like myself who wanted to be free of the shackles of desktop-era computing.

Time to Build a Startup

In October 2011, three things happened: iOS 5 was released, Steve Jobs passed away, and my baby girl was born. This made for an interesting head space for me. I'm not exactly sure why, but all of a sudden, as I was enjoying time off and helping my wife with the new baby, everything became quite clear to me.

I needed to build a Tablet-First CMS that could generate high-quality output with a minimum amount of effort for "normal" people. Safari in iOS 5 was powerful enough to do amazing things via HTML5 & CSS3, it finally had rich-text editing capabilities (via contenteditable), fixed position elements, and momentum touch scrolling. The time was right to build a next-generation web publishing platform.

Mariposta

So I fired up my favorite code editor, BBEdit (yes, I'm old-school), generated a brand-new Rails project, and Mariposta was born. After a few static HTML prototypes, I was suitably convinced my idea would work. My goal was to see if I could reproduce the layout of the USA Today native app in pure HTML/CSS/JS. Once I got swiping, rubber-banding, columns, and other features in place, I knew the modern web could approximate layouts once reserved only for print.

Now, 13 months, 475 code checkins, and 500+ hours of design, programming, and business development later, my co-founder Rosemary and I launched Mariposta. It's a real product. The tagline is "Web Publishing for Mere Mortals" because we value ease of use as a top priority for our platform.

Top Five Interesting Things about Mariposta

  • Our admin interface is 100% web-based. So what, right? Well, it was also engineered in a Tablet-First manner. In other words, every single screen, text field, button, and interaction was executed to work stunningly well on the iPad (and some Android tablets as well). Sign up for the platform, add content, publish it, and view it — all on a tablet. That Mariposta works well on a Mac/PC too is just icing on the cake.
  • We're totally into this whole Cloud thing. Mariposta utilizes cloud technologies in a myriad of ways under the hood, and we're also building out cloud integrations on the user-side, a feature we call CloudStamp. For example, you can save images to a Mariposta app folder in Dropbox, and then in Mariposta, the image chooser for a post will show all the images in your Dropbox automatically. You can also load in photos from your Flickr profile. Many more integrations of image and text sources are planned for the future.
  • We've custom-engineered a presentation engine we call Chrysalis. Chrysalis lets you do some pretty cool things. Our information architecture is set up so that you can create multiple post collections each with its own theme you choose. Then when you write a post, you can pick a template just for that post. A template is a combination of content items we call FX — for example, an image, a sidebar, main post body, etc. -- and the design/layout of those FX. A post collection, especially when viewed on an iPad, feels like something you might encounter in Apple's Newsstand — not a typical WordPress or Tumbler-like blog at all.
  • At a time when many WordPress themes are just starting to go "responsive" so that they're usable on smartphones, and Tumblr only recently even allowed themes to offer a smartphone-specific design, we've been mobile-optimized from the start. Each theme has an "awesome mode" that PCs and tablets see, and a "simple mode" that smartphones* see. We use responsive techniques within each mode, but we believe that a custom-built mobile experience is the preferred way to go. This gives us the flexibility to target certain features or navigation options to each mode individually. (*Internet Explorer is also served simple mode.)
  • Finally, we've thrown wide open the assumption that web-based content is inherently reverse chronological, or alternatively should be viewed as a sprawling "site map". We really only have two levels in our hierarchy: collections (which are accessed directly from a Mariposta user's profile/home page), and posts themselves which can be ordered manually. Why manually-ordered posts? Well, what do all these have in common: books, magazines, catalogs, presentations, showcases, galleries...? They all have a front-to-back ordered narrative. Our collections have a cover page at the front, an about page at the end, and manually-ordered posts in between. Certainly you can add posts to the front, blog-style. I do it all the time. But you're not limited to that format at all and can order content in any way you like.

What's Next for Mariposta?

I'm very excited to have come this far and released our 1.0. But I feel like we're just getting started. It's going to be challenging to build out the next major wave of Mariposta features we have planned while simultaneously maintaining a high-degree of usability and simplicity for customers. But I'm looking forward to the challenge. I think you'll see a lot more themes coming out over the next few months along with real-world demonstrations of what Mariposta is capable of. We know some people won't immediately understand what makes Mariposta different from existing CMSes that are already popular. I want make the distinctions crystal clear. I realize that Mariposta isn't for everyone. But for certain kinds of customers and web publications, I believe it's just right.

Thanks to James for the opportunity to post here today. If you have any questions, please write in the comments, and I'll be sure to follow up.

Find me on App.net, Twitter

Discount code for you!

I'm very excited to announce that Jared has very kindly given me a discount code for my readers. You can use:

jbrooksblog

To get an awesome 20% off your first 3 paid months with Mariposta now!


comments powered by Disqus