This is a report on how our bet on the skilled, rogue freelancer and the growing small agency has worked out as we approach our software-as-a-service's first year of operation. 

We took a risk when we decided to build HiFi: create a professional grade software-as-a-service product in the website content management space dominated by consumer do-it-yourself, cookie-cutter, template driven products. While most content management system services are a play to displace professionals with software, HiFi's goal is to amplify professional web developers with better software and infrastructure. For too long the freelance and small agency status quo has been expensive self-installed, self-maintained software on overcrowded, underpowered servers. Our wild bet was that by killing it on the fundamentals of having a great JSON API, a powerful infrastructure, and best-in-class, knowledgeable support, we could alleviate the aspects of modern website site development that, frankly, suck (you know, things like maintaining server software and configuration, losing sleep over uptime and reliability, updating software to fix bugs and security issues, custom queries for data, effectively compiling and compressing CSS, LessCSS, JavaScript, and CoffeeScript, and so on), and help professional developers focus on what they love most: designing and implementing great web sites.

Only a year in it's still early to make a call, but so far the freelancers and agencies have invested in the switch to HiFi have not only loved the experience but have increased their productivity substantially. We're really encouraged not only in the feedback, but in the hard numbers. Publicly, for the first time, here they are...

Growth

Let’s start with number of websites powered by HiFi. For our purposes we define this metric as the number of live websites that received traffic. This means free trial sites and sites that are currently in production but not yet live are not counted. From May through November of 2010 HiFi was in beta. In less than a year since coming out of Beta the total number of web sites powered by HiFi has grown more than 350 percent.

Monthly page views is another interesting measurement we look. September was a record setting month for HiFi with over 2.5 million page views served. By the end of October HiFi should surpass 20 million page views served since inception.

Site Speed

We spent some time earlier this month improving our caching system so not only are we serving more page views than ever before, they’re getting served faster than ever before. Cached pages are now served ~100ms faster than before which represents a 5-10x improvement in page load speed depending on client internet connection. You can really feel the difference in clicking around sites on HiFi!

HiFi web sites are much more than just HTML pages, across the board each page contains beautiful graphics, meticulous CSS and LESS files, and powerful JavaScript and CoffeeScript programs. We serve all of these assets up, too. In fact, HiFi has served over 150,000,000 requests total across website front- and back-ends. During peak hours we average up to 33 requests per second with bursts of over 100 requests per second.

Reliability

We haven't found competing services that are publishing their exact monthly uptime records but we think it's important. This is something we lose sleep over, we're proud of, and in recent months HiFi is more reliable than ever. Since June 1st, 2011 we have a 99.998% uptime record. In the trailing year we're just a hundredth of a percent shy of that at 99.989%. Here's a look at HiFi's uptime, as measured on minute intervals by Pingdom, in the trailing year:

Bigger, Faster, Stronger

Our team is really pleased with how quickly the number of live public sites on HiFi is growing. Not only are we seeing sites grow their traffic by leveraging the baked-in features of HiFi, but we are seeing bigger sites moving to HiFi as well. This is evident in that from September of 2010 to September of 2011 our number of live sites has grown by 5x and overall page views by 8x. With recent updates we are serving these websites faster and more reliably than ever before and with no additional effort needed on the web site developer’s part.

For a long time, designers have been very limited when it comes to fonts on the web. There is just a small list of web safe fonts that reliably render correctly across multiple browsers and operating systems. If a designer wanted to use a font that wasn't on this short list, there were very few options, all having serious drawbacks.

Historic solutions to solve the font problem include replacing text with images, cufon, a technique for using javascript to render text and sIFR, which uses flash to substitute text with flash rendering of fonts. These are workable solutions, but not without their drawbacks. They display fonts in a non-native manner, causing text selection issues, increased hardware demands and dependencies on browsers/devices supporting a third party proprietary plugin.

