Dave and Travis had me on their show to talk about Aware.js, Breakpoints.js, reader aware design, your back catalog of content, and Packagr. Learn the secrets of my career, hear me rant about blog archives, and as a special bonus, find out how our BBQ pit keeps their meat secure overnight.
The core idea of reader aware design is that interactive experiences can and should respond to the specific characteristics of a user and their context. Previously, we discussed using details of a user’s relationship with a site — are they a first time visitor, or an every day regular? Now, we move beyond the site, breaking away from a user’s digital context to their analog, real life context: is this person at home? At work? In bed? At lunch? How can your site best serve readers in these different environments?
Aware.js will now add CSS classes like “morning,” “earlyevening” and “latenight” to a site, empowering designers and developers to create variations in the design and content that relate to the natural cycle of the day. Tapping into these hints about the reader’s context outside of the computer screen will help to improve the visitor’s experience, and offers new opportunities to publishers who want to experiment with packaging and presenting their content for different use cases.
With this new functionality, Aware.js enables features like:
- Create subtle changes to the mood of the site that relate to the time of day - for example, changing the background color or header of the site to match the color of the sky outside.
- Adjust the brightness or contrast of pages late at night, when users are likely to be reading in darker rooms.
- Reflow content to create an “evening edition” of your site, highlighting the most important stories of the day.
2012 was an enormously productive and successful year for XOXCO. Though we can’t discuss the details of the majority of our projects, here are some of the highlights:
In January 2012, the brand new, responsive design that we built for The Grammy Awards launched. We worked with our friends at Lullabot on this project - they handled all the backend development, while we built a completely custom responsive Drupal theme from the ground up. See Grammys.com.
Also in January, a new responsive design for Safari Books Online hit the web. We worked with Lullabot on this project too! See SafariBooksOnline.com.
In March, April, May, June and July, the XOXCO team worked with REDACTED to create a Drupal-powered API server, and an HTML5 Chrome application client which used the Ember.js framework. You can read a bit about our experience with Ember here.
In August and September, we worked again with Lullabot to create an HTML5 framework that powers 30 high profile mobile websites for REDACTED. Boy, do we wish we could talk about this one! We built a framework that allows each of these 30 sites to pull in their own set of data from a variety of structured data APIs, several of them providing real-time data, and to present all of this information in an app-like mobile website that can have its look and feel customized via a Drupal interface. Fancy!
In October and November, we built an HTML5 magazine for REDACTED. The magazine is powered by a Drupal API on the backend, and a completely custom HTML5 client on the front end. The work we did on this magazine continued our exploration of using Drupal as an API server only, keeping all of the layout and content presentation in the HTML5 app.
Finally, in November we launched a redesigned and rebuilt Pando Daily, and introduced the world to the idea of reader aware design - the idea that websites can and should look back at their readers. We followed this up with the release of Aware.js, a tool that lets any site become reader aware.
Some broad lessons we learned in 2012:
- The only job your CMS should do is manage content. Stop building PHP theme files and custom CMS plugin hacks to build your website, and let the CMS simply serve up content to a separate layout engine.
- Responsive web sites are great, but technology is moving so fast, and device release schedules are so tight that even the fanciest media queries cannot keep up. Clients do not care about browser makers and OS versions - they simply want their content to arrive in perfect condition. Stop building web sites, and start building platform agnostic content delivery tools.
- Responsive moves in both directions - much smaller screens AND much larger screens. We had two clients who wanted their sites to adapt from 300px wide all the way to 1800px wide.
- Reverse chronological streams of content (that is, the blog format) don’t work as well as they used to. Readers demand personalized, curated and direct access to the content they care about - and that might mean serving them up something that is NOT the newest post.
We are looking forward to new adventures in 2013. XOXCO will continue to work on new reader aware design tools and techniques, and we’ll be engaging directly with publishers to help them go beyond the limitations of their content management systems and traditional web publishing platforms to create exciting new digital experiences. Keep an eye on our blog for more!
Last week, I wrote about the concept of reader aware design - the idea that our content websites can now look back at us and alter their layout to best suite our needs as readers without requiring us to login or create accounts.
Today, I’m excited to announce the release of the first version of Aware.js, a jQuery plugin that implements many of these features, and enables developers to apply techniques first used in responsive design to these new reader contexts.
What does Aware.js do?
- Adds CSS classes to identify various classes of users: new visitors, repeat visitors, and repeat visitors who are making their first visit of the day.
- Flags content that is new to the reader for easy CSS styling.
- Inserts relative bookmarks into the content stream to clearly indicate what a reader has already seen.
We’re releasing Aware.js now to continue the conversation about reader aware design, and to collect feedback and suggestions from the community. What other information might Aware.js provide about a reader? How will you use these tools and techniques on your site? We’d love to hear from you - Send us a tweet to @XOXCO!
As with any framework, there are tradeoffs, and we expected some complications to come along with the magical benefits Ember offers. Coding Ember applications is easier than building everything from scratch using jQuery, but performance and low-level optimization suffers. Overall, we’re going to be extremely cautious for now, and we’ll continue to explore alternatives like Backbone.js, which may offer a lot of the same benefits with less overhead and mystery.
The whole team has been working together on our current big client project. Half the time is spent building a Drupal-powered content management and community moderation tool that exposes a RESTful JSON API to the outside world. The other half of our time is spent building an HTML5 client application that ingests information from the API and creates a dynamically generated interface to the features and content. We’re really excited about using Drupal in this way, as it provides the best and most flexible content management tools we’ve seen. And exposing all of the Drupal data via a JSON API means we do not have to spend time building a custom Drupal theme — all of the customer facing screens are built in the HTML5 client. This allows us to separately develop and scale these two components separately, and means that it will be substantially easier to build new clients that talk to the same server APIs. And most importantly, it means that nobody at XOXCO will ever have to spend time mucking about with PHP template files!
This project runs through mid-July, and then we’ll be spending some time as a team to finish up Damien’s creation, code named “Sharky.” We’ve also got an exciting R&D project ongoing that we hope to debut in coming weeks. More on that soon.
In the meantime, I’ve been interviewing candidates for our design position, as well as for our summer internship. I’m very pleased with every single person I’ve interviewed, and I’m sure this will prove to be a very difficult choice to make. Through this process, I’ve honed my description of how we work at XOXCO and what we hope to achieve as a company, and it is very gratifying to hear from candidates that it sounds like a fun, creative place to work. I am still interviewing candidates, so if you are a designer in Austin looking for a crazy new place to spend your days, get in touch!
That’s it for week #203 of XOXCO, Inc.