Javascript is one of a web designer’s best friends. Learning how to use this powerful tool to its fullest potential can prove invaluable to our work and our clients. jQuery helps make JS more accessible. jQuery is a free, fast, and concise JavaScript library that allows you to efficiently write cross-browser javascript code to make Ajax requests, animate elements, manipulate the DOM, and do a variety of user interface manipulations.

So today we are going to look at getting started with jQuery. This is the most popular javascript library available and has an extensive community working behind it, so if you are just diving in to the JS waters, jQuery is a fantastic place to begin. Below we have prepared something of a virtual resource guide for beginners to help them on this mission.

And know that if you ever get in over your head, you can always refer back to the official jQuery documentation to help get your bearings and clear up anything you are having an issue getting a grip on.

Tutorials

jQuery for Absolute Beginners is a wonderful series of 15 video tutorials that teach you exactly how to use the jQuery library starting with downloading the library and eventually working up to creating an AJAX style-switcher.

jQuery for Complete Beginners is a series of text tutorials aimed at teaching the jQuery library from scratch. This is a currently ongoing series with 4 parts already complete.

Simple Guide: How to Get Started with jQuery is a simple beginners guide that covers what jQuery is, some of the benefits of the library and takes you through writing your first simple script.

Introduction to jQuery is one of Chris Coyier’s outstanding screencasts providing a very basic introduction to including jQuery on your web page and getting started writing a few functions.

Marc Grabanski’s jQuery Essentials Slideshow is an extremely helpful, illustrated slideshow that will have you understanding the basics of jQuery in no time.

How jQuery Beginners can Test and Improve their Code offers some tips for optimizing your code by making small changes to significantly improve its readability and/or performance .

Websites

The Official jQuery Blog will keep you up to date on all things jQuery including details on new releases and how they improve the library.

The Learning jQuery blog offers jQuery tips, techniques and tutorials divided up into beginner, intermediate, and advanced categories. Though not a blog that updates frequently, it’s already a very large and useful resource.

jQuery for Designers is another site that publishes jQuery tutorials in every experience level. Only this site focuses specifically on applying web interactions using jQuery.

Visual jQuery is an interactive jQuery cheat sheet that provides a variety of sorting options with an in depth description for each element, many with examples.

jQuery HowTo is a blog with a collection of code snippets, tutorials, tips, and performance observations. This is another blog that doesn’t update often but has a vast backlog and quality content.

Tools

The jQuery Quick API Reference is a color coded and searchable jQuery cheat sheet that links directly to the official jQuery documentation for each element.

jQuery Tools : The Missing UI Library for the Web is a collection of the most important user-interface components for modern websites.

jQuery UI is an open source library of interface components built according to jQuery’s event-driven architecture (find something, manipulate it) and is themeable, making it easy for developers of any skill level to integrate and extend into their own code.

jQuery Plugins is a collection of just that, pretty much any kind of jQuery plugin you could hope to find. Complete with a forum for on the spot help when you need it.

Books

jQuery: Novice to Ninja is an easy to follow guide that will teach you to master all of the major tricks and techniques that jQuery offers. And while their claims that you can learn it all within hours may seem a bit ambitious, it’s still a great read for beginners.

jQuery Fundamentals is a creative commons (ie free) online book that features an in depth lesson on jQuery as well as an extensive collection of examples.

jQuery in Action is a highly lauded book where you will learn how to traverse HTML documents, handle events, perform animations, and add Ajax to your web pages. This comprehensive guide also teaches you how jQuery interacts with other tools and frameworks and how to build jQuery plugins.

Learning jQuery: Better Interaction Design and Web Development with Simple JavaScript Techniques is for web designers who want to create interactive elements for their designs, and for developers who want to create the best user interface for their web applications.

Essential JavaScript And jQuery Design Patterns is a free ebook on design patterns which are reusable solutions to commonly occurring problems in software development and are a very useful tool to have at your disposal.

That’s a Wrap!

That concludes this gathering of jQuery resources to get you started in the Javascript game. What are your favorite or go to resources for learning this the ins and outs of this library? Where did you turn in the beginning to get a handle on jQuery? Let us know in the comments!

(rb)

  

Looking for some cool new (and free) jQuery slider plug-ins and scripts? Then here is the perfect round-up created just for you. Here, we have collected the best of the freshest jQuery plug-ins for creating amazing image and content sliders. Because all of these plug-ins come with different functionality, this guide should help you figure out which one suits you best. Let’s go!

jQuery Image And Content Sliders

Cloud Carousel (demo | download)

Here is a 3-D carousel, with optional auto-reflection that doesn’t require images to be modified or server code to be added. Accurate 3-D perspective and easy integration with basic valid HTML, all with a tiny bit of JavaScript.

ShineTime (demo | download)

“A new kick-ass jQuery and CSS3 gallery with animated shine effects.” This effect will make user interface elements look like they’re a polaroid photo (or made of glass). The best part is that it’s not that difficult to achieve.

Nivo Slider (demo | download)

Nivo Slider is an awesome and lightweight jQuery plug-in for creating attractive image sliders. It simply converts a wrapper for images into a slider, and it offers nine unique transition effects.

MLB.com Content Switcher with jQuery and CSS3 (demo | download)

The goal of this project was to recreate MLB.com’s switcher without any extraneous images or other non-essential elements that tend to make stuff less maintainable.

Create Scrollable Interface (demo | download)

This jQuery plug-in creates a scrollable interface with which to scroll over a large image in a small area.

Beautiful Photo Stack Gallery with jQuery and CSS3 (demo | download)

The idea here is to show photo albums with a slider, and when an album is chosen, its images are displayed as a beautiful photo stack. In this stack view, you can browse through images by tucking the one on top under the stack with a slick animation.

Micro Image Gallery: A jQuery Plugin (demo | download)

Minimalistic Slideshow Gallery with jQuery (demo | download)

