Archive for the ‘Browsing’ Category

It is so good that the web gets more and more lightweight with the use of modern web technologies.

Few days ago, WRD had shared the pure CSS gallery and now CSS Modal, a solution to create modal boxes with CSS.

CSS Modal

They can be used to display any HTML content and designed to work in responsive layouts.

JavaScript is used only for improving the experience (Esc key support, firing events..) and it is also available as a SASS plugin.

There are various jQuery plugins for filtering and sorting elements where the most popular ones are Isotope and Quicksand.

MixItUp is another great plugin to handle such tasks that deserves to be bookmarked.

While jQuery part decides which elements to show or hide, CSS3 transitions are used for animating them.

jQuery Filtering Plugin - MixItUp

The plugin plays nice with responsive + fluid layouts it is lightweight and works pretty fast.

There are many options for customization: effects, easing, their speed, etc. and it is very well-documented.

There are various jQuery plugins for creating Pinterest-like dynamic grid layouts.

jQuery.Shapeshift is a strong alternative to them with an an extra touch: the items can be drag ‘n’ dropped (uses jQuery UI).

jQuery Shapeshift Plugin

The drag ‘n’ drop doesn’t effect the grid negatively as the grid auto-fills the gaps when needed.

It also works on touch devices and responsive layouts.

The plugin comes with lots of options to set the margins, enable/disable drag-drops, customize animation and much more.

It is always hard to guess how users browse + how they perceive the content and flow of a website or web app.

There are tools to analyze these as much as possible and, using  methods like A/B testing, improving the usability is always possible.

However, it is always a great idea to guide users whenever they want. Nothing to lose on that for sure.

There are awesome jQuery plugins that ease guiding users and creating site/page tours for them. They are stylish, customizable and simple to use. Check them out:


Intro.js jQuery Plugin

A lightweight plugin that uses data attributes and has keyboard navigation support.

It focuses on objects beautifully and pretty easy-to-setup.


aSimpleTour jQuery Plugin

aSimpleTour uses a JSON data for all the configuration and content.

While a floating box helps managing the tour, tooltips (that can be positioned however wanted) help focusing on the elements.


Pageguide jQuery Plugin

Pageguide.js offers a very slick way to provide site tours.

The steps are highlighted beautifully and a sticky footer/header allows navigating through them while providing extra info about each step.
Read the rest of this entry »

There can be times where we may want to inform/guide users regarding the details/functions of the HTML elements on the page.

Chardin.js is a jQuery plugin which does that in a very chic way (inspired from the recent Gmail new composer tour).


It uses the information mentioned in “custom data attributes” of the given elements.

And, once triggered, it activates an overlay that focuses on the element and displays the info with visual guides (that can be positioned however wanted).