My early reaction, sadly, is that I’m disappointed.

I’m primarily a designer and front-end guy, so my focus is on the UI and general usability of the app.  For an app that so many designers use on a daily-basis for hours after hours, the user experience/productivity of the app is paramount, and I’m sad to say Coda 2, in my opinion, has taken a step backward in this regard.

That’s not to say there are some improvements in Coda 2.  So let’s cover a few my favorites first:

List View

Finally!  The sites view can now be a simple list instead of a mountain of site thumbnails that were difficult to search and find a site quickly (not a fan of typing in a search box just to open a project).

Code Folding

I can’t say I’ve found myself using this feature much (yet), but I do like the way it has been implemented.  Code folding allows you to “fold” sections of code, making your document more compact and easy to navigation.  The color coding along the left side helps identify areas that can be folded.  Nice touch.

CSS & General Code Completion

Generally, I’m satisfied with the improved code completion features built into Coda 2.  I noticed a few things are a bit more efficient.

CSS editing now adds some nifty popup bubbles to help with picking colors.  I think they’re going in the right direction here (who used the dedicated CSS Editor in Coda 1?  I didn’t.).

But I’m unsure if these are totally usable yet.  For picking and matching colors, I still find ColorSnapper to be the best tool out there.

And the CSS code complete doesn’t do cross-browser CSS3 support.  So I’m still using LessElements for most of my CSS3 work.

On that note, I would have liked to see .less files automatically recognized as CSS.  I still have to manually set the Syntax Mode to “CSS” every time I work with a .less file (which is every time I work on any project).  Annoying.

EDIT:  Thank you to @daveyank and @mattvagni for pointing out the preference setting to make .less files always open with CSS syntax

Now on to my main qualms with Coda 2:

The redesigned Top Section

Perhaps the most frustrating thing about this release is huge pieces of the visual interface have been dismantled and put back together in a less intuitive and overly clever (to a fault) kinda way.  The top section is the first thing that grabs my attention (in a bad way).

Here’s what one of my projects looks like:

If you’re familiar with Coda 1 (as I’m sure many Coda 2 users are), on first glance, it appears there are MANY files open, when in fact there are only 2 files open.  The breadcrumbs/file path bar now resides where the file tabs used to.  It’s also the same color/feel as the old file tabs.

OK, so they’ve moved the currently open files to the top, as these thumbnails.  Interesting at first.  But still a bit hard to read the file names on these (at quick glance), especially some are on 2 lines, some not, some truncated, etc.  The thumbnails take up a lot of screen real estate, so I tried text-only mode.  Nicely saves space, except now there’s no way to see the project name I’m working on (kind of a key component, no?)!  This is frustrating, especially when I’m working on 2-3 projects at once, which I often do.

Now back to this new file path bar.  Basically it’s a breadcrumb-style file path, which when you click each step opens a mini file browser popup.  In theory this is a clever idea, but in practice it’s cluttered, inefficient, and only serves to slow me down when I need to quickly navigate to certain files within my project.

I don’t think this piece is necessary at all.  But if it HAS to stay (there’s no option to disable it), then here’s one idea to make it a bit easier to use.  Make the root level the folder selected as the local path for this project.  Don’t make it the root of my computer!  Coda works on a project basis, so I only want to see files and folders for the project I’m currently working on.  The rest just make this harder to navigate.

These little details can become very annoying on a daily basis.

The Sidebar & Publishing

Here’s another instance of trying to be too clever, and reinventing something that not only wasn’t broken, but might have been one of my favorite features of Coda 1:  The sidebar files list and marking/publishing files to the server.

In Coda 1, you had your files list in your sidebar, and every time you save a file you’d see a little icon next to that file indicating it’s marked for publishing.  As I save a handful of files, I can see which of my files are ready to go live (as well as which ones haven’t been touched).  When I publish, I can see which ones are still uploading and which have finished.  It was beautiful, compact, easy to use, and easy to see, all in one view.

