Andy Chung

1. 14 Mar, 2011 - "BookClub"

   

   First thing’s first, here’s the demo (Firefox only for now, sorry edit: As of May 4th, 2011 this demo works in Chrome, Safari and Firefox), use J and K keys to navigate and enjoy a story by Chuck Palahniuk.

   BookClub is my initial exploration into long form reading and typography within the browser. I want to clarify that for now this is a proof of concept intended for the desktop browser, and optimizations are not yet made for mobile devices.

   Motivations

   There were several factors driving the motivation for this side project:
   → Blogging and micro-blogging are easy to do on the web, though there seem to be few outlets for long form writing and fiction
   → Scrolling is a disorienting experience for long pieces of text in a singular column
   → Page/card flip interactions feel awkward, are a poor use of visual metaphor, and turn into visual kitsch after time

   Solution (thus far)

   → Create a rhythmic flow to pagination that feels native to the browser
   → Maintain constant start and end points of text and pages to ensure the readers eye always follows the same path

   Execution

   BookClub ensures that each “page” is exactly the dimensions of your current browser frame, allowing for content to fit perfectly within each page. BookClub then generates the correct number of pages based on your browser height.

   Pagination is achieved by simply pressing the J or K keys, which scrolls to the next page. By animating the vertical scroll we achieve two things:

   → A visual cue indicating a change in content
   → Animated pagination that feels natural to the browser (no need for over the top 3D animations, scrolling feels smooth/fast/natural in a browser).

   By creating this vertical pagination we create a reading rhythm which is lacking in long single column layouts. It is easy to pick up from where you left off when you scroll to a new page, unlike traditional scrolling which can leave the reader searching for where they left off.

   Future

   I’m interested in developing this layout for use with strictly literary content, such as creative writing/essays/short stories. Blogs do well with image reliant content, and simply put I don’t know how to reliably handle inline images.

   Issues

   This is simply a proof of concept and there are many issues that need to be addressed:
   → Basic word search is broken
   → Must be optimized for mobile devices using media queries and be touch/gesture enabled
   → Resizing the browser window does not resize the pages currently
   → No real way of controlling widows or orphans with CSS columns (this is annoying, but I feel that scrolling is a bigger annoyance than a few typographic faux pas).
   → Issues with the order in which the page is generated in webkit

   Further Reading

   → BookClub project page Link
   → BookClub on GitHub Link
   → Information Architects, cards vs scroll Link
   → Craig Mod, bibliotype Link
   

1. andychung posted this

Archive