This simple and beautiful slideshow gallery can be easily integrated in your website. The slideshow is in a container, with options to view a thumbnail grid, pause the slideshow and navigate through the pictures. The grid slides out from above and allow the user to navigate the thumbnails.

Image Slider with Unique Effects (demo | download)

This coin-slider jQuery image plug-in has several transition effects.

Create image gallery in 4 lines of jQuery (demo | download)

Slideshow with strip effects (demo | download)

jqFancyTransitions is an easy-to-use jQuery plug-in for displaying photos as a slideshow with fancy transition effects.

Nivo Zoom (demo | download)

Nivo Zoom is a free jQuery image zoomer intended as a replacement for a lightbox.

AD Gallery, gallery plugin for jQuery (demo | download)

A highly customizable gallery and showcase plug-in for jQuery.

Animate Panning Slideshow with jQuery (demo | download)

Image Scale Carousel (demo | download)

When working with images online, keeping the aspect ratio intact is as important as anything. That is what’s so nice about this jQuery plug-in: you don’t have to worry about sizing all of your images perfectly. It auto-scales your images for you, making implementation super-simple.

Sudo Slider (demo | download)

Essentially, Sudo Slider is a slider plug-in that allows you to do whatever you want, with whatever HTML you want. It’s both a content and image slider

GALLERYVIEW (demo | download)

GalleryView is a content gallery plug-in capable of displaying any HTML content in an animated gallery view. Visit the project’s home page for documentation and demonstrations.

Jquery Plugin MopSlider 2.4 (demo | download)

MopSlider is a slider box that can contain any item with a set height and width. With version 2.5, MopSlider can be added to a page however many times you want. An auto-move function is included.

jQuery Image Scroller (demo | download)

Making use of jQuery’s excellent animation features, this image scroller is completely autonomous and begins scrolling once the page loads. The finished widget is completely cross-browser compatible and performs as expected in the latest versions of the most common browsers.

Image Gallery Using jQuery and Flickr (demo | download)

jQuery plugin: Wilq32.RotateImage (demo | download)

This is the product of the Wilq32.PhotoEffect snippet. You can use this tiny script to rotate images (at any angle) directly on the client side (e.g. with user-generated content) and animate them using your own functions.

jQZoom Evolution (demo | download)

JQZoom is a JavaScript image magnifier built on jQuery. The script makes it easy to magnify whatever you want.

Photo gallery using jQuery and VisualLightBox (demo | download)

Zoomimage (demo | download)

YoxView (demo | download)

YoxView is a free lightbox-type media and image viewing jQuery plug-in. It’s easy to use and feature-rich.

Supersized (demo | download)

This plug-in resizes images to fill the browser while maintaining their dimensions. You can cycles images and backgrounds in a slideshow with transitions and preloading. And navigation controls allow for “Pause/Play” and “Forward/Back.”

AnythingSlider (demo | download)

Photo Revealer (demo | download)

With this, you get a line of cropped thumbnails on a string. Clicking the “More Info” button expands a photograph to full size and reveals additional information. Photos are loaded on page load, so there is no waiting after clicks.

Exposure (demo | download)

Auto-Playing Featured Content Slider (demo | download)

This is an alternative to the jQuery Coda Slider plug-in. With this, a slide can be any kind of HTML content whatsoever, even a full-size image with overlay. Each slide has a unique thumbnail that, when clicked, takes you to the corresponding slide, with an arrow above indicating the active panel. And it auto-plays!

Horinaja (demo | download)

Horinaja is a ready-to-use slideshow that can be used with either Scriptaculous/Prototype or jQuery. It allows you to use the mouse wheel for navigation; when the mouse is outside of the slideshow area, it scrolls; when hovering over the slideshow, scrolling pauses.

S3 Slider (demo | download)

This one’s easy. First, enable the jQuery library, and then include the S3 Slider JavaScript in the head of the page where you want to use it.

Slide Deck (demo | download)

SlideDeck is a powerful plug-in that lets you organize any type of content into a beautiful and user-friendly slider.

Galleriffic (demo | download)

A jQuery plug-in for rendering rich fast photo galleries.

Photo Gallery – Dark Theme (demo | download)

GalleryView decides the best way to animate your filmstrip. When the gallery is wider than the filmstrip, the filmstrip remains stationary and the pointer slides from frame to frame. When the filmstrip is too long for the gallery, the pointer remains still and the filmstrip animates beneath it.

jQuery morphing gallery (demo | download)

A gallery that “morphs” images between transitions.

Simple Accordion w/ CSS and jQuery (demo | download)

Designed and implemented with usability in mind, this accordion can come in very useful when organizing a good chunk of content.

Automatic Image Slider w/ CSS & jQuery (demo | download)

Create a Slick and Accessible Slideshow Using jQuery (demo | download)

A usable and accessible slideshow widget for your website that uses HTML, CSS and JavaScript (via jQuery).

Fancy Thumbnail Hover Effect w/ jQuery (demo | download)

Coda Slider Effect (demo | download)

Simple Controls Gallery (demo | download)

Want to display images as an automatic slideshow that can be played or paused by the user? Simple Controls Gallery displays an image by fading it into view over the previous one. Navigation controls pop up when the mouse rolls over the gallery.

Popeye (demo | download)

jQuery.popeye is an advanced image gallery script built on jQuery. Use it to save space when displaying a collection of images, and offer users an elegant way to show big versions of images without disrupting the page flow.

Simple demo (demo | download)

ImageFlow (demo | download)

ImageFlow is an unobtrusive and user-friendly JavaScript image gallery.

Moving Boxes (demo | download)

SlideViewerPro (demo | download)

SlideViewerPro is a fully customizable jQuery image gallery engine that allows you to create outstanding sliding galleries or interactive galleries in blog posts.

Pirobox (demo | download)

jQuery simple panorama viewer (demo | download)

