BlogmyQuery – BMQ

Cross-browser compatibility is something that can’t be overlooked in this day and age. The fact that your website could be viewed one way in Firefox and a completely different way in another browser like Safari can be a stressful thing to cope with. Being able to create and build websites that not only look but function the way their supposed to in multiple browsers isn’t a walk in the park.

This is why we’re going to provide you with these useful tools that’ll help you test for cross-browser compatibility. The process for achieving compatibility across a variety of browsers is building, testing and fixing.

Browser Shots

Browsershots makes screenshots of your web design in different operating systems and browsers. It is a free open-source online web application providing developers a convenient way to test their website’s browser compatibility in one place. When you submit your web address, it will be added to the job queue.

A number of distributed computers will open your website in their browser. Then they will make screenshots and upload them to the browsershot central dedicated servers for your review.

Cross Browser Testing

This tool allows you to pick an operating system and browser and that’s that! You will receive nicely structured screenshots on multiple browsers of your site.

Adobe Browser Lab

Accurately pinpoint compatibility issues and compare web pages at a glance to easily identify differences and potential problems. Preview full screenshots with multiple view options and customizable test settings.

SuperPreview

SuperPreview is to be used in conjuction with Microsoft Expression Web 3 in order to test and preview your web pages in multiple browsers at the same time. You can choose a variety of browsers and specify any page you’d like the application to render for compatability testing.

Spoon Browser Sandbox

The Spoon Browser Sandbox places several browsers with the click of a few buttons at your disposal with very little effort. You’re able to test several pages quickly without any issues.

IETester

IETester is a free WebBrowser that allows you to have the rendering and javascript engines of IE9 preview, IE8, IE7 IE 6 and IE5.5 on Windows 7, Vista and XP, as well as the installed IE in the same process.

NetRenderer

IE NetRenderer allows you to check how a website is rendered by Internet Explorer 7, 6 or 5.5, as seen from a high speed datacenter located in Germany. Just type in a URL and try it out; it’s free.

BrowsrCamp

Browsrcamp lets you take control over a Mac OS X system preconfigured with all the Mac browsers. This is the easiest way to test every aspect of your website on Mac, including Javascript, DHTML, Ajax, Flash and more!

A website is never done. Everyone has worked on a project that changed so much after it launched that they no longer wanted it in their portfolio. One way to help those who take over your projects is to produce a style guide.

Edward Tufte once said: “Great design is not democratic; it comes from great designers. If the standard is lousy, then develop another standard.” Although there’s no stopping some clients from making their website awful, by creating a style guide, you’re effectively establishing rules for those who take over from you.

Why Create A Style Guide?

• You’ll have an easy guide to refer to when handing over the project.
• Makes you look professional. They’ll know you did everything for a reason
• You maintain control of the design. When someone does something awful, you can refer them to the document.
• You avoid cheapening the design, message and branding.
• Forces you to define and hone your style, making for a more cohesive design.