In Coda 2, they created this dedicated list of files that are marked for publishing, separate from your main files list.  You have to click between the 2.  How is this better?  And what about knowing which files are ready to publish?  They could have kept the “marked” icons present in the files list, or in the new files tab up top.  But they’re nowhere to be found.  This is a head scratcher.

Bottom Line

I know this all sounds very nit-picky… but these things matter to someone like me who spends a huge amount of time in this app.

Maybe I just need to give it some more time to sink in.  But I can’t see how these file navigation issues — a central component of any code editor — will become any less cumbersome than they are now.  While I love everything Panic has done in the past, I might have to think about switching pretty soon.

“I try to lead every decision with user experience. What is the user-facing situation we want to change? Or if the motivation isn’t because of a user benefit, but a pure business reason — what is the impact on the user, and how can we align incentives so this at minimum makes sense to the user? This is critical.” – Ryan Singer (of 37Signals), feltpresence.com

“What I’m going to beat myself up on is what did I miss, what is it that the person sitting in the audience is going to get hung up on and I didn’t ask, Why didn’t I put myself more into that person’s shoes and come up with those nuances questions that tap into the fear and that’s where my concern is. I want to just make it really useful.”

- Andrew Warner, Mixergy.com

Here are a few updates to the Restaurant Engine dashboard welcome screen. Trying to make the new website setup process as easy as possible.

“If my instructor had said to me, “improvise a melody on top of this track”, I wouldn’t have been able to do it. I would have had no idea where to start or what to do. There are too many possibilities: which strings to hold at which frets, and whether to strum or pluck. It’s overwhelming! But instead he taught me a minor pentatonic scale and said “play any note on that scale while this track is playing”. Suddenly the possibilities were narrowed and instead of feeling straitjacketed, I felt free. I was given power, because my options were constrained.” – Jam Tracks and Black Keys, 37Signals Blog

I can relate to this post on so many levels.  It brought me right back to the days when I was first learning to play guitar (15 years ago).  I remember vividly the day I was introduced to the Pentatonic scale and learning how to “solo” on top of a chord progression.  Possibly one of the most exhilarating, and as the author says, freeing, moments in my life.

I can also relate because right now, I’m just beginning to learn to play drums.  After many years going in depth into guitar and songwriting, it’s incredibly exciting (and fun!) to be a beginner again on a new instrument.  The other day I was introduced to playing drum rolls in triplets and suddenly felt that same feeling of liberation.

But getting back to the point of this post:

The author talks about how setting constraints for users (or in his post, music students), removes the element of fear and being overwhelmed, and accelerates the user’s (student’s) ability to create.

WordPress Theme Designers Can Relate

Over the last few years, there has been a huge rise in demand for template-based web design, especially in the WordPress space.  Customers want a template that looks and feels great because it was crafted by a design professional.  But at the same time, they want the ability to customize it and make it their own.

Most users of WordPress themes are not designers.  They don’t know how to make certain design decisions, like setting a clear hierarchy of elements, controlling font sizes in proportion to one another, choosing colors that work together and setting contrast strategically.

So when we as the designer set out to give the user a panel of theme options, it’s important to make internal decisions about what they should have control over but also which design elements are best left unchanged.

I made a few decisions in this regard when crafting the themes for Restaurant Engine:

• Colors can be selected in groups (palettes).  See my video demonstration of this.
• Font choices are limited to just a “Serif” and a “Sans Serif” choice.  I plan to add a few more font choices later, but they’ll be carefully selected by a designer first.  No choice in font size.
• Limited page layout options.  I’ve never been a fan of choosing left/right sidebar, or drag/drop rearrangements of major page elements.  In a design template for a focused niche (like restaurants), I’d rather my users focus on creating content (food menus, events, etc.), and let us designers present that content in the best way possible.

The End Result

