Diving into PHP

For the Mizzou College of Engineering, I was presented with the opportunity to redesign and combine the News + Magazine archives child site, based on the existing WordPress framework Charlie uses for the rest of the site.

Challenges:
I can’t believe I did it. This project was my first time diving into learning PHP. At times it was horribly frustrating and codex.wordpress.org quickly became one of the top visited sites in my browser. Luckily, I had a great framework to reference and mentor to bug which helped me implement my mockups.

The goal of this redesign was to combine the News and Magazine posts into one archive page. Since Mizzou Engineer Magazine is published twice a year, I knew making the page look alive would be challenging.

Another major constraint was accommodating for the lack of visuals per issue. Not every story yields to gorgeous, hi-res images, but I figured that one per issue was a reasonable expectation.

Because of the technical language that coincides with this type of writing, the articles often have lengthy headlines. While wireframing this project, I had to keep this in mind.

As always, I knew making the site easy for the authors and editors to use was key in ensuring site longevity.

Solutions:
This project definitely taught me the value of working quickly and moving forward. If I was stumped on something, I learned the importance of switching tasks, coming back to it later with fresh perspective and giving it another shot. If it still wasn’t working, it was time to consult my resources.

In order for this page to not appear static, I decided the last four issues would be enough to entice the reader without looking dated. Including the magazine covers would solve two problems: it would help add visuals to the site while also providing the user with another way to find a story.

Since news articles are published more frequently than the magazine, the bottom portion of the site pulls in sticky news posts, which give the viewer the illusion that the site is updated more often than not.

To make the new features of the NewsMag archive page easy to use, I created custom post types and meta boxes. This would allow the author/editor to simply input information on the post page and upload the magazine covers into the media editor at the click of a button.

See the live site at www.engineering.missouri.edu/magazine-archives

Pixel Perfect Design.

Last Friday, I spent 2.5 hours staring at this:

Riveting, I know.

Why? Because in web design, pixel perfect (or nearly pixel perfect) design matters.

After implementing a navi for the NewsMag posts, I decided to make little arrows to help the user know to navigate from “Previous” to “Next.” I’d create 4 arrows– two white ones for previous and next and two gold ones for the hover effect. I’d splice the image so that I could create one PSD file. Should be simple, right? Of course making the arrows was easy. But getting them to line up perfectly with the 14pt “Previous” text next to it is easier said than done. Especially when you consider hover, padding and margins.

To make the arrows I used Photoshop, not Illustrator. This is because Photoshop handles pixels better than Illustrator. As always, Charlie showed me the importance of using a grid. Even though the arrows were the same height as the 14pt “Previous/Next” they looked smaller next to them on screen. Charlie taught me that for this it was important to rely on intuition and to make the arrows look optically perfect.

This is an extra step that a lot of designers would opt out of because clients would never notice. But it’s this attention to detail, obsessiveness for perfection and craftsmanship, that makes the difference between mediocre and great design.

Although it was definitely frustrating at first, I began to oddly enjoy the process. And at some point…It finally clicked. These details may seem meticulous– in fact, most people will never notice– but knowing everything was created with incredible preciseness is assurance that the designer cares and didn’t just slop it together.

And that level of high standards is something that I’ve found often gets left behind on the web.

– Em

Realish World: Day Two

After graduating this past weekend, I’ve faced the “what are you doing with your life?” question enough to drive me insane. Now, I can direct people to this blog to better explain what my plans are for the future.

Learning + Volume of work + Reflection:

I’ve decided that the best route for acquiring skills to become an interactive designer is to spend a few months intensively working at my part-time job at Mizzou Engineering. My awesome boss, Charlie, is allowing me to work on specific projects to help me fine tune these skills. I’m extremely excited at this opportunity, as it seems the work schedule is more like an apprenticeship. One of the requirements he has implemented is to record my thoughts as I go through this process. So, here goes.

First Reflection:

After sketching up some mock-ups of the first web design project I’m doing, I realized some of my inadequacies and some strengths.

Inadequacies:

I found it hard to sketch freely and quickly. I moved at a slower pace than I would have liked, but hope to get faster. At first, I definitely wasn’t confident in my designs and found them to look sloppy. I constantly questioned whether or not something was “convention in design” or if it was bad design. I need to work harder on selling the design, but I’m sure that will come with confidence. I also found that it was surprisingly helpful to let my mind wander as it naturally does instead of fighting to stay focused.

Strengths:

My enthusiasm for the project forced me to keep mocking up designs when I felt I was stuck. I also believe I do well when bouncing ideas around with other people.

Other lessons:

– thinking through some of the mechanics while creating wireframes  (how to implement it)

– importance of sketching a ton of mockups; a lot of designs won’t work

– setting a personal deadline to keep me accountable and on track

 

 

 

 

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

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.

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.

An overview of NYLON’s site

One thing I’m very passionate about is multimedia design. I believe there are so many ways to enhance the reader experience with rich multimedia components such as audio, video, polls, infographics, etc… It’s a really interesting time to see how magazines are experimenting with multimedia or if they’re ignoring it completely.

Nylonmag.com offer some of the same content online as in their September print issue or at least a “sneak peek” view of it. I need to wait until the next issue to be able to decide whether or not they’re just regurgitating the design and content. However, it seems they are adding videos and audio that wouldn’t be available in print. They offer a 1-5 scale (cute, little hearts) for rating articles and allow readers to comment. The ability to share content across social media platforms is super easy to do, which I was glad to see them do a great job of implementing it.

The UX of the site is fairly good, although their sub-navi is a little squished and isn’t prominent enough. I plan on posting a more in-depth critique of this later.

I found myself spending more time on their blog component than their actual site, even though it contained similar content. When I stumbled across the blog, I was was left confused as to where I was in the site, before realizing they were separate sites.

The design of their site has awkward white space where it’s obvious that something isn’t behaving as it should. Everyone, especially magazine and news sites, is struggling with this right now so I’m sure NYLON will continue to grow in web design.