What’s the point of search engine friendly navigation? To build a solid foundation in your site architecture of course. You don’t want users having to poke around like a hardware store from the 50s. But what does it mean exactly, and more importantly,  what recommendations can you make to enhance the SEO of yourself and your clients?

Follow us on a magic carpet ride of SEO splendor as we look at some positive examples of search engine friendly navigation and talk about what these examples mean for you and your business.

What makes for a spider friendly navigation? This is an out of the box CMS world we live in nowadays, so most navigation is already fairly SEO friendly. However, you can still run into absolute messes that need navigational clean-up and occasionally just need to be started again from scratch.

If you are reviewing a website that you think could be an SEO car-crash waiting to happen, here are some signs to look out for.

* The drop downs don’t work with Javascript disabled.

* Global and header links appear as images and not text.

* Tons of internal links disappear when you browse the site with JavaScript and CSS disabled.

* Any SEO-enabled toolbar you have installed report a lower than expected number of internal, followed links.

* The text-only version of your page that Google has on cache also shows the lack of internal links.

Search engine friendly navigation is a rather simple process. It requires only properly structured HTML, along with some CSS for all of the fancier bits. If you want to get technical for a second, if you are specifying a new navigation for your website, you should be asking for a “cross-browser drop-down cascading validating menu.”

HTML is simple, once you get the hang of it. Otherwise, you should be looking out for an unordered list of links in the text-only/Javascript and CSS disabled view of your page. It will look something like this.

• About
  • History
  • Team
  • Offices
• Services
  • Web Design
  • Internet Marketing
• Contact Us
  • United Kingdom
  • France
  • USA
  • Australia

For some fantastic examples, you should bookmark CSSplay.co.uk’s CSS menus page. And while we are at it, here is another great real-world example. Also, since I have your attention, take a look at this site with JavaScript and CSS disabled in Web Developer Toolbar:

There are so many other examples out there, and once you get more of a grasp of what to look for you won’t be able to help noticing good and and examples as you peruse the Web. If you have some good examples of search engine friendly navigation, don’t hesitate to drop us a line via email or the comment box.

Adobe AIR is the little platform that could. It allows you to build efficient and state-of-the-art desktop apps that work on any operation system. Cool!

In the last few years, oodles of AIR apps have came down the pike, helping you do just about everything under the sun. For this post, I’m going to focus on applications intended for web and graphic designers.

I’m gonna split the list up into sections, which are:

• Creating Graphics
• Design-Specific Tools
• Editing Images
• Taking Screenshots
• Productivity Tools
• Image Sharing Tools
• Multimedia Apps

Creating Graphics

1. Splashup Light:

Splashup Light is a casual desktop based image editor. It has tons of features and allows you to do anything you want to photos with simplicity and ease.

2. Color Lovers:

Color Lovers offers a desktop color finder that searches through the proprietary database in order to locate that stubborn color. You can search from over 1 million named colors and 300,000 user created color palettes.

3. Contrast-A:

Contrast-A allows you to check for contrast, experiment with a variety of color combinations and even interact with a 3 dimensional RGB color space.

4. LiveBrush:

LiveBrush is a drawing app that lets you create amazing graphics by combining simple motion controls with a series of brush styles. It’s really cool.

5. Icon Generator:

Icon Generator allows you to create icons of your choosing, even if you can’t draw. Simply select a default icon and make simple changes until it suits your fancy.

6. e2vector:

e2vector is a powerful illustration tool, featuring layers, masks, gradients, intersection and path splicing. It even allows you to import/export SVG files.

7. ColorPicker:

Using ColorPicker allows you to choose a color from a grid or design a color using a series of easy-to-use sliders. This is essential to you designers out there. Why stick to premade colors?

8. ColorBrowser:

ColorBrowser is a simple app that lets you organize your favorite color palettes in whatever fashion you choose. It also lets you import color palettes that you have created elsewhere using handy ASE files.

9. Kuler:

Kuler is an extremely popular application. It lets you generate color themes forr any project and also browse through thousands of themes created by the thriving community. Experiment with endless variations with no hassle. Live the dream.

10. Random Pattern:

