10 tools for the mobile Web

The ergonomic limitations, adjustment and execution in the realm of versatile Web infrequently include some complex made by the specialized details and few existing existing tools at present. In the interim flexible CSS situating modules, for example, “Flexbox” , or stable particulars in regards to the sort of data “retina” or transfer speed of a terminal, we are compelled to make ourselves our instruments and systems.To facilitate our work, here is a selection of 10 handy resources.The majority of the devices presented in this article consist of JavaScript bibliohèques and respond to specific missions.

Needless to say you that it is not advisable to use all these tools on a single project, for obvious reasons of performance.

Mobile Boilerplate

Like the famous HTML5Boilerplate , his little brother “Mobile Boilerplate” is a kit HTML, CSS and JavaScript base to start with its proposed mobile website

320 and up

320 and up is a lightweight framework dedicated to the philosophy “mobile-first” and automatically scheduled breaking points 480, 600, 768, 992 and 1382 pixels. Flexible and scalable, it can be coupled to Modernizr , Bootstrap, LESS and SASS as needed.

jQuip (jQuery in Parts)

Shares in jQuery is a JavaScript framework designed to be lighter and faster jQuery and boasting to be compatible and cover 90% of jQuery features. In the same vein,ZeptoJS is a jQuery-light rather mobile-first oriented or mobile sites dedicated (no IE support, for example).

Respond.js

Respond.js is a polyfill (alternative) very light and fast allowing older versions of Internet Explorer (IE6-IE8) recognize CSS Media Queries min/max-width.

ReView

ReView or “Responsive Viewport” offers the opportunity for the user to move from a “mobile” display to a “desktop” display, and vice versa, by changing the values of the window size ( viewport ) of the browser.

SelectNav

SelecNav.js is a tool to redefine the site navigation: on small screens, the original navigation (HTML list of elements) is transformed into HTML element Select interface, reputed to be ergonomically ideal on the move. SelectNav is a standalone script. There are other tools of this type, such as TinyNav , but they often require jQuery base.

Relocate (and minwidth)

As I mentioned in the introduction, magic CSS positioning as Flexbox are not yet compatible enough for massive use.

Relocate and minwidth are two scripts that overcome this lack:

• the first used simply to move items from one container to another depending on the size of the window.
• the second allows for conditional loads JS script or other resources, again according to the window size.

Animated scroll to top

This tutorial teaches you how to generate a button to return to the top with motion page. This button is understood that when you scroll the page. Note that you will find a different version of this feature on the site (in French) of CreativeJuiz.

Responsive Tables

Zurb offers a guided demonstration of a thorny problem to solution in responsive web design how to manage data tables (complex)?

Sequence

Sequence.js is one of many tools sliders (or slideshows) for responsive images on the Net. However, it has the distinction of being extremely comprehensive and offer three different models of very attractive display.