How to Find the Best Web Host for Your Website
 
Testing Methodology for Redesigning a Website
Choose a Theme and Page Template for Your iWeb Site in iLife '11

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).

[Credit: © Monster Beverage Company ]
Credit: © Monster Beverage Company

While the IP detection method will give you a general region associated with the IP address, it is also possible to obtain a user’s specific GPS location by using a combination of JavaScript and HTML5. The JavaScript method, however, does require that you first ask the user’s permission. While this method requires the extra step of asking permission from the user, it does give you pinpoint-accurate location results, while the IP-detection method is accurate only at a general regional level. Although most of us are familiar with a cellphone’s ability to get GPS location data quickly by using Wi-Fi hotspot and cell-tower data, you might be wondering how your desktop computer can get such data. The answer is that your Internet-connected home and office computer shares its IP data with nearby wireless networks. In addition to nearby Wi-Fi networks, the Geolocation API makes use of several location information sources, depending on the device (smartphone or desktop) — including satellite data, radio tracking devices, and Internet hardware. Can you say “Big Brother is watching?”

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.

The Andersson-Wise website is an elegant example of responsive design. The site displays in two col
Credit: © Andersson-Wise Architects
The Andersson-Wise website is an elegant example of responsive design. The site displays in two columns within large browser windows.
The same Andersson-Wise website reconfigures itself in real time to a single-column view when the b
Credit: © Andersson-Wise Architects
The same Andersson-Wise website reconfigures itself in real time to a single-column view when the browser window gets smaller.
When viewed on an iPhone, the Andersson-Wise website displays in a single-column layout. [Credit: &
Credit: © Andersson-Wise Architects
When viewed on an iPhone, the Andersson-Wise website displays in a single-column layout.
blog comments powered by Disqus
Web Design: Using External and Internal Style Sheets in CSS
Seed Your Wiki with Info to Attract Users
Basic Web Design Tips
Who Are the Stakeholders in Your Website Venture?
Add Searching Tools with Regular Expression Operators in JavaScript
Advertisement

Inside Dummies.com