Using geolocation in your website

geolocation
The Geolocation API lets you discover, with the user's consent, the user's location. You can use this functionality for things like guiding a user to their destination and geo-tagging user-created content; for example, marking where a photo was taken.

The Geolocation API also lets you see where the user is and keep tabs on them as they move around, always with the user's consent (and only while the page is open). This creates a lot of interesting use cases, such as integrating with backend systems to prepare an order for collection if the user is close by.

You need to be aware of many things when using the Geolocation API. This guide walks you through the common use cases and solutions.
TL;DR
Use geolocation when it benefits the user.
Ask for permission as a clear response to a user gesture.
Use feature detection in case a user's browser doesn't support geolocation.
Don't just learn how to implement geolocation; learn the best way to use geolocation.
Test geolocation with your site.
When to use geolocation
Find where the user is closest to a specific physical location to tailor the user experience.
Tailor information (such as news) to the user's location.
Show the position of a user on a map.
Tag data created inside your application with the user's location (that is, geo-tag a picture).
Ask permission responsibly
Recent user studies have shown that users are distrustful of sites that simply prompt the user to give away their position on page load. So what are the best practices?

Assume users will not give you their location
Many of your users won't want to give you their location, so you need to adopt a defensive development style.

Handle all errors out of the geolocation API so that you can adapt your site to this condition.
Be clear and explicit about your need for the location.
Use a fallback solution if needed.
Use a fallback if geolocation is required
We recommend that your site or application not require access to the user's current location. However, if your site or application requires the user's current location, there are third-party solutions that allow you to obtain a best guess of where the person currently is.

These solutions often work by looking at the user's IP address and mapping that to the physical addresses registered with the RIPE database. These locations are often not very accurate, normally giving you the position of the telecommunications hub or cell phone tower that is nearest to the user. In many cases, they might not even be that accurate, especially if the user is on VPN or some other proxy service.

Always request access to location on a user gesture
Make sure that users understand why you’re asking for their location, and what the benefit to them will be. Asking for it immediately on the homepage as the site loads results in a poor user experience.
Instead, give the user a clear call to action or an indication that an operation will require access to their location. The user can then more easily associate the system prompt for access with the action just initiated.

Give a clear indication that an action will request their location
In a study by the Google Ads team, when a user was asked to book a hotel room in Boston for an upcoming conference on one particular hotels site, they were prompted to share their GPS location immediately after tapping the "Find and Book" call to action on the homepage.

In some cases, the user became frustrated because they didn't understand why they were being shown hotels in San Francisco when they wanted to book a room in Boston.

A better experience is to make sure users understand why you’re asking them for their location. Add a well-known signifier that is common across devices, such as a range finder, or an explicit call to action such as “Find Near Me.”
Watching the user's location
The Geolocation API allows you to obtain the user's location (with user consent) with a single call to getCurrentPosition().

If you want to continually monitor the user's location, use the Geolocation API method, watchPosition(). It operates in a similar way to getCurrentPosition(), but it fires multiple times as the positioning software:

Gets a more accurate lock on the user.
Determines that the user's position is changing.

var watchId = navigator.geolocation.watchPosition(function(position) { document.getElementById('currentLat').innerHTML = position.coords.latitude; document.getElementById('currentLon').innerHTML = position.coords.longitude; });

When to use geolocation to watch the user's location
You want to obtain a more precise lock on the user location.
Your application needs to update the user interface based on new location information.
Your application needs to update business logic when the user enters a certain defined zone.
Best practices when using geolocation
Always clear up and conserve battery
Watching for changes to a geolocation is not a free operation. While operating systems might be introducing platform features to let applications hook in to the geo subsystem, you, as a web developer, have no idea what support the user's device has for monitoring the user's location, and, while you're watching a position, you are engaging the device in a lot of extra processing.

After you no longer need to track the user's position, call clearWatch to turn off the geolocation systems.

