TechHui

Hawaiʻi's Technology Community

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://benthebodyguard.com/index.php

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://flowplayer.org/

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.

 

 


Views: 72

Comment

You need to be a member of TechHui to add comments!

Join TechHui

Comment by Marcus Sortijas on March 20, 2011 at 11:32pm
Thanks for writing this.  I was going to take a jQuery class at Pacific New Media.  Turns out I was the only one who signed up, so it got canceled.  D'oh!
Comment by Scott Murphy on March 11, 2011 at 7:14pm
@Gus Yeah Crockford has really helped bring the better sides of Javascript out and point out some of it's beauty.  His book is worth checking out - http://www.amazon.com/JavaScript-Good-Parts-Douglas-Crockford/dp/05...
Comment by Gus Higuera on March 11, 2011 at 11:00am
@Scott those are great resources. I like Douglas' classification of JS as "The World's Most Misunderstood Language"
Comment by Kevin Luttrell on March 11, 2011 at 8:14am
My grandma turned off javascript on her browser and freaked out because the websites were broken, except the ones with Flash.
Comment by Mika Leuck on March 10, 2011 at 10:19pm
@Gus Daijima.jp is really interesting!
Comment by Scott Murphy on March 10, 2011 at 4:52pm

Nice post.  I'm glad to see the world really move forward with javascript and away from 3rd party plugins. 

 

To add to Gus' post, Douglas Crockford is a really good source to understand what makes javascript unique (prototypal inheritance, closure e.t.c.).  Dustin Diaz, Remy Sharp, Paul Irish also run really good blogs on javascript and front-end stuff that are worth checking out.   Yahoo's YUI theatre's pretty nice too(http://developer.yahoo.com/yui/theater/)

Comment by Gus Higuera on March 10, 2011 at 4:10pm

Fellow co-worker just sent me this link. Awesome example of power of Javascript and the canvas tag

 

http://www.daijima.jp/

Comment by Daniel Leuck on March 10, 2011 at 10:37am

I love your horizontal side scrolling examples.

re: HTML5 Video

Hopefully Apple and Google will kiss and make nice. The current situation with HTML5 video is a major PITA.

Sponsors

web design, web development, localization

© 2024   Created by Daniel Leuck.   Powered by

Badges  |  Report an Issue  |  Terms of Service