Case Study

A Better Mobile Experience for Regael.com

Regael.com is a wholesaler of target sports and outdoor activity accessories based in Dublin, Ireland.

Although their website was already mobile friendly, it worked using a mobile detection PHP library what would load the appropriate templates depending on the user's device.

My task was to convert the existing templates into a single set that would respond nicely regardless of the device or its size.

The Problems with Mobile Detection

Ecommerce websites are naturally complicated in layout and design, so using a mobile detection library made sense at the time. Switching between mobile or desktop templates would ensure the website worked perfectly for all users.

Over time this did cause quite a few problems:

The design of the mobile website did not match that of the desktop.
If a new feature was added to the desktop templates, it needed to be added to the mobile templates too. In effect, two websites needed to be updated thus resulting in increased development time and costs.
Frequently one of the template sets would be forgotten about and would quickly become outdated.

Bug fixes would result in two sets of templates being updated.
Some of the features were coded differently between the two template sets making it difficult to update or apply bug fixes.
Each template set had its own stylesheets and javascript files - most of the code in the latter being the same. This meant that changes to js files needed to be constantly tracked and updated.

Before - The mobile templates were full of inconsistent styles, poor layout and spacing compared to the desktop version.

Getting Started

Before I started any actual responsive adjustments, I first had to remove the mobile detection script and decide which set of templates I should use as the default.

The mobile templates were ugly and some of the functionality was very "clunky". Naturally, I decided to use the desktop templates as the base.

After - The new responsive templates were much more consistent with the main website and brand.

Becoming Responsive

Making an existing website responsive is a challenging experience, to say the least. I often find the CSS to be a mess, so the first stage was to clean it all up by consolidating duplicate styles and globalising styles.

All websites have some form of wrapper around the page content, so making the website responsive in its most basic form was as simple as adding a few 'max-widths' here and there.

Once I had the site moving flexibly, albeit somewhat broken in places, I had to decide at which breakpoints the site needed to be adjusted at. Breakpoints are points at which site content will respond to achieve the best possible readable layout to users. After my simple changes, the website responded nicely from 768px upwards, so I decided to set 767px as my max-width breakpoint.

Any device or screen less than 767px in width would adjust to a mobile layout.

The Challenges of Mobile Menus

Making a website's main navigation adjust nicely between desktop and mobile is one of the trickiest features to integrate. It involves user interaction, and touch devices behave differently to mouse clicks.

Many times I've seen navigations duplicated within the HTML code, making one visible and the other hidden depending on the device. This is something I've never been keen on because if this website had a large navigation structure, it would result in an increased page size.

With a little bit of CSS and javascript magic using the same navigation HTML, I could adjust the design accordingly for smaller screens.
Try it out! Drag the green handle above slowly towards the left (desktop only).

The Basket - Before & After

Checkouts are complicated and often contain a lot of form fields, options and validations. Regael was no different, but I had tweaked the checkout a few months before and so making it completely responsive was a relatively easy process.