A useful website for BtoB

btob
1. A Defined Goal
The first step of creating or re-designing any website is defining its goal. That goal should be both qualitative and quantitative and will help you ensure you have a clear foundation and direction for the site.

There are two categories of goals to keep in mind: company goals and user goals.

What KPIs is your company working toward? What’s your ultimate revenue goal and what targets do you have for SQLs, MQLs and site visitors? 

On top of that, when a user visits your site, what do you want them to walk away knowing about your company? What should they be able to communicate about your organization to their coworker, manager or CEO? 

Those goals will help guide your content strategy, which in turn informs your information architecture.

2. Intentional Information Architecture
Information architecture is most commonly associated with your navigation and footer, but it’s more than that. It’s the folder structure your website is built on, the hierarchical organization of the content within the site.

Effective information architecture requires a deep understanding of your audience because they’re the ones your website is for. Buyer persona documentation including pain points and the ways your company addresses them provides a great guide. 

As you develop your information architecture, we recommend giving users at least two pathways through your website. 

For example, if you talk about products and solutions by name in your navigation, also provide a user-centric path, like role and industry, so users can choose their own adventure to find the content most relevant to them based on how they identify.

Additionally, avoid using internal lingo in your page names and instead use plain text that makes it clear what content a user will find on that site page.

3. High-Quality Content
Content is the most important thing on a website. It doesn’t matter how beautiful your site is, if the content is weak, it won’t achieve its objective of educating users and providing them with the necessary information to make a strategic decision about purchasing your solution.

The voice and tone of your content should be targeted toward your users, and you should use language your audience is familiar with. Clear communication won’t just help you reach users — it’ll also help you rank in search results.

Download our free e-book to learn the 10 essential elements of a successful website redesign.
Some content your website should contain include:

Homepage: The goal of the homepage is to introduce your company at a high-level, answer “what does this company do?” and then get users to the content that’s relevant for them as quickly as possible. You don’t want your homepage to be just a navigation resource, but it should be the starting point for users to begin their journey through your website.
About section: This is where you can present your company narrative. It’s the one part of your website that focuses on you. Studies show that users remember stories more than anything else, so presenting your company’s narrative can help visitors connect with your brand.
Solution pages: Highlight the ways users can benefit from your product or service and explain how your company addresses prospects’ pain points. These pages should also include an intentional next step that enables prospects to learn more about product offerings or key features.
Proof points: Don’t just tell users how great you are; show them. You can do that by leveraging case studies, testimonials, customer logos, awards and accolades. These resources become especially powerful when it’s tied with your marketing copy so you’re combining your showing and telling.
On website pages, we recommend leveraging the inverted pyramid style of writing in which you start with the most important details. For blog posts and longer-form content, that’s not always the best format, but for site pages, users spend such little time browsing that they typically skim instead of reading in-depth. Presenting the most important information at the top of the page makes it most likely that visitors will find what they’re looking for.

Also, keep in mind that content is more than just written copy. Imagery and video are also content, and those visualizations are just as important as the written words. If possible, vary the content types you use because you don’t know what’s going to resonate best with the user.

4. A Strategic Next Step on Every Page
For every page on your website, ask yourself, “if a user was only to visit this site page, what’s the one thing we want them to walk away knowing?” then consider what you want the primary call-to-action on that page to be.

That goal and next step are the center of your content strategy so you can make sure you’re not trying to stuff too much information into a page.

The reason you want to give a next-step is twofold. You want to educate users. So in order to empower them to dive deeper into a category you need to have content that goes beyond site pages, like blogs, webinars and guides. Additionally, to capture leads and nurture them down the funnel, you need conversion paths and conversion opportunities.

5. Contextual Conversion Opportunities
Once a user wants to learn more about a topic or get in touch with a sales rep, you need to be able to capture their information through forms and chatbots. The information you collect will give your marketing and sales teams a deeper understanding of what the prospect is interested in so they can provide contextually-relevant follow-up.

