We now use the internet on a diverse set of devices, and these new devices afford us opportunities to read web material in contexts far beyond the traditional desktop monitor.
Instead of nervously reloading our favorite blogs throughout the day, we might choose to read the news once a day, in the evening on our tablet. Or, we might check catch up via e-reader a few times a week while offline on the train. These different reading contexts give us clues as to how the person is using the site, and what sort of content makes most sense to present.
Presenting everything as a reverse chronological stream of posts made sense when we knew our readers were sitting at a desk, hitting reload on 30 tabs all day long at work. Does it still make sense when content arrives on an e-paper watch, an Xbox or a tiny slip of paper?
Meanwhile, enormous piles of data are being collected about our browsing habits. When do we visit? What have we visited recently? This information is squirreled away in the cloud in order to better sell us things. Instead of just handing all that data over to Google and Facebook and Twitter, sites should leverage some of it to enhance the reading experience.
In addition to becoming device aware through responsive design techniques, our sites should also strive to become reader aware.
Here’s a few simple examples of what we can do to make a typical blog type site more reader aware:
Imagine how fast your site would be if it served the same static markup to every user!
An important item to stress about reader aware design is that no user accounts are necessary, no logins required. Visitors to your site should not be required to create accounts — thus creating more security holes — just to get a slightly personalized view of the content. And developers should not need to build custom CMS plugins or widgets to deliver these new features. The CMS can be left to do nothing but collect and serve content, while more complex customizations are handled by the client.
XOXCO is currently engaged in several projects to help publishers make their sites more reader aware. We are excited to announce the launch of the first one today!
For the last few months, we’ve been working to apply some of these ideas and techniques to a brand new responsively designed, reader aware, HTML5-powered redesign of Sarah Lacey’s tech journalism site, Pando Daily.
We started by trying to answer real questions about Pando Daily’s content and audience:
We’re building this new design in an age of flying toasters, so we wanted take advantage of the new capabilities available to us. We wanted instant, app-like page loads. We wanted reader aware design personalizations. We wanted a completely responsive interface. And the whole thing needed to run within the constraints of an off the shelf Wordpress VIP site.
Regular readers will soon notice “New” flags appearing in Pando Daily’s “Ticker” to indicate the content that’s been published since their last visit. We’ll be bubbling up featured content from the archives personalize for each reader. And I am particularly proud of the weekly recap footer, which, by simply using the :visited CSS pseudo class, helps a reader get a birds eye view of the week’s news. All of this is achieved using a straightforward static Wordpress theme - all of the personalization is done in the browser!
Beyond the customizations, browsing articles on the site should feel significantly faster — most of them appearing near instantaneously as you hop article to article. There’s no technical reason smartly made web publications can’t respond as instantly as users expect native applications to do. We also made sure that the experience of reading Pando Daily is just as stellar on a smartphone or tablet as it is on the desktop, all with a single responsive design.
We’re pretty excited about the work we’ve done for Pando Daily, and we’re excited about the work still to come! Look for more reader aware features to appear over the next few weeks.
Special thanks to XOXCO team members Bushra Mahmood and Adam Mathes for designing and then developing the site.