With these new opportunities, though, come new ways to produce messy code and confusing interfaces.
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 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.
Adhering to the principle of progressive enhancement has an important side benefit: Better SEO.
Keep code separate.
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.
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.