modern.ie, create a modern website to force development tools!

Modern.ie is the basic development tool that Microsoft has introduced to help developers create modern websites. As the Web Siege division, the most headache is the browser compatibility test, various types of browsers, various versions of the browser, as well as a variety of headache prefixes and so on. Modern.ie hopes to help our siege engineers spend more time on engineering than on compatibility issues. Modern.ie is a very useful tool, seemingly you can't wait to open it: https://www.modern.ie.

The website is divided into several parts:

1. website scanning tool Scanner

Scanner is used to scan for common compatibility issues. As long as you enter a page in the input box Url,scanner will help you generate a report. Divided into four categories of 16 items, including:

A. compatible with older versions of IE;

This is primarily to solve some common problems that are compatible with older versions of IE.

? compatibility mode. we recommend that the site be rendered in standard mode instead of being rendered under compatibility.

? Frames and libraries for Web pages. scanner scans the site for outdated frameworks or libraries, using outdated frameworks and libraries can lead to more compatibility issues.

? Web Standard Docmode . We recommend the use of a standard HTML5 DocType (<! DOCTYPE html>) tells the browser to render the Web page in standard mode, which allows the website to significantly improve the performance of the page in modern IE or other modern browsers.

B. browser compatibility issues;

This is mainly to help developers do compatibility testing, so that Web pages can be used in a variety of devices and browsers to better show.

? CSS The prefix. We have many properties that are only prefixed to support in a particular browser, and only standard properties do not need to add a browser prefix. Scanner scans to see if there are attributes that do not have a browser prefix added.

? Browse for plugins. We recommend that you do not bring any plugins to avoid support in other browsers.

? Responsive web Design. We now have a growing number of devices, the resolution is more and more, we need to adapt to a variety of devices, in a variety of devices online station can have a good experience, we recommend the use of responsive web design. We are identified by scanning the maximum and minimum properties of the media query, which is one of the indicators of today's responsive web design, and we know that scanning is not particularly perfect and we will continue to improve.

? Browser detection. we recommend using feature detection rather than UA detection. The first thing to do is to determine whether a browser or device supports a particular feature, and then choose the best experience to render based on that. You may want to use the framework to perform feature detection instead of browser detection, for example by: MODERNIZR or by feature detection code. For details, see: Browser function detection.

? The optimizes the picture on the Web page. more and more users are using mobile phones or other mobile devices to browse the Web, so images that are not optimized or uncompressed will significantly affect the speed at which users download your pages, greatly impacting user experience and increasing bounce rates. If you need to optimize the picture, you can use https://kraken.io/to do it.

? HTML5 The input type. browsers that support the new HTML5 input type can provide a keyboard layout to better match that area (such as an email) or display a dedicated control (such as a date), which can improve the user's experience. This can help your users avoid errors when they populate, speeding up their progress.

? Pre-render + Pre-Fetch. by using these technologies, you can enable your users to experience faster site browsing, otherwise it will affect the user experience and increase the bounce rate of the site.

? The compresses the content. The requires a compression mechanism to transfer, which is important to reduce load times, allowing users to load your site more quickly, again based on user experience considerations. You might consider using gzip compression or other similar features.

C. Take advantage of the new features in Windows 8.

This is primarily recommended for siege kids shoes to take advantage of the latest new features of Windows 8, such as touch browsing and the Start screen site tile. Developers can take advantage of these new features of Windows to provide users with a more personalized browsing experience.

? Enable touch mode. now is not the era of PC, now is the era of mobile, is the era of touch. If your site does not have a good experience in touch mode, you will lose a large number of users in the coming time. For some websites, a good touch experience just needs to pay attention to some of the most basic things, such as the use of appropriate size buttons, to avoid the mouse hover menu. You can read our tips on how to make sure that touch users use your site effectively. You can initiate gestures and dedicated pan/zoom behavior if you want to give the touch user a better experience for a richer touch experience. It is more possible to consider using pointer events to support more advanced interactions such as touch, mouse, and pen. Recently, Microsoft has submitted a pointer-to-event specification to the Web site, which will allow the interactive mode of the website to evolve into an interactive, interoperable future.

? Flip Ahead Browse. we recommend "prev" and "Next" link relationships. These two properties can help search engines and browsers better understand the hierarchy of your site's content, and you can enable new features to improve your visitors ' browsing experience.

<link rel= "Next" href= "/next"/>

