Find quick fixes for your website with modern.ie


    modern.ieModern.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.

    Common problems from supporting old versions of IE

    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.

    Help this webpage work well across browsers, across devices

    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.

    Consider building with some new features in Windows 8

    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…

  • Go DevMENTAL

    Building a great app Step 7: Creating your logo


    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.

    Windows 8 Store Games

      So what do you need to consider when adding a logo to your app?
      • What size logos do you need?
      • Where can you find free logos?
      • What tools can you use to create logos?
      • What tools can you use to resize logos?

      What size logos do you need?

      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.

      • 150x150 – logo used on the Start Screen.
      • 120x120 – logo used in launch screen of the app.
      • 50x50 – logo used when app is listed in Windows App Store.
      • 30x30 – small logo used in all Program list in Start Screen, or when you do a Semantic Zoom out on the Start Screen.
      • 24x24 – logo used for app badge, for example in the notification when a message is displayed to signal that the app is installed.
      • 620x300 – logo used in splash screen when the app is launched.Visual Studio images folder

      Where can you find free logos?

      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.

      What tools can you use to create logos?

      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)

      What can I get for free?

      • Inkscape – inkscape is an open source vector graphics editor with capabilities similar to illustrator, CorelDraw, or Xara X. It uses the Scalable Vector graphics file format.
      • Paint.Net - Paint.NET is free image and photo editing software it has grown into a powerful yet simple image and photo editor tool.
      • gimp – the GNU Image Manipulation Program. A freely distributed piece of software for photo retouching, image composition and image authoring
      • pixlr – An online image editing tool which lets you create, edit, and resize images online.

      What can I get if I have a few $ to spend

      • CorelDraw ($499) – professional graphic design software for bitmap or vector graphics (AI, PSD, PDF, JPG, PNG, EPS, TIFF)
      • Xara X ($89 - $299)  - all in one graphics package for drawings or photo work, print or web graphics
      • Adobe Illustrator ($49.99/month as a cloud membership)  - professional graphic design software
      • Logo Design Studio ($29.99) - Logo Design Studio gives you over 1500 pre-designed templates and over 5000 logo objects to make designing a logo a snap. From one logo you can create unlimited new looks simply by adjusting the colors, fonts, shapes and effects. Import your own graphics or pictures to further personalize your look
      • LogoYes.com:  A web-based solution that offers over 20,000 symbols to choose from. LogoYes.com allows you to create your logo before you commit to purchasing it.
      • The Logo Creator ($37) - With more than 300 logo elements and 50 built-in fonts, you can create logos in just a few steps. The Logo Creator software also includes 75 logo templates and can import your personal fonts and images. You also can create additional graphics such as web banners or images to use on blog posts.
      • Pay someone else to do it for you – Hey let’s face it, some of us simply have no talent for making things look good, so sometimes the best thing to do is to pay a graphic designer to design something for you!
      • logotournament.com to have designers compete and give you suggestions for your logo

      What tools can you use to resize logos?

      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.

      • Pixlr – it’s an image editing tool, but it will also let your resize images and will keep transparency on .PNG files intact.
      • FotoFlexr – simple and free online image editor which allows editing transparent PNG files. Upload the image, click on resize type in your dimensions and select ‘Apply’
      • Images.My-addr – this is a free png resizing tool
      • Microsoft Office Picture manager – I didn’t even know about this tool and it turns out I had it installed on my PC! This tool allows you to edit pictures, so you can use it to resize images.
      • gimp – the GNU Image Manipulation Program. A freely distributed piece of software for photo retouching, image composition and image authoring
      • Adobe Fireworks  ($49.99/month as a cloud membership)  - professional graphic design software

      Don’t forget when you publish your Windows 8 or Windows Phone 8 app to get rewards from the Developer Movement!

    • Go DevMENTAL

      Video of the week: Cross platform gaming with MonoGame – Draw a Stickman Epic


      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

    • Go DevMENTAL

      App Template of the week: Bringing a Wordpress site to the Windows 8 store


      This week’s template allows you to take a website build using Wordpress.org and turn it into a Windows 8 store app

      Wordpress windows 8 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.


      • Windows 8


      • View your blog posts by category
      • View recent blog posts
      • View your pages
      • View and post comments
      • Bookmark favourite posts

      Windows 8 features

      • See post information in the live tile for the application
      • Use the Search charm to find content
      • Use the Share charm to share a favourite post


      Where can I find it?

      The template is posted on CodePlex.

      A quick disclaimer

      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.

    • Go DevMENTAL

      Video of the week: Implementing Snap, Filled and Portrait Views in Windows 8 apps


      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!

    Page 1 of 3 (15 items) 123