CodeGuru content and product recommendations are editorially independent. We may make money when you click on links to our partners. Learn More.
If you are a web developer, then you likely know that the life expectancy of a web design is not very long. In fact, if your design is more than a year old, then it likely is dated. It is not uncommon to hear that your site design should be updated every six months or more. Regular updates have become expected.
Not only do expectations for web site design change, but so does the underlying technology for building web sites as well as the technology within the browsers that display those sites. Over the last couple of years, HTML5, CSS3, and changes to JavaScript have also been impacting what is expected in web sites.
The result of all these changes is that sites are expected to do more and respond better. Expectations of web sites now parallel expectations for desktop and mobile apps. Not only are sites now expected to be responsive, but they are also expected to be modern. In fact, being responsive is one part of being modern.
What is a Modern Site?
There are a number of elements that help indicate if a site is modern. This includes using a responsive design, as just mentioned, as well things such as using modern code, using current modern markup standards such as HTML5 and CSS3, making sure the site is compatible with current browsers, optimizing site elements such as code and image sizes, and much more.
I’ve mentioned responsive. Responsive design is quickly becoming a standard for web solutions. A site that is responsive is one that detects information about the system that is loading the site and then adjusts. In today’s world, a person can access a site using a variety of different browsers. They can access a site from a desktop computer, a tablet device, or even a phone. Each of these devices can have a completely different screen resolution as well as a variety of differing features ranging from GPS support, to touch, to many of other sensors and more. A responsive site is one that adjusts the content and the support based on the accessing device and system.
How to Check for a Modern Web Site
One way to check to see if your site is modern is to make sure you use leading edge tools, code in HTML, and then test on the newest browsers that support modern web. This might require a lot of time and effort. Of course, the browser makers want you to use their latest browsers and they want you building modern sites too. As such, you’ll find that they offer guidance to help you achieve a modern site. One of the companies that has made it really easy to test your site is Microsoft.
Modern.IE
This week Microsoft announced the one-year anniversary of Modern.IE. According to Microsoft, more than 750,000 developers have used the tools from modern.IE. They stated that these developers have saved more than one million hours testing their sites.
You can use Modern.IE to test your site to determine if it is modern. If your site had issues, Microsoft’s tool will let you know the issues and make suggestions for updates. Because the tools come from Microsoft, they also included a number of checks to make sure your site is compatible with the versions of Internet Explorer. The tests would include checks for supporting Internet Explorer such as:
- Checking for compatibility issues
- Checking for IE compatibility mode
- Checking to make sure the latest frameworks and libraries are used
- Checking to make sure the site is supporting a current DocType
The tests also check for compatibility across other browser and devices. These tests include checks for:
- Appropriate use of CSS prefixes
- Checks for the use of plugins other than Flash
- Responsive design
- Review of browser detection features
- Image optimization
- Use of HTML5 inputs
- Use of performance features such as preloading content
- Use of compressed content
Microsoft’s tools also include a few extra checks tied to supporting a few Windows 8 features as well. This includes checking for touch support, flip ahead browsing, and the use of tiles and notifications.
You can use the tools that Microsoft has provided online or you can download them. To test a site, you can go to http://modern.IE. On this site’s homepage, you can enter the URL of the site you want to test. This will result in a report outlining how your site did. The following is the report for the site http://www.LotsOfSoftware.com. You can see that it has a couple of issues. What’s nice is that when you click on the Suggested enhancements, the site will make suggestions on what was found. You’ll even learn why the issue is important to fix. If you click into the description, you’ll get more details on what you can fix to modernize the site. There are also links for further testing.
For fun, Microsoft created an infographic on what developers could do with all the time saved. I’ve included a copy of the infographic on the next page of this article in case you want to see their suggestions. Would you spend the time taking the tour of Middle Earth?
Update: Here’s a Channel 9 interview with on Modern.IE with Josh Holmes.
