What Makes an Effective Mobile HubSpot Website?
August 9, 2016
By Aaron Riddle
You’ve made the move to HubSpot’s Content Optimization System (CoS) and now have a freshly integrated website along with your marketing automation platform. With its robust editing features, native integration with marketing and sales (Call to Action, Landing Pages, Page Performance, CRM) and its immediate mobile responsiveness, you’re already halfway there to creating a great user experience for your mobile visitors.
However, there are some things that many organizations overlook during the website launch process and post-launch that you need to consider when optimizing your mobile Web experience.
Here are a few key things to consider when creating an effective mobile HubSpot website:
1. Forms Targeted Specifically for Mobile
When visitors are on their smartphones or tablet devices, they’ll be utilizing less screen space than their desktop counterparts. With this, you need to take into account that the user experience is going to be much different, and a great place to start is on the forms within your website.
A great way to consolidate and cater your forms to your mobile visitors is to look at the following:
Reduce the Amount of Form Fields
A great first step is to look at reducing the number of fields you have on mobile. Keep it as low as possible and to exactly what you need. Perform some A/B testing on certain fields and measure the performance until you find the right combination of fields to use.
Streamline Your Form Fields
Now that you have reduced the number of fields you are using, it’s time to streamline these form fields for increased awareness and exposure. Make it clear which fields are required and which are optional, along with the action you are looking for from them with this field. Stay clear of fields that require the user to type more than one line of text, if possible. Provide checkboxes, dropdowns, and autofill options, as well as fast and seamless taps, for the visitor to complete the form.
For example, Priceline.com does a great job at tackling both of these initiatives. While it’ll need your credit card information, name, and address in order to complete the sale, it is only asking the essential questions at the beginning of the buyer’s journey (how many days, how many rooms, location).
By doing so, Priceline.com has reduced the amount of fields needed, but it has also utilized calendar features, dropdowns, and location-based targeting in order to help improve the user experience.
Quick Tip: If you are trying to promote an ebook or white paper, change the button text and header text of the form to “email me the whitepaper.” By telling the visitor you are sending it to their email rather than having them download the PDF on their phone from the “thank you” page, you create an additional touch point for visitors returning to their desktop in order to view the piece of content at a later date.
2. Simplify Menu Options
On a desktop, your menu is one of the first things the visitor sees when they reach the page. However, most of our desktop menus have many options that wouldn’t work well on mobile to showcase horizontally. A newly adopted menu option for mobile (known as the hamburger menu “”) is used on mobile in order to tell the user there are additional menu options here.
By tapping the “” button on the screen, a full menu is shown that covers the page, cleaning up the visual layout on the screen, but still giving your users menu options that feature the most important items to your website.
3. Load Times
Our attention spans as consumers have been on the decline over the years (our attention spans are shorter than that of a goldfish now). With this behavior affecting more and more of your website visitors on a daily basis, you need a website that keeps them engaged and moving to the next step of your funnel.
According to Kissmetrics, 73 percent of mobile Internet users say that they’ve encountered a website with formatting that made it difficult to load. With every second leading to a 7 percent reduction in conversions, having visitors waiting for a page to load can become unbearable and lead to abandonment (remember 15 to 20 years ago when getting about 15 to 20 seconds from dial-up was something to celebrate?).
And while HubSpot provides a robust website back end that handles a bulk of the typical issues you might see, there are still some things you need to consider when looking at your website pages:
Uploaded Image Sizes
An easy and effective way to increase page speed is to take a look at the images you have selected for the page. For every element on the page, your Web browser has to load this piece of content, and having the file size as small as possible (from a dimension and a file-size perspective) makes a big difference in the long run, especially when you are talking a 30KB image versus an original-size 5MB image.
Keep Rich Content to a Minimum
When adding rich content to any page on your website, avoid adding multiple amounts of it on the same page. These elements will need to load and could affect your load time if there are many of them on the page.
Having your website littered with broken links is not only a bad user experience, but could also interfere with your page load time. Look to HubSpot’s page performance tool in order to monitor any broken links across your pages.
Make sure to review all outside code (including tracking-based codes) and ensure that they are properly located in the site header and not broken within the HTML of your page, potentially leading to increased page load time.
4. Calls to Action Optimized for Mobile “Taps”
While you need to be considering calls to action for any Web project, you need to begin to think of how your calls to action will work on the mobile side. Not all desktop calls to action will revert well to mobile, so there needs to be some thought and consideration as to how to lay out your experience. Have you ever gone to a website and had a difficult time tapping an element on the screen or had to zoom in in order to read the text? This can already put a sour taste into your visitors’ mouths and complicates the user experience before they take the next step.
Let’s take a look at Pizza Hut. When you reach its homepage, you are struck with the action of starting your order or using its re-order tool if you have an account. Along with that is Pizza Hut’s menu options below, nicely organized and ready for you to explore your next tasty creation.
Everything associated with this screen details the next action for the visitor. There’s no guessing as to what they need to do. There’s also no need to zoom in in order to read any text or any elements on the screen, helping associate the visitor down the funnel to completing their order.
Quick Tip: Apple and its iOS platform recommend that you create a minimum tap area of 44pt x 44pt for any interactive elements. Make sure that any of your future or current buttons or interactive elements are at least this size in order to ensure that visitors are able to tap and complete the action they are looking to accomplish.
5. The Easier to Contact You, The Better
In the instantaneous world we live in today, we want to be able to find out about things quickly and take the next step. This should go hand in hand with your visitor’s mobile experience by giving them as many opportunities on the page to share their feedback or contact you for more information. This is especially important for companies and organizations focused on the e-commerce space, dealing with online orders and customer service.
Overstock.com does a great job of keeping its contact information discreet yet always available to its mobile users. A convenient header module with a hamburger menu button showcases its contact and support sections for quick and easy access to users visiting the website for just those actions.
While having this information at the top of the screen is beneficial, Overstock.com has even taken it a step further and applied these functions to its footer. Instead of posting links to various sections of the website, there’s a simple “Contact Us” button with a “Feedback” link and a “Sign In” link above, giving the user options to share their thoughts or learn more about their various items. Visitors digest content differently through many media, but mobile ensures that the user experience needs to be short and sweet and needs to be considered separately from your desktop efforts.
By taking these tips and putting them into practice on your HubSpot website, you can begin to process and prioritize your improvements and see as great of results from your desktop experience through mobile.
Let us know any other mobile website recommendations in the comments below!
About the author
Aaron Riddle was formerly a Digital Project Manager at SmartBug Media. He has more than 9 years of marketing and project management experience helping organizations succeed in their digital marketing goals and objectives ranging from not for profits to large technology-based groups and businesses. Read more articles by Aaron Riddle.