A cool app that creates color patterns based on a set of given parameters.

Design-Specific Tools

11. Pixus:

Pixus lets you measure pixels. That’s an oft-forgotten yet essential part of design. It also lets you preview your designs and offers  multi-screen support.

12. FontPicker:

FontPicker is a simple tool that lets you scroll through a list of any font installed on your computer. Then you can pick one. Several methods of scrolling are available. Perfect for you unorganized types out there.

13. PixDif:

PixDif also lets you measure pixels. This handy app doesn’t stop there, however. It also lets you measure the difference between two design elements and tweak the alpha/opacity of said image.

14. Em Calculator:

Finally, there is a calculator to measure em. Em is an important element of design, after all. Easy and useful.

15. HtmlTextEditor:

HtmlTextEditor caters to that most basic need of any web designer, the writing of Html code. It also supoorts CDATA wrapping. Html will also change automatically when you make changes to the rich text.

16. iPixer:

iPxer allows you to create useful interactive flash content using any standard image. This is great for presentations and the like. The sky is the limit here.

17. OBO Site GatherAIR:

OBO Site GatherAIR is a simple website generation too. It allows you to create Html templates. It’s easy to use and also lets you drag and drop SWF files into said template.

18. Boks:

Boks is an app that allows you to work visually with the Blueprint CSS Framework. Drag and drop grid elements, preview in your browser and even compress your CSS code. Pretty much everything you need.

19. PixelWindow:

PixelWindow is another simple app to measure things on your screen using a handy transparent screen ruler.

20. iPlotz:

iPlotz lets you create wireframe pages and also allows you to make interactive mockups of your website and/or software. This is also perfect for presentations.

21. PixelPerfect:

PixelPerfect is another great app for measuring the size of objects on your screen. It also lets you create, resize, move and close any window you like.

22. DesignView:

DesignView is a handly little application for the design and development of Flex applications. It lets you create a quick layout of your site before you start tweaking that feisty MXML code.

23. Merlin:

Another app intended for disorganized font collectors. Merlin can help you get those fonts in order. It helps by alphabetizing all the fonts and arranging them into folders. Just like the namesake wizard.

24. Caliper:

Caliper is a measuring scale for your screen that can be dragged and rotated through 360 degrees.

Editing Images

25. ImageSizer:

ImageSizer allows you batch resize images and put them in a compressed zip file. You can also use it to to batch rotate, optimize and even rename images. Useful for bloggers who are posting image galleries. Say, this would be great for this one actually.

26. ImageDropr:

ImageDropr is a desktop app that batch unloads sets of images to Flickr. Just drag and drop your images into the application, tag or group tag them and start uploading them to the popular photo-sharing website.

27. XeIMG Image Editor:

XeIMG is an image editor that specializes in effects and filters.  These include blur, sharpen, negative, embossing, black and white and a host of others. Like a minimal easy to use Photoshop.

28. Shrink-o-Matic:

Shrink-o-Matic is a simple application that lets you shrink or resize batch images. It supports Jpeg, Gif and PNG images.

29. JustResizeIt:

Resize is a simple image resizer. Do it one-by-one or batch resize. It doesn’t have a lot of features but it works smoothly and simply.

30. CleVR Stitcher:

CleVR Stitcher is a simple panoramic photo stitcher. Drag and drop those images and the app instantly creates a panorama. Aesthetically pleasing.

31. TiltShift Generator:

If you love re-touching photos, you’ll fall in love with this application. It allows you to create the famous TiltShift(See below) effect with a single click. Eliminates tons of hassle.

Taking Screenshots

32. WebKut:

WebKut is a simple and free desktop applications that allows you to capture screenshots from the web. Cut, copy, drag, erase and a host of other options.

33. Snippage:

Snippage allows you to create snippets from any website and place them right on your desktop.

34. WebSnapshot:

With WebSnapshot you can take thumbnail, browser size or full page snapshots of any website. These snapshots are then automatically saved into a specified folder. Great for scrapbookers.

35. PhotoTable:

PhotoTable is a unique tool to capture images from the web. Simply drag an image from any website to the PhotoTable icon and it will get saved. The ease of use is through the roof.

Productivity Tools

