Targeting a Wide Range of Devices with Your Application (2 of 4)
< Previous post of this series
< Next post of this series
Continuing from the previous post, let’s look at some options that are available to us:
Option 1 – A single Web Application
This one size might not fit all, but most. Web applications can be accessed by any device that has a browser. A web application is created, keeping a certain minimum screen resolution in mind to target, say desktop browsers. But it can be accessed from any device that can run a browser.
So has this basic minimum option targeted all devices? Maybe not, depending on what kind of application are we talking about. Is it a line of business application or a static content website (blog / wiki) or a simple productivity tool like a TODO list? Also, is the application really usable across all the devices and form factors? Probably not.
Improvements in Option 1 – Adaptive Web Application
Taking advantage of modern JavaScript libraries, HTML5 and modern browser capabilities a web application can be made really slick. It can adapt to the platform (device, location, form factor) almost as good as an app native to a device.
The application can be pushed further by adapting to the device on which it is being viewed. There are various techniques that can be used to make the web application look native to the device:
Responsive Web Design (RWD):
RWD is a designing approach aimed to provide an optimal viewing experience with a minimum of resizing across a wide range of devices (from mobile phones to desktop computer monitors). Using this approach, the web application would identify the visible portion on the page affected by the monitor resolution (aka Viewport) and resize itself, change alignments, change icon size, etc. most of this is achieved with CSS and CSS3 media queries.
Adaptive Rendering (aka Adaptive Web Delivery):
The adaptive rendering techniques refer to rendering different version of a page or part of a page for different devices or platforms. It checks the the user agent information to identify the operating system version and the browser used to decide which version of the page needs to be rendered. Imagine the app has 4 versions of a view file for menus. One each for iOS, Android and Windows phone along with a default one for the rest. The file to be rendered will depend on the device. Any number of devices can be targeted, by creating another version of the file for the device.
The web application can have the same UI theme, buttons, icons and navigation that the device platform (say iOS) provides giving a much richer user experience. ASP.NET MVC framework (version 4) came up with Display Modes making it easy to achieve.
While RWD takes Viewport into consideration and works on the client side (browser), adaptive rendering looks at the OS and device and decides what should reach the browser. Both these techniques should work together to target a wide range of devices and browsers.
So now in this option, the application is being accessed from a wide variety of devices and some targeted devices get targeted content. If a targeted content for the device is not available, it gets the standard / generic content.