Windows 8 support for pinning websites explained

Windows 8 and its new Metro interface allow its users to view and access website locations in a new way. As shown above, Windows 8's Start screen lets users pin their favorite websites on the screen's interface instead of the usual bookmark menu. In a new post on the Internet Explorer developer blog, Microsoft's Rahul Lalmalani gives some tips to website designers on how they can better support such features for IE 10 and Windows 8.

Web designers can create an icon that can be used in Windows 8 to identify the site in the address bar, in the new tab page, and of course on Windows 8's new Start screen. Lalmalani states:

IE10 uses the large site icon (32 x 32 pixels) to identify the site when pinned to the Start screen the same way that IE9 used it for pinning to the task bar. IE10 extracts the dominant color from the icon and automatically uses it as the background color for the Start screen tile.

Web developers can also use those icons to give users short updates on new content. An example of this feature is the Fresh Tweets demo that informs Windows 8 users when a new Twitter message has been posted from a number of Microsoft-based Twitter pages. Windows 8 needs both Badge Notification XML code and Pinned Site Meta Tags to perform these background notifications. The blog post offers up some example code that web developers can use to add in this kind of support.

In addition, IE 10 in Windows 8 allows for pinned websites to add jump lists, which let users navigate and head to specific pages on a site, such as the example above. This kind of interface should help with touch screen users on the Metro interface. Lalmalani states:

You can add static tasks to your site’s jump list via page markup or dynamically based on user interactions. Badge and jump lists in Windows 8 are a site-centric feature. Each fully qualified domain name can have one and only one set of polling data and jump list data.

Images via Microsoft

Report a problem with article
Previous Story

New Skype ad campaign slams Twitter and Facebook

Next Story

Microsoft listed for first time on Linux kernel developer list

40 Comments

Commenting is disabled on this article.

Only place i can see Windows 8 being used are Terminals on Airport, Doctor's Office or perhaps ATM machines. Metro using touch gesture should work perfect there.

techguy77 said,
Only place i can see Windows 8 being used are Terminals on Airport, Doctor's Office or perhaps ATM machines. Metro using touch gesture should work perfect there.

The sad part is that Windows 8 is just a KILLER for tablets. We have some prototypes here at work that we got from last year's BUILD conference, and they're brilliant.

On the other hand, the enforcement of the start screen to desktop users is a bitch-slap from Microsoft. You might as well try to use a popsicle as a wrench or a mousetrap as a blender. Microsoft's leadership is completely out of touch with its user-base.

This is nice to see. I've always wanted to give Linux a fair chance but a lot of the programs I like on Win based systems are not there. With Microsoft on board, I wonder if more companies will jump on the Linux bandwagon and make it a much more competitive OS than it is currently. It's time we had a strong Open-Sourced industry

xXgreatestever said,
This is nice to see. I've always wanted to give Linux a fair chance but a lot of the programs I like on Win based systems are not there. With Microsoft on board, I wonder if more companies will jump on the Linux bandwagon and make it a much more competitive OS than it is currently. It's time we had a strong Open-Sourced industry

Dream on. 8)


Seriously, the release of Windows 8 for the desktop will be Apple's wet dream. The world's biggest Operating System company, with 95% of the world's desktop market share, just shot themselves in the foot trying to compete with Apple's consumer toy, the iPad.

Two completely different paradigms shoehorned into everything = one big friggin mistake.

excalpius said,

Seriously, the release of Windows 8 for the desktop will be Apple's wet dream. The world's biggest Operating System company, with 95% of the world's desktop market share, just shot themselves in the foot trying to compete with Apple's consumer toy, the iPad.

Two completely different paradigms shoehorned into everything = one big friggin mistake.

Amen to that. Probably their biggest mistake since Windows Me (or even the infamous paper clip, if you ask me).

In my experience with Windows 8 so far, Microsoft has taken multitasking back to the "bronze age". I find it bizarre that the start screen should overtake my entire desktop, and the lack of flexibility to position windows for metro apps.

Eh, I find the pinned site interface absolutely horrendous. If it were something more like normal Metro tiles then sure, but 32 x 32 pixel icons just makes the whole interface look really messy and inconsistent.

