Example user agent string sent from a web browser during an HTTP request:
Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US) AppleWebKit/532.5 (KHTML, like Gecko) Chrome/4.0.249.89 Safari/532.5

The above example, for instance, provides information such as browser and browser version, user locale (language), OS, system architecture and the layout engine used. When authoring documents for the Web, information from the user agent string can be valuable in determining how best to mark-up documents.

Getting the information is easy.

Collecting user agent strings

Two methods for accessing the user agent string include:

1. From the HTTP request header’s User-Agent field; and
2. Using DOM and JavaScript.

Reading from the User-Agent field

A benefit of using the HTTP header to gather data is simplicity of design.

HTTP request header showing the User-Agent field (in bold):

GET / HTTP/1.1
Host: livehttpheaders.mozdev.org
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US) AppleWebKit/532.5 (KHTML, like Gecko) Chrome/4.0.249.89 Safari/532.5
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive: 300
Connection: keep-alive

Using the HTTP header the user agent is transmitted directly to the HTTP server on page request, making it possible for servers to output the user agent string to a log file for later analysis. The user agent string alone provides enough information to implement on websites valuable browser support strategies such as graded browser support.

User agent retrieval using DOM and JavaScript

Using DOM and JavaScript, on the other hand, add additional development complexity, but provide more detailed and valuable analytic data, in addition to the user agent string alone. Tools like Urchin (now Google Analytics) utilize JavaScript and the DOM to gather analytic data about visitors.

Bookmark the following link to create a bookmarklet that will retrieve the user agent from a browser: javascript:alert(navigator.userAgent).

Regardless of the collection approach used, methods for extracting data from the string remain similar.

Data extraction methods

Once the user agent string(s) are collected, data extraction may take place. Two methods for reading and extracting information from the user agent string include brute force and pattern recognition:

• Under the brute force approach the user agent string is compared programmatically to a database of known strings. Though it offers a relatively simple implementation, the brute force approach can be difficult to maintain and becomes increasingly inefficient as comparison data sets grow larger.
• Thanks to RFC 2616 and preceding RFCs, and de facto standards for formatting user agent strings, another method known as pattern recognition is possible. Using pattern recognition the user agent string is broken into its component pieces and heuristics applied to gather information. Though more complex to implement than the brute force approach, pattern recognition does not suffer from the same problems in efficiency and maintainability in the long-run.

Due to its drawbacks in the application of extracting data form user agent strings, the brute force approach will not be discussed further in this article.

Pattern recognition on the user agent string

Check out Identify User Agent by string format recognition for an example of user agent pattern recognition. Though a little outdated, the article provides additional depth, in addition to some useful programming techniques and lax copyright restrictions.

User agent spoofing

Impersonating browsers and mobile devices is simple with Firefox. Just download User Agent Switcher plug-in and put it to the test at useragentstring.com. See Web Development and Debugging Tools for a list of tools useful for front end development.

Screenshot of a Lightview modal dialog

Manage focus and allow tab navigation

Guide the user experience by managing focusable page elements using JavaScript.

• Tabbing should allow the user to navigate back to the browser’s location bar and other tabbable toolbars.
• When the modal dialog is shown, the user should not be able to tab to document content outside the dialog content area.
• When the dialog is hidden, focus should be restored to the initial element used to activate the modal dialog, the original tab ordering should be restored and the user should no longer be able to tab to content inside the modal dialog.

Disable elements outside the dialog

Guide user interaction with page elements outside of the modal dialog and keep focus in the lightbox window.

• Display a translucent overlay above the page while the dialog is shown, giving the perception of modality while maintaining frame of reference to existing page content.
• Prevent interaction with elements outside the modal dialog using script to do the following:
  • Save and then temporarily set a new tab order for all applicable elements;
  • Save and then temporarily set the disabled flag on all applicable elements; and
  • Save and then temporarily update applicable hyperlink click handlers to return false.

Give users an easy way out

Give users the ability to exit unwanted modal dialogs without thinking much about it.

• Use a graphical [x] link the user can click to initiate the hide method. In addition, consider using the graphic as a background image for a text-based link (e.g. “Close”) to help improve comprehensibility slightly for both sighted and non-sighted users while maintaining application scalability with a single link implementation.
• While the dialog is displayed, listen for the [Esc] key. If it is pressed, exit the modal dialog and restore the previous display state.
• If the Lightbox was activated by the user, make the close link the next focusable element in the tab order.

Provide graceful error recovery

Script display methods (e.g. hide/show) should listen for script errors and, upon error, close the modal dialog and restore previous settings–including any previously focused element. Utilize the try/catch block to make it happen, but beware that suppressed errors increases debugging complexity.

Related articles

See also Roger Johansson’s Lightboxes and keyboard accessibility for additional considerations in improving Lightbox usability, with a focus on keyboard accessibility.

Recommended scripts

• ColorBox — A light-weight, customizable lightbox plugin for jQuery
• Lightview — Lightview was built to change the way you overlay content on a website

Tools for Firefox and Chrome

Build for standards.

• Chrome includes a powerful set of development tools out of the box, including remote debugging.
• Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse.
• HTML Validator is a Mozilla extension that adds HTML validation inside Firefox and Mozilla.
• Web Developer adds a menu and a toolbar with various web developer tools.
• IE Tab, an extension from Taiwan, embeds Internet Explorer in a Mozilla/Firefox tab. Handy but doesn’t work on a Mac.
• ColorZilla provides Advanced Eyedropper, Color Picker, Palette Viewer and other colorful goodies for your Firefox.
• YSlow analyzes web pages and tells you why they’re slow.
• HttpFox monitors and analyzes all incoming and outgoing HTTP traffic between the browser and the web servers.
• MultiFirefox is a small launcher utility that allows you to run multiple versions of Firefox side-by-side (Mac only).
• User Agent Switcher to spoof user agent strings for browser support testing.
• Fangs renders a text version of a web page similar to how a screen reader would read it.
• Google Toolbar to visualize Page Rank.

Tools for Internet Explorer

Ensure application compatibility.

• Internet Explorer Developer Toolbar provides a variety of tools for quickly creating, understanding, and troubleshooting Web pages. It also allows for the inspection of the MSIE-specific CSS passed in through the use of Conditional Comments.
• A look-alike is just that, not the real thing. Here are the Internet Explorer Application Compatibility VPC Images, made available by Microsoft for use in testing browser compatibility with MSIE.
• HttpWatch is a tool for monitoring HTTP traffic in IE.

Performance & Testing

Polish it to a bright shine.

• JSLint helps in checking how bad your script sucks. Just copy/paste and pray.
• WebPagetest will help access how slow your site is once it’s built.
• Validator.nu (X)HTML5 Validator validates HTML5.
• HTML5 outliner provides an easy to use document outline.
• Selenium IDE for automated testing, helping unlock the potential for test-driven development in the UI layer.
• Paros is a simplistic proxy tool that allows you to trap raw HTTP request and response headers for analysis and testing.