[Offtopic: by the way, did you know that we are publishing a Smashing eBook Series? The brand new eBook #3 is Mastering Photoshop For Web Design, written by our Photoshop-expert Thomas Giannattasio.]

Branding Guidelines: What To Include?

Strategic Brand Overview

This should be short and sweet. In as few words as possible, make clear the vision for this design and any keywords people should keep in mind while designing. Most people will probably flip straight to the picture pages, but they may read a few sentences here.

See Kew’s branding guidelines.

Kew uses strong photography in its “brand essence” message, with a few paragraphs that both inspire and define the brand. Even if you read only the first sentence, you get a sense of what it’s trying to do. While Kew has quite a few of these message pages, they are intertwined with beautiful photography that themselves define the photographic style and primary message.

Logos

For print and Web, most brands revolve around the logo. Make sure you provide logo variations and clarify minimum sizes.

See Cunard’s branding guidelines.

Cunard provides many variations on its minimum sizes. Because its crest can be displayed either on its own, with the name or with the tagline, specifying minimum sizes is important for legibility (for example, if the logo with the tagline is too small, it will be illegible).

See Think Brick’s branding guidelines.

Provide logos with different colors, and specify which colours are allowed. Think Brick gives designers a lot of options with its design. The point is to allow flexibility while maintaining consistency.

Show Examples of What and What Not to Do

You’re a professional, and you know better than to mess around with logos. But many others will try and think they’ve done a good job. They are so wrong. You must make clear what they can and cannot do with a design.

See I Love New York’s branding guidelines.

I Love New York has done a great job defining all the things you shouldn’t do with its logo. It has also produced a beautiful (though bit wordy) document.

Spacing

Many non-designers underestimate the need for white space. Include a spacing reference, especially for the logo. Rather than specifying inches or centimeters, use a portion of the logo (a letter or a shape) to set the clearance. This way, whether the logo is big or small, the space around it will be sufficient.

See BlackBerry’s branding guidelines (PDF, 2.2 MB).

BlackBerry not only explains its spacing policy, but also uses the capital B in the logo to define the clearance.

Colors

Always include color palettes and what the colors should be used for. And include formats for both print and Web: CMYK, Pantones (if they exist) and RGB (or HEX). Always include a CMYK alternative for Pantones because sometimes matching is hard (especially when Pantone printing is not possible). Specify primary and secondary colours and when and where to use them.

See Channel 4’s style guide.

Channel 4 shows all of its Web and print colors, and it displays the swatches below an image that helps to define its color palette.

See the New School’s branding guidelines.

The New School is clear about its primary colors and defines them for both print (Pantone and CMYK) and Web (RGB). Its brand guideline document is beautiful, too.

See Christopher Doyle’s Personal Identity Guidelines.

Okay, so this one isn’t a traditional branding guideline, but rather a personal identity guideline. Here Christopher Doyle shows off some alternative color palettes. He does a fantastic job of mocking branding guidelines; well worth a look (and chuckle).

Fonts

You’ll need to define the typefaces to use: sizes, line height, spacing before and after, colors, headline versus body font, etc. Make sure to include Web alternatives for non-Web fonts.

See Yale’s typeface.

Yale has its own typeface, which it provides to its designers.

See Yale’s Visual Identity page.

On the typeface section of its website, Yale also details when fonts should be used. It has a specific Web font section, detailing which fonts to use there.

Layouts and Grids

By setting up templates and guidelines for grids, you encourage best practices and promote consistency. In Web, preparing some generic templates can curb excessive creativity with the layout.

See the Barbican’s branding, print and Web guidelines.

For its website, the Barbican has set up building blocks that are both flexible and ordered—meaning they’re likely to remain in a grid.

Tone of Voice

A huge component of a brand’s personality is the copy, and defining the tone is a great way to keep a brand consistent. When multiple people are writing the copy, the brand can start to sound like it has multiple personalities.

See easyJet’s branding guidelines (PDF, 2 MB).

easyJet has a well-defined personality, both verbal and written, and it gives examples for both.

Copy-Writing Guide

For those who require clients to write their own copy but want to maintain consistency, a copy-writing style guide can be helpful. Copy-writing is one of those things that most people register subconsciously. When reading, your brain automatically looks for consistency and patterns, and poor copy-writing can ruin the reading flow.

See CAN’s branding guidelines (PDF, 845 KB).

CAN wants its number formats to look the same. On another page, it defines which spelling variants to use, reminds people of common mistakes and more.

Imagery

Many designers have established a particular tone in their photographs and images. Show your clients examples, and explain why they are good choices. Show them in the context of your design, and explain why they were chosen for that context.

See Zopa’s style sheet (PDF, 3.7 MB).

Zopa has done a fantastic job of making its illustrated style clear. Its online style guide is very good, and it offers further tips on how to construct pages around its illustrations in the online style sheet.

Bring It All Together

Show a few examples of what the logo, photography and text look like together and the preferred formats.

See Skype’s branding guidelines.

Skype has done a fantastic job of showing how it want designers to use its illustrations and photography. It has examples of the subtle differences between good and bad usage. The whole guide is beautiful and well worth a look.

Web Guidelines: What To Include?

Many people create branding guidelines but forget to include important style guides for the Web. Just like branding guidelines, Web guidelines keep everything consistent, from button styles to navigation structure.

Button Hierarchy

You’ve carefully decided what all the buttons are for and meticulously defined their states. Unfortunately, the in-house designer hasn’t applied your hover states or has created their own, and they look terrible.

Create a page that shows what all links do (including the buttons), the appropriate behavior of each and when to use them (with examples of appropriate usage). If one button is dominant, make clear the maximum number of times it should be used per page (usually once at most). Define the hover, disabled and visited states for all buttons.

Gumtree.

Gumtree has worked hard to define all button states, especially custom buttons (for example, Post an Ad has a + sign in front of it). These were defined for the Gumtree redesign, which is now live.

Icons

Defining size and spacing and where to use icons is another great way to promote consistency. If icons should be used only sparingly, make this clear.

See ZURB’s icon sizes.

Here, the ZURB agency defines icon sizes and when to use them, and it provides clients with an online source from which to download them. ZURB also defines badges and explains their purpose. It believes that its guidelines are best shared online.

Navigation (Logged In/Out States)

On the Web, good consistent navigation can make or break a website. New pages are often added to a website after the designer is done with it. Have you left some space for this? Doing things like letting people know what to do with new navigation items and showing logged-in states make for a cleaner website.

See the BBC’s Global Experience Language.

This is one of the most beautiful guidelines I’ve seen. BBC shows what to do with long user names, how much space everything should have and more.

Basic Coding Guidelines

There’s no way to make someone else code like you, but you can offer others basic guidelines that will minimize the damage, such as:

• CSS class naming conventions
  Should they use .camelCase or .words-with-dashes?
• JavaScript integration
  Are you using jQuery? MooTools? How should new JavaScript be integrated?
• Form styling
  Include the code, error states and more so that they understand what style conventions you expect.
• Doc type and validation requirements
  Do you allow certain invalid items? Do you expect the CSS and HTML to validate?
• Directory structure
  Make clear how you have organized it.
• Accessibility standards
  Should people include alt tags? Is image replacement used for non-standard fonts?
• Testing methods
  Which standard should they test with? Do you have staging and production websites?
• Version control
  What system are you using? How should they check in new code?

How To Format

Some branding guidelines have been turned into beautiful books:

See the Truth brand guidelines.

This beautiful example, which was designed to go with a brand redesign, shows just how beautiful branding guidelines can be.

But this requires a substantial budget and a reprint every so often. For most companies with tight budgets, this is not practical. On the Web especially, content is constantly being refined and styles for elements are not set in stone.

Here are a few good practices for formatting your guidelines:

• Include a cover
  This should include an example of best practices for the logo.
• Make it beautiful
  Even if it won’t be printed as a book, you can still make sure the branding guidelines appeal to the viewer. After all, you’re trying to inspire them to use your designs to the highest standards!
• Include contact details
  For when they have questions, so that you can prevent bad decisions from being made.
• Make it easy to access and open
  Usually this means putting it online or in PDF format. Don’t make it too big; use images sparingly.
• Make it printable
  For international companies especially, keep margins big so that the document can be printed in both A4 and US letter sizes. If it’s online, make sure your print style sheets render the document as expected. Don’t do white text on a black background, either: you don’t want the client to have to buy a new ink cartridge every time they print a copy.
• Make it easy to change
  Updating, adding new pages and making changes should be easy, because it will happen!
• Create a mini version
  Make a short handy guide that has just the basics, in addition to the full version. Both will get used in different instances.
• Provide print templates whenever possible
  Things like letterheads, business cards and envelops should have their own templates. While guidelines will help people put things in the right spot, they usually won’t help them get the right resolution or color format.

Here’s a useful template for a one-page branding guideline.

Length

Remember, people should be able to follow branding guidelines. A 100-page book will engage none but the most diligent designer. Many believe that a concise three-page overview is best for daily use, with a more in-depth 20-page document for more complex tasks. Less is more, usually!

See the BBC’s branding guidelines and poster.

The BBC has created a detailed 38-page guideline. But it has also produced a beautiful poster for quick reference. It’s a brilliant idea, and it keeps the guidelines at the front of mind.

Resources

• The Web Style Guide, 3rd Edition
  A comprehensive guide for the Web.
• Corporate Brand Guidelines
  A list of design guidelines. Some are old but still useful.
• Brand Identity
  A great article from Computer Arts magazine on building your brand identity
• 20 Top Tips for Designing Effective Brand Guidelines, from Saatchi
• The Corporate Identity Manual (Brand Style Guide)

Related Posts

You may be interested in the following related posts:

• What Makes A Great Cover Letter, According To Companies?
• The Art And Science Of The Email Signature
• Invoice Like A Pro: Examples and Best Practices
• Business Card Design: Better Than A Plain Ol’ Business Card
• How To Create A Great Web Design CV and Résumé?

(al)

© Kat Neville for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: brand, branding, guidelines, logo, style

This is a wonderful tool. Enter a URL and replace its fonts with any of FontFonts web fonts. Hmm, this site looks rather nice with FF Dagny and FF Meta Serif replacing Helvetica and Georgia.

A common occurrence: you or someone you know wants to create content and have it published online. A slightly less common occurrence? Having that same someone articulate high aspirations for their content. For those select few, instead of creating content destined for some digital landfill, their content is special; it’s going places and it’s taking them, their brand, and their experience with it.

Consistently publishing content requires that we deal with a foe known as content management. Content management is just what it sounds like: a way to manage the creation and dissemination of content. To systematically do that, it’s imperative that publishers employ what’s (aptly) known as content management systems (CMSs). The most common of kind of which is called a blog.

To be sure, all this jargon is difficult to succinctly summarize; I have to assume that you, dear reader, know the basic mechanics of blogging and content management. That way we can discuss the larger issues at hand, such as strategy. If you don’t, you might want to turn back now …

But back to content. If you or someone you know is getting ready to unleash content on the world, what guides the creation efforts?

At this point, visual design—design of the actual CMS itself—is irrelevant. Nobody should really discuss what the system will look like (expect, maybe, the visual thinkers in the room), but instead, the heart of the matter: what’s this all about? What content will this website deliver? Moreover, when will it deliver it?

And everyone wants to add their $0.02. It’s kind of like debating what content should be on the homepage. Which is another thing: what content should be on the homepage?

Egads. Content, you’ll find, is everywhere.

In this article, we’ll take a brief look at Content Strategy—that odd amalgamation of Web Savvy, Information Architecture and editorial process that adds up to something infinitely greater than the sum of its parts. You’ll learn when and where to apply strategy to your content endeavors and when you should simply raise your hand and start asking the important questions.

Back to topWhat is Content Strategy?

“Content strategy plans for the creation, publication, and governance of useful, usable content,” says Kristina Halvorson, author of the book Content Strategy for the Web.

“It plots an achievable roadmap for individuals and organizations to create and maintain content that audiences will actually care about. It provides specific, well-informed recommendations about how we’re going to get from where we are today (no content, or bad content, or too much content) to where we want to be (useful, usable content people will actually care about).”

Taking a step back, Louis Rosenfeld adds:

“If [Information Architecture] is the spatial side of information, I see content strategy as the temporal side of the same coin.”

This abstraction is important: If Information Architecture helps us say “where” content lives, Content Strategy tells us decide “when” it lives. The combination, in due course, helps us as well as our clients understand “why” it’s there in the first place.

This quote from Louis carries extra significance because it’s based on actual experience. You see, Louis is the guy behind the UX publishing house Rosenfeld Media. His company makes real, honest-to-goodness books. You can hold them in your hand.

So if I had to guess, Louis knows quite a bit about Content Strategy—even though he might not identify someone well-versed in it—because Content Strategy is part and parcel to the publishing world.

Digital Publishing

The distance between print and the web, when it comes to a prudent publication process, isn’t all that vast. In fact, if you think about all of the stuff required to publish books—authors, reviewers, technical editors, copy editors, publishers, graphic designers, distributors, etc.—you begin to see that their analogous roles on the web are just, by default, not designed into the process …at least, not when everyone and their mom can publish content.

Content Strategy is the way forward. It helps both clients and project teams understand what content is being produced, how it’s being produced, by whom, when, and why.

Back to topHow is Content Strategy Done

Kristina Halvorson, in her article The Discipline of Content Strategy, says that “at its best, a content strategy defines:

• key themes and messages
• recommended topics
• content purpose (i.e., how content will bridge the space between audience needs and business requirements)
• content gap analysis
• metadata frameworks and related content attributes
• search engine optimization (SEO), and
• implications of strategic recommendations on content creation, publication, and governance.”

That means that, at their best, strategists will provide a document explaining how their teams will accomplish these goals.

Relly Annett-Baker, in her article Why you need a Content Strategist, points to a rough methodology:

When we first meet, I ask a lot of questions about how your business works, what messages you want to get across and what your business’/products’ best features are. I look at (and sometimes create) the wireframes and the proposed information architecture of your website, consider interaction instructions, and [determine] whether a message is best explained with a screencast or a series of step-by-step by pictures.

The Content Lifecycle

Content, just like the websites they inhabit, are living, changing things. When strategists seek to assess and improve the quality of a website’s content, they typically follow a four-part process. The following diagram (used with permission) was created by Rahel Bailie while the descriptions of the phases were borrowed from Jonathan Kahn’s articles Content Strategy for the Web Professional:

1. Analyze

   In this phase, strategists figure out what what kind of content they’re dealing with. Jonathan suggests: Ask questions about content, right from the start. Utilize user research or personas to decide what content is needed. Answer the question, “who cares?” Carry out a content audit, and/or a gap analysis.

2. Collect

   Here we figure out (or plan for) the commonalities across our website’s content. Jonathan recommends: Establish key themes and messages. Write a plan for creating and commissioning content. Insist that the client plans for content production over time (an editorial calendar).

3. Publish

   In this phase, we’ll see our content through to publication: where does it live on the website and how does it get there? Jonathan recommends: Annotate wireframes and sitemaps to explain how both interaction and content will work. Specify CMS features like content models, metadata, and workflow based on the content strategy. Write and aggregate your killer content.

4. Manage

   After we’ve published content, it’s time to look back, see what worked, and plan for the future. Jonathan says: Write comprehensive copy decks, based on common templates. Write a style guide for tone of voice, SEO, linking policy, and community policy.

Back to topContent Strategy Luminaries

On Twitter

@rahelab

Follow

@mbloomstein

Follow

@halvorson

Follow

@lucidplot

Follow

@kissane

Follow

@leenjones

Follow

@rlovinger

Follow

@jeffmacintyre

Follow

@karenmcgrane

Follow

Back to topTools of the trade

Content strategists are always discussing better ways to get valuable content from their clients to their audience. So, while the list below is indicative of the tools that a strategist might use, they’re by no means prescriptive.

Wordpress

WordPress is a state-of-the-art publishing platform with a focus on aesthetics, web standards, and usability. It’s far and away the most popular blogging platform, and its vibrant community is committed to helping authors spend less time reading documentation and more time writing their content. Creating a publishing process with Wordpress is a (relative) snap. (And hey, it runs this blog, so how bad could it be?)

Learn more about Wordpress.

Expression Engine

Expressions Engine is a full–featured CMS. That is to say, if your organization wants to publish more than just blog entries, they should give this a look. Expression Engine is nice because it allows for for segmentation: particular people can edit particular parts of your website. Although newer, shinier CMSes are born everyday, EE is still a formidable workhorse.

Learn more about Expression Engine.

Facebook

Facebook has helped define a social revolution. Regardless of whether you think that’s good or bad, it’s far and away one of the best channels to meet with and engage your website’s audience.

Learn more about Facebook Marketing.

Twitter

Twitter is a micro-blogging service that allows an individual or organization to send timely updates out into the world. Like Facebook, it’s helped define what it means for someone to be social in the digital space.

Learn more about Twitter for businesses.

Microformats, Metadata, Tagging

Microformats, Metadata, and Tagging mechanisms help content authors (and publishers alike) append information about the content that they’re publishing. In turn, this provides anyone looking for that content and easy way to find it.

Learn more about Microformats.

Google Analytics

Google Analytics is the self–described enterprise-class web analytics solution. What does this mean to you? Google Analytics gives you insight into your website’s effectiveness through a variety of metrics; including bounce rate, keyword frequency, etc. Married with web analytics and measurement, this enables content strategists to gauge contents efficacy.

Back to topRelated Resources

Writing Content Templates

One of Erin’s older posts, this describes how to create and utilize content templates in your production process. From the article:

A content template is a simple document that serves two purposes: it’s a paragraph-level companion to your website’s wireframes … and it’s a simple, effective means of getting useful information from your experts to your writers … you might think of content templates as a kind of wizard for content development.

Example Content Strategies

In this post, Colleen Jones provides a couple of short examples of what might be found in a content strategy. Consider these as good “jumping off” points as you author your own.

Back to topContent Strategy Books

• The Web Content Strategist’s Bible: The Complete …
• Content Strategy for the Web
• Managing Enterprise Content: A Unified Content Strategy
• Letting Go of the Words: Writing Web Content that Works
• Groundswell: Winning in a World Transformed by Social Technologies

Back to topFurther Reading

• The Discipline of Content Strategy by Kristina Halvorson
• Content-tious Strategy
• The Case for Content Strategy—Motown Style
• Why Everything Sucks, Why That’s Awesome, and How It’s Changing Us
• Content Strategy: The Philosophy of Data
• The NIMBLE Report
• Toward a Content-Driven Design Process
• Intentional Communication: Expanding our Definition of User Experience Design
• Content Strategy – a knol by Jeffrey MacIntyre
• Content Strategy for the Web Professional
• Content Strategy for Everybody (Even You)
• A “Do It Yourself” Guide to Content Strategy — a presentation by Jonathan Kahn
• In Defense of Lorem Ipsum
• Web Content Strategy – How to Plan for, Create and Publish Online Content for Maximum ROI

We are regulalry collecting useful JavaScript and jQuery snippets, libraries, articles, tools and resources and present them in compact round-ups here, on Noupe. This time we are again covering some useful JavaScript and jQuery techniques, plugins and tools that may help you improve the user experience for your site.

Useful JavaScript and jQuery Techniques

Colorful Sliders With jQuery & CSS3
In this tutorial we are using jQuery and the new transformation features brought by CSS3 to create a three dimensional dynamic slider effect. The techniques presented here – for creating sliders, and CSS dynamic resizable bars, can be used together or in part for powering all sorts of jQuery goodness.

Sponsor Flip Wall With jQuery & CSS
Designing and coding a sponsors page is part of the developer’s life (at least the lucky developer’s life, if it is about a personal site of theirs). It, however, follows different rules than those for the other pages of the site. You have to find a way to fit a lot of information and organize it clearly, so that the emphasis is put on your sponsors, and not on other elements of your design.

TipTip jQuery Plugin
TipTip detects the edges of the browser window and will make sure the tooltip stays within the current window size. As a result the tooltip will adjust itself to be displayed above, below, to the left or to the right of the element with TipTip applied to it, depending on what is necessary to stay within the browser window.
TipTip is a very lightweight and intelligent custom tooltip jQuery plugin. It uses ZERO images and is completely customizable via CSS.

Nivo Slider
The Most Awesome jQuery Image Slider

jQuery.Syntax
jQuery.Syntax is an extremely fast and lightweight syntax highlighter. It has dynamic loading of syntax source files and integrates cleanly using CSS or modelines.

jquery.timepickr.js
This is my humble attempt to enhence web time picking.

Photo Zoom Out Effect with jQuery
Today we will show you how to create a simple image zoom out effect with jQuery. The idea is show some images which are zoomed in initially and when hovering over an image it gets zoomed out. This effect could be used in photography websites or image galleries. Our example uses some black and white images to focus on the effect.

A Fresh Bottom Slide Out Menu with jQuery
In this tutorial we will create a unique bottom slide out menu. This large menu will contain some title and a description of the menu item. It will slide out from the bottom revealing the description text and some icon. We will use some CSS3 properties for some nice shadow effects and jQuery for the interaction.

Making a Mosaic Slideshow With jQuery & CSS
Today we are making a jQuery & CSS mosaic gallery. Mosaic, because it will feature an interesting tile transition effect when moving from one slide to another.

17 jQuery Plugins for Easy and Efficient Reordering and Filtering Page Elements
Having full control of elements on a page and the order they are presented in can be quite useful. jQuery as always is a safe choice to go for. There are several good quality plugins to pick from. This post provides an overview of plugins you can use to provide simple yet powerful functionality to reorder, filter, add drag and drop capabilities etc.

Create an Impressive Content Editing System with jQuery and PHP
I’m going to show you how to use jQuery and PHP to build a content editing system that will allow you or your client to easily edit .html pages visually.

jQuery MegaMenu Plugin

Excellent JQuery Plugins To Enhance Form Validation
Simple jquery plugins can enhance and beautify HTML form elements, these simple jquery scripts turn a simple HTML website to a fantastic look and feel. These plugins can be enabled very easily. In this roundup I have gathered most beautiful Jquery plugins that are related to all kinds of form validation. This list also includes roundups of some blogs. Go ahead and enjoy

gameQuery – a javascript game engine with jQuery
gameQuery is a jQuery plug-in to help make javascript game development easier by adding some simple game-related classes. It’s still in an early stage of development and may change a lot in future versions. The project has a Google Code page where the SVN repository of the project is hosted and a twitter page where you can follow the daily progress of the development.

Getting Buggy CSS Selectors to Work Cross-Browser via jQuery
Below I’ve prepared a simple table that describes a number of CSS selectors that are not cross-browser compatible, along with the jQuery syntax for each. The syntaxes are exactly the same as they would be in CSS, save for the jQuery wrapper (just remove $() and the quotes to get the CSS syntax), so using these selectors in jQuery will provide somewhat of a practice ground to prepare you for when they’re fully supported by all commonly-used browsers.

jqFancyTransitions: jQuery Image Rotator Plugin
jqFancyTransitions is easy-to-use jQuery plugin for displaying your photos as slideshow with fancy transition effects.

A demo of AD Gallery
A highly customizable gallery/showcase plugin for jQuery.

jQuery UI Selectmenu: An ARIA-Accessible Plugin for Styling a Custom HTML Select Element
Our latest contribution to labs is the selectmenu plugin, which is designed to duplicate and extend the functionality of a native HTML select element, and lets you customize the look and feel, add icons, and create hierarchy within the options. Best of all, it’s built with progressive enhancement and accessibility in mind, has all the native mouse and keyboard controls, and is ThemeRoller-ready.

Create a Content Rich Tooltip with JSON and jQuery
Today we’re going to break the mold of the traditional tooltip. This tutorial will demonstrate how to build tooltips that are powered by jQuery, with information pulled from a JSON array.

jQuery image zoom effect
So today I’m going to run through the technique used to zoom the image thumbnails and display the overlay of text.

jQuery Roundabout Shapes
Roundabout Shapes provide even more paths along which your Roundabout can move. The current version of Roundabout Shapes offers eleven additional movements.

Extending jQuery’s selector capabilities

How to show/hide a hidden input form field using jQuery
This past week I was working on a project at work which included building a request form with multiple fields. It was a rather large form that included a dropdown list with an ‘other’ option. I wanted to allow users to select the ‘other’ option which then would show an input field so they can enter a specific description of what that ‘other’ item is. I didn’t want to clutter the form by displaying that additional field by default so I used a little jQuery, thus displaying it dynamically and only when needed.

A Better jQuery In-Field Label Plugin
This is a pretty nice effect, and it can really help to save space on forms. There are a billion different ways to implement this, and I don’t suggest you use the example from above because that was just a quick way to show the effect. So let’s walk through a couple of different implementation approaches and figure out the best way to implement this feature.

Useful JavaScript / jQuery Tools

JavaScriptMVC
JavaScriptMVC is an open-source framework containing the best ideas in enterprise JavaScript development. It guides you to successfully completed projects by promoting best practices, maintainability, and convention over configuration.

PEG.js – Parser Generator for JavaScript
PEG.js is a parser generator for JavaScript based on the parsing expression grammar formalism. It enables you to easily bulid fast parsers which process complex data or computer languages. You can use it as an underlying tool when writing various data processors, transformers, interpreters, or compilers.

PhoneGap
PhoneGap is an open source development tool for building fast, easy mobile apps with JavaScript.

JavaScript Shell
A command-line interface for JavaScript and DOM.

WireIt – a Javascript Wiring Library
WireIt is an open-source javascript library to create web wirable interfaces for dataflow applications, visual programming languages, graphical modeling, or graph editors.

JavaScript Programming Patterns
In this article I am trying to present some of the techniques out there that I have discovered. The patterns I would like to mention are the following:
- The Old-School Way
- Singleton
- Module Pattern
- Revealing Module Pattern
- Custom Objects
- Lazy Function Definition

Compare JavaScript frameworks
Modern Web sites and Web applications tend to rely quite heavily on client-side JavaScript to provide rich interactivity, particularly through the advent of asynchronous HTTP requests that do not require page refreshes to return data or responses from a server-side script or database system. In this article, you will discover how JavaScript frameworks make it easier and faster to create highly interactive and responsive Web sites and Web applications.

How to Test your JavaScript Code with QUnit
QUnit, developed by the jQuery team, is a great framework for unit testing your JavaScript. In this tutorial, I’ll introduce what QUnit specifically is, and why you should care about rigorously testing your code.

CoffeeScript
CoffeeScript is a little language that compiles into JavaScript. Think of it as JavaScript’s less ostentatious kid brother — the same genes, roughly the same height, but a different sense of style. Apart from a handful of bonus goodies, statements in CoffeeScript correspond one-to-one with their equivalent in JavaScript, it’s just another way of saying it.

Mind-blowing JavaScript Experiments
The following JavaScript experiments demonstrates the amazing capabilities of the modern browsers such as Chrome and Safari. In this post I will showcase to you an array of experiments that will surely blows your mind off.

Online javascript beautifier
This little beautifier will reformat and reindent bookmarklets, ugly javascript, unpack scripts packed by the popular Dean Edward’s packer, as well as deobfuscate scripts processed by javascriptobfuscator.com.

CSS & Javascript Character Entity Calculator
Enter your HTML Entity Character number (such as &#2335 or just 2335 – ?) to get the CSS and JS values for that entity.

Dygraphs: Create interactive graphs from open source Javascript library
Dygraphs is an open source JavaScript library that produces an interactive, zoom-able charts of the present time series. It is mainly designed to display the dense data sets and enable the users to explore and interpret them. It is a JavaScript Visualization Library.

Showdown – Markdown in JavaScript
Showdown – a JavaScript port of Markdown

Copy to Clipboard with ZeroClipboard, Flash 10 and jQuery
With today’s post I will show you a contrived example to get you started. I eventually hope to add this to the contextMenu.js jQuery plugin that I use, but for now this should be pretty straight forward. I do want to note that in the demo and download I am loading the latest version of the jQuery library (1.3.1) from Google’s CDN for the first time in any of my posts. For more information on how to do this see the instructions from Google.

fLABjs
fLABjs is a special API wrapper around LABjs which adapts the code to work properly in a file:// local filesystem environment. There are a number of things with core LABjs does which are not appropriate for local filesystems, such as XHR, special path handling rules, etc.

jQuery LazyLoad Ad : Delays loading of advertising
jQuery LazyLoad Ad is a jQuery plugin that takes advantage of LazyLoad delaying ads loading.

qTip – The jQuery tooltip plugin
qTip is a tooltip plugin for the jQuery framework. It’s cross-browser, customizable and packed full of features!

jQuery Collapsing and Expanding Table Rows

Improving Search Boxes with jQuery
This time we will learn how to improve a little more our sites by adding some additional interactions to our search boxes like autofocus, highlighting, autoreplace default text and more by using jQuery.

jQuery Grid Plugin

Pines Notify jQuery Plugin
Pines Notify’s features include:
- Timed hiding with visual effects.
- Sticky (no automatic hiding) notices.
- Optional hide button.
- Supports dynamically updating text, title, icon, type…
- Stacks allow notice sets to stack independently.
- Control stack direction and push to top or bottom.

jQuery Slider plugin (Safari style)
jQuery Slider is easy to use and multifunctional jQuery plugin.