ICEmobile and Responsive / Adaptive Web Design

Responsive Web Design

There are a lot of definitions flying around the web as to what Responsive Web Design is and how it relates to other popular design methodologies.  At its most general level, Responsive Web Design is about designing a single web page with the same content that changes its behaviour and layout based on the nature of the client device (desktop, tablet, smart phone) accessing it.  Responsive Web Designs rely heavily on CSS3 and JavaScript and promote the concepts of a “fluid-grid” based layout, flexible images through dynamic resizing and the addition of various media queries and listeners. In Responsive Web Design the page content as described is common to all the target devices (i.e. the same content and files is sent to desktops, tablets and smart phones). The client browser relies on the advanced JavaScript and CSS3 descriptions so that as the browser window is resized to adjust for the different client screen dimensions all the media and content is resized and re-laid out to deliver the best user experience possible.

ICEmobile can be easily used in conjunction with Responsive Web Design methodologies to deliver a  richer, more featured enhanced product with less effort than would typically be realized by Responsive Web Design solution on its own.

Responsive vs. Adaptive Web Design

“Responsive Web Design” is closely related to, and some say a derivative of  “Adaptive Web Design”.  While both methodologies strive to achieve similar end objectives they do so through different technology implementations and strategies.  The end result is a slight difference in the delivered benefits and trade-offs of the product.  It should be noted that while ICEmobile embraces many of the Responsive Web Design techniques and can certainly enhance the end result, it is more closely technically aligned with Adaptive Web Design concepts.

Adaptive designs and ICEmobile are generally based on a defined set of rules based on device capabilities as well as screen sizes.  Advanced server-side detection is employed to identify the nature of the device accessing the page, and the application automatically tailors the content output to deliver the “best” version suitable for that particular device.  We call this auto-device detection and auto theming and it is a key feature of ICEmobile.  The outputting of tailored content is in contrast with the Responsive Web Design approach where the output content from the web site or the web application is the same for all devices viewing it, and any necessary content adjustment or reflowing occurs at the client browser.

Content Management

One advantage this method has over Responsive Web Design techniques pertains to content management.  While Responsive Web Design allows for the fluid resizing and reformatting of the content for various screen sizes the content viewed is the same across the different devices.  Adaptive Web Design not only accommodates the resizing of content, it also allows the content itself to be modified across devices.  For example using device targeting, web pages can be adapted so that multimedia video or high res pictures are delivered to desktop users but smaller images/thumbnails and no video is delivered to lower end cell phones.  This provides developers with greater control over the trade-offs between content and bandwidth being delivered to their mobile users.

Legacy Browser Support

Responsive Web Design relies heavily on CSS3 and JavaScript capabilities to deliver fluid resizing and reformatting of content.  Typically these technologies are easily accommodated by today’s smart phones and tablets, all of which come equipped with very capable and modern browsers.  The same cannot be said however for desktop environments.  Many of ICEsoft’s Global 2000 customers have legacy applications and desktop environments that are often restricted to using older browsers that are less efficient at processing large amounts of JavaScript or incapable of supporting CSS3.  In case of applications requiring the deliver of content across a range of modern and legacy environments and browsers, the use of Responsive Web Design techniques may not be appropriate.  In these situations, Adaptive Web Design techniques such as those employed by ICEmobile are less restrictive and can be reliably delivered across a wider range of platforms.

Web Application Vs. Web Page

Web-based applications often have to deal with challenges relating to integration with third party technologies, scalability, high reliability, security etc. that conventional web-page design techniques don’t address. While ICEmobile leverages both Adaptive and Responsive Web Design techniques where appropriate, it also delivers a broader range of capabilities and features that facilitate the development and deployment of web-based applications.  ICEmobile is a complete application framework that deals with complex integration and infrastructure issues so designers don’t have to.

In addition to delivering a suite of rich desktop and mobile components that developers would have to otherwise develop or support, ICEfaces also provides more advanced features such as native component access, cross platform integration and collaboration through cloud-based push, adaptive heart-beat functionality to accommodate weak or intermittent mobile connectivity, and direct to dom rendering that serves to reduce bandwidth requirements and reduce front-end start up times for mobile devices.  While these features may not represent immediate design requirements the ability to “future-proof” an application and ensure they can be easily added as future road map require is extremely valuable.

Client Vs. Server

While Responsive Web Design typically represents a more client-centric approach (CSS3-based, JavaScript centric), Adaptive Web Design techniques can also be extended to accommodate server-based operations such as those leveraged by ICEmobile.   This capability allows organizations to realize additional benefits such as greater application security; re-use of existing infrastructure, design tools, and in-house skills; being able to design using Java vs. JavaScript; and minimizing bandwidth requirements and start-up times.

Summary

  In constructing ICEmobile we picked and chose from the best the various design methodologies have to offer and integrated them together so that designers didn’t have to. There are trade-offs however to the different design approaches as you make your decision there are a couple of things you might want to keep in mind.

  • ICEmobile can be used in conjunction with either Responsive or Adaptive Web Design Methodologies, and offers material enhancements to both.
  • In developing ICEmobile we adopted the best elements of each so that designers don’t need to worry about specific details.
  • ICEmobile allows you to design in Java not JavaScript and HTML(5)/CSS(3)
  • ICEmobile will allow you to better secure your applications.
  • Are you looking to develop a web page / site or a web based application?  If the later you may need to consider the advantages an application framework will deliver.
  • Give consideration to any requirements you might have with respect to legacy environments or browsers dependencies.  ICEmobile and ICEfaces allow you to service both modern and legacy environments.
  • Including ICEmobile allows you to future proof your applications against the possible need for collaboration features, native component integration, cloud deployment, cross platform interactions.
  • Understand if you are going to ever want to modify content being deployed to different client platforms or if it is acceptable just to rescale and reformat the content.  The server-side capabilities of ICEmobile allow developers to tailor the output to a given device more effectively than a pure HTML approach.

Good Luck!

Leave a Reply

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

14 + 8 =