36. AgileAgenda:

AgileAgenda is a GTD tool that plans your schedule for you. Enter some basic facts and let the application work it’s magic.Voila! Instant schedule.

37. Adobe Shortcut App for Creative Suite:

Create and manage all your shortcuts with ease. must have app for Graphic designers.

38. Live Presentations:

Live Presentations allows you to create and save presentations locally and share them online.

39. Ora Time and Expense:

Ora Time is a simple timesheet app. Track the time sheets, generate invoices and tinker with expense reports. You can also use it to generate customizable reports and invoices for your clients. This is what you would call a money saver.

40. Doomi:

Doomi is a simple “to-do” application. It will let you create tasks, set reminders and a host of other useful things.

41. Mindomo:

Mindomo is a mind mapping application that lets you organize new ideas, manage your tasks and goals. This all comes up as a visual field tree. Extremely useful.

42. FEAT:

Freelancer’s Estimation Assistance Tool lets you calculate hourly rates and project estimates. Freelancers unite!

43. Klok:

Klok is a personal time tracking application, like a timesheet at a factory job. Press a button when you start working and press another when you stop. It’s that easy. Great for invoices.

44. Fireworks Auto Backup Utility:

Firefox is a great little browser but it is prone to crashes.  If you hate to lose your work with incidents like that, this app will work like a charm for you. It creates backups of all relevant PNG files instantly.

45. Ephemeris:

Ephemeris is an app for photographers that calculates accurate times of sunset and sunrise. Use it to get that perfect shot.

46. BroadChoice Workspace:

BroadChoice workspace is an AIR based team collaboration app. You can send messages to your team members, share notes and tasks and create separate spaces for separate projects. The perfect intra-office application.

47. ConceptShare Desktop Companion:

ConceptShare lets you upload files, manage works paces and get updates from said work spaces.

Image Sharing Tools

48. zFlick:

A simple yet great app to view and save images from Flickr to your desktop. Simply drag any image from Flickr and drop it onto your desktop to save it. Great!

49. FlickrFlipper:

Another great app to search for photos from Flickr. You can also single out specific users.

50. TinyUploads:

TinyUploads lets you resize and upload images online within seconds. This is great for message boards that doesn’t allow long URLs to be posted. Twitter, too.

51. Flickr Desktop Search:

Flickr Desktop Search is a simple yet effective desktop search tool for Flickr. It does what it says.

52. Snoto:

Snoto lets you browse your recent photos from Flickr, or images uploaded by any other user. You can even view them as a slideshow. Slideshows are what make Flickr great, after all.

53. Destroy Flickr:

Completely hassle-free management of your Flickr account. It doesn’t actually destroy the site, rather it allows you to use it effortlessly.

Multimedia Apps

54. RichFLV:

RichFLV lets you play and edit those crafty FLV files. You can also use the app to convert FLV files to SWF files. It also lets you convert the audio to MP3. Extremely functional.

55. Fractal4D:

Fractal4D is a great app that lets you draw these neat fractal swirls. They can either be saved as simple PNG files or exported as vectors to use in Adobe Illustrator. What else do you need? Fractal swirls!

56. SWF Shot:

SWF Shot allows you to create high-resolution snapshots of your SWF, PNG and JPG content.

57. UVLayer:

UVLayer allows you to organize and play your digital media including photos, videos and games. Your all-in-one media player.

58. Adobe Media Player:

A great media player that lets you play downloaded or streamed media. Highly customizable and no hassle playing.

59. LightBoxer:

LightBoxer gives you a constantly changing showcase of various images as your screensaver.

60. Webcam To GIF:

This is exactly what it sounds like. Convert webcam movies into GIF format.

MooTools, contrary to popular belief, is still running strong. I know it seems as though jQuery rules the world with an iron and unflinching fist, but the little engine that could still gets a lot of foot traffic. jQuery may be the most popular Javascript framework, but MooTools is the “cool” cousin who listens to the Velvet Underground. It offers a ton of functionality and can bed dropped into any website with ease. MooTools also has tons of plugins and tutorials up for grabs. Below are fifty of the best ones out there. Enjoy.

MooTools Menus, Navigation and Buttons

