Experimental Page Layout Inspired By Flipboard(tympanus.net)
tympanus.net
Experimental Page Layout Inspired By Flipboard
http://tympanus.net/Development/FlipboardPageLayout/
52 comments
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?
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?
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
This one reminds me of Dustin Curtis' controversial kudos effect:
http://tympanus.net/Development/HoverClickTriggerCircle; http://dcurt.is
That particular element stuck out to me too when I was browsing Curtis' blog a week or two ago. Was it actually controversial?
controversial as in it's an undesirable, irreversible interaction that really turns people off and critics of dcurtis's "work" were more than happy to speak out about it.
Why is everyone trying to turn webpages into things other than webpages? What was wrong with text, links, and scrollbars?
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."
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."
People said the same thing about DOS.
because sometimes some of us want to experiment with things, to push the envelope and if not anything, to have fun.
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?
+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?
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.
When I imagined building a framework like this, it was for a touch desktop device (which seem to be on the horizon).
This isn't inspired by it. It is a copy of it.
Interesting layout. It's not a pleasant experience with a trackpad though.
Indeed. Would be great with L/R arrow keys.
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.
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.
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.
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.
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.
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.
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.
Cool!
TurnJs gives more natural looking turn effect
http://www.turnjs.com/
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.
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.
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.
Is it practical? Not really.
Do I like it? Hell yes. Thank you for showing me this.
Do I like it? Hell yes. Thank you for showing me this.
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.
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?
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?
[deleted]
Usability and accessibility sacrificed for the wow effect. This is typical for skeumorphic UIs.
great work, it would be great if left/right and more keyboard shortcuts could be enbaled
Why can't I read the text at the bottom? I can't seem to scroll down.
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...
Seems very natural to flip instead scroll to browse content.
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.)
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.)
Looks good. Kudos for trying something new.
So is page turning cool again?
Isn't this the exact same thing that a lot of people have said flash was ruining the internet with?
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.
I just wonder what the Flash haters are going to do when they realise they now hate JavaScript.
Nice. Looks good.
Thanks for sharing but it breaks commonly-held navigation conventions.
I know, I know.
I know, I know.
Implementing old inefficient technological metaphors using new technology is a MAJOR fail.
It's pretty, but utterly useless.
It's pretty, but utterly useless.
Try resizing the page.
Neat.
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.
They're background images in divs measured in percentages.
And if you like this one, don't miss the how-to: http://tympanus.net/codrops/2012/05/07/experimental-page-lay...