Client Spotlight: Hubb - HubSpot Blog Listings Re-Design

11 Jul, 2018

Recently I worked on a small project helping Hubb (an event management software company) to optimise their HubSpot blog listings page for mobile.

 

Hubb Logo

 

Before

While their HubSpot blog worked well on desktop, the dimensions of their images didn't lend well to sharing content on mobile or social media. The text in the long and narrow banner images were difficult to read.

Hubb Blog on Desktop - Before

Before: Hubb Blog on Desktop

 

Hubb Blog on Mobile - Before

Before: Hubb Blog on Mobile

 

As you can see in the "Get Smarter with your Event Marketing" above, the text below the banner is barely legible.

Swapping the banners for taller images would have left a lot of white-space surrounding the images on desktop. To solve the issue, they were interested in creating a two or three column layout. 

 

After

The new layout divides posts into two columns to allow for larger sized images that are more mobile friendly. They also opted to include a large featured post with a preview of the content.

 

Hubb Blog on Desktop - After

After: Hubb Blog on Desktop

 Hubb Blog on Mobile - After

 After: Hubb Blog on Mobile

 

You can view the final design at https://blog.hubb.me/

 

Code

Below is the code that was used to create the layout: 

  • Flexbox is used to maintain proportional heights for the posts on each row
  • Posts have subtle highlighting on hover
  • The boxes are responsive and switch to a single column layout on smaller devices

 

New call-to-action

Topics: portfolio

Join the Conversation!

Do you have a question, feedback or comments on this post?