Tag Archive for: jQuery

Free Resources: Responsive jQuery Navigation Plugins

,

Sidr jQuery Plugin

Navigation has always been one of the most important aspects of a website’s design. If you can’t move throughout the site, chances are you won’t use it. However, navigation is also one of the few site design aspects with no tried and true solution. What might be right for me, may not be right for you.

Of course, there are some pretty good criteria you can use to judge what type of navigation you need. A small site can get by with a simple drop-down menu or the basic “three line” toggle menu. Larger sites have a much trickier task. They can use “mega menus” for their desktop version, but they will need another option for the mobile site.

Thankfully, most menus aren’t created from the ground up, so you can experiment fairly easily. Paul Andrew from Speckyboy compiled 15 jQuery plugins for navigation. They’re even responsive. Once you’ve found the one that matches the needs of your site, you can customize it and make it truly feel like a part of your website.

/0 Comments

jQuery Mobile 1.3 Released

,

Jquery-mobile-logo

jQuery Mobile just released their newest version as a stable release, working to completely incorporate responsive web design into its library. According to Web Designer Depot, jQuery Mobile 1.3 comes with several new widgets optimized for mobile devices including smooth panel overlays, dual-handle range sliders, and two different options for responsive tablets.

The new panel widget opens up many options such as allowing hidden information to be displayed is a smooth, attractive way. There are three transitioning modes, all controlled by a swipe of the finger, or press of a keyboard.

One of the most notable new features of the list view is autocomplete. When searching for your criteria, you simply have to start typing and it will do the rest for you, just like Google’s search bar does.
jQuery has been a favorite for simplifying complex JavaScript tasks, but it has had difficulty bringing that to mobile devices, especially with their separate implementations for different platforms which confused many designers.

Many have wondered whether they should be using responsive web design or jQuery Mobile, but the new version makes it clear that their answer is simply to use both at the same time.

/0 Comments

jQuery Plugins To Make Typography Easier

,

Source: Flickr

Web typography is blossoming right now thanks to new font solutions like @font-face and Google Fonts, but we still often feel limited by how much control we have over the typography in designs and publishing apps. There are some jQuery plugins out there however that are beginning to catch up to the other new font solutions gaining popularity.

Chris Spooner compiled some of the best jQuery plugins for web typography that help offer the precise control designers desire, and any designer concerned about their text can benefit from them.

The Lettering.js plugin is a super simple plugin, and that simplicity has also assisted it in gaining huge popularity. The plugin splits up text and wraps each letter in a custom <span> element giving you exact control over kerning, or even customizing CSS styles for individual letters.

Other plugins like FitText.js help solve issues that responsive design has created for typography. Responsive design changes the containers for text, which makes the text reformat to match the size, but that often makes headings and titles looking worse for wear. The FitText.js plugin allows you to scale your headings and titles just like responsive images, keeping everything on the same line.

My favorite plug Spooner has found is great for its name as well as its function. Bacon is a plug in the allows you to shape your text around a bezier curve directly within the design. InDesign has allowed designers to easily shape text around images, but HTML and CSS has traditionally made text flow in square blocks. Now, rather than using tedious and dirty HTML markups, Bacon makes it easy to easily, and cleanly, design your text around shapes with just a series of coordinates.

If you are a stickler about typography like I am, all of the plugins offered in Spooner’s article will seem like life-savers, as well as huge time-savers. Designers have struggled to take control over fonts and text since the invention of the internet, but only recently has web typography become fun rather than tiresome.

/0 Comments

The Pros and Cons of jQuery

,

 

jQuery is the biggest open-source, CSS3 compliant, cross-browser, JavaScript library available. What makes jQuery stand out is its simplicity and ability create Flash-like animations that are viewable on iOS, which doesn’t work with Flash. The popularity of jQuery is growing quickly, so we think it’s important you know the pros and cons of using it.

Pros

The biggest upside to jQuery is its simplicity. It takes only a little bit of programming knowledge to create crowd pleasing animations. It is also incredibly flexible because jQuery allows users to add plug-ins. If you don’t know how to do it in CSS, jQuery can help you.

It is also a very fast solution to your problems. While there may be “better” solutions, jQuery and its development team work to make sure you can implement jQuery quickly and effectively, which saves money. Those in the open Source software community support jQuery because it has great technical support, interacts well with other types of code, supports plug-ins and makes basic animation as easy as can be.

Open source software means quick growth and the freedom of developers to provide the best service possible without corporate red tape.

 

Cons
Open source software does have some problems however. There is no set standard amongst providers, which means if you or the developer do not have the money, time or ability to fix issues, you may never find a solution if you have a problem. Also, frequent updates mean community members are also unlikely to provide solutions.
There are also many versions of jQuery available right now and some are less compatible than others.
Also, jQuery’s lightweight interface may lead to problems in the future. Not being able to actually code can lead to many problems in implementation. Not knowing how to program means not knowing how to fix issues that arrive with jQuery and it doesn’t pick up the slack for you. While jQuery is seemingly easy and impressive, making it actually work can be much more troublesome. To make jQuery work, you have to keep up with community developments and realistically understand your skill level.

 

jQuery is  slower than CSS in many cases. Its simplicity is its curse, as it is not meant for client-side interactions. If you misuse jQuery, you get code that multiplies and multiplies until it is unmanageable, which means a few simple lines of code can quickly make maintaining your site a nightmare. The community is working to fix this issue but for now it is a very real problem.

Conclusion

While jQuery is easy, know if you can handle it before trying. It is meant to simplify tasks for skilled programmers and not to be used as a crutch for beginners. While the less experienced may be able to make jQuery work for them, they will most likely need a lot of assistance.

 

For more information on jQuery, look at Richard Larson’s article for webdesignerdepot.com.

 

/0 Comments