Reducing Downloaded Images with Flexslider

A jQuery-based method for avoiding downloading carousel images until they’re requested:

I’ve implemented something like this before, and would recommend making it fetch the “next” and “previous” images instead of the one actually being requested, to make sure the image is available when it slides onto stage, but an interesting method (using HTML Comments, rather than simply hiding via CSS, which doesn’t work the same everywhere).

Magnific Popup, A Truly Responsive Lightbox

A lightbox is one of those tools that work great on the desktop but often fail on small mobile devices. These days, finding a plugin that is responsive and that displays content right away is hard. For this reason, I created Magnific Popup, an open-source lightbox plugin focused on performance.

Shame they didn’t incorporate touch swipe events…

Fullscreen Layout with Page Transitions

A simple responsive layout with some fancy page transitions. The idea is to show four items initially and expand them. Some additional page transitions are added for inner items.

The layout and open/close works fine on my old HTC Desire with Android 2.3.5, but sadly the panel content does not scroll because overflow: auto; is not supported on this device… But otherwise, looks really beautiful!

Snap.js: For creating mobile-style navigation menus

Snap.js (GitHub: jakiestfu / Snap.js, License: MIT) also by Jacob is another dependency-free UI component. This one is for creating mobile-style navigation menus that appear when clicking a button or dragging the entire view. It uses CSS3 transitions, and has an event-based API so it’s easy to hook it into existing interfaces.

Capturing: Improving Performance of the Adaptive Web

Capturing sounds like exactly what is needed for the ideal bridge between having a single code base and a truly device-responsive site! Very interesting…

Indeed, a slight performance hit on the initial load, but then it caches the results to improve later loads.