Form strategy and lead scoring are both major components of conversion opportunities, even though they aren’t things users will necessarily be aware of. 

Your landing pages don’t exist just to look good. You need to ask the right questions on forms and have the backend set up so you can act upon the information provided.

6. Continuity with Your Brand Off-Site 
Prospects who enter the sales process after converting on your website should have a consistent experience across their buyer’s journey.

Your sales team should be aware of the experience your website creates and the actions individual prospects took so that their efforts contribute toward the overall experience prospects have with your company. Your marketing team should make sure your website content aligns with the messaging of your sales and service teams as well. 

At the end of the day, your website is just one way that prospects can engage with your company. The way your brand is presented across your website needs to match how it’s represented in every other communication. Whether a prospect is learning from a pillar page on your website, attending a webinar with your product team or on a call with a sales rep, your company should be providing them with value and a cohesive experience.

Thinking about our profession

Helping others to achieve their goals.
skills

How creative should web design really be?
“Websites should be intuitive,” started Chris, citing Patel as an advocate for the predictability and functionality of web design. In other words, they should allow users to find and consume the content they’re looking for as quickly as possible.
“But,” he continued, “there’s also something to be said about the value of those unique, compelling experiences. So the question is: How far do you go?”Kelly, who acted as a key influencer in New Breed’s decision to transform our web process to focus on content strategy and user experience design, believes the answer to that question lies in UX.
“At the end of the day,” she said, “users [visit websites] to do something, so giving them the path of least resistance to get there should be the objective of the designers.”But how do you create that path of least resistance?“I think setting proper expectations is the proper way to do that,” Kelly said. For example, you might want your website to be as visually compelling as possible, but you can still ensure it’s user-friendly by providing users with clear and predictable methods of engaging with the interface.
“The objective of the website can define where that balance falls — whether it’s more creative and less clear or more clear and less creative,” she continued. “That’s a really important distinction.”A website like Amazon, for example, should give users the ability to find and purchase the products they’re looking for as quickly and easily as possible. The design should be clean and simple so as not to interfere with the actual function and objective of the website.“But that’s not a blanket statement,” noted Chris. “It really depends on your audience, your content and your industry.” In other words, Craigslist might be able to get away with its stripped-down interface, but a creative B2B firm like Duarte, one of New Breed’s former web clients, should showcase some style, personality and creativity through their web design.With these many nuances in form vs. function, how would you define “good” web design?“Good design doesn’t necessarily mean that it’s very creative,” said Chris. “[A website] can be very simple, yet very polished too.”Apple is a classic case study for the power of simple design. Their sleek, clean web design manages to intrigue and inform users at the same time. Some would argue that this simplicity is the secret to effective web design; research indicates that companies who simplify the decision-making process for their customers were 86% more likely to make a sale.On the other hand, simplicity isn’t everything. “Even if you are a B2B company with a utilitarian audience and you need a very clean, traditional website,” said Chris, “you should still partner with someone skilled in web design in order to make it sing.”A good example of this is New Breed’s work on the SpringCM website. When SpringCM realized that their creatively-driven homepage was suffering from poor scroll rates, Chris and the rest of New Breed’s web team worked with them to pull the key creative elements from the original design into a new, more functional design that would ultimately perform better for their business.In other words, there’s no one, all-encompassing definition of “good” web design. Instead, it’s a matter of balancing the necessary utility with just enough of those unique, eye-catching elements to help your brand stand out from the crowd.Download our guide to website redesign in order to learn how to make your next redesign a success.“I am glad that people in the industry sometimes choose creativity over usability, though,” said Kelly, “because it enables us to push forward. If you think about the internet even five years ago, it was a completely different environment. The only reason we’re seeing as beautiful of websites as we are today is because people took those risks. I’m sure some of them were less user-friendly and maybe not as effective for their end-users, but that sort of trial-and-error is what enables us to continue moving forward.”In that way, web design could be likened to the music industry. If musicians only made the type of music that they thought popular audiences wanted, the industry would get stuck in a cycle of sameness that eventually becomes boring, white noise. When musicians do take risks, there’s no guarantee that everyone will like those risks — but ultimately, it’s those risks that help shape the future of the industry.“The main problem with overly-creative websites is that users will have to take some time to understand how to actually engage with them,” said Chris. “The main pro of creativity is that you’re memorable, for better or for worse.”What comes first in web design: functionality or creativity?“Function comes first,” said Chris. “That’s why we’ve shifted to this content-first approach, but even that is shaped in part by the client intake and how much they want to push the creativity.”“Plus,” added Kelly, “the content-first approach is kind of interface-agnostic. So no matter the level of creativity, you can begin to plug-and-play based on the interface where you’re sharing content and the audience you’re trying to engage.”That flexibility is one of the key benefits of a content-first approach to web design. For example, if you’re looking for a very visual website, the type of content you include on each page might skew toward sliders, pictures or drawings. The function or purpose of the content and the creativity with which you present that content should work to enhance each other, not interfere with each other.“It’s always a chicken-and-the-egg scenario, right?” said Kelly. “As I’m planning out web content, I feel fortunate that I can visualize the modules in my mind that would work best for that content — but without much prior experience in web design, our clients can’t necessarily do that. So that’s one of the difficult hurdles to get over. You may not be able to visualize the creative possibilities of your content, but a good web designer can, so you need to learn to trust them.”So how do you actually bridge that gap between staying true to the purpose of web content and making room for the creative possibilities of that content?“For the most part, we like to say that the sky’s the limit, outside of budget and timeline constraints,” said Chris. “But if clients bring us creative ideas without a solid content strategy to back those decisions, we’d push back against that.”In other words, you have to remember that your website is really meant to function as a digital hub for your business. You need to use it to convey certain messages and encourage users to take specific actions, so if you can’t justify your creative decisions, then those probably aren’t the most profitable decisions to make for your business.Unlike paintings, poetry or other art that could arguably exist just for the sake of art, the quest of good B2B web design should be to present specific messages, features and images that ultimately lead to commercial gain for your company. However, you can bolster this functional, purpose-driven design with high-quality imagery to elevate the creative component of your website.“You could have a really traditional layout and UI,” said Chris, “but it’s the type of imagery you use that evokes that creative, unique feel. Those visual assets can make or break how daring something feels.”Damotech’s website, another project led by New Breed, is a great example of how a website can use visual elements to truly stand out. Though the website’s interface is clean, intuitive and easy to navigate, the Damotech team used custom, high-quality photography to emphasize their brand personality and style where pure user functionality couldn’t.Now, imagine the same site full of stock images of men wearing hard hats. Would it still have the same effect?“There are some great and hilarious stock photo options out there,” said Kelly. “But if you fill your website with stock photography, users will recognize that even subconsciously and feel deterred from staying on the site. Cheesy stock photos degrade user trust.”The TakeawayThe ultimate consensus from New Breed’s web experts is that:B2B web design should, first and foremost, fulfill the company’s basic utilitarian needs. Creativity can be layered on top of that.Creativity and functionality should work together, not against each other, to elevate the design of a website.There’s no ubiquitous definition of “good” web design. Instead, it’s up to you and your web designers to work together to decide what “good” web design means for your business.As long as you’re working with experienced web designers, you should trust them to find the right balance between creative, brand-boosting design and a functional, purpose-driven interface.As Kelly said, “really smart, driven, entrepreneurial people can have the right messaging and ideas — but man, maybe they just suck at design.”So when it’s time for your next website redesign, come prepared with your wildest ideas and your non-negotiable site objectives — and then leave it up to the experts to sculpt a killer website that drives tangible results for your business.