Simulate Flash Horizontal Navigation Effect

Vertical Menu with Show/Hide Effects

Snook-Style Navigation Using MooTools

Horizontal Animated Menu using MooTools

Skype-Style Buttons Using MooTools

iPhone Checkboxes Using MooTools 1.2.3

MooTools ScrollSpy

Product Highlighter with MooTools

Moousture

MooTools Charts and Grids

OmniGrid – Advanced DataGrid

Artness MooCSS Charts v0.1

Mootools Table to Charts

MooTools Calendars and Date Management

MooGenda – Javascript Calendar Based on MooTools

MooTools Events Calendar

Vista-like Ajax Calendar

Elegant Animated Weekly Timeline for Websites

MooTools Sliders, Scrollers and Image Galleries

Ultra Versatile Slider for Websites

SmoothScroll Using MooTools 1.2

Slideshow 2

Facebook Sliders With Mootools and CSS

Fantastic News Ticker Newsvine-like Using Mootools

Mootools Content Slider Class v2

mooSlide – Ajax Based Slider / Lightbox Replacement

MooFlow V0.2 – Image Gallery Slider

MooTools Lightboxes

Pamoorama

Media Box Advanced

ReMooz Lightbox

MooTools Image Effects and Transitions

ImageCaption – Auto-Captioning Images

ImageZoom

Custom Missing Image Graphics Using MooTools

Kroppr – Image Cropping Script

Sexy Album Art with MooTools

mParallax – Turns a Selected Element into a Window

MooTools Flashlight Background Effect

mooFlickr – Display your Flickr Info In an Ajax Box

MooTools Forms and Validation

Validate – phatfusion

AutoCompleter

MooEditable

Queued Photo Uploader

MooTools Web Page Elements

MooTools Font-Size Scroller with Cookie Save

Morph Effect on Mouseenter/Mouseleave

Roar – Notifications

Instruct Google Analytics to Track Outbound Links

News Ticker with Vertical Scrolling and Start/Resume

Window.Growl 2.0

Sexy Alert Box 1.2

mooSocialize – Social Bookmark Widget

MooTools MooTools and Twitter

Twitter Emulation Using MooTools 1.2 and PHP

MooTools TwitterGitter Plugin

MooTools and Wordpress

Add a show/hide login panel to your Wordpress theme using Mootools

Wordpress 2.7.1 Featured Article Plugin

jQuery has been taking web design by storm these past few years. And it’s easy to see why. It’s a fast and concise Javascript library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery has changed the way designers use Javascript the world over.

Aside from all of that, jQuery is known for it’s abundant plugin collection. Not a day goes by without some new useful plugins to turn your idea of web design upside down. Whether you want to create a nice image gallery, or to slide things right to left, jQuery can do it. It can also replace the tooltip of element. Tooltip is a great way to show extra information regarding the element you hover your trusty mouse over.

Here are 30 jQuery plugins you can use to make your tooltips more user friendly:

Simpletip

Easy Tooltip

Person Tooltip

Digg Style Sharing Tooltip

Tip Tip

wTooltip

Hernan’s Tooltip Plugin

HTML Tooltips

ThumbHover

bQuery

Simple Tooltip

HoverTips

BetterTip

Bassistance Tooltip

MB Tooltip

ClueTip

webDev Tooltip

Orbital

Horizontal Tooltip

Build a Better Tooltip with jQuery Awesomeness

BluFusion Tooltip

qTip

Flowplayer Tooltip

ProtoTip2

Jgrowl

Ezpz Tooltip

Coda Tooltip

Tipsy

Pop

vTip

And that’s it! As always, if you know of any more send us an email or drop it in the comment box. Happy designing!

Lightbox, and all of it’s various clones, can work magic on your jQuery web design. But where do you even start? There is so much out there and, frankly, most of it is crap. Well, don’t fret. Webrulon has done the searching for you. We’ve scoured, scrubbed and rinsed(?) the Internet to find ten of the most promising Lightbox plugins and Lightbox clone plugins available for jQuery. Without further adieu, here they are:

1. jQuery FancyZoom

