back
49 comments
What I learned is that the web is not a book and trying to use real life ideas in webdesign doesn't always work out.

There's an arrow to go back, but some funny page-curl-click thing to go forward. Oh, and a button to open the book.

Took me a while to figure out the page curl thing. The first time, I got it to change by randomly clicking everywhere. Even worse was that it follows you for a while, then gives up, making you think you're doing something wrong.

I have to disagree: I think this one works out just fine. And there actually is an arrow to go forward as well.

For me, pagination makes reading long documents a lot easier than scrolling. For example, I love the pagination feature in Instapaper.

Also, this is the prettiest thing I have seen coming from Google. By far.

All canonical ways of page navigation work. There are large forward and backward buttons, the arrow keys work and the page curl is just an added gimmick. You don’t need to use it. I clicked through the whole book without ever noticing the page curl. Did only you have that problem or your upvoters, too? I would think that would be very strange because this book seems to to work exactly like all other such page navigation interfaces on the web.

If you want page navigation this is the way to do it.

>All canonical ways of page navigation work.

I'm aware of three canonical ways of page navigation: scrolling, page down, space bar.

None of those work.

I agree that the interface was intuitive and at no point did I have any actual difficulty using it, but I'm not exactly impressed with a page that takes a lot of text and then crams it into two columns (WTF? whose bright idea was that?) in a tiny box with bad fonts surrounded by a vast sea of grey and then makes me have to click to advance to the next post-it sized page.

Agreed. The problem with page-curl in this case is that the left-hand-side of the book is a blank page. This means that when you're "curling" the page, you don't see a a bunch of text/images mid-transformation (mid "curl"). Also, there is no transparency at all to the "paper" - it's totally opaque. If it were semi-transparent, you would see the other side of the page bleeding through, giving some context/reality to the curling.
I agree with you. Moreover, by creating one's own UI, something other will break. For example, I can't close my Better HN for Chrome extension on this page, because the upper bar (with search box) over-drawn the upper part of the extension window (which normal website don't do).

It looks beautiful and everything, but still, please don't do things this way - don't mess with browser nagivation. That I think should be the first thing one should learn about browsers & the web.

You may not like the idea of the book or the approach, but the site is executed with amazing detail. From the design to the animations, to the use of local storage to work offline, remembering which pages you have visited, window.history, the graphical search auto-complete and all the other little details.
Like the light switch. Nice.
At first I was incredibly surprised that Google made this, since it a) looks beautiful b) uses jQuery and c) the UI is darn good - but then I viewed the source and saw this:

		  20 Things I Learned About Browsers and the Web

		  Built by Fi (www.f-i.com) for the Google Chrome Team.
Design-by-committee (or by data) would never have built this. This is why I know there would never be a place for me at Google, even though I don't consider myself a designer.
Google uses jQuery. Check out the source of http://code.google.com/
You're right. I hadn't noticed.
And one more thing I learned is that Google Chrome supports HTML5 history features so they can change the URL string without that ugly # symbol!
Just make sure that you support those "deep" links as static pages or have a way of loading with default args for javascript that drives that.
I've been trying to figure out how they are changing the url without a page refresh. It must be a webkit only thing.
Yes. They use window.history. It degrades to using the usual hash method for other browsers.
Looks like it's also working in Firefox 4.0beta.
Thanks
pushState() is HTML5 API: http://www.whatwg.org/specs/web-apps/current-work/multipage/...
#1 You should have learned to make webpages that still load without scripting.
The extensive use of HTML5 is great and all, but including font files in your cache manifest (http://www.20thingsilearned.com/cache.manifest) seems like an inappropriate use of the offline cache (better fit for normal caching), unless you're absolutely sure the user doesn't already have the font installed (e.g. custom font made just for the app).
Works terribly on my droid. As I scroll that bar that is meant to sit at the bottom of the page is right in the middle, obscuring the text in the book.
> This illustrated book was designed for HTML5-compliant browsers and will not work with your current browser.

I wonder which HTML5 feature isn't supported in Opera that warrants complete degradation of page to non-JS version (Opera is not served <script>TT.initialize()</script>).

All I learned is that Google just made an ad for their core services (Chrome, Docs, etc), and disguised it in an informational online book.
Arg! Safari on windows... the only thing I can get to beside the front cover is the credit page no matter what I try... I guess the 21st thing I learned is when people are too clever with their web interface, it usually mean I'll have to try in a few browsers or give up.
All I got was -> "... want's to store offline information on your computer." -> always deny.
Do you deny all cookies too? And you don't stream any videos? Disable caching in your browser? ...

Local storage is nothing to be afraid off ...

The question is whether prompting users for whether the site should be allowed to store stuff does anything. You have no idea why it wants to store data, or how much. So it's basically just a security thing, but how would you evaluate that? Usually people would look at the domain name I guess, but "20thingsilearned.com" is no more legit than "twentythingsilearned.com".
The UX is not that interesting to me.

Does anyone know how the page avoids a refresh while changing the location url? it changes the path, and not just a hash. i thought all path changes demanded a page refresh.

It's using the window.history.pushState() and window.history.replaceState() javascript methods. Here's some Mozilla documentation:

https://developer.mozilla.org/en/DOM/Manipulating_the_browse...

Nope, it doesn't change path. Path changes are after the hash. Although when you hover over the arrow pointing to the next page it shows different path, it's probably for browsers with JavaScript disabled. Clicking this link is also intercepted by JavaScript.

EDIT: sorry, it actually does change the path on Chrome. It doesn't on Firefox.

tc;dc (too cute; didn't click)

I was dubious about the link from the "X things about Y" style of title, but left as soon it looked like a more stylish version of a Web slide show. I hate slide shows; if a site doesn't offer an obvious "all slides on one page" option, I'm out of there.

(Edit: Yes, there is a TOC link, but that page also evoked a tc;dc response.)

Surprised "Don't use real life metaphors in a web app" isn't one of them
I don't get this site, who's the target audience? kids? Are you sure they want to read about packets?
Why shouldn't they read about packets? Kids are a lot savvier these days.
This is retarded.

Horrible navigation, simplistic content.

We should start a list of things this site apparently DIDN'T learn about browsers and the web.

#1 - breaking the back button will cause people to never visit your site again

How exactly does this site break the back button again?
It broke for me in the fact that after several pages; it took several clicks of the back button to return to HN.
So, you clicked 'back', and it took you back to the last page you viewed. And that's unexpected behaviour?

I would theorise that the only reason you expected the back button to return you to HN was that your expectations have been poisoned by having to deal with the broken behaviour of sites like this made in Flash rather than HTML5.

>So, you clicked 'back', and it took you back to the last page you viewed. And that's unexpected behaviour?

Well, the site is basically a few pages of content split into an endless number of excruciatingly tiny chunks. Each 'page' is really a paragraph (and doesn't actually entail a page load) - nrmally I'd expect 'back' to take me back an entire page, rather than a single paragraph.

If you're going to use ajax to slice pages into tiny sections, it's far more usable if you then make the back button act as if you hadn't done such a stupid thing in the first place.

In an AJAX world, "last page you viewed" gets a bit fuzzy.
Like it or not, that's the reality. Most people's expectations of what "back" does are influenced by their years of experience with Flash and other plugin-based content.
And how is that different than browsing any other website on the internet? Each page needed a permalink so that you could instantly show a specific page to a friend.

Again I ask, how is this breaking your back button? Or are you just trying to imagine something to complain about?

I think it was meant to be a joke…
I think you are the target audience for this book.