Design, Code or Both?

This is the first in what we hope will be an ongoing series of conversations between our readers and the N&O Design, Development and Content producing teams. We want to keep you informed about what we're working on and interested in, as well as what's up and coming on our websites.

We hope you'll find it to be an interesting read, and look forward to your feedback as we continue to move our online Triangle journalism and community building efforts forward.

----

I work on the Interactive Media team as a front-end designer, making the sort of design choices that impact what you see on your screen. Be it the logo on a new site or an advertisement, there's a good chance that I've worked on something you've seen.

Today I want to write about something that I am not an authority on - Javascript. That's one of the common types of code we use in our sites to add interactivity. It rotates to the top articles on the TriangleMom2Mom.com homepage and switches between the tabs on the newsobserver.com homepage. It also allows for many of the cool effects on Triangle.com.

As a designer I've often distanced myself from writing Javascript code, believing it was the realm of code-writing developers. Why should I write code? I can use Photoshop to design all the interactivity that's needed and let someone else take care of the math. I followed this path right up until a few months ago when a developer at our partner company, McClatchy Interactive, showed me jQuery.

jQuery is a Javascript library (a collection of commonly used code) that makes adding interactivity and effects to a page almost a joyous event. Unlike other Javascript libraries which require in-depth knowledge of coding, jQuery is fairly easy for a web designer (such as myself) to use.

To me its been more akin to having a friendly conversation with the boxes, images, and text on a page, versus sending them a complicated series of instructions that I have to write in Esperanto.

Within an hour of being shown this new technology, I was adding interactive elements to a web page with great ease. Boxes appeared and disappeared. Lines of text were highlighted and tabs faded in and out. It was still design, but now I was able to control it from another point in the process.

When we installed jQuery on newsobserver.com (in order to get our new story commenting feature up and running), I knew it was time to see where else it could be utilized.

We used it to load the newsobserver.com homepage more quickly. jQuery allowed us to take the pieces that take a little longer to load and move them to the end of the queue. This allows the page to show the breaking news stories much more quickly, sending our readers to where they want to be without removing anybody's favorite features.

Using this bit of code:

$(document).ready(function(){
$("div.fc").appendTo("div.stocks");
});

We were able to tell the page to load everything but the stock ticker, and then load the ticker and move it into its usual place.

Kind of like when someone at Target shouts 'Register 3 is now open, no line and no wait'.

What does this mean for our readers?

It means that going forward our in-house designers and developers will more quickly be able to add interactivity to our web pages and features. Javascript libraries are not going to save the world or move journalism to the next level, but it is one of the ways we're constantly working harder to make our sites the best in the Triangle.

We have an RSS Feed for this blog too, so you can keep up with what we're working on!