

Experimental Page Layout Inspired By Flipboard - tambourine_man
http://tympanus.net/Development/FlipboardPageLayout/

======
Timothee
There are some more interesting demos when you click on "Previous demo"
repeatedly.

And if you like this one, don't miss the how-to:
[http://tympanus.net/codrops/2012/05/07/experimental-page-
lay...](http://tympanus.net/codrops/2012/05/07/experimental-page-layout-
inspired-by-flipboard/)

~~~
AVTizzle
codrops... This site is very legit. Thanks for sharing.

 _edit_

Funnily enough, a question about how "legit" this site actually is... Stumbled
across one of their demos that was pretty sweet IMO, "Multi-level Photo Map"
<http://tympanus.net/Development/MultiLevelPhotoMap/>

So I Googled "Multi-level Photo Map" and came across a handful of other demos
set up the same way, with the same header navigation bars all:

\- <http://paulbilodeau.net/photomap.html>

\-
[http://www.youthsphere.org/projects/MultiLevelPhotoMap/index...](http://www.youthsphere.org/projects/MultiLevelPhotoMap/index.html)

\- <http://snappermap.daysnapper.com/>

In fact, that last one daysnapper has pretty much all the exact same tutorials
and demos set up as codrops.

What's going on here? Is this just some gray layer of blogs that are pooling
open sourced UI elements and reposting them for link bait and page view
inflation?

~~~
pbotelho
Thanks for the links. We will take a look. Be sure that we don't copy content
of anybody, ever. These are obviously copies of our work which is not
necessarily something against our license. Thanks a lot, Pedro

------
rabidsnail
Why is everyone trying to turn webpages into things other than webpages? What
was wrong with text, links, and scrollbars?

~~~
yason
That's a good question, I think the reason is that the platform built around
viewing web pages is way too flexible and versatile to be dismissed as merely
a structured text markup document viewer.

Basically document markup processors are text-driven programs and all
programmers know it's just too easy to hook up extra functionality if the
behaviour of your program is already defined by a textual input file. Thus
<blink>, then JavaScript, and a bit later, WebGL.

The text, links, and scrollbars approach is excellent for presenting
information (i.e. text documents with images). Happily, the current
capabilities of the platform don't preclude this sort of presentation.
Certainly some fraction of genuinely informational sites these days are more
like programs than documents but I just think in addition to all old and new
text+link documents there's a huge array of mostly non-informational
entertainment sites that didn't exist in "web 1.0".

I could live with the old-style hypermedia web, too, but sometimes I just
wonder if the printing presses ever thought "Damn, these machines were built
to print _books_ and _distribute information_ and now these newcomer
publishers are using them to print stupid TV magazines with little if any
content."

------
sparknlaunch12
Really cool.

+1 Full landscape, magazine feel is nice.

-1 However I think that the "flip" gesture on non-touch devices is wasted and impractical. Dragging or flipping with a mouse doesn't feel right. Could a flip button be kept for pc users?

------
decultured
This may be great on a touch device, but usability suffers massively with a
mouse or track pad. The effect looks nice enough, but I am rarely in favor of
sacrificing usability for style.

~~~
dclowd9901
When I imagined building a framework like this, it was for a touch desktop
device (which seem to be on the horizon).

------
spullara
This isn't inspired by it. It is a copy of it.

~~~
pazimzadeh
It's great, isn't it?

~~~
spullara
It is a good clone but I was hoping for more :)

------
statenjason
Interesting layout. It's not a pleasant experience with a trackpad though.

~~~
AVTizzle
Indeed. Would be great with L/R arrow keys.

------
jahewson
This is one of the better page turning effects I've seen, but I'm not sold on
any of them.

On iOS one soon learns that many of the gestures can be performed as tiny taps
and flicks, rather than as more exaggerated gestures, a good example being
scrolling with a flick, or sliding the on/off toggles with a simple tap.
However, the page turning effect here is at its slowest when a simple flick is
used to turn the page, and at its fastest when the finger is dragged all the
way across the screen to turn a page - this is backwards, and causes me to get
annoyed with the gesture very, very quickly. I would expect fatigue to become
a problem for serious readers too.

------
mcmire
I like that a lot. One thing I would say -- on a browser, it's not immediately
clear that you can click on an article to expand it. I don't have an iPad,
I've never used Flipboard, so I didn't know what to expect. I figured it out
pretty fast, but it might be nice to somehow highlight the article that you're
about to open on mouse hover (faint blurred light-yellow border, perhaps).
Granted, this probably works a lot better on an iPad. But even in a browser it
actually looks pretty good.

