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

Steps to use high-performing @font-face on your HiFi Site

0 Comment(s) | Posted | by Pierre Lebrun | |

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.

Image Captions

2 Comment(s) | Posted | by Ashley Bennett | |

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
});

The HiFi Snippet Library Has Launched

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

HiFi Snippets

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!

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:

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

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 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

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.

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.

Update: GetHiFi.com 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!

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:

HiFi theme editor is based on Skywriter: http://docs.gethifi.com/walkthroughs/beta-welcomeOct 01 via Socialite.app

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!

Accepting Applications for Private Beta

2 Comment(s) | Posted | by Clay Schossow | |
The long awaited day is here.  After a year of building, testing, and refining, HiFi is entering a private beta.  While we have put more than twenty of our own client sites on the system, we have not previously opened it up to outside developers.  We learned a lot from our own clients and how they used the system -- after making tweaks based on their feedback and resolving bugs they ran into, we're ready to open the system up to the rest of the world.

While we had originally hoped to enter this phase earlier in the year, we didn't want to rush the product and release something that wasn't fully ready to be used.  To us, a complete and polished system is the minimum viable product that you would expect from a CMS.

Fill out an application here to join the beta.  We're screening applications to make sure we get a wide breadth of users and projects, and to make sure HiFi is the best fit for what you're working on.  We'll begin rolling out beta accounts to selected users at the end of the week!

Beta accounts will be free to selected applicants.  Beta users will have access to the standard HiFi  setup, including unlimited access to the CMS, full use of the API and templates, and hosting of the site on HiFi's dedicated server (includes daily offsite backup, RAID, 24x7 uptime monitoring by pingdom, and more).

We really think that HiFi is a phenomenal product, representing a new type of CMS for developers.  Here is just a short list of some of the features ready for you to take advantage of:

We'll be posting more on each of these features in the coming weeks.  We've been having great success using them for our own clients, but are excited to hear feedback from the beta group.

We want to thank everyone for their patience while we've been building a system that we know will be a welcome addition to the web publishing space.  Your support and dialogue has been extremely helpful in pushing this project to beta.
 
Now, go sign up, get a free account, and enjoy!

 

We Are Featured on Design Shack Gallery

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

This site was just featured on Design Shack, a gallery of the best designs around the web.  Currently, we're holding down a solid 8.5 rating based on user votes -- we encourage you all to go check out the listing and rate our design.

This listing is yet another testament to the flexibility of HiFi CMS.  It demonstrates that a design can be detailed and perfected enough to be listed in respected galleries, and still be managed by a powerful CMS.  So many systems restrict what you can do with the templating that you could never launch something worthy of being featured on a popular showcase.  We took the opposite approach, allowing free templating and pushing web standards, which makes it easy designers to publish work that can be highlighted on design, HTML, and CSS galleries around the web.

If you're visiting from Design Shack -- welcome!  Take a tour around the site, learn about the system, and be sure to sign up for updates and announcments.

Thanks again for all of your support!  Also, a big shout out to Lenny Terenzi who put together the HiFi design!