This small plug-in for jQuery will display any image on the page that has the class panorama as an interactive panorama.

A Beautiful Apple-style Slideshow Gallery (demo | download)

Flickr Photobar Gallery (demo | download)

The aim here was to build a bottom photo bar that one could easily integrate into a website. It is hidden initially and slides up when the handle is clicked. The photo sets are first shown and when one of them is chosen; all of the set’s images can be viewed as thumbnails; when a thumbnail is clicked, the full view appears as an overlay.

Step Carousel Viewer (demo | download)

Step Carousel Viewer displays images and even rich HTML by side-scrolling them left and right. Users can jump to any panel on demand or browse the gallery by scrolling through any number of panels at a time. A smooth sliding animation is used to transition between items. And don’t worry, you can tame this script to do exactly want you want: two public methods, two custom event handlers, and three “status” variables are available for this purpose.

Zoom-Info (demo | download)

Box Slider (demo | download)

jQuery Panel Gallery (demo | download)

An attractive and beautiful image slideshow plug-in, with a classic transition effect.

Image Highlighting and Preview with jQuery (demo | download)

A nice way to allow users to view bigger versions of images with some context.

Interactive Photo Desk (demo | download)

With this utility, photos can be dragged and dropped, stacked and deleted, with each action resembling a real-world action.

Multimedia Gallery for Images, Video and Audio (demo | download)

Awesome Mobile Image Gallery Web App (demo | download)

A simple mobile image gallery, using the amazing jQTouch jQuery plug-in for mobile Web development. jQTouch has native animations, automatic navigation and themes for mobile Webkit browsers like those on the iPhone, iPod Touch, G1 and Pre.

(al)(rb)

  

Mobile web browsing is the next big thing. At least that’s what the pundits say. Recent data shows there are about 4 billion mobile users (almost half the planet) (source). In 2011, smartphone sales will surpass desktop/laptop computer sales, moving over 400 million units per year (source).
But haven’t we heard this all before? Hasn’t the mobile web been the “next big thing” for each of the last several years? What gives? It doesn’t really matter that 4 billion people have mobile phones unless they are using them to browse the web.

In previous years, two big factors have prevented the mobile web from taking off like everyone thought: inferior hardware and sub-par web browsers. The iPhone changed both for the better in 2007. Smartphones have taken a giant leap forward in the last three years and mobile Safari has led to several WebKit-based mobile browsers being developed.

So thanks to the iPhone and several other mobile innovations that proceeded it, mobile is for real this time. 25% of those 4 billion people are using the web from their phone today. (source).

If you haven’t built a mobile website before, the whole scene might seem a bit overwhelming. Today we’re going to give you the information necessary to answer some of the tough questions that come up when designing a mobile experience:

• Do we need a dedicated mobile site or just a mobile-optimized one?
• What browsers do we optimize for? How can we test them?
• Should we use a mobile framework? If so, are we depending on it for the UI?
• Which mobile framework is the best fit for my project?
• Which frameworks work best for building a native app?

The Browser Landscape

Prior to diving into your text editor and starting your first mobile site, it’s important to understand the lay of the land. Here are the worldwide browser leaders measured between July and December, 2010 according to StatCounter:

One clarification to be made is that iPhone and iPod Touch are treated separately above, but they are both the same browser from a web developer’s point of view. So if their market share is combined appropriately, it comes in ahead of Opera by 3.34%, making it the market leader.

Opera is a big deal now because it’s platform-independent, available on most smartphone operating systems including iOS, Blackberry, Android, Windows Mobile and Symbian. Opera Mobile v10+ and Opera Mini v5+ (different browsers) both have solid web standards support. Opera also provides excellent developer tools for testing.

Most modern mobile browsers are built on the open source WebKit framework, which debuted in a mobile capacity on the iPhone. iOS, Android, Symbian (Nokia), webOS (Palm) and Blackberry v6+ devices all have WebKit browsers by default. WebKit’s javascript and web standards support is excellent, so the only real thing to worry about is optimizing for various device resolutions.

A few other browsers are not big players at the moment, but are worth keeping an eye on. SkyFire tops the list, available on Android and iOS devices. It recently made headlines for generating over $1 million after only three days on the app store, forcing Apple to temporarily disable sales for a short time because of the demand. SkyFire is known for it’s social media integration and ability to convert flash video to a native format that can be seen on the iPhone.

Firefox Mobile is another up-and-comer. It’s available for Nokia N900 phones or any Android 2+ phones and is based on the same technology as Firefox 4 for the desktop. It boasts great video support (including flash), social sharing features and even user agent switching for more advanced users.

Even Microsoft’s Windows Phone 7 is holding it’s own alongside iOS and Android browsers. So even a browser with the infamous “Internet Explorer” name gets a fresh start in the mobile space.

Mobile First

Luke Wroblewski was the first to boldly proclaim that we should design websites for the Mobile First. Luke argues that designing for mobile first helps you focus on the most important elements since you have such limited screen space. He also says that mobile phones are now capable of more than desktop browsers, such as location-aware features and multi-touch gestures. So why not have the full arsenal of capabilities available to you when designing?

Perhaps the most compelling reason to consider designing for mobile first revolves around media queries. Media queries are part of the CSS3 specification that allow you to specify certain styles based on device parameters, most notably width or height. With either of the following lines of code, I can show styles for a device no wider than 480px:

<link rel="stylesheet" type="text/css"
media="screen and (max-device-width: 480px)" href="styles.css" />

@media screen and (max-device-width: 480px) {
  .column {
    float: none;
  }
}

For a great run-down about media queries, check out “Responsive Web Design”, an article by Ethan Marcotte.

