Join our HiFi mailing list to receive the latest news & updates

HiFi on Forrst

4 Comment(s) | Posted | by Joel Sutherland | |

We've been working away, readying our next major release that will provide better support for agencies and those managing multiple sites.  While this has been in the works, our team discovered Forrst.


It has turned out to be a great community of people interested in web design/development as a whole, not just some part of it.  We've been putting up some of our ideas and feature screenshots and have been getting some great feedback:

We've also had some good conversations about web technologies that we care about:

If you're on Forrst and want to follow the some of the HiFi team, here are our accounts:

If you're not on Forrst and interested in an invite...we've got a couple, so let us know who you are in the comments.

Using Custom Fields to Create Easily Managed Page Layouts

0 Comment(s) | Posted | by Patrick Clarke | |

I don't like to see my clients attempt to implement a layout using inline css and tables. This is certainly true when their layouts contain regular and repeated pieces of content. Not only does the site get sloppy, but end-users and my team can exhaust a lot of time and effort in trying to make it right, unnecessarily. The cleanest solution to this problem is to make the content more structured and leave the layout concerns to the web team. This is exactly why HiFi's Custom Fields exist.

When I set out to put Security Self Storage of Cleveland's new redesign on HiFi there were three page layouts used throughout the site: a homepage, a generic interior page, and a locations page.

The locations page layout jumped right out to me.  Its content was highly structured. Revisions of the layout resulted in each page would have 18 unique content areas – some with multiple pieces – that may need to be displayed:

  • Address and content
  • Office & Access Hours
  • List of Amenities
  • List of Unit Sizes and Descriptions
  • You Tube Video
  • Gallery of Photos
  • Google map of the location
  • Coupons
  • Sidebar links
  • Page Subheading
  • Pay Instantly link
  • Google Maps direction widget
  • Location-specific discout offers
  • Testimonials
  • Location Phone Number
  • Navigation title for Drop Down menu
  • Phone number for a Pay-per-click campaign.
  • Tracking code for coupon download code.

I knew I could rely on HiFi Custom Fields to really lock-in the how content displayed on their five locations pages. Custom Fields allow the web site's developer to add structured data to pages that is easy to work with in template layouts. They also automatically provide form inputs in the user interface for the client to manage. Within HiFi there are seven types of custom fields:

  • Text field: ideal for single words or lines of text.
  • Textareas: great for paragraphs of text.
  • Dropdown lists
  • Radio Buttons
  • Checkbox
  • File (upload field)
  • Markdown (custom HTML)

Screen shot of the Custom Field page.Most of the content areas for this site were set up as textfields or textareas with the exception of the List of available Unit and sizes (Checkbox - one for each unit size offered), and the coupon file (File - PDF). 

I coded the templates to handle blank and default values sensibly. If the input field isn't empty the templates will display the information and corresponding markup. In a few situations, like the latitude and longitude fields for the google map, more than one field must contain data for it to be displayed on the page.

After a number of revisions, each of these pages have 44 individual input areas (220 total).  It will only take a matter of seconds to update information on particular pages, like when a facility no longer has particular unit sizes available, or when they want to offer a different coupon to their current or potential customers. I saved myself and the client a few hours of work by having these pages setup with custom fields as we ran through a number of content updates before the site launched.

For all that effort, here are the final location pages:

5-minute Challenges for Quickly Trying HiFi's Developer Features

0 Comment(s) | Posted | by Kris Jordan |

Do you have 5 minutes to try a CMS that will open up new creative opportunities for your firm's work?

We put together these 5-minute Challenges for you to quickly get a sense of HiFi's power. Each challenge covers an interesting feature that would take significant effort, an assortment of 3rd party plugins, or simply wouldn't be possible at all, using any of our competitors' software. These challenge are just a hint at how HiFi will help you deliver higher quality work to your clients, faster.

Challenge #1: Can you dramatically speed up your clients' web sites? (Easy)

Challenge #2: Can you bend a CMS template to your custom design's will? (Moderate)

Challenge #3: Can you access your site's content using JavaScript? (Advanced)

Sign up for a free trial account and take HiFi for a spin.

HiFi is Open to the Public

4 Comment(s) | Posted | by Clay Schossow | |

After over a year of designing, coding, planning, and beta testing, we’re very excited to announce the launch of HiFi CMS. You can now Try HiFi free for 30 days.

As a web design firm who launches more than 100 sites per year, we recognized the need for a truly modern CMS in the market that places equal emphasis on usability, flexibility, and scalability.  For the past year, our team has worked diligently to build a powerful system that could be leveraged by developers, designers, and marketers around the world.

HiFi has already been used by our team and beta users to launch over 50 production websites like PBS' We're confident HiFi is ready for you and your clients' websites.

