Responsive Site Layout on ModX
About the project
Carpboat.ua is an online store of bait boats used during fishing. The project site is based on CMS ModX and was created more than 5 years ago, being made up only for the desktop (widescreen) version.
Now most consumers have smartphones as their main device, so any online store needs to adapt to mobile screens. It affects not only usability, but also SEO performance: the number of bounces decreases, behavioral factors improve, and the position of the site in search engines grows.
With all of the above in mind, we started implementing responsiveness on the existing site.
Layout features
Initially, the design of the site was not thought out for displays of various widths, so on mobile devices a user had to scroll the content horizontally. We made the decision to keep the design for the smallest possible width, and then cut off and/or reform those elements that didn’t fit.
5 years ago, the page markup standard was the widespread use of the float property, with all the ensuing consequences: the time spent on support and adaptation for mobile devices increased. Since we decided to keep the design of the desktop version, the floats remained intact and are used as before. However, more modern technologies were implemented for the mobile version, in particular, flex.
Styling of the site was completely cascaded, which excluded the introduction of BEM without a complete rework of CSS. In the old code, the !important flag was used quite often, which is now an anti-pattern. We’ve reworked and updated the CSS to align with the current style guide. Since the site is small, using the cascade almost does not slow down the site.
Minor improvements
The site had good accessibility indicators, so little improvement was needed in this area. There were only a few bug fixes, like adding a «tel» prefix to links with a phone number, or adding descriptions to empty buttons.
The main JS library is jQuery, so all the new functionality was implemented using it.
The results
We went through all the pages of the site, fully adapting them to mobile devices. Now the content on the pages is rebuilt for a linear feed and is correctly displayed even on screens with low resolution.
