You can read the first part of this article here
A3. Agile
The third A is Agile. The world is difficult and sometimes it is not enough to be simply accessible and adaptive to some different, but general parameters. A site must be flexible and the making of technological decisions must be flexible too.
Image may be NSFW.
Clik here to view.
Actually, I must confess, that previously it was quite difficult for me to keep from the use of word “flexible” in this article, but it was worth it and further I’m going to explain why.
If adaptation of site is based on its availability, then flexibility, in its turn, is based on adaptations and also extends availability. Although it may seem that it is simply a word-play, there is a certain difference between adaptivity and flexibility.
Adaptation, as a rule, is limited and supposes the change of original appearance or behavior in reply to some turndown of environment. For example, our eye adapts oneself to the different level of luminosity or distance to the examined object. Behavior of many living creatures adapts oneself under the change of temperature condition. In the same way a site adapts oneself to the determined screen sizes or browser possibilities.
Flexibility shows up in critical points, when gradual adaptation is impossible, more senseless or a range of made alteration is such that distance between two extreme points becomes too large and a way between them breaks on separate scenarios. As a rule, flexibility is characterized by overrun and changing of technological platform.
Flexibility is not something new and many of you are acquainted with it from the practice. Further I’ll tell you about a few of such scenarios. Now let us go back to the present time and the near past. Modern mobile browsers are quite good with the ordinary web sites, allowing to co-operate with them with the use of scaling.
The adaptation considered before allows to improve this scenario, adjusting the appearance, but still it is the same site. Decision which in today’s practice is used more frequent can be found in the separate mobile version of a site.
It can be considered differently, but one of viewpoints consists in technological flexibility of a made decisions. If platforms and concrete required functional are strongly differ on each of them, then the adaptive scenarios have too large tension and it’s time to break them. And nothing is wrong here.
In fact, flexibility is the thing that takes place with adaptation in a limit. Technological flexibility is the adaptation of thought the aim of which is an effective task solving. In particular, it can lead both to the search of compromises in the used technologies, and to the appearance of scenarios which are not cross platform to a full degree.
For example, a well-known game Angry Birds, created on HTML5, uses Adobe Flash for reproducing the musical accompaniment and the audio effects. It may seem strange, however, this normal, flexible technological decision allows using the technologies, which are accessible and work quite effectively in the wide range of browsers. In this case developers can face with a variety of problems when reproducing audio via audio -element in HTML5 (by the way, this was not Internet Explorer, but another popular browser ;) and flash was used for the decision of this task. It is an example of flexible combination of technologies without involving of the religious feelings.
Other thematic example is Kindle Cloud Reader from Amazon. This browser application allowing reading books straight through a browser, thus it works even offline. I’ll mention about this moment later. Now we are interested in technological flexibility.
I don’t know about all business details of Amazon’s motivation but, eventually, the company’s aspiration for the co-operation with end users via browser passing the application shops shows up obviously in Kindle Cloud Reader. If you will look at a primary audience, you’ll see that it’s the users of iPad and tables on Android.
In the next moment, when thinking on a technological decision, you will discover that you need a technology for a local storage, allowing saving the files on user’s device for further reading. Here appears examination of the available technologies, which can be quickly resolved due to the circumstance that both platforms are united by the browser and, although browsers are different, both are based on the Webkit engine.
Image may be NSFW.
Clik here to view.
Webkit supports WebSQL Database technology, allowing doing the right thing: to keep data in a local storage. In this moment, if you are acquainted with new web-standards, you might get a clue. Actually, on the W3C site with red letters in a box and additionally in white on a black background with yellow circles it is written (see the pic. above), that the development of this technology is stopped. In reality, today W3C and browser developers look toward the alternative technology – IndexedDB (and Local Storage for relatively simple scenarios).
All of it in any way didn’t prevent the developers from Amazon to use the accessible technology at the moment of development, in spite of its undefined future status and limited support in other browsers.
It is flexibility in technology and in some way it’s even boldness in decision-making: to do first of all a product for a key audience and not trying to lean over backwards, to do a decision which will work for all the potential users. Flexibility acknowledges compromises.
Finally, another example of flexibility display. In IE9 appeared a possibility of fixing a web site on a taskbar with an additional functional – besides the icon of application or site, it is a context menu (static and dynamic), application management with the help of the buttons in the window of preview and notifications for users.
Although this technology is accessible only in IE, it allows extending the functional of a site with a little effort, making it more accessible and adaptive under additional possibilities. It is a flexible expansion of UX user in co-operating with a site.
Flexibility is not a question of technological cleanness (this question remains always actual, although sometimes it is necessary to make compromises), it is a question of the use of existent possibilities and efficiency of task decision.
Often we get in a situation when some new technologies appear and we are in a great want of using them, but, looking back on the existent ecosystem of browsers, we are forced to pull ourselves up and stop. Flexibility looks toward the ideas of Graceful Degradation, allowing using modern decisions if it is possible, and aiming to provide alternative scenarios where it is impossible.
It is so-called fallback -scenarios, when, for example, in old browsers a concrete unsupported (as a rule, not because browsers are bad, but because they are old) mechanism will be realized through other accessible technologies:
• HTML5 Video ⇒ Flash | SL ⇒ File
• Web Sockets ⇒ Flash | SL ⇒ Comet
• Canvas ⇒ Flash | SL
• SVG ⇒ VML | Flash | SL
• …
In some cases the emergent difference between a modern level and the level in old browsers is filled by means of so-called Polyfills (see the article of What is a Polyfill? by Remy Sharp).
And sometimes it is simply needed to have boldness to cut off a part of browsers’ ecosystem, however, not forgetting about the respect to their users. It is actually important.
And, certainly, don’t forget about taking the approach of Feature Detection and Modernizr libraries.
A4. Async
Image may be NSFW.
Clik here to view.
The fourth A is Async. A site must be adapted under the asynchrony of our world and of its web-part in particular. It may seem that asynchrony is something quite different from all that we’ve discussed before, but, actually, it is not the case.
If the site works accordingly to the behavior of asynchronous nature of all life cycle of its work that was put in it, it means that it’s adapted to the time delays and spatial gaps. Certainly, adaptation is complemented with flexible ability to take into account possibilities of different devices and software solutions, and aimed at the improvement of site’s availability for end users.
The problem of asynchrony arises in a few key points about which it is always important to remember:
• Interaction with a network
• Interaction with a server
• Processes in a browser
• Interaction with user
It is important to understand what takes place in each of these points in case when interaction is being violated, or with appearance of delays, and how these points influence on each other.
For example, what will happen to a site, if the internet disconnects? The obvious answer that would have appeared previously – a site will not work. Today we have a better answer- a site can remain functional, but will not get updating from a network and won’t be able to send queries on a server. Look at the Application Cache from HTML5 and local data storages, they open an enormous amount of new scenarios.
What will happen to a site, if there is no answer from a server for a long time? Perhaps, it simply went down, or the timeout occurred? Or, maybe, simply the connection disappeared temporally? On all these questions a site (or application) must be able to give answers with concrete behavior in the emerged situation. Or another variant: it is needed to support permanent connection with a web server for a regular messaging. It’s possible to use old good AJAX and technologies on its base, and also to look at Web Sockets where this technology is already supported today.
What, if you need to do some calculation, processing of data on a client’s side or, for example, local file uploaded through File API? All these processes potentially can lead to blocking of UI stream, what is extremely undesirable. Technologies of Web Workers and Web Messaging, allowing to start implementation of tasks on JavaScript in separate streams and to carry out co-operation between them, can become a way out of the situation.
Of course, all such questions do the decision-making more complicated, but a user wins in the total. The thing is worth the effort.
A5. Attractive
Image may be NSFW.
Clik here to view.
And finally, the fifth A is Attractive. A site must be attractive for a user. And, it is also another look at the questions of availability, adaptivity, flexibility and asynchrony. User is attracted by a decision which can be adjusted to his needs and be comfortable to him.
Of course, it doesn’t mean that for every concrete user there must be necessarily some magical adjustable mechanisms in the sites and web-applications (although, that would be really good). Most users have similar scenarios of how they use this or that application or web site and these scenarios can be fully clustered and determined.
Internal beauty and harmony of a site requires adaptation under person’s psychology. The competent use of audio and visual (or multimedia) possibilities of modern technologies is adjustment to everything that attracts all of us in the surrounding world. The main thing is not to overdo and to know where to stop.
Here come to help you some graphic possibilities of HTML5 – Canvas and SVG, multimedia HTML5 Audio and Video, and enormous amount of new CSS possibilities, including typography, animations, transformations and different effects.
For example, look at the comics for Disney’s Tron done by means of HTML5 Canvas. It’s already not simply sequence of pictures, but the whole interactive presentation which a spectator can co-operate with. Completely different level!
At the same time take a look at the Never Mind the Bullets comics. It is also an interactive scenario, but this time CSS3 possibilities are used with plural backgrounds, allowing creating the effect of parallax. It really engages a spectator in the process as the events unfold.
Finally, I simply can’t omit the new Bing feature, if previously it was in everyday cool and unique photos, then now Bing periodically pleases us with some nice backgrounds on HTML5 Video.
Attract a user, make his trip enthralling.
5A.Conclusion
We are on a finish line. 5A is a not panacea, world-view or a system of worship. It is an aspiration to do sites better and more effective, aspiration to find reasonable balance between universal availability, technological perfection, contemporaneity and prudence, including the decision of business-tasks.
I am sure that good sites must be accessible for users and machines, adaptive to different devices and form factors, open up in all beauty in modern browsers and to feel free to use new technologies wherein it is possible, to be modern and sensitive to the time and to make a user pleased and satisfied in a way so, that he wanted to visit it again.
p.s. Mentioned IE technologies
Just in case I add the technologies mentioned in the article:
• HTML5 Semantic Tags — IE9+ (+HTML5 Shim for
• HTML5 Offline|Application Cache, Web Forms — IE10+
• ARIA, role attributes — IE8+, IE9+
• CSS3 Media Queries, Transforms 2D, Fonts (Font-face + WOFF), Borders & Backgrounds (Border Radius, Multiple Backgrounds) — IE9+
• CSS3 Exclusions and Shapes, Grid Layout, Flexible Box, Transforms 3D, Transitions, Animations, Borders & Backgrounds (Gradients) — IE10+
• Web Storage — IE8+
• IndexedDB, Web Sockets, Web Workers, Web Messaging — IE10+
• IE Pinned Sites — IE9+
It's far not all the new possibilities accessible in IE and other browsers.
To read original article in Russian click here.