rdmiller said,
Groups! Baby! Groups!

Yep. This is the way to go. You have Start Screen groups and then there should be Tile Groups. That is... if you have a buncha tech sites saved then you should be able to create a Tech Tile under your Favorites group on the Start Screen, click that and it takes you into a page of all your tech site tiles.

Likewise, with Movies/TV or Games, or however you would have various favorites grouped.

This is my only real beef with Windows 8. But, I, unlike many geeks, realize two things:

A.) Most people don't favorite or bookmark tons of sites.
B.) Microsoft is not fully catering to the niche group (geeks) that does.

Pinned sites are fine. They need favorites. I'm not pinning 100 things to my start screen. They have favorites in WP7 as well as pinned sites, why should this be any different?

rev23dev said,
Pinned sites are fine. They need favorites. I'm not pinning 100 things to my start screen. They have favorites in WP7 as well as pinned sites, why should this be any different?

+ 100!

rev23dev said,
Pinned sites are fine. They need favorites. I'm not pinning 100 things to my start screen. They have favorites in WP7 as well as pinned sites, why should this be any different?

MS Metro answer, "Because phones and small screen touch devices aren't good at displaying lists of 100+ items".

Everything desktop users are going to hate about Metro is based on a least common denominator decision process keyed on tiny little gadgets. 8(

32x32 pixel icons = fail. Why not just allow some metadata tag on website headers that could contain a bigger image so that the pinned tab would look good in the Metro UI? As a fallback have the icon thing.

Even Win7 clearly shows why favicons for pinned items is a crap idea. The Google Reader icon for example looks really awful when pinned using Chrome's application shortcuts.

FloatingFatMan said,
It would be better, IMO, to make the live tile a thumbnail image of the site last time it was loaded, much like the Most Visited page in Chrome.

That's the first thing I thought as well. I use speed dial in Chrome and FF.
Admittedly I haven't given 8 a serious look but from what I've seen visually I don't like it at all, I find the color tiles distracting and ugly.

Why do I get the feeling if you are able to change it to something better looking, it'll be like so many others that revert back on boots or crashes etc and become a real pain in the ass just to keep that way.

Hahaiah said,

Why do I get the feeling if you are able to change it to something better looking, it'll be like so many others that revert back on boots or crashes etc and become a real pain in the ass just to keep that way.

Because:

Hahaiah said,

I haven't given 8 a serious look ...

FloatingFatMan said,
It would be better, IMO, to make the live tile a thumbnail image of the site last time it was loaded, much like the Most Visited page in Chrome.

And, given that we are currently wasting TONS of visual real estate with every one of these stupid tiles, it would sure make a lot more sense, design-wise. Keep the favicon as a corner overlay, like a shortcut arrow, and then people will see it as a big live shortcut icon...which is what the Metro start page actually is.

M_Lyons10 said,
Am I the only one that thinks using the dominant color from the icon as the tile color makes it harder to see?
Sorry, couldn't read your text. IE11 decided the dominant color was black, and set the background to really really blackish gray.

cybertimber2008 said,
Sorry, couldn't read your text. IE11 decided the dominant color was black, and set the background to really really blackish gray.

ROFL!

The only reason this won't be the second windows Vista is because it's faster then Windows 7. But once again they forgot the fact to make it user-friendly.

Renvy said,
The only reason this won't be the second windows Vista is because it's faster then Windows 7. But once again they forgot the fact to make it user-friendly.

Hmm. I wouldnt declare Windows Vista as 'unfriendly to users' .. Theres a couple other things I can think of that went wrong with it but I personally wouldnt say that is one of them

este said,

Hmm. I wouldnt declare Windows Vista as 'unfriendly to users' .. Theres a couple other things I can think of that went wrong with it but I personally wouldnt say that is one of them

Nice looking and user friendly are two different things. The Gadget sidebar was useless and irritating, UAC control is pointless and very annoying. Having to find you're programs in a huge set of tiles (Windows 8) also qualify's as user-unfriendly.

Renvy said,

Having to find you're programs in a huge set of tiles (Windows 8) also qualify's as user-unfriendly.

Not user-friendly? Interesting. In order to find Word/One Note/Excel/Power Point or Final Draft I just scroll over to the Productivity category and click their tiles.

To play Dragon Age or Mass Effect or listen to music, watch videos, check out the latest movies, etc. I just go to the Entertainment category and click their tiles.

Latest news, weather? You guessed it. The News and Weather category, click the tile.

For some reason, that doesn't seem all that difficult to me. My IQ IS above 60 however, so maybe I'm just a genius.

I'm at least glad they can use jumplists like features. Pointless to introduce it in 7 and limit it in 8. Though the one thing which will bug me is that the favicons from some sites will look stretched and distorted on the tiles.

I'm starting to think there is too much inconsistency in Metro. The Start Screen could look quite messy, and not as attractive as it would be if all tiles had the same design. There are three types of tile, each offering a completely different design: The Metro app tiles (these allow any type of icon of any size, although the icon is often fully white and quite large; further, many different types of information can be displayed), the pinned website tiles (a tile colour, coloured icon in the centre of the tile, app name), and the Desktop app tiles (no tile colour, small coloured icon in the bottom left corner, app name).

Mac OS X Mountain Lion is looking more attractive by the day, to me

Callum said,
I'm starting to think there is too much inconsistency in Metro. The Start Screen could look quite messy, and not as attractive as it would be if all tiles had the same design. There are three types of tile, each offering a completely different design: The Metro app tiles (these allow any type of icon of any size, although the icon is often fully white and quite large; further, many different types of information can be displayed), the pinned website tiles (a tile colour, coloured icon in the centre of the tile, app name), and the Desktop app tiles (no tile colour, small coloured icon in the bottom left corner, app name).

Mac OS X Mountain Lion is looking more attractive by the day, to me

I'm a big Metro fan but I fully agree. Even I think it's getting over-crowded. Even something like folders on the start screen would be nice.

rfirth said,
You don't have to pin websites if you think it doesn't make sense to do so.

problem is that with IE metro its the only way to save favorites at the moment.

with that said i think it looks better than it currently does to save a shortcut to the desktop (with mac and windows)

rfirth said,
You don't have to pin websites if you think it doesn't make sense to do so.

I realise that, but pinning websites provides some great benefits, especially due to the information the websites can display on the tile, so it would be nice if Microsoft could provide a way for the pinned websites to have a consistent tile design to the Metro app tiles. They've allowed markup for jumplist items and other content, so they could probably allow markup for a tile colour and large, monochromatic icon.

If I happen to use Windows 8 when it's released, rather than Mac OS X, I probably won't pin websites or desktop apps; that's how I currently work with the Consumer Preview.

Callum said,

I realise that, but pinning websites provides some great benefits, especially due to the information the websites can display on the tile, so it would be nice if Microsoft could provide a way for the pinned websites to have a consistent tile design to the Metro app tiles. They've allowed markup for jumplist items and other content, so they could probably allow markup for a tile colour and large, monochromatic icon.

If I happen to use Windows 8 when it's released, rather than Mac OS X, I probably won't pin websites or desktop apps; that's how I currently work with the Consumer Preview.


You could try grouping the stuff in different sections. I have a section just for pinned websites, tho, I kinda find it redundant - they are shown in Metro IE as well as the Start Screen.

With regards to the cluttering, I kinda spent a few moments cleaning up the mess left by some of the apps I install. After installing VS2010, VS2011 and the various SDKS and stuff I use I realized I had a bunch of junk (resource editors, access to help, etc.) left in the start screen. I know it's extra work, but at the end it helped find the stuff I used frequently faster; even when I was using 7, most of the stuff I had on the Start Menu was junk and I rarely use it.

Callum said,

I realise that, but pinning websites provides some great benefits, especially due to the information the websites can display on the tile, so it would be nice if Microsoft could provide a way for the pinned websites to have a consistent tile design to the Metro app tiles. They've allowed markup for jumplist items and other content, so they could probably allow markup for a tile colour and large, monochromatic icon.

If I happen to use Windows 8 when it's released, rather than Mac OS X, I probably won't pin websites or desktop apps; that's how I currently work with the Consumer Preview.

I have to agree. I think this has the potential to be very unwieldy. And it's going to look horrific with all these different styles of tile. I'm hoping this all pulls together, but I've never had a version of Windows I had such reservations and concerns about.

Callum said,
I'm starting to think there is too much inconsistency in Metro. The Start Screen could look quite messy, and not as attractive as it would be if all tiles had the same design. There are three types of tile, each offering a completely different design: The Metro app tiles (these allow any type of icon of any size, although the icon is often fully white and quite large; further, many different types of information can be displayed), the pinned website tiles (a tile colour, coloured icon in the centre of the tile, app name), and the Desktop app tiles (no tile colour, small coloured icon in the bottom left corner, app name).

Mac OS X Mountain Lion is looking more attractive by the day, to me

The difference in tile looks could very well be by design, at a quick glance you should be able to tell what's a metro app, what's a desktop app, and what's a pinned site. Having them all look the same kinda defeats that thinking. How are you going to tell what's a app or a pinned site if they share the same tile design etc?

Thus I think having different designs for different types of pinned objects makes sense, the part I do agree on though is that we could easily be in for tile overload and think MS should come up with some way to minimize and maximize tile groups (basically collapse and expand the groups when you click on the group name i'd say). That would help cut down on clutter though you are entering another click to the task but at the same time if you're digging through the old start menu you'll be clicking to expand a programs folder anyways so it's the same thing.

Callum said,
I'm starting to think there is too much inconsistency in Metro. The Start Screen could look quite messy, and not as attractive as it would be if all tiles had the same design. There are three types of tile, each offering a completely different design: The Metro app tiles (these allow any type of icon of any size, although the icon is often fully white and quite large; further, many different types of information can be displayed), the pinned website tiles (a tile colour, coloured icon in the centre of the tile, app name), and the Desktop app tiles (no tile colour, small coloured icon in the bottom left corner, app name).

Mac OS X Mountain Lion is looking more attractive by the day, to me

Meanwhile I think this concept is brilliant. Just shows you that not everyone thinks alike. This concept allows the color to be broken up a bit and yet expand functionality beyond a dumb icon. This seems to allow site creators to essentially make their site into a live tile. This is incredibly smart, in my opinion. One of the things that makes Windows Phone, hands down, a better OS is the fact that the hubs and live tiles feed me pertinent info without actually requiring me to open a window. If I see something on the live tile that draws my attention then I can open the window to get more indepth information or interact with it.

Desktop app icons do look good on the Start Screen once they're developed for Metro-style. For example, the VS11 icons, which are monochrome (most of them) look good on the Start Screen. The Photoshop CS6 icons also. Microsoft Device Center.

It's the old-style full colored icons that make the Start Screen look cluttered. Not enough contrast to them for how the interface is designed.

Callum said,
I'm starting to think there is too much inconsistency in Metro. The Start Screen could look quite messy, and not as attractive as it would be if all tiles had the same design. There are three types of tile, each offering a completely different design: The Metro app tiles (these allow any type of icon of any size, although the icon is often fully white and quite large; further, many different types of information can be displayed), the pinned website tiles (a tile colour, coloured icon in the centre of the tile, app name), and the Desktop app tiles (no tile colour, small coloured icon in the bottom left corner, app name).

Mac OS X Mountain Lion is looking more attractive by the day, to me

I'm using Lion right now on my Late 2006 Macbook and it's awesome! I'm not a fanboy or anything but it sure beats Windows 8. I use my mac for everything except Steam. I use my Desktop for that.

butilikethecookie said,

I'm using Lion right now on my Late 2006 Macbook and it's awesome! I'm not a fanboy or anything but it sure beats Windows 8. I use my mac for everything except Steam. I use my Desktop for that.

Indeed. Force-feeding Metro on desktop computer users will be Apple's dream come true. People who were already on the edge about switching will, ironically, find the Apple GUI paradigm more familiar and comfortable.

Now there won't be a reason NOT to switch for many.

PS The different colors/looks of icons is a great and logical idea. And like folders, don't expect it to happen since it would require a code change - and they are past that stage. Just bugs and cosmetics now.