By Ján Antala

Supervisor: Assoc. Professor Michal Čerňanský

FIIT STU - Jun 11, 2014

Adaptive Web Design

We consider adaptive web design as an equal with creating a single Web experience.

We can adjust it based on the capabilities of the device and browser.

Website can detect available features, access sensors in devices and use them to enhance user experience.

Progressive enhancement

Adaptive web design is fundamentally Progressive enhancement, but it is being applied to a much larger and more diverse landscape.

We now have Web-enabled smartphones, tablets, e-readers, netbooks, watches, TVs, phablets, notebooks, game consoles, cars and more.

We also have many types of internet networks with different speed, latency and quality.

Responsive design

Responsive design is also one technique in an adaptive web design strategy.

Creating flexible layouts is important, but there are many more factors we need to think about.

It is also important to consider as well ergonomics, touch capability, other input methods, internet connections and many other features that can be detected.

Hypothesis

Adaptive input methods

There is no universal input for the Web. It is much more important to interface design than screen size.

The challenge for us over the next few years is not designing for one input but many.

We have been experimenting to control web applications using:

Speech recognition

Speech recognition is an experimental feature.

It is not a W3C Standard nor is it on the W3C Standards Track.

It is available only in Chrome browser and internet connection is required.

We have proposed a concept to control web applications using voice commands.

We have a multilangual support.

We can use voice commands to control the whole web application.

Speech recognition

We use continuous speech recognition to get an utterance string and compare it to the regular expressions.

Callback method is called when voice command is recognised.

Regular expressions allow us to configure a single command for multiple subjects.

'addToList': {
  'regex': /^to do .+/gi,
  'lang': 'en-US',
  'call': function(e){
      // callback
  }
}

Motion detected by device

Powered by always on sensor - gyroscope and device orientation API.

We have access to 3 axis rotation information.

source: developer.apple.com

Motion detected by device

We have proposed to use it as a replacement of the application scroll by touch events or mice wheel.

Based on the subtraction between starting and current orientation we can decide which direction we scroll and how fast.

Motion detected by device

Discovered severe issues across browsers.

Device orientation API does not comply with W3C specification!

We do not recommend to use it in the web applications.

Motion detected by web camera

We use a video camera stream and devide it into image frames.

Then we can detect a website user in the each frame using a HSV filter.

When we compare all pixels in two adjacent frames we get difference points.

When we apply this comparision to multiple frames we can calculate a motion vector.

Motion detected by web camera

We support 4 direction motion events.

Canvas allows us to use a hardware acceleration.

Web camera stream has a high power usage.

We need a proper ambient lighting. There can be detection issues in too dark and too bright scenes.

Adaptive web components

There are many commonly used web services (videos, maps...) that produce many requests and unnecessary web traffic even the website user does not want to use them.

To load an average YouTube video we need to make 9 requests and download 1517 kB of data.

Adaptive web components

There are also native mobile applications for that services with better perfomance and provide full user experience.

source: play.google.com

Adaptive web components

We can utilize conditional loading to serve the best experience
for the right context.

Adaptive web components

...and hide the logic behind the reusable web component.

$scope.options = {
  sensor: false,
  size: '500x300',
  zoom: 9,
  center: 'Bratislava',
  markers: ['Bratislava'],
  maptype: 'terrain'
};

<googlemaps class="google-maps" options="options"/>

Adaptive web components

We can save 3 requests and up to 1100 kB of traffic for an average Youtube video*.

We can save 62 requests and up to 5000 kB of traffic for an average Google Map component*.

Page load times for an average Youtube video.

Conclusion

Angular-Adaptive

Companion to adaptive web design.

https://github.com/angular-adaptive/

adaptive-speech

This module allows us to control web app using voice commands.

bower install angular-adaptive-speech

adaptive-scroll

This module allows us to control web app using gyroscope rotation.

bower install angular-adaptive-scroll

Gyrocopter

Gyroscope emulator, extension for Chrome Developer Tools

Available on chrome web store

cca 200 installs

adaptive-motion

This module allows us to control web app using web cam.

bower install angular-adaptive-motion

adaptive-googlemaps

This module allows us to conditionally load google maps.

bower install angular-adaptive-googlemaps

More libraries

adaptive-youtube

bower install angular-adaptive-youtube

adaptive-detection

bower install angular-adaptive-detection

speech-synthesis

bower install speech-synthesis