NYLON Blog: Tag! encourages audience engagement

NYLON Magazine’s Blog appears to understand the importance of audience engagement, as they dedicated an entire section for user-generated content. The section “Tag!” is a place where users submit photos of graffiti they’ve spotted or created around the world. Users can write a small blurb explaining where the graffiti was found and their thoughts on it. So cool!

Because it’s such a specific niche, Tag! has been extremely successful. The Blog uploads one submission per day. It’s easy, doesn’t require a ton of work on either side of the production and provides fresh, visually-appealing content for the blog site.

The only suggestion I’d make was to have a very short header at the top of the Tag! category page, so that readers quickly know what it’s about.

What a great way to get your audience involved and make them feel like a part of the team, NYLON. I think the blog for the publication I work for, Vox Magazine, should implement something like this.

– EPS

Advertisements

NYLON Magazine Digital Edition (Web)

I’ll let you in on a secret- NYLON Magazine’s website offers a “sneak peak” look at all of their issues in the past 5 years. That “sneak peak” happens to be the entire magazine. So if you click “The Magazine” on the navigation bar and then on any of the covers you can read the issue via zinio.

Although, it sometimes lags (most likely due to my computer/internet connection) zinio did an awesome job creating this viewer. The interface design is beautiful and it gives you numerous options on how to view the content. Not only is it available in full screen mode, but it also allows you to embed any page/issue by providing you with the code.

I absolutely love that NYLON has a digital free access version of their magazine. I’m able to take screenshots for posts instead of tediously scan the print copy. The only thing that confuses me is why do they call it a “sneak peak” if it’s the whole magazine? As a print subscriber, it leaves me wondering why I should pay if other people can just read it online for free. Also, why in the world would they charge for the iPad version of the magazine if they don’t for the web version?

Obviously, there are many pros to being a print subscriber and having the actual magazine in your hands to read. And on the iPad, I can’t access the digital website viewer because it uses Flash. Part of me is wondering whether the full digital magazine is only supposed to be viewable if you’re logged in and you’re a print subscriber. This would make more sense. However, to clarify: I think it’s great that the digital version is free, just confused as to why.

Below I tried to embed the NYLON November 2011 zinio viewer, but WordPress ain’t havin’ it. It limits the number of times you can zoom, so I’d just look at it on NYLON’s site. I included the embed link, though!

http://www.zinio.com/widget.jsp?is=416196386&pg=1&type=lgNylon-Nov-11

NYLON Magazine: November design critique

November Overall Design Rating: 4.8 / 5

The America issue, Rachel Bilson cover

Alright, officially my favorite issue. It just seemed like everything was planned to a tee. I loved all of the “hand drawn” elements throughout the issue. The content was original and didn’t seem repetitive of the past two issues I’ve read (which tends to happen with other magazines).

What worked:

Illustrations in this issue were awesome.

Seriously. I can’t say enough good things about them! You can tell a lot of thought was put into each illustration and that the artist went the extra step to put the finishing details on it. I especially enjoyed the ‘Merica bald eagle wearing the sunglasses.

      

– The overall layout of the must have (“mass appeal”) sections really improved from the last issue; they’re so much easier to read and don’t overwhelm me. The “face value” page was really well designed- especially liked the illustration of Dr. Brandt!

Page 72 “Shop America”

The photo clippings were a great choice to help style the page. It shows the extra effort of the designer to not just slap photo and copy on the page and call it done.

Page 78 – 79 “Free Style”

Love the illustrations throughout this spread. Adding just a touch of color helps keep the reader interested without overwhelming them. Also, the choice to make each illustration size different helps balance the design.

Page 85 “Keep Sake”

What a cool craft! Seriously can’t wait to make this. At first I was going to comment that the photos weren’t large enough for the reader to see step-by-step, but I revoked that thought after realizing they were perfectly fine.

Page 96 “Greatest Hits”

Thank you, NYLON, for finally understanding that when showcasing watches readers want three things: designer, price and an up-close view of the face. No one else seems to understand this simple request. Simple, but great job designing this article.  Also, a sidenote, the model’s facial expression made me laugh every time I turned the page.

