Progressive, Responsive, and Adaptive aspects of ICEmobile

ICEmobile components use a variety of approaches to tailor themselves to a specific desktop or mobile browser. (Note that the approach that is best for a framework like ICEmobile that has server-side capability is often different from a pure HTML approach where server-side code is difficult to modify.)

The most efficient is to generate simple, portable markup and serve client-specific CSS and images. The markup is easily manipulated via Ajax in the browser, and the styles and images are effectively cached. This clean separation is also highly maintainable for both Java developers and Web designers. Here, mobi:deviceStylesheet is used to include client-specific CSS, which in turn can reference client-specific images.

Moving up the stack, we see that ICEmobile components tailor their markup output to the client. This is efficient and does not expose the application developer to client-specific issues. Almost all ICEmobile components and tags take this approach.

At the next level, the application can tailor its output in a client-specific way, either through separate pages, or switched inclusions or rendered regions. This is efficient at runtime, but can be difficult to test (since the easy-to-debug desktop browser receives different markup than the difficult-to-debug device) and can be difficult to maintain, since the application effectively has many different code paths. mobi:viewSelector allows the application developer to take this strategy.
(Sometimes called “Adaptive design”, see Adaptive Web Design by Aaron Gustafson)

Finally, the appearance of the page can be adjusted or re-flowed within the browser. This has the advantage of making best use of local information such as browser capabilities and orientation. However, it requires the most modern browser features and can be less network and server efficient (since markup may be sent to the browser but then hidden and never used). Use of this strategy is on the roadmap for ICEmobile layout components, with consideration for supported browsers.
(Sometimes called “Responsive design”, see Responsive Web Design by Ethan Marcotte.)

In addition to appearance, the above strategies can also be used to tailor application behaviour. For instance, event handlers can be added to buttons in the browser, resulting in Ajax behaviour for browsers with JavaScript and standard form-submit behaviour for browsers without JavaScript. This approach can be seen in the icemobilespring demo which uses jQuery in this fashion.
(Sometimes called “Progressive Enhancement”.)

To summarize, ICEmobile is highly “adaptive”, makes use of “progressive” techniques (particularly with the Spring integration), and will be including “responsive” techniques in future components and as supported by prevailing browsers.

Leave a Reply

Your email address will not be published. Required fields are marked *

two × 5 =