Comments on A Simpler Page

27 Reader Comments

Back to the Article
  1. An interesting article, and a good looking framework. One nit, though; near the top of the master CSS file I see:

    bq. font-size: 62.5%; /*—Sets 1em to equal 10px—*/

    No, no it doesn’t; it means that 1em might be 10px on some browsers and configurations, but might be all kinds of other things, but whatever size it is, it will almost certainly be too damn small.

    This bit of CSS is particularly pointless here as the CSS file then goes on to define the font sizes directly in pixels (which is the correct thing to do, if you want specific pixel sizes); so it probably has no effect, but if it does have any effect, it will be a negative one (because it is based on the false premise that 62.5%=10px).

    Setting the font size to 62.5% is a kind of CSS cargo cult, included due to a mystical belief that it has some useful effect, without any understanding. I hope that 2011 can be the year in which we finally break free from its grip.

    Copy & paste the code below to embed this comment.
  2. “Or, with smart phones, at arms length.”

      This is not true. And the perception that mobiles are just tiny desktops—the whole “tiny glowing rectangles” understanding—is flawed and explains why lots of mobile web design is badly flawed.

      Mobiles are also contextually used. Video tends to draw people in, and they pull it close enough to their head to simulate TV viewing angles, as I exemplified here:

    http://www.littlespringsdesign.com/blog/2010/Mar/video-on-the-second-third-and-fourth-screen/

    This was before anyone normal had an iPad, hence it’s not included.

      And bed is a good tablet context, because it’s been a good mobile use context for years. Analytics for a lot of sites (especially social ones, like Facebook) see a slow drop off in use as people hit bedtime in their timezone. Then there’s another peak as everyone checks in one last time before they go to sleep.

      This is a different distance, often in the dark, and probably is different content being checked. You can design around that.

    Copy & paste the code below to embed this comment.
  3. I have be working this version of the Tale of Genji which is as readable on my Droid as my desktop and my iPad.
    http://www.personal.psu.edu/jxm22/genji/
    (I still have some corrections to make in the last 30 chapters.)

    What would you change to make it more useful?

    Copy & paste the code below to embed this comment.
  4. Thanks for your work and attention to these details! Looking at the demo, I was immediately struck by the lack of orientation once I got into the heart of the text. On a customary page, I am always *positioned* somewhere, like one side, bottom, etc. This is critically important in going back to a remembered passage, or resuming reading after taking a drink of tea. In your browsing system, no landmarks provide this help, since the text is continuously scrollable.

    I guess I would have two suggestions. One is to supplement the paragraph breaks with blank lines. That might lessen the sensation of being adrift in a sea of text. This method is common on web sites now. Second would be to provide some kind of graphical landmarking system, like colors that darken as one moves through an article or chapter, or small symbols, etc. Some anchor for the reader to find their place other than counting page numbers, or recognizing the actual text they were reading.

    Copy & paste the code below to embed this comment.
  5. I know you’re handing this off as a template for others to do with as they please, so might not be interested in this, but I found it non-intuitive to determine which buttons were the currently selected ones in the menu.  I don’t think the darkened buttons have the effect you desired, which I think was to represent a pressed-in button.  In contrast, the white buttons, which are actually my options for changing the current display, jump out at me as “the ones currently in use.”

    Copy & paste the code below to embed this comment.
  6. This is really exciting. Since that article on hyphenation and justification a while back, I had been thinking that hyphenator.js might be a tool best used for mobile devices.  That article got a lot of flack for promoting hyphenation and justification without a purpose other than aesthetics. It seemed to me that if hyphenated and/or justified text should be used only when space is at a premium, unlike on a desktop browser, then mobile devices are the perfect use for it. I was looking into the combination of those practices with media queries, so that a regular article on your computer becomes something best suited to a tablet or phone.

    It seems like Bibliotype might be a great tool for this, I can’t wait to check it out.

    Copy & paste the code below to embed this comment.
  7. @voyoudesoeuvre —

    bq. font-size: 62.5%; /* — Sets 1em to equal 10px — */

    bq. No, no it doesn’t; it means that 1em might be 10px on some browsers and configurations, but might be all kinds of other things, but whatever size it is, it will almost certainly be too damn small.

    bq. This bit of CSS is particularly pointless here as the CSS file then goes on to define the font sizes directly in pixels (which is the correct thing to do, if you want specific pixel sizes); so it probably has no effect, but if it does have any effect, it will be a negative one (because it is based on the false premise that 62.5%=10px).

    bq. Setting the font size to 62.5% is a kind of CSS cargo cult, included due to a mystical belief that it has some useful effect, without any understanding. I hope that 2011 can be the year in which we finally break free from its grip.

    Interesting. Thanks for bringing this up, as it’s indeed a habit / relic of my CSS reset rules from eons ago.

    Actually, 95% of the font sizes in the CSS are set in ems specifically for the sake of relativity. I mainly use px for a couple of specific elements whose size I don’t want to change.

    If you want to submit an updated, working CSS file for the repository I’d be more than happy to take a peek and incorporate the changes!

    Thanks,
    Craig

    Copy & paste the code below to embed this comment.
  8. @shoobe01

    I said: “Or, with smart phones, at arms length.”

    And you responded:

    bq. This is not true. And the perception that mobiles are just tiny desktops—the whole “tiny glowing rectangles” understanding—is flawed and explains why lots of mobile web design is badly flawed. Mobiles are also contextually used. Video tends to draw people in, and they pull it close enough to their head to simulate TV viewing angles, as I exemplified here:

    Great points. Although, video and text are very different beasts. Because the screen is so small on mobile devices there tends to be only *one* highly optimized reading size. Too small and the text is microscopic, too large and you only fit a couple words per line in a best case scenario. Not very readable. Certainly not for longform texts.

    Considering that (optimal mobile device text size being fixed within a relatively small range), the optimal reading distance, too, is fixed within a relatively small range.

    Copy & paste the code below to embed this comment.
  9. @Jerrold Maddox:

    bq. I have be working this version of the Tale of Genji which is as readable on my Droid as my desktop and my iPad.
    http://www.personal.psu.edu/jxm22/genji/
    (I still have some corrections to make in the last 30 chapters.)
    What would you change to make it more useful?

    Looks great! I am a huge proponent of stripped down simplicity.

    I don’t think Bibliotype is that complicated though. It’s attempting to achieve the most base level of reading optimization — three type sizes for the three general use cases, as applied to two orientations. You can’t get (much) simpler than that.

    What you have with your Genji text is an instantiation of one of those text sizes for one orientation. And arguably for one device (it’s readable on all devices but perhaps feels most optimized for one more than the others? (I haven’t tested it so I can’t say.)).

    With a few more CSS rules, Bibliotype could be extended to iPhones / Android and thus, a text, marked up as you have, combined with a pretty simple CSS file and some very simple Javascript would allow for a more optimized reading experience on a number of platforms.

    It’s only a very small amount of complication (and almost no markup change) above what you present, but, I’d argue, brings with it tremendous benefit to the reader.

    Thanks,
    Craig

    Copy & paste the code below to embed this comment.
  10. @jblaine:

    bq. I know you’re handing this off as a template for others to do with as they please, so might not be interested in this, but I found it non-intuitive to determine which buttons were the currently selected ones in the menu. I don’t think the darkened buttons have the effect you desired, which I think was to represent a pressed-in button. In contrast, the white buttons, which are actually my options for changing the current display, jump out at me as “the ones currently in use.”

    This is a great point. After staring at things for a certain time, you lose the ability to see with fresh eyes.

    I’ve updated and pushed the CSS changes.

    Copy & paste the code below to embed this comment.
  11. Try loading that demo up on an iPhone or other small screen device and it’s a mess. Text is jammed up against the edges with no padding, and font size is very small. The menu “tab” blocks content.

    Maybe this is a great ipad design (I’ve never even seen one so I don’t know) but wouldn’t a better goal be to create a design that looks good on any device? Or at least a good chunk of them.

    Perhaps I need to become a wealthy hipster who takes trains to Europe with my iPad before I can really appreciate this? ;)

    Copy & paste the code below to embed this comment.
  12. I found some bugs with the demo menu. I click menu then clicked the hyphenation toggle. then closed the menu, and opened it again. When I click Georgia the hyphenation toggle button changes. Was able to repeat it many times. Using Chrome. Could make a video if you need.

    But I’m a bit confused. This is a long-form text reader, but you only have one chapter in the demo? Why not show how to navigate around in the larger work?

    Also find scrolling to be annoying, because it’s hard find your place again everything you try and scroll a full-page forward. I’d prefer some next page button, which shows the last 2 or 3 sentences from the previous page at the top.

    >The inconsistency in which the physical page is mimicked on a tablet leaves readers disoriented, unaware of their position in the context of the greater whole, and unable to easily scan back.

    really? Usually you can just swipe to go back. Page numbers, or bullets like the NYT example, let you know your relative position. Seems to be making an issue out of a non-issue. Most readers want a rough idea of the entire length. When they swipe I think they understand they are one page further than the previous page and one page closer to the end.

    Regarding the menu, for “Size” I’d prefer to see “Small, Medium, Large”. ‘Bed’, ‘Knee’ and ‘Breakfast’ are less intuitive and require a much greater cognitive-load to decipher.

    Also the terms “Ragged” and “Justified” are maybe unfamiliar to non-designers. Maybe use icons to show the difference like in most word processing apps?

    Same thing with FAMILY. Would call it ‘Type-style’ or ‘Font’. Even though Font is not technically correct, it’s more familiar. “FAMILY: GEORGIA” is likely to sound unfamiliar to non-designers.

    Finally, for Hyphenation: “TOGGLE”—how about a slider to turn it on/off like iphone. A toggle button is less clear especially when gray is not the disabled color but the selected color(?!) In the article BED and BREAKFAST are both white, so grey is the selected color? but in the App demo it seems the other way around. The menu really needs some work.

    Copy & paste the code below to embed this comment.
  13. The latest ePub proposal is “a convergence of HTML5, CSS3, and ePub”.
    Well, why the ePub part? Are browsers not ubiquitous enough?
    Having discussed this with people knowledgeable about it, the best I can determine is that ePub is a spec that would have already died were it not for 1) the easy conversion of epub files to HTML for in-browser viewing and 2) DRM.
    ePub was conceived when expectations about for-pay content were much higher than they are now. And while the publishers futzed, the web zoomed right past. (As for the DRM - you *can* always require a login and charge money on the web. It does work sometimes.)
    And so, ePub has been two steps behind for years.
    But there is a consortium dedicated to it - ooh, ahhh - and the meme of “electronics books”; the idea that a special format for books is somehow necessary in light of where web standards are today, resists extinction.
    To some extent I get the feeling that ePub is a new twist on the debate about high-culture versus low-culture where “good literature” needs a *dignified format* of it’s very own. None of that lowly web site stuff.
    And so, ePub trucks on to prove points that were thought to be relevant 10 years ago.
    In other words, I don’t get it.

    Copy & paste the code below to embed this comment.
  14. Yes, like Richard Fink: why ePub?

    Also, I would reduce the menu options. Simplicity! The size options are a bit silly. I would never have guessed what they could mean without reading the article first. Justification, hyphenation and font-family are too geeky for most readers. Are readers (non-designers) really interested in changing those? A button that says ‘toggle’? (Don’t make me think!)

    When you click in the text on a footnote, you land on the list with all footnotes. I miss a mechanism to return to the text where I left. Footnotes at the bottom of a page are so ‘print’. with a bit of javascript, you could open and close them inline, in the text.

    Copy & paste the code below to embed this comment.
  15. Great article, Craig. And thanks for sharing your framework.

    Another interesting aspect of the reading experience on screen is how reading progress is presented to the reader. We recently did a little lab project on this which might be interesting for you:
    http://blog.intuitymedialab.eu/2010/12/22/ux-lab-how-can-we-enrich-the-reading-experience-on-a-screen/

    It fits quite good to one particular aspect of your article:

    bq. Presently there’s a clear rift in iPad editorial design. There are those applications—iBooks, Kindle, New York Times, Wired, The New Yorker—that attempt to transpose a type of print design built around physical cues to a screen lacking those same cues. They treat the boundaries of the iPad screen like the edges of a printed sheet of paper—sometimes awkwardly forcing content into columns which aren’t optimized for the canvas.

    Copy & paste the code below to embed this comment.
  16. Very interesting post. And the framework is very good too!
    Have you use it in your projects ? We use PX instead of EM. We will think about changing.

    Thank you so much.

    Copy & paste the code below to embed this comment.
  17. I found a bit confusing the layout of the page a bit confusing.

    Copy & paste the code below to embed this comment.
  18. i’m glad people are not just
    swallowing this article whole
    as “the accepted word”, but
    rather challenging every bit…

    and i’m glad you’re big enough,
    craig, to roll with the punches…

    there’s a lot of stuff wrong here
    —a lot—so much that i am
    not even going to start in on it,
    i’ll just hope that your openness
    to feedback and your commitment
    to thinking about this topic will
    —in the long run—steer you
    to a much better formulation…

    -bowerbird

    Copy & paste the code below to embed this comment.
  19. Love this stuff. It’s funny; we’ve got text-shadow and text-transform practically in the bag while the more foundational aspects of readability are much farther on the experimental side.

    Re:why epub—awareness of things like epub3 and projects like hyphenator and bibliotype help to push forward development of the nitty-gritty details in typography like hyphenation, proportional small caps, etc. I have dreams of being able to set keep options and justification/hyphenation options and rely on some kind of browser “text composer”:http://help.adobe.com/en_US/InDesign/6.0/WSa285fff53dea4f8617383751001ea8cb3f-6d97a.html#WSa285fff53dea4f8617383751001ea8cb3f-6d96a

    Copy & paste the code below to embed this comment.
  20. Despite the fact that I do prefer page listing for reading books, I just thought about using Bibliotype for blogs and other online content.

    Thus I tried to create a Bibliotype Template for Blogger and “here is a working demo”:http://bibliotype.blogspot.com

    I made few changes in your code, but otherwise it works and looks just fine!

    Thanks for the article!

    Copy & paste the code below to embed this comment.
  21. I noticed you mention of “Designing Books” by Hochuli and Kinross, and I have to mention you spelled Hochuli wrong. Though your discussion makes a point about designing for a tablet, well, tablets predate the codex, or books with spines. I find your use of references to say, grids as scaffolding and the like charming but a little distracting.
    I found this blog on a search to Medialoper with mention of your typeface Bibliotype, I think it’s called, and I find it to be, and I know I am just judging from the one word sample, but it is enough to give me its visual style, rather compressed. The ascenders and descenders are so short. I assume this is to facilitate getting more lines on a page. But if we are to have text on tablets, why can’t they be modeled after some typefaces of elegance such as those of Jan Van Krimpen http://typocurious.com/jan-van-krimpen/ If you visit this page you will find samples of faces with healthy ascenders and descenders, like Van Dijck. Well proportioned typefaces will, I think, help to bring attention to your design as well as perhaps give the new tablets some readability as well as desirability.

    Copy & paste the code below to embed this comment.
  22. This is a step forward in typography for the web (and not just tablets), great to see the nuanced approach this allows. Definitely going to try Bibliotype, and I’m wondering how it’s going to help reading/layout on smartphones too.

    Still amazes me what people create for free :)

    Copy & paste the code below to embed this comment.
  23. “Bibliotype: a template” part little comfused to my mind.  but article have so much detail informations,  thank you so much…

    Copy & paste the code below to embed this comment.
  24. This was a really helpful article. I am a graphic design student and I am currently taking a web design class trying to find different ways to design an interactive digital book. While it may lack the experience of flipping the pages, folding a page down, it definitely has the potential to mimic such tangible experience.

    However, I definitely agree with you the fact that by mimicking the book sometime only leaves readers disoriented and may limit the possibility of enhancing the reading experience that can only be done digitally. Hence we as designers must find ways in which the layout of the book fits accordingly to the tool (computer screen or ipad) and optimize reading experience of the user.

    The beauty of digital book is that its flexible. Font sizes, margins, contrast backgrounds, the way the text is placed can be personalized according to user’s preference. I think its a great solution to have the reading experience change according to the place and time user is at (bed, knee or breakfast) It definitely humanizes the ipod or electronics and brings intimacy in a way different from a regular book.

    Copy & paste the code below to embed this comment.
  25. I read every word, twice. Thanks for this, its good to see cogent effort for the true word, and more is needed for sure. For numerous reasons i have chosen a landscape swipe tactic ( video playback is part of what i do in there ) and have found the “baked-in” graphics as text the way to get it done… but i would love to escape that. ( a lot or “Magazine” Native ipad apps are in fact just a pile of PNG and i get lost in that easily. )

    Its important to know where you are in any kind of Publishing, visual, text , multimedia or otherwise. After just getting http://ctnhd.com/amc/twd/ipad up and ready for a TV show promo, i am wishing that all these things you point out were available and ready standard frameworks, so i could do the showmanship without the CSS3 hacking and trial-error cycles being the prevalent workflow. I will follow this and possibly contribute when i have a solution that doesnt feel like a hack-to-get-done framework.

    Copy & paste the code below to embed this comment.
  26. ...and not getting any easier.  For small business owners like me, who must do a lot of the work ourselves, we hunger for a simple, robust solution that doesn’t require a $10,000 programming project.

    - Tim
    “San Diego County In-Home Caregivers”:http://www.trustworthycare.com/services-for-the-elderly-in-san-diego-county/caregivers-in-san-diego-county/

    Copy & paste the code below to embed this comment.
  27. “We add each piece slowly and thoughtfully, punctuating decisions with coffee breaks, whiskey, and neighborhood walks.”
    That is one of the best quotes on art I have ever read.

    Copy & paste the code below to embed this comment.
  28. Sorry, commenting is closed on this article.