AMK-Electro company builds electrical equipment by both standardized and individual designs. For many years, the Company had a website which was essentially an interactive product catalog. However, since the initial launch of the first Company website, technology made quite a huge leap forward, and the Company realized the need to keep their website in touch with our day and age.
Our studio supported the old website, which previous developer left to us as a legacy. Eventually it became apparent that website needs complete redesign both in frontend and backend side, thus we took the opportunity and started developing a new one, with responsive features and mobile platform support.
About mobile traffic
Nowadays, when launching a website, it's almost impossible to ignore mobile platforms. According to StatCounter, mobile and tablet traffic exceeded desktop traffic in 2016, and this shift towards mobile platforms continues to this day. On top of that, many search engines give preference to websites adapted to smartphones and tablets. This is why we make all our web projects responsive and pay a lot of attention to full multi-platform support.
However, while analyzing web analytics for AMK-electro, we noticed an interesting trend. The stats have clearly shown that the vast majority of users prefer to visit website from desktops, and mobile traffic was almost absent. This could be explained with market specifics for electrical equipment in Russia. In most cases, the people searching for AMK-Electro products are engineers, who usually make product research on their desktop office computers. Doing this kind of work on a tablet or a cell phone is simply inconvenient, hence visits from mobile platforms are very rare.
And still, it would be wrong to ignore mobile platforms. If you register a mobile-unfriendly website in Google Search Console, you will soon get a warning that your site is inconvenient for mobile users.
You could probably ask, "Ok, I got that kind of warning from Search Console or a similar service, so why should I care"? The problem is, search engines penalize your search ranking if your website is not mobile friendly. Even if you have absolutely no mobile traffic, make your website responsive from the very beginning. Then search engines won't be holding grudge on you, and your occasional mobile visitors will be happy you made their life easier.
We brought this point to discussion with AMK-Electro representatives, and got full approval from them to build a website according to our vision.
The main requirement from the Company was to make website responsive, yet keep it recognizable on desktop platforms. Most of the website users are returning visitors, and nobody wants to lose them. We need to make sure that transition from the old to the new website is as smooth as possible for them, so that they don't need to relearn how to work with the website.
This means that hierarchical structure and general layout should be preserved. Realizing how important this requirement is, we began working on the website.
We started from something that was obvious from the very beginning - we got rid of visual noise on the website.
The old developers left many elements which didn't play any functional role - the most prominent example is the header. We removed all the pseudo-decorative elements which were stealing users' attention. They didn't have any value to the customer, and keeping them "as is" on mobile platform proved to be unnecessarily hard.
We also removed a photo which was right in the center of the header. We thus solved two problems at once - we freed the user from all the visual clutter while making website look much cleaner and more impressive on mobile platforms. Any kind of imagery in the header takes a lot of space on cell phones, and also devours quite a lot of traffic (always save traffic for your users!).
The old website had two side panels - left one and right one. The left panel contained product catalog; this menu played an important navigational role, we will come back to it later. Both panels contain photos of products and scans of company certificates, but having these on every page is very distracting for the users. Trying to fit both side panels on mobile platforms is highly impractical, so we got rid of the right panel and moved certificates to a dedicated page, they definitely deserved this.
The website featured an photo album page with product photos, but we suggested to remove it. We think that a page dedicated entirely to picture galleries is an atavism from the past. If you have some media content which you want to share with your users, place it on the page where it will be relevant and where it will bring value to the user. In particular, every product page from AMK-Electro catalog is supplied with photos, so duplicating them in yet another place would be pointless, hence we got rid of dedicated photo albums page.
These improvements alone made website much easier to grasp.
Magic of the double menu
The original website had two menus: horizontal main menu (leading to informational pages) and vertical side menu (linking to product categories). Both these menus are the most recognizable elements of the website, and getting rid of them was not an option. On desktops, they should be kept "as is". On mobile platforms, they may look different, but they need to be convenient to use.
The solution to this problem is not as obvious as it may seem. The old website was designed as nested HTML-tables - this is the simplest rock-solid solution from the 90s and early 2000s, but this kind of design doesn't look nice on mobile platforms. Bringing the old solution back was not a good idea.
We made this website responsive with Bootstrap 3. This framework doesn't have an "out of the box" solution for this problem, and the 3rd-party solutions didn't satisfy us in terms of reliability, so we wrote our own logic for side menu. As a result, website layout on desktops has a striking resemblance to the original layout, and on mobile platforms these menus are automatically converted to horizontal menus; when browsing from a cell phone, the menu is hidden behind the menu button to save space.
We picked easy-to-read fonts for the website to make it readable on any kind of device. Company colors were preserved, and only some hue alterations were made. We made sure that all pages of the website are neatly rendered on mobile platforms.
Search engines approved our effort and marked our website as mobile friendly - mission complete!
The old developers didn't provide an admin page that would allow administrators to edit website content, thus all content alterations required programmer's involvement.
We like to make life easier for our clients, so we designed a lovely admin page which allows to edit any information on the website so that AMK-Electro doesn't have to call for web development experts every time they need to update content. Website became much simpler not only for its clients, but for the Company itself!
To demonstrate viability of the admin panel to AMK-Electro, we reconstructed the original website structure (and filled it with content) using only the admin panel. AMK-Electro appreciated our effort, and now they use all the new features to improve their website (and their business along with it).
If you need to properly redesign your old website or built a new one from scratch, feel free to contact us!