Page 107 – 111 “Beauty Blender”

Love that I can compare the looks all at once (page 107) or look at the up-close photo (makes it easier to see the details and imitate it).

Radar section (115-129)

Radar had it together this issue. Every page entertained me and I loved the “Bands Across America” feature. Separating bands by location was a great idea. Engaging content and well-executed design. My only complaint is that after reading that I spent 3 hours downloading music. Thanks for providing the excuse to procrastinate, NYLON.

What didn’t:

 Page 80-81 “Apple of my eye”

Each page individually looks awesome, but as a spread…eek. The vibrant colors on the right completely clash with the musk, fall design on the left. Neither page is an advertisement so maybe there was miscommunication or a tight deadline?

America issue: wait, why?

I love America just as much as the next gal, but why denote November 2011 as the America issue? Why not July  or November 2012 (when there’s a presidential election)? Hmm, still thinking this one over.

Also, it should be noted that I enjoyed the Bare Minimum and Rachel Bilson articles. Just sayin’.

– Emily Paige

NYLONmag.com: UX and Cross-Browser Compatibility Pt. 1

After critiquing the design of NYLON’s print component, I wanted to switch gears and look at their website. I’ll focus primarily on how well it works cross-browser and the UX/usability of the site.

NYLON's homepage viewed on Chrome for Mac

Navigation: 4/5

The navi bar has straightforward labels and I know what to expect when I click on them. However, if it were my first time visiting the site and I didn’t read NYLON in print, I would have no idea what “radar” meant. The NYLON logo takes you back to the homepage which is an expectation of the user. I’m torn about the info architecture of the site, though. The navi has too many tabs for my taste, but I can see how NYLON TV/MALL/GUYS belong in totally different sections. I’d have to see the site analytics to know how important each of those sections are to NYLON and whether they could be grouped as a subhead such as “NYLON for..” or something.

Search bar: 1.5/5

Although this is sometimes covered with the navi section, this particular case stands out as a separate issue to address. The search bar is hard to find at first glance, since I expect to find it in the top right corner of the page. While “(search) …and destroy” is clever,  they still need to make the search bar larger and adjust the position of it. It looks squished right now. If they would move it below the social media icons, then they could make the input field longer and it would be more noticeable. This is important because users don’t like to click through a site if they can’t find what they need. They will go straight to the search bar and find it themselves. If they can’t easily find the search bar, then they’ll become frustrated and leave the site. They good news is that the search bar is still same colors as expected and it’s fairly close to where it should be positioned.

Slider: 4.5/5

The slider is a great way to rotate content to make the site look fresh and not static. The headlines are written in a web-friendly manner and the pace of the slideshow is appropriate. The only problem is that the headlines and paragraph text are positioned too closely to the main content making it hard to distinguish it. They used jQuery instead of Flash, making it smoother and iOS friendly.

Homepage: 4/5

It’s a little image heavy, which for viewers with slow browsers or connections can be a nightmare for visiting the page. I definitely know what site I’m visiting as I feel like NYLON (win a FREE iPad from NYLON!, NYLON! (banner/logo) NYLON best dressed! NYLON Mall!, NYLON GUYS!, NYLON TV!) is being screamed at me. I’m not overwhelmed by the homepage (that’s good!) and I’m immediately tempted to click on a story (also good).

Consistency: 5/5

Having a slider on each page may slow down the speed at which each page loads, but it keeps the site consistent. I know to expect the navigation and logo at the top, several teasers to articles in the main body, image advertisements on the right and a “most read/best dressed, etc…” sidebar on the left. I haven’t found a page that breaks that layout/format yet.

Cross-browser compatibility: 5/5…A++

After testing the site in Adobe BrowserLab I found that the site functions well in modern browsers! Congrats! This is easier said than done and many people underestimate the importance of this. Yes, this did take quite a while to review, so it should show how much I love NYLON’s site and content.