Orderlist developed this powerful and versatile jQuery-powered Lightbox clone. More details can be read here.

The code below initializes the plugin:

$(document).ready(function() {
$('a.zoom').fancyZoom({scaleImg: true, closeOnClick: true});
});

Sample HTML code:

<a href="insicdesigns.com"><img src="path/to/image/sample.gif"></a>

$(document).ready(function() {
$("p#test1 a").fancybox();
$("p#test2 a").fancybox({ 'hideOnContentClick': true });
$("p#test3 a").fancybox({
              'zoomSpeedIn': 0,
              'zoomSpeedOut': 0,
              'overlayShow': true
});
});

25 Powerful and Useful jQuery Tutorials for Web Developers and Designers

jQuery is all over the place these days. It’s rapidly catching up to CSS as the web template of choice for up and coming designers. It’s easy to see why. It’s constantly changing. Evolving. The only problem with this is, however, you have to constantly change and evolve as well. One simple must keep track of all of the new plugins, tutorials and addons that come down the pike. It can be quite an undertaking. Don’t worry, though. Webrulon is here to help. Here is a list of 25 recent tutorials that will get you up to speed and have you jQuery-ing in no time.

Submit A Form Without Page Refresh using jQuery
Demo URL : View Demo.
Description : This teaches you exactly what it says it does. Get rid of annoying page refreshes and let your users submit a form with simplicity and ease. Not a bad feature to have on a website. This will prevent people from clicking away in annoyance.

Live Email Validation
Demo URL : View Demo.
Description : In this tutorial you will learn how you can validate the format of an email address “live” using that crafty jQuery. It will also let you use regular expressions without any additional plugins.

Fading Menu – Replacing Content
Demo URL : View Demo.
Description : This teaches you to replace content on the fly, live. The possibilities are pretty endless here. For instance, you could use it for animation or to react live to events as they happen on your site. Not a bad thing to know.

Create a Scrolling Menu with CSS and jQuery
Demo URL : View Demo.
Description : This is exactly what it sounds like. Create a scrolling menu using CSS and jQuery. Your website isn’t classy unless it has a scrolling menu, right? Scrolling menus are the Segways of the 2010 web.

Create a live-update list effect with jQuery
Demo URL : View Demo.
Description : A live-update list effect is, essentially, a list that is generated as new data is added. This tutorial will teach you how to do it. No more outside looking in on this one.

Advanced “Poll” jQuery Plugin

Description : This tutorial will teach you how to create a jQuery plugin from start to finish. What’s the plugin do? Allows you to easily add a simple poll widget to a web page or blog. Don’t worry. Future plugins will be much more dastardly.

How to Use jQuery to Preload an Image with a Fade-In Effect
Demo URL : View Demo.
Description : There are all kinds of way to speed up, or give the illusion therein, the way images load on your website. This plugin teaches you aboutl the preloading capabilities of JavaScript while using the jQuery Framework.

Flickr Menu Design
Demo URL : View Demo.
Description : This tutorial will explain how to create a simple step-by-step way to implement a Flickr Horizontal Menu in CSS and jQuery. Now get that camera snapping.

Awesome Popup jQuery Calculator
Demo URL : View Demo.
Description : Numbers! Who needs em? Well, mostly everyone actually. This tutorial will help you keep a handle on them pesky numbers by having you build a popup jQuery calculator for your site.

Semantic Blockquotes with jQuery
Demo URL : View Demo.
Description : Blockquotes are useful in making your text visually appealing. This tutorial shows you how to create said blockquotes using  jQuery. This is a fairly easy tutorial so, beginners, have at it.

Selecting and Styling External Links, PDFs, PPTs …
Demo URL : View Demo.
Description : This handy tutorial teaches you how to use jQuery to select and style PDFs, PPT, images, and external links using jQuery and CSS.

Authenticating Twitter API calls with PHP & jQuery
Demo URL : View Demo.
Description : This tutorial teaches you how to create a simple call to the Twitter API to with your site’s Twitter credentials. This makes it easy to quickly and effortlessly post topics related to your blog from your Twitter. Great for multitaskers.

