With the launch of Windows 8.1, Microsoft introduced a new Metro UI which was designed to work on mobiles devices as well as desktops. It brought about some new features not seen in previous versions such as the ability to "Snap" apps to a portion of the screen and being able to "Pin" websites to your start screen to make them quicker and easier to access.
These features will work with your existing websites as they are but there are a few tweaks you can make to create a better experience for the user which is what we are covering today. When creating a premium theme or branding an existing website - it's small tweaks like these that will make you stand out and deliver a more polished experience.
We will also be taking a look at Modern.ie which is a site created by Microsoft to help in development of websites by providing testing tools, virtual machines for different versions of Internet Explorer and so on.
In partnership with Microsoft
Internet Explorer App - Metro UI Snap Fix
In Windows 8.1 you are able to "Snap" the Internet Explorer app to take up a fixed amount of the screen and you are able to run other apps in the other portion of the screen.
This works well but there is a problem with responsive websites which causes Internet Explorer to not take notice of your media queries and show the correct sized responsive site, instead it scales the site down to fit in the space, like so :
You will be used to using this rule in your responsive theme's headers :
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
But this is not observed, so to fix this we need to add some extra CSS to the theme stylesheet. Simply add the following rules to your style sheet :
Viewport isn’t part of the HTML5 spec which is why Internet Explorer ignores it and you have to force the desired behaviour by using the vendor prefix –ms-
Now if you view your site in the Internet Explorer app you will see the responsive rules are observed :
Pinned Sites in Internet Explorer
Another nice feature of Windows 8.1 is the ability to pin websites to your start screen, you can do this in the Internet Explorer app by visiting the website you would like to pin, clicking the "Star" icon and then clicking the "Pin" icon:
You can then enter a name for the website and click the "Pin to Start" button.
By default websites are added to the right hand side of the start screen, you are able to drag these to reposition them.
How to Customize a Pinned Tile
By default the pinned website will use an Internet Explorer icon but we are able to change this so you can brand your website and make it stand out more. Much like how you are able to create icons for iOS devices to make them look nicer on your phone.
You will need to create .png images to use for your tile in the various sizes as the user can choose a size of icon to display, name them as follows :
- 70x70 - tiny.png
- 150x150 - square.png
- 310x150 - wide.png
- 310x310 - large.png
Next create a file in a text editor named "browserconfig.xml" and enter the following :
<?xml version="1.0" encoding="utf-8"?>
You can change "#000000" to any color of your choice which will be the tile's background color. The browseconfig file and the images should be uploaded to your website root public_html folder - it's also possible to place them in a directory if you would prefer, you would need to edit the paths above if doing so.
Finally add the following code to your theme header:
<meta name="application-name" content="WPLift"/>
The content="WPLift" will be the name of your tile so you should change that to match your website name.
This is how it now looks in the Start screen, much better ?
How to Add a Live Feed to the Tile
Now you have learned how to add tile icons, you are able to take this one step further. If your site has an RSS feed, you are able to create live tiles which will display notifications of new content on your site. You can do this manually by adding to the browserconfig.xml file we create earlier but there is a website that makes this easy to do. Visit Buildmypinnedsite and enter your site details, upload your tile image and enter your RSS feed URL.
The site will then generate the different sized images and give you the code to add to your website header or let you download them as a package for uploading via FTP and using the browserconfig.xml file.
Note the extra lines added to browserconfig.xml which handle the notifications :
You can check out some examples of sites with live tiles in action here. As you can see they display latest post info titles and images.
You can delve into this and make further customizations using the Pinned sites API.
Testing Your Theme with Modern.ie
If you do not have Windows 8.1 and need to test how your site or theme looks then there is an excellent website by Microsoft called Modern.ie which provides all the tools to test your website in different Windows and Internet Explorer versions.
Virtual Machines allows you download test versions of Internet Explorer which you can run on your computer so you can thouroughly test a website on your development machine. You can test on virtual machines of IE from version 6 up to 11 on Windows XP, Windows Vista, Windows 7 and Windows 8 - you can get these here.
Modern.ie also provides a screenshot feature if you just need to check your site layout is as expected on a number of devices, visit here and enter your site URL.
Get browser screenshots on a variety of devices and also has a site scanner which you can run and it will check for any coding problems.
Another great feature on Modern.ie is the site scan tool which allows you to enter your URL and it will check through for any problems with your coding :
The areas covered in the scanner are as follows:
- Fix common problems from supporting old versions of IE
- Help this webpage work well across browsers, across devices
- Consider building with some new features in Windows 8
- Consider these accessibility improvements
Each area is broken down is to separate areas and will give you advice and links so you can fix any problem areas with your code.