Why State Health Insurance Exchanges Need CSS Frameworks
March 1, 2012Using a CSS framework to cut down on front-end coding and testing.
With the Enroll UX 2014 deliverable just a couple of months away, state health insurance exchange managers and vendors continue to wonder: how can we most easily leverage this incredible (and free!) design work? Implementing the UX2014 deliverables is a good news/bad news scenario.
- The bad news: implementing any large scale project of this magnitude—especially one requiring you to mesh together 3rd party deliverables with your own state-specific needs—is frankly daunting. In most cases there is existing UI that will need to be reskinned (at best) or reworked completely to accomodate the design guidance of UX 2014.
- The good news: (and yes, there is plenty of good news) is this moment represents the rare start-over opportunity for a website, when you're finally allowed to scrap restrictive legacy site code and start fresh...
Enter off-the-shelf CSS frameworks. They can ease the pain of a big implementation, speed up the (re)design process, and set the stage for the next 3-5 years of code and features. And the best news? They're easy.
What are CSS frameworks?
"CSS frameworks are pre-prepared libraries that are meant to allow for easier, more standards-compliant styling of web pages using the Cascading Style Sheets language.... Like programming and scripting language libraries, CSS frameworks ... provide a number of ready-made options for designing and laying out the web page."
–Wikipedia
In plain English, a CSS framework is a zip file of CSS files and images plus sample HTML pages that help a web site or web app get built faster. They are a scaffold or "quick-start guide" for building great looking and functioning websites.
Frameworks come with this kind of stuff, ready to easily implement!
Why should they be used on a health insurance exchange?
Like any web app, a Health Insurance Exchange is going to contain hundreds of pages, dozens of modules, and countless templates, buttons, text callouts, and forms. Having a CSS framework under the skin of the site will save time in implementation, testing, debugging, maintenance, and future enhancements.
Additionally, having standardized designs and code methods from the get-go means different developers can build features—all with the same consistent look and feel. Not only does this consistency save time, money, and frustration, it's important to remember that UI consistency is a powerful feature in itself.
CSS frameworks, among other things, are like style guides for developers. They happily supply ready-made solutions, allowing developers to focus on the big stuff.
In reality though, many (all?) implementation teams are working with existing software platforms, adapting them for the 2014 exchange requirements. At the task level, the challenge is to update the existing front-end code to follow the conventions of the CSS framework. With this investment, a vendor will see some immediate benefits:
- Speed: Decrease in time spent writing CSS and HTML code
- Documentation: Decrease in time writing documentation for front-end code (since there is less "custom" code created by the developers)
- Cross-browser: Decreased in time debugging browser-specific layout issues
- Flexibility: Increased efficiency in creating new pages and layouts
- Mobile-friendly: Built-in compatibility with mobile devices
- Maintainable: Framework is easily upgradeable to ensure site continues to work with latest browsers and devices
Do as I say, not as I do
New Spin Design was the user experience design provider for the Massachusetts Health Connector, America's first state health insurance exchange. OK, that's a fancy way of saying we did the website design, HTML coding, CSS coding, usability testing (and retesting).
During our engagement, we spent countless hours writing custom HTML & CSS, debugging layout issues, creating buttons, etc. While it was necessary for us to 'go custom' (the Health Connector's under-hood technology was not well-suited for a CSS framework), in a perfect world, we would have used a CSS framework. Things would have played out differently. We would have had spent:
- More time for user testing
- More time for designing awesome interface
- Less time writing code and debugging.
Our pick: Twitter's Bootstrap
An article that compares and contrasts CSS frameworks this is not. But in short, we're pretty keen on Twitter's Bootstrap CSS framework. It is dead-simple to set up and create custom layouts. The standard buttons and icons are both slick and clean, design-wise. And its documentation is solid.