Users of the WordPress theme should feel a sense of accomplishment when they quickly produce and publish a respectable website.  They feel proud to show it off to the world.  They feel that same sense of liberation and excitement as beginning music students do when they first learn to create within the right constraints.

The pieces just fall elegantly into place.

Last week I introduced my new startup, Restaurant Engine, a website service designed for Restaurants, built on WordPress.

Part of the challenge in crafting WordPress themes targeted specifically at non-tech savvy customers (non-developers) is to make them as user-friendly and easy to use as possible.  All of us WP theme developers know the temptation to provide users with endless amounts of theme options.  Especially with color options, where you can easily add a color picker for every single element on the site.

For the color options in the Restaurant Engine themes, I had three goals:

• If the user is not a designer, lets make it easy for them to choose a professionally-crafted color palette.
• Optionally, they can further customize their color palette by tweaking individual colors.
• Limit the number of color pickers so we don’t overwhelm the user or make their task too time consuming.

In collaboration with Devin Price of WP Theming, we implemented this color palette system.  Watch the video above to see it in action.

If you’re interested to see how this was coded, check out Devin’s post where he provides the details and code examples.

But I’m proud to say, this little startup of mine has officially launched in beta.  It’s called Restaurant Engine.

In a nutshell:  It’s a turnkey, hosted website solution designed specifically for Restaurants.  I won’t cover everything about the service here since you can read about it on the site.  In this post, I just want to touch on a few “behind the scenes” aspects of the project.

Building on the Collaboration Model

As I’ve written about extensively in the past, I’m a firm believer in the collaboration model for web design production.  The key to creating awesome work on the web is to team up with the very best craftsmen in the business.  And to constantly grow and mix up my network of collaborators to keep things fresh, grow and learn alongside A players in the industry.  This approach has taken my client web design business to the next level.

With Restaurant Engine, I’m applying the same approach to a template-based web design product.  I looked to my awesome network of designers and developers to help create the design templates (themes) found on Restaurant Engine, as well as the RestaurantEngine.com site itself.  The plan is to continue to bring in leading web designers to create upcoming templates for our customers.

Re-Thinking a WordPress Themes Shop

Restaurant Engine is a different take on a WordPress themes shop.  It’s a hosted service, with a customized experience and feature set tailored specifically to the needs of restaurant owners.  Much like a web designer who hosts the customized websites he/she builds for clients, Restaurant Engine does the same, only with more automation.  A Restaurant Engine subscription gives the customer web hosting, a website powered by WordPress (with custom-tailored functionality and options), choice of any theme in our collection, and of course dedicated customer support.

From my experience running ThemeJam (a traditional WP themes shop) I found the customer-base has it’s limitations.  We can make the following assumptions about a customer who purchases and downloads a WordPress theme:

• They know what WordPress is.
• They know how to find and purchase their own web hosting.
• They know how to install WordPress on their web server.
• They know how to install a WordPress theme.
• They know how to configure WP settings properly, find and install the right WP plugins for their needs.
• They know how to create an effective site map and develop a content strategy.

Technical Stuff

And now, a few notes about the tech going on behind the scenes of Restaurant Engine:

In case you haven’t guessed by now, it’s built using WordPress Multisite.
Every customer’s site is a site on the network.  There’s also a “template” site, that is replicated whenever a new site is created.  The template site has one of our themes pre-activated, various settings pre-configured, and a base sitemap and pages pre-created to get things started.

Signup and Stripe Recurring Payments
I’m really excited about this part.  Working with the talented Pippin Williamson, we implemented a custom signup form which simultaneously initiates recurring subscription payments (with a free trial period) processed by the Stripe, and creates a site and account on the network for the customer.  Stripe truly is an amazing game-changer in the world of online credit card processing.  Absolutely brilliant user experience for managing customers, orders, charges, discounts, etc.  No monthly fees.  All cards accepted.  I can’t say enough good things…

