jQuery plugins are constantly being released, and it’s no surprise since it’s insanely popular, and for good reason. The only problem is being able to sort through them all to find the good ones. That’s why we’re always on the lookout, and we will found some good ones for you. Here are 10 useful jQuery plugins for designers.

You may also like:

• 50 Fresh jQuery Plugins
• 10 Best jQuery Plugins Of 2011
• 20 jQuery Plugins You Have To Know
• 25+ Latest jQuery Plugins
• 26 jQuery Plugins New & Fresh

In this post you can fine 20+ Superb jQuery Plugins. Enjoy!

iPicture jQuery Plugin For Interactive Images With Tooltips

iPicture, a jQuery plugin to interactive images with tooltips, Its perfect for such cases and allows us to place tooltips over any desired location of images.

Once the user hovers/clicks the pointers, the tooltip is displayed with its pre-defined content.

There are several options for customizing the functionality including the ability to use different pointer images for each tooltip or their animation types.

Compatible with slideshows or sliders. iPicture needs few configuration to run everywhere!

Also, iPicture has a handy initialize function that saves so much time by enabling a configuration wizard where we can place pointers + set their definitions with drag ‘n’ drops and the JSON output to be used in the code is created automatically.

Requirements: jQuery & jQuery UI

Compatibility: All Modern Browsers

Website: http://ipicture.justmybit.com/

Download: http://ipicture.justmybit.com/download.php

Blur Web Elements with jQuery Plugin: Blur.js

Blur.js is a amazing jQuery plugin for blur web elements.

It actually works by creating and placing psuedo-transparent blurred elements over the targeted ones and makes use of the StackBlur algorithm.

The source of the blurred item (it can use the background of body or other HTML elements), radius of the effect and it is positioning can be defined with ease.

There is built-in caching for re-using the blurred image and there is support for making the item where the effect is applied to be draggable (requreis jQuery UI).

Requirements: jQuery

Compatibility: All Modern Browsers

Website:http://www.blurjs.com/

Awesome jQuery File Upload Plugin

jQuery File Upload is an awesome jQuery plugin for creating a flexible and user-friendly upload functionality with ease.

The plugin support multiple file selection and drag & drops. It can display a preview of images to be uploaded and progress bars exist to inform users.

Plugin works with any server-side platform (Google App Engine, PHP, Python, Ruby on Rails, Java, etc.) that supports standard HTML form file uploads.

jQuery File Upload can handle cross-domain, chunked and resumable file uploads. File types and max-min sizes can be restricted with simple functions and it can work with any server-side language.

There are callbacks on every level and a detailed documentation that covers many different scenarios exists.

Requirements: jQuery

Website: http://blueimp.github.com/jQuery-File-Upload/

Chico UI : Free jQuery User Interface Web Tools

Chico UI is an open source free jquery user interface web tools to ease developing for developers and designers.

Built on top of jQuery these tools brings known interaction patterns for your website taking advantage of HTML5 and CSS3 features.

The components include auto-complete, blink, calendar, carousel, countdown, date-picker, dropdown, expando, form, top navigation, validation, zoom and more.

There is a CSS layout framework named Chico Mesh for accomplishing any type of web layouts and grids.

Also, a CSS library exists for styling HTML and UI elements like lists, tables, buttons, typography, pagination.etc..

Each Chico UI resource is well-documented + supported with demos and various tutorials exist for more details.

Requirements: jQuery

Compatibility: All Major Browsers

Website: http://chico-ui.com.ar/

Download: http://chico-ui.com.ar/download

Awesome Smooth jQuery Scrolling Plugin: PageScroller

PageScroller is a simple and elegant navigation jQuery plugin for scrolling web pages nicely and smoothly. Enhance usability on your website with sleak navigation controls.

It is a very flexible plugin, can integrate into any page easily and auto-create a navigation that sits in the sidebars or at the top.

Clicking each navigation item ends up in a scrolling that gets the user to the related section.

The plugin can also display top and bottom arrows for browsing through the sections one-by-one.

There are several customization option including the scrolling speed, offset and callbacks.

Requirements: jQuery v1.3+

Compatibility: All Modern Browsers

Website: http://pagescroller.com/

jTable: Ajax Datagrids jQuery Plugin

jTable is a jQuery plugin for creating AJAX based CRUD interfaces without coding HTML or Javascript.

The plugin generates all the HTML required and uses jQuery UI for “add new/edit record” dialogs.

It has several features including:

• Automatically creates HTML table and loads records from server using AJAX.
• Creates ‘create new record’ jQueryUI dialog form. When user creates a record, it sends data to server using AJAX and adds the same record to the table in the page.
• Creates ‘edit record’ jQueryUI dialog form. When user edits a record, it updates server using AJAX and updates all cells on the table in the page.
• Allow user to ‘delete a record’ by jQueryUI dialog based confirmation. When user deletes a record, it deletes the record from server using AJAX and deletes the record from the table in the page.
• Shows animations for create/delete/edit operations on the table.
• Supports server side paging using AJAX.
• Supports server side sorting using AJAX.
• Supports master/child tables.
• Allows user to select rows.
• Exposes some events to enable validation with forms.
• It can be localizedeasily.
• All styling of table and forms are defined in a CSS file, so you can easily change style of everything to use plugin in your pages. CSS file is well defined and commented.
• It comes with pre-defined color themes.
• It is not depended on any server side technology.
• It is platform independed and works on all common browsers.

Records can be browsed with Ajaxed pagination and they can be sorted(server-side) as well.

jTable can be set to display sub-tables for a given record which is handy for listing any sub-details.

The interface is completely themable via CSS (there are already several themes) and the resource is very well-documented.

Requirements: jQuery

Compatibility: All Major Browsers

Website: http://www.jtable.org/

Demo: http://www.jtable.org/Demo

Download: http://www.jtable.org/Home/Downloads

jQuery Slideshow Plugin With Huge Effects :Camera

You’ll remember Diapo free jQuery plugin for creating content sliders with beautiful and custom transition effects (like curtain and mosaic).

The developer of Diapo has created a fresh plugin named Camera jquery slideshow plugin with huge effects, which has more features and works very well with responsive layouts.

Slides can be created with any HTML elements (images, text, videos, etc.) and Camera displays them with a good looking interface + a set of transitions.

Items can be browsed with prev-next buttons or bullet navigation, a play/pause option exists and a loader informs the user about the timing of the next slide.

The plugin can be skinned via CSS and there are already multiple skins provided.

It has options for almost everything, all aspects of the interface + functionality can be customized and callbacks exist on every level.

Requirements: jQuery

Compatibility: All Major Browsers

Website: http://www.pixedelic.com/plugins/camera/

Flexible jQuery Notification Plugin : noty

noty is a jQuery notification plugin for creating flexible, user-friendly, “JavaScript-alert and confirm dialog boxes alternative” notifications plugin its very easily to use.

It has built-in support for alert, success, error and confirmation messagesand they can either be displayed as HTML elements that fade in/out or as modal boxes.

The notifications can be displayed on any part of a web page (top, bottom, center, top left or top right) and many options exist for customization (speed of open/close animations, display duration, being closeable or not and more).

Each notification is displayed from a queue in an order which is nice for making sure each item is shown.

There are various callbacks provided and an online editor exists for customizing the notifications.

Requirements: jQuery

Compatibility: All Major Browsers

Website: http://needim.github.com/noty/

Download: https://github.com/needim/noty

qTip2 – Powerful jQuery Tooltips

qTip2 is the powerful jquery tooltips plugin, its second generation of the advanced qTip plugin for the ever popular jQuery framework.

qTip2 provides you with tonnes of features like speech bubble tips and image-map support, The plugin can display the tooltip in any position wanted, plays nicely with image maps and they can be set to follow any element (handy for drag ‘n’ dropped and animated items) or mouse.

Tooltips can be styled completely, there is an optional Theme-roller support and they can even be displayed as modal windows.

It has built-in Ajax integration and can load any remote data. qTip2′swebsite has lots of creative demos including 3rd part service and various popular plugin integration.

Requirements: jQuery

Compatibility: All Major Browsers

Website: http://craigsworks.com/projects/qtip2/

Demo: http://craigsworks.com/projects/qtip2/demos/

Download: http://craigsworks.com/projects/qtip2/download/

Background Image Slideshow jQuery Plugin: bgStretcher

bgStretcher is a background image slideshow jQuery plugin which allows you to add a large image (or a set of images) to the background of your web page and will proportionally resize the image(s) to fill the entire window area.

It can be used with a single image just for the resizing feature or multiple images as a slideshow.

The slideshow can be browsed with pagination and prev-next buttons besides the autoplay and there are multiple transition types offered.

Features:

1. Unobtrusive script, simple to setup
2. Works with all modern browsers
3. Supports single and multiple images

Further customization is possible by defining the slideshow speed, delay between each item and sequence mode (in an order or randomly).

Also, methods exist for playing and pausing it from any custom events.

Browser capability

MS Internet Explorer 6, 7, 8, 9, Mozilla Firefox 2, 3, 4, Opera 9+, Apple Safari, Google Chrome

Requirements: jQuery

Demo: http://www.ajaxblender.com/script-sources/bgstretcher-2/demo/index.html

Website: http://www.ajaxblender.com/bgstretcher-2-jquery-stretch-background-plugin-updated.html

jQuery OrgChart Plugin For Creating Visualising Organization Charts With jQuery

jOrgChart is a jQuery plugin which allows to converts nested unordered lists elements into tree structure. but with an organization chart-like output.

It has support for any depth, clicking each item can show/hide the sub-levels and drag ‘n’ dropping elements from one node to another is possible, the interface will adjust the levels accordingly.

• Very easy to use given a nested unordered list element.
• Drag-and-drop reorganisation of elements.
• Showing/hiding a particular branch of the tree by clicking on the respective node.
• Nodes can contain any amount of HTML except <li> and <ul>.
• Easy to style.

Requirements: jQuery

Compatibility: All Major Browsers

Website: http://th3silverlining.com/2011/12/01/jquery-org-cha…

Demo: http://dl.dropbox.com/u/4151695/html/jOrgChart/examp…

Download: https://github.com/Tquila/jOrgChart

Clipping JPEGs Into Polygons With JavaScript: polyClip.js

When we need to take an image and cut an irregular shape out of it. The only thing to do is to edit image withphotoshop and save as a PNG, because it is the only image format used by all web browsers that support alpha channels.

polyClip.js is a script, built on jQuery, that allows us to clip any image withimagemap coordinates using HTML5 Canvas.

For implementation on many images, “how practical would it be to use polyClip.js” is open to discussion however, for only few images, it can be a huge byte-saver.

The library also supports older versions of IE (7-8) using the Excanvas JavaScript library which polyfills canvas using VML.

Requirements: jQuery

Compatibility: All Major Browsers

Website: http://www.useragentman.com/blog/2011/10/29/clipping…

Download: https://github.com/zoltan-dulac/polyClip

jQuery Collapse: Expanding & Collapsing Content jQuery plugin

jQuery Collapse is a lightweight (less than 600 bytes) jQuery plugin that enables expanding and collapsing content.

It allows us to define the HTML elements to be hidden and displayed when needed with a simple function that has callbacks for integrating custom events.

jQuery-Collapse is also cookie support which remember what’s visible and what’s not. Just include the jQuery cookie plugin and it works! The plugin will gracefully degrade if cookie support is not available.

The plugin is also designed with WAI-ARIA in mind that helps the web pages being more accessible to people with disabilities.

And, it is also cross-browser, completely tested in major browsers (including IE6).

This Plugin delivers an accessible and lightweight solution to a widely adopted interface pattern. Plugin is designed to be flexible and modular. Options include custom callbacks to satisfy every customization need.

Requirements: jQuery

Compatibility: All Major Browsers

Website: http://webcloud.se/code/jQuery-Collapse/

Download: http://github.com/danielstocks/jQuery-Collapse

TextExt: Modern Text Field With jQuery Plugin

TextExt is a modern jQuery plugin for improving the functionality of text input fields as tag input and autocomplete.

The plugin is modular, can be extended easily and has features like

The plugin is modular design allows you easily turn astandard HTML text input into a wide range of modern, tag inputs, filtering, auto-complete, placeholder text and Ajax (which are all plugins of TextExt) without bloating your source code and slowing down your site with the code that you aren’t using.

It can also display a custom arrow besides select fields, show the items in them as suggestions-while-typing and more.

TextExt is very well-documented, regularly improved and has too many examples to start with.

License

The TextExt component is released under the open source MIT. You can use it any way you want.

Requirements: jQuery

Compatibility: All Major Browsers

