Web Hack Wednesday

Browser and Device Detection in Websites

Rate this post
(Video Transcript)
Hello and welcome to Web Hack Wednesday. I’m Martin Beeby.

>> I’m Martin Kearn.

>> This week, I met up with James Rosewell from 51 Degrees to discuss browser detection, which is a little known phenomenon that we’ve learned an awful lot about over the past six months but anyway, over to the other studio where I will transport. We first met down in Brighton, I think I was doing a talk.

>> Yeah, reasons to.

>> Reasons to be creative but, I showed off a website which is called modern day, now called dev.microsoftedge.com. One of the tests that we run is browser detection, we detect the website, which you scan, is doing any form of browser detection. It’s a pretty naive test in that it just looks for navigator user agent. And you came up after the sort of talk and just said, I’ve got a company, which I do a little bit more stuff with browser detection.

>> That’s right. So the screen we’ve got here is the one you just referred to, it’s looking at navigator.useragent and typically, what the JavaScript will be doing is looking for a series of characters within that user agent. So if I take a Microsoft user agent, the one I’ve got here is from a Windows Phone, we can see it’s made up of a series of different substrings. And a regular expression or just a string query that’s looking for Android, for example, would pick that up in this user agent, or maybe iPhone, as well. One from a Windows Phone linear device and it would detect it as that type of device and clearly, we know because we’ve actually seen the physical device and have access to them, that that’s not the case. It is in fact a Windows phone, and therefore, what we do is device detection is going a lot further than using regular expressions and just simple string comparisons.

>> I suppose since I’ve been involved in web development, this has been a problem. As a web developer, you sometimes might wanna know what device, what browser, what thing are they using to connect to me because then you could potentially make assumptions about what kind of content you should serve. And I guess the user agent string problem comes from the fact that browsers know that you do this as web developers, so they pretend to be other browsers so that you serve them the same content, cuz ultimately, a browser manufacturer wants the same content as another browser manufacturer. I know back in the day, Internet Explorer 5 wanted to be just like Netscape. So generally, the general principle is, if you are doing browser detection, and you’re doing it naively, as in you’re just doing in your JavaScript code, you are writing navigateyour.useragent and you have written that and you’re not a library manufacturer. You don’t really know what you’re doing, and you’re just detecting if IE, if Chrome, if Firefox, then you’re probably not doing a great job and probably something you should avoid.

>> Yeah, and you should be using feature detection to find out whether the device actually has a functionality. So it’s not a particularly sensible thing to do. I think the thing you’re sort of saying there is by detecting for the presence of iPhone or detecting the presence of Opera, has a very static check. If time moves on, do you really update your code as frequently as browser updates come out?

>> Yeah.

>> The answer is, you don’t.

>> Yeah.

>> If you have a database that updates daily, weekly, monthly, then that database can be refreshed and updated as long as there’s a sensible, professional organization that is standing behind it.

>> Yeah. So is that roughly what your company are doing?

>> We are a company that does two things. Firstly, we keep a database of everything, so devices, browsers, operating systems, crawlers we track, as well. We have over 30,000 different physical web enabled devices that we’re tracking, the separate models of device, all the major browsers, many of the popular web applications as well, and also the crawlers.

>> My understanding is that people are using this kind of information to not just determine features of browsers, but more to hone the performance and the kind of content that’s being served.

>> If you take retail or e-commerce, we have wiggle.com as a customer. They’re a European cycle company, a cycling retailer.

>> I know them, not from personal use, but there is a lot of middle aged men in Lycra, which work in our design team, [LAUGH] who always seem to be on Wiggle [LAUGH] ordering really expensive pedals and things.

>> And that’s a really good example. So they have great brand.

>> Yeah.

>> Cuz it’s done really well. Now if you sell cycling products at one end, you might have a 20 pound, or $20 pair of gloves, on the other end, you might have a 2,000, 3,000 pound titanium mountain bike.

>> Yeah.

>> Now through analysis, understanding how the type of device impacts the purchase decision is quite important. What you find in the autumn just before you move to daylight saving time, is there’s a higher propensity of buying new lights, buying more autumn or winter clothing, and that’s done on the commute on the way home.

>> Right.

>> But a more considered purchase, like a titanium mountain bike-

>> You have to be pretty wealthy to make that decision.

>> You do and you’re probably gonna research it a bit more.

>> Yeah.

