Case study, Improve layout

Improving a Webflow Blog layout, fixing responsive
and SEO issues

Tools used

Figma, Webflow

Categories

Blog, SEO, No-code

Improve layout Fix SEO

Brief

RTM offers a variety of advice and resources, aimed to improve the lives of parents and caregivers.

Identifying

The Problem

While the homepage looked nice, some other pages didn’t. These pages would stray from the initial brand identity, greatly disorienting the viewing user, making them double-guess whether they’re still on the same site.

Additionally, there were important SEO issues, as well as a horizontal scroll bar bug.

Solving

The Solution

We had a good look at the homepage and took note of what defined the brand identity.

First and foremost, we made sure that the typography and colours were identical to the ones in the homepage, that did most of the heavy lifting in making sure the pages look cohesive.

On top of that, we also included other elements, such as the background pattern and boxed border around the images.

Fixing

SEO errors

As for the SEO issues, there were multiple H1 tags per page, as well as plenty of missing alternate texts. Those are some of the most common and yet most dangerous issues that can greatly damage your SEO rankings in the long run.

Improving

Rewriting CSS class names

While in the process, we took a chance to rename some of the CSS classes so that they could be reused across the site, using the Finsweet Client-First naming convention.

Fixing

Responsive

Finally, we took care of some elements which were exceeding the documents viewport in width, that naturally resolved the horizontal scroll bar bug without the need of using hacks (an unfortunately popular practice).