Show HN: reimagined digital magazine, using Backbone and GSAP(lonny.com)
lonny.com
Show HN: reimagined digital magazine, using Backbone and GSAP
http://www.lonny.com/mag/osWdLZXQXc7/May+2014
2 comments
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.
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.
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!
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!
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!