>> Not just the interface for the e-commerce experience is laid out so that it’s faster on mobile and it’s optimized for six square inches of screen space, rather than 100 square inches of screen space, where you’ve got different user space [INAUDIBLE] that you can use. We’ve got different bandwidth kind of assumptions that you can make all has an impact, as well as the catalogue that’s displayed and the products that are given more or less prominence. And that has a bottom line impact on revenue, particularly when there’s lower value items that are more susceptible to the impulse purchase.

>> It seems to me at least, I’ve been involved in web development for quite some time and there’s definitely a see-saw sort of which happens where there’s kind of people will favor doing stuff in the client side or favor doing stuff on the server side. At the moment, there’s a big trend around responsive web development. There is stuff that you can do on the server which will improve the experience, as well. I think it’s far too easy for people to just discount the server side of things, and just go, I want to be able to detect everything in the browser, on the front end of stuff, and just ignore the server side entirely.

>> To optimize for revenue, you need to do both. On the 7 of October, Google reported by authoritative voices like the BBC, the Guardian, The Wall Street Journal and the launched the accelerated mobile pages, which is the screen I’ve got up here.

>> Yep.

>> And what they’re saying is that if a page takes too long to load and it loses the reader, then the publisher has lost the opportunity to find revenue.

>> Yeah.

>> And when you drill into accelerated mobile pages, it’s basically advocating a separate page, not necessarily a separate URL or redirection or anything like that, a separate page for mobile devices which are specifically optimized for speed.

>> Can you show us how you do this yourself?

>> Yes, I can. I’ll attempt to create a new web project, okay. I’ll just use web forms to start, I’ll do MVC. We’re going into NuGet and we search for 51 Degrees. Install the top one that comes up, the bottom one is for web matrix.

>> Okay.

>> So 51 Degrees is now being installed, and what I can now do, so I can go to my default page. And I’ll just put in this bit at the top of the heading. And we call Request.Browser IsmobileDevice. This is a interface that kind of is part of the legacy of the .NET web platform.

>> Yeah, I remember seeing this is a big thing in ASP.NET 3 or something like that.

>> Two, I believe it was.

>> Two, was it? Okay.

>> It goes back a little bit further. So that’s the interface effectively, and if I now bring up this page, I’ll add the graphic.

>> So that API though, isn’t yours.

>> That is the Microsoft interface, 51 Degrees is hooking into the pipe in the background.

>> Right, and injects, so that would work without 51 Degrees, to some extent.

>> Still wouldn’t be accurate.

>> [LAUGH] Exactly, but then someone just makes sure that they’ve taken that step of actually installing 51 Degrees, if they want accuracy.

>> That’s right, but it’s a perfectly fine interface, and of course, it’s not kept up with modern changes. So if I now use, then that value now become true.

>> Okay.

>> Yeah, and that’s the simplest deployment.

>> And you’ve switched there to mobile master page in ASP, so that’s a thing it’s doing for you. That’s an ASP.NET thing which is happening.

>> Yes, that’s the standard bit there.

>> That switching though, that’s quite interesting though. You’re calling your API then but then the switching it’s still using the same [CROSSTALK].

>> [CROSSTALK] Stuff to the public interface is fully supported.

>> So there might be people out there which are actually using this but they’re using the Microsoft Apache today, not realizing that it’s not accurate, or that you need to plug in your new Git package and that would automatically just become better. Yeah. So, it’s right. And the new get package includes that free Linux data file.

>> Right.

>> If they wanted a broader set of properties, then we have other subscriptions available as well.

>> Is your premium one.

>> Yeah, exactly, so the free light in basic which out of our cloud hold up they have it in the characteristic. So, the premium in what just really right now in business think that remedy should and.

>> Right, yep.

>> Looking at are updated weekly or daily. And you can just plug them into the system. So, if I show that, so I’m gonna change the data file in this particular object, and I’ll switch it from the free one that we installed with [INAUDIBLE]. Okay, so it’s just a data file that sits in the update folder. I’m putting in the new data file, replacing that just for good measure.

>> Do you write a as you send them a new data file on regular occasions, then?

>> What they do, is they will take their license queue.

>> Yep.

>> And then, you will deploy it in the application. And then the system will take care of updating itself.

>> Right, okay.

>> So, if you’re an enterprise customer, your web server will update its data file. And then the provider that does the device detection will be updated in the background. It won’t require, the worker process restart or anything like that.

>> Right, okay, so it’s all gonna happen kind of seamlessly.

>> Yeah, so that’s my Request.Browser. I mean, I’ll put another heading in underneath that, so. It’s all about his mobile device. Now, if I wanted to get device type, device type is something that isn’t supported by the Microsoft interface.

