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


NYLON Magazine: Comparing the design of Sept, Oct issues

I apologize for this review coming in later than I had hoped. Unfortunately it took 9 weeks to receive my subscription of NYLON in the mail from when I placed the order (arghhh).

When reading NYLON, it appears there are a few style choices that readers can always count on: faux highlighted headlines, a handful of typefaces and great, original content. The design remains fairly consistent in typeface choices from issue to issue. I believe they use Berthold Akzidenz Grotesk for headlines and Akkurat for the typewritten.

Below is a comparison of the two covers. As you can see the covers are almost identical in their colors, layout and type sizes.

Even throughout the magazine headlines are always lowercase. Sprinkled on a few pages is hand drawn type. I love this- it makes the magazine seem so much more personal. The department and section have clever, cutesy names. This works well in print but you’d never be able to do this on the web. Same for the headlines. Various articles, such as “drink of the month,” include sketched illustrations. This works well and contrasts the gritty images used throughout the magazine. Every issue seems very raw without being brash.

The TOC is the same in both issues which is the standard for most magazines. The layouts of recurring pages is pretty consistent in both magazines. One thing I noticed is NYLON’s ability to section off content without using borders or boxes. The magazine uses headlines and decks to frame each article. This is easier said than done and I think they’re doing a great job. Of course, they do reserve artsy borders for a few pages, but not many.

September Overall Design Rating: 4.2/5

What worked:
Wow, this is a gigantic issue. The feature of Christina Ricci was well done. The post-production treatment of the photos in addition to the typeface choices gave it an awesome “vintage feel.” I love how they handled the page numbers for this feature. Little decisions like that really help to bring the spread to another level. The fashionista department did an excellent job laying out their spreads as well.

What didn’t work:
Although the fashionista department overall did a great job (especially News) the design of “Ticket to Ride” article bothered me. It was too messy and difficult for the reader to enjoy. The writing was fabulous, but the position of the headline in the lower right threw me off. I know NYLON has done this before and it has worked well. However this story, which was describes a model who’s also an equestrian, didn’t. Too harsh and unorganized.

October Overall Design Rating 4.5/5

What worked:
Loved, loved, loved this issue! Great work! Although considerably smaller in content than September, the October issue did a fabulous job experimenting with layout/typography without confusing their readers. The “Culture Club” section is much more organized in this issue, giving it a cleaner feel. Normally, I don’t like typefaces that look like someone smeared paint, but the staff chose a happy medium in the “Just a Girl” article. Definitely creates an “edgy, yet playful” feel. Also really enjoyed the “Black Magic” illustration on page 116-17. What a clever idea instead of just using photographs!

What didn’t work:
The “Hey, baby” makeup article was a little too cluttered for my taste. My eye was overwhelmed and didn’t know where to look first. By eliminating two of these “must-haves,” the reader would be able to focus on the individual product (like the Night Shade article). Also, a nit-picky suggestion: the article “Sweet Talk” in the supercute! (which is supercute that you call it that) section looks like “Sweet Tall” at first. Fixing the headline so it stands out more prominently would be ideal.

Keep up the great work, NYLON designers. I’m excited to receive my November issue!

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

NYLONewsletter: Does it reel readers to the site?

Every Saturday, I can expect a Newsletter from NYLON in my e-mail inbox. I have mixed feelings about newsletters in general. A part of me finds them annoying and clutter, while another part enjoys them.

Newsletters are effective because they serve as a reminder for people to visit your site. Even if the person deletes the e-mail, the sender of the newsletter is still on their mind. They give readers snippets/previews of what you can find on the site.

When newsletters are most effective:
If you want people to read the newsletter- not just delete it- you have to promote your content in the right way. In my experience, I’ll read a newsletter/promo e-mail if it’s:

a. short text, large headlines
b. links directly to site
c. visually appealing
d. specific, niche content

One company who does a great job at this is JCrew. I almost always open their e-mails, even when I’m flat broke. This isn’t me just be a shopaholic, because I never open Express newsletters or other clothing stores. I can always count on a beautiful presentation, a simple headline and a link to the product.

When newsletters aren’t effective:
If a company sends multiple newsletters a week, people become agitated very quickly. Even more, Gmail and other services, will mark them as spam.  It’s also a bad idea to have 8 pt type and a huge chunk of text in a newsletter. No one is going to read it.

How does NYLONewsletter rank?
NYLON is doing a great job with their newsletter. It’s weekly- so it doesn’t overwhelm me- and it’s never too text heavy. Large headlines, quick blurbs and an appropriate amount of images make it appealing to read. I’ll usually click a story if it interests me. Only thing I’d recommend was that they should highlight 3 stories, because it is a tid bit too long.

– Emily