In comes @font-face. @font-face is a web standard with increasing, and now-nearly universal desktop browser support. It allows designers to include and define fonts in CSS. The basic syntax is as following:

@font-face {
    font-family: 'Foo Font';
    src: url('foofont.otf');
}
h1 { font-family: 'Foo Font', arial, sans-serif; }

Once you declare a new font family, you are able to use it natively, just as you would a standard web-safe font. The above code assumes you have an opentype font file 'foofont.otf' in the same directory as the css file.

If you don't want to host the font files yourself, there are third party services - both free and paid - that will do it for you. The two services we most recommend are Google Fonts (free), which has many open source fonts and TypeKit (paid) which offers access to fonts from a number of popular foundries. These are simple to use and get you up and running right away.

Cross-Browser Compatibility

While it would be nice to simply use the code above and have @font-face just work, cross-browser support for font formats makes things a little trickier. The general syntax works in nearly all modern browsers, but the actual format the font files need to be in varies.

In order for fonts to render correctly across browsers, we need to include all of the supported formats - which looks something like this:

@font-face {
    font-family: 'Foo Font';
    src: url('foofont.eot');
    src: url('foofont.eot?#iefix') format('embedded-opentype'),
         url('foofont.woff') format('woff'),
         url('foofont.ttf') format('truetype'),
         url('foofont.svg#ChantelliAntiquaRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

Ugh. It's quite the pain to come up with all of these different font formats. Fortunately, there's an easy way to do this: Fontsquirrel.com's @font-face generator lets you generate the css and font files you need in just a few clicks. We'll cover @font-face generator usage in the next section.

Using @font-face on HiFi

HiFi serves all of its theme assets (css, scripts, images, fonts) from a separate subdomain: ui.domain.com. This is done as recommended by YSlow and Google PageSpeed. By serving files from multiple (sub)domains, you increase the browsers ability to make requests in parallel, downloading your site faster.

Unfortunately, Firefox doesn't like showing fonts that are served on a different subdomain from the page for security reasons, so it won't render a font from ui.domain.com on domain.com.

There is a workaround however! In fact, it also happens to speed up page load times: you can embed the font code directly into the CSS rather than keeping it in a separate file. This saves browsers from having to download additional file(s) AND it's compatible with Firefox. It works using Base64, an encoding scheme that lets you translate binary data into an ASCII string format. Here are the steps required to do it:

1. Find and download the regular font files you'll need. These will be .otf or .ttf.
2. Ensure you own the proper liscenses for the fonts you'll use.
3. Go to the FontSquirrel @font-face generator: http://www.fontsquirrel.com/fontface/generator
4. Click +Add Fonts and add in an otf or ttf file for each font you need.
5. Click the 'Expert' option
6. Under CSS Options, choose Base64 encode
7. Check the license agreement
8. Generate/Download the kit
9. You now have a zip containing a CSS file and a bunch of different font formats. The font files all get used by obscure browsers and IE. Most browsers will use the base64 encoded font in the CSS.
10. Rename the CSS file to something useful like 'fontname.css'.
11. Open the CSS file
12. You'll notice the giant blocks of code immediately. These are the base64 embedded fonts. You'll also notice a few references to the external fonts that get used by some browsers.
13. These external font references account for the font files being in the same dir as the CSS file. This isn't the case with HiFi. You'll need to change url(fontname.woff) (or whatever) to url(../fonts/fontname.woff). Do this with a search/replace so you don't miss any.
14. Upload the css file to HiFi under '/styles'
15. Upload all the font files to HiFi under '/fonts'
16. You now need to include the CSS file in your index.html above your other stylesheets. This is a rare case where you don't want to necessarily compile/minify the CSS together with everything else. Create a separate {% css %} declaration above your main one for your fontname.css file.
17. Voila, you can now use the fonts like any other: font-family: 'fancy name', arial, sans-serif;

It may seem like a bit of work to do this, but once you get the hang of it you'll be able to start using new fonts very quickly. It's also good to know that by using this technique, your fonts will work reliably across desktop browsers and perform as well as they can.

Overview

Easily add static or animated captions to your images.

Requirements

Javascript and a jQuery library are required to use one of an image’s attributes to build the markup for a caption.

Components

CSS:

.caption{
	font-size:12px;
	font-weight:bold;
	padding:0 0 20px 0;
}

Javascript:

$('img').jcaption({
	copyStyle: true
});

Installation

Insert an image (maybe in a page or post) and fill in the image description, or alt attribute, with the text you would like to appear as the caption. Then upload the jcaption.js file to your theme and include it in your desired template. Add the styles included above to the stylesheet and the javascript directly to the template so you can add or edit the options that are provided below. 

If you are floating your images, giving them padding or adding any other style, be sure to keep copyStyle set to “true” so the caption class does not override your image styles. 

Options

$('img').jcaption({
 
	// Element to wrap the image and caption in
	wrapperElement: 'div',

	// Class for wrapper element
	wrapperClass: 'caption',

	// Caption Element
	captionElement: 'p',

	// Attribute of image to use as caption source
	imageAttr: 'alt',

	// If true, it checks to make sure there is caption copy before running on each image
	requireText: true,

	// Should inline style be copied from img element to wrapper
	copyStyle: false,

	// Strip inline style from image
	removeStyle: true,

	// Strip align attribute from image
	removeAlign: true,

	// Assign the value of the image's align attribute as a class to the wrapper
	copyAlignmentToClass: false,

	// Assign the value of the image's float value as a class to the wrapper
	copyFloatToClass: true,

	// Assign a width to the wrapper that matches the image
	autoWidth: true,

	// Animate on hover over the image
	animate: false,

	// Show Animation
	show: {opacity: 'show'},
	showDuration: 200,

	// Hide Animation
	hide: {opacity: 'hide'},
	hideDuration: 200
});

This morning we're making it official the HiFi Snippet Library has launched.

A great thing about working with HiFi is that you can use the web technologies you know (HTML/CSS/JS) with no restrictions. Many systems say this, we actually mean it. This means that it is extremely easy to build reusable snippets that can save you all kinds of time when building your client sites.

If none of this makes sense to you, hopefully we can answer your questions here.  If you have any others, let us know in the comments.

What is a snippet?

A snippet is a combination of HTML, CSS and JS that you can drop into your sites' templates to quickly implement a feature. Since it is based in just HTML/CSS/JS, it is easy to customize or change them.

Why is this cool?

Snippets let you quickly add functionality to your sites without forcing you to use particular HTML. Design and code the sites the way you want, and then hook up the functionality with snippets.

How much do they cost?

The snippets are completely free.  Most can even be used on non-HiFi sites!

Where are they coming from?

The HiFi snippets are being written both by the HiFi team as they build sites, and by customers using HiFi. If you have a snippet you would like to see, or a snippet you want to contribute to the library, get in contact.

How often will they be released?

We have committed to release at least one snippet a week, but through community contributions, the number may be even higher! Whenever we release a snippet, we will be posting it to the HiFi blog. So be sure to subscribe to the blog to get updated on the newest snippets.

Your snippets are stupid. Why don't you have an XYZ snippet?

We like your attitude. Shoot us a message and we'll make sure it gets added!

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:

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)

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:

• Highland Heights Self Storage
• Westlake Self Storage
• Wickliffe Self Storage
• Willoughby Self Storage - Euclid Ave.
• Willoughby Self Storage - Lost Nation Rd.

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' CiaoItalia.com. 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.

API design has been a point of discussion on Hacker News recently. The discussion has been focused on the process of adding on an API to your app. With our SaaS product, the HiFi CMS, we approached the problem from the opposite direction: flesh out the API first and then build your application on the API. There was a lot of interest in our approach to this, so we thought we would write out this post.

Our application, HiFi, is a modern web cms that is the antithesis of most cookie-cutter CMS SaaS products on the market. A core goal with HiFi has been to create a platform where professional designers, web developers, and information architects can create websites that live up to their original vision. Early in the planning process it became clear a flexible, first-class API would be needed to achieve this goal. Getting the API right would be the only way a hosted CMS could acheive the flexibility that developers love about non-hosted platforms.

Our requirements for the API were driven by common sense best practices and by the unique needs of website content models. The key requirements were:

• Consistency - all objects in the system should be represented, manipulated, searched, versioned, and access controlled in the exact same way. This holds for content, types, users, relations, permissions, etc.
• Simplicity - there are only two methods in our API: get and put. An object's type and its "undeleted state" are just properties of each object. JSON is the only format for V1. Further more, the requests made are in a very similar format to the data you get back. It just feels natural.
• Versioning / Immutability - storage is cheap in 2010: why not keep everything? Objects aren't updated or deleted, new copies are created.
• Structure - all objects are organized in a tree. Relationships between objects can introduce additional structure.
• Queryable - all objects can be queried by criteria on their own properties and properties of structuraly related objects
• Access Controlled - read / write permissions can be applied to any object and inherit down the tree

We built the API to satisfy these requirements first, then we built our app on top of the API. This turned out to be a great idea. We got to dogfood our API for the entire development process and it made testing a lot simpler.

Websites running on HiFi use a templating language, twig, which is very similar to Django templing. All templates have access to the API server-side. This makes it really easy to add complex features to websites without much stress. Here are a few quick examples of queries:

{"type":"page", "orderBy":"-publishedAt"}

This query pulls in the most recently published pages in HiFi.

{"type":"page","orderBy":"-publishedAt","parent":{"type":"feed","url":"/blog"}}

Fetch the most recently published pages whose parent is a blog feed with url '/blog'.

{"type":"page","orderBy":"-publishedAt","child":{"type":"comment"}}

Fetch the most recently published pages which contain a comment.

All nested queries can be combined as much as possible and be as recursive as desired. There are similar commands for working with relationships. The net result is an API that was simple, yet powerful enough to build our admin panel on.

HiFi's admin user interface is 95% client-side using jQuery, Resig's JavaScript templates, and pulls data via the API. We created a HiFi JS library that creates a jQuery-like chainable DSL around the API. The next example should look familiar to jQuery users. In it we'll change the URLs of all pages on a site to be lower case using this:

hifi({type:'page'}).each(function(page) {
    hifi(page).update({url:page.url.toLowerCase()});
});

A neat side-effect of writing the API first is finding use cases you didn't plan for. One example for HiFi was in keeping old versions of all objects. The intention for this API feature was to enable easy roll backs for any content type. When we recognized that old URLs were being stored and were queryable through the API we updated our website routing code's logic to see if an unreachable URL ever existed and if so we automatically 301 redirect to the object's most recent version's URL. We got this for free. Had we built the app first we would have written a lot of special case code to achieve the same result.

Now that HiFi is open for business and over 50 websites have launched on the service we're beginning to see uses of the API in end-user work that are really exciting. An example site that has personally blown me away is PBS' CiaoItalia.com. Ciao Italia is America's longest running cooking show. Over the course of 21 seasons chef Mary Ann Esposito has compiled a lot of great recipes and videos. If we were to flatten the APIs tree it would look like: 21 Seasons -> ~20 Episodes each -> ~4 Recipes each -> YouTube Video. This advanced search page was implemented entirely using the API in user-space templates.

HiFi's API was built before we built the app on top of it and it's a better product because of it. If you're not in a greenfield situation and your app already exists consider what it would take to design an API that could eventually sit beneath your app not beside or on top of it. Investing in a great API not only cleans up your code base, but also opens up the door for awesome, unanticipated use cases coming to life.

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 docs.gethifi.com 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

Everywhere 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

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.

HiFi.Merge()

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.

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

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!

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!

Mentions

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:

Mozilla:

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!