JavaScript libraries have made it easier than ever to add interactivity and sophisticated interface effects to our websites. These frameworks give us newfound control over the way we present content to our audiences. Rollovers, zooms, fades, pans, slides and toggles are just a few lines of code away.
With these new opportunities, though, come new ways to produce messy code and confusing interfaces.
These principles will help you maximize the advantages of JavaScript frameworks, producing content that’s easier to create and update and more accessible to audiences on different platforms.
Keep things simple.
It can be tempting to include every whizzbang effect, but more interactivity doesn’t necessarily lead to a better user experience. Only use effects that have a purpose and complement your content.
Pick good plug-ins.
Plug-ins make it possible to add advanced effects to our content without writing a single line of original code. Many plug-ins are built by volunteer developers, though, and their quality can vary. Here are four things to look for when selecting plug-ins:
- Good documentation. Make sure the developer has made clear what the plug-in can and can’t do. Many plug-ins offer APIs (application programming interfaces) that allow you to customize how they behave. Make sure the API is clearly and thoroughly defined.
- Examples. Good plug-ins come with examples of how to implement them. Look for a “default” or “basic” example, along with more advanced options. Chances are, you can copy and paste the code from an example as the starting point for your use of the plug-in.
- Previous releases. Look for plug-ins that have been around the block a few times. That means there’s a better chance that game-stopping bugs have been stamped out. Developers will use different conventions to label their versions, so you can’t rely just on the version number. Instead, look for a “change log” and tally how many times the software’s been updated or released.
- Good references. Particularly useful plug-ins tend to get used by big sites. This kind of usage is a great sign a plug-in works well. Developers tend to make note of their big “clients” on their plug-in pages.
Start basic.
Start with a basic Web page, then add jQuery. This is the essence of the popular Web development concept progressive enhancement. The idea is to make sure the essence of your site — your most important content and functionality — works for anyone who visits, regardless of the capabilities of the particular browser or device she uses.
In practice, this means making sure your site works without JavaScript — or any related libraries — enabled. (One way to see what a page looks like with JavaScript disabled is the Web Developer Toolbar.)
Adhering to the principle of progressive enhancement has an important side benefit: Better SEO.
Keep code separate.
Don’t let HTML and JavaScript mingle. Instead, keep content, design (CSS) and logic (JavaScript) separate. This will make your content easier to update, allow multiple team members to work on the same project more easily, and ensure the best SEO.
Customize for consistency.
Libraries and plug-ins often offer a range of ways to customize how they look and behave. Take advantage of these options. Tweak for consistency with your overall site and brand. Color schemes and fonts are obvious starting points, but also look for ways to tailor the size of elements, the speed of animations and transitions, and the use of gradients, shadows and other design effects. The result will be more polished, seamless integration with your site.
JavaScript libraries are a boon to content producers, but sometimes the flexibility they allow can lead to trouble. These principles should help narrow your options, leading to better integration with your content and better experiences for your readers and users.
Want to learn more?
Want to learn more about these principles and other ways to get started with jQuery? Check out our Webinar on Friday: Programming for Non-Geeks: Easy Interactivity. We’ll cover everything from the software you need to get started to the top resources to know and bookmark. Bring your questions.
