

Show HN: reimagined digital magazine, using Backbone and GSAP - clevep
http://www.lonny.com/mag/osWdLZXQXc7/May+2014

======
clevep
My team was granted a couple of months to explore creating a new magazine-like
medium for our home decor website, Lonny. A major goal of the project was to
preserve ideas that make magazines what they are (rich layouts, big imagery,
editorial driven pacing) and to accent them with technology.

This is our v1. We have a lot of updates planned and are excited about the
upcoming months.

We would mostly classify ourselves as backend engineers, so for us the
majority of the technical difficulty came from developing the front end. We
used Backbone as our MVC framework and GSAP as our animation platform. It was
our first large project with either library and we really enjoyed both of
them.

All in all, it was a great project to work on and we thought you guys might
enjoy seeing it, even if you don’t have any interest in home decor. We’d love
to hear any feedback you have to offer!

------
anigbrowl
Hitting the start button does nothing on Chrome version 34.0.1847.131m. I
don't know if this is due to AdBlock Pro, Chrome's popup blocker, Ghostery, or
Disconnect, but I didn't feel like testing them one-by-one. Obviously it's a
commercial offering, but I think it needs to fail mroe elegantly than just
hanging. It opened fine in an incognito window.

I opened it up in IE with no problems, and was surprised to find it a little
faster than Chrome - but IE is my fallback browser and I don't have any
extensions or addons loading there for that reason.

I didn't especially care for the 'start' tab. I would let the titles fly in
behind the image as before, but on touching the image anywhere I'd then shrink
the cover photo down to its tile and have the others fade in.

As for the project itself, once I could get access I was impressed - it did a
good job of bridging the gap between magazine and web presentation. I _really_
liked the simple but effective page navigator buttons which are presumably
optimized for tablet use but also saved me from tedious scrolling on the
desktop. The ToC was good too, although I would have liked an easier way to
get back to the initial tiled layout, which I preferred. I did _not_ like that
different tiles took me to the same articles on some occasions. I didn't
always read the captions before clicking, and was confused to find myself
going back to articles I had already read.

Overall I would give it 7 out of 10 (overlooking the access problems mentioned
above, which I think need to be fixed as a priority). Although I'm not the
target reader and found the writing a bit gushy, there was a good balance
between visual and textual content that was well realized in the interactive
context. The only negative I felt while reading the magazine was the sense of
being constrained by the vertical page orientation on a desktop monitor,
resulting in a lot of empty space on the sides, a pet peeve of mine.

If there was some way to show two pages side by side (like an actual magazine)
I would give 9 out of 10. to me one of the great joys of magazines and books
is being able to open them wide and feast one's eyes on well-balanced
horizontal layout - I've never understood why some people like to fold the
spine over and only do this very occasionally. I feel like the single-page
paradigm is a path-dependent one that has been driven by the screen size
limitations of devices like Kindle and various tablets, but which leaves me
feeling like I've lost an eye. I hope you could explore this in future
iterations; given the subject matter of eh magazine it seems like a natural
candidate to try out these ideas. I felt a bit sad that nothing inside the
magazine matched the powerful visual impression of the frame-filling intro
photo. Browsing the photo stack that was in some articles was an inferior
substitute and didn't take full advantage of available screen space.

~~~
clevep
Thanks for the thorough feedback! We will look into the Chrome issue
immediately. We all use Chrome as our preferred browser, so I'm a bit shocked
that it completely choked. I suspect one of the add ons, but you are right, it
should absolutely fail elegantly.

The multiple index photos pointing to the same stories was an editorial
decision, as they wanted a location to show off all of their favorite imagery
from the issue, even if some of the links were duplicative. This is similar to
a magazine's ToC, where they will occasionally have multiple items referencing
the same page number, however point taken that this creates an annoying
experience if you accidentally hop to the same story multiple times. Perhaps
we'll explore some sort of visual indicator for already visited stories.

Side by side pages forming a spread is a tricky issue. We wanted to allow our
editors the freedom to create magazine-like layouts with text interacting with
other elements such as images, videos, and lists, but building layouts which
conform to the dimensions of all devices is difficult. In print, designers
only have to deal with one canvas size when laying out their spreads. On the
web, text will wrap in different places and you need to dynamically resize
elements so that text is readable and images are suitably sized. This results
in inconsistent page breaks, which makes side by side viewing difficult to
achieve cleanly. Some products have attempted to achieve this affect on the
web, but we ultimately thought the tradeoffs necessary to implement those
techniques were not worth it and that we would have a richer product with
entirely vertical layouts. There is an additional UX consideration there as
well, but I'm droning on.

I agree on the slideshows lacking the gravitas of the cover. We have already
begun product planning to improve that feature.

Thanks again!