------
alan_cx
A minor niggle...

I naturally went to click the Flip button looking thing, and nothing happens.
I only tried a swipe as it were after reading comments here. I would say, for
a non touch screen user, its not intuitive. Works nice once I realised how to
use it, but if I had just landed on a site with this setup, I might have
clicked a few times, failed and moved on to another site.

Perhaps all thats needed is for |Flip to say Drag, with perhaps an arrow.

------
stormbeta
Doesn't appear to work in Chromium under Xubuntu 12.04, despite the message
about it working best in Webkit. Works fine in Firefox though.

------
c250d07
It may help to use some keyboard shortcuts. I found myself going for the arrow
keys to turn pages and the escape button to close stories.

------
indygreg2
Works great for me in Firefox Nightly. Couldn't notice any difference from
Chrome, despite the message saying it works best in WebKit.

~~~
augustl
Also works just fine in the current Firefox stable release. The "works best in
webkit" tagline makes them look cool, though :)

------
Marwan
Cool! TurnJs gives more natural looking turn effect <http://www.turnjs.com/>

------
sailfast
Looks great and works great on the latest iPad. Nice work and I appreciate the
attention to detail - shadows, transitions, etc (even if it's cribbed from
another application).

To help with usability on a regular PC (as decultured mentioned) I'd recommend
a zone for auto-flipping without the drag on a regular mouse-based browser.

------
NathanKP
The page flip is perfect on iPhone but the article scroll felt awkward because
the text does not have accelerative scrolling. In other words web you swipe
down down quickly it doesn't keep sliding when you pull your finger off, it
just stops.

------
Mavrik
"Best viewed in a WebKit browser."

Ah yes, that brings back memories. IE 4.0 was it?

~~~
Terretta
Since multiple competing browsers use webkit, no, this doesn't bring back
memories of IE 4. Spyglass maybe.

------
john2x
Is it practical? Not really.

Do I like it? Hell yes. Thank you for showing me this.

~~~
octavecat
yeah, exactly. as a dev i'm just solidly impressed with the experiment. it
seems like a fun project someone decided to tackle and did so quite well. what
i think most of us want now is for the author to take it to the next level and
make it more appropriate for our non-touch devices, but that's not really his
responsibility for an experiment.

------
heyitsnick
How would one go about wrapping this up to make it an Android and iOS "App"?
Would something like this offer a low barrier of entry for magazine sites
looking to create companion apps for their content?

------
tambourine_man
Try resizing the page.

~~~
drivebyacct2
Wow. I would love to read or see a more detailed demo of how that effect is
done on the images. Wow, much cooler than I'd hoped for.

~~~
jonah
They're background images in divs measured in percentages.

------
olalonde
When I "swipe" or click, I don't get anything apart from selecting the text.
Ubuntu Chrome 18. Also, wasn't this on HN a few days ago?

------
Fice
Usability and accessibility sacrificed for the wow effect. This is typical for
skeumorphic UIs.

------
shuw
great work, it would be great if left/right and more keyboard shortcuts could
be enbaled

------
efnx
Why can't I read the text at the bottom? I can't seem to scroll down.

~~~
lnanek
Make sure you have clicked on a story before you try to scroll, that got me
for quite a while too. There was nothing to tell me to click on stories to
read them. I only figured it out because I tried to click on an image and got
a story instead...

------
thomasfl
Seems very natural to flip instead scroll to browse content.

~~~
idleloops
I prefer paging content. Maybe you do too?

Try scrolling a web page with page/up/down. Or use the space bar (and shift +
space.) Flipping is just paging with an animated transition (the transition I
personally don't care for.)

------
ww520
Looks good. Kudos for trying something new.

------
robmcm
So is page turning cool again?

------
weego
Isn't this the exact same thing that a lot of people have said flash was
ruining the internet with?

~~~
robmcm
Flash was just a tool for the ideas not the cause of them. Technology changes
but the drive for this sort of functionalty and interaction remains.

I just wonder what the Flash haters are going to do when they realise they now
hate JavaScript.

------
royalghost
Nice. Looks good.

------
jsavimbi
Thanks for sharing but it breaks commonly-held navigation conventions.

I know, I know.

------
rorrr
Implementing old inefficient technological metaphors using new technology is a
MAJOR fail.

It's pretty, but utterly useless.