Website: http://textextjs.com/

Demo: http://textextjs.com/manual/examples.html

Download: http://textextjs.com/download.html

FeedEk: RSS/ATOM Feeds With jQuery Plugin

FeedEk is a jQuery plugin for displaying RSS/Atom feeds.

The plugin is so easy to use and can grab the feed items from any domainwith a few lines of code.

Just mention the feed URL, how many items to be displayed, description and publish date to be shown or not and that’s all.

Requirements: jQuery

Compatibility: All Major Browsers

Website:http://www.jquery-plugins.net/FeedEK/FeedEK.html

Demo:http://www.jquery-plugins.net/FeedEK/FeedEk_demo.html

Customizable jQuery Content Sliders (With MooTools)

In 2011 you see there are so many beautiful jQuery content sliders out there which can be easily integrated into web pages where most of them come with a default design and functionality.

Revolver.js is a jQuery and MooTools plugin with an API covering the most common slider functions. Revolver.js easy-to-use as a boilerplate or framework for making your own slider.

Almost any markup can be used for sliders, their designs are under control with CSS and the API is flexible enough to manage it in any desired way.

There are many transitions types to choose from, functions exist for browsing items (first, last, next, etc.) and callbacks are offered for each event.

Requirements: jQuery or MooTools

Compatibility: All Major Browsers

Website: http://revolverjs.com/

Demo: http://revolverjs.com/examples.html

Download: https://github.com/johnnyfreeman/revolver

Acorn Media Player Accessible & customizable HTML5 Player

Acorn Media Player is a jQuery plugin for creating, accessible and customizable HTML5 media player.

The player can be completely controlled with keyboard (with standard tab-based navigation), has screen-reader support + accessible themes and various other accessibility tweaks.

There is also support for closed captions and a dynamic transcript generated from the selected captions is provided.

Acorn Media Player can be themed with ease, can display videos in fullscreen, informs users on loading processes with loading + buffering indicators and can even remember the volume level used with HTML5 localStorage.

HTML5 <video> Player features:

• Easy customization and themeing
• Fullscreen support
• Buffering indicator
• <audio> support
• Loading indicator
• Remembers volume level using HTML5 localStorage
• Easy to use, understand and adapt
• Free and Open Source

The sliders (seek and volume) can either use jQuery UI’s widgets or a custom one is provided as well and few other options exist (like the direction of the volume slider) for further customization.

Requirements: jQuery

Website: http://ghinda.net/acornmediaplayer/

Demo: http://ghinda.net/acornmediaplayer/demos.html

Download: https://github.com/ghinda/acornmediaplayer

Awesome jQuery UI Bootstrap Theme

jQuery UI Bootstrap is a awesome jQuery UI theme that is inspired from Twitter’s project and brings the slickness of it to jQuery UI widgets.

With this theme, not only do you get the ability to use Bootstrap-themed widgets, but you can now also use (most) of Twitter Bootstrap side-by-wide with it without components breaking visually.

Requirements: jQuery & jQuery UI

Compatibility: All Major Browsers

Website: http://addyosmani.github.com/jquery-ui-bootstrap/

Download: https://github.com/addyosmani/jquery-ui-bootstrap/

Scrollorama :jQuery Plugin For Scrolling Effects

Scrollorama is a jQuery plugin for creating scrolling effects in scrolling of web pages.

By dividing the content into blocks, it simply lets us to animate elements on the page (when a block is reached) based on the browser window’s scroll position.

The animations are accomplished using CSS properties, durations of them can be defined and it is also possible to set the exact scrolling positions of the start/stop events.

Requirements: jQuery

Compatibility: All Modern Browsers

Website: http://johnpolacek.github.com/scrollorama/

CoolCarousels : 21 Image Sliders/Carousel

CoolCarousels is a showcase of 21 image sliders/carousels all created with jQuery andjQuery.carouFredSel plugin, each having a different look and functionality.

There are Slider with navigational thumbnails, carousel with animated items, Slideshow with scrolling grid of thumbnail, News ticker, Loading imaage using AJAX and many more you can find all kind of slider, slideshow and carousel in one place.

Here is the list of 21 CoolCarousels.

• Automatic slideshow with a timer, play-, pause-, previous- and next-button
• Vertical animated accordion showing images with titles
• Fluid, liquid, responsive carousel resizing and changing the images
• Slideshow with scrolling thumbnails appearing onMouseOver the pagination bullets
• Cool fisheye slider centered in the available width
• Billboard curtain effect with synchronised narrow carousels
• Beautiful carousel with carouFredSel and UI Kit from Design Deck
• Lazy load images before they come scrolling in
• Mouse-over slideshow with truncated preview of second slide
• Loading images using AJAX and insert them in the carousel
• Basic slideshow changing the large image on mouse-over of a thumbnail
• Automatic slideshow with inline scrolling thumbnails
• News ticker effect by scrolling a definition list
• Tabs-container effect with a non-circular carousel
• Cool slideshow scrolling in additional information onMouseOver
• Slideshow with scrolling grid of thumbnails
• Accordion effect simulated with a circular carousel
• Carousel with individually animated items
• Fluid, liquid, responsive full window animated background images
• Fluid full window width carousel with truncated previous and next images
• Slider with cool navigational thumbnails

They use jQuery as the JavaScript framework, their source codes can be seen with a click, all of them have demos and can be downloaded easily.

Requirements: jQuery
Compatibility: All Major Browsers
Website: http://coolcarousels.frebsite.nl/

bitly

TinyURL

Google url shortener

Ow.ly

BudURL

Lnk.co

is.gd

Cligs

Snipurl

Tweetburner

Other URL Shortening Services

• notlong
• Adjix
• Metamark
• short.ie

The first step in tackling an organic search engine optimization (SEO) project is often an SEO website audit. This audit helps lay the foundation for future search success. Properly worked, an audit can be primary reason your site jumps from page 4 to page 1 on the SERPs.

The surprising thing about SEO website audits is how diverse they are. SEO practitioners often have divergent goals and methodologies. This affects which areas are audited on a website. Some audits are backlink-focused, while others focus on more technical on-site aspects. Many are good and usually helpful, however few cover every important area of organic search in 2012.

After reviewing some of the better audits in the industry, we’ve determined these 7 areas should be addressed in any good SEO audit. These are areas which have affected organic results with our clients, coupled with some industry research. Here goes!

1. Business Model & Website

Every organic search engine optimization audit should consider two things: your business model and how your website fits into the model. If you don’t know what you’re aiming for, how do you know if you’re a success?

Your business model determines how a website fits. For instance, if your business sells local plumbing services, your business needs leads. Consequently, your website should be a lead generation machine for plumbing prospects. Knowing the goal helps guide on-site strategy. Creating prominent, short lead forms on important pages – possibly all pages is a great way to improve lead flow. Knowing business goals also helps guide off-site strategy like creating backlink anchor text for “Austin plumber.” Bottom line, a business dependent on leads should have a lead generating website.

Clear, obvious, measurable call to action.

The net result of this step is coming up with actionable, measurable goals for a website. More importantly, these website goals should be driven by the goals of the business.

2. Site Checklist

After understanding how the website fits into the business, the site and domain should be reviewed for any issues. We have found that no matter how well maintained your site, there’s always a chance something is missing on either your domain or website. Here’s the checklist we use:

3. Keyword Research

Keyword (aka key phrase) research is a foundational element to any SEO campaign. Knowing which words to target guides the majority of search optimization efforts. This is why keyword research is so important. If you already have your targeted 5-20 keywords, then skip to #4.

There are many ways to do keyword research. The easiest (free) way is to use the Google AdWords Keyword Tool (we recommend using the tool when you’re logged into your Google AdWords account). This tool pulls industry-relevant keywords based on your website or a supplied keyword.

The quick and easy way to find target keywords for your website during an SEO Website Audit.

If you’re starting from scratch, enter what you think is your most relevant keyword for your business. Going back to the local plumbing company example, enter “Austin plumbing company”. The tool then exports a list of keywords with columns for competition (in AdWords), Global Monthly Searches, & Local Monthly Searches. Ignore Global monthly searches and just focus on the Competition and Local Monthly Searches.

From here, picking keywords turns into an art. You want a good combination of relevance, high search volume (monthly searches) and high competition. Relevance is the most important. By relevance, you can’t pick “plumbing company” since it’s too general. Instead, something like “Austin plumber” works much better. It’s relevant, has high competition, and has 9,900 local monthly searches – that’s a good keyword.

For your short-tail, non-blog SEO strategy, we recommend targeting 5-20 keywords to target. Keyword research can (and should) be more technical than this. But if you’re just getting started, this is a great way to build out your first keyword list. For the audit, you may just want to confirm you’re targeting the right keywords.

The final step in keyword research is keyword tracking. Where does your company rank for the target 5-20 keywords? The best free tool we’ve found is SEO Book’s Rank Checker. Simply input all the keywords and record where they’re ranked in Google, Bing, & Yahoo. Export results to a safe place. Having this benchmark, you’ll be able to see how effective your SEO is in future months as ranks climb (or fall).

4. Content Checklist

After reviewing your target keywords, it’s important to review how these keywords are implemented on your website.

5. Competitive Research

There are two steps to competitive research: identify your competitors and analyze the organic SEO strategy of your competitors.

The first step involves ID’ing who your competition is. Once again, go back to your keywords. Who is currently ranking for your target phrases? Before searching in Google, make sure you “depersonalize” search. That means you want to remove all traces of your computer from the search results. SEO Moz has a great article on how to depersonalize your search results in Google.

After depersonalizing search, look up your top 5 keywords in Google. The websites that consistently come up in the top 5-10 positions for each keyword is your organic SEO competition. Period. You may think that you compete against XYZ Plumbing Company, but if they’re not showing in the top 5 positions, that’s not your organic completion. Let your research determine who your actual competition is.

After identifying your competition, the next thing is to see why they rank so high. The best way to see why a competitor ranks well for keywords is to review the backlink structure of the competitor. What kind of links are pointing to the site? How many domain-unique URLs are pointing to the site? Backlinks are the #1 single factor that determine where sites rank for certain keywords.

The best free tool to see backlinks is Google. Use the search operator “links:yourdomainhere.com” to get a raw number of links that Google is willing to report point back to your homepage. The max number of links Google provides depends on the competitor. In addition, you have to click through multiple pages to see each of these links.

To bypass the tedium, use a paid tool for backlink research. The two we like are Raven Tools & SEO Moz Pro. Both tools include a wealth of data for the serious SEO practitioner. If you want to rank well in the search engines, learn how to research backlink data from your competitors. The audit is designed to show who your competition is and provide actionable backlink data.

6. Social Checklist

There are hundreds of organic SEO ranking factors. The largest growing factor in recent years has been social media. SEO has become more intertwined with social media. This is why any SEO website audit should address your company’s social presence.

7. Next Steps: Recommendations & Future Audits

The final part of any good SEO website audit is getting a list of recommendations. This part is easy when everything above has been addressed. Simply start at the top of the audit and spell-out the issues that were found during the audit. Sometimes you may not know what to do. Talk to a developer or a competent SEO to get help in those areas. If you want to prioritize recommendations, the areas have been listed in order of importance: Business Model, Website Goals, Site Checklist, Keyword Research, Content Checklist, Competitive Research, and Social Checklist.

Unfortunately, SEO changes. Search engines shift algorithms which affects rankings and traffic. That’s why SEO website audits and adjustments should be done periodically – every 1-2 years. The good news is that much that affects rankings is static: quality content, quality backlinks, and positive social interaction will probably always help your SEO. Aim at structuring your website properly, creating quality content, and effectively interacting with your market and there will be less work after your next audit.

CSS and JavaScript tutorials

1. How to build prototypes in HTML and CSS

Leisa Reichelt held a workshop teaching how to build prototypes in HTML and CSS. Here, Anna Debenham puts it all into a perfect summary for all your prototyping needs.

2. Discover the power of CSS3 selectors

To style an element with CSS, you need to be able to target it. Rich Clark gets on the case, showing you how to keep your markup slim and target elements in the DOM without resorting to extra presentational markup or JavaScript. How? By using CSS3 selectors…

3. How to structure your CSS

We want you to learn from the best. So who better to explain their CSS tactics than front end developer Mike Byrne? His handy tips will really help to structure your CSS.

4. How to code smarter CSS with Sass

Not managed to get your head around Sass yet? No problem. Christopher Eppstein explains how to use this style sheet language, which that makes your style sheet as beautiful to read as your web page.

CSS and JavaScript tutorials: Learn how to build an interactive widget.

Prototyping and demo wisdom

5. How to improve your responsive design workflow with Sass

