Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Understanding user agent detection

From: Mobile Web Design & Development Fundamentals

Video: Understanding user agent detection

If you're building a mobile web site and you're following the content adaptation strategy of either not doing anything to your existing content or using the multi-server approach where you're styling the content using media queries for the various form factors, you can usually get away without having to do any server-side detection. There are cases, however, where doing server-side mobile device detection is unavoidable. And if you're, for example, building a web site where you going to redirect the user to a mobile-specific version of your site based upon whether or not they're using a mobile device then doing server-side detection is something you need to look into, and we're going to cover how to do that in next few examples.

Understanding user agent detection

If you're building a mobile web site and you're following the content adaptation strategy of either not doing anything to your existing content or using the multi-server approach where you're styling the content using media queries for the various form factors, you can usually get away without having to do any server-side detection. There are cases, however, where doing server-side mobile device detection is unavoidable. And if you're, for example, building a web site where you going to redirect the user to a mobile-specific version of your site based upon whether or not they're using a mobile device then doing server-side detection is something you need to look into, and we're going to cover how to do that in next few examples.

We're going to start off by taking a look at what's server-side mobile device detection actually is, and then in next few examples we'll see how to accomplish it using technologies such as PHP and ASP.net. Detecting a mobile device on the server is accomplished by examining the incoming user agent from the HTTP request, and you should to try to use this as a last resort. If you can do client-side capability detection and either use JavaScript or media queries to style your content for the mobile device, then you should try to go that route first, because using server-side user agent detection can be a bit tricky, and it's inherently backward looking and it's hard try to get right for future-proofing.

Depending on the level of detail your web site needs, there is two things you can do. You can either use the user agent information to create tiers of devices you support. In other words, you can look for devices like iPhones and Androids and Blackberries and Windows Phones and so on and put them in the top tier because they can support rich HTML5 and then detect older devices like Nokia s60's and various Samsung device and put them in the next tier down, because they support XHTML Mobile Profile. Or you can use a third part library like the WURFL, which is the Wireless Uniform Resource File, to get detail device data.

Sites like the WURFUL maintained a huge database of known devices and what those devices can do--how big your screens are, what their image capacity is all that kind of stuff--and we'll take a look that in a little bit. Based upon the user agent device, you can then redirect the user to a mobile- specific portion of your site, or you can customize the returned HTML. Now I should point out that even if you do server-side UA detection, you should do client-side detection too if possible. They're not mutual exclusive.

You can do client-side detection for features and you can do server-side detection for redirecting. Let's take a look at how user agent detection works. Suppose you're using a browser, one of these browsers here, and you've got a web server. When you make a request to the server for a web page, your browser essentially says to the server, "Hi, this is who I am, and this is the web page that I want to see," and the server takes a look at the incoming request and takes a look at the part called the user agent and can make intelligent decisions based upon what it sees in the user agent.

The user agent string identifies the browser that's making the request, so in the case of two separate browsers-- let's take IE and Safari as two examples-- the IE browser on the desktop would identify itself as MSIE 9.0, using the Trident 5.0 rendering engine, and running on this version of Windows. The mobile version looks a little bit different. You can see that the MSIE 9 tag is still there, only in this case the operating system is different--it identifies itself as Windows phone OS.

The rendering engine is the same, Trident 5.0, and it also includes a tag that says it's IEMobile version 9. It also includes some make and model information. In the case of Safari, the desktop version might identify itself as running on a particular OS. In this case, it's running on Windows, and is this version of Windows, and it's using this version of the WebKit rendering engine. And then here's the Safari version string right down here, it's the last thing, it says Safari, and this is the build number.

Now in the case of the mobile version of Safari, you can see that the user agent is slightly different. In this case, it identifies itself right upfront has being an iPhone and it's running on the CPU of iPhone type it gives an iOS version. It also says that using this version of the WebKit rendering engine, and it has the Safari version string down here at the end. So you can see that using user agent strings, they're pretty complex beasts, but by looking for key pieces, such as this iPhone keyword or this IEMobile keyword up here, you can make intelligent decisions of how to redirect the user to different portions of the web site.

As I mentioned earlier, there are some issues with user-agent-based detection, so let's take a look at those make sure we have to going to understanding of them. Although there is a generally accepted format to user agent strings, as you saw in the previous example, each one is different. And in fact, browsers can send whatever they want and pretend to be someone else. And in fact, we even saw this earlier in the course when we saw how to do mobile development using desktop browsers. Parsing user agent strings can be tricky. It usually involves writing some regular expression code, or some other advanced string manipulation code, and if you get one part wrong then you might mis-identify a browser or send the user to the wrong place.

Parsing user strings is not an exact science; there's some art involved there. It also inherently backward looking. If a new browser gets introduced, you need to update your logic to know how to look for it. So it's hard to take browser user agent detection and make it future-proofed. Because of these issues, there are some server-side detection best practices that you should follow, and I'll list some of those here. First, don't try to look for exact user agent strings. The strings may change from device to device and some user agent strings are generated dynamically, or include information that will change, based upon the device it's on.