Internet Explorer 8.0/9.0: Excellent job, NYLON. Looks and functions the same as modern browsers for Mac.

Internet Explorer 7.0: Site looks great and has fairly the same layout as on my preferred browser. The biggest problem (could just be Adobe BrowserLab) is that the logo didn’t render completely and you can only see half of the image/animation. If it’s not working, the developer could put a line of code (in the markup) telling the header to replace the animation with a static image when rendering in IE6/7. I’m certain that this is just the animation not working (since it’s a screenshot) and it is an error on Adobe’s part, but I need to check in the real browser. Also, I’d be able to critique the functionality better using a real browser. (Note to self: go to public library/grandma’s house to check this) Internal pages seem to handle the IE7 browser the same as the homepage.

Nylon banner/logo isn't loading correctly and ads on the right aren't either. This could very well just be Adobe BrowserLab.

As you can see, the main content breaks out of its container in IE6/7. This isn't a huge deal, though.

Internet Explorer 6.0: Every web designer/developer just let out a huge groan when they saw this section. IE6 is the buzz kill/antichrist of all browsers, but that’s a discussion for another day. Wow! I’m really amazed with how well IE6 handled NYLONmag.com. The site remains fairly consistent in design/appearance- although the main content on internal pages breaks out of its container is forced down. The homepage is arranged vertically- a good solution to this problem. However, the navi/header remains perfectly intact, which is the most important component of the site. Truly impressed, NYLON.

Firefox 5.0/Firefox 7.0/ Chrome 13.0/Chrome 14.0 for Windows: As far as I can tell, the site works just as well in these browsers as in my preferred browser.

Chrome 14.0 for OSX (Mac): This is the primary browser I use and is the standard for how I’ve been comparing other browsers.

Safari 5.1/Firefox 5.0/Firefox 7.0 for OSX (Mac): As stated before, everything works as expected. I haven’t found a hover effect or any other CSS tweak that doesn’t work in each browser. Nice.

Note: Banner ad at the bottom of the homepage/radar isn’t loading on Firefox. This could just be a temporary error, although a pretty grave one for the advertiser.

Safari iOS (iPad/iPhone/iPod Touch): Looks and functions beautifully on the iPad! Great decision to go with a jQuery slider instead of a Flash slider. Using JavaScript makes it viewable on Apple’s mobile products. The iPhone/iPod touch handles the site perfectly, although it’s not ideal for the user. I plan on posting a more in-depth critique of their mobile site later, though.

Additional notes:

The markup of the site is clean and has relevant comments, making it easier on a new person to tweak if necessary. The animated logo is pretty awesome, too.

– Emily Paige Stewart

Embedding multimedia to better convey stories

If you read a review about glow-in-the-dark makeup, you’d definitely want to see it demonstrated, right?

I was happy to see NYLON taking advantage of the power of multimedia in their article “Glow Up.” While they could’ve called it a day with photos of the product and a 200-word blurb, they embedded a video showcasing the product. Although they didn’t produce the video themselves, it was relevant content and furthered my understanding of the makeup.

It would’ve been the icing on the cake if they’d tested the makeup on their staff and posted a short video of it. Nothing too fancy, just something to let its readers know that the staff is actually testing the products they review.

It amazes me how few sites link related, external content to their site (guilty, I know). As long as you’re not claiming it as your own, then I’m not sure why you wouldn’t. The benefits are obvious. Embedding content or including hyperlinks serves as a great cross-promotional method for directing traffic to both sites. If a viewer reads the article on Nylonmag.com and watches the YouTube video of “Fluo Night” then both platforms win.

The key is that the linked content has to be specifically related to the article. It’s pointless to practice this if it’s not enhancing the audience’s experience. A simple tactic for increasing site traffic that more sites should be implementing.

How effective is NYLON’s blog?

Lately I’ve noticed many magazines struggling with differentiating between the role of their main sites and their blogs. It’s a blurry line between the two and I’m not sure any platform has the answer. Before critiquing NYLON‘s blog it’s important to breakdown my perspective of the relationship of the two in general.