Once you’ve got Sass sorted, take a look at this tutorial with Ryan Taylor. Not only can Sass help to maintain your style sheets, it can actually improve your responsive layout workflow. Need we say more?

6. How to quickly build a prototype to test on any device

Prototypes can be a bit of a pain. So take a look at this brilliant advice from ZURB design lead Jonathan Smiley. He’ll show you how to use Foundation to quickly build a prototype you can test and build onto for any device.

7. How to take full advantage of the CSS background-size property

The changes brought in by the various CSS3 modules late last year were pretty exciting for designers and front-end developers alike. Front-end developer Stephanie (Sullivan) Rewis, owner of W3Conversions, takes you through a variety of uses for CSS3 background-sized property.

8. How to create a zoomable user interface with CSS3

In this tutorial, David DeSandro explains how CSS transforms can be used to create a zoomable user interface. He also delves into JavaScript to show you how you can manipulate the zoom.

CSS and JavaScript tutorials: Create a zoomable web interface.

Give Knockout a try

9. Rapid and responsive UI development with Knockout.js

Umbraco developer Matt Brailsford takes you through creating a sample application using Knockout to simplify interactions and responsive interfaces.

10. How to integrate Knockout.js with third-party libraries

In this second part of the Knockout tutorial, Matt Brailsford shows you how to integrate the program with existing software. You’ll be a Knockout whizz once you’re finished.

11. How to implement Google Custom Search into WordPress

If, like many designers, you’re a bit fed up with the basic WordPress search function then take a look at this. Paul Maloney shows you how to replace it with a much broader, super-powered Google Custom search engine.

12. How to code a real-time survey with HTML5 WebSockets

If you’ve always wanted to build a demo app but you’ve never been sure where to start, look no further. Phil Leggetter explains how to use WebSockets and Pusher, plus how to layer a user experience onto an app using progressive enhancement.

CSS and JavaScript tutorials: Create perfect background gradients.

Getting to grips with gradients

13. How to master CSS gradients

If you’re still scratching your head when it comes to CSS gradients, this tutorial from The Book of CSS3 by Peter Gasson provides simple examples that’ll have you acting like a pro in no time.

14. Essential CSS gradient tips

Still can’t get enough of our CSS and JavaScript tutorials? Tim Van Damme explains the CSS tips he used in the Gowalla redesign to make it picture perfect.

15. A masterclass in CSS animations

Save yourself some time and take a look at this CSS round-up by Estelle Weyl – web developer and author of HTML5 and CSS3 For the Real World. It has everything you’ll need to know to really get started with CSS3.

16. How to create a clickable accordion with CSS animation

Belgian interface designer and CSS trickster Benjamin de Cock tells you how to create a clickable accordion with the power of CSS3, whilst also discussing the cons of the technique.

CSS and JavaScript tutorials: Create a clickable accordion.

Create 3D rollovers and carousels

17. How to create progressively enhanced 3D CSS rollovers

Rollovers are a great thing. Principal evangelist for HTML5 and the open web at Mozilla Christian Heilmann explains how to enhance these beauties with 3D CSS rollover effects.

18. How to build a rotating 3D carousel with CSS

Paul Hayes shows you how to create a carousel for your website that rotates from panel to panel.

19. How to make a super simple animated background

Designer, illustrator and .net Awards nominee Mike Kus explains how he built .net’s 404 page. This tutorial shows you how to make a very simple background with an animated GIF using Photoshop and a dash of CSS.

CSS and JavaScript tutorials: Create eye-catching retro designs using CSS.

Control images and create retro designs

20. How to create awesome retro designs with Photoshop and CSS

Retro graphics never go out of style. Illustrator and designer Naomi Atkinson reveals some awesome Photoshop and CSS tricks to give your designs a real vintage feel.

21. How to control image aspect ratios with CSS3

Opera’s Chris Mills shows you how object-fit and object-position in CSS3 can help to display media consistently throughout your website.

22. How to get to grips with CSS3 multiple background images

Keeping your HTML clean whilst still adding numerous separate images can be a bit of a headache. Freelance front-end designer Prisca Schmarsow tackles the issue of multiple background images in CSS3.

CSS and JavaScript tutorials: How to style your Twitter feed.

How to make Twitter better

23. How to style Twitter posts on your site with CSS3

Listing your tweets can look a bit boring. Zoe Mickley Gillenwater, author of Stunning CSS3 tells you just how to improve the look of your Tweet lists with new properties and selectors of CSS3.

24. How to build a Tweet map with SVG

Ever wanted to know what the world tweets? Now you can with Divya Manian of nimbupani.com, who reveals how to create dynamic visualisations using Polymaps, a library that makes it trivial to create and manipulate map data in SVG.

How to use CSS transitions with jQuery

25. How to create a diagonal rotation with CSS transitions and jQuery

Web designer Josh Miller shows you how to order your lists into an impressive diagonal rotating portfolio using CSS3 and jQuery.

26. How to get more out of your CSS transitions with jQuery

CSS transitions can sometimes use a little help from jQuery for better control. Val Head explains just how you can get to grips with it.

CSS and JavaScript tutorials: Learn how to create an interactive street view.

Create interactive street views

27. How to preserve vertical rhythm with CSS and jQuery

Vertical rhythm is really important for type-based design approaches. Web developer Matthew Wilcox shows you the basics.

28. How to create an interactive street view with jQuery

Severin Klaus explains how Hinderling Volkart created an innovative method of scrolling through video for its 360 degree Langstrasse website. Impressed? Well, this tutorial will show you just how you can do it for your very own site.

29. Tripping the DOM fantastic with jQuery

Jay Blanchard, author of the book Applied jQuery focuses on the DOM tree traversal methods in jQuery.

CSS and JavaScript tutorials: DOM tree traversal methods explained.

Build your own e-commerce store

30. How to build an e-commerce store with LemonStand (pt 1)

This tutorial will guide you through the murky world of setting up your very own e-commerce store using the LemonStand platform. Freelancer Phil Schlam also talks you through the basics of creating a theme.

31. How to build an e-commerce store with LemonStand (pt 2)

In this second part of the LemonStand tutorial, Phil Schlam continues to explain the content options, the shopping cart, product page and check out. Follow these tutorials and you’ll have your store up and running in no time.

CSS and JavaScript tutorials: Go mobile with ExpressionEngine.

CSS for your mobile

32. How to build a login form for your mobile app with DHTMLX Touch

Web developer Alexandra Klenova shows you how to implement a log in form for your mobile app using Javascript framework DHTMLX.

33. How to improve user interface design for Android apps

If you want your mobile app to stand out from the crowd, take a look at this tutorial from co-director of Bitmode Ltd, Richard Leggett. He’ll show you how to style and theme your app to make it go the distance.

34. Getting started with PhoneGap

An exert from the PhoneGap Beginner’s Guide, Nitobi/Adobe’s Andrew Lunny shows you how to set up and build simple and effective apps for BlackBerry, Android and iOS.

Make way for more mobile

35. Building a Mobile-Friendly Form with email domain suggestion

So, you’re happy as Larry that you’ve finally converted your web design for mobile use. But what about those pesky forms your users just have to fill out? Jim Nelson from Tuts+ shows you how to go above and beyond to make your users happy.

36. Raising the bar on mobile

24 ways is a fantastic site, offering the very best archived tutorials. Here, Scott Jehl shows you how to decrease browser functions to make more room on the screen for your designs.

37. Going mobile with ExpressionEngine

Websites are now viewed consistently on the move, so when developing them, it’s important that the website looks great in all formats. Erskine Design’s Garrett Winder shows you how to go mobile with ExpressionEngine.

Get Gamey with Snake

38. How to create a mobile version of Snake with HTML5 canvas and JavaScript

We all know and love the classic game of Snake, so why not take a look at this tutorial to bring it into a brave new world? Eoin McGrath, co-founder and lead developer at boutique web studio Starfish shows you just how to do it using HTML5 Canvas and JavaScript.

39. How to create an HTML5 Hangman game with Canvas: The basic gameplay

Ah, the never aging game of hangman. We all love to play it and so will your users. James Tyner shows you how using HTML buttons for the input and Javascript to provide the gamelogic.

40. Create a Pong Game in HTML5 with EaselJS

Classic games such as ping-pong will never grow old with your users. That’s why Carlos Yanez has created this simple tutorial on how to develop your very own version.

Get your head in the game with ping-pong

Immerse yourself in JavaScript

41. How to build an immersive environment with CSS and JavaScript

Technologist Benjamin Bojko and art director Dan Mall show us how they created Activatedrinks.com. They’ll show you how to build an immersive environment using CSS and JavaScript.

42. How to build a 360 degree image slider with JavaScript

It takes a lot to keep your user’s attention and that’s why a 360 degree image slider could be your ticket to success. Robert Pataki of Waste Creative demonstrates how you can show it off.

HTML5 visuals

43. Create HTML5 audio visualisations

Senior Interactive Developer at B-Reel, Nick Jonas shows you how to synthesise audio-driven animation into your web applications with a few easy steps.

44. Writing Unit Tests For WordPress Plugins

As soon as your website starts to rack up its users, updates can make even the savviest of developers quiver. Here, Smashing Magazine‘s Zack Grossbart shows you how to compile unit tests to ensure nothing ever goes wrong again. Well, hopefully…

45. Decoupling HTML From CSS

Working with HTML, CSS and Javascript can get a little messy. Jonathan Snook gives you a new insight into coding your CSS that will make the clean up a whole lot easier.

Get it right with WordPress unit tests

Form filling frustration

46. Refactoring CSS into SASS

Handcrafting your CSS from the start is a great move but more often than not it can become difficult to manage. Eugene Fedorenko explains how to overcome the hurdle and successfully redesign your style sheets.

47. Triangle With Shadow

We won’t bore you with how to make triangles in CSS because you will most likely already know how to do that. Instead, CSS-Tricks Chris Coyier explores the alternatives in creating shadows behind them.

New toys to play with

48. A new front-end methodology: BEM

The sixth article in Smashing Magazine’s series that introduces the latest free tools, Vavara Stepanova discovers BEM. Standing for ‘Block Element Modifier,’ it’s a front-end modifier which has created a new way of thinking when it comes to web interfaces.

49. Use Gridpak to roll your own responsive grid

Another free tool to make your design life that little bit easier. Gridpak comes from Erskine Design, you can quickly generate your own responsive grid. However, it can be a little tricky so here, Joshua Jackson gives you an extensive introduction.

50. PrefixFree: Break free from CSS prefix hell

Using CSS regularly can often come with its frustrations. Fear not as Lea Verou – well-known for her experiments with CSS and Javascript – presents her most recent free tool: PrefixFree. Banish those prefix blues!

51. Rapid Prototyping For Any Device With Foundation

Are you yearning for responsive web design? Take a look at this offering from ZURB – Foundation is a framework which helps to build prototypes and production code that’s truly responsive.

Get more input from your users with a quiz

Impress with cuteness

52. How to create a cute pop-up bar with HTML5, CSS and jQuery

Similar to a ‘hellobar,’ Eric Hoffman shows you how to create a cute pop-up bar and use it to your advantage. It has only been tested in Chrome and Safari, so be aware it may not work in other browsers!

53. Build a spiffy quiz engine

Quizzes can often entice more user input, which can only mean one thing – why haven’t you got one? Here, Siddharth gives you a quick preview into how to create your own mini quiz version.

54. How to create web animations with Paper.js

For some of you, animation can often be a daunting prospect. It can however, improve your site to its fullest potential (and it looks cool too!) Zack Grossbart gives you his tips on how to develop a range of animations from the neat to the very, very messy.

Get the right effect with text

55. Create a Letterpress effect with CSS Text-Shadow

The letterpress effect is fast becoming one of the most popular tools in web design. Jump on the bandwagon with Chris Spooner as he shows you the ins and outs with CSS Text-Shadow.

56. The future of screen typography is in your hands

Andreas Carlsson and Jaan Orvet discuss the way text is changing, thanks to the latest tablets and devices from the likes of Amazon and Apple. Here, they show you how to create and customise your own font file to keep up with the Jones’.

57. How to create a cool anaglyphic text effect with CSS

If you didn’t know already, anaglyphs are those 3D images, offsetting two of the red, blue and green channels. If you’ve ever wanted to make your own, now is the time as Chris Spooner shows you how.

Secrets of CSS

58. Saving the Day with Scoped CSS

Sometimes, your CMS won’t do everything you tell it to, or want it to. Arley McBain of Thrillworks spills the beans on some of CSS’ secrets and shows you how to make your stream stand out.

59. Asynchronous Search With PHP and jQuery