<link rel= "prev" href= "/prev"/>

? IE11 tiles+ notification. We recommend that the siege architects create a tile on the start screen of Windows 8 when they are doing web development. A Start screen tile allows your site logo to be closer to your users, and users can "pin" your site next to Windows Store apps and open directly. Adding only the following two lines of code is required:

<meta name= "Msapplication-tilecolor" content= "#123456"/>

<meta name= "Msapplication-square150x150logo" content= "Square.png"/>

If you need to create more tile styles, see here.

D. improvements to accessibility features.

This is primarily to make the site accessible to users with a variety of browsing habits and physical flaws.

? Picture Alt property. we recommend adding an ALT attribute to the IMG tag (that is, a short description of the image), which takes only a few seconds. It's not just that it allows search engines to search your site in more ways, and because the Web is open to anyone, anyone should be able to enjoy it. For example, some people with disabilities need to use screen reading software to read your website, so only if you add the Alt attribute, he can read your picture.

? Aria property. if you want to make your site accessible to users with a variety of different browsing habits and physical flaws, we recommend adding the Aria-* property. Wai-aria (Accessible Rich Internet applications) This approach provides a way to define your dynamic Web content and applications so that people with disabilities can identify and successfully interact with them. This is done by defining the role of the document or application structure, or by defining the aria-* property of the part role, relationship, state, or attribute. A large number of aria-* properties make your content easier to navigate and understand. Attributes such as Aria-labelledby, Aria-level, Aria-describedby, and aria-orientation make your content easier to understand. You can read more about it on the ARIA Statement and Properties page.

2. remoteie

Remoteie uses Microsoft Azure's RemoteApp service to make it no longer necessary for siege children's shoes to be able to test your site on any device from anywhere on the latest version of Windows 10 ie, including Windows, Mac OSX, iOS, and Android.

A very simple four-step process:

A. Sign up for the RemoteApp service. Https://remote.modern.ie/login

Under normal circumstances, you will soon receive an email from Microsoft saying you can use remote IE!

B. Download and install RemoteApp

Install the RemoteApp client on the device you're trying to test and currently supports Windows, Mac OSX, iOS, and Android.

? Microsoft Remote Desktop for Mac

? Microsoft Remote Desktop for IPhone and IPad

? Microsoft Remote Desktop for Android

? Microsoft Remote Desktop for Windows Phone 8.1

? Azure RemoteApp for Windows x86

? Azure RemoteApp for Windows x64

? Azure RemoteApp for Windows RT

C. Open the RemoteApp client and log in

Open RemoteApp, need to login to Microsoft's Live ID (ah, what is Live ID), if not, go here to apply for Kazakhstan. Remember that the login account here is the same as the account you registered Remoteie.

D. Open IE from RemoteApp

If you don't see IE Technical Preview in the app list, don't worry, wait a while to try clicking on the "app invitations" button. When you see the picture below, you're done!

E. Enter the URL test site

Enter your URL to start testing!

3. IE virtual test machine

You can test each version of IE in your development environment with a virtual machine running IE, whether your machine is OS x,linux or windows!

Download it here: Https://www.modern.ie/zh-cn/virtualization-tools

Besides, Microsoft also cooperates with Browserstack, through Browserstack, the Siege division does not need to download anything, directly on the Browserstack hundreds of virtual machines on the test your website, as long as you have a browser, can surf the internet!

4. compatibility Check tool

This is used to be a JavaScript-based test tool that runs it will analyze your website and scan the code that modern IE no longer supports. The Compatibility Checker monitors the interaction patterns that cause problems and automatically reports these issues. This allows you to quickly identify problems without having to memorize a large number of documents. We use Sauce Labs for this test, Sauce Labs will help us create a virtual machine to run the compatibility check, and the virtual machine instance will be deleted and no one will be able to access it. If you want to continue browsing, please sign up for a free account Http://saucelabs.com/signup to access 100+ 's browser/device/OS platform.

5. Browser screenshot

BROWSERSTAC's automated screenshots ensure that your site is viewed properly on a variety of devices and browsers. With the Browserstack automated screenshot, you'll get instant visual feedback. In modern. IE this, we will show you a screenshot of your website in 9 common browsers and devices. You can even download these screenshot images. For more options, please visit http://browserstack.com/screenshots.

Modern.ie is a very useful tool, just try it https://www.modern.ie.

modern.ie, create a modern website to force development tools!