Windows Phone, for example, sends a different user agent string with the make and model of the phone tacked onto the end of the string. So if you're looking for exact user agent string using a straight string compare, you might miss user agents that you try to look for. You should use the user information as just a first line of detection. Server-side detection is not a subject to for also doing client-side feature checking. In other words, just because you detect the fact that the request is coming in from the iPhone, you shouldn't make assumptions about what that phone can do or what features it has installed.

It may or may not have a gyroscope. It may or may not support some other feature. You should always check on the client side as well. You should use the information in user agents to try to group devices into classes of support, instead of trying to target each device with different specialized markup. You should just use different CSS if you're trying to deliver tailored experiences. So for example, if it's a business requirement that your web site look a bit more like an iPhone's native experienced when it's viewed under an iPhone and look a little bit different for Android and look little bit different for Windows Phone and look a little bit different for other phones like Blackberry, then it's okay to do that. Just make sure that you're doing it using separated CSS logic instead of specialized markup that's going to be hard to maintain.

And finally, you should strongly consider using a third-party solution instead of your own. In fact, let me show you a couple resources that are pretty good for this purpose. The first one I'm going to show you is the official homepage for the wireless uniform resource file, or WURFL and you can see the URL up here is wurfl.sourceforge.net. The WURFL database works on PHP, works on Java, works on ASP.net. It works across a verity of server architectures, and it's a pretty complex database that lets you detect features that are present on a lot of phones, by using their database.

You simply call the WURFL with the incoming user agent and the WURFL will come back and tell you what phone it is, what kind of capabilities it has, and so on and so forth. It is an open-source project and is available free for download, although there is a commercial support option if you're interested in that. Another good option is the Detect Mobile Browsers library, which you can see the URL here: it's detectmobilebrowsers.mobi. And again, this is free for personal use, and there is a slight charge for if you're using it commercially.

But again, this is code that will take incoming user agents and tell you whether or not they're mobile or not, and basically that's pretty much all it does. It doesn't do any kind of advanced database detection. It just says, "Hey this is a user agent and I know that this is a mobile device or a desktop browser or something in between." Now that we have a basic understanding of what user agent detection is and why you would use it, the next couple of examples in the chapter will show you how to implement this using PHP and ASP.net.

Show transcript

This video is part of

Image for Mobile Web Design & Development Fundamentals
Mobile Web Design & Development Fundamentals

46 video lessons · 24258 viewers

Joe Marini
Author

 
Expand all | Collapse all
  1. 2m 48s
    1. Welcome
      1m 2s
    2. Using the exercise files
      1m 46s
  2. 29m 25s
    1. Understanding the mobile context
      8m 5s
    2. A survey of mobile sites
      11m 44s
    3. Targeting mobile browsers
      4m 31s
    4. Previewing a complete mobile site
      5m 5s
  3. 27m 20s
    1. Designing for one web
      3m 43s
    2. Using well-defined web standards
      3m 45s
    3. Designing mobile-friendly pages
      3m 40s
    4. Being crisp, clean, and succinct
      5m 45s
    5. Minimizing input where possible
      6m 47s
    6. Focusing on the core scenarios
      3m 40s
  4. 1h 13m
    1. Installing the tools
      3m 52s
    2. Setting up a local web server
      9m 13s
    3. Installing device emulators
      17m 5s
    4. Using device emulators
      13m 9s
    5. Downloading Modernizr and Mobile Boilerplate
      6m 22s
    6. Building a first mobile web page
      5m 43s
    7. Developing mobile pages with desktop browsers
      8m 6s
    8. Exploring useful mobile web development resources
      10m 23s
  5. 53m 26s
    1. Reviewing mobile markup languages
      5m 10s
    2. Understanding content adaptation approaches
      10m 32s
    3. Controlling the viewport layout
      12m 50s
    4. Designing forms
      13m 30s
    5. Using CSS media queries
      11m 24s
  6. 1h 11m
    1. Detecting client capabilities with script
      10m 8s
    2. Caching information with local storage
      9m 16s
    3. Determining position with geolocation
      12m 52s
    4. Minimizing HTTP requests with data URLs
      7m 39s
    5. Understanding user agent detection
      9m 8s
    6. Using server-side detection with PHP
      6m 52s
    7. Using server-side detection with ASP.NET
      4m 54s
    8. Using HTML5 Boilerplate for mobile
      11m 6s
  7. 39m 22s
    1. Measuring performance
      7m 41s
    2. Creating full-screen web apps
      6m 30s
    3. Customizing the user interface
      5m 14s
    4. Detecting orientation changes
      3m 58s
    5. Detecting device movement
      5m 21s
    6. Using touch events
      10m 38s
  8. 47m 14s
    1. Taking a look at the finished site
      7m 40s
    2. Examining the header and background image style on the Home page
      10m 10s
    3. Examining the hover effect and layout styles on the Tours page
      6m 42s
    4. Examining mobile forms on the Contact page
      9m 45s
    5. Viewing and testing the mobile site on emulators
      8m 11s
    6. Viewing the site on devices
      4m 46s
  9. 2m 34s
    1. Goodbye
      2m 34s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Mobile Web Design & Development Fundamentals.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.