The rise and rise of JavaScript « DanNorth.net.

One of my resolutions this year is to continue researching JavaScript. Not jQuery, not CoffeeScript, plain old JavaScript. Reading this article by Dan North did nothing but make me want to read all the things.

The article is a bit lengthy, but worth it. Dan’s explanation of the quirkiness of JavaScript being lovable and that really resonates with me.

If anything, JavaScript continued to prove itself in 2011 and using that as an indication, we’re in for a treat in 2012.

Advertise here with BSA

When it comes to personal projects, I often wait for serious inspiration to strike, as I find it much more likely to actually end up with a finished product. As such was the case with the latest version of Monday By Noon.

Inspiration

Over the past few months, I’ve had a strong calling to redesign the site, as I felt it was no longer a representation of where I’m at with Web design and development. It wasn’t until recently that I was able to better define exactly what it was I felt inaccurate about the then current version of MBN. When I originally pushed the design, I was really in to minimalism for the purpose of concentration. I wanted readers to be able to truly focus on the article at hand, the conversation that followed, and that was it.

I felt the old design catered to that, but it began to wear on me. When viewing the site, I no longer saw the minimal elegance I originally shot for, I saw sterility. The design remained clean, organized, and structured, but to me it had moved beyond that to an extent. The minimal design was pushed roughly 18 months ago, and I think that’s quite a shelf life given a designers inherent need to change things on a very consistent basis. I accepted the challenge of redesigning in 2010.

As I mentioned, the redesign came to exist much out of the blue. As I sat down one evening to take care of some overflow work, I had a simple urge to start sketching a few wireframes for MBN. I wanted this design to be different, to get back to the roots of the first design to ever grace Monday By Noon. Four years later, I would definitely not call it graceful, but it did something I really liked; it promoted exploration.

The conversations in response to some of the articles I’ve written in the past enrich the overall message in such a way that isn’t otherwise possible. I know many writers prefer to omit the entire comment exchange, but I can’t imagine MBN without it. I truly value the response of the readers, and it’s great to have a targeted conversation on a specific issue every week. I wanted to make it a point to push comments and commenting where applicable as much as possible.

As I was sketching, inspiration came flooding in. I thought about the applications I use every day, and what they all have in common; sidebars. Sidebars in application design are nearly essential. There is always a combination of information and interaction that’s valuable no matter what you’re doing or what you’re looking at. It’s the hub of the UI that facilitates easy access to anything and everything, and it’s always in eyesight. I wanted something like that.

It then came down to figuring out what’s truly essential for a website like Monday By Noon. First things first is the brand. Brand was super important, so it went without question that was to be included. I want to try and push MBN to be the best it can be in 2010, and that means trying to attract new readers, so I planned on sticking with the quick blurb describing the purpose of the site as well. It’s quick and easy to digest, and can simply reinforce MBN to veteran readers.

With the minimalist design, I received some positive feedback about the ‘personal favorite articles’ section on the home page. Some people felt it was nice to know which pieces I’ve enjoyed most, and I thought that would be something nice to include in this redesign, but in a different way somehow.

I also find it easier to become hooked to a website when the people behind it aren’t obscured too much. Personally, I really like seeing a photo of an author, just to get that much more sense of who they are. That was a must. Also, since Twitter isn’t going anywhere fast, I wanted to include something referring to @jchristopher for new readers as well. Last, and definitely not least: search is a must. With my list in place I started sketching.

From the first quarter page sketch I was already pumped on the new design and I knew I was going to like the direction this was heading. To be honest I didn’t even make it to a full page wireframe sketch before hopping into Fireworks and playing around.

I skipped back and forth between Fireworks and sketching quite a bit that first night, and nearly lost enthusiasm just as quickly as it had come on. It wasn’t the first time something like that had happened, but a good nights sleep helped to clear my head and the next evening things really began to snowball.

Process

I’m hooked on 960.gs. Long time readers may be wondering what the heck I’m talking about since many people feel that I hate CSS frameworks. That never was (and never will be) the case, I simply have a specific stance on using a CSS framework, and 960 really caters to that for me. The grid set the stage for the design, and I chose to use the latest variation from Nathan, a 24 column grid. Things quickly began to take shape and I was really pleased with the structure of everything during the initial stages. The only problem was, I was drawing a blank on a color scheme.

If there’s one thing that’s remain constant about Monday By Noon’s brand, it’s the red. Since the first version launched, I’ve based the entire MBN brand on #960000, and I used that as a platform. Until now, the designs have been a mix of red, black, grays, and white, but I wanted something different this time. I’ve been a sucker for tan since forever, and thought “What better time than now?” So I went for it. I poked around until finally settling on a blend of two tan/brown combinations that I felt suited the look and feel I was going for.

