Services

Search

  • Разработка интернет-магазина под ключ
  • Разработка сайтов
  • Разработка леднигов
  • Разработка на битрикс24
  • Разработка на Вордпресс

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.

01

/ 03

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.

01

/ 04

Is your site still not responsive?

We implement an responsive layout of a site or an online store on ModX or another engine in 2-3 weeks without stopping the site. Contact us for details.

Privacy Policy