Making Websites Location Aware With HTML5 Geolocation

Assumption can be a risky business in the world of UX, but some assumptions can enable you to deliver a more tailored user experience to your visitors. Aaron Lumsden is going to look at enhancing the user experience by making your websites location aware. Around the same time that HTM5 was announced, another API was introduced from W3C. He's pretty sure you may have heard of it; the Geolocation API. This allows your site to receive geographic positioning information using JavaScript.

Aaron Lumsden starts with a wrapper to center the design. He has chosen to do this at 960px wide but you can opt to use whatever size suits your design. Within this ‘wrapper’ he has created a div which is where the map will sit once it has been generated. He has given this an ID of ‘Map’. Within the ‘Map’ div he then has a span that Aaron Lumsden has given a class called ‘helper’. This will be a little helper guide that will instruct the user what they need to do. This may seem a little unnecessary but it’s always good practice to help users when possible.