>> Right.

>> Because there was only mobile back.net.

>> Two?

>> .net, two yeah. So, if I make that change and come back and refresh that page.

>> And also dynamics are clearly working.


>> We’ll cover dynamics in a minute. So, there we can see, we’ve got MobileDevice is false, the DeviceType is Desktop.

>> Yeah.

>> We’re now gonna do the emulation. There’s that page. I can see device type is smart phone. Device if I change to tablet. It’s probably a good point to talk about iPhone, for example, and there are now many, many different types of iPhone out there, and iPads. And Apple have taken a choice where they will end the 3D user agent. Enable you to identify the iPhone OS, rather than the model of the iPhone. So, you’ve got the difference between a five or four or a six.

>> Yep.

>> Or a Maxi or whatever the classification is. And so, that point we have an extension where we can use JavaScript to get some extra data from the browser.

>> Right.

>> That helps inform the decision. And even then, it’s not always possible to work out the precise model device.

>> Yeah, okay.

>> And we certainly don’t advocate doing things like CPU stress testing to work out which.

>> [LAUGH] That’s one way, isn’t it?

>> Some desperate people have resorted to doing that.

>> Really? Wow.

>> And rather ironically, of course, it slows down the browser by easily 100 ms.

>> Yeah, of course. Sir and it’s just not a smart way to go. Given that you’re trying to improve performance.

>> Yeah, exactly.

>> So, you mentioned dynamics.

>> Yep.

>> And so, let’s move on and create a mpc website.

>> Okay.

>> And it’s so fine, so with so. And so, we now got our MVC application, of course, first thing we need to do is to install [INAUDIBLE]. Exactly the same as before. So, the top one?

>> Yep.

>> I love it how everyone always closed down their readme.

>> Yeah.

>> [LAUGH]

>> I read that one.

>> Yeah, but they say, I would have said that. Now, you read the readme, but I’m gonna close it down.

>> So, there’s a bigger box in there because, we’ll talk a little bit about memory before we’d submit it. But, we used to embed the basic data file in the assembly.

>> Yep.

>> Which meant you had about seven megabytes, which was part of the assembly.

>> Yep.

>> And we did that because we didn’t want people to get into trouble because they didn’t have the data file.

>> Right, right. As the data file got bigger, as the device Out something massively getting involved and our number one support group for that platform is it’s not finding a data file.

>> Right.

>> Which is what the other box is.

>> Yeah.

>> So, yeah.

>> Read the manual.

>> Read the manual, exactly. So, we have gotten 51 degrees installed, and I’ll start up with the controller, and I’ve some got code I prepared earlier. [INAUDIBLE] And when we intercept the initialize and it overrides and initializes the controller. [INAUDIBLE] What we’re doing is adding to the viewBag the results of device detection. Whoops, yep, just erase all that. And so, we take the results of device detection, and remember, we’re doing this explicitly in MS Studio, being part of the pipeline.

>> And just up your font size just a tad.

>> Is there a great feature inside of this that I’m about to show you. You’ve seen what you just did. Now, you hold down the menu, right. Just in the top core quick column, just put the word font. And then, font normal colors that’s it. That just updates, so it’s not like 16.

>> [LAUGH] Greatest features.

>> Yeah, I know.

>> If you just take it from ten, say, ads. [INAUDIBLE] It will be a little bit big. This is the [INAUDIBLE].

>> There we go.

>> You might have to adjust your windows a little bit, but I find that this worked out [INAUDIBLE]. But, that’s one of the best features in Visual Studio, is that little box. If you never need to look across a menu ever again. Just the type word roughly and you find it there rather than having to dig through any-

>> That’s fantastic. It’s probably only me that’s learning about every one of our watchers and viewers-

>> [LAUGH]

>> So, what we’re seeing here with this code is with basically taking the results of device detection out against the DVAB.

>> Yep, okay.

>> Which we can then access in view. I don’t need to create a model cuz I’m just using the 51 degrees. Result, but if you wanna create your own model to add some extra information, then of course you can. And to I’ll come into the view. And I’ll do the same thing again. I’ll just put a big, old heading in. [INAUDIBLE] mobile and.

>> [INAUDIBLE] And got my line to stop.

>> Yeah, okay.

>> So, we’re accessing that object three b moving back and then just mention what I talked about earlier. So, the difference value for example that’s only accessible through here. I’ve always got a problem typing today. And so, we could have different the method I could have as well. Okay, you can see here, ASP method is exact.

