Susan IbachTechnical Evangelist
Modern.IE is a new tool from Microsoft which will examine your website and recommend code changes for better modern browser support
Today, Microsoft released Modern.IE, a tool that examines your code and detects code that may cause compatibility problems or that may prevent your users from getting the best experience on a webpage. The tool suggests fixes with web standards like HTML5 & CSS3 (or a graceful fallback code). It's not a complete checklist for coding modern web pages but it gives you a good starting point.
As part of the release, the IE team has also announced a partnership with BrowserStack. BrowserStack has a service that lets you test your site on any browser on any Windows OS. As part of the partnership, if you visit the BrowserStack site via the modern.IE site you can get three months of this service for free.
I decided to try the tool out for myself and see what the tool reported for www.godevmental.com.
To test the webpage, I just visit the modern.ie webpage and select Scan a Webpage.
Now I just enter the URL of the webpage I want to test: www.godevmental.com
Let’s see what the report tells me I should fix on my website. The report is broken down into three sections, so we’ll look at the results section by section.
I have no detected compatibility issues, my website is not rendering in Compatibility mode (that’s a good thing because it means better performance), and the DocType in my webpage is recognized by modern browsers. However, Apparently my website might benefit from using an updated jQuery library.
Looks like my CSS prefixes and browser plug-ins are okay. However my webpage layout might not display well on all the different screen sizes. The report suggest I look into media queries and provides some links on responsive web design basics.
My website also was flagged as needing improvements due to browser detection. For modern web pages it is a better practice to use feature detection rather than browser detection. The report provides a link to Modernizr and a link to learn about feature detection.
Not surprisingly, my website does not have a lot of features to support Windows 8 (yes, I work for Microsoft, but I also know my current site is a bit out of date, I do have new version of the website in the pipeline). The report suggests that I add support for default touch browsing by adding one line of code the –ms-touch-action CSS property. It also pointed out I don’t have a Windows 8 Start Screen tile defined for my webpage. The Start Screen tile allows users to pin my webpage to their Start page in Windows 8 and provides me with the two lines of code required to add that support. So all I did was enter the URL and I have 4 or 5 changes I can make to my website to improve support, and I have either specific code or links to help me make the fixes. Nice. Try it yourself. Okay, now of course I am curious, what happens if I run the report on the modern.ie site…
First impressions matter, and your logo creates a first impression both on the Start screen and when someone sees your app in the store.
This blog is part of a series, if you missed a post you can find it here.
When someone searches for an app in the store, they see your app name, rating, price and logo. Based on that they may decide which app to choose from the store. We already talked about picking a good app name, now it’s time to consider your logo. If you are going to invest the time to build a great app, let’s make sure it has the best possible chance of being downloaded by users by creating a good first impression.
Take a quick glance at some of the search results I got back for games, the quality of the graphics varies widely. Would this influence your choice? When you see a logo that looks incomplete or unpolished it may make you wonder about the quality of the app that goes with it.
So exactly what size image files do you need for your Windows 8 app? If you create a new Windows 8 app, you will see a number of files in the Solution Explorer under the images folder. You should replace each of these files with a file containing the appropriate size of your logo. The name of the file indicates the appropriate pixel size for the image. For example 30x30.png should contain an image that is 30 pixels X 30 pixels.
Jeremy Foster has a list of references for stock photos, clip arts, audio, music and video. Not all the resources are free but many of them are.
Tip: If you are creating bitmap graphics, consider creating .PNG files since they can have transparent areas.
Tip: Consider taking the time to learn how to use Scalable Vector Graphics (SVG) instead of bitmap graphics such as .PNG files. With all the different screen sizes supported by Windows 8. Creating SVG graphics is done differently and will take you a bit of time to learn. But for a beautiful graphics experience on different screen sizes it is an investment that can pay off. (comparison SVG vs bitmap)
Tip: If you have an image with transparent areas, be careful what tool you use to resize the image. Many online resizing tools, or tools like MSPaint will remove the transparency when they resize the image. Thanks to Raju on Technically Personal whose post suggested good resizing tools that maintain transparency.
With XNA not supported on Windows 8 and Windows Phone 8 a lot of XNA developers are turning to Monogame
I get a lot of questions from XNA game developers asking what they should use to develop games on Windows 8 or Windows Phone 8 since there is no support for XNA. Not everyone wants or needs to turn to DirectX/C++ for game development. For a simple game you can use HTML5/Canvas and JavaScript, but XNA developers often choose MonoGame, the open source version of XNA.
Phil Williams was interviewed by Scott Hanselman about bringing his hit game Draw a Stickman to three app stores using MonoGame and C#.
Now, I admit I cheated a bit here, because the interview is actually a podcast. You can listen to the interview here on the HanselMinutes blog. But in keeping with the spirit of video of the week here is a video describing the game, which is now available in the iTunes and Windows 8 store.
Related Links
This week’s template allows you to take a website build using Wordpress.org and turn it into a Windows 8 store app
If you missed any other templates of the week, you can find them here.
This week’s template was created to make it easy for a Wordpress.org user (not wordpress.com) to quickly create a Windows 8 store app to showcase the content on a Wordpress site.
The template is posted on CodePlex.
These templates are not Microsoft templates, they are open source and should be treated as such. They may contain bugs and code quality will vary. Nonetheless can be a useful tool when you are trying to learn how to build an app, and they can be a useful starting point for more complicated apps that follow a similar structure or require similar functionality.
If you are building a Windows 8 app, you must support snap view. This video shows you how to do it with XAML apps.
I came across this video in a blog post by Jerry Nixon, a developer evangelist in Colorado. It’s a nice simple example and walkthrough on how to support the different views such as snap view, filled view, portrait and landscape view in a Windows 8 XAML app. The video takes a brand new page and adds support for each view and shows you how to check the appearance of each view.
Great explanation Jerry, thanks. There are lots of other great resources and articles on Jerry’s blog as well.
Once you’ve got that snap view supported, you are one step closer to publishing and getting rewards through the developer movement!