What is HTML5?
Today, from a number of those people who are somehow related to web development, only lazy ones haven’t heard about HTML5. You won’t be mistaken, supposing that at every modern conference, where some questions about web are being discussed, almost for sure, there might be something about HTML5. Practically every large company, related to web, whether it is Google, Apple, Microsoft, Amazon, Adobe, Oracle, Facebook, Yandex or Mail.ru. says something in favor of HTML5, makes a declaration of love and adherence to advancement and development of HTML5. Yeah! (Opera and Mozilla, undoubtedly, are in this list too.)
We can only be glad about this universal aspiration. Certainly, in case when all market participants get round the table and come to an agreement, but not try to pull the blanket back to their sides.
Enormous prospects, new wave of web development, new generation of web-applications! That’s cool!
I’m not going to tell you what HTML5 is. In the context of the article it is important to understand clearly one thing: there are two ways of understanding HTML5.
The first is the standard of HTML5, the document on W3C site, where all new tags, attributes, new APIs, and a number of concomitant documents, which have such additional details as API for Canvas, are described.
The second is the “big”, marketing, HTML5 trend, an umbrella for the whole generation of new technologies, including both the specification of HTML5 and great number of CSS3 modules, different APIs for JavaScript, and new standard for JavaScript – ECMAScript5.
As a rule, it’s clear from a context what is meant and a large mess doesn’t arise. Market HTML5 is a fixed notion supported by all market participants. But it is important to be aware of what is actually meant, because frequently somebody (we won’t point a finger at) affords to tell about many interesting things under the sauce of HTML5, that are not related to the web-standards and W3C, but, undoubtedly, support the general spirit of web development. It is also important to understand what is referred to every technology, whether it is an early prototype or an already established and concerted specification.
My story will be devoted mainly to the HTML5 trend, but I’ll try to make references on the concrete standards which we are going to talk about.
Revolutions in “HTML5″ and for “HTML5″
To understand better where a modern web moves, the first thing you should pay your attention to, are the distinctive transformations, which happened in IT Industry on the whole and web industry in particular. The world we can observe today notedly differs from that, what it was like some 5-10 years ago (I will remind that HTML 4.01 was ratified more than 11 years ago).
Among these changes it is impossible to omit the following:
• New hardware. Graphic chipsets, multicore processors and different touch-controls, getting to the quite different devices, up to mobile telephones, and also large aspiring to energy efficiency (how not to mention ARM and Intel Atom). Plus the enormous variety of form factors: from mobile devices, tablet pc’s, netbooks and notebooks to the stationary computers and TV sets. And it’s desirable to have an access to the internet everywhere!
• New trends in services. Cloud, sociality, mobility and permanent availability regardless of device.
• Changes in browsers. Upgrowth of contention – today there are five browsers on the market, which have too sufficient shares, that they cannot be ignored. Plus, certainly, mobile “zoo” :) And here is an important moment: today (or tomorrow) a modern browser knows both about the graphic acceleration and about multicore architecture, about touch-controls and different media input units, energy efficiency and cloud, about social services and mobility. Concrete details can differ from browser to browser, but a general trend is obvious.
All of it finds an obvious embodiment in one or other web-standards, therefore today we have a really new and constantly growing generation of technologies (recently on the Adobe MAX conference
Adobe presented a suggestion of new standard and variant of its realization – filters and shaders for CSS):
• HTML: Semantics, Graphics, Multimedia, WebForms, Security, DnD, History, Offline…
• CSS: Fonts, Colors, Borders & Backgrounds, Layouts, Media Queries, Transformations, Transitions & Animations…
• APIs: Geolocation, DB & LocalStorage, Sockets, Files, Media, Workers…
• JS: ECMAScript5
It is also important to understand that there are close interlacements between all these innovations in devices, software, services, standards and different practices of development, and that everything what we observe now in the field of web-development and web-standards, undoubtedly, will find its reflection in different software, realizing and supporting these standards (from the instruments of development to the browsers and OS), and at the hardware level (maybe, even Google’s dream will come true and hardware support of webm will appear in key devices ;).
Now let us talk about how, actually, modern web changes and what technologies and practices stand after it.
I’ve tried to distinguish a few key trends, which describe the essence of these transformations. So it turned out that it’s possible to pick up a characteristic word on the letter “A” for all of them, and the order of their implementation in the process of development and comprehension of web sites or web-applications, generally, coincides with alphabetical. :)
It would be nice, if thinking over the next project or analyzing the current, you will look at it through the prism of these “A’s”.
A1. Accessible
The first “A” is Accessible. A site must be accessible. Undoubtedly, it includes the questions of availability for people with limited possibilities (Accessibility), and not only. A site should be accessible for all internet users, including the searching mechanisms and any programs which extract the sense of your documents.
Now it’s the high time to mention the semantic marking and the correct balance between marking, styles and logic on JavaScript. The reality of the situation today is that not only the things, which related to the part of content presentation are taken out from marking, but also part of things from JS is taken out into declarative description on CSS.
From the point of view of semantics, a great number of new tags appeared in HTML5, both for the structural marking and for content marking directly:
A part of existent HTML5 tags acquires a new value. So, if before the choice between i and em (like b and strong) frequently was in favour of more short writing, then today it’s a tags with the different semantic loading, even if by default they have identical presentation an italics or fat outline.
On the whole, the more the marking is semantic, and the less garbage it contains, the easier (automatically) to understand where is the particular information.
The other part of innovations touches directly upon the questions of availability: here, foremost, the point is about aria – and role -attributes, allowing marking out the purpose and the roles of content. This information, for example, afterwards can be used by the programs for reading from a screen (screen reader). I should say that providing of availability is not the most banal task, and it’s almost the first time when this question attracted so great attention in HTML5.
Another side of availability is a question of comfort interaction with content and, in particular, speeds of input. New possibilities for web-forms, allowing to specify additional attributes, setting the type of the entered values, ranges and other parameters, were brought in HTML5. So, if it’s only possible to enter a telephone number into the field, then the user’s browser, for example, on a mobile or a tablet device can adjust a keyboard exactly for the input of digital data.
Finally, the theme which I also should mention in this block is HMTL Microdata. Microdata is a development of microformat ideas and it offers the rules of data annotation in accordance with one or another schemes:
<div itemscope itemtype="http://schema.org/Person"> <span itemprop="name">Konstantin Kichinsky</span> <img src="http://a1.twimg.com/profile_images/1464844323/avatarh5f_reasonably_small.png" itemprop="image" /> <span itemprop="jobTitle">ADE</span> <a href="http://constantin.kichinsky.ru" itemprop="url">constantin.kichinsky.ru</a> </div>
See the examples of schemes on the site http://schema.org/. There you’ll find a collection of schemas supported by Bing, Google and Yahoo!
As I’ve already said, there are two interesting tendencies from the point of view of balance in the code between the mark-up, styles and logic. The first, obviously, is the wiping of all the style elements out of HTML5, general undesirability of the inline -styles use, also, from the point of view of the productivity.
I think, that it’s superfluously to remind you about tabular and sectional layouts, but today all of us are closer to the semantic layout.
The second tendency is the expansion of CSS possibilities and the arrival of possibility to make a declarative description of different effects, animations and transformations via corresponding rules instead of JavaScript code.
It’s not the last time when we see the display of these tendencies :)
A2. Adaptive
The second A is Adaptive. A site must be adaptive according to its surrounding terms and adjustable to an external situation. Here is necessary to say that adaptivity is not something strongly additional in relation to the availability of the site, it is rather the expansion and development, because adaptivity must grow from the ideas of availability.
To adapt to different screen resolutions, form-factors, different font sizes, output devices and other parameters, means to be accessible in all these scenarios.
In principle, adaptation is based not only on concrete standards, but also on different techniques and approaches which can be used in the process of web sites design and development, and also their various combinations. In this context I want to mention two important terms, you should certainly pay your attention to: Responsive Design (see the article Responsive Web Design by Ethan Marcotte) and Progressive Enhancement (see the article Progressive Enhancement and the Future of Web Design by Steven Champeon).
The first is about the adaptation to different screen resolutions and form-factors. The second one is about moving from simple scenarios to more advanced (for example, from old browsers to modern one), while working on your site.
In some cases it is an implementation of one or another standards or certain techniques, for example, in order to give different images to the client in various conditions(little for little devices and large one for large). And sometimes it is a development of the functional with the arrival of corresponding possibilities.
You can imagine a large chart of different scenarios. Across, you’ll find various screen resolutions (and form-factors related to them) and vertically there will be a motion from the less advanced browsers to more modern. Responsive Design and Progressive Enhancement are the methods of navigation (and thinking) upwards and downwards, to the right and to the left.
Let us look at few concrete technologies and web-standards.
CSS3 Media Queries
The first task that everyone faces with is adaptation of the site to different screen resolutions. A problem here is that there are many of them, they are different and some new appear constantly. I think that all the people who work in web development (or web design) more than a year, remember all these conversations whether it is time or not to switch over the low-limit size 800x600px to the greater 1024x768px, study of statistics and trends in screen size of an average user.
Generally speaking, today this question and the statement of such question are already non-topical. Do you know why? Because, instead of gradually coming to the greater and greater screen sizes, actually we came to the greater variety of screen sizes, thus in both sides to the little mobile like 480x800px and large at the modern monitors – 1920x1080px and more.
Thus in all this range a modern browser can work on an eventual device – whether it is IE engine (from Windows Phone to desktop Windows) or one of engines on a base of webkit (from iPhone and iPad to MacOS X and desktop Windows), and there can be quite different engines, including the enormous zoo of java browsers in different mobile devices.
A rubber layout can be used in certain ranges, but it is not omnipotent and limited on the application. And in such variety additional instruments are needed for adaptation. In general…
If on a few minutes to take a look at the modern engines, you will discover that all of them support the special technology which is called Media Queries (it is one of CSS3 modules).
CSS3 Media Queries extends the traditional Media Types, already accessible in HTML 4.01 and CSS 2.1, and allows determining the rules of CSS more precise depending on the different parameters of reproducing context, being it sizes of the screen, device orientation, depth of color, monochrome or coloured printing etc.
The idea of Media Queries consists in that you can define how to place the content, what content to display, and what not, depending on the value of all these parameters. If the screen is little, it means that it is necessary to regroup all the elements in a way, that they were reasonably fitted in a little screen, and if it’s large, it is possible to use the available place more optimally, and to display more information. You can look up yourself how it all works in the examples collected on the http://mediaqueri.es web site.
The use of Media Queries, by the way, is strongly bound on that you really dissociate marking of content from its presentation. Therefore availability (and semanticity) lies at the head of the corner. The advantage is that you do one site for different devices. Devices, which don’t identify Media Queries, will ignore your rules.
Usually in simple scenarios it’s quite enough the possibilities of CSS 2.1 and module of Media Queries, but in the cases of a difficult layout you’ll need additional instruments to do something worth and effective in execution.
You will certainly like many other CSS3 modules, perfectly combining with the ideas of Media Queries.
Take a look at CSS3 Exclusions and Shapes (previously Positioned Floats), allowing to adjust the positioning of separate elements relatively to the flowing content around, thus behavior of content in its turn can be determined by other parameters, including the screen sizes and modes of placement:
In the example above CSS3 Exclusions is used in combination with a multi-column layout and layout with the use of grid.
I should say some more about the last point. Placing of blocks on a grid is an enormous headache of all coders. Once this was a tabular layout, then it became unfashionable and almost all confessed this approach was incorrect and began to use the sectional layout with multistory css rules, if it was required to do anything more difficult, than the layout in two-three columns.
Among the new modules CSS3 there is a module devoted exactly to this task it is CSS3 Grid Layout. Grid allows lining up elements on a virtual grid. It is a quite powerful instrument, imagine, that you simply can use different grids for your blocks at different screen resolutions! You’ll be able soon :)
Another interesting module is CSS3 Flexible Box, allowing your blocks to fill the space taken for them, according to your wishes, be that filling of free space or distribution of space between blocks in the set proportion. Today many similar tasks are solved by means of different devices in a layout and style rules, tomorrow it will be enough to specify what is exactly required (see also the article CSS3 Flexible Box Layout Explained by Richard Shepherd).
On the whole, using technologies that are already accessible today or will be in the nearest future, you can do decisions which will easily adapt oneself under different terms. Being technologically a decision, your site can regroup differently in various terms, showing the most optimal exterior in every case.
Now let’s go back to Progressive Enhancement.
Progressive Enhancement
Shortly the idea of Progressive Enhancement can be stated (or interpreted) as a step-by-step improvement: you do a base functional working in all browsers, and further improve it, moving from old versions to new one, not violating the capacity, but adding some needed features for the users of modern decisions.
Ultimately it means, that all users of your site will get a guaranteed minimum of functional, but at the same time, for those, who prefers more fresh decisions, a site will be, for example, more beautiful.
And if you still live with an idea, that a site must look identically everywhere, it’s time to crumple it and throw it into the nearest garbage can. To look everywhere identically is an impermissible spending of energy and in the modern terms of large variety of devices it rather looks as evolutional miscalculation (translating into the language of money: users will prefer those, which are able to adapt oneself), than the top of engineering idea.
How it works? Very simple.
Do you think about the application of something from the arsenal of CSS3 Borders & Backgrounds? Do square corners for those, which don’t support round, and round for those, which support them. Do a continuous background for old browsers and gradient for modern. If it is possible to do with one background image in IE6 – 8, then leave the use of plural backgrounds for IE9+.
Do a base functional and add some new possibilities to it. Users will be glad, when switching to the new and modern browser, they will really feel a difference on your site.
It is possible to think about Progressive Enhancement in a spirit of television analogy. We passed a long way from monochromic to coloured and further with the video of high definition. And (while the question is about the analog technology), old televisions can still show modern transmissions, but in a monochromic variant. The audience knows that in modern television a picture will be better. However, a transferrable signal does not depend on television.
You can read the second part of this article here
To read original article in Russian click here.