John Ryan By Design

Built and designed at Candidsky. Go to John Ryan By Design.

John Ryan By Design is a bespoke bed retailer with a large customer base, active online customer discussions/questions and a source of information about beds, most notably mattresses.

The requirement was to build a website that improved the customer experience when buying a mattress online and to harness the vast amount of content created from blog articles and customer questions and answers.

The website consisted of an ecommerce area, some standard templates such as a contact page, a question and answer section, and a knowledge base.

The John Ryan By Design front end.

My contributions

CSS / SASS

My key responsibility for this project was to write the CSS using SASS to style the front end using designs provided by the designer I worked with. These designs were provided as a mix of full page mockups and component styles, such as headings and buttons, allowing me to interpret the designs to style pages without the designer having to mock up every single template. This approach meant there was some room to interpret the designs and implement some of my own design decisions where specific decisions had not been made by the designer. This process would finish with a review and some feedback / alterations from the designer.

A sample of SASS taken from the project. I try to comment my code in detail and consistently so that myself and future developers can use it easily.

As this was quite a large site the architecture and naming styles of the CSS were an important feature and these are areas of CSS authoring that can often be neglected, despite their importance, as they can go unnoticed by stakeholders until it is too late. Making the website look like the designs was a goal that would please the client and on the face of it, go a long way to getting the site ready for launch. However I put in significant consideration in to the structure and class naming of the CSS so that future development was as painless as I could make it. This meant careful consideration of class names choosing abstract over specific where possible, separation of SASS files, allowing for reusable classes where appropriate, but being specific where such classes could actually cause issues, detailed commenting (see figure above) and use of SASS functions such as variables (which were carefully named), amongst other things.

An example demonstrating the use of SASS variables to help with style consistency, the BEM syntax for more specific styling and deliberate use of the child selector for specific element styling.

PHP

The nature of this project, particularly the customisation to Woocommerce that was required, along with the heavy usage of Advanced Custom Fields for content management, meant that there was a lot of PHP functionality. I worked with a backend developer on this project and with that support I was able to assist with PHP tasks and in many cases complete them alone, allowing the backend developer to focus on the most complex backend challenges of the project.

The main area I worked on was the functionality of the templates. This meant writing the logic to output the correct markup based on things such as admin options/content and areas of the site, e.g. different markup for different taxonomies.

Some PHP functionality that checks whether the current page is a product filter and then queries and outputs a description accordingly.

Along with backend tasks that blur in to the frontend, such as the templating tasks mentioned, I also worked on some functions which could be considered entirely backend. These functions ranged from things like looping through items and updating their data in a database to an image rewrite helper that fetched images from our test server when my local development URL was detected (so that I didn't need to copy over hundreds of images).

Looping through a Wordpress custom post type and conditionally updating some post meta.

Javascript

Javascript was used throughout the site to add some basic functionality, most often to aid the user experience. I was responsible for the majority of this code and was allowed to dictate much of how the functionality and/or interactions were implemented. Some of this functionality was a case of initiating a plugin with the chosen settings for the scenario it was used for, though there was some small custom functions written such as for the navigation and for choosing product attributes.

Changing text and active states using a data attribute and input fields.
Showing a back to top button once the user has scrolled past a specified position.

Content management

A high level of content management was required for this project. The client required the ability to be able to edit large areas of the site. This meant they could do things such as choose which product categories to show on the homepage, which questions to show (if any), which product information tables to show, and to edit content on and arrange product information panels. This functionality was built with the help of Advanced Custom Fields.

An Advanced Custom Fields field used to add a header, text and a table by referencing the post object of a Wordpress table plugin.