jQuery Slideshows With the Cycle Plugin
Demo URL : View Demo.
Description : Wanna implement the jQuery Cycle?  This tutorial shows you how. What is the jQuery Cycle? A plugin that allows developers to quickly and easily create a slideshow out of anything contained within a given div element. Cool!

jQuery and Google Maps Tutorial
Demo URL : View Demo.
Description : Using with jQuery within Google Maps can be a hefty task indeed. This tutorial seeks to lessen the burden by giving you step by step instructions. You’ll be Lewis and/or Clark in no time.

jQuery Sequential List
Demo URL : View Demo.
Description : This tutorial will show you how to use jQuery to add a sequent of CSS classes to create a graphical list. Super useful.

Using jQuery Slider to Scroll a Div
Demo URL : View Demo.
Description : This tutorial shows you how to create a horizontally scrolling div using  jQuery, html, and CSS. The trusty jQuery is the main focus of this tutorial, which is used to build the slider which controls the scrolling.

How to Mimic the iGoogle Interface
Demo URL : View Demo.
Description : This tutorial teaches you how to create a customizable interface with widgets. Sound familiar? You got it. iGoogle! The finished product will be simply and minimally coded, just like  iGoogle. This of course opens the doors for tons of applications.

Reddit-style Voting With PHP, MySQL And jQuery
Demo URL : View Demo.
Description : Ever been on Reddit? The site is interesting for a number of reasons, but one way is how voting is handling. A simple up or down vote is the order of the day there. This tutorial teaches you how to emulate that for your site, using jQuery, PHP and MySQL.

Simple jQuery Spy Effect
Demo URL : View Demo.
Description : A great tutorial showing how to use the jQuery Spy Effect plugin and scroll through lists in an aesthetically pleasing manner.

Create a slide tabbed box using jQuery
Demo URL : View Demo.
Description : A simple and straight forward jQuery tutorial that creates a cool sliding tabbed box. For fans of simple and clean web design.

Horizontal Animated Menu
Demo URL : View Demo.
Description : In this tutorial you will build a basic horizontal animated menu using  jQuery. Nothing like the old favorites.

Load In and Animate Content with jQuery
Demo URL : View Demo.
Description : This tutorial teaches you amp up average and humdrum websites.  How? By adding ajax functionality so content loads into the relevant container instead of the user having to navigate to another page. It also teaches you to use great animation effects. Double shot.

Add icons to your links automatically using jQuery & CSS
Demo URL : View Demo.
Description : This tutorial is useful if you want to attach a particular icon to a particular type of link. For example: A PDF icon can attach to all of the PDF file links, a text document icon can attach to all text document links or a zip icon can attach to all links that are linked to zip files. There are many more permutations, of course.

Creating an OS Web Interface in jQuery
Demo URL : View Demo.
Description : In this truly amazing tutorial, you will recreate a complete OS Web Interface with jQuery. Take a look at the demo. This just may blow your mind.

How To Build Quick and Simple AJAX Forms with JSON Responses
Demo URL : View Demo.
Description : In this tutorial, you will go through the steps of setting up an AJAX form, which will return a JSON response. These are used to display success and error messages. Pretty useful.

The force known as jQuery keeps gaining more and more e-steam. To go along with the growth, a bevy of plugins and tutorials are starting to pop up a well. One helpful plugin is known as a content slider.

Content sliders are a great way to show large amount of content on a smaller area of a web page or blog. Dynamic auto sliding content sliders are a opular add-on to numerous websites all over the web. If you are interesting of giving them a whirl, check out this list of our favorite sliders and tutorials  you can get your hands on:

1. jFlow | Official Website | Demo

This is a fairly functional and easy-to-use slider. If you are new to sliding this may be the way to go. Check out the helpful demo as well.

2. Create Featured Content Slider Using jQuery UI | Official Website | Demo

This is essentially a tutorial that helps you “show off the best content of your website or blog in a nice intuitive way” in order to “catch more eyeballs”. Their words. And not far of the mark. This tutorial will help you do just that and more.  For example, One of the techniques to show the featured content is the auto-playing content slider.

3. Create Beautiful jQuery sliders tutorial | Official Website | Demo

This is another tutorial. It explains how to develop and create beautiful jQuery sliders. It features a ton of image descriptions and easy to follow chapters.

