Money Making Website Button
Kevin Fream
America's Cyberist Helping Financial & Professional Services Avoid Loss, Improve Business, and Eliminate Doubt
Curse of Knowledge Confuses Prospects
The first impression from your website is the navigation menu which usually is a confusing jumble of messages with no clear choice of how to start. Besides logo and brand name, it’s not uncommon to have a tag line, phone number, menu links, search, login, and social media icons. Before prospects can begin to figure out how a website can help them, the typical dozen or more ideas often causes them to bounce away. Your navigation should only have three things:
Best-selling author Donald Miller pioneered clarifying your message so customers will listen. However, how to build the navigation is left to marketers and developers, who are only taught complexity. Whether your navigation background is white or your company colors, less is more for sales conversion, page speed, and search rankings.
Logo and Brand Name
There are two schools of thought on logos and brand names: esoteric logo like a swish with matching brand name that could be anything or a very specific product symbol and keywords. While these concepts are a given, three confusing mistakes are typically made:
If your logo and brand name are both images, they should be combined for faster page loading and easier use to click any part of the logo or brand name to return to the home page.
Bonus Tip: Make sure the lock is shown on the address bar for your website. SSL certificates for website encryption expire annually. Expired security says your site is not reputable or safe.
Call To Action
As of 2021, over 90% of websites still have no money making button on the navigation menu. After logo and brand name in the upper left, your attention should track to the right uninterrupted to the Call-To-Action (CTA) button:
领英推荐
Add your CTA on your navigation or header so every page of your website can make money. Remove the constant reminders to visit social media or other distractions.
Menu Toggle
Modern websites are responsive and the horizontal menu collapses to a vertical pulldown toggle on smartphones and tablets. This trend is now the same on all screen sizes so visitors aren’t diverted by multiple menu options when each page is displayed:
For established organizations, About and Legal menu options should be in the footer at the right preceded by copyright, name, address and phone number.
Example Code
This example uses Visual Studio 2019 C# Bootstrap 4 code:
<nav class="navbar navbar-dark fixed-top">
?
? ? <div class="d-flex w-100 flex-nowrap">
? ? ? ? <a class="navbar-brand" href="/">
? ? ? ? ? ? <img src="/images/matrixforce-white-logo.svg" class="img-fluid" alt="Matrixforce White Logo" />
? ? ? ? </a>
?
? ? ? ? <span class="ml-auto my-auto"><a rel="nofollow" target="_blank" type="button" class="btn btn-success mr-3 d-none d-lg-block" role="button">Schedule Consult <span class="fas fa-play"></span></a></span>
?
? ? ? ? <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
? ? ? ? ? ? <span class="navbar-toggler-icon"></span>
? ? ? ? </button>
? ? </div>
?
? ? ? ? <div class="collapse navbar-collapse" id="navbarCollapse">
?
? ? ? ? <ul class="navbar-nav">
? ? ? ? ? ? <li class="nav-item py-md-1">
? ? ? ? ? ? ? ? <a class="nav-link py-md-4" href="/guardian/">Guardian</a>
? ? ? ? ? ? </li>
? ? ? ? ? ? <li class="nav-item py-md-1">
? ? ? ? ? ? ? ? <a class="nav-link py-md-4" href="/orbit/">Orbit</a>
? ? ? ? ? ? </li>
? ? ? ? ? ? <li class="nav-item py-md-1">
? ? ? ? ? ? ? ? <a class="nav-link py-md-4" href="/phoenix/">Phoenix</a>
? ? ? ? ? ? </li>
? ? ? ? ? ? <li class="nav-item py-md-1">
? ? ? ? ? ? ? ? <a class="nav-link py-md-4" href="/overwatch/">Overwatch</a>
? ? ? ? ? ? </li>
? ? ? ? ? ? <li class="nav-item py-md-1">
? ? ? ? ? ? ? ? <a class="nav-link py-md-4" href="/support/">Support</a>
? ? ? ? ? ? </li>
? ? ? ? ? ? <li class="nav-item py-md-1">
? ? ? ? ? ? ? ? <a class="nav-link py-md-4" href="/contact/">Contact</a>
? ? ? ? ? ? </li>
? ? ? ? </ul>
?
? ? ? ? <form class="form-inline my-2 my-lg-0 d-flex flex-nowrap ml-3 mr-auto" method="get" action="/home/search/">
? ? ? ? ? ? <input class="form-control mr-sm-2" type="search" name="q" placeholder="Search" aria-label="Search">
? ? ? ? ? ? <button class="btn btn-primary my-sm-0" type="submit"><i class="fas fa-search"></i></button>
? ? ? ? </form>
?
? ? ? ? <div class="d-lg-none d-xl-none">
? ? ? ? ? ? <a rel="nofollow" target="_blank" type="button" class="btn btn-success ml-3 my-3" role="button">Schedule Consult <span class="fas fa-play"></span></a>
? ? ? ? </div>
?
? ? </div>
?
</nav>
Common Objections
Many marketing gurus and common website templates often provide complexity and glitz as a false sense of sophistication. While these sites may look nice at first glance, they have various problems beyond confusion:
Storybrand Review
With the continuing pandemic everyone must learn to compete better. If you’re a client or a prospective client that wants their site reviewed, pick a 30-minute timeslot that fits for you from my calendar at no cost or obligation. We can provide recommendations for your web developer and help you to implement Office 365 Bookings for your sales conversion.
Managed Service Providers & POS Solutions | Critical Path Management
3 年Great content. Thanks for sharing.