Widgets – you either love them or hate them. Either way, it’s probably important to understand how to create widgets to ensure you are making your user’s visit as smooth as possible. Here, Dan Wellman shows you how to do just that using jQuery.

60. Build a colourful clock with CSS and jQuery

Count down clocks can give your web site the cute edge it needs to standout. Take some time out and get to grips with this tutorial from tutorialzine.

Create your own colourful clock with tutorialzine

Content is King

61. An introduction to object orientated CSS (OOCSS)

We can all agree that decent content creation reigns supreme when it comes to attracting those unique visitors. Here, Louis Lazaris introduces you to the often overlooked concept of object orientated content.

62. Minimum Paragraph Widths in Fluid Layouts

Incorporating images into your body text can often be a long and frustrating process. Take a look at this tutorial from Gustav Andersson, who has come up with techniques for all your text flow problems.

63. Power a Facebook page using WordPress

In this tutorial, Aaron Lumsden shows you how to improve your Facebook page using WordPress as a CMS. Starting with design styles and coding, Aaron will then show you how to easily install the whole thing into the social network.

Image Editing

64. Build an Image Editor With EaselJS, jQuery, and the HTML5 File API

HTML5 is more popular than ever and the major browsers are starting to support it’s API (application programming interface) Here, Maciej Sopylo shows you how to create a full-blown picture editor that will be on the same level as most desktop applications.

65. Build a canvas image editor with Canvas

For those of us that don’t have time for Photoshop editing, there’s always CSS and Javascript tricks. This tutorial by Dan Wellman will show you how to rotate, resize, translate and even add subtle colour manipulation to your images.

66. A pure CSS3 cycling slide show

CSS and Javascript often come hand-in-hand but thanks to CSS3, Javascript seems to be slowly letting go. Alessio Atzeni provides a simple tutorial into the world of CSS3 by creating an infinitely looping slider of images. Be careful though, some browsers don’t support CSS3!

Make maths more fun with CSS and Javascript

Get ahead with a striking menu

67. Awesome Cufonized Fly-out Menu with jQuery and CSS3

Mary Lou knows how to get the best out of your web site menu. Whether it’s for an online portfolio or just for fun, take a look at this tutorial which will add two great features to your menu.

68. A quick look into the math of animations with Javascript

Nobody likes maths (unless you do. In which case, sorry!) Christian Heilmann breathes new life into the school subject, with a look at how Javascript can help.

69. Integrating FitVids.js into WordPress

Thanks to difficult sizing, you can have endless amounts of trouble when uploading video content into WordPress. Here Chris Coyier explains how you can get your video looking great.

Tutorials for big kids

70. Mental model diagrams

As much as we all love tutorials, they can often leave you bewildered when faced with a mountain of text instructions. Indi Young and Brad Colbow put their own spin on things by showing you what your users want in comic strip form!

71. Build a HTML5 MP3 Player with Soundmanager 2

A little music to the ears can often inject some much-needed personality into your website. Using Javascript – with a little help from Flash – James Tyner shows you how to create your own MP3 player.

72. Radio Buttons with 2-Way Exclusivity

More and more websites are in need of a little UI upgrade and radio buttons aren’t a bad way to go about it. Chris Coyier shows you how to develop your own grid of radio buttons in a few simple steps.

Create your own Calender widget

Be selective

73. Building a simple CSS Selector Engine

When it comes to building a selector, we often use both CSS and Javascript libraries and selectors to get the job done. Andrew Burgess strives to simplify the process with this quick tutorial.

74. How to build a beautiful Calender widget

Calender’s are often an overlooked yet important aspect of web design. Once again, Andrew Burgess steps in to show you how to build a quick but effective widget using CSS and Javascript.

And finally…

75. Design a Prettier Web Form with CSS 3

Do you feel like your website needs a face lift? Thanks to advanced CSS and Javascript properties, you can now turn even the dullest of homepages into something beautiful. Matt Hedberg shows you how.

Not only that, they are incredibly useful because often times as a developer or designer we find we are doing things over and over again. Well, generators can take off that edge and do those small things for you each time.

As an example, I have a text-expander snippet that creates an HTML5 template that I wrote about here. Now, text-expander is great but it doesn’t solve every need, and in this case there is a big need for generators so I took the time to find 20 of my favorite and describe why I like them.

I will say that most of this list is going to focus on CSS3 generators, simply because they are in demand more than HTML5 generators, and we will learn why. Note: click on the images to open the websites.

CSS3 Generators

There is a somewhat negative connotation when it comes to these generators, and I have to say that as a designer and developer there is nothing negative about using one. It is a huge time-saver, and in all honesty I know three developers that wrote their own generators just because they wanted to help the community. So keep in mind it isn’t like you are using something taboo made by AOL; these are very natural and organic generators that have come about as we have needed them. So why not share in some of the wealth? Let’s go through a few of my favorite, and why you might enjoy them.

General Generators

This section will focus on generators that take care of the broad spectrum needs and usages. These will cover almost everything you could need, or want in a generator, but by their very nature they may be worse at specifics. This is why I will be giving so many options later in this article for specific types.

CSS3.me

This is one of the exact generators I was just referring to. This one was created by one of my favorite designers, Eric Hoffman, and it is amazing. Very simple, minimal, and stylish, but at the same time very functional. Giving you the ability to change and set the border radius, drop shadow, the gradient, and opacity — it is quite functional.

Note: Take a look at Eric’s site; it is a great example of mobile first design. He is also a designer at Zendesk, so send him some love if you’ve ever enjoyed that product.

CSS3 Maker

Often times people will find generators that they love, and stick with them. And that is exactly what happened with a client I had worked with previously with regards to this generator. He was absolutely in love with it, and I can see why — it is surely functional. It may not be the most beautiful thing ever made but it does seem to have all the bells and whistles.

You can do @font-face work, animation work, box shadows, text shadows, text rotation, transitions, gradients, border radius, and a lot more. It is one that I usually have bookmarked, but rarely use simply because of how well the smaller generators do in each of their respective categories. But it is certainly a good generator to try if you need one and don’t like to jump around to a bunch of different ones.

CSS3 Generator

This is another good general one that provides a lot of functionality. I like this one because it has nice and easy drop downs, and easy to use functionality. The design is also quite nice. It also offers a nice box size functionality. This one offers great ability to do the following: border radius, box shadow, text shadow, RGBA, multiple columns, box sizing, outline, transitions, transforms, selectors gradients. I think this is one of my favorites, because the design and UI is so clean. I usually use this one when I forget about cssmaker.

Button Generators

CSS3-Tricks Button Maker

One of the first button makers I saw back in the day really made me cringe. It was very linear, had no UI to it (ironically) and was overall a horribly designed product. As a side note, I will be talking about something similar next, but for now I will show one I found over at css3tricks, and it is really a nice one.

One of the key points to reference here is the fact that it is almost entirely controllable by a drag and drop slider, which is really nice. Just wait till you have to enter everything manually using the keyboard and you will wish you had a nice dragging slider. As a final side note, CSS3 Tricks is a wonderful site with a ton of well organized and thoughtful content that you all would love to check out.

CSS3 Button.net

And now we come to the generator I was just referring to. The design may be lacking, but it offers a lot more choice than the previous one, which is ironically often how things work. Sometimes you’d like ease of use and sometimes you need some serious choice when it comes to generators, and these last two really hit both of those points.

This one offers the ability to add multiple text shadows, inner-shadows, border, and font colors whereas the last one really didn’t get into that much detail. It may be hard to figure out at first but you will get it if you just play with it for a few minutes. I find this one to be the most useful if you are used to Windows UI’s, and as a result I’ve had clients tell me this was their favorite because they’ve been stuck on XP for years and don’t know any better. And by now I’m sure some of you are wondering, but it’s honestly how it goes — some clients want links to generators to learn for themselves after you impress them. I usually link them to Lynda, TeamTreehouse, and a few of these generators for good measure.

CSS3 Button Generator

This is a really fun one. It gives you one big button to manipulate, that is in a rad retro color as well. You then can manipulate shadow, border, color, and on top of that it gives you the ability to edit the hover-over. I like this one because it is one that I found a while back when I was first getting into CSS, and it really gave me an idea of what it can do. The drag and drop sliders are great for people who are new to the languages, because you can see what you are able to do immediately. Now, I will say, I don’t use this one particularly anymore — in light of other ones that have come about, but it is a great memory.

Border Image & Radius Generators

Border-Image

Nothing beats border-image.com when it comes to taking a specific image and then replicating it to find the right border style. Make sure you don’t infringe copyright though, and use someone else’s image without attribution.

But let’s say you drew an arrow or triangle and you’d like to find a generator to repeat it throughout your site’s border or even an element’s border. Well, nothing is better than this site when it comes to that need. You can manipulate the offset, the size, and the repeat that the image has.

As soon as you arrive on the site, you’ll see an example image they have loaded in but it is really much more useful than that image has shown. I often will use it for designs in backgrounds that I want to repeat and/or see how it would look real quick, before actually replicating the entirety of the background in Photoshop. You can use it for anything related to repeated images, really.

Border-Radius

This is a great and minimal little tool, that I often find is very practical. With it, all you do is simply set how much of a rounded edge you want on each corner. Very practical, very simple. And then you just check off what sort of browser prefix you want included, and boom done. It is a beautiful UI in all honesty. There should be tests in computer science courses where all you do is try to come up with something as simple and functional as this is.

CSS3 Gradient Generators

Color Zilla Gradient Editor

This is billed as the ultimate CSS3 Gradient Editor, and for good right. In fact, it is so awesome that it is the only gradient editor that I will be including here. It has a ton of features, and is very usable and easy to get started with. Simply drag around the black and blue pencils a bit and you will quickly see what they do. They also make a browser editor in Chrome or Firefox that is really useful for designers working on the web. Also be sure to play around with the presets in this one, because often times those are good enough — whoever chose them did a great job.

Typographic Generators/Editors

@fontface Generator

This is a really interesting product. What it does is allows you to upload fonts that you have chosen from the web or may have on the computer, and then gives you an outputted file that is ready to work with on the web. You get more than one thing though, you get a few things. You get the CSS for @font-face properties given the font you chose, and an HTML file that displays the font and its many uses. It is really a great tool to go about checking out a font’s full potential if you aren’t quite sure about it, and especially if you don’t have the time to generate an entire website with that font before making the decision.

Reverse CSS3 Generator

CSS3 Please

This is a really fascinating product. Basically what it does is that it gives you a box set, and all the CSS for it, and then gives you the ability to turn the sections on and off to see what they do. So you can essentially reverse engineer the CSS3 to find out what it does, and then you can see what you are doing. This is a great way to learn CSS3 if you are interested, but think that generators are a bit too complicated.

CSS3 Drop Shadow Generators

Webestools Shadow Generator

I like this shadow generator quite a lot, because it goes into detail and depth regarding drop-shadows that the other generators just don’t. It may not look like the best designed product ever, but it is certainly awesome. It has inset shadows, outset shadows and the ability to manipulate offsets, set colors, and do pretty much anything you could do with code – but instead with a nice dragging bar. Oh how I love the dragging bar. Check this one out if you need to see generally what your shadow idea may look like before you hard-code it.

HTML5 Generators

HTML5 Generators are sort of hard to come by, and the reason for that is probably because of how great HTML5 Boilerplate is. We won’t be talking about that, because it isn’t specifically a generator, so I will sum it up right here: It is basically an HTML5 template already filled out and ready for you to work with, so go check it out if you haven’t seen it. It is pretty awesome actually. A lot of people use it as a starter template for their sites, and for good reason. Now back to generators. Finding a quality one is actually pretty difficult, but I have managed to find a few here that I will be showing — and then afterwards I have a few more generalized ones that touch on all the topics in this article.

Shikiryu HTML5 Generator

Shikiryu’s HTML5 Generator is a lot more complex. You can add in features that allow you to do things inside of Blueprint (mixins, etc), and fancy-type — so it is actually quite useful. I like it because it is a bit more semantic than the other options, and at the same time allows you to add in really popular third party applications that people love to use.

Switch to HTML5 Generator

This is an interesting generator. What it does is it allows you to generate a quick and easy framework for building sites, but unlike HTML5 Boilerplate, it lets us choose exactly what selectors we’d prefer to see in our framework. I actually have tended to use this to generate code instead of HTML5 Boilerplate when I need a few more selectors or items than it offers. Now, it doesn’t exactly follow all of the beautifully designed principles of semantic markup — like HTML5 Boilerplate does — but it does a good enough job, and you can go in and do the rest if you really need to use it.

Quackit HTML5 Generator

