As you, certainly, already know, Windows 8 Consumer Preview was released on February, 29, and together with it the 5th platform preview version of Internet Explorer 10. In this article I am going to talk about how to prepare for the updated version of IE. Although, the narration will be mainly about IE10, many of these advices are applicable to other browsers, including the other platforms.
1. Use <!doctype html>
First and the most important thing to start with is to make sure that all pages you give are with correct doctype. In the world of html5 it is one small and very simple line:
<!doctype html>
This must be a first-ever line you write. If the template of your page is generated automatically by the development tools and there is no such line, correct the template. If your CMS gives pages without doctype, you should renew the templates you use.
I will repeat myself, it is a very simple step and however, it is extraordinarily important. Correct doctype tells a browser, how it must process the content of a page. In case when IE9 and IE10 don’t have a doctype they switch to quirks mode.
Many new possibilities do not work in the compatibility mode of IE9, including canvas, audio, video and CSS3 possibilities. In the compatibility mode of IE10 the mechanism described in the specification of HTML5 is used: it is the same standard mode, but with the imposed corrections of compatibility, described in a specification, that also corresponds to the behavior of other browsers.
(I will remind that the specification of HTML5, in addition to all other, contains the rules of how web pages are rendered in browsers, including, the mode of compatibility. Examples: case-sensitivity, forms, images of content representation.)
In what mode does my page work?
Through DevTools(F12) you can look up in what mode your website is displayed:
The Standards and Quirks modes conform to the specification of HTML5.
IE10 also supports quirks mode of IE5 for websites without the doctype, which work in the mode of compatibility (compatibility view), and websites, obviously specifying the necessity of such mode through meta tags with X – UA – Compatible:
<meta http-equiv="X-UA-Compatible" content="IE=5">
2. Work out the compatibility problems
Besides the wrong doctype, there can be other reasons, why a concrete website by default is displayed in a non-standard mode:
• A web-site is indicated in the compatibility list, used by IE. As a rule, it is popular websites for which developers set the mode of compatibility, or users often do it manually to improve the displaying. Procedure of removing holder’s site from the Compatibility View List is described on MSDN.
• The wrong doctype is used.
• One or another mode is specified on a page via X-UA – Compatible meta tag.
And even if everything is all right with doctype and compatibility mode, it does not mean that a website will completely work correctly in IE10. For example, a website can use a so-called browser sniffing, determining a browser via the user agent line or other signs and giving a different code to different browsers.
Or, let us say, a website can use an out-of-date library, which used bug or special hack in the old versions of IE, but stopped working correctly in an updated version with fixed bugs.
There can be a great number of such reasons, and, to make the process of defining the possible sources of errors simpler, we have a special instrument – inspector of compatibility (compat inspector).
Compat inspector
An inspector is a library on JavaScript that can be easily added on the page:
<script src="http://ie.microsoft.com/testdrive/HTML5/CompatInspector/inspector.js"></script>
After that the loaded script analyzes page for the possible problems and gives a summary view in the upper right corner of the page:
Click on this view to expand it and obtain detailed information about each detected issue with links to relevant documentation:
How “to add” inspector of compatibility on somebody else’s website?
If you want to try inspector of compatibility on somebody else’s website, or on your own, but not making any alteration in the code of a website, it is also possible.
For this purpose you need to set Fiddler and add to it a snippet (to make the changes in the rules of rendering through Rules -> Customize Rules…). After that Fiddler will be able to paste the code of inspector into the body of pages locally on your computer.
Useful links: inspector of compatibility and instruction.
3. Detect features, but not a browser
This theme often comes into question, but nevertheless it will not be superfluous to remind about it once again. The more browsers’ behavior becomes standard, the more new features appear and the quicker the browsers are being updated, the more important becomes that web developers were guided by the browsers’ features and their presence when creating websites and web applications, but not by the concrete browsers and their versions.
Yes:
Detection of features. Check, whether a browser supports the necessary methods and properties before the usage.
Detection of behavior. Test it, to find out whether there are any known problems, before applying roundabout decisions.
No:
Detection of concrete browsers. Do not use the identifiers of browser (for example, user agent line) to adjust the behavior.
Disconfirmed suppositions. If you checked only one feature, it does not mean yet that the other will work.
Adjusting to a concrete browser can seem a reasonable decision only in a short-term prospect, however, in the real decisions for end user it greatly limits the adaptive possibilities of pages, since that website can stop working with the appearance of an updated browser’s version (new possibilities, corrections of errors, changes in standards etc.), and in the end the roundabout paths used here may seem superfluous and ineffective.
The use of modernizr is a good starting point.
See also the articles Same Markup: Writing Cross – Browser Code and Browser and Feature Detection.
Conditional Comments
Many of you, certainly, are acquainted with the conditional comments for IE allowing inserting one or another code for the different versions of IE. I suppose that many people ran into situations, when conditional comments were inserted incorrectly, as a result, for example, a website knew only about IE7 and 8, giving to the all other versions of IE (including new) the marking for IE6.
Seems familiar? I have news for you:
<!--[if IE]> Such content is ignored in IE10 and other browsers. In the old versions of IE it is displayed as part of the page. <![endif]-->
Everything is correct: IE10 ignores conditional comments. You can continue to use them for previous versions of IE, however, for more modern browsers it is necessary to use detection of browser’s possibilities (feature detection).
4. Provide mode without plugins
If you hear about this for the first time, then welcome to the severe reality. It is important that your website or your web application remained functional and decided the assigned tasks even at disabled plugins. It concerns Flash, Silverlight and any other extensions (for example, those which are based on ActiveX).
If previously you developed websites for iOS- devices, you might be acquainted with such situation. In Windows 8 IE10 is presented in two modes: for a desktop with all extensions set by a user and in the metro- mode with disabled extensions.
User can easily switch from the metro- mode to the desktop mode, however, it is senseless to show him notifications like «install Flash Player plugin” – it will not help him.
It is recommended to do the following:
• To provide for an alternative decision for realization of functional that at this moment requires plugins. For example, for playing Audio/Video and graphics it is possible to use HTML5 possibilities; for advertisement banners it is to give an alternative as an image.
• To reconsider the work of website, if it is to a considerable degree depends on the use of plugins: to move toward modern web-standards, or switch to the creation of alternative application as Metro for Windows Store.
• To give out a correct notification if there is a necessity to use any extensions, offering user to switch to the desktop mode.
See also the articles Browsing Without Plug-ins and Moving to Standards – based Web Graphics in IE10.
5. Add prefixes, where it is necessary and watch the standards attentively
I am not going to talk about whether it is good or bad to use prefixes, however, at this moment we should take it for granted. Browser prefixes allow different developers realize the support of developing and not very stable possibilities until the final acceptance of one or another specification (even if achieving the status of Candidate Recommendation) and get reviews on realization from a community.
If you want to use new possibilities in IE10, do not forget to renew the code, adding properties and methods with necessary prefixes for all basic engines (for example, – ms – for css- properties in IE) and for the future a variant without prefixes for more or less stable possibilities.
I will remind that a lot of new possibilities were added to IE9, and yet even more to IE10:
And to find out more about how to develop with the use of prefixes you can see, for example, the article of A Best Practice for Programming with Vendor Prefixes and library –of-prefix-free from Lea Verou.
6. Design for different screen resolutions
In the article “On the sails of HTML5. How new technologies change a modern web” I’ve already mentioned that the dream of many web developers that screen sizes and resolutions will only grow, was thoroughly scattered, running into mobile and tablet scenarios, popularity of which already compelled to revise many approaches in development of websites and web applications.
Responsive design is a combination of two cherished words, on which you need to search, to know, how to obtain flexibility in relation to different resolutions and screen sizes.
Concerning Windows 8, you should be ready for two basic moments:
1. To the large variety of devices of quite different form factors: from relatively small tablets to the large screens of monitors and panels.
2. Snapped-mode of applications operation similar to metro, including IE10.
Variety of screens
The recommended minimal screen size for Windows 8 is 1366×768, in this case Snap function, which is described below, will work. For applications similar to Metro the minimal requirement is 1024×768. A website in IE10, working in Metro- mode, occupies the screen wholly.
However, taking into account that a desktop browser can work on lower resolutions (for example, 800×600 or 1024×600), the necessity to consider smaller resolutions still remains.
If the screen resolution is more than you expected and your website does not take it into account, for example, it leaves a large empty space on the right with left alignment, it will not be pleasant if the user sees the empty half of a screen. If you set a strict size of the text and don’t take into account the sizes of device, it might happen so that on the large screen the text will be too small.
The same thing is with the size of graphics and necessity of its scaling on the large screens (using the different sets of bit-mapped graphics, or using SVG).
Responsive design. CSS3 Media Queries. Bing.
Snapping
In some technical aspects this story is similar to the task of development of general decision for desktop and mobile scenarios. The function of Snap in Windows 8 allows fixing on the one side (on the right or on the left) an application like Metro, for it to be permanently on the screen:
In such state there is a space width taken under a website, which equals 320px , that looks like mobile scenarios and also accessible for display adjustment by means of CSS3 Media Queries.
See also the article Device adaptation.
7. Develop your website for multi-touch, mouse and keyboard inputs
Finally, do not forget about how a user will interact with your website (regardless, whether he uses desktop or metro- mode of Internet Explorer). He can use a mouse and keyboard, or he can use his fingers.
The last thing means that it’s time to think, whether it is comfortable to work with your website or web application, using the usual way of input.
On the whole, for the websites it is possible to apply the recommendations that used for the ordinary applications, which are oriented to support the multi-touch input (including mobile applications for different platforms): importance of quick visual reaction, minimal sizes of targets and spaces between them, overlap areas etc.
From the technical point of view, I recommend to pay attention to these two articles: Touch Input for IE10 and Metro style Apps and Handling Multi-touch and Mouse Input in All Browsers.
Summary
I will repeat the most important points once again, to be well-prepared in case you will need it:
• Use the correct doctype
• Check the rendering mode and possible problems by means of compatibility inspector
• Switch to the approach of “feature detection”
• Think what will user see with the absence of plugins
• Add ms- prefixes for experimental possibilities and alternatives without prefixes for the future
• Prepare for the different screen sizes and display modes
• Allow the user to work comfortably with your website or web application, using the multi-touch input
To read original article in Russian click here.