Nov 28
2018

Building Mobile First for HubSpot With Belch

The digital world is now primarily mobile. In the past year, approximately 55% of all organic searches in the United States were done using mobile devices, and statistics indicate that over 220 million users are projected to access search services through mobile by 2019. Information is now more accessible than ever due to the expansion of technology toward devices like smartphones, tablets, and watches.

Technology is not slowing down, so companies need to adapt to the mobile market to stay relevant. In 2015, Google coined the term “micro-moments” as the fragmented, spontaneous interactions that occur between people and their devices when they “want-to know, want-to-go, want-to-do, or want-to-buy”. According to HubSpot, this growing phenomenon offers companies the opportunity to engage users, both intimately and resourcefully, with their website - if you build it correctly.

Building pages for mobile responsiveness affects user interface and SEO ranking, and is pivotal for business lead generation and user conversion.

What Does Building For Mobile Look Like?

There are a few different options to consider when you’re building a website for mobile viewing. Websites can be built either adaptively or responsively. Mobile adaptive websites “adapt” to set dimensions, often assigned according to the screen sizes that are most common. Mobile responsive websites are similar, but will shrink and stretch in “response” to the actual screen size on the device being used.

Blog_illustrations-04

Building a mobile site that functions properly can be complicated. If a website isn’t truly responsive, media queries or HTML/CSS functions have to be written to adapt mobile page features, like font size or style. This can be extremely time consuming and if done incorrectly, will break page design.

Things to Consider When Building Mobile First

The responsiveness of a mobile build helps to determine whether mobile end-users grasp the page’s intended message. Content formatting, visuals, and overall page functionality do not always translate well when you toggle between desktop and mobile. Here are some things to consider and accommodate for when building for mobile:

Content Formatting

Blog_illustrations-01
  • Navigation Menu. Adjusting link design, size, position, and relevancy enable seamless movement from page to page.

  • Content Width & Column Stacking. Content that sits outside of the mobile screen width becomes inconvenient, lowering user engagement with the remainder of the site. Page columns need to be stacked for content to be readable in mobile.

  • Font Size. Designating mobile font sizes will prevent text from being to small or large to read.

 Visuals and Graphics


Blog_illustrations-02 (1)
  • File/Image Size & Resolution. Reducing the aspect ratio and resolution for mobile improves page load time, so that all visuals are seen.

  • Banner Size. Adapting banners to mobile view makes sure that all important information is visible.

  • Infographics & Visual Hierarchy. Setting the display order of mobile elements, and adding/removing infographics for mobile, engages users to view the most important content first.

Page Functionality 

Blog_illustrations-03
  • Links, CTAs & Buttons. Enlarging interactive components of the page make it easier for the user to click on them.

  • Forms. Simplifying forms encourages users to complete and submit them.

  • Page Load Time. Removing or minimizing items that are not necessary for mobile helps users to navigate through pages faster.

If you’re unsure whether your website pages are responsive, Google and Hubspot has created tools for mobile analysis. 

How to Make Building Mobile Pages for HubSpot Easy

Mobile responsiveness affects every aspect of the user experience. Belch was designed with this in mind. The application is a front-end builder that allows users to view their page build in real time. This makes checking for mobile responsiveness quick and easy when building. In addition, users can set mobile font sizes globally, which streamlines the overall process.

For HubSpot users, Belch offers even more benefit. The application is fully integrated with HubSpot, so mobile settings are published directly to the subdomain portal. In addition, Belch pulls pre-built HubSpot forms and modules into the builder for use. Other platforms may require these components to be rebuilt.

** For more information on how Belch can help you build your mobile pages right, book a demo here

Alt text

About Angela Yung

Belch Content Marketer