4. A Basic Content Slider With jQuery | Official Website | Demo

This is about a simple and basic a slider as you can get. But don’t worry. It’s fully functional. It’s just missing some of the bells and whistles. Perfect for newbies, though.

5. JC Play List | Official Website | Demo

This is a free and simple to use Flash component. It’s created specifically for easy visual implementation of  XML lists such as XMLs, RSS feeds etc. It words in tandem with Picasa and Flickr.

6. Easy Slider | Official Website | Demo

Guess what? This slider is easy to use, as the name indicates. It’s used for content to slide horizontally or vertically with just a humble mouse click.

7.  jqGalScroll | Official Website

jQuery Gallery Scroller (jqGalScroll) takes a list of images and creates an instantaneous photo gallery. The gallery can flow vertically, horizontally, or diagonally. This handy application will also create pagination for easy scrolling.

8. Image Gallery | Official Website

This is nothing complicated. It’s just a simple image slider. But why mess with simple functionality, right? It’s simple, but it sure does work.

9. Making a Content Slider with jQuery UI | Official Website | Demo

This is an extremely well explained and easy to follow tutorial authored by by Dan Wellman for NetTuts.

10. Creating a Slick Auto-Playing Featured Content Slider | Official Website | Demo

This is a tutorial written by Chris Coyier from CSS-Tricks.com. The script is based on the infamous Coda slider. As such, it’s extremely innovative and easy to use.

11. slideViewer | Official Website

SlideViewer is a lightweight (1.5Kb) jQuery plugin that will make sure your website isn’t bogged down by heavy program code. It allows you to instantly create an image gallery by writing just few lines of HTML. If HTML is Greek to you, don’t worry. It will walk you through step by step.

12. Start/Stop Slider | Official Website | Demo

This is another easy to use and convenient slider plugin. It lacks functionality, but the stuff it can do it does well. For instance, you can stop and start a moving image gallery with ease.

13. A Minimalist jQuery Plugin | Official Website | Demo

This is a  tutorial from the infamous WebDesignBooth. It shows you how to create a simple content slider using jQuery. Nothing too elaborate. Just trying to get you going.

14. BarackSlideshow | Official Website | Demo

This is a very teeny and light slideshow script for jQuery. It’s inspired by the Barack Obama slideshow featured on his official website during his successful Presidential bid. It uses the considerable power of MorphList to enhance visualization and navigation of the images.

15. Wordpress Theme using JQuery s3Slider | Official Website | Demo

This is a handy Wordpress theme that allows you to create a featured slider using jQuery S3Slider functionality. It’s the real deal, folks.

Mozilla’s new iteration of it’s popular Firefox browser runs up to fifteen percent faster than it’s predecessor, various reports indicate. This, however, still puts the browser behind the speedier Google Chrome and Apple Safari browsers. JavaScript three times faster than Opera 10 and more than four times faster than that paragon of pokeyness,  Internet Explorer.

Mozilla Firefox accounts for 25 percent of all browser use, worldwide. Internet Explorer boasts 63 percent of the market share and feisty upstart Google Chrome  captures just 5 percent.

The king is dead! Long live the king! As 2009 fades into nostalgic glory, and 2010 begins it’s slow crawl towards infamy, web designers can’t help but wonder what the year will hold for their favorite profession/hobby/whatever. Here is a list of five web design trends to look out for in 2010. None of this stuff is going to reinvent the wheel. Mostly’ it’s an analysis of several things that people caught on to during 2009 that look to be making a giant leap towards the e-mainstream.

1. Oversized logos and headers

It’s easy to see why this trend is going to blow up big in 2010. It’s eye-catching. It catches people’s interests. Heck, it could potentially prevent someone from clicking away for a few seconds. Isn’t that the point? Plus that de-emphasize clicking and place a strong emphasis on scrolling down. This simple transition helps ease anxieties of users used to years of poor and malfunctioning links.

2. Sketched and hand-drawn design