>> Right.

>> So, that’s a precise match, and it doesn’t make a difference at all.

>> So, that was why if you determined, okay, this is Chrome. Or this is a newer version that we have in our data file that appears to be like two or three different versions of Chrome out there, like difference between the version maybe what, 45.

>> I don’t even know what version of Chrome is now.

>> 46, I think.

>> 46.

>> I mean, 47 by the time this?

>> [LAUGH] 48.

>> Yeah, probably 49 now.

>> [LAUGH]

>> It’s very that you talk in a very fast cadence that way.

>> It certainly is.

>> Okay, so that’s kind of the API. We all have used it in a web forums ASP on our page. We’ve used in a NVC page using new get with those instances. We’ve got libraries with Java, NodeJS,

>> Yeah.

>> Perl.

>> Yep.

>> Well, as long as [INAUDIBLE]

>> PHP, that was my first language actually, that was the first web language I ever used, I wouldn’t know if I was looking at PAL now, even if-

>> It’s like web forms. It’s still got its place.

>> It’s still got its place, far away from me as possible.

>> [LAUGH] PHP, which still extraordinary popular. Python.

>> Yeah. And there’s a cloud API as well. I just [INAUDIBLE] restful API [INAUDIBLE] Well, we can support JavaScript as well. If I just update the data file. Here. So, we have customers like the European lotteries.

>> Yep.

>> They will use this with Angular JavaScript to help inform the way that the game card is laid out.

>> Okay.

>> But if you’re a lottery, you won’t be prevented as many cards as they possibly can, but you recognizing that you’ve got a difference between a 100 square inches of screen space and six square inches of screen space and the way you present that user interface. Even if you’re using more responsive technique. You adapted when you know what the device actually is. Okay, so here we’ve got information about price for example. We using price band.

>> That’s interesting.

>> And a heading there.

>> Do you have any, what sort of things are people using price then for? That’s a fascinating kind of thing. So, would that be making judgement calls about what they might wanna buy based upon the expense of the device?

>> In analytic, for example, so you might look at the how. Have we lost in value very go and handset like is it or like.

>> Right, so you might be using it to find out if there is a correlation. Like.

>> Yeah.

>> If I’m not, yeah, I guess you would.

>> If you were maybe a network operator that sort of stuff might interest you.

>> Mot of these things are potentially after the fact of things that you’re trying to look at potentially you would be saying well, look, this is all of the data that we have. I guess, you could use some kind of machine learning to kinda figure out well, are there correlations that we don’t understand, based upon this huge pool of data that we have? And you might find that people which are willing to spend between 350 and 399.99 on their device, but tight like a particular brand of titanium bike for example. Yeah.

>> Exactly, I mean, if you’re in advertising for example.

>> Yeah.

>> And understanding if you sort of say 100 million adverts a day or a billion ad. Time for this a day and you’re getting a two percent click through rate. Going to two point, two percent click through rate.


>> Yeah it is.

>> So, our customers that are involved in advertising company like. Companies like Ebay or size net specific media and they’re using this intelligence to make that decision.

>> So, if you’ve ever seen me speak at a conference about how bad browser detection is, I wanna say for the record that not this kind of browser detection. I won’t.

>> Thank you, Mike.

>> I’m more talking about really stupid naive browser detection not when you’re doing really smart things where you’re improving people. [SOUND] So, thank you to James from 51 degrees. Check out their website if you want any more information. That’s it for another web pop Wednesday. We’ll see you again next week when we’re discovering, discussing even another topic about the web. See you then.


Read the video

Martin Beeby (@thebeebs) and Martin Kearn (@martinkearn) host their weekly show, this week talking to James Rosewell from 51 degrees about browser detection, device detection and the difficulties in understanding what devices your users are using to browse your websites.

Comments to Browser and Device Detection in Websites

  • Whatever audio equipment you used to record this with, destroy it now, to ensure nobody ever uses it again.  Seriously, this was painful to listen to.

    dandy January 27, 2016 3:18 pm Reply
  • Subtitles would have been nice, as the sound was pathetic. Even more amusing is you provide an audio only MP3 – Good luck to anyone trying that!

    Joe January 28, 2016 12:01 am Reply
  • Yes, sorry about the audio on this one, we were not using our usual equipment. The others (a new episode every Wednesday until we run out of things to say) will be better – promise! 🙂

    MartinKearn January 28, 2016 6:27 am Reply

Leave a Comment

Your email address will not be published. Required fields are marked *

1Code.Blog - Your #1 Code Blog