I’ll be the first to admit that the previous MBN designs lacked a bit of character. The most recent (minimal) design had a bit of style, but that was one of the focal points I chose for this round. Not too long ago Hoefler & Frere-Jones released Tungsten and the design community went nuts. Me too. In fact I became nearly obsessed with the type. To me it simply comes across as an authoritative, strong, and intriguing. I wanted to use it. With the design community in such a frenzy I nearly put it out of sight out of mind in hopes of remaining as unique as possible, but I couldn’t resist.

After playing with the type I knew that Tungsten was going to become integral in portraying the look and feel I was going for. This redesign also brings something new to the table that MBN has never seen; article copy set in a serif. With Tungsten being the sans-serif it is, a serif, in my opinion, complements it really well. A serif helps Tungsten to become that much more elegantly tough, without a modern feeling many other sans-serif typefaces bring with them.

Iconic

The other part of the inspiration flood was Iconic. Iconic is a free icon set designed and produced by a good friend of mine, P.J. Onori, a.k.a. @somerandomdude. From the second I laid eyes on the icon set I knew it was for me. I wasn’t quite sure where it was going to fit, but the mood set by the type combination I chose for this version of MBN simply called for Iconic in a really strong way.

P.J. has made waves with Iconic, and the set couldn’t have arrived at a better time.

What’s New

Along with the design updates, I wanted to really take advantage of what WordPress has adapted since the last redesign. I’ve been meaning to incorporate threaded comments forever and a day, as I think it really facilitates a conversation as opposed to a generic comment thread. To put it simply, I’m glad I won’t have to be typing @replies to comments anymore!

The other novelty I wanted to include was something I find myself using on Wikipedia all the time: a random article link. While I don’t expect it to be one of the most popular features ever included on MBN, I do think it may help both new and long time readers alike at some point.

What’s Left

I’m far from done with this redesign. In fact I’ve already got a few new ideas coming to fruition in the background already. For example, I struggled a bit with the Archive and ended up shelving the work I had done with it in favor of something as simple as possible. There’s both a benefit and a drawback to publishing once a week, and that’s publishing once a week. I’m determined to design an effective way to browse the archives no matter what mindset you may be in.

I also plan on going back to each and every old post and optimizing the content for the new design. It’s definitely the worst part of any redesign, but I’ve got some things I’d like to do to future-proof against having to do much of that maintenance when the next redesign comes about.

Happy 4th Birthday, MBN

As it turns out, Monday By Noon turns four years old in just 3 days, so the redesign coming to be so quickly worked out nicely as a decent birthday gift if I may say so myself.

I’ve had a blast writing weekly throughout the past four years, and can’t wait until I’m writing a similar article on the 8th anniversary. I hope you all enjoy the changes around here, I hope it’s a great beginning to a great 2010 for MBN!

Advertise here with BSA

I sincerely doubt that you’ve come across a fellow [Web] designer who talks about his job as though it only pays the bills. I find that extremely endearing about our industry. We’re all here by choice, and apart from unavoidable frustrations found in everything, we love what we do.

People in our industry are often overly inspired to a fault, resulting in becoming burnt out. The trouble lies with inspiration. We’re often so inspired in the daily goings on, we’ll become burnt out before knowing it. I can’t count the number of times I’ve been super excited to work on a project, only to be itching to work on anything else by the time a push to launch comes about. It’s not because the project became less interesting, not because the client bipolar’d himself on to my “Ugh” list, but because I put everything I’ve got into it for weeks on end and it eventually runs out, no matter how devoted you are.

Retain your inspiration

I’ve thought a lot about my inspiration lately. I can’t say for sure that I’ve got any solid, noteworthy results for myself, but I can say that both SuggestRSS and jchristopher.me are a direct result. I’d like to chat a bit about how I’ve approached things lately, in hopes that it strikes a chord somewhere.

When I speak about inspiration here, I won’t be focusing on design inspiration per se, I mean the inspiration to have fun with your work and enjoy it. That is to say, I won’t touch on having design block on a current project and give a list of the Top 10 Sites and Galleries I Use for Inspiration. In fact, that note right there brings up my first suggestion.

Look in new places

There’s plenty of inspiration flooding the Web at any given time. Whether it’s a design article from the people you look up to, or something you randomly stumbled upon, it’s almost trivial to find a new article that gets you thinking about Web design in a slightly different way.

