Improving a Webflow Blog layout, fixing responsive
and SEO issues
Tools used
Figma, Webflow
Categories
Blog, SEO, No-code
Improve layout Fix SEO
RTM offers a variety of advice and resources, aimed to improve the lives of parents and caregivers.
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.
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.
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.
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.
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).