This one takes a step back, and instead of just giving you a group of code that is pretty generic and basic, allows you to enter all your own information. This is really useful, and I have found others who are newer to websites really love it. They especially love it, I have found, in that it generates the standard base HTML for you to then make look however you wish with CSS. So if you are learning CSS, and are still a bit hazy on HTML (though not sure why that would be the case), then you can do it this way.

And that will about wrap it up. These generators are just amazing for working in a quick and agile way, but instead of for entrepreneurs they’re for designers. And that is really brilliant in my opinion. Have a quick idea for a border radius (tab’d perhaps?), or a shadow, or a color gradient, or an html5 template with blueprint included – well these are just made for you then. Take note though that this wasn’t an exhaustive list, but it was a few of my favorites and ones that my colleagues in the past have used. I really enjoy using a lot of these, and hope you do too.

As expected, some pretty useful responsive web design tools have surfaced recently to support the design and development process of responsive websites. Thanks to the large community of talented developers who made all these resources available. You may ask – what exactly is a responsive web design tool used for? Which tools do I need myself to be ahead of the responsive game? If you are a web designer or developer considering to explore and possibly specialize in responsive web design, you have come to the right place. We are sharing with you, some of the most useful tools and resources here to help you build a responsive design toolbox.

You can find valuable layout aid tools, prototyping tools, code generators, and even a collection of inspirational responsive website designs in this article. We hope that this collection can help you enter the responsive design scene and make a difference. If you like this article, please help us spread the word by clicking our social media buttons. We will also be happy to hear your comments, suggestions and additions to this collection of useful tools. Enjoy!

Responsive Layouts, Responsively Wireframed

This is a demonstration by James Mellers, illustrates how a series of pages could work across these different devices, by simulating how the layout of each page would change responsively, to suit the context. Just use the buttons top-right to toggle between desktop and mobile layouts and see the difference.

Responsive Web Design Sketch Sheets

This tool is a useful aid in mapping out the placement of elements across various devices. With this tool, you can have an idea where to place the the elements of the web page in different sizes of browsers.

Less Framework 4

Less Framework is a CSS grid system for designing adaptive web­sites. It contains 4 layouts and 3 sets of typography presets, all based on a single grid.

Multi-Device Layout Patterns

Multi-device layout patterns are collections of popular patterns commonly used by designers in making responsive layouts. It shows how websites adapt to different screen resolutions and how they display the page elements with the variation of screens sizes.

Fluid Grids

Fluid Grid Calculator is a nice tool that you can use to generate CSS for you fluid grid design. All you have to do is to enter the number of columns and the sizes of the columns and the gutters.

Simple Grid

Creating the code for your grid should be the least of your problems when building a site. That’s why SG keeps things simple and straightforward with as little markup and classes as possible. Even nesting grid slots doesn’t require extra classes.

Simple Device Diagram

This device is a handy tool in responsive website design planning. It simplifies the process of choosing what device widths to design to. It outlines the ideal width for the design for 3 layout sites, 4 layout sites, etc.

ProtoFluid

Protofluid is a tool that makes it possible to do rapid prototyping of Fluid Layouts, Adaptive CSS and Responsive Design. ProtoFluid simplifies the development of fluid layouts and adaptive CSS using Media Queries. It works within your website, HTML5 app or game in the form of a single JavaScript include.

1140 CSS Grid

The 1140 grid fits perfectly into a 1280 monitor. On smaller monitors, it becomes fluid and adapts to the width of the browser. Beyond a certain point it uses media queries to serve up a mobile version, which essentially stacks all the columns on top of each other so the flow of information still makes sense. Although the the best resolution for this CSS grid is a 1280px, still it works equally well with 1024px screen as everything can still be seen just like in 1280px monitor and all the way down to the mobile screens. It is a great tool for designers as one design, ie., 1280px fits all screen sizes. There is no need to declare inline sizes for images as they get re-sized down smaller.

Tiny Fluid Grid

Tiny Fluid Grid is an awesome web based app that can help you determine the grid system of your design. By setting the number of columns, gutter percentage and minimum and maximum widths of your design, the app can give you a downloadable CSS of your responsive grid.

Gridless

Gridless is an optionated HTML5 and CSS3 boilerplate for making mobile first responsive, cross-browser websites with beautiful typography.

Responsive Design Sketchbook

Quickly map out your responsive site with the Responsive Design Sketchbook. Inspired by “Responsive Web Design” by Ethan Marcotte, this new sketchbook has a multi-grid front page for thumbnail sketches of multiple viewports. The back page is a single blueprint page with break point indicators.

Responsive PX

This works by loading your website and displaying the portion visible on different screen sizes. You can adjust the width and the height of the display to simulate the resolution of different devices.

The responsinator

The Responsinator helps website makers quickly get an indication of how their responsive site will look on the most popular devices. It does not precisely replicate how it will look, for accurate testing always test on the real devices.

Screenfly

Screenfly allows you to view your website on a variety of device screens and resolutions. Enter a URL and click on GO to get started.

Responsive Web Design Testing Tool

Another testing tool that can provide you with a view of your website in different screens sizes is this web app. It displays your webpage simultaneously after you have entered your URL. It can help you help with testing your responsive websites while you design and build them.

Adobe Shadow

Adobe Shadow is a new inspection and preview tool that allows front-end web developers and designers to work faster and more efficiently by streamlining the preview process, making it easier to customize websites for mobile devices.

Golden Grid System

Golden Grid System is a folding grid that can be used as a starting point in responsive web design. Golden Grid System (GGS) splits the screen into 18 even columns. The leftmost and rightmost columns are used as the outer margins of the grid, which leaves 16 columns for use in design. The 16 columns can be combined, or folded, into 8 columns for tablet-sized screens, and into 4 columns for mobile-sized ones. This way GGS can easily cover any screen sizes from 240 up to 2560 pixels. The author, Joni Korpi, has a very good advice to its users. Don’t use GGS as it is. “Take it apart, steal the parts that you like, and adapt them to your own way of working,” he said.

Gridpak

Gridpak is the starting point for your responsive projects, improving your workflow and saving time. Create your responsive grid system once using the simple interface and let Gridpak do the heavy lifting by generating PNGs, CSS and JavaScript.

Columnal

Columnal is a responsive CSS grid system helping desktop and mobile browsers play nicely together. It is 1140px wide, but since it is fluid, will respond to the width of most browsers. If the browser gets thin enough, the site will change to a mobile-friendly layout.

Skeleton

Skeleton is a small collection of CSS & JS files that can help you rapidly develop sites that look beautiful at any size, be it a 17″ laptop screen or an iPhone.

Bootstrap

Bootstrap provides simple and flexible HTML, CSS, and Javascript for popular user interface components and interactions. In other words, it’s a front-end toolkit for faster, more beautiful web development. It’s created and maintained by Mark Otto and Jacob Thornton at Twitter.

320 and Up

The common practice in responsive web designing is to begin with full size desktop as a starting point and from there make scales in smaller screen sizes. The creators of 320 and Up have it on the reverse. They said that you should start designing in small browsers and from then work your way up. The updated version of 320 and up features, Five CSS3 Media Query increments: 480, 600, 768, 992 and 1382px; Design ‘atmosphere’ (colour, texture and typography) separated from layout; Bootstrap styles for buttons, forms and tables and more.

FitText

FitText makes font-sizes flexible. Use this plugin on your responsive design to achieve scalable headlines that fill the width of the parent element. This jQuery plugin works by inflating the web type to fill its parent element. That is why you still get a full width text no matter what the size of your screen is. It works well with Lettering.js, or any CSS3 property you throw on it.

inuit.css

inuit.css is a CSS framework equipped with a plugins called igloos, that extend the core framework to add more specific functionality. It has a custom grid system builder for creating fixed or fluid grid system igloos.

Mobile Boilerplate

Mobile Boilerplate is a base template created by the developers of HTML5 Boilerplate, to help mobile developers create mobile web applications quickly. It features cross-browser viewport optimization for Android, iOS, Mobile IE, Nokia and Blackberry. Also it supports Apache server caching, compression, and other configuration defaults.

Respond.js

Respond.js is a fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more). The goal of this script is to provide a fast and lightweight (3kb minified / 1kb gzipped) script to enable responsive web designs in browsers that don’t support CSS3 Media Queries – in particular, Internet Explorer 8 and under. It’s written in such a way that it will probably patch support for other non-supporting browsers as well.

Adapt.js

Adapt.js is a lightweight JavaScript file that determines which CSS file to load before the browser renders a page. If the browser tilts or resizes, Adapt.js simply checks its width, and serves only the CSS that is needed, when it is needed.

mediaQuery Bookmarklet

The mediaQuery bookmarklet gives a visual representation of the current viewport dimensions and most recently fired media query.

Responsive Data Table Roundup

These collection of table curated by Chris Coyier, discuss how tables should appear as screen size decreases. It is complete with examples and source codes that you can look at as an aid for your own responsive web design.

Adaptive Images

Adaptive Images detects your visitor’s screen size and automatically creates, caches, and delivers device appropriate re-scaled versions of your web page’s embeded HTML images. No mark-up changes needed. It is intended for use with Responsive Designs and to be combined with Fluid Image techniques.

Seamless Responsive Photo Grid

Seamless Responsive Photo Grid is a grid that you can use to make images display edge-to-edge on the browser window with no gaps. The idea behind this trick by Chris Coyier is to tile the photos and make them flow in a series of columns from left to right all throughout the page. By setting the images width to 100%, they will take up exactly the width of one column. The number of columns depends of the size of the browser. As the screen size becomes smaller, the grid works by having media queries test the browser width and adjust the number of columns accordingly. You can resize your browser all around and watch things move very quickly.

Slabtext

Slabtext is a jQuery plugin for producing big, bold & responsive headlines. Put simply, the script splits headlines into rows before resizing each row to fill the available horizontal space. The ideal number of characters to set on each row is calculated by dividing the available width by the CSS font-size – the script then uses this ideal character count to split the headline into word combinations that are displayed as separate rows of text.

Convert a Menu to a Dropdown for Small Screens

Chris Coyier discusses how to make a navigation menu convert into a dropdown when you are browsing the website on a small screen. That’s a better choice than a tiny link.

Media Queries

Media Queries has a sizeable collection of responsive web designs that you can see as inspirations for your design.

That’s where a WordPress theme generator can make your life about a million times easier.

Theme generators in the past have often been clunky and haven’t worked all that well. WPTheme Generator is different.

It makes it incredibly easy to create a theme using a gallery of more than a thousand pre-designed objects, including backgrounds, menus, fonts, sliders, frames, colors, patterns, textures, and more.

The options for customization are huge. WPTheme Generator includes more than fifty fonts, all ready to be used in your theme. You can change the font face, color, and size with just a single click, on both headings and body text. You can also create a variety of layouts using seven different combinations for positioning elements.

Customizing themes is simple. First, pick a design from the gallery that you want to start with. Then just select the element you want to change and then select an option for the pre-designed elements. There are designs to suit virtually every style and new designs are added daily. When you’re done, you can save your themes to work on them later or you can download both the WordPress theme files and the basic HTML/CSS files.

Not finding what you need among the pre-designed elements? No problem! You can upload your own design elements—menus, patterns, backgrounds, and more—to use on your themes. You can even save them for use on future themes.

One of the great parts about WPTheme Generator is that all the themes are built on a single, powerful framework. Your basic theme will always be up to date and working for the latest version or WordPress. And new features added to the framework will be available on all of your themes, including the ones you’ve already created! This also means that you can create a new theme now, and if you decide not to use it for six months, it’ll still be up to date when you come back to download it then.

You can save your themes for later editing and download them whenever you need to, so that your theme will be always updated with the latest framework and WordPress version.

The framework includes a lot of popular features, including dynamic widget areas, five different slides, picture galleries with lightbox and categories, product websites with shopping carts, a spam-free contact form, and much more. It’s even Bootstrap-ready and supports all Bootstrap elements.

Check out more of how WPTheme Generator works in this video:

Because it was created by the folks behind Iconshock, when you sign up for WPTheme Generator Premium, you’ll also get access to Iconshock’s premium items! That includes 30,000 Iconshock icons, 107 Themeshock exclusive themes, and 500 logo templates!

For a limited time, WPTheme Generator is only $29 for six months! After the promotional period, it will be $129/year—still a steal for all you get! You can sell the themes you create to your final customers and use them as many times as you want, though you can’t sell them in a marketplace (they’ll be launching their own marketplace soon).

Every month we bring some new useful jQuery plugins to our audiences which help them to optimize and enhance their web projects. Here at SkyTechGeek we are showcasing 60 Best jQuery Plugins that will help you to optimize and enhance your web applications.