The problem with media queries is that they don’t resolve properly on many mobile devices (source: Rethinking the Mobile Web). They are, however supported well on modern desktop browsers and even enabled in not-so-modern browsers with help from a javascript file. So if we start with mobile and use media queries to progressively enhance the layout for the desktop, everything works out! By using media queries to optimize a desktop site for mobile, you run the risk of the mobile browser not rendering it properly.

Meta Tags

Mobile meta tags aren’t nearly as important as they used to be, but there are still three mobile-specific tags worth understanding:

<meta name="viewport" content="width=240, height=320, user-scalable=yes,
initial-scale=2.5, maximum-scale=5.0, minimum-scale=1.0" />

The viewport meta tag is the newest and most powerful when it comes to mobile, allowing developers to share the width/height of their content with the browser and control how the content is allowed to be zoomed/scaled by the user. Most modern mobile browsers support this tag. Apple gives a nice overview of what the viewport tag is capable of and also details a few iOS-specific tags in their HTML reference library.

<meta name="HandheldFriendly" content="true" />

<meta name="MobileOptimized" content="width" />

When the viewport tag is not supported by the phone, it can fall back on one of two older meta tags. Both should become more obsolete in the coming years, but are a good fallback presently. “HandheldFriendly” simply identifies your site as “mobile friendly” to the phone, but doesn’t let you set any additional parameters. “MobileOptimized” is a proprietary Microsoft tag, which does allow you to specify a width, but isn’t flexible as to zooming or scaling. (source: http://davidbcalhoun.com/tag/mobileoptimized)

Use a Mobile Framework

While it’s not required, most great mobile experiences start with a framework. They help developers create rich, interactive mobile sites with minimal code and are optimized for several platforms out of the box. Popular frameworks also have growing communities, dedicated to improving the product across different browsers as the technology rapidly evolves.

jQTouch

This framework is primarily focused on optimizing websites for the iOS operating system, although it can be easily adjusted to work well for other WebKit-based browsers as well. It’s very flexible and has a solid community of developers working to improve it. (http://jqtouch.com/)

Pros

• Very popular framework with an active community
• Optimized for WebKit, especially iOS
• Great native-like animations and themes
• Good for javascript novices

Cons

• Nearly 70k minified, includes desktop version of jQuery
• It takes some research to find good tutorials
• Meant for smaller sites, probably not web applications

jQuery Mobile

jQuery is the big player we all know and love on the desktop. They have recently released an Alpha of their mobile framework, which brings a lot of the same goodness to mobile devices. What’s most impressive about this framework is it’s adaptability across all the most popular browsers and operating systems. Their graded browser support chart clearly outlines the support across all platforms. (http://jquerymobile.com)

Pros

• Built on the world’s most popular javascript framework
• Huge community
• Supports virtually every modern mobile browser
• Only 13k minified
• Great UI tools, better for cross-device consistency
• Great documentation, novices can pick it up easily

Cons

• Only in Alpha 2 phase, still has a little ways to go
• Doesn’t really look “native” on any device because it supports so many browsers

Zepto

Zepto, created by Thomas Fuchs (script.aculo.us author), is the perfect mobile framework for jQuery pros. It’s less than 3 kb minified, enables jQuery-compatible syntax (most of it) and is optimized for mobile WebKit browsers. There are no default UI controls, so it’s definitely for the more minimalist coders that are interested in a custom design. The fun chalk iPad project from 37signals was created with Zepto. (http://zeptojs.com/)

Pros

• Only 3.3k minified!
• Active community led by someone with serious javascript chops
• Designed with jQuery-compatible syntax

Cons

• No UI tools, only the basics
• Documentation is good, but demos are lacking
• Geared towards more experienced jQuery developers

Sencha Touch

Sencha (includes EXT JS desktop framework) touch is a very impressive javascript framework specifically geared for mobile web apps. It’s probably the best all-in-one framework right now. However, it’s not for beginners. All of the front-end syntax is javascript, so you need javascript chops and experience with the library to make the most of it. Right now it is compatible with iOS and Android devices. (http://www.sencha.com/products/touch/)

Pros

• It’s beautiful
• Great documentation and (paid) support
• Scalable, built for serious web apps
• Has all the UI tools you would need

Cons

• Only optimized for iPhone and Android so far
• Steep learning curve, must be experienced with EXT JS
• All javascript front-end syntax
• Runs fast, but framework is 369k

Yahoo! Blueprint

Blueprint is a robust framework meant to optimize for literally thousands of different devices. It takes raw XML, communicates with Yahoo!’s web services to generate the pages, then renders the content optimized for the device. The SDK is for more advanced users, but for anyone that has experienced the mobile Yahoo! properties, you know it is very powerful. (http://mobile.yahoo.com/devcenter)

Pros

• Comprehensive device support
• Robust features and APIs

Cons

• As mobile browsers evolve, this might be overkill
• Requires Yahoo! web services to work
• Steep learning curve
• Developer site and documentation is confusing

SproutCore Touch

SproutCore is a popular javascript framework for desktop browsers that gives web apps a native look and feel. It’s best known for running Apple’s MobileMe and iWork web services. SproutCore Touch basically adds touch support to the existing framework. It’s still one codebase as I understand it. So if you already have a SproutCore app, it’s pretty easy to optimize it for something like the iPad. (http://blog.sproutcore.com/post/531215199/introducing-sproutcore-touch)

Pros

• Gives almost instant touch support to existing SproutCore apps
• Mature codebase with some big supporters, like Apple
• UI tools are beautiful on the desktop and mobile devices

Cons

• All javascript front-end syntax
• Steep learning curve

Jo

This newer framework is lightweight (8k) and has some really nice elements to it. Compatible with webOS, iOS, Android and Symbian, it’s probably a great fit for smaller sites that don’t have a lot of UI demands. Jo is still new, but it will be really interesting to see how the open source community builds on this solid foundation. (http://joapp.com/)

Pros

• Lightweight (8k), still has nice UI tools out of the box
• Compatible with several operating systems

Cons

• Community is not as active as with other frameworks
• UI doesn’t really feel native on any device
• Codebase still needs more work to be considered with the top-tier frameworks

DHTMLX Touch

This framework is much like Sencha and SproutCore in that it’s all javascript syntax on the front-end and the code is derived from a desktop framework. With that comes an arsenal of robust UI elements and functionality. The touch framework just came out in December of 2010, but look for it to be a player moving forward. (http://dhtmlx.com/touch/)

Pros

• Comprehensive UI tools to fit any need
• Built to do heavy lifting for web applications
• Cool drag & drop visual designer tool (see video)
• Rich feature set based on desktop framework, lots of potential as the framework grows

Cons

• All javascript front-end syntax
• Steep learning curve
• Still in Alpha at the time of writing, documentation is evolving

CSS Grid Framework

The CSS Grid framework is completely different from the above-mentioned tools because it doesn’t include any javascript or UI tools. Technically, it’s not a mobile framework. It’s a fluid, 12-column grid that scales from 1140px wide down to 430px beautifully. You can build with a Mobile First mentality and use media queries to scale your site all the way up to 1140px.

The days of fixed-width websites are numbered as mobile becomes more of a focus for designers and their clients. The CSS Grid framework gives designers the ability to design for one flexible grid and optimize for devices across the entire spectrum.

Pros

• Same HTML/CSS works for your desktop and mobile site
• Progressive enhancement at it’s best thanks to media queries
• No javascript dependencies to render on mobile devices

Cons

• Not all designs can work with this framework; you have to design for it.
• No native or touch-friendly controls
• Best with smaller sites, probably wouldn’t scale for a web application

Testing Tools

Testing on real phones, while optimal, isn’t always an option. The next best thing is to use a simulator to test your mobile website. It takes quite an effort to find all the available simulators online, so I’ve compiled a list here:

Nokia (Symbian S60)- 5.0 is for touch devices, 3.0 is the latest for non-touch devices. SDKs can be downloaded here- http://www.forum.nokia.com/Library/Tools_and_downloads/Other/Symbian_SDKs/

Opera- simple Mac/PC versions of the Opera Mobile emulator are available for download and they have a web-based version of their Opera Mini Simulator. (http://www.opera.com/developer/tools/)

iOS (Apple)- Apple’s simulator is in their SDK and includes support for the iPhone and iPad. The SDK requires OSX to run. (http://developer.apple.com/devcenter/ios/index.action)

Blackberry- Blackberry simulators are available for download on their website and require Windows in order to run. (http://na.blackberry.com/eng/developers/resources/simulators.jsp)

Android- the Android SDK is available for Windows, OSX and Linux, which includes an excellent device simulator. (http://developer.android.com/sdk/index.html)

webOS (Palm/HP)- the Palm SDK is available for OSX, Ubuntu and WIndows computers on their website. (http://bit.ly/cl9jc1)

Microsoft- the 6.5 developer kit is publicly available, while nothing has been officially released for version 7 yet. Engadget ran a tutorial on how to get it running if you are anxious- http://www.engadget.com/2010/03/20/taking-the-windows-phone-7-series-emulator-for-a-test-drive-vid/

Firefox Mobile- the Firefox Mobile browser is a simple download for Windows, OSX or Linux computers on their website. (http://www.mozilla.com/en-US/mobile/download/)

In Conclusion

So it turns out building a mobile website in 2011 and beyond isn’t so bad. For the most part, mobile browsers now support HTML5 and CSS3 better than desktop browsers. Plus, there are all these open source frameworks to help you with the design and interactions. When it comes time to build your next mobile site, hopefully this article will eliminate the guesswork and help you make a great decision.

(rb)

  

We are on a constant hunt to find some cool and useful tools for our readers all the time. In this endeavor today we have collected some interesting apps as well as websites and services which will suit all your needs as a web developer, designer, project leader, or even the end customer. And the plus side of this collection is that all of the resources we have found are all free for personal use.

So you can now actively keep your employees productive, trace your lost laptop, protect your privacy and get rid of unwanted mails and much more. With how much of our daily professional lives revolve around the internet, we felt that anything we could do to help make that time a little bit easier and more productive would be a worthwhile pursuit. Some of these tools you may already be familiar with, and some you may not. However, we hope that you will find some value in the collection below, and that a few of these apps will be the game changer that you have been looking for to make your life a little bit easier and at times a bit more fun. Take a gander and grab a few tools before you go.

The Game Changers

World Broadband Ratings on Google Maps
This is a wonderful site based on Google Maps to track the websites, mashups and tools being influenced by Google Maps. Although its not affiliated with Google, you can fetch data regarding most things here as well.

IconFinder
Designers and developers are among some of the most avid icon hunters online. And that hunt has just gotten simpler with IconFinder, the icon search engine with a huge selection for all of your needs.

Woopra
For anyone who needs real time web analytics for their site, Woopra is the perfect compliment to your current analytics tracker. You can easily check on what is happening right now on your site, and what your users are doing.

Monkey On Your Back
Have trouble keeping your team or employees on track and productive? Then let the Monkey help. With Monkey On Your Back, you can create a todo list and send the various tasks to whomever you want to complete them.

CSS3 Playground
Starting off from a playful place, the CSS3 Playground is an excellent online source where you can experiment with all kinds of CSS tricks and then simply grab the code for the end product.

Readability
Given the amount of time we spend online, Readability may be just the tool for you to make your experience as comfortable for you as visually possible, by simply stripping down the site’s style for a softer visual presentation.

SunlitGreen Photo Manager
Now organize, tag and browse your photos, make and create photo groups and search through them fast as you can type. Essential for anyone who has lots of images to keep managed and maintained.

Trendsmap.com
Now you can mapp Twitter trends across the globe in real time. You can track them via name, area or country.

Domain Name Speed Benchmark
As the website says, you can’t optimize your DNS until you can evaluate it. Domain Name Speed Benchmark ascertains the exact performance of local and remote DNS nameservers.

Mozilla Firefox, Portable Edition
So many of us in the online community love Firefox being that it is such a powerful browser, but the problem arrises when you have to work from some other system. However, with this Portable Edition you can now take all your bookmarks, passwords and extentions with you.

Snipplr
Snipplr is a fantastic resource for developers where they can store and search for code snippets online.

Convert PDF to Word
One of the things we come across a lot when working with clients is the request to send them files as a Word document. With this site you can take your PDF’s and easily convert them into Word docs. Their sister sites can also prove useful!

HootSuite Social Media Dashboard
HootSuite can bring all of your social media networks into one place so that you can easily keep track of all your feeds in one convenient dashboard.

10 Minute Mail
A disposable mail service to help you get only the necessary emails by getting alternate and temporary email ids for Ten minutes. You can always extend the time if required.

UNDELET 360
Suppose you were in a hurry and you permanently deleted a file before its time. Now you can restore files accidentally deleted from your computer, digi-cam, or pen drive.

SnoopFree Software
If you don’t want to be prey to some spy software which might be giving all of your important information to some unsolicited person, than you might want to think about installing SnoopFree on your system to prevent it.

The Email Game
Getting overwhelmed by your inbox? Need a little assistance in getting motivated to tackle your mounting emails, then the Email Game app can help. Email is fun again.

SlimTimer
Time tracking without the timesheet is how SlimTimer bills itself. A comprehensive time management tool is how we would describe this useful tracker.

wridea
For anyone working in a creative arena especially, wridea is something of a must, but it can work for any number of online professionals. This is an idea management service complete with a collection of brainstorming tools right at your disposal.

Adeona
None of us could imagine parting with our laptops. But are you prepared to track your laptop if its misplaced, stolen or lost. If not, try Adeona.

Comodo SecureEmail
Comodo SecureEmail is a smart and simple way to send encrypted emails so that no one is able to intercept and alter your private secure messages. By making this one time cumbersome process a breeze to use, your email could be more secure in a matter of minutes.

Whats My IP Address
There are many reasons that we might need to or want to change our IP address as we surf and browse the web, but how do we make sure that our IP masking is working? There are also times we just need to know what our IP address is. Now just go to this website and it will show you what your current IP address is reading as.

BugMeNot
Do you hate registering in to websites just to read and check some sort of information? Well you can always use a shared, predefined set of login information collected for various sites that force users to register, by heading over to BugMeNot.

Left Logic – Specialist Web Development
Coders will more than likely be flipping over Left Logic, and they may not be alone in their celebrations. This is an HTML entity character lookup that is both quick and easy to use.

Todo.ly
When it comes to keeping yourself productive while online, Todo.ly, the simple online todo list can help.

CushyCMS
Whether you are a designer or an content editor, CushyCMS is for you where you as a designer define the editable content area and as a content editor, make required changes in editable sections without having to first master your programming skills.

Tor
Free software that is helpful in maintaining your online privacy, confidentiality and traffic analysis through its built in privacy features. If you are looking for a way to stay anonymous as you surf, then Tor can help you out.

Tweepi
Tweepi is a useful tool for any professional whose online existence relies heavily on their Twitter interactions. With both free and paid elements to the service, this tool can improve your Twitter experience.

Launchlist Lite
Launchlist Lite is prefect for web developers and designers who are looking for a virtual checklist that provides a comprehensive list helping you to ensure that your site is ready for launch.

x Paranoia mod 0.6.7
Once you have finished checking out all of that useful stuff, and you don’t want to share with your colleagues or anyone else sharing the system, this Firefox extension comes in handy. It clears all of your history, cookies, passwords and any other saved information with a few simple clicks.

(rb)

  

User interface design grows and evolves on a continual basis. To stay current, you need to keep an eye on trends, new resources, and new techniques being implemented and talked about. And you also need to try things out on your own, and come up with original ideas and implementations.

The tools listed below can help you do all of those things. Feel free to share any more resources you’ve found useful in the comment section below.

Pattern References and Libraries

Looking at the solutions others have already come up with for common UI challenges can not only help you find the right existing solution, but can also serve as the basis for coming up with something new and original.
User Interface Design Patterns
An online catalog of articles and visual solutions to common UI design problems. The use very loose categories, and also let you sort by tag or color:

Pattern Tap
A great resource to find commonly used design pattern inspiration. Pattern Tap breaks down UI elements into collections, and also tags individual entries for additional browsing options:

Patternry
Patternry puts the emphasis on finding solutions to common UI problems, rather than just providing simple inspiration:

Mephobox
Another great resource to find commonly used design pattern inspiration. You can browse by user or website, or check out collections based on individual design elements:

Prototyping, Mockup, and Design Feedback Tools

Any time you’re creating new UI techniques, you’ll want to create a prototype or mockup as a proof-of-concept before committing to a production site. And of course, you’ll need to test these new ideas, too.

Lumzy
Lumzy is a handy little online UI interface mockup and prototyping tool. It lets you create working functional prototypes, rather than just wireframes:

Mockingbird
Another interface mockup and prototyping tool, this time with online collaboration tools for working with teams:

UI Design Framework for Illustrator
A set of user interface elements and styles for Adobe Illustrator:

Android Asset Studio
A set of UI elements for developing Android applications:

Unique Mobile UI Design Elements
A free set of UI design elements:

Android UI Elements Set
A free set of classic Android OS UI elements:

OSX Leopard GUI Set
GUI Elements for OSX Leopard:

ALL In One Web Elements Kit
Everything you need for your web layout in layered PSD files:

iPad GUI Set
Everything you need for your iPad app layout in layered, vector PSD files:

The Pencil Project
A GUI prototyping tool plugin for Firefox:

Concept Feedback
Post your designs and concepts and get free feedback from the design community:

Landing Page Optimization
Get feedback from real people on your landing page’s 5-second impression:

Frameworks

Frameworks have become the backbone to virtually any complex UI. Here are a handful of frameworks other than MooTools and jQuery that you might not be familiar with.

DHTMLX
A JavaScript UI library and jQuery alternative that provides a number of UI widgets:

Dojo
Another JavaScript toolkit with a powerful set of base APIs as well as rich UI widgets:

Echo 3
A user interface toolkit that not only allows developers to create component-driven and event-driven API, but also client-side Javascript apps as well:

Midori
A super-lightweight JavaScript framework that packages up many commonly-used UI techniques. Uncompressed, Midori is only 51K, even with indented code:

Scripty 2
Another framework that with it’s newest release supports CSS transitions and transforms for Webkit browsers:

ZK
ZK includes over 200 ajax components, all ready to go:

jQTouch
A jQuery plugin for mobile iPhone application development:

Code Snippets and Scripts

Why reinvent the wheel? If there’s an existing snippet out there that does just what you need, you can likely find it on one of the sites below.

jQuery Labs
An enormous library of pre-made jQuery components for your website:

Snippet Library
A library of user-submitted and reviewed snippets and code tutorials from a variety of programming lanugages:

The Javascript Source
A handy guide of commonly used javascript and ajax snippets:

roScripts (beta)
Scripts, Snippets and Resources that can be voted on by users:

Snipplr
A good resource with lots of newer scripts and jQuery techniques:

Code Sucks
Javascript snippets with extremely detailed write ups about how they work:

HTML Goodies
Another jquery resource with excellent step-by-step documentation:

WebResources Depot
Included in their large directory of design resources is a number of very useful scripts and snippets:

Ajax Rain
Excellent library of snippets in a categorized and tagged format to make it very easy to find what you’re looking for:

Open Source Scripts
Providing Javascript snippets and code since 2004:

Mini Ajax
A collection of extremely elegant snippets:

Webappers
Lots of jquery components including a very good collection of image editing snippets:

Javascript Kit
One of the original javascript snippet libraries on the Internet:

Webcodr.com
A few very useful snippets for your website:

HTML Assets
A small collection of basic javascript snippets:

Miscellaneous Resources

Here are a handful of UI resources that didn’t quite fit in any of the categories above, but that we still felt were worth mentioning.

Slidenote
A simple little jQuery plugin that lets you create sliding notifications:

Editable Grid
With only a few simple lines of code, turn HTML tables into components that can be manipulated with advanced options:

Placehold.it
A service for easily generating placeholder images for your mockups:

Fillerati
A unique alternative to Lorem Ipsum. Generate blocks of real text for your mockup. Select to receive your text from a variety of public domain works:

qTip2
A jQuery upgrade for the qTip tooltip plugin. Easily make stylish tooltips for your site:

(ik)

  

The modern freelancer has a platter of tasks and responsibilities dumped onto their head every day. The masses assume the work-from-home lifestyle to be a refreshing break from the corporate office, though at times we see this is not the case. Freelancing shifts most power into the hands of designers and developers to create and work with whoever they want. It’s a big step towards running your own business and provides enormous potential in regards to income and professional experience.

Among the downfalls of this path can be poor time management and lack of any fixed schedule. After all, working from your home computer in pajamas every Monday can make temptations seem lucrative. Working for yourself and earning your own money is one of the most liberating acts available to us in modern society. In this post I’ll discuss a few ideas I’ve learned over my time freelancing to stay organized and on-task.

List Out Daily Objectives

Deviating from digital text to a form of pencil and paper seems ludicrous to some. There are so many benefits to storing your information digitally these days, why go back to handwritten tasks? A powerful question which shows just how advanced our society stands today.

Written word will always hold a concealed benevolence in that physical words can be easily manipulated, changed, updated or crossed out. I keep a small piece of paper near my desk and write out all tasks I hope to accomplish for the upcoming day and week. The physical activity of stepping away from the computer for some time to write actually helps clear my mind about what I need to do for that day. It allows for a small pause from our techno-enhanced world to reflect upon my personal goals and what I wish to achieve.

If you find task organization is easier via Internet tools such as Gmail’s Tasks pane then by all means go with your preferred method. Reviewing any set of tasks will boost motivation to complete them and hopefully keep you on track with your freelancing goals.

Keep the Motivation Flowing

Throughout the day it’s easy to break for some television or video games. Often it’s recommended to get away from the computer every few hours to rest your eyes and brain from the tasks at hand. Though it’s also important to understand the difference between resting and slacking off. You are ultimately the only judge upon your daily work. There will not be any managers or higher-ups to scold you for slacking. In the end you will just face a heavier workload or lose money, neither of which is a good scenario.

This is a good reason to keep your daily tasks list small. If you’re looking at 5 major projects listed in detail you’ll be inclined to procrastinate and put off such huge projects for a long time. If you’re stuck in this rut try breaking down larger tasks into small goals. Attempt to complete part of a project or work for a set 60 minutes before breaking.

It’s always good to hold a “bigger picture” in your head but it doesn’t benefit the day-to-day work mindset to be so focused on larger things. Understand that each work day is merely a means to an end towards a much greater goal, and Rome wasn’t built in a single day. Project scope is important to understand and the easiest way to keep motivation at it’s peak is to focus on your current conditions.

Set Realistic Timeframes

Unrealistic goals are the killer beast for many projects. This is another scenario where as a freelancer you won’t have anybody from above setting your goals here. Only you can understand how long a project will take and you have to the be the one quoting a timeline. If you find yourself putting things off until the last minute it may be smart to quote for an extra day or 2 of work. Granted it’s potentially smarter to get a head-start on the project and maybe finish early, but we don’t live in an ideal world.

Never plan for projects too soon to impress clients. This will generally backfire unless you know for certain you can complete their tasks within a shorter set of time. It’s often easier to give some padding and space between due dates. You’ll feel a lot more relaxed when approaching a task and will find focusing much easier.

Stress Hinders Productivity

I’ve read this many times and it’s constantly held true for my work. When I find myself in a place of deep stress or anxiety about a project the quality of my work suffers poorly. I can’t think of how many projects I’ve done under rushed terms and seen an amazing result pop out. This is almost counter-intuitive since the life of a freelancer is mostly hectic and stressful. Mindset plays a big role in this since how you work will project based on how you feel and analyze the situation.

Working freelance there will be times when you run into stress but don’t let anything get the best of you. It’s only work, after all. The world isn’t going to end if you can’t complete a 5:00PM deadline. Use such experiences as learning curves down the path to freelance enlightenment. Expand your knowledge for time management and figure out how to quote for projects in the future to allow for more time and less stress.

Creative Growth Period

Creativity doesn’t just stem from nothing. It takes a lot of mental processing power to churn out creative works of art in design, programming, writing, and all areas of business. The one place I don’t find my creativity soaring is front-face to a computer monitor.

I’m not saying I can’t be creative while I’m online or working on something. I do notice a much larger improvement in my mental capabilities if I take a short 30 minute break to go for a walk, or maybe cruise around downtown for a little while. Getting outside the house becomes somewhat of a luxury when you’re cooped in all day answering phone calls and replying to e-mails. Give some leeway in your schedule to allow for creative time.

As universal creators we all need a way to flush our mind from the activities of the day and replenish our creative fluids. Meditation, creative drawing, and other activities will also work well. A quick cat nap during the mid-afternoon has always worked wonders for me and replenished any lost energy. Find what suits you best and be sure to fit it in with your schedule.

Short vs. Long-Term Goals

Corporate lifestyles working for an office keep you focused on the day-to-day activities. This is great if you’re only working to collect a paycheck and couldn’t care less how the company advances. This attitude is the worst if you’re working as a freelancer and could spell a heavy downfall in your estate.

As designers we not only create digital works of art but must plan and sculpt our lives in a similar fashion. Always have a list of some larger goals you’d like to achieve. Whether it’s launching a new web application or taking a small vacation there has to be some type of incentive for you to get out of bed every day and work. Long-term goals will keep you feeling hopeful and, more importantly, deeply motivated to keep working.

When your focus shifts solely on goals in the long term you may never find motivation to attack your current problems. There is a gentle balance which freelancers must abide by. This balance stems from holding a knowledge about long-term goals and achievements but keeping primary focus on daily activities. In this sense you won’t get lost in a daydream reality and can really focus in at the heart of what you wish to accomplish. Goals based out long term also tend to change as time passes, so it’s much smarter to have a general idea of what you’re trying to accomplish while attending to current matters in the present.

Day is Day and Night is Night

Freelancers are all very passionate and driven individuals. This would make sense having the guts to quit a steady job and earn money based on how much work can be reeled in. Because of this we will often develop the idea that working harder and longer will process more orders and more money. This simply isn’t the case and could be detrimental to not only your business but your well-being. Although you may want to stay up all night developing for your latest client it’s smarter to fix yourself into a schedule for work.

Each day completed is always one step closer to the final goal. With this knowledge you should feel proud to get through each day reflecting back on your accomplishments. It’s also true that our creativity and energy will be drained after staring at a screen for 6+ hours a day. Give yourself some mental down time to forget about project works. I can promise when you wake up tomorrow all of it will still be waiting for your attendance.

Set High and Low Task Priorities

If it helps, you can organize sets of tasks and give each one in your list a priority. This could be based on importance of the client, due date, or even general interest in the project. It doesn’t matter how you order these but tasks with a set priority roster have a much higher chance of being completed.

This problem is common amongst freelancers who build up a huge to-do list but can’t seem to attack any single problem. Seeing such a huge list can be overwhelming and the entire process seems almost hopeless by the end of the day. I’ve found that having priorities gives me a way to just get started and disregard all my other thoughts. Once you can sit down and attend to a project without applying too much analysis on the problem you may notice after an hour or two you’ve already completed a large chunk of your task(s).

Shape Up Your Schedule

Find a way to live your life that works best for you. This is one of the main reasons I see people quitting their desk jobs and entering the profession of freelancing. Yet barely anybody takes advantage of this amazing resource to its fullest extent. Once every day is entirely yours to do with what you will, it seems like almost too much to take in. Try out a few different schedules for your work habits to see what fits best. Maybe you are most productive in the early morning so that is the best time for you to work.

Those of us who over-analyze everything will tend to enjoy this feature. Figuring out a new schedule to fall into can be fun and also enjoyable as you traverse the landscapes of your lifestyle. Mix things up a bit and see how it can affect your workflow and mentality towards freelancing. Maybe you can accomplish all your weeks’ tasks in only 3 or 4 days of work. If this is the case why not shorten your working week? Or maybe you’d rather work all 7 days for only a few hours. If this benefits you best then who is to say it’s a “wrong” way to live?

Conclusion

Truly the best place to answer these questions is from deep within yourself. You could poll 100 freelancers on their best practices and ideologies behind time management and there’s no guarantee any of them would fit into your mold. Take these ideas in stride and apply them into your daily life.

Over time you’ll realize what works and what doesn’t for your particular schedule. For further ideas check out past articles on freelancing and time management. Professional freelancing can be extremely rewarding if you enjoy working for yourself and building unique products. These are some of the most powerful time management tips I’ve learned over the years and have served me well. If you have other ideas or constructive suggestions feel free to share them in the comments below.

About the Author
Jake Rocheleau is an abstract web designer and Internet entrepreneur. He writes about new-age design trends and social media exposure in a large web 2.0 landscape. You can find him extensively throughout Google and follow his updates on Twitter @jakerocheleau.

(ik)