Customer Support
Another piece I’m really excited about is the customer support system.  After investigating several options, I’ve settled on Tender app for the support system and Knowledge Base.  For live chat support (and pre-sales chat), I’m going with Snap Engage.

Both services offer the ability to embed widgets.  So I’ve actually integrated both the support forum and live chat support right in the WordPress dashboard:

So that’s what has been keeping me busy (and quiet) over the last 6 months or so.  I expect this will be my primary focus for the remainder of the year (at least).  As always, feedback welcome…  And if you happen to know anybody in the restaurant business, you know where to send them

“This great room is the one place in the company where you can look around and see everything we have in the works… Steve will graze by the tables to see where all of the products are heading.  He can get a sense of the sweep of the whole company, the iPhone and iPad, the iMac and laptop and everything we’re considering.  That helps him see where the company is spending it’s energy and how things connect.  And he can ask, ‘Does doing this make sense, because over here is where we are growing a lot?’ or questions like that.  He gets to see things in relationship to each other which is pretty hard to do in a big company.  Looking at the models on these tables, he can see the future for the next three years.”

This was a real eye-opener for me.  I instantly realized how Apple is able to keep such a focused product line, with each product serving a specific market beautifully.  And it’s how they achieve the same simplicity and feel, consistently across all products in their line.

But it also shows us how important product design — and the design of the product line as a whole — is in making big-picture decisions at Apple.

The fact that they craft all of their products in the same room shows us how fluid and integrated their design and internal review process is.   And it shows how Steve Jobs was truly a designer in the way he approached business strategy.  One thing that is central to any design process is to consider the relationships between different elements, their push and pull with one another, their hierarchy of importance.  That applies when you’re designing a product, a web page, a TV commercial, and clearly in the case of Steve Jobs and Apple, the design of a corporate strategy.

Daily reading, watching, listening, and interacting is what keeps me going.  I’m constantly on the lookout for something new to learn that might help me get ahead in some way.  Or sometimes I just need to hear someone else’s story to get inspired to take action.  It’s how we as entrepreneurs stay in tune with what’s next: where things are moving and what we can do to align our work with where everyone else is headed.

So I want to take a minute to thank and share some thoughts on a few of my favorite content creators I’ve been following during the past year.  I honestly would not be where I am today without the work of these folks, who consistently put out interesting, insightful, useful, and valuable content on a regular basis.

Andrew Warner of Mixergy.com

Without a doubt, this goes at the top of the list this year.  Having chomped up every single fascinating video interview Andrew puts out on his blog, it was a no-brainer to pay up and become a premium member to gain access to the in-depth courses produced by the Mixergy team and guests.  The lessons and stories by and for tech entrepreneurs are amazingly insightful and actionable — exactly the stuff that guys like me crave.  And it’s been great to watch Andrew hone his craft of being the best interviewer out there.

Zeldman.com

Jeffrey Zeldman, known in some circles as the “godfather of the internet”, continues to be an inspiring, thoughtful creator and commentator for the web design industry.  Starting with his eloquent writing on his personal blog zeldman.com to his funny and creative interviewer role as host of the Big Web Show podcast, he’s the kind of writer/speaker who makes you feel smarter the more you listen/read.  He constantly raises the standard for what content-creation on the web is, and never puts out an ounce of fluff.

Dan Benjamin of 5by5.tv

Dan Benjamin has put together an amazing network of podcasts on 5by5.tv.  My favorite being The Big Web Show with Zeldman, other great ones are Founders Talk (interviews with entrepreneurs) and the always geeky/entertaining Hypercritical show with John Siracusa, which disects the world of Apple and their products in more detail than any company should ever wish to be covered.  Dan’s work on 5by5.tv was a big inspiration for us when we started Freelance Jam.

37 Signals & the Signal vs. Noise blog

Jason Fried, David Heinemeier Hansson and the team at 37 Signals continue to inspire our industry to create awesome products, conduct business honestly, transparently and efficiently, and communicate our ideas with conviction.  I’ve been particularly drawn to the work of Ryan Singer, UI designer at 37signals, who not only is an amazingly talented UI designer, but he brilliantly communicates his ideas in his articles, talks, and demonstrations.