That’s all well and good, but lately I’ve started to get inspiration from different sources, and it’s downright addictive. If you’ve got creative interests outside of Web design, focus on them and keep the Web out of it.

I’ve been devoting a lot more time to studying photography over the past year or so. I’ve been studying not only the art of shooting a photo, but the science behind it as well. On top of that I’ve made an active effort to talk to other photographers (Kevin and P.J.) specifically about photography and photography only, without the conversation turning to the Web, with both being designers themselves. Not only because they know more than me and that’s one of the best ways I like to learn, but also because it inspires me to go out and take more photos, to try to better what skill I have.

Another place I’ve been gathering inspiration is Xbox. That’s right, Xbox! There is some really slick design work in video games, tie that in with the experience of playing and your creative can go into overdrive. If you follow me on Twitter you’ll already know that I’m a huge fan of DiRT 2. Not only is the game itself (rally racing) wicked fun, everything right down to the menus look great. On top of that, Codemasters integrated the soundtrack in a really neat way that gets you excited to race. The menus in that game, for one reason or another (and hard as it is to see) actually had a bit of an effect on the design of jchristopher.me.

The final outlet I’d like to touch on is super generic and probably obvious, but the other place I’ve been gathering much of my inspiration is away from the computer. As a result of an entire series of circumstances in my personal life, work and design took a huge back seat for nearly two months. There were events both good and bad that helped provide an entirely new perspective on things for me personally, and that became inspirational over time. I think what I mean to say is that one of the most inspirational things you can do is get out and live life, as cliché as that sounds. People, circumstances, situations, and surroundings can be tremendously inspirational in the strangest of ways. The point to the anecdote, though, is that I found inspiration through prevention. Not living and breathing Web design helped me to enjoy it more once things settled down and got back on track.

Outside unconventional outlets for inspiration, there are some that remain more tied to the industry itself.

Actively ignore the junk, because there’s lots

Quit looking at “CSS” design galleries. Seriously. Take other designs for what they’re worth, but unless you want to get away with blending in and at the same time do nothing for your personal growth, peruse them in your free time, not to jump start your creative. I do feel there can be inspiration gathered from these sites, but little more than checking out what trends and novelties have filtered through the entire spectrum of Web designers.

Along those lines: push the linkbait, “Top 13″, design trend, monetary-inspired articles as far away as possible. Those pieces exist for little more than click-through percentage boosts and hitting the front page of Digg. What good is that to you? There’s a very fine line between information and linkbait, and it’s very important that you’re critical of everything you read. In my opinion, there’s quite a bit of junk out there, all backed by a lot of “leading” design sources. That’s not the place to find inspiration.

As closure to this section, one of the most important things to do is surround yourself with the proper people all the while doing what you can to remove yourself from The Others. I mean in person, not virtually. I’m also not speaking about strictly other Web designers either, I mean in general. People are extremely influential, and it doesn’t take much for the Human Factor to completely throw you off. I don’t mean to suggest playing favorites, being outwardly rude, or anything along those lines. I just mean to say that the people around you directly effect you, no matter how focused or introverted you may be.

If you’re surrounded by those with an equal interest and investment in Web design, you won’t be able to help yourself from becoming inspired. Not only are you provided valuable insight, you’re provided a new angle, which is super important.

Don’t sweat the small stuff

Stress and anxiety are by far the quickest inspiration killers for me. Do what you can to let as much slide off your back as possible, especially if you’re in a position where there’s a lot going on outside design work itself. If you’re a freelancer, this may not apply as much, but if you work within a company of people, it’s probably a different story.

I’m not saying stop caring. I’m not saying that at all. What I am saying is that everything is not an emergency, don’t make rash decisions on the spot because you’ve got a lot on your plate.

When working within a company there’s not only the general day-to-day activity going on, but there’s also company strategy, client issues, deadlines, concurrent projects, and email to deal with. Even if your company is well structured and you’re low in the ranks, things will absolutely come up at some point, no matter how big the company is.

Inspiration can be delicate, so be nice

I think the big Take Home lesson I’ve learned throughout the past few months is that my inspiration can be fragile; it doesn’t take a whole lot to throw everything off track for the day. There are things, however, that can be done to ensure that inspiration-destroying bits of life can be pushed the wayside until it’s appropriate to handle. There’s nothing wrong with that; hop in low gear and ride it out.

Advertise here with BSA

Very often, a business will want to revamp their website solely because their competition has done just that. Instead of considering their current website and its inherited faults, a new website will find itself in a company budget simply to one-up the competition. While it is important to remain competitive, there’s a fine line between advancing and playing catch-up.

