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!
