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