3 Design Tips To Keep Your HubSpot Site Optimized On All Screen Sizes

Posted by Ryan Bell
on May 5, 2018

Does your HubSpot site look extremely cramped and you're wondering how you can fix it? Good thing you found this post! From learning more about HubSpot's grid system, to being more mindful of how many items are in your navigation, below are 3 ways to keep your site properly organized on desktop and mobile views.

1. Keep content to 4 columns or less

Simply put, there's only so much room on a page! HubSpot is built on a 12 point grid, so only so many modules can fit per row. To illustrate this concept further, imagine 2 rich text modules next to each other on a template inside HubSpot's Design Manager. They look to be taking up to 2 halves of the area, correct? One of those modules is currently taking up 6 spots on this 12 point grid. The other rich text module taking up the other 6.

To ensure that each module fits comfortably onto the page, it is best to use modules in even numbers (one exception being 3). If you plan to have a columned look to your pages, we've found that 4 columns is about has high as you should go. Any higher and you're asking for trouble on smaller desktop sizes!

2. Be mindful of how many main navigation links are in the header

Headers have the potential to get jam-packed with all sorts of items. In reality though, they only really need 2 necessary items: a logo linking to the home page, and some kind of navigation. Typical navigation would be a horizontal row of links that lead to varying pages in the site. Even with just these 2 pieces of content, the header can still grow to be too large. This is highly dependent upon how many primary navigation links are in the menu.

Symphony, one of our template packs in the HubSpot Marketplace, has a menu that is a prime example of what a navigation menu should look like. 6 main nav items is more than enough for a user to look through. Always remember that each primary navigation item can have children links, so keeping like items together will help ease the problem of swelling menus.

3. Don't overflow the footer

Just like with site pages, a best practice for keeping a site's footer as clean and concise as possible is to keep its columns to 4 or less. Any more columns in the footer can cause a potential spacing issue on a desktop computer, and another kind of problem on mobile/tablet browsers. It's not a site-breaking problem by any means, but a problem nonetheless.

The problem in question is an overwhelmingly long footer that can happen on smaller screens. When a site transitions to a more mobile view, all of its content tends to transition downward. Text wraps to the next line sooner, images appear to be in a vertical column, etc. The same happens to the footer, and it appears to look more full as result. So, with this in mind, I find it wise to keep the footer as short and sweet as possible.

These are just a few different methods that have worked for us though. If any of you have some tips or tricks that have worked for you and the sites you've been involved with, please feel free to let us know about them in the comments below. As always, take care and enjoy using HubSpot's Design Manager!

Free Masterclass: Discover the quickest and easiest way to generate more revenue

If you're struggling to grow your business, we have an AMAZING free Masterclass to give you tips and strategies in order to have immediate, high impact results. In this Masterclass you'll discover:

The quickest and easiest way to get clients to sign up for sales calls and demos with you, that's not stuck in a method from half a decade ago.

How to take MASSIVE action and turn your website into a conversion machine, driving tons of leads into your pipeline, and filtering them so you know who to pursue first

The exact process you need to follow to nurture your leads

How to fill up your calendars WITHOUT spending hours chasing cold leads

The five critical shifts you need to make in your marketing and website strategy today in order to easily bring in qualified leads.

Click the link to sign up!