Freetile.js – A jQuery plugin that will help you Optimize the Screen Space

Optimal use of screen space is one of the best practices when you design a web page. This is more effective when you are practicing responsive design. There are myriad of ways through which the screen space can be optimized but auto-arrangement of the elements within a parent container, is one of the most popular of all. It is not only efficient, but when executed perfectly, it can create a visually appealing as well as fully-functional lay-out.

Image Source: http://yconst.com/web/freetile/

In responsive web designs, there is a certain way to arrange the content, as per the size of the user’s device screens. Auto-arrangement of the content is one of the sensible things to do, since it lessens the amount of time you would spend in customizing breakpoints for each page and element.

Auto-arranging the content can bring in great benefits for your website, especially those that demand periodic changes in content, such as an e-commerce stores or a blog. Imagine a situation when our clients suddenly decide to integrate shorter or longer blog posts suddenly. Huh! None of us can really endure the pain and time of getting into your website to adjust the breakpoints, codes and layout.

Rather, doing everything from scratch is pretty time-consuming and at times, it becomes difficult for the designers who normally are not geeky enough to know about the intricacies of web programming and coding. Instead, using pre-existing plug-in or framework would make sense. JavaScript (jQuery and other related script) are cross-browser compatible. It is a better alternative for creating a responsive layout.

Recently, Freetile.js, a jQuery plugin has evolved as an independent open source project enabling the designers to organize the content in a responsive layout. Freetile.js allows using of elements of any size without a fixed-size column grid. This liberates you from the trouble of specifying a fixed-column width for your elements. You can also customize the algorithm which determines the insertion positions for each elements; enabling you to provide preferences to proximity and alignment.

Freetile.js boasts a smart animation routine which enables you to differentiate between the elements that need to be animated from the others. You can also easily specify the animation within the code. Freetile.js is simple to use. As a matter of fact, you need not be a JavaScript wizard to use Freetile.js, rather, you can figure its usage in no time.

Have you deployed Freetile.js yet? Feel free to comment.