7 jQuery Plugins for Mobile Friendly Projects
If you're not designing and coding every single project that you do with mobile in mind, then you're probably doing something wrong. Even if you're not coding mobile first designs, they should at the very least be mobile friendly because, you know, it's 2017 and we're living in an ever-expanding mobile world.
Every project you create should look great on a tiny screen, be touch enabled, and, of course, function across all viewport sizes. If you find yourself needing help with any of the above, check out this list of great free and lightweight jQuery plugins that will help you to easily build more engaging and enjoyable mobile experiences for your users.
jQuery masonry is a plugin that will create grid layouts out of your page elements using jQuery. The plugin uses jQuery to arrange your items in a vertical grid, placing each item in the next consecutive open space. Define the width of the columns yourself, and the plugin pretty much takes care of the rest.
For many developers, the hardest or most aggravating part of building a responsive, mobile friendly site is building a navigation that is equally as responsive and mobile friendly. Desktop users are accustomed to their navs being a long, horizontal line that links them to other sections of the site, but that type of design doesn't look great on mobile. The Responsive Nav plugin will easily solve all of your mobile navigation woes, as the plugin provides solutions not only for mobile navs, but for tablet navs as well.
Sometimes when a webpage is viewed on a mobile device, certain elements have to get smaller to fit within the viewport. When elements get smaller, they don't always hold the same amount of content as they used to. The jQuery dot dot dot plugin is a free, lightweight way to handle this potential problem. The plugin can be used to add an ellipses (...) to any container whose content exceeds the size of the container.
4. Lazy Load
Lazy Load is a plugin that can be used to improve load time of your mobile pages by only loading images that are in the viewport. This can really speed things up, because the user won't have to wait for the images that aren't even in the viewport to load before the page loads.
5. Isotope
Isotope is a cool, fun plugin that you can use to structure a dynamic, mobile-friendly page. This sort of dynamic structure is something that can't be achieved using CSS, and this plugin gives you a lot of options for how you'd like to display your elements in a mobile friendly way.
6. Flex Slider
If you're implementing a slider functionality on a mobile project, it's a good idea to make sure that the slider is mobile-friendly and touch-enabled. The FlexSlider plugin helps you to easily create a slider that meets both of those requirements, complete with polished animations and widespread browser support.
7. ResponseJS
ResponseJS is a lightweight plugin that aids in the creation of responsive sites by allowing you to easily swap blocks of code based on breakpoints, and it serves images progressively to improve page load time.