With the following plugins developers can do more in less, developers can use them for image animation, text animation, CSS transition, pagination and for creating slide shows. We hope some of these JQuery Plugins will serve their purpose towards your site needs and will go on to simplify your online life.
Enjoy !

60. iPicture : A jQuery Plugin for Images with Tooltips

iPicture, a jQuery plugin, allows to place tooltips over any desired location of images. Once the user hovers/clicks the pointers, the tooltip is displayed with its pre-defined content.
iPicture has a handy initialize function that saves so much time by enabling a configuration wizard where we can place pointers + set their definitions with drag ‘n’ drops and the JSON output to be used in the code is created automatically.

Download

59. Rhinoslider

Rhinoslider is a lightweight, flexible jQuery slider plugin that can display any HTML element (text, images, videos, etc.). The plugin comes with several transition effects and new effects or styles can be added with ease -thanks to its extensible architecture. There is a web-based configurator that allows defining these values while seeing the output quickly. And, it generates the related jQuery code automatically.

Download

58. jTable : Slick Ajaxed Datagrids with jQuery

jTable is a jQuery plugin for creating Ajaxed and feature-rich CRUD interfaces with little effort. The plugin generates all the HTML required and uses jQuery UI for “add new/edit record” dialogs.
jTable interface is completely themable via CSS (includes various themes), it can be set to display sub tables for a given record which is handy for listing any sub details.

Download

57. Blur.jS : Easily Blur any Web Element

Blur.js is a powerful, lightweight jQuery plugin for implementing blur effect to any web element. It works by creating and placing psuedo-transparent blurred elements over the targeted ones and makes use of the StackBlur algorithm. There is built-in caching for re-using the blurred image and there is support for making the item where the effect is applied to be draggable (requreis jQuery UI).

Download

56. Adipoli : Sytlish Image Hover Effects

Adipoli is a lightweight, effective jQuery plugin used to bring stylish image hover effects. There are over 20 transition effects (popout, sliceDown, sliceUp, fold, boxRain, boxRainGrow and etc…). Users can also select the start effects, like transparent, normal, overlay and grayscale. It is released under MIT License.

Download

55. jPlayer : jQuery HTML5 Audio/Video Library

jPlayer is the completely free and open source (GPL/MIT) media library written in JavaScript. A jQuery plugin, jPlayer allows you to rapidly weave cross platform audio and video into your web pages. jPlayer’s comprehensive API allows you to create innovative media solutions while support and encouragement is provided by jPlayer’s active and growing community.

Download

54. Jquery File Upload

jQuery File Upload is a File Upload widget with multiple file selection, drag&drop support, progress bars and preview images for jQuery. It supports cross-domain, chunked and resumable file uploads and client-side image resizing. It also works with any server-side platform (PHP, Python, Ruby on Rails, Java, Node.js, Go etc.) that supports standard HTML form file uploads.

Download

53. Camera : Jquery Slideshow Plugin

The developer of Diapo has created a fresh plugin named Camera which has more features and works very well with responsive layouts.
Slides can be created with any HTML elements (images, text, videos, etc.) and Camera displays them with a good looking interface + a set of transitions. The plugin can be skinned via CSS and there are already multiple skins provided.

Download

52. Wookmark jQuery Plugin : Laying Out Dynamic Grid Elements

The Wookmark jQuery Plugin is designed for laying out a dynamic grid of elements. The Wookmark plugin detects the size of the window and automatically organizes the boxes into columns. You can resize your browser to see the layout adjust. It allows users to set the width and height of all images in the HTML img attributes. The grid layout can be performed as soon as the document is rendered, before images are loaded. Users can also perform the grid layout after all images are loaded if the width and height of the images is not known.

Download

51. jQuery Scroll Path : Define Your Custom

jQuery Scroll Path is a plugin that lets you define your own custom scroll path. The plugin uses canvas flavored syntax for drawing paths, using the methods moveTo, lineTo and arc. To help with getting the path right, a canvas overlay with the path can be enabled when initating the plugin. Scrolling can be done with the mousewheel, up/down arrow keys and spacebar. The spacebar scrolls faster than the arrow keys, and holding shift while pressing space will scroll backwards.

Download

50. TN3 Gallery

TN3 Gallery is lightweight yet powerful jQuery image gallery that supports slideshow, transitions and multiple album options. TN3 Gallery supports all kind of modern browsers along with mobile browsers.

Download

49. Apprise : The Alert Alerternative For jQuery

Aprrise is an alert alternative which is basically a simple model box for displaying alerts like dialogue box. It provides fast, attractive, complete control over style, content, position and functionality. With Apprise, users can set the alerts so that they can be display in animated way and it has built in support for showing verification, confirmation and text alerts.

Download

48. Badger : Super Sexy iOS Style Badges for jQuery

With Badger developers can insert beautiful badge on any part of HTML element without the need for image. Modelled after the badges found on the iPhone and iPad, Badger is an incredibly attractive way to notify your users in a manner that they may already be familiar with.

Download

47. Flip Page

FlipPage is powerful jQuery plugin to create the illusion of turning pages of book, basically this plugin is developed for presentation on touch pad. Plugin uses HTML5-CSSS3 and hardware acceleration and work also in mobile browser. FlipPage plugin keeps the page flip effect inside/over the images displayed (gives you 2D- experience).

Download

46. Image Zoom

This plugin allows user to zoom in few specific part of the image or pictures, with the help of image zoom users can fix the certain part of an images by placing different images in the main image, which they want to zoom in with. When users click on the certain portion of the images, the main image gets fade and the users get a closer look by enlarging another image. Users can get back to main image after clicking on back button.

Download

45. jQuery Transit

jQuery Transit it a plugin for implementing CSS transitions and transforms, it has the same syntax as .animate, supports almost all methods and supports jQuery callbacks, chaining, auto-browser-prefixes and more. Transit uses jQuery’s effect queue that won’t let transactions to run in parallel.

Download

44. jQuery News Ticker

jQuery News Ticker is useful plugin, inspired from the BBC news ticker, that simplifies creating them. News Ticker enables users to show unordered lists, RSS feed, HTML file, or content in a simple yet slick customizable interface.

Download

43. FitVids. js : jQuery Plugin For Fluid Width Video Embeds

FitVids.js is a lightweight, easy to use jQuery plugin for fluid width video embeds. FitVids automatically sets the intrinsic ratio Method to achieve fluid width videos in your responsive web design.
Download

42. Quovolver

Quovolver is a simple jQuery plugin which is used for displaying the quotes in an impressive way, it takes a group of quotes and displays on users site in expressive and elegant way.

Download

41. ImageMapster

ImageMapster is a jQuery Plugin that enables users to manipulate HTML5 image maps; it can select, and highlight any image map in different ways. ImageMapster supports all major browsers even Internet Explorer 6, without flash or any other dependencies.

Download

40. Slidorion

Slidorion is a combination of an image slider and an accordion; displaying beautiful content through various effects. Slidorion includes multiple built in effects such as fade, slideLeft, overRight, overDown an many more, and these effects can be used for transitions.

Download

39. Portamento : Add Floating Panel To Your Web Page

Portamento is a jQuery plugin that makes it simple to add sliding (aka “floating”) panel functionality to your web page. All that’s needed is some simple CSS and one line of JavaScript; It works fine with floated and absolutely-positioned layouts, in all modern browsers and some not-so-modern ones too.

Download

38. FitText : A jQuery Plugin For Inflating Web Type

FitText makes font-sizes flexible. Use this plugin on your responsive design to achieve scalable headlines that fill the width of the parent element. FitText auto updates the font-size according to the width of element so that it can fit to the layout and it promises you a non-breakable layout even if your web page is displayed into a mobile browser or a desktop browser.

Download

37. jqPagination : A jQuery Pagination Plugin

jqPagination plugin assists users to create a JavaScript-Controlled pagination interface and functionality. Instead of displaying a list of page numbers like traditional pagination methods jqPagination uses an interactive page 1 of 5 input that, when selected, allows the user to enter their desired page number. The plugin checks that only valid pages can be selected, a valid request will result in the paged callback.

Download

36. jQuery Wiggle

jQuery Wiggle enables users to emulate the wiggle effects icons on an iPhone have when users press and hold down on them.

Download

35. uLightBox

The jQuery uLight Box is simple and easy plugin to use for all of your lightbox needs. It is highly customizable and very intuitive to use.

Download

34. Circular Content Carousel

This plugin uses slider which holds the content along with their brief description, when users click on content a small box expands next to the content slider, where users can read and see the detail information related to the topic and slider yet navigates.

Download

33. Elastislide – A Responsive jQuery Carousel Plugin

Elastislide is a responsive jQuery carousel plugin that will adapt its size and its behavior in order to work on any screen size. Inserting the carousel’s structure into a container with a fluid width will also make the carousel fluid.

Download

32. rlightbox : A jQuery UI Mediabox

rlightbox is lightbox plugin that is built in jQuery and jQuery UI which tends to give users some exceptional and fresh features. rlightbox can display any type of content such as images, YouTube videos and vimeo contents. The most unique feature of rlightbox is Panorama which displays part of full sized image on the screen, since often an image is larger than the screen; panorama allows users to see it in its native resolution by planning.

Download

31. JCookies : HTTP Cookie Handling Plugin

jCookies enables you to store any type of data like strings, arrays, objects, etc. It stores cookies through JavaScript and retrieves data using server side code such as C# and PHP.

Download

30. jQuery- Ajax Autosuggest Plugin

AUSU Ajax Auto Suggest jQuery Plugin has the usual functionality with a little extra flexibility: multiple instances, passing custom parameters, the id and the value are returned, keyboard-controlled, and a few others… Almost anything you need from an autosuggest plugin you can do with the built-in options! The CSS file is small and very easily changed.
It has been tested on mordern browsers (Firefox 3, Internet Explorer 8, Opera 11, Safari 5 & Chrome).
It has also been tested on IE7 & IE6 without any issue.

Download

29. Flexslider- Fully Responsive Jquery Slider Plugin

Flexslider is simple and semantic markup jQuery plugin with high resolution support and works on every available browser. The most beautiful feature of Flexslider is, users can navigate the plugin through keyboard, navigation buttons and it also supports touch swipe navigation.

Download

28. Minimit Gallery Plugin

Minimit Gallery is a highly customizable, library agnostic plugin that does galleries, slideshows, carousels, slides, practically everything that has multiple states in less than 10kb Using Minimit Gallery you have more time to focus on the ideation and the dynamics of your interface, all the logic functionality instead is managed by the plugin. It’s designed for advanced JavaScript/Jquery programmers because you need to code all the animations and the css of the gallery. It has been tested on IE7+, Firefox, Safari and Chrome.

Download

27. Sharrre : A Plugin for Creating Social Network Widget

Sharrre is a jQuery plugin that allows you to create nice widgets sharing for Facebook, Twitter, Google Plus (With PHP Script) and more. Sharrre allows you to create any type of custom, uniform buttons to integrate with your designs; you really don’t need to use the old buttons provided by the social networks, with Sharrre, the API buttons are called on demand and once, regardless of how many buttons you have.

Download

26. Jeditable – Edit In Place Plugin for jQuery

Jeditable is inplace editor plugin for jQuery. This plugin allows you to click and edit the content of different HTML elements with few lines of JavaScript code. It works in normal flow, user clicks text on the web page, block of text becomes a form, user edits contents and presses submit button. New text is sent to webserver and saved and form becomes normal text again. You can also get full control of Ajax request. Just submit to function instead of URL. Parameters passed are same as with callback. Jeditable is licensed under the MIT License.

Download

25. Mobiscroll – Wheel Scroller for Optimizing Date and Time

Mobiscroll is a wheel Scroller user control which helps users to optimize date and time for touch screen devices such as iPhone, iPad, Samsung, Motorola etc. Mobiscroll can be customized easily and it supports any kind of custom values and can even used as the alternative of select control such as dropdown list. The control is themable comes with nice looking color themes and users can change the appearance of CSS. It has been tested on iOS4, Android2.2 Chrome, Safari, Firefox, and IE9.

Download

24. Sequence : Slider Plugin With Infinite Style

Sequence is jQuery plugin that allows you to slide the content without a default theme but leaving the complete control to you. Sequence uses a semantic markup and supports responsive layouts and also touch devices and swiping, Sequence enables users to use any type of contents and let them display in an infinite slider logic. There are various unique transitions built with CSS3 that requires modern browser supports and gracefully degrades in older browsers.

Download

23. Poshy Tip jQuery Plugin

