Web Design: The Basics of Browser and Location Detection
When you browse the Internet on your mobile phone, many websites automatically display their mobile-friendly version. Behind the scenes, developers placed a script in the site that runs to determine what kind of browser you’re using — iPhone, iPad, Android, Blackberry, or even desktop browsers such as Firefox and Internet Explorer. Depending on the queried result, the script then redirects the user to the appropriate website to guarantee an optimal experience. For example, it’s not uncommon to have several versions of a website. In addition to a mobile-specific site, you may have a site optimized for newer desktop browsers, supporting many of the latest HTML and CSS features — and one simplified for older browsers.
IP and GPS detection
Depending on the nature of your products and services, a useful detail to detect is the user’s general location in the world. Many sites, for example, are global sites that serve a lot of different countries and languages. It’s possible to create a single website that displays entirely different content — in the user’s native language — simply by using an IP (Internet Protocol) detection script that figures out the user’s location. The way it works is that when someone gets Internet service, he or she is assigned an IP address. There are databases of IP address locations that the script can check against as a means of determining the general user location.
The MonsterEnergy website, for example, works this way. If you are in Spain and type MonsterEnergy.com into your browser, you get local Spanish news, events, and imagery captioned in Spanish. The IP-detection script tells the site which country and language content to pull in from its content management system (CMS).
Responsive web design
A more recent trend is the notion of responsive design in which a web page can sense the browser size and screen resolution — even as it changes when a user resizes the browser window — and dynamically reconfigure its layout to accommodate the new size. The magic that makes this possible is the Media Queries portion of the CSS3 specification. A media query is a CSS code that detects the browser’s size and, based on the result, tells the page to load the appropriate style sheet such as widescreen.css as opposed to mobilescreen.css. These different style sheets contain different layout systems, font sizes, and image optimization settings. Therefore, in theory, no matter how many different devices are introduced on the market, each with a unique screen space, it’s possible to simply create a new CSS document that optimizes your website to accommodate it.