Why will you love HiFi?

  1. You control 100% of your markup. Moving to HTML5? No problem. There aren't code 'injection points' or crazy PHP methods like 'wp_dropdown_categories'. Just your clean, beautiful markup.
  2. Easy Templating.HiFi's templating system couldn't be easier.  The template extension system lets you define templates with a minimal amount of code, letting you build better websites quicker.
  3. Powerful API.  At the core of HiFi is its flexible and impressive API that gives you template-level access, allowing you to get all of your site's data with a simple call. 
  4. Your clients will just "get it". The simple but powerful user-interface will allow your clients to take ownership of their websites with less training and support from you.
  5. Start working on your next project immediately. No server administration necessary. Leave server maintenance, backups and restorations, and software upgrades to us.
  6. We care about great websites. HiFi isn't a better cookie cutter. It's a better workbench. The tools to support your professional work are within arm's reach. We care about the details like automatic CSS and JS compilation and minification, template defined image resizing on the fly, a flexible API, and more.

We truly believe that HiFi will help web professionals around the world build better websites for their clients.  Give us a try and tell us what you think.

Olark Review: 25% of our Customers Live Chatted with Us Before Buying

5 Comment(s) | Posted | by Joel Sutherland | |


We soft-launched HiFi about two weeks ago.  This meant closing down the beta program and launching our pricing and sign-up pages. We've been writing posts on this site for some time so we get a fair amount of traffic to the blog from people who might be interested in our product.

Like most new products there is a lot of marketing left for us to do. We haven't come close to explaining all of the features and advantages that HiFi has on this site.  Since the our team knows the product well, it only made sense to try letting our customers contact us and ask us about it. We turned to Olark to help make this possible.

The results are already pretty impressive.

Just over 25% of our signups have been from people that have chatted with us first. About 50% of the people that chat with us have gone on to sign up!

Generally the conversations have gone really well: our customers are web designers and developers and our staff is made up of web designers and developers so both parties have a lot in common.  For the most part, customers have been happy that we have been able to answer their questions with as much depth as we have.

How to set it up

Olark works through a simple Javascript file you include at the bottom of your page.  On HiFi this is super easy to do.  We like to set up a JS block that allows us to add scripts only on the pages they are needed.  We just wanted Olark to run on the pricing and signup page.  To get it to work there, I edited the JS block on both pages as follows:

{% block js %}
    {% parent %}
    <!-- begin olark code --> <script type="text/javascript">...</script> <!-- end olark code -->
{% endblock %}

Once you've done that, Olark will recognize that it has been installed.  From there, you can sign in to just about any IM client and link it to your account.  I use Google Talk so I linked that up.  When you do this, Olark will automatically request to chat with you from a number of different names like "".  Once you approve this, you're good to go.

Now, whenever somebody is browsing a page on your site with Olark installed, you'll see an active buddy on your chat list.  Either you or your customer can initiate the conversation, it's that simple!

One great feature for those on gchat is that Olark is smart about when to show up. If you aren't logged in or have your status set to 'Busy' it won't give visitors the option to chat with you.

Also, you can connect it with multiple gchat accounts.  Once one of them responds, it blocks the others.  This allows for several of us to be available at the same time without having to worry about whether someone else is already chatting with a customer.

How it looks

olark on hifi

You can control where on the page Olark shows up.  The bottom right is default and probably most common so we put it there.  It starts closed, but will open when you click on the title. You can control 100% of the copy that people see.


Our experience might not be 100% typical.  We're able to make our founders and developers available to our customers. I don't know that it would be working as well otherwise.  Additionally, our product has high switching costs.  Before someone commits to using HiFi as a CMS they will need to be willing to build a site on it!  This means that our customers likely want to do a lot more research before making a purchasing decision.

That said, we would highly recommend giving Olark a shot.  It's so easy to install and its defaults are really sensible.  You'll be able to get a feel for how well it works quickly and uninstall it if you don't think it's worth it.  There is a 14-day free trial so you can figure out if it works for you at no charge.

HiFi Improvement Recap

0 Comment(s) | Posted | by Joel Sutherland | |

Since the launch of the private beta, HiFi has gone through quite a few fixes and improvements.  As we make them, we're sure to both update the documentation at as well as put a notice on the HiFi Changelog.  If you haven't yet, go ahead and subscribe to the changelog to get the latest updates on the improvements and fixes we're adding to HiFi.

In the meantime, here is a recap of some of the more exciting changes and improvements to HiFi.

Improved Page Picker

HiFi Page PickerEverywhere in HiFi that you can add a link, there is also an option to use the Page Picker.  This lets you quickly add links to content that you've already developed  for your site. This is now being loaded dynamically for improved performance and there is also the option to quickly search as well as browse for content.

Additional SEO Controls