Poshy Tip jQuery plugin is a tooltip plugin that helps you to easily create stylish tooltips. With Poshy Tip users can position the tips relative to the mouse cursor or to the target element and align them in every possible way horizontally and vertically. Poshy Tip supports using a function for returning the tooltip content and the script also passes an update callback function as an argument to this function. By using this callback, you can easily update asynchronously the content of the tooltip after it has been displayed.

Download

22. Diapo – Content Slider, Slide Show, & Mobile Ready

Diapo plugin is one of the best plugin which assists users to create beautiful content sliders with custom effects. Diapo has the ability to display images, videos and HTML contents in unique style. Diapo is capable of displaying slide shows along with pause buttons and helps users to build up pagination with next and previous buttons, users can browse the date in the plugin in both ways either automatic or manually.
Diapo plugin is mobile ready and includes features for mobile usage.

Download

21. Page Scroller : A Simple and Elegant Navigation Plugin

Page Scroller is power yet elegant navigation plugin that adds smooth scroll functionality to your web page. The plugin is so simple you can animate any website and auto –create a navigation that sits in the sidebars or at the top.
Page Scroller can also display top and bottom arrows for browsing through the sections one by one. The plugin includes several customization options including the scrolling speed, offset and callbacks.

Download

20. jQuery UI Bootstrap

jQuery UI Bootstrap is a jQuery UI theme that is inspired from Twitter’s project and brings the slickness of it to jQuery UI widgets. With this theme you can not only use
Bootstrap themed widget but you can use twitter Bootstrap side-by-wide with it without components breaking visually.

Download

19. Fotorama : Image Slider with Thumbnail Display

Fotorama is powerful yet flexible image gallery plugin for jQuery that is compatible with all type of computers, iPhones and any mobile devices. Fotorama allows users to include thumbnails, prev- next buttons, swiping, slideshows or bullet navigation. Fotorama assists users to arrange the dimension and position of the slider and thumbnails and also users can define captions to images.

Download

18. noty: A jQuery Notification Plugin

noty is a jQuery plugin that allows users to create user friendly, JavaScript-alert alternative notifications easily. noty includes build in support for alert, success; error and confirmation message and they can either be displayed as HTML elements that fade in/out or as modal boxes.
With noty you can display notifications on any part of the web page and it also provides many customization options such as speed of open/close animations, display, duration and many more.

Download

17. Scrollorama : For Scrolling Effects

Scorollorama is a jQuery plugin for creating eye catching effects in parallel to the scrolling of web pages. It helps you to animate the elements of your page by dividing the contents into blocks. The animations are achieved using CSS properties, time duration can be defined and it also allows users to set the exact position of the start/stop events.

Download

16. Pinbox.js : Photos Then and Now

With the pinbox.js script one can compile any arrangement or amount of images, and combine them through the utilization of the script into interactive media or – animated GIFS through the simple combination of an image tag and HTML5 attributes which specify the size and position of the inner image.
The best part of this nifty little script is that it ensures the images used will still function properly even if JavaScript isn’t enabled on the end users browser or it simply doesn’t open properly.

Download

15. qTip 2

qtip2 can display the tooltip in any position wanted, plays nicely with image maps and they can be set to follow any element. With qTIp2 tooltips can be styled completely, it has also a themeroller support and also they can displayed as model windows.qTip2 has a build in Ajax integration and can load any remote data.

Download

14. FeedEk : Display RSS/ATOM Feeds

FeedEk is a jQuery plugin for parsing and displaying RSS and Atom feeds. This plugin can be used easily and can grab the feed items from any domain with a few lines of code. Users need to mention the feed URL, numbers of items to be displayed, description and publish date to be shown.

Download

13. Hovercard : Display In-Line Info

Hovercard is a jQuery plugin allows you to easily display related information with the hovered label, link, or any html element of your choice. Hovercard can be handy while displaying micro info such as person bio, book author and price, loading related information with Ajax, editing in place etc.
Also it comes with built in Facebook and Twitter integration that allows users to display the details of a Facebook page or Twitter users.

Download

12. bgStretcher jQuery Plugin

bgStretcher 2011 (Background Stretcher) is a jQuery plug-in which allows you to add a large image (or a set of images) to the background of your web page and will proportionally resize the image(s) to fill the entire window area. The plug-in will work as a slideshow if multiple images mode is used (the speed and duration for the slideshow is configurable).

The slide show can be browsed with pagination and prev-next buttons besides the autoplay and there are multiple transitions types offered.
Download

11. jQuery Collapse : Expanding and Collapsing Content

Expanding/collapsing panels are used to save space and display the content only when requested. JQuery-Collapse is a lightweight (Lesser than 1kb) plugin that enables expanding and collapsing contents.
This plugin includes features like cookie persistence, ARIA compliance, and designed to be flexible and modular enough to be used in many different scenarios.
It allows you to define the HTML elements to be hidden and displayed when needed with a simple function that has callbacks for integrating custom events. This plugins supports all type of major browsers including IE6.

Download

10. A tiny jQuery Slider Plugin : Craftyslide

Craftyslide is lightweight, tiny only 2 kb jQuery slider plugin that aims to be different by providing simple, no-frills method of displaying images: packaged into a small clean and efficient plugin.
Craftyslide can display captions, contains bullet navigation, uses fade animation of transitions and accepts unordered lists. it also support prev-next button along with all major browser support.

Download

9. Glisse.js : A Responsive Jquery Photo Viewer

Glisse.js is a simple, responsive and fully customizable jQuery photo viewer. You’ll like the transitions between two pictures entirely assumed by CSS3. It scales to the viewport and is iPad and iPhone ready.
Glisse.js offers many features such as keyboard navigation, fully customizable, animated with CSS3 keyframes, 7 different transition effects, fullscreen support, it has also support for ipad and iphone.

Download

8. TextExt

TextExt is powerful jQuery plugin that improves the functionality of text input fields. Text Ext is based on modular design and includes several features such as inputs, filtering, auto complete, Ajax and placeholder text. it can also display a custom arrow besides select field, show the items in them as suggestions while typing and more.

Download

7. A Mouse-Controlled jQuery Image Slider : Flow Slider

Flow Slider is lightweight jQuery plugin that lets you slide your HTML content through mouse interaction. Flow Slider works by hovering to the right or left side of the contents and converts unordered list into a slider. This plugin is fully customizable and support all major browsers, it contains options for transitions type and speed, acceleration starting position and much more that are customizable.

Download

6. Zoomooz.js : Making Any Webpage Element Zoom

Zoomooz.js is an easy-to-use jQuery plugin for making any web page element zoom. Users can easily add the zoom effect by adding the class “zoomTarget” on any HTML elements. The plugin allows users to reset the zoom by clicking body. It has been tested on Internet Explorer 9, Safari 3+, Firefox 3.6+, Opera and Chrome. Though it doesn’t support the older version of IE and it requires spate CSS file.

Download

5. Galleria

Galleria is a JavaScript image gallery framework built on top of the jQuery library. The aim is to simplify the process of creating professional image galleries for the web and mobile devices. Galleria uses canvas and other techniques to create thumbnails and scale images on the fly, great when trying different sizes and themes without opening Photoshop.

Download

4. Perform A/B Testing Quickly with jQuery : Instabir

Instabir is a powerful jQuery plugin for quickly implementing AB testing with a bunch of code. It works so simple and applies two different designs, content, etc. it hides one of them and defines these HTML elements, plugins and displays only one of them randomly and records the activities and all data into MySQL database.

Download

3. Tubular jQuery Plugin : Set YouTube Video as Background

Tubular is a jQuery plugin that lets you set a YouTube video as your page background. Usage is straightforward and requires JavaScript and the Flash player to be installed and functional on the client’s browser. tubular is dependent on jQuery and swfobject.

Users need to attach it body tag, specify a YouTube Video ID and tell it the ID of your content wrapper. Please note, tubular must be deployed on a web server to function. The YouTube player will not work when loaded into your browser from your machine.

Download

2. jOrgChart : Create Interactive Organization Charts

Binary trees or tree menus always consider as a great way of displaying nested data in a user friendly and easy to explore interface.jOrgChart is a jQuery plugin which transforms nested unordered lists into menus but with an organization chart like output. jOrgChart supports for any depth, it will let you show/hide the sub-levels while clicking on any item, it also allows drag ‘n’ dropping elements from one node to another.

Download

1. Achieving Text Effects With jQuery : Textualizer

Textualizer is 4kb lightweight jQuery Plugin that helps you to create beautiful effects on text. Textualizer allows you to transition through blurb of text, when transitioning to a new blurb, any character that is common to the next blurb is kept on the screen and moved to its new position.
Textualizer allows you to define duration of time to each item that leads to how it will display and also the duration of the transactions. There are also few functions available that helps users to perform pause, stop, and rotation actions.

Download

Of course this isn’t a definitive list and there’s room for more. If we left out a resource or tool that deserved a mention, definitely share it with us in the comments below!

Scroll Kit

While I’ve never been a fan of site builders, there’s something refreshing about the way Scroll Kit operates. The possibilities vary based on the user’s taste, but all in all, the grid and text-dominant editor is quite useful. You might also want to check out Breezi and Spinto.

➤ Scroll Kit

.

Skeleton

Skeleton is a small collection of CSS & JS files that can help you rapidly develop sites that look beautiful at any size, be it a 17″ laptop screen or an iPhone. Skeleton is built on three core principles: Responsive Grid Down To Mobile, Fast to Start and Style Agnostic.

➤ Skeleton

.

Responsive Design Test Bookmarklet

This bookmarklet is a simple tool that allows you to instantly check the responsiveness of any site you’re on. Simply click it and you’re brought to a new page that shows you the site in various sizes. For more on responsive design, you might also want to check out Resize My Browser.

➤ Responsive Design Test Bookmarklet

.

Box of Bundles

Box of Bundles is exactly that: A monthly, totally free and collaborative bundle of freebies, created by amazing designers all around the globe. Think UI templates, login forms, share buttons and much more.

➤ Box of Bundles

.

Invision

Invision is a UI prototyping tool for creating interactive prototypes and high-fidelity wireframes. If you’re looking for a tool that sits right in your browser, this is one to check out.

➤ Invision

.

Layercake

Layercake, from the creators of Espresso, just recently launched as a tool for expediting the process of making your PSD ready for the Web. You can learn more from our full review of the app.

➤ Layercake

.

Temboo

Temboo brings over 60 APIs into one place. “We’re the universal API for the cloud. Our SDK integrates directly into your dev environment just like any other library, except ours is way more powerful, like a gorilla!”

➤ Temboo

.

Parse

Parse adds a powerful and scalable backend in minutes for your mobile app. The free plan is surprisingly generous, but it certainly isn’t for everyone.

➤ Parse

.

Air Display

Cheekily described, “Ever wish you had an extra monitor for your Mac or PC? There’s an app for that!” The app connects tons of devices together, turning your iPhone, iPad, Android device or extra computer into a second display.

➤ Air Display

.

Typekit Lists

This one wasn’t tipped, but is worth a second look. Typekit’s Lists are a valuable tool for growing your understanding of typography; online and offline. There are plenty of other collections to enjoy, including condensed headline fonts, fat faces and long form. Read more in our review of TypeKit Lists.

➤ Typekit’s Lists

.

While you’re at it, you might also want to check out Edding 850: A free modular font, 5 awesome free query plugins and TNW’s look at animated typography.

You need to possibly find a cofounder and team to start planning, seek funding and successfully execute the plan for a pilot or full launch.

There are so many resources and tools out there that can assist you in managing and excuting your startup or new business idea more eficiently and effectively.

As a result, I have produced a list of my favourite tools and applications covering the various disciplines you will need to undertake in order to successfully execute and launch your startup or new business.

Here are just a few tools and applications that I have used over the years in managing and delivering small to large projects. I hope you find them useful for your business and startup.

Brainstorming Ideas |

Bubbl.us

Simple online application that helps you create colorful mind maps that you can print and share with others and it’s FREE.

MindManager

Mindmanager is a software application that helps you create mind maps, tasks, process flows, site maps etc. Great for scoping out projects at high level.

Creately

Creately, another great online application for creating flow charts, wireframes and mind maps.

Springpad

Springpad is an online application that lets you easily save ideas, information and organise and share. It’s FREE.

Evernote

Evernote is a extremely versatile online application for capturing, collating, organising, saving ideas and notes. Great collaboration tool and best of all its FREE for single user license. If you wish to share your notebooks with others you will need to go to the premium plan which costs USD$5 per month.

Branding |

99designs

99designs is a crowdsourcing market place for getting your graphic design work done, from logo and branding through to business cards and website design.