Hand-drawn and sketched design is by no means new, but it hasn’t exactly caught on in a big way yet. Why is that? Most web-designers are afraid to dip their toes into the genre for fear they can’t draw. The thing is, it doesn’t really matter. Even poorly drawn letters can imbue any site with a personalized sense of charm. That’s what 2010 is going to be all about, putting your personal stamp on your website. This will be one such tool for doing just that.

3. Slab typefaces

Slab typefaces are relatively new in the Internet world. However, they’ve been around for hundreds of years in the “real world.” Think, the typeface used on wild west wanted posters. Why are they catching on now? The aforementioned trend towards larger logos and typefaces lends itself nicely for the mighty slab to take it’s place among the web-elite. Like a double bacon burger with extra cheese, slab typeface doesn’t do anything daintily.

4. One page layouts

As opposed to the mighty slab, one page layouts challenge you to edit away what’s unnecessary. In 2010, this trend will move away from quirky navigation and become more minimal in its approach. These websites are more like clickable business cards. They will be more of a one-stop-shop for how to locate you and your work on various other sites– your blog and your social media hangouts. They could also eventually overtake the conventional resume.

5. Change of perspective

The desktop perspective has been around so long now that it’s time for a chance. Put a cork in it. It’s done. Ok, well not done. But there will be more choices in 2010 for sure. One such choice is a change in perspective. This could be side-shot aerial, foregrounds and backgrounds mixed(shown above) and any other number of experimental perspectives. We’ll see what designers think of as the year plays out

That is it for now. What do you think? Have any of your own ideas where web design is going in 2010? Let us know.

Yeah, we all know jQuery has been taking the web development world by storm these past few years. Many of us have been using a good deal of the plugins lately. Below you’ll find a list of 50 amazing plugins that many developers use. Some of these you may have already seen, others might be new to you. Check them out and I hope they offer you some inspiration.

Menu

1) LavaLamp

Tabs

5) jQuery UI Tabs / Tabs 3 – This simple jQuery based tab-navigation plugin is easy to use.

Accordion

7 ) jQuery Accordion

Demo

SlideShows

9) jQZoom- allows you to install a small magnifier window close to an image on your web page. See example below for clarification.

Transition Effects

11) InnerFade – This is designed to fade any element that is inside of a container in and out.

jQuery Carousel

15) Riding carousels with jQuery – This is a jQuery plugin controls a list of items in either horizontal or vertical order.

Demo :

Color Picker

16) Farbtastic – This plugin uses Javascript to enable you to add one or more color picker widgets into a page.

Demo :

LightBox

18) jQuery ThickBox – is a webpage user interface dialog widget written in JavaScript.

Demo :

Demo :

Demo :

iframe

21) JQuery iFrame Plugin – If javascript is turned off, this reverts the page to show a link to the content. Useful for sites that go in and out.

Form Validation

22) Validation – This comprehensive set of form validation plugins even dynamically creates IDs and ties them to labels when they are missing.

Demo :

Demo :

Form Elements

Star Rating

29)Half-Star Rating Plugin

ToolTips

30) Tooltip Plugin Examples – A fancy tooltip with some custom positioning. This tooltip features an extra class for nice shadows, and even some other content. You can find a demo here.

Tables Plugins

32) Zebra Tables Demo - This uses jQuery to do zebra striping and row hovering. If you are into this kind of thing, it’s the best of it’s class.

Demo :

Demo :

Draggable Droppables And Selectables

36) Sortables - This plugin allows you to sort several lists, mix and match the lists, and send the information to a database. Best of all? It’s super easy to use.

Style Switcher

38) Switch stylesheets with jQuery- This allows visitors to your website to choose which stylesheet they would like to view your site with. It uses cookies so when they return to the site or visit a different page they still get their chosen stylesheet. A Demo is here.

Rounded Corners

39) jQuery Corner Demo

Must See jQuery Examples

41) jQuery Air – This is a passenger management interface for charter flights. Also features a great Tutorial that you will enjoy.

Demo :

Demo :

Demo :

50) JQuery BlockUI Plugin -lets you simulate synchronous behavior when using AJAX, without locking the browser. When activated, it will prevent user activity with the page (or part of the page) until it is deactivated. BlockUI adds elements to the DOM to give it both the appearance and behavior of blocking user interaction.