Además jQuery Mobile ha sido diseñado y testado completamente para funcionar no sólo en teléfonos móviles, sino para que funcione también en tablets e incluso en equipos de sobremesa. Por tanto , más que pensar en “mobile only” , pensemos en “mobile first”. De hecho, en nuestra próxima release vamos a empezar el proceso de integrarlo más con jquery UI con el objetivo de tener incluso más convenciones y código compartido. Las UI tabs serán las primeras en ser portadas a jQM y al sistema de theming.

Ante la pregunta “Qué debería usar RWD o jQM?” que se nos hacia en los foros , nuestra respuesta era siempre “ambos”. Piensa en jQM como un conjunto de elementos para interfaces gráficos que soportan eventos táctiles y que han sido diseñados para ajustarse a un diseño responsivo. Incluso con la versión 1.0 , nuestras demos y documentación ya daban ejemplo utilizando media queries para tener una experiencia responsiva, pero hemos decidido que podiamos hacer un mejor trabajo ayudando a utilizar las técnicas de diseño responsivo en sus propios proyectos.

Nuestro objetivo con la versión 1.3 ha sido educar a la comunidad en el RWD redactando documentación al respecto: responsive documentation y con demos que explican los conceptos claves , además de insertando nuevos widgets como tablas responsivas , paneles y grids que hacen más fácil desarrollar aplicaciones y webs responsivas.

Atando breakpoints

Las media queries no es fácil que la incluyan los frameworks javascript dentro de su código debido a que responsividad siempre es en base al contenido específico de cada website. Por esta razón, es imposible idear una sola característica que funcione a todo el mundo.

Por ejemplo , en el widget de tabla responsiva necesitamos seleccionar un screen width para poder cambiar la presentación tabular y apilada por el modo reflow. Ese width dependerá completamente tanto del diseño (tipografía y otros elementos de layout) y el contenido (número de columnas , content length) . Para tratar con esto, en los docs de cada widget responsivo , invertimos mucho tiempo explicando cómo escribir código que se ajuste a tus necesidades particulares.

Clases breakpoint al rescate

La otra cara de la moneda es que la gente utiliza un framework porque quieren hacer las cosas de forma más fácil y es duro explicar que un diseño responsivo no funcionará hasta que escribas una buena cantidad de CSS. Asi que el compromiso que hemos tomado con los widgets responsivos es incluir un simple breakpoint llamado “preset” en el CSS structural que esperemos que sea útil en la mayoría de las situaciones. Este breakpoint se aplica añadiendole al html del widget la clase ui-responsive para así activar el breakpoint

Pensamos que esto era una buena solución entre conveniencia y educar a los colegas en cómo utilizar meia queries.

Nuevo Widget: Panels

Uno de los patrones UI más comunes en estos días son los paneles estilo Facebook que se abren para mostrar el menu, formulario u otro contenido. Invertimos mucho tiempo prototipando distintas ideas y estamos contentos con nuestro nuevo widget de panel: new panel widget. Los panels pueden ser posicionados a la izquierda o a la derecha de la pantalla y pueden ser colocados con flexibilidad en el código fuente.

There are three different ways a panel can animate open. The default reveal display slides the page away to show the panel beneath, the push display animates both the panel and page, and the overlay display places the panel on top of the page. Panels can be closed by swiping, tapping onto the page, or hitting the Esc key on the keyboard.

Para hacer este widget responsivo , es fácil utilizar media queries que hagan que el panel permanezca abierto en anchos grandes y se auto-cierre cuando haces click en el contenido central. Esto

To take this widget responsive, it’s easy to add media queries to make the panel stay open at wider widths instead of auto-closing when you click on the page content. This makes this panel more like a collapsible column, like the folder list in a mail program. We’ve included a breakpoint preset to add this behavior by adding a class to the page container. Here’s an example of a typical panel setup with a left nav panel and right panel with a form.

For such a simple looking widget, panel were really challenging to get right across all our platforms. We ended up going through four different re-factors leading up to beta in order to get the animations as smooth as possible and are really happy with the result.

Panel API docs >

New: Responsive tables

There are a lot of possible ways to handle tabular data in responsive designs. We’ve decided to tackle two different responsive table modes in 1.3, each with its own strengths and uses.

The reflow table mode swaps to a stacked label/data style presentation at narrow screen widths and best for situations where the content length is fairly long and comparing data across rows in a table is less critical. For example, a product or movie list might be a good choice for reflow mode.

Reflow table API docs >

The column toggle table mode hides columns at narrower page widths according to a priority you set on each column as a sensible default to ensure that the table fits on-screen. A dynamically generated column chooser popup allows the user to select which columns they want to see for full control. This mode is best for situations where comparing data across rows and columns is critical. For example, a complex table of financial data might be a good choice for column toggle mode.

Column toggle API docs >

We’ve built some cool demos showing how you can customize these basic table tools to make a comparison chart or present complex financial data with grouped headers and more.

New: Range slider

Adding support for dual handle sliders for collecting range values has been a popular request and we’re happy to add this new widget in 1.3. The new dual handle range slider starts with a pair of HTML5range inputs and essentially two sliders with a shared track. All the normal slider options work with ranges: mini sizing, theming, etc.

We’ve also refined the size and styling of the inputs that accompany sliders to make them integrate better visually and leave more room for the slider. The inputs are now mini sized with bold text and no border or spinner arrows (seen in desktop browsers).

All sliders now respect step values smaller than whole numbers which is great for scientific and financial applications that need inputs that capture values to the 0.1 or 0.01 level of accuracy. Slider behavior has been refined so dragging will snap to the closest step position to provide better feedback.

Range slider API docs >

New: Responsive grids

The cornerstone of any responsive design are responsive grids. We believe that the best grid systems are content-specific and not something that can be easily generalized into a framework but for people using our simple grid blocks, there are now detailed instructions on how to create your own media queries to adjust grids at various breakpoints.

We’re also shipping with a present breakpoint that can be applied by adding a class to your grid wrapper. This will apply a CSS breakpoint at narrower screen widths that stack all the grid blocks instead of floating them. This is a simple way to make your grids a bit responsive and fit better on phones.

Grid API docs >
Responsive grids >