HiFi automatically does a whole bunch of great SEO things as well as gives fine grained control over things like URL structure, meta descriptions and more. With an update early last week, it is now possible to have more control over the sitemap.xml and robots.txt files that are generated.  It is now possible to exclude live pages (and their children) from the sitemap.xml file as well as make the entire site un-indexable via robots.txt.  This is really helpful when either working on a new site that you want to hide, or just a section of a site.

Better Notification Controls

HiFi Notifications

Now, site owners have the option to be notified of all non-spam comments and form submissions, even if there are other people set up to be notified as well. This makes it easier to track what is going on when areas of the site have been delegated to others.


We added an awesome new method to the HiFi API.  It's called merge, and it does just that.  You can pass it as many arrays of HiFi objects or even HiFi queries and it will returned a single array of all the unique results.  If you pass in a string, it will even order them for you.  This is great for putting together searches or feeds from many areas of a site.  It's also a great example of why the HiFi Templating system is so awesome -- with full access to your data, just about any site is possible.

There is more

This is just an overview of some of the changes and improvements we've been making. As always, if there are any questions feel free to drop them in the comments or shoot us an email.

Update: Relaunches - New Overview Screencast

2 Comment(s) | Posted | by Joel Sutherland | |

We've relaunched the HiFi site!  The previous version is on the left below, and the new version is on the right:

hifi relaunch

While the new version may be less intense and impressive, we feel that it will be a good foundation for the site as we move towards our product launch.  

The first site put a premium on design, which paid off in a couple of ways.  First, it led to HiFi getting reviewed on several Design and Development sites, which drove some great targeted traffic and quickly accumulated links for the new product.  Second, it showed the versatility of the system that we were able to faithfully reproduce such an intense design on HiFi and have it deliver great performance to visitors.

The new site is aimed at quickly giving visitors an idea of why HiFi is the CMS for them.  It more prominently features specific feature details above the fold and gives a first-time visitor much more information about the product than the old site.  The new design also highlights efforts to convert visitors to our Beta program (and eventually our pricing page), which is a nice step forward to make this site more product oriented.

Some of the cool pages to check out on the new site are the features page and examples page.  The features page gives a 10,000 foot view of what HiFi is all about and features our new product video.  The examples page shows just a few of the sites that are already in production on HiFi.  Flipping through those should show you that there truly are no design constraints on HiFi!

The HiFi Overview Video

We also now have a great overview video of the HiFi system.  It was put together by Alex Pomer, one of the project managers from New Media Campains.  Alex has been using HiFi every day for over six months and has really fallen in love.  Watching this video is a great introduction to the system as a whole:

Let us know your thoughts on the new site and content, and be sure to share it with your friends!  We've got some exciting stuff that has come out of the beta program that we should be sharing soon.  As always, shoot us an email if there are any questions!

Private Beta is Rolling, Mentions Everywhere

0 Comment(s) | Posted | by Joel Sutherland | |

This post is an update on the HiFi private beta.  We've invited 37 to the program so far, and have received some great feedback.  We are going to continue rolling these out to those that apply in the sidebar on the right.

In addition to the 37 in beta, there are another 63 in production for a grand total of 100 HiFi sites already.  So far we've been incredibly pleased by its performance and with the comments we are receiving from designers, developers and content editors alike.  Thanks to everyone that has been helping out!


Some other exciting news that has come this week has been in the form of mentions and recognition from some really cool sites.  HiFi has all kinds of neat technology built in and we're getting noticed for it.  In fact, we were mentioned by Microsoft and Mozilla this week.  An odd pairing, but we'll take it.  Here are those mentions:


HiFi theme editor is based on Skywriter: 01 via

Microsoft: jQuery Templating in the Wild

These bits are pretty fresh so there are only a few examples of websites using them.  One early adopter is hiFi, a website publishing engine.  They take performance seriously which is why they chose to use jQuery Templating engine to render their comments to the client. The team at hiFi have also written up a really nice post on the subject of jQuery Templates.

Additionally, we were recognized by Design Shack once again, this time as a top alternative to Wordpress:

Design Shack: 50 CMS Alternatives to Wordpress

Is WordPress a CMS? Many developers say “no” while countless others continue to use WordPress as a content management system regardless of its definition or intended use as a blogging platform.

Regardless of which camp you fall into, you should know that there are a lot of robust and powerful alternative CMS options that have been built from the ground up to help you manage the content on your site. Below you’ll find 50 content management systems perfect for designers, end users, churches, media sites and more!

A Great HiFi Tour is now Available

0 Comment(s) | Posted | by Joel Sutherland |

Now that the private beta rollout has begun, we are going to begin releasing details about HiFi much more rapidly.  To kick things off, we've recently posted a HiFi Welcome Walkthrough that give an overview of the system as a whole:

This is hosted on the brand new HiFi documentation site:

We're still adding polish to it, but it is already fairly comprehensive. We have enabled comments on every page and are monitoring them closely.  The goal is to make sure that any questions about HiFi have an answer on this site!