Thinking outside of the Flash Embed: An Introduction to Javascript for Designers

It's a no brainer. To become a better web designer you must understand your medium and the tools people use to create content for it. Unfortunately in today's post-Flash web those tools are becoming increasingly more difficult for designers to embrace. No longer can designers fall back on Flash's pretty GUI to fly objects around the screen and create awesome two minute site intros. If you want to be today's next gen designer then you will need to learn to program with Javascript. There's just no way around it anymore. At the very least, familiarize yourself with it enough to know how to incorporate it into your designs and know where it's limitations lie. So grab your favorite text editor and let's get started.

JQuery 

The easiest Javascript tool designers can learn to master is JQuery. Javascript has always been intimidating for designers who have no programming skills but for most designers who have at least very basic HTML and CSS skills JQuery is simple enough to help you create simple animations, interactivity and give you enough control of HTML elements to make them do your bidding.

http://jquery.com/

(If you are really feeling brave check out http://jquerymobile.com/)

Copy/Paste then Hack Away

What is the best way to learn Javascript? Grab some code and hack away. Start pulling code out and putting code in. Experiment and you never you know what you will come up with (or break.) Familiarize yourself with the code that's out there, try to understand what their approaches were and pretty soon you'll come up with your own creative ways to use JS in your projects. Always look at the documentation as well. This will give you clues as to what's available and what can't be done.

Holy Tools & Plugins Batman!

Once you've mastered the ways of JQuery you can then move on to JQuery plugins. Animated drop downs, overlays, slideshows, interactive forms... you name it. There are tons of JQuery tools and plugins out there to put into your JS utility belt. Here are some for you to get started:

http://flowplayer.org/tools/index.html

http://goo.gl/swb8H

Thinking outside of the Flash Embed

Okay, so you know a little bit more about Javascript now. What can it do that Flash can't? Quite simply, it's fast an provides a seamless user experience that require no plug-ins. Javascript gives you the ability to add interactivity and motion to HTML elements that would otherwise remain static. One recent trend is layering with subtle motion while scrolling.

Done vertically...

http://www.lagentehadichosi.es/

http://www.nikebetterworld.com/

and horizontally

http://www.head2heart.us/

http://www.moodsofnorway.com/

So who said you couldn't do cool interactive sites in html. Get your brains going and HTML moving. Use this parallax gallery demo to create your own dynamic, layered HTML effects

http://tympanus.net/Tutorials/ParallaxSlider/

What about video?

Only Flash can do video right? Wrong. There are plenty of HTML5 players out there that run solely on Javascript. Here are some video solutions currently available:

http://videojs.com/

http://popcornjs.org/

The video format wars are making Javascript video difficult so to support these players you will have to encode several versions of your video. Some solutions even fall back on Flash. That being said, video support is improving and some sites are even using it full-screen in their designs. Its still choppy and slow in some cases but it's getting there.

http://brehmlab.com/#/landing

http://www.seanobrien.com.au/

Conclusion

The web is continually evolving and for a designer to ignore Javascript at this stage of it's evolution would be a big mistake.  I'm still transitioning to use Javascript more in my projects and I'm excited about the possibilities it offers. I hope this blog post can also get you excited to use it in your next big web project.