 All right, so good evening think we're past the good afternoon thing and onto the good evening thing This is not church. You don't have to sit all the way in the back. There are a few seats up front. I promise. I don't bite much All right, so Here Josh Holmes. I am a program manager on the Internet Explorer team here talking about touch and touch development and And the majority of what I'm talking about today will apply to any browser There's a handful of things that I'll talk about that are ie specific But hopefully you've been able to keep an eye on some of the things that Internet Explorer has been doing So Touch me I dare you provocative title. I dare you to start thinking about touch in your development and in your applications so Why does touch matter? This is why touch matters touch matters because there are there's just been an explosion of touch devices out there on the market Ranging from obviously every phone that's out there. I mean who has who in the room has a phone with a hard keyboard? For okay, five of you maybe I'm sorry We'll catch up eventually Any way I'm teasing you I'm teasing you I I I always loved my hard keyboards on on the On phones, but I prefer screen real estate. I prefer the responsiveness of that But then you know, you also start talking about all the tablets who in the room has a tablet What's wrong with the rest of you? So the thing is is that we have a lot of different types of tablets out there Obviously, there are iPads or Android tablets. There are Windows tablets. There's funky hybrids like this This is the Surface Pro if you want come by the office come by the Booth tomorrow and I'll let you play with it and have a demo And it's you know got a keyboard and it's got a little kickstand and you know It's kind of somewhere between a tablet and a laptop It's my work machine as well as my play machine There's some good and some bad with that just be honest But you should come you should come by and play with it and have a look There's a lot of convertibles like this thing here I would just shout from over there, but it's actually being recorded. I think I don't know So coming back to the microphone to make sure that it's recorded anyways, that's a Lenovo tablets Interesting design. It's got a hard keyboard. It's got an extra battery in the keyboard and you know, but the the screen just snaps off and then you've got a tablet tablet and You can carry that around sit on the couch whatever you want to do there great on airplanes But when you want you snap it back in and now you've got extra battery you've got there's other devices accessories on the keyboard like an extra USB or an extra Or an SD reader or things like that You know, so there's some cool stuff like that and then you have the all-in-ones and and the the big touch monitors my wife just got a new desktop and I got her a 23 inch Dell monitor. It's giant and Anyways, it's it's got five points of touch on it. That's pretty awesome actually for 300 bucks at Best Buy in the States I know you can get them out off of Amazon out of the out of the UK for about 220 pounds 230 pounds so these devices are getting much cheaper and Accessible for you. So touch matters because the world is going in that direction I mean in fact the the first time I did this talk I was at the Amelia Island plantation and I get off the elevator on my way over to the talk and This thing is hanging there In the wall on the wall just opposite from the elevator and it's a touch interactive screen For finding out more about the plantation itself. They've got a full app that they've built that is all touch enabled For getting around the Amelia Island plantation and so on and so forth. So touch matters You have to design for touch these days Or at least think about it So what is your strategy when it comes to dealing with touch? Touch there. There's there's kind of three strategies ignore it completely That's a legit strategy if you know what you're doing and you decide I want to just ignore touch and I want to treat everything like a mouse That's okay. You can do that. You can get away with that for certain types of applications for certain types of websites The problem is Numerous and I'll go into those here in a little bit The second thing you can do is and this is where a lot of people are today is that they are You know, they start looking at their analytics on their sites and they realize that you know 22% of their web traffic is Well from an iPhone and another 14% is from Android and another Two and a half percent is Blackberry and another 1% is Windows phone and another You know you start looking at this traffic and then you look at all the all the desktops with IE 10 and IE 11 and a fair percentage of those are going to be touch devices by fair percentage, I mean, it's it's in kind of in the 50-50 range and so What what are you gonna do? Are you gonna ignore them? That that I mean that's half your traffic or more it's coming from touch devices Okay, if you're not looking at your analytics and finding out that kind of information then Well, you're in the wrong career to be honest You need to be looking at your analytics and you'd understand who's your customer base. So People are looking at their website and they're retrofitting touch back in okay, or what I prefer is designed for it from the beginning Okay, there's a lot of things that you should do when you're designing from the beginning with with touch or retrofitting First is hover sucks. I mean how many of you are using you know, don't answer the question. I Don't want to embarrass you Don't use hover menus. Okay, there's a couple of things that are wrong with hover menus the first is that Well, you know, they don't work in touch I mean a lot of the browsers are making up for it at this point in time where you you actually you touch it and It'll drop down. Okay, but there's no facility in touch Devices to I'm not touching you. I'm not touching you, but I'm right here. I'm almost touching you That just doesn't exist. Okay, and so the second big cognitive issue is that I'm going to take my mouse here And I'm hover over the menu and then the one I want is I want to touch the it down there at the bottom So I've hovered over it and then I go to as soon as I cross that barrier. What happens to my hover? poof it goes away damn it and So instead you have to teach your users hover cross over then down Is that a natural movement? No, it is not. Okay, and so just just don't use hover. Okay, instead, you know, use your click events use your You know mouse downs and so on and so forth and that'll that'll that's a good starting point Second is touch size buttons. Okay, one of the things that is crazy is Fingers are wider than mouse pointers Just saying right so how wide is a mouse pointer? One pixel had a brave soul down here who said one pixel and and he's right. Okay, what size shirt do you wear? large so You saw how that works. Yeah, you know intelligent response good crop participation free swag Now there's a limited number of t-shirts up here. So get in early on this action. All right also Putting up a tweet about you know, you're watching this talk, etc. Free swag Not immediately come by the booth. We'll figure you out at least by your beer. So You know, but you look at the the size of a finger and finger is not a pixel Okay, in fact, you look at the average basketball player and their fingers because they're they're giants They're not normal people 19 millimeters That is very very wide the average human being is closer to like 11 millimeters with their index finger Okay, so 11 millimeters is the width of your finger when you touch you've got a range of here to here and Browsers, you know that we do the best we can to say, okay, where's the kind of the center? What's the most intelligent thing that they could be doing right now? Are they clicking on this link over here this link over here buttons slammed up against each other? Are they doing there? They pushed right in the middle Do I do I do the one at the top the one the bottom one the left one the right? I don't know we do the best we can You make the job a lot easier if you design touch size buttons So make sure that your buttons are at least 11 millimeters on an average screen DPI and so on and so forth and so you know the That works out to you know seven millimeters is roughly 40 pixels. Okay, so you kind of want to be north of 40 pixels And so that way when you when somebody's touching you've got at least 40 pixels wide on an average DPI Type of a screen. Okay, that makes sense Yeah, no no t-shirts for nodding. Okay, just saying all right, so these are thinking about the ergonomics of touch and you know How are people using their tablets and for those of you who have tablets you've done this those of you who don't have tablets You could imagine this. Okay, so first is They're either sitting or they're you know with one hand Touching and moving or they have two hands on it and they're using their thumbs That's actually very very common, especially for a phone, right? And so on a phone there oftentimes down here like this You know with two fingers two thumbs going away or they're one-handed with one thumb going away, right? Sometimes people actually sit it down in their lap and they're using the the keyboard and they're they're tapping away at that Okay, these three kind of common scenarios Yeah, all right, so We've done a lot of measurements very complicated measurements figuring out how wide and how long somebody's fingers are and Well, I think along complicated methods we painted people's fingers and then had them reach out on a board Created this wonderful little collage here People with short fingers the the green area people with long fingers the the red areas You know so the basketball players can almost touch the middle The rest of us are kind of in the green the yellow area I've got these short stubby little, you know moose claws. They're they're big fat fingers and you know So This is this is a problem right and so you know if you've got an action interaction here in the middle How's your user gonna hit it? Now all of a sudden they've got to let go of the one side and kind of you know, well So what you want to do is you want to start pushing your interaction areas down to the bottom and out to the sides and Then you want to push your content to the middle and towards the top Okay, and it just didn't mean if you think about that it makes a lot of sense You want interaction areas where people's fingers are and you want the reading areas where their eyes are? Does that make sense? All right, fantastic so There's a lot of New things though that you should be also be thinking about and this is where the treating You know ignoring it and thinking about it just like a mouse Starts to fall down. Okay, and one of the things is remember. There's more than one finger. I Have ten a Lot of people have ten turns out and so it turns out actually I don't know if you can see all the dots This has ten touch points Okay, so I can actually touch in ten places on this machine and there are other devices that have more touch points than that the the pixel sense Has 42 touch points That's a lot of touch points. Okay, and so you start looking at that and you know now Suddenly the mouse there's only one event for the mouse and it only catches one item. So whoever's down first and Which one did I put down? I don't know. I don't know which one I put down first But that one got the mouse event. Okay, so Remember there's more than one type of input Because there are fingers and there are mice Okay, and then there's actually even more inputs than mice. I don't know if you guys can see the little bitty dot wondering around Okay, that is actually the radio tipped pin that I've gotten my hands So this is not a capacitive touch pin the capacitive touch pin really behaves like a skinny finger Okay, this is a radio tip pin and a radio tip pin is interesting because You know what it's easier to demo than then then talk it through but it's interesting because it's it's pixel Accurate and it's got a lot more settings. It's got pressure. It's got rotation. It's got tilt It's got a whole lot more interesting stuff on it than just being a skinny finger And we'll talk about that here in a minute and we'll show you how we can do with that So how do I code for all of those things? Pointers pointers are very exciting pointers are It's a W3C standard or at least on the way it is now a candidate recommendation the Canada recommendation status came in August It was in working draft status in February If anybody knows how fast the W3C moves That is light speed There are a number of people who looked at this problem and went holy crap. How'd we miss that and Okay, this sounds like a good idea and so let's go and so Microsoft we implemented it's prefixed in IE 10 and it's now un-prefixed in IE 11 It's in Canada recommendation standpoint stage. We're waiting on another browser vendor to implement it Is Dan in the room Dan from Ozilla? Just calling you out Anyways, we're working with the other browser vendors on their implementation and They they will be coming along soon I actually know a few things that I'm not supposed to talk about in front of the crowd by me lots of beer later and Anyways, but that's coming along very quickly We should be in recommendation standpoint very soon and have multiple implementations across all the different browsers The other very good news though is that not only do the browser vendors think this is a good idea There are a number of people who have put in Polyfills and shims that will give you effectively the same thing and I'll go through a couple of those here at a little bit as well so the event model With pointers actually very simple Point or down pointer move pointer up pointer over pointer out pointer council pointer hover What does that look like? mouse That would make the audio guys in the video guys very nervous if you hit the projector there Yes, so this looks like the mouse events and in fact well, it's very very similar to the mouse events Except that we get a lot more rich information and we get a lot more events So because we get the touch events if we have more than one finger on the the screen We're actually going to get you know multiple events firing all at the same time giving us You know the access to the pointer down pointer move pointer up pointer over et cetera et cetera So that's that's pretty exciting in my opinion. So let's actually go do a demo here I closed it. All right, so let's Open that with web matrix the lightweight tool that I use to do Simple editing and it's got a little lightweight is engine in it but here let's Run that and Here, let's go look at the bricks here. So bricks I'm gonna go IE 11 and notice if I move my mouse over and then I you know click and it's you know Pong with a complication in that you know, it's You know trying to do bricks in the middle as well. All right now this appears to be working, right? Well, and actually I can actually do this with the finger as well. So I'm gonna do that and That actually works until Notice that one of them is moving and one of them is not If I move them one at a time That's fine because right now I'm catching the mouse event. Okay, and I can almost win this level just by not moving so Let me go fix that So what I'm going to do is I'm going to go into the bricks.js Actually, it's the default digest file and we'll come down here and we'll say right here. We're catching the mouse events Okay, I don't want to do that anymore instead what I'm going to do is I'm going to uncomment all this of all this event stuff here and The first one here is if we're in IE 11. I'm sorry IE 10. We're going to use the official Prefix one if we're in other browsers, we're going to use a polyfill unless there is a An actual implementation in the in the browser so IE 11. It's actually going to use the real events IE 10 is going to use the MS pointer events either way. I am a happy camper So here let's bring this back over. Let's refresh the page to make sure that it's actually loading correctly and now Notice I can do both of them at the same time I Heard a wow Wow, okay, so Anyways, and this actually I can actually play with my Pin over here. Okay, I can play with a mouse and a finger at the same time You know, so there's some cool stuff here that I can do with multiple pointers and multiple types of pointers all at the same time Cool. And so let me go go just glance here at the code here All we're doing is we're grabbing the event for MS pointer up or pointer up and that's it I mean, that's the only difference between that and the mouse code all right all right, so Let me show you this next demo though and what we want to do is we're going to use these in a little bit more interesting fashion So this is a demo called the browser surface I don't know if you guys remember the old surface the aka the big-ass table It was like, you know 40 inches and 150 pounds This was one of the best demos on there But I can actually I can move multiple images and if I had more Fingers and was more coordinated. I could actually do five or six of these All at the same time and I can you know, but there's gestures Okay, rotation gestures and that kind of stuff that are built into the spec There is you know wide and you know pinch and zoom We've got multiple Events all going on and happening at the same time Yeah, I'm not sure what just happened there. Anyways You're right so that one is a little bit more interesting use of the the pointer events, so let's run this one more time and And you know, we also have things like you know, we can have multiple gravity wells on this demo here You know, we can do magnet magnetic repulsion we can change the You know, what are we playing with here? You know little raindrops or the HTML5 logo so that was kind of fun, but you can see these are very responsive events and We can do a lot of fun stuff with them. All right, let me go back and So what information am I getting from these events? So if I put my finger down, you can see here that I've got a So I can point I've got a width of two Okay, and actually as I as I move my finger, you know, so it's a little more flat It'll get up to four, you know height is three You know and you know so on and so forth You can see the pressure is set at point five point five is it's a touch event It doesn't actually that the digitizer on this screen doesn't register pressure So it just gives us a flat point five and we're done. Okay But then we have the pointer type is a touch type, but you know, I can actually do a Whole bunch of these all at the same time. Okay, and I think that's kind of fun There's a whole lot that I can think of about, you know, what could I do with that much touch? on on a single browser, so Let me clear that and now I can actually do the mouse and so the mouse again pressure is point five But the width is one height is one and the pointer type is a mouse. Okay, so I can do multiple touch and a mouse over here all the same time excitement excitement and Lastly, I'm gonna bring out the pin. Okay, and so the pin This one I think is interesting because you see the little nice little small trail. So I press harder Notice he gets thicker and fatter okay, and that's because You can see the pressure and the pressure is You know kind of moving around but there it is up to eight point two or sorry point eight two Then I can let it all the way down to point two point Oh five I mean it get really really really just barely touching all the way down to really pressing hard Okay, and there's more information that you can get Sorry, it's interesting to notice that it's width is one height is one You can also start looking at some digitizers this one doesn't but some digitizers will actually give you the tilt of the pin So as you move the pin, you know to the side It'll actually give you like a side brush stroke and there's some really interesting things you can do with that as like as an artist Okay, and it can create a really really rich palette there But there's other fun things you can do with that from a gaming perspective potentially I'm very excited to see what people can do with pins Pressure alone is something that I think is is kind of fun. I want to start doing Surveys and when somebody really slams on number four I know they're passionate about that particular question, right? So there's some fun things that we can do there So where are we at here back over to here? All right So the event model gives us as I saw as you saw in the demo here I meant to go with height pressure tilts rotation pointer type pointer ID So the pointer ID is You know, you're getting events. So hang on let me Yeah I'll come back to that in a second So coding for multi-touch if you're doing this on other Platform so here is the current support for iOS and Android What you do is you have a touch start and a touch end And you know that those were those are the the original, you know touch events Those are interesting There's a couple of problems with them from a technical perspective that one of the problems is that you get one set of events and it's going to launch and you get a You get to loop through all the different touch points and You know so so you're having to manually loop through in process There's a lot of people who forget to do that and and then you know, it's Why am I treating them all as a collection rather than as individual touch points because it could be two different people It could be there's a whole lot of different things that's from a technical standpoint and they're relatively limited because they're only touch so One of the issues and this is a common bug that I find on the internet is somebody will have a touch start And what they'll do is they'll see if on a touch start in Documents dot elements. They're checking to see the feature detection great rock on my button dot event listener touch start else at Event listener click. What's wrong with this code? So it will work on Android devices Yep, so it works on iOS and Android at the moment. It works on Windows in Safari Okay, but what's the problem here, what's what's the bug? What's that? No, no, no, yeah Sorry, the guy right here with the handsome mustache and beard combination there. That's you. Yeah If it supports touch and also mouse, what t-shirt size would you like? So the problem and the bug with this is that You're either doing touch start or you're doing the mouse and so you pull up in a Chromebook and You've got your mouse ready to go and it doesn't work Why not? Because somebody had a bug in the website. All right, no t-shirt for answering that one thought that that was already answered so the so what you need to do is Well, you need to fix the top of the up there and then if you've got the MS pointer catch that else And actually there's still a bug here Do the touch starts and click event or use a polyfill? Okay? There's three polyfills that are actually decent out there hand JS Polymer pointer events and points dot JS. So let me flip back over to my handy-dandy demo here And I've got a pointer JS Actually, let's do the hands JS one. And so here's a mouse, you know moving along. There's a you know a bunch of Fingers notice it's not quite as responsive as the built-in events because it's actually using the polyfill but the exciting part here is that I'm going to launch Chrome and Now, you know, you can see that it's actually catching the events here And you know, I have different colors for different fingers and so on and so forth. So all excited there pointer events Work with the polyfill for Chrome and for other browsers again the we're working very closely with the other browser vendors and You know, we will get pointer events into all the other browsers at some point in time so questions on pointer events Polyfills for those and that kind of stuff. Yes At the moment it's pin touch and mouse There is absolutely room for the for other things. Let me come over and show you the code here Let me go to pointer JS Or points that JS so Sorry, not that one. That's not the one I wanted. I wanted Touch test and it's actually this JavaScript file here. So Right here, you're getting a if pointer type equals Some type right and so there's absolutely room for more types to be built in in the future And all we're going to do is add another type. Okay, and we can just check that at some point So this is nicely future-proofed The question of the thing is is that what we're doing in this example is we're doing and so this is coded correctly If it's touch we're painting it one color if it's pin we're painting it a different color and we're grabbing the pressure sensitivity and those kind of things and Else we're treating it like a mouse. Okay, so the fallback is something reasonable So if for example, somebody has a motion detection something or another or you know They're an eye tracking, you know as I'm looking around and it's raising pointer of it. That's okay I can treat that like a mouse at some point in time And so you can future-proof your code by doing something very similar to this. Okay, great question t-shirt Medium. All right other questions. Yes back there in the back Fantastic hair by the way, absolutely. Yeah, that's a great question. So there is a Actually here, let me show you the demo Run I Believe it was browser surface Notice this is doing a little bit of a you know acceleration and then it Drops off in the faster. I throw at the faster it goes. Okay. All that's built into the pointer events Mechanism there. Okay t-shirt. Okay. Ask your questions. I'm going. Yes So is there a place where it is documented? And that is a again fantastic question W3C The standard So all right other questions Yes Yes, so are there demo pages where you can visit? So the the majority of them would be at ie dot Microsoft comm slash Test drive Yeah Yeah, you can visit it with other browsers as well But we have so under touch We have a number of things here. So touch events Here's actually the browser surface demo that I was talking about a minute ago and the Contra jour is another great It's a touch-based game and actually Contra jour is It's highly addictive so I'm gonna get out here and just show you the the very very brief Intro bit here, so Play with him and play level one There's some pretty little music that you probably can't hear all the way in the back These guys up front they get to enjoy it Just saying So let me skip ahead to the play and then what you do is you can move and manipulate the objects and you Drive your little one-eyed monster around and he goes and he Does the you know he goes and it does a lot of different Obstacles and so on and so forth and the they get a lot more complicated And so, you know, it's here. It's tapped to release him and then you know, so on and so forth But it's using touch the whole time So that's a little bit more complicated. Yes, almost all the demos there will work in Well, it'll work in any browser that supports pointer of its Which right now there is a build of chromium that does And obviously IE 10 and 11 do and then several of them have polyfills for for other browsers So that's where that's at. Okay All right T-shirt, what's it? right, so let's Let's move on and I'm going to show you a handful of other quick things that kind of point the direction in which we're Kind of looking at some stuff. So one of them is the CSS snap types and this is a this is a really I think simple concept And the other one I want to show you is content zooming. So I'll just briefly You know, I'll step over and show you the demos for these and we can go from there so let me go back to here and so Simple concepts. You've got a touch carousel, right? How many people have the program to touch a carousel at some point in time if you haven't you haven't been in the industry long enough Okay, so I'm teasing the but this is the traditional scroll where you know, it's it's the built-in you've got a list box Sorry, sorry, you've got an unword list and you style it to be just in a carousel, you know rock on The problem is that right where you end up kind of between pictures and so on and so forth It works. It's not great, but it works. Then you have the JavaScript touch carousel. Okay, the JavaScript touch carousel Nicely snaps. Okay. Does anybody see the problem with this one? A it's delayed B if I just touch it moves to the next picture. Is that what I really wanted to do there? Probably not so I want to slide but I slide and then I when I release then it moves and I forget which library I used to do the the the JavaScript here. I think it was one of the jQuery plugins for it but it you know That's kind of the behavior you get with most of the JavaScript ones. I like this, okay? First of all notice, it's nicely tied to the finger and then I let go and I didn't get over halfway So it snaps back think of that I like that a lot actually, okay, and so It allows me to be as fast as I want to be, you know, I can also, you know Stop in the middle and I still get that nice user experience and the cool part about it is is that Well, there's a couple cool parts about it, but let me just go show you the code here real quickly It's very very very simple Where we at here? claps that up carousel And so what we've got here is we've just got a list a list and a list right, so no no nothing real special about this just a list and You know, we're all excited. So now if I go into the Where's my oh Yeah, I was using jQuery carousel there Where's my CSS? I did didn't I? Oh, yeah, there it is okay, so Do-do-do-do One of the another sorry another important one I set here is I set the touch action to none meaning that it's not just going to Bounce and move the page all over the place, you know based on where I move my finger. I'm actually Programming the interaction itself. So what I want to do is Look for snap There it is so on my container here what I'm doing is I'm setting the Snap points, so it's the snap type mandatory, so it's a mandatory going to snap to To the image and then the second bit here is the snap interval and so the snap interval is going to be 450 pixels starting from zero so every 400 and sorry 405 pixels because that's how wide the images are and so it's just going to snap to the 405 Real simple that is all literally all I had to do the difference between that top one and The bottom one is that okay question over here So this this is this one is programmed to be fixed But there is a variable setting that you can use as well Yeah, yeah, if you've got images of different sizes and that kind of stuff you can you can fix that So his product comment was probably a stupid question there are no stupid questions only stupid people who ask questions Sorry So his question was this all browser-based. Do I expect phone? OSes that kind of stuff to pick this up or you know in apps and that kind of stuff So from a browser perspective on the phones the the reality is is that Most of the time we've got the same engine running the browser on the phone as we do a lot of them on the desktop So for example Windows phone, which is what I know best is actually running IE 10 currently so it's the the same exact JavaScript engine and Trident rendering engine are I mean it's the same team that develops both of them They check into the same repository. The only thing that's really different is the outside skin That's kind of cool, right? So the browsers are gonna pick this up as on the phones as they do on the desktops, okay? So Yeah, so so now as far as the rest of the OS and the applications outside of what I Can really talk to and the W3C doesn't really have control over those things I'm hoping that they will you know that the OSes and other things will pick up the Pointer events and you know snapping and that kind of stuff that'd be great to be fan-tastic Okay, and I owe you a shirt. There's that's a large so that you're sure here. Yeah you Yeah, good question earlier. What's that? Yeah? Yeah You want sure you wanna pass on pass it on all right. All right, so we'll we'll pass it on to the next question. All right, so So that's that's snap points and stuff and the CSS control so the CSS zoom so this is a you know fairly large image and we want to be able to zoom in on it And so this is kind of the traditional out-of-the-box Zoom all right, and I can zoom in and that seems to work. Okay with the exception of notice what's zooming the whole dang page so I'm gonna do is I'm gonna turn on content zoom and now I Can zoom just the image Personally, I think that's kind of slick as well. And so, you know high-res image. I can actually go zoom in on that and The code for that is actually really really simple where we at There it is MS content zooming and right now that only works in IE 10 and 11 But I'm hoping that that will also make its way through the standards body at the moment that one is is just IE though Couple other ways we can interact with the site and You know from a touch standpoint and so let me briefly show you what a live tile is So a live tile is you notice all those tiles just gave me new information. Okay Something that's interesting is is that these two the red one and the blue one the one there Atomic goal 800 years of power from waste and the one below it Those are apps written for Windows 8 one over there that says the perf doctor is in That is actually my my blog. Okay, so I click on that and boom it opens up my blog Okay, trash homes calm and you can see here. I net rocks Freddie moments Tech parenting and there is perf doctor is in and the first image on that site first actual image is I think I actually set it to be the travel site content down there is the one that is Index higher. It's just as I've moved down. Anyways So that is a live tile Stupidly simple to implement What I did there? Let me I'm gonna kick over and view that on the desktop and I'll show you the meta tags for that So Here we are In the head and this is a ridiculous Resolution to be trying to do this in But here we go There's a meta application name content Josh Holmes meta name application tile color is the tile color there So that's a that's a nice little burnt orange so you can see that little orange down there That is coming directly from from that right there and then I've got four logos one four For small, you know the 70 by 70 one for the 150 by 150 because I can actually resize this if I Click resize and I go to small or I can resize and I can go to large Whatever I want to do there. Okay. I Personally, I like the wide. I just think it looks good and Then for the live information I'm using a little utility that's gonna go Pull the My RSS feed and convert it to the right format the right formats very simple where we at Yeah, so this is this is an example of the Come on, where's my Okay, I have an extra slide in there. So the these are the meta tags And then this is what the feed looks like to give the actual live information It's just an XML format and I've got a handful of those up on my website so real real simple to do the site pinning and You can do it with any any page very very simply. We'll show you the Code here in a very clean sample Site pinning so that is all of the code right there that you need for site pinning. It's just these meta tags right there Okay And you know the worst that happens on other browsers is they ignore the meta tags Okay, I'm hoping that other browsers will eventually pick up those meta tags and start doing interesting things with them as well And then the XML there's the XML format Again, very simple very straightforward So we've got a visual we're gonna bind, you know, what size tile are they showing? That's the content I want to show on that okay All right last thing That I want to show you here is swipe ahead So swipe ahead all you need is a Relative link for next what is swipe ahead? Let me show you Actually, I'll show you in the immersive browser over here Come on why is this not Flip ahead right there Copy that and I'll go over to this browser here. All right, so I've got a simple list here Zero through nine and then there's a next and a previous link. I Swipe ahead notice. I didn't go click that. All I did is swipe to the next one Swipe to the next one. I don't have to think about it. I just go to the next one Okay, think about any time you have pagination of articles or pagination of lists So for example, I have on Josh owns calm My my blog I've got a long list of Articles and you know you get to the bottom swipe ahead You don't have to go find and click the next link and all that kind of stuff. You just swipe ahead Okay, I personally I think that's a great reading experience and a great touch interaction and so Let me go show you the code for that And a very very clean one here, which is I Called it flip ahead and so right here in the top I have a what are the next and previous links and we're done Okay, and actually I don't even need the previous all I need is the next and I'm done So just a link relative next the other thing that's cool about this is get you a second The other thing is cool about this is that this is actually the recommendation for SEO as well So this is you know, if you're if you've got multi-page content Then you should use this link In the header to tell the search engines Google and Bing and everybody else Where the next? Article is so that they know that that's related content question back here and then I'll come over to you So that is a separate thing that is pre-fetch Okay, and so that is absolutely available as well And you can tell it tell the browser to go do that But we don't do that by default because we don't want to burn too much of your users data And so we we will do that if you tell us to and I forget the link But if there's an attribute you can put on there to tell us go pre-fetch that We can have it pre-fetch more than just the next page We can have it if you want pre-fetch the net, you know three or four or five different things Okay, t-shirt and we're out. Sorry you missed Same question. So that is absolutely available to you. It's we don't do it by default, but No, okay. All right So Anyways, that's those are the those are the demos that I wanted to show you Briefly, let me finish up here Where's IE 11 now it's in dev preview And there's actually there's a release preview for Windows 7 that is out there as well And everything except for the flip ahead will work on And the sorry in the sites pending will work on Windows 7 those two features require Windows 8 new features the F12 developer tools are Pretty awesome. They're actually written by the team that does the Visual Studio It's again. It's a horrible horrible resolution to be trying to do this out, but I'll just show you this one here real quickly This is the UI responsiveness. I'm gonna hit starts. I'm gonna refresh my page I'm gonna hit stop and it's gonna come back with a nice pretty graph here for me And the pretty graph is I can let me go in here and Zoom in and you can see here. I mean there's nothing really going on on this particular page Actually, let me show you a more interesting page Close that and so this is the levathon. This is a Again, it's got great music That those in the front are enjoying And even the back which they were but let me go into the tools here and stop And so now you can see it's a little more interesting stuff here and I can zoom in And actually we'll kill the music here So I and I can I can zoom in again and I can go see That is garbage collection stuff that is scripting that is rendering down here that little green bit there is styling And so I can actually go see Where I'm spending time on what and there's a whole bunch of cool stuff there that comes along. There's network There is, you know a world-class debugger again written by the Visual Studio team, so they know what they're doing There's a pretty good console Anyways all this available in IE 11 question down here. I Don't know the answer to that question question was does the console work with a particular library? I don't know console.lock So I don't know I don't know so so come by the booth tomorrow and let's take a look. We'll see I don't know All right, so brand-new developer tools WebGL as you saw there the this is this is all WebGL and you know fully touch enables WebGL Love that and it's pretty awesome evergreen updates is very cool She's got a cheer for that All right, I Will say the an administrator at your company you can set a domain policy to not do evergreen updates I hope that not a lot of them do that, but I know that some of them will I just Put it out there more standards more GPU We're doing a lot of like all the all the WebGL stuff is all Hard work accelerated on the GPU The UH string has changed and it's just something to be aware of What is my User agents I forget what the exactly the string is You know you shouldn't be doing What do you call it? Browser detection anyway, but that's the new user user agent string And it's like gecko. So treat us like you would gecko and we're all happy family Then lastly here modern.ie Let me show you that real quickly modern.ie Any brave soul want to give me a domain name that they manage Funny guy anybody anybody all right. I'm just gonna pick one here All right, so the engine here open source engine hosted up on github and You know you can go download it there if you want all node.js back end And what we're gonna do is we're gonna go through and look for things like all of those frameworks and libraries are up to dates a Lot of people especially like anybody who's running Drupal 6 they're running like 1.3.2 of jQuery They could upgrade to 1.6.4 with no API changes So there's you know a lot of improvements and a lot of performance enhancements a lot of capabilities have been added As they have gone through the years And then the CSS prefixes here So I want to I want actually you know I'm gonna zoom in on that and make sure everybody gets to see that So we are remember, you know, this is a engine written by Microsoft and That's the prefix that they're missing. So they're using linear gradients They're probably running Firefox and so they have the dash Moz dash linear gradient But they have gotten the for the web kit one So they're linear gradients actually not gonna work in Chrome and we're telling them that okay, so We want an interoperable web. We want people to write stuff that's gonna run in every browser, okay? So I personally I'm very excited about that and there's some other fun things that we can do here So I can go grab screenshots So all of that that I just showed you is open source. This is not this is done by a great partner of ours Browser storm Come by the booth tomorrow and we can do your site and we'll take a look at that Anyways, that's my talk Let me flip back over to the this Modern.ie and then you can go check out Pointer events on Docs that web platform.com and then Josh Holmes.com is my blog Josh Holmes is me Josh Holmes is Microsoft.com. I try to stay office gated off the web I'm teasing So Any questions? Yes So are we going to release the browser? IE on other platforms and the answer is probably not I mean I don't have a crystal ball I can't look into the future, but it's not currently, you know in the plans Okay Yes, so so the question is do the new tools that are in IE 11 Do they work for? Mobile tablets and phones, so let's separate tablet and phone on tablets absolutely. I'm running a tablet here You know if you're running a an RT tablet, then yes, you have the same tools and stuff But phone is a separate platform for us and so currently we don't have phone as part of With the with new IE 11. I don't know what's on the roadmap for When the next drop comes and we finally get IE 11 on the phones I don't know I don't have that crystal ball, but I'd be excited if it works. Okay other questions Yes So are we going to updates? IE faster like the other browsers so currently the release cycle is one year That's a fantastic improvement from what it was so I'm pretty excited about a year at the moment and You know and then there are patches and bug fixes and those kind of things, but currently the cadence is Security vulnerabilities and patches and that kind of stuff Are done on the kind of regular Windows update and then The major browser releases are every year so that's currently the plan I I don't know that's going to shorten any but a year is better than it was so Other questions. Yes So can we force older browsers to just updates to newer versions of IE and I'll show you this site here This is another site that my team maintains And this is IE six Countdown.com We're trying dear god. We're trying And you know you can look at it here in the US. It's point oh two percent Canada's point oh two percent Norway anybody from Norway Zero point zero good job All right Finland point oh one Russia one point seven not bad China. Holy crap. What's going on there? It's XP and more more importantly than just XP. It's Illegal XP pirate XP and so they don't get updates and so they're all still stuck on IE six Rah Anyways, the rest of all of this outside of China is pretty much contained to like governments and Hotel lobbies and stuff Yeah, so all right, so so back to your question here Yes, we want to move people off as fast as possible however, we can't just force them to update because they have written internal a lot of corporations have written internal websites that are Relying upon some feature that was actually a bug or something In IE six seven or eight right once we get them to nine We're gonna be much better shape. Okay, because you know nine did not have full support for everything But it was actually, you know fairly bug-free and fairly, you know close to standards on the things that it did supports 10 and 11 much better much more fluid and in fact, you know, one of the things that we're doing here is if I go into the developer tools You notice that the Dock mode There's a tin and there's edge. So we're just gonna do edge here Once they get to edge the idea is that that is the dock mode going forward Okay, so you'll be able to seamlessly upgrade from 11 to 12 to 13 or whatever we end up calling them. Okay. Yes Yeah, so so back back to the statement down Here ever in updates. So the idea is is that once we get to 11 Unless you explicitly go turn it off Unless you go say I want to handicap myself and shoot myself in the foot We're going to update your browser and we'll just evergreen update you unless you're stupid Okay, all right. Yes Hang on I realize that I'm what's between you and beer, but I'm happy to answer questions as long as you know But I'm not offended if you get up and leave. Yes Yeah, so when when can we can you drop support for Internet Explorer 8? Yeah, so I don't I don't have good telemetry data on what that path is at the moment We're watching it very closely as well and we're trying to move everybody up to 10. I mean as of March Okay, next year XP will be out of support. So most corporations will be forced to do an upgrade at that point in time to Windows 7 at which point there are more options available to them. Okay, so you know that there's there's a I Think as of March will be it will have a better story But I do think it's going to be a lot longer than that before we can actually drop it from support from our websites When should you drop it? Go back to your analytics. Look at the number of users Yes Yeah, and if you're if you're programming predominately for the government or banks You're in a world of hurt so Watch your analytics know your users and support accordingly Okay All right. Thank you very much again Josh Holmes Feel free to reach out with questions. Happy to answer. I'm around at the booth all day tomorrow Definitely come by. Thank you