As a designer, developer, or agency, it’s important to keep this in mind. It’s also important to find a balance between effective client communication and producing something that is going to benefit you and your client.

Competition as inspiration

Circumstances permitting, clients will forever believe that the websites of their competition are doing things right. I know we’ve experienced it a number of times; a client will request a superfluous feature straight out of left field, and upon further inquiry, you’ll realize their top competitor already has the exact feature your client desires.

That’s not to say you shouldn’t examine competitor websites when considering a redesign. Often times, that is one of the first steps many designers take when beginning a project. The difference comes with analysis of the competition. Just because a (possibly successful) competitor has done one thing, it doesn’t mean it was a good choice.

There are plenty of mistakes to learn from when looking at existing websites, the trouble comes when a client ceases to view you as the professional, and insists on having things a certain way. When all is said and done, your client has hired you and they’re going to get what they want. What’s important is to try your best to provide the best quality product possible.

In my experience, one of the more difficult things to do is deflect client requests which have no backing. Requesting a feature simply because another website has it is not going to help anyone. That includes not helping yourself, not helping your client, and most importantly, not helping the visitors to your client’s website. I’ve found that an effective way to have a better outcome with poor client requests is to simply start a dialog about the feature. Very often, a five minute phone call will help bring to attention that a particular element just doesn’t fit the project. Better yet, your client will be reminded that you’re both on the same team, that you’re the professional, and that you’re working hard to make sure the end product is the best it can be.

When budget interferes with accessibility

Coming full circle with my introduction about Web 2.0 and the contagious inspiration it offers many business owners is the inherent issue of accessibility. I’d like to go on a bit of a limb in saying that it is more difficult now than ever to produce properly accessible websites. Not because Web 2.0 is at the forefront of the Web and by default makes documents less accessible, but because of project budget.

Before the term Web 2.0 flowed down to even the most average Web user, it was partially difficult to explain the importance of accessible websites to potential clients. The arrival and acceptance of SEO in business made things exponentially easy. Explaining that a more accessible website provides better search engine visibility was an “easy sell” for building accessible websites.

SEO as a selling point continues to help ensure many Web projects built remain accessible (and a good business decision), but with Web 2.0 & Ajax being so prevalent, projects can come under fire when it comes to the budget. Clients, for one reason or another, seem to lose sight of accessibility (and SEO) when it comes to AJAX. They’ll see a competitor has a certain feature on their website and request their new site has it to. After examination, it’s painfully obvious the feature was implemented poorly and greatly degrades the browsing experience for a significant percentage of their readers.

As a designer or developer, you can take the time to explain to your client (in great detail) how the feature has been poorly implemented, adding a number of improvements to be made when adding to your project. More often than not the client will be eager to hear your improvements, as you explain the various benefits of the changes you’d like to make. A less pleasant discussion may come about when it comes to budget adjustments, however.

I’d like to be explicit in first saying that implementation of JavaScript shouldn’t automatically mean that a budget should be greatly affected. On the contrary. As a modern developer, you (or your agency) should be more than able to effectively implement JavaScript features that progressively enhance the viewing of a particular document. There will be budget adjustments required, however, to ensure that your implementation will gracefully degrade in applicable cases. An AJAX-powered contact form, for example. While easily implemented, an alternate (working) experience should be available.

While it may seem to go without saying, I’ve heard many clients proclaim that “Agency B can provide feature X for a cheaper price, why does it cost more for you to get it done?” The answer, more often than not, is that Agency B is not concerned with developing well-built, accessible websites. They’ve found an AJAX-powered contact form widget and will implement it for pennies. It probably won’t work in a number of cases, but it’s “implemented.”

What to take home

Unfortunately, reminding your client that the product you’re building is topnotch will be a constant requirement. We work in an industry saturated with establishments trying to make a quick buck anywhere they can, which degrades our surface value. Building websites is a craft you’ve been working on for any number of years, and you should stand up for what you’ve learned over time.

With issues like competitor inspiration and budget restriction, it’s important to realize that when working in Web design, you’re never done learning. By simply working in the industry, you’ve dedicated yourself to an ever changing set of guidelines to follow if you’d like to remain applicable. Keeping that in mind, you know more than your client about the Web. It’s important to remember that you both have the same goal in mind; providing the best product possible.

What are some client interactions you find to be reoccurring? I know it’s happened to me in the past, but have any of your clients been so adamant about their project that you were forced to simply succumb to their requests? What other issues have you come across?

Advertise here with BSA