Notes

News, links, research, and product announcements from XOXCO in Austin, TX.

  1. Reader Aware Design

    Update: We released Aware.js to help make your site reader aware!

    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:

    • If we recognize a visitor as a repeat visitor, we can highlight content that is new to that visitor.
    • If we recognize a repeat visitor who has not visited for a few days, we can present a recap of the week’s top stories.
    • If we see that a visitor is making her first visit in the evening, we can re-order content to reflect a more logical progression through the material - perhaps resorting to show the news in chronological order instead of reverse chronological.
    • If we know what pages a visitor has and hasn’t seen, we can clearly indicate that.
    • If we know what a user saw when he last visited, we can insert a relative bookmark in the page to remind him. Mlkshk is the first site I’ve seen that does this.

    It used to be hard to do these things, primarily because data about readers could only be stored on the server, and customizations to content, functionality and design had to take place via server side scripting. Developers had to toil for hours building application logic into server-parsed PHP templates - a different tempting system for each CMS! This meant that popular sites would have their servers put under a lot of stress, building and rebuilding the same pages over and over for each user. This is no longer true! With the clever application of Javascript and CSS, even pages built statically or served from a cache can be customized in the browser for each user. 

    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:

    •  How can we present a mixture of fast moving syndicated content and slower moving original essays?
    • How can we serve a diverse set of reader needs, including hourly, daily, and weekly readers?

    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.

    posted 1 year ago on Nov 19, 2012 | Permalink | 22 notes

  2. Tumblr Notes

    1. jalbertbowdenii reblogged this from xoxco
    2. jeanniechristensen reblogged this from xoxco
    3. trenchant reblogged this from xoxco and added:
      We now use the internet on a diverse set of devices, and these new devices afford us opportunities to read web material...
    4. attheageofdecay reblogged this from xoxco
    5. otwas reblogged this from xoxco and added:
      Proud of my pals at
    6. benbrown reblogged this from xoxco and added:
      We now use the internet on a diverse set of devices, and these new devices afford us opportunities to read web material...
    7. xoxco posted this

Receive XOXCO's curated broadcast of original essays and links about product design, publishing, and software. Featuring exclusive links to experimental software and limited edition digital downloads.