I’ve also been really into their Bootstrapped, Profitable, & Proud series of interviews profiling successful businesses that haven’t taken any outside investment.

Other favorites:

AVC / Fred Wilson’s blog – Although I tend to be more interested in the bootstrapped approach myself, I like reading his blog to stay somewhat in-tune with the VC perspective on entrepreneurship.

Adii Rockstar – Always inspiring to follow Adii’s thoughts on strategy and life, particularly as someone heavily involved in the WordPress space.

The Godfounder – Great little blog pointing out the little things that make web-apps great.  It’s all about the details.

A Smart Bear – Jason Cohen’s blog on “Startups + Marketing + Geekery”.

Think Vitamin – Team Carsonofied always puts out quality stuff, all the way down to their blog posts.  I had the pleasure of attending their Future of Web Design conference in NYC in 2011.  Ryan Carson is definitely an inspiring business owner to follow.

Trent Walton & Paravel – Man, these guys are good.  From their amazing design/web/illustration work to their clever copy and innovative tech work… if ya don’t know, now you know.  Film geeks, you gotta check out their awesome site, The Many Faces Of.

Usability Post – Been a fan for a long time now.  Well-written Usability/UI design blog.

Pippin’s Plugins – I’ve been working with WP developer, Pippin Williamson quite a bit lately.  He runs a great blog all about WordPress plugin development, with lots of value-packed tutorials.  This dude knows his stuff.

Amit Klein – Amit is a long-time buddy of mine, and one of my only hometown friends who actually uses Twitter  He’s a web/startup guy and keeps an interesting blog all about his work.  Check out his posts from the last few years when he lived/worked in India.

Making Good – Another friend and frequent collaborator, Ed Mullen, writes about design (among a variety of other topics).  ”Thinking about doing things better” is a good way to sum up his blog.

Mikes Lessons – I guess this counts as “content”… I’ve been learning to play drums thanks to this high-quality collection of video lessons.

Thomas Friedman & Paul Krugman – I read just about every piece from these NY Times op-ed writers.  Aside from their ideas, I really admire their writing style and their ability to effectively present complex ideas in a short, quick-read format.

So many more that just fly by in the day-to-day stream of content overload… Thanks to Instapaper, I’m starting to get a handle on it all

This year, I’m going with the unordered-list format.

Here’s what I learned in 2011:

Client Biz:

• Freelancing doesn’t have to be lonely.  Building a network of friends and collaborators is key.
• Fewer larger projects are better than many smaller projects.
• Keep your contract up-to-date and get it signed every time. (I had been lazy with this in the past…)
• I need to work from multiple locations throughout a week to stay sane.
• Find great people (to work with) and stick with them.  Working relationships get better over time.

Startups:

• Don’t over-think and over-commit.  Don’t force an idea.  The best one’s come to fruition quickly.
• Don’t over-broadcast my startup work before it gains momentum.  Things change quickly.
• Great partnerships evolve over time.  Don’t rush this process.
• Stick to what you know best.  Don’t pursue something too far out of your area of expertise.

Skills:

• Web copywriting was a big new focus for me this year.
• Information Architecture – sitemapping, wireframing, sketching, note-taking.  Lots of that this past year.
• Collaboration & Management – Better QA, delegating tasks, managing multiple teammates at once.
• Online marketing – Finally learned how to effectively use Google Adwords (still learning).
• Improved general writing skills, specifically for articles (I’m now working on an eBook).

Everything Else:

• Keep politics out of my Twitter stream.  Still searching for an alternate place to vent (G+ perhaps?).
• Running every day clears my head and makes me more productive.
• Drums are the instrument I wish I had learned when I was younger (instead of guitar).  Catching up on that now.
• Time with family is golden.