You create a contest, freelance graphic designers from around the globe create their designs and pitch for the job.

Designs are presented to you on the site, you nominate the winning design and pay the designer. Very cost effective way in getting your design work completed.

User Experience (UX) & User Interface (UI) Design |

Notebox

Great online tool for assisting UI designers in obtaining client feedback on designs.

Google Web Fonts

Avoid paying for licensed fonts, your designer can choose similar open source web friendly fonts from Google Web Fonts, it’s FREE.

CheckDog

CheckDog is an online application that checks your copy text for spelling errors.

Mokk.me

Mokk.me is a web based application that helps you create simple mobile application mockups. Once created, you can share it with your team and provides the ability for them to edit and provide feedback. The application is optimised for iPhone but you can also test Android and WebOS. Its currently in beta and best of all the online version is FREE.

Cacoo

Cacoo is an online tool for creating site maps, wireframes and network charts. It also allows for several users to collaborate in the process.

Mocksup

Mocksup is an online application for creating desktop, smartphone and tablet prototypes and also allows others to provide feedback on your prototype designs.

Mockflow

Mockflow is a online application for creating, designing and collaborating on user interface mockups for web sites and software applications. Very clean and minimalist interface. Basic plan is FREE but has some limitations.

Themeforest

In order to get you startup and business up and running quickly and hopefully cut some corners with the UI and site development, I highly recommend finding and purchasing existing themed templates that are close to your design and functionality you require.

You then have a great base to customise the site to your design and requirements. Themeforest which is owned by Melbourne’s Envato, is a marketplace that allows you to buy premium and stylish WordPress designed theme templates that are not you average stock standard design.

Obviously this option and solution does not work for all startups and businesses, hence total bespoke design and development is required in these situations.

Mockapp

Mock Is an iPad and iPhone application that allows non technically types to create and design actual graphical mockups and prototypes for iPad and iPhone applications. There was an online web application version previously but this is no longer available. iPhone application version coming soon.

Keynotopia

Keynotopia allows you to turn your favourite presentation applications such as Keynote or Powerpoint into a UI prototyping tool. Keynotopia provides a library of UI templates for web and mobiles to enable you to create fully interactive prototypes without any coding.

Keynote Kung-Fu

Similar to Keynotopia, Keynote Kung-Fu provides a library of Keynote UI wireframe templates for web or mobile application UI prototyping. It supports hyperplinks, hence you can build an interactive UI prototype in minutes.

Platform and Content Management System (CMS) |

WordPress

Once you have created your UI design and finalised your requirements for your site on paper, you need to decide what platform will support your website.

There are many platforms out there. Call me biased but I am a great fan of WordPress for a number of reasons.

Firstly its an open source platform hence is FREE and it has thousands of plugins and themes on the web at your disposal. it’s very stable and customisable with a great CMS and anyone can update and customise with its intuitive admin and content management system (CMS) panel.

For simple sites that also require a CMS, you can’t go passed WordPress. For more complex and larger websites, bespoke development will be more appropriate using other platforms such as ASP.NET or PHP etc.

Pitching |

Slideshare

Slideshare is the worlds largest online community for presentation sharing. Great resource for sampling best presentations, information and ideas. If you search on “pitch”, you will find hundreds of pitch samples form varies businesses and startups to assist you with creating your pitch. It’s FREE

Visual.ly

Visual.ly is a great site and tool for creating and presenting data in a visually appealing way, via Infographics. It’s FREE!

Powerpoint

Microsoft Powerpoint has been around for years. It has a very intuitive user interface and easy to use for creating your pitch or presentations.

Keynote

Keynote is Apple’s version of Powerpoint, very intuitive and easy to use application for creating a pitch or presentation.

Surveys |

Surveymonkey

SurveyMonkey is a very easy to use online web application that enables you to create online surveys. Basic plan is FREE

Quipol

Quipol is an online social voting tool which enables you to insert “one question” polls into your blog or website. Quick and easy way to determine where your audience stands on virtually any topic.

Domain Names and Hosting |

Panabee

Panabee is an online web tool that checks domain names with a twist. it helps to brainstorm new ideas based on URL availability. It’s FREE.

GoDaddy

I find these guys very reasonably priced for both domain names and web hosting. If your site is complex, very content media rich and it holds sensitive customer information, I would strongly recommend going with a local ISP with more secure and higher performance infrastructure.

Hostgator

Hostgator is one of the cheapest web hosting ISPs. As per GoDaddy, same hosting recommendation applies.

Business Planning |

Lean Canvas

This very simple online tool is fantastic for creating a basic “no frills” business plan and model for your new business or startup. it allows you to capture your business model all on one page. Ideal for lean and agile projects that need to hit the ground running. It’s FREE for one user.

Project Management & Collaboration |

Basecamp

Basecamp is an online project management and collaboration tool Eg: File sharing, milestone tracking, tasks, resource management and messaging.

Redmine

Redmine is an online open source project management tool and it’s FREE

Pivotal Tracker

Online project management and collaboration tool for software development.

Jira

Jira is popular online collaboration tool for tracking stories, tasks, bugs, resource allocation, file sharing, Ideal for lean and agile development.

Goplan

Goplan is another online project management and collaboration tool.

MavenLink

Mavenlink is another online project management, collaboration and file sharing tool with a nice user interface.

Mingle

Mingle application is an agile project management online application which replicates the physical card walls and scrum task boards. It provides great views of the various agile disciplines in an intuitive and well presented user interface.

LeanKit Kanban

LeanKit Kanban is a simple and very visual process management and collaborative tool for managing lean projects. It allows you to create virtual Kanban boards, add color, dates and more.

MSProject

Microsoft Project is one of the most sophisticated project management desktop applications on the market. It is used extensively by major medium to corporate size organisations for tracking, scheduling and resourcing. Not as intuitive as some of the previous mentioned project management tools, but is the industry standard tool for project management scheduling and tracking.

WorkFlowy

Workflowy is an simple no frills online to do list for managing tasks, brainstorming etc and it’s FREE.

Communication |

HipChat

Establish a private chat service and forum for your team using HipChat.

Skype

I think Skype needs no introduction here, but those that are not aware of its full capability, it provides VOIP, video calling, IM, text messaging, sending of files and its FREE. VOIP to fixed line and mobiles is not free.

Zipcast

Zipcast is a great web online meeting tool by Slideshare which allows you to present slides and presentations, at the same time communicate with your audience via chat and video all in one browser. It also allows you to schedule and invite unlimited attendees to the meeting and it works in any browser. Best of all this great online application is FREE.

GoToMeeting

GoToMeeting is a web conferencing and meeting tool that is great for startups and businesses where you have teams spread over multiple sites and you need to collaborate together.

Viber

Viber is a great application for iPhone and Android phones that lets you make free phone calls and send text messages to anyone who has the application installed on their iPhone or Android mobile. it also utilises your existing address book and tags your contacts who also has Viber application installed on their smart phones. Best of all it’s FREE.

Jing

Jing is a great online web application that allows you to capture screenshots, record up to 5 mins of onscreen video from your computer and provide narration. Our UI designers and developers use it to show UI functionality and designs to remote teams. Allows you to record the screen shot or video and save the file for sharing. Best of all It’s FREE.

File sharing, storage and backup |

Dropbox

Great online site for storing your files, sharing and backing up to the cloud. Basic plan is FREE for up to 2GB of storage.

Box

Box is a great online site for storing your files, sharing and backing up to the cloud. it integrates with Salesforce, Google and Okta and provides sync between your various desktop and devices. The personal plan is FREE but limits to one user, 50GB of storage with file size limits up to 1GB.

Testing |

Bugherd

Bugherd is an online application for tracking issues and defects especially with UI designs. You can tag, describe and assign issues on the actual designs via the application..

Pingdom Tool

Full page online test tool to help you test the loading speed and performance of your site or webpage. Its so simple and quick, you just type in the URL of the page you want to test and the tool basically initiates the test and returns the results of the performance test. Its fantastic and it’s FREE.

Skipfish

Great open source vulnerability scan application to determine any security holes within your web site (web application and infrastructure). To be treated as a first pass option to determine any obvious security risks. If your serious about security, I highly recommend engaging a security architect or company who specialise in the area of security vulnerability. Skipfish is a great tool for self assessment and it’s FREE.

uTest

Crowdsource your test team, dedicated to testing web sites and applications.

Mantis Bug Tracker

Mantis is a web based open source tool for capturing and managing bugs and defects and its FREE

Bugtracker

Bugtracker is a web based tool for capturing and managing your test defects. Its FREE for 2 users

Sifter

Sifter is ideal for startups that just need a simple online application or tool to manage and track there there defects and issues during testing. Nice and clean UI.

PlayNicely

PlayNicely is another simple bug tracker online tool that is easy to use and with an intuitive UI.

SoftwareQAtest

Great resource site for all things “software and web testing” with references and links to over 500 test tools. It’s FREE.

Customer Relationship Management (CRM) |

Nimble

Great simple and intuitive CRM online application which also provides a Hootsuite like social media management dashboard. Not as sophisticated as Salesforce or Zoho CRM especially in the sales opportunities and reporting area but still does a great job and has a nice user interface. Personal plan is free but is limited to one user along with a few other limitations.

Zoho CRM

ZohoCRM online contact management application is a little more sophisticated than Nimble. Easy to use with also a great user interface. It lacks a little with marketing side of things compared to it’s direct competitor Salesforce, but still does a great job. The other added bonus is that it integrates well with Google. Monthly cost is $12 per month per user license for the “Professional” plan but they do have a FREE edition for 3 users. Much more cost effective than Salesforce especially for startups and new businesses where every cent counts at the initial stages.

Financial and Accounting |

Saasu

Saasu, is a fully featured online accounting application with great integration and user interface. It supports 50 countries along with their tax accounting systems. Here at Ideasspotter, we use it as our key accounting solution.

Freshbooks

Online accounting application solution for small businesses and startups It provides excellent online billing, invoicing, payment processing and customer management features.

Wave Accounting

Online accounting application specifically designed for small businesses and startups. Basic features include invoicing, reminders, tax and expense tracking. Best of all it’s FREE.

Social Media – Community And Marketing Management |

Knowem

Great online web application that allows you to search globally for the availability of social media usernames, domain names and trademark databases to assists with creating your brand.

Hootsuite

Online social media management tool that allows you to manage all your social sites from the one location.

Sproutsocial

Sproutsocial is a direct competitor to Hootsuite which also allows you to manage all your social sites through the one online social media management application.

Socmetrics

Socmetrics is a web based tool that allows you to identify influencers, understand who these people are, interact with them and then monitor your campaign effectiveness. You can identify these influencers by narrowing your search to keywords to truly identify the influencers.

SocialMention

Socialmention is an online web tweeter listening application that allows you to identify who is talking about you and provides great statistical data about your keyword search. Best twitter listening application that I have used.. Best of all it’s FREE.

Tweetreach

Tweetreach is a great online web application that allows you to determine how many people your tweet reached. It’s FREE.

Google Alerts

Google Alerts is a great tool for startups and businesses to use to monitor their online reputaion. Each time Google finds a mention of you startup or business, it sends you a email as it happens. You can also use to it to monitor your competitors as well. It’s FREE.

MailChimp

I love MailChimp!

MailChimp is an online email marketing application that allows you to create newsletters, monitor the performance of your email marketing and provides great integration APIs and plugins to social sites. The user interface is fantastic and so intuitive. Currently its FREE for lists under 2000 subscribers with no trial limit. At ideasspotter we use MailChimp for our newsletter subscriptions and email campaigns.

Site Trail

Site Trail is an online web application that provides you a quick snapshot of any competitors website. It’s FREE.

Google Analytics

Google Analytics is a web analytics tool that provide you valuable information about your website traffic such as the number of visits, where users have come from, referral sites etc. It also provides you great insight into the efectiveness of your marketing strategies and campaigns. It has a simple user interface and its FREE. This is a must have tool to measure your ROI as a result of your social media and marketing execution.

Unilyzer

Unilyzer is a social media analytic tool for measuring and monitoring you social media channels, from one impressive looking dashboard. You simply enter your social media account details (Twitter, Facebook, You Tube etc) and Unilyzer will present you all the data on one screen.

Customer Helpdesk & Support |

Desk.com

Desk.com is a online customer support application for customer queries and feedback from various incoming channels such as social media sites, email, chat and normal fixed line.

Zendesk

Zendesk is a online customer help desk support application and is a direct competitor to Desk.com with very similar features.

UserVoice

UserVoice is a online customer feedback, helpdesk support, voting and knowledge base application for customers. Basic plan is FREE for 1 agent.