Now that Hoop.la 2.0 has been in the wild for about a month, I wanted to give a bit of a deeper look into the technical underpinnings that power the platform. The Hoop.la 2.0 release involved redesigning, from scratch, every single component of the front-end web interface and back-end control panel in order to make it fully responsive. The ultimate goal was to provide a unified, consistent experience regardless of what type of device you use: desktop computer, laptop, tablet, or mobile phone.
The Hoop.la 2.0 project was the most significant development project in Hoop.la's history, and we wanted to make sure we took the time to do it right. We considered a wide array of new web technologies and frameworks in our quest to further improve upon Hoop.la's ease-of-use.
We ultimately decided on the following suite of new tools:
- Foundation For Sites 5 (Responsive Design Framework)
- Sass (Dynamic CSS Generation)
- FormValidation.io (Client-side Form Validation)
- TinyMCE 4 (Rich Text Editor)
- jPlayer (HTML5 Video and Audio Player)
Sass enables Hoop.la to dynamically generate CSS stylesheets based on your theme settings, enabling a very simple theme control panel while still allowing customization of everything you see through custom CSS.
FormValidation.io adds client-side, dynamic form validation to warn users about form issues before they even submit the form. It also supports providing positive feedback about form fields that are filled out properly by applying a green border and a green checkmark to text input fields, where applicable.
TinyMCE 4 is the workhorse behind the content creation process in Hoop.la 2.0. It's a major upgrade from TinyMCE 3 that was used in Hoop.la 1.0, and provides an easy-to-use interface for the most novice users while also providing an extensive set of formatting tools and options for the most experienced content curators.
jPlayer provides the engine that powers the new HTML5 video and audio players in Hoop.la 2.0. Gone are the days of the Adobe Flash video and audio player; by using HTML5, Hoop.la's new media players provide cross-platform compatibility with all devices. The video and audio player skins are fully responsive to ensure they look beautiful and work perfectly regardless of what device you use.
In reconsidering and rewriting every aspect of Hoop.la's interface from the ground up, it gave us the opportunity to re-invent the platform in a way to provide a very powerful and extensible framework that will accelerate product development for years to come.
Photo Credit: BinaryApe