Our Browsers Lie

Our Problem

As UI Designers, UX Designers, and Web Developers our main goal is to provide the best experience possible to the users of our products. Sadly our first means of determining who this user is is their browser. Browsers lie and omit. Let us count the ways:

1. They tell us through the user agent that they are someone else
2. Our phones tell us they are desktops because they don’t use the mobile media type, even though we are all walking around with them in our pockets
3. Our desktops now support touch events, even though there is a mouse connected, and the person really likes to use it more than putting greasy fingerprints on their fancy monitor
4. Our tablets and phones tell us that they are big monitors because they support higher resolutions than our old computers

Methods of Failure

So here are the tools we have to solve the problem, and they are terrible tools.

• User Agent Detection: Massive fail for years now, because of #1, and it gets worse every year (IE11 posing as Mozilla)
• Media Queries: These fail because of #4 above.
• JavaScript Feature Detection: These fail because of new browsers merging the touch and click events, as well as #3

My Proposal

Here’s what I propose we do about it.

• Media queries:  Because the screen size information is still valuable, but inadequate for mobile/touch detection
• JavaScript Feature Detection: Knowing if a device potentially supports touch events is informative, but may lead to false positives
• A Toggle: Let the user decide. As a user, I know how I use my computer, and even if my computer/browser supports touch I may not use it because I have a mouse connected to my phone/tablet/desktop

My Wish

If I could influence the browser and OS developers to make the world a kinder gentler world for us lowly UI/UX Designers/Web developers I would ask them to stop lying to us.

1. Make the user agent tell us the truth: OS (desktop/mobile, version, bits), Browser (brand, version), Hardware (mouse, touch)
2. Give us back our mobile media query: My phone has a screen, yes, but it is a mobile screen, not a 19-30″ monitor so don’t tell me it’s the same