Why have a blog if you already have a website?

Since redesigning a website is a long, expensive and tedious process, many magazines choose to implement a blog. This allows the platform a more visually appealing site without the costs of a redesign. Also, according to SEO research, blogging original content pushes you higher in Google search results. Woo hoo!

More importantly, the major CMS for blogging has a very user friendly interface.  Staff that might have trouble working in Joomla!, Drupal or Django can easily post content in WordPress. Admins can set a certain level of control for each user, thus limiting the likelihood of a backend “oopsie” from staff.

The blog serves as a way to connect each day with readers and start conversation.

The blog serves as a way to connect each day with readers and start conversation with them. It feeds the reader little tidbits and is just enough to wet their appetites. Say that a platform was working on an in-depth feature and wanted to let their reader know that they planned on covering it. They could write a short preview so readers could anticipate the story.

Content also works well as a follow-up for previously published stories or live coverage of events. For instance, if you wanted to give an account of a film festival that was occurring, the blog is the perfect platform (in addition to Twitter) for quick reporting. Since blogging CMS, such as WordPress and Tumblr, have a mobile apps, you can even whip up an article on-the-go. These tools provide journalists a way to connect unlike ever before with their audiences.

Problems with blogging:

The instantaneous nature of this medium makes it a lot easier to make mistakes and produce sloppy journalism. In print, an article might have four drafts before an editor decides it’s ready to publish. The editing process with blogs tends to be reverse: publish first, make revisions/corrections later. Journalists need to remember that accuracy and fairness trumps immediacy. Just because you can revise articles later, doesn’t mean you should make sloppy mistakes.

Abiding by these ground rules is obviously easier said than done. I’ll admit, I’m guilty of it. I’m sure if you search this blog, you’ll find comma splices and disagreements with AP Style rules.

However, it’s important to maintain a balance between “writing for the web” and journalistic writing style. Blog content should be easier to read than a print article.

So, how effective is NYLON’s blog?

Kudos, NYLON. You’re doing a great job of engaging with readers and consistently producing content. For the past week, there’s been a minimum of 7 posts/day. It’s easy to subscribe to the blog and connect via social media. The content length is just enough to keep readers informed and coming back for more.

One thing that I don’t agree with is the use of “NYLON” on the top navigation of the blog. At first, I thought it was a CSS style telling me that that was the current page. Then I realized I was in a subsite. I can see how this could easily confuse the user and make them feel lost in the site.

A simple solution would be to include breadcrumbs indicating where the user was in relation to the main site. It would also be helpful if the “NYLON BLOG” link was styled larger/had a hover state different from the main “NYLON” link. I understand they want to direct traffic to the main site, but it confuses the user.

It’d be interesting to compare the blog’s analytics to the main site’s analytics. I’m willing to bet that returning traffic on the blog is increasing while Nylonmag.com is declining.

– Emily

Advertisements + NYLON: QR codes galore

One thing I noticed in the very first issue of NYLON was their choice of advertisements. Even though they chose A-List companies, the ads didn’t have A-List celebrities in them like usual. They use regular models (not that that truly exists) who I think sell the product better.

The majority of the advertisements reflect the edgy, hipster style of the magazine. The type was harsher in these ads compared to what you’d see in Marie Claire or Vogue. Many of the ads included QR codes, which I’ve been noticing everywhere lately. Unless the code leads to a coupon or cool YouTube video, then what is the point? The majority of the people I’ve talked to agree that it’s more time-consuming to pull up the QR app and snap the picture than to type in the mobile web address. I think it’s just one of those things people do to say, “Oh, cool. Look what I can do!”

Semi-effective use of QR code in NYLON

Macy’s advertisement | 30-second video of the photo shoot

Not-so-effective use of QR code in NYLON:

Smashbox advertisement | Leads to Smashbox website

QR codes. Just another example of how usability defines everything.

PS: Sorry for the crappy quality of the photos. They were taken on Photo Booth, haha.