Mobile Website Builder

Responsive Web Design

“Media queries     
       are not enough!”

Responsive Web Design (RWD) is a set of principles / methods to adapt a website for all devices in order to give the best user experience, regardless of the visualization context.

Whether viewed from a computer, a tablet or a mobile phone, the website will automatically be adapted to fit the capabilities of the device used.

This recently very fashionable concept is not new. It makes use of the main accessibility principles promoted by the W3C (and several others) for many years.

Websites designed with an "elastic" layout (website width depending on screen size) already incorporated part of this simple ergonomic principle: Adapt the presentation to the screen size.

With the introduction of media queries, the conditional formatting has broadened its scope : Change the way various elements appear within the web page depending on screen size or device used.

But adapting the design is not enough, we must consider the capabilities of the device and the visualization context!

Pages and images weight

A mobile visitor has not the same brandwidth as a computer with DSL connection. He will not wait until a heavy page has been loaded. A web page intended for widescreen monitors (with pictures sized for these dimensions). Simply hide some elements for small screens (and only keep essential information) is a good thing, but it does not lightens the weight of the page. This is the page that must adapt, not just its presentation.

Interactivity

The possible lack of keyboard or mouse and use a touch screen change significantly the interaction between the user and the site. Navigation elements and action buttons must adapt to each type of event: "click", "tap", "swipe"... and should work in all circumstances: An element or a navigation menu visible in rollover will remain totally inaccessible for most mobile devices!

Navigation, ergonomics, features...

It would best be able to adapt everything depeinding on the device. To do so, some choose to make a site dedicated to each device family. Thus appeared the first mobile dedicated websites (so was born Pixmobi).

Responsive CMS

To make real "Responsive Web Design", you must first well recognize the visitor's device. Pixmobi knows how to detect each device type and knows technical capabilities of more than 5000 mobile devices.

Once recognized, you must adapt the layout, but also the page composition. In most CMS, you must code your layout yourself which increases the development costs.

Adapt the composition

With Pixmobi, it is much simpler: Technical adjustments are automatic (i.e.: no JavaScript) and for each page and/or each module in a page, it is possible to specify whether it should be displayed or not depending on the device used in order to dynamically change the website or web page composition.

Adapt the presentation

Media queries are not yet recognized by all browsers nor perfectly interpreted, Pixmobi allows you to create style sheets dedicated to mobiles, tablets and/or desktops et ainsi and then avoid the use of media queries to detect the device.

Adapt images and videos

Images (and videos) are also automatically adapted to the device screen size. Whether the image is set to be displayed in fixe size (pixel) or in variable one (percentage), Pixmobi automatically re-sampled image because he knows the screen resolution. This provides the best compromise between weight and image quality (and greatly facilitates the work of contributors who do not need to upload images in various sizes).
A caching system avoids to recalculate these images each time they are displayed.

Manage "mobile events"

"Touch move", "Swipe left", Swipe right", "Tap"... All touch screen events are recognized by Pixmobi, this allows to make a carousel scroll left or right by "moving" the finger on the screen.
Orientation change (i.e.: from portrait to landscape) is also detected especially to automatically update images (Ajax performed).