10 really neat jquery plugins

Sharing some neat jQuery plugins with my fellow students and anyone else who is interested.

What is not to love about jQuery?  It is so nice for web developers these days that these nice little snippets of code are written and out there for all to use.   jQuery plugins can make your sites go from boring to WOW! with just a minimal effort.

Sliders

Sliders and carousels are so popular right now so it is good to have a few of them on hand

.  

One jquery slider that I personally love is Nivo slider.  It has really cool transitions and is super easy to incorporate into your website.  I recently used this on a Bootstrap site I built for a friend and it was really nice and worked well with the responsiveness that is Twitter Bootstrap.  Cool too is that it will resize itself based on the images you add so all don’t have to be cloned sizes.  Check out Nivo Slider here.

Another slider that is pretty cool and offers several options is Flexslider by Woo Themes/  

Yet another really nice slider is wowslider.  This is a free download.  On their site they say the following about their slider.

WOW Slider is a responsive jQuery image slider with amazing visual effects (Rotate,Blur, Flip, Blast, Fly, Blinds, Squares, Slices, Basic, Fade, Ken Burns, Stack, Stack vertical and Basic linear) and tons of professionally made templates. WOW Slider is packed with a point-and-click wizard to create fantastic sliders in a matter of seconds without coding and image editing. Wordpress slider plugin and Joomla slider module are available also.

In other words it is just too cool! 

Sorting

Super awesome plugin that gives you dynamic layouts, filtering and sorting.  I was looking through some plugins earlier and noticed this.  You see this effect on many web templates that are currently available.  Every time I see this effect I tell myself that I am going to buy one of those templates to learn it.  Now I have found the source!  Isotope offers their plugin to developers for $25.00.  It is truly magical and totally fits a need I have for an upcoming project.  It is open source so if it is a personal site you can use the code for free.  You can set up a masonry layout that can be sorted by your choice (maybe alphabetically or by category)  So cool!  Check it out!

Images

This is too cute!  Frame It lets you frame and animate your images for a lively view on your site.  

FrameIT works perfectly with static and responsive designs. It's ready to use on any device and comes with cross browser compatibility.

Layout

uSquare can be used for displaying team members, products, services, designs, blog posts or anything else that comes to your mind in a very interesting way.  Basically checkerboard style with image in one box and text in another.  Really cool layout.  On their demo, the images are grayscale and colorize on hover. When you click the image it slides opens with its box to display more info.

This is a very nice jquery tiles gallery.  It lays out masonry style with very nice even margins.  Each images can be clicked to enlarge like lightbox.  Gives you a uniquely different way to share images.  It is responsive and offers random complex grids with automatic image resize.

Radical Web Typography

Lettering.js can be found over on github and can help you create some really interesting and fun typography effects for your website.

With lettering.js, you can use kern.js.  You can just drag it to your bookmarks bar to install.  This is what they say about it.   I haven’t tried it, but it sounds interesting.

super-simple bookmarklet for designers that finally puts you back in control of your website's typography. Here's how it works: Add the bookmarklet to your browser and activate it while at your page. Then just click and drag to adjust your kerning, line-height, letter placement and more to your heart's content! When you're done, copy the generated CSS and use it in your own stylesheet, right there alongside Lettering.js.

Snow

Ok.  Maybe at Christmas time you want to add some snow falling to your images.  Check it out here.  This jquery plugin is called Snowfall..  How fun!

Considerations when building Responsive Websites

It is so important to actually think through how the various elements on your page will flow and be seen on various devices.  Oftentimes, you may even totally leave some sections out on mobile that are definitely included on desktop sites to make the site easier for the user to navigate.

In any case, you will want to consider which item should show first, second,  etc as the elements wrap on the mobile device.  What would make more sense to see first, second , third and so on.  If you aren’t careful when setting up your media queries, then your important information might just get buried way down a page and result in losing your user. So be sure to check, check, check devices to make sure you are giving the experience you want.

If you have a tab or navigation that needs to be accessed, remember that at least 44 pixels should be used so people are actually able to hit it and not too close to another so they aren’t hitting the wrong link which can be very frustrating.

Also don’t forget to change line height or you can get a very interesting mess!

Trent Walton brings up a very interesting thought about embedded maps on sites.  He says it is probably best to set the media query at 90% or your user may get stuck if the embedded map takes up the whole viewport.  I had not even considered that, but it is a very good point.  You can read his article here.

Though I haven’t studied this part yet, I read an interesting article on responsive design at smashing magazine .  They say

Through PHP and JavaScript, we can detect the time of day of the user’s current location. Liz Danzico serves an alternate style sheet to her readers depending on the time of day that a user visits her blog. If you visit it during daylight hours, the style sheet presents the text as dark text on a light background. You’ll see the opposite if you visit the website during the evening or night, which Liz does to optimize readability based on the assumption that your surroundings will have less light. This is responsive design.

That is cool, but for now I am focusing on the part of responsive design that affects layout.  However, I am looking forward to tackling some of that soon!