Experimental Page Layout Inspired By Flipboard

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• 14 years ago

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

sailfast• 14 years ago

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.

efnx• 14 years ago

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

lnanek• 14 years ago

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...

shuw• 14 years ago

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

ww520• 14 years ago

Looks good. Kudos for trying something new.

Timothee• 14 years ago

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...

AVTizzle3• 14 years ago

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://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• 14 years ago

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

pazimzadeh2• 14 years ago

This one reminds me of Dustin Curtis' controversial kudos effect: http://tympanus.net/Development/HoverClickTriggerCircle; http://dcurt.is

AVTizzle3• 14 years ago

That particular element stuck out to me too when I was browsing Curtis' blog a week or two ago. Was it actually controversial?

statenjason• 14 years ago

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

AVTizzle3• 14 years ago

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

c250d07• 14 years ago

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• 14 years ago

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

augustl• 14 years ago

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

mcmire• 14 years ago

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.

NathanKP• 14 years ago

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.

olalonde• 14 years ago

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?

rabidsnail• 14 years ago

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

robmcm3• 14 years ago

People said the same thing about DOS.

yason• 14 years ago

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."

puppymaster• 14 years ago

because sometimes some of us want to experiment with things, to push the envelope and if not anything, to have fun.

sparknlaunch12• 14 years ago

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?

john2x• 14 years ago

Is it practical? Not really.

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

octavecat2• 14 years ago

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.

thomasfl• 14 years ago

Seems very natural to flip instead scroll to browse content.

idleloops• 14 years ago

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.)

weego• 14 years ago

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

robmcm3• 14 years ago

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.

robmcm3• 14 years ago

So is page turning cool again?

jahewson• 14 years ago

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.

alan_cx• 14 years ago

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.

royalghost• 14 years ago

Nice. Looks good.

heyitsnick• 14 years ago

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?

stormbeta• 14 years ago

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.

rorrr• 14 years ago

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

It's pretty, but utterly useless.

Marwan• 14 years ago

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

Mavrik• 14 years ago

"Best viewed in a WebKit browser."

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

Terretta• 14 years ago

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

Fice• 14 years ago

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

jsavimbi• 14 years ago

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

I know, I know.

Experimental Page Layout Inspired By Flipboard

Related Stories