Recently I worked on a small project helping Hubb (an event management software company) to optimise their HubSpot blog listings page for mobile.
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.
Before: Hubb Blog on Desktop
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.
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.
After: Hubb Blog on Desktop
After: Hubb Blog on Mobile
You can view the final design at https://blog.hubb.me/
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