The Web continues to change and improve thanks to the evolution of standards that raise the technological potential of sites and interaction with users. Being protagonists of the modern Web means confronting this innovation and translating it into services and contents.
Since January 31, 2013, Microsoft’s modern.IE is available: a real Swiss Army knife for front-end developers, a series of tools that can project Web sites and applications into the era of modern browsers, such as Internet Explorer 10.
Let’s see immediately what the tool menu proposes:
- Scan to WebPage – tool for examining the level of “modernity” of our work. For example, verify that the site is responsive, that the libraries used are all updated or that you use the prefixes for vendors in CSS
- Virtual test – to test the performance of our sites with all versions of IE (from 6 to 10) from any platform (Mac, Linux, Windows) or Browser (eg Chrome or Firefox), thanks to a partnership with BrowserStack which provides 3 months of free grants.
- Code with standards – the right suggestions to build sites by following the latest technologies and standards (such as HTML5).
- Meet IE 10 – a series of examples to try Internet Explorer enhanced by touch support and HTML5 and CSS3 standards
Said with the words of Microsoft:
«Modern.IE is a development center: free tools and resources, designed to allow you to spend less time testing for different versions of Internet Explorer and more time to realize what interests you most in the modern Web in the modern web.»
In this article, we look more closely at the operational tools that allow us to detect any changes and to test our products on different platforms.
Note: The Italian version of the service has been provided, which will see the light already a month after its release.
Scan to WebPage
Already within the home page we can find the textarea in which to scan our sites, a little ‘as happens in the famous compliance test that makes available the W3C. But in addition to the classic validation of the code we can verify that our sites are modern under a series of aspects related to the adherence to the most modern standards and user experience and not only on the markup, to name a few:
- Responsive web design, for viewing on different devices
- Use of plugins like flash or silverlight
- Features of the browser, to replace features not compatible with a certain client with others invisibly
- Vendor prefixes for CSS
- JavaScript libraries, to always have the most compatible with IE
- Compatibility with touch interfaces
By entering a URL, for example www.html.it, the service performs a series of checks on the site and returns a detailed report:
In this case we have done a good job overall, but we still lack one thing, the creation of ad hoc graphics for pinning on Windows 8, which we will soon remedy thanks to the suggestions that we find immediately on the right:
In addition to notifications of any adjustments, the tool supports developers with practical suggestions, code snippets and whenever possible, a wizard with which to make the necessary changes.
Code analysis
Let’s see what happens if we insert a slightly less optimized site ( http://oldmusicproject.com/) in which modern.IE detects problems with the code.
In this case, for example, a doctype compatible with the HTML5 / CSS3 standards has not been defined and the system points out that this could cause a potential 30% improvement in rendering performance.
Microsoft estimates that loading the site is 30% faster for pages made according to standards, so seen by IE10 in “standard mode”.
Clicking on the button of suggestions (How to fix it) we are offered an article by Rey Bango that shows how to further verify the adherence to the standards of the site and offers the solution to the problem, which in this case is to insert the doctype for HTML5 :
<pre class=”brush: php; html-script: true”>
<! DOCTYPE html>
</pre>
Virtual test
To begin with, thanks to the partnership with BrowserStack, you can test your sites on all versions of IE from any platform, even using your favorite browser.
But beyond that, we have available a series of virtual windows machines, available for free and for all platforms, to perform extensive tests on Redmond’s browsers.
Test with BrowserStack
The left side of the virtual test page is dedicated to testing with BrowserStack, a web application that allows you to view the site’s performance on different clients, directly on your favorite browser and without the worry of having to install several, on different platforms.
Let’s see how it works: by clicking on the login button with Facebook, we can access the free three months of use of BrowserStack.
In a moment we are ready to enter the URL to be tested:
Having done this we are immediately moved to the pages of BrowserStack, where we can complete our login. At this stage we may need to update our browser’s Java plugin.
We are ready to enter our site and choose the platform and the browser on which to test it.
As you can see we have both desktop and mobile systems and the full range of clients and devices used in the world. For example, choosing the display for mobile, we also have the view for a single model:
For example, we choose to display HTML.it with Internet Explorer 10 and Windows 8: we can not only view the result but actually browse the site in the virtual machine that appears in our browser.
Of course, the user experience can be a bit ‘snappy depending on the band, but the tool is absolutely useful to evaluate the real impact we have on different configurations.
Windows Virtual Machines, free
One of the most interesting features of this suite for testing Web products is the ability to download Windows virtual machines, to perform local tests on previous versions of Internet Explorer and allow a good view even to those who use older versions of the browser, such as IE8 for example. All this can be done using different guest platforms (Windows, Linux, Mac):
… and various virtualization software (Hyper-V, VMware, Virtual Box, Parallels, Virtual PC).
There are some limitations regarding what can be done with virtual machines: they are released without a product key, so they will not be activated and the genuine validations will not pass. You can still activate using the codes found on MSDN (for those who have a subscription), otherwise it will still be possible to continue using the machines or returning them to their initial status every 90 days.
