Study Mind

Study Mind

Study Mind are a company who provide tutoring services to GCSE and A-Level students and University applicants.

I chose to do this project because I really liked the designs: putting them into code would be an excellent demonstration of my CSS skills. I also thought that implementing the requested interactivity would prove interesting. 

Naturally, the website is mobile responsive. It is also a custom WordPress theme, built from nothing but the _underscores starter theme to save a little time.

As the client designed the desktop sites before creating the mobile designs, this website has been built with a desktop first approach, rather than a mobile first approach. As such, this is more of an example of graceful degradation than progressive enhancement in terms of adapting for mobile. Most elements of the homepage have however been retained, just simplified.

As most of the challenges in this project are in the desktop implementation of this project, I’ve focused on that.

Below are the what I considered the five most interesting aspects of this project. After that will be an analysis of the page optimisation.

You can see the live website here. The code is available in this GitHub repo.

Study Mind are a company who provide tutoring services to GCSE and A-Level students and University applicants.

I chose to do this project because I really liked the designs: putting them into code would be an excellent demonstration of my CSS skills. I also thought that implementing the requested interactivity would prove interesting. 

Naturally, the website is mobile responsive. It is also a custom WordPress theme, built from nothing but the _underscores starter theme to save a little time.

As the client designed the desktop sites before creating the mobile designs, this website has been built with a desktop first approach, rather than a mobile first approach. As such, this is more of an example of graceful degradation than progressive enhancement in terms of adapting for mobile. Most elements of the homepage have however been retained, just simplified.

As most of the challenges in this project are in the desktop implementation of this project, I’ve focused on that.

Below are the what I considered the five most interesting aspects of this project. After that will be an analysis of the page optimisation.

You can see the live website here. The code is available in this GitHub repo.

Parallelograms

There were a number of challenging aspects to this website. The first most obvious one was on the 1-to-1 tutoring pages, which had a couple of parallelograms at the top of the comparison boxes.

These are actually done two different ways. The gold coloured parallelograms on the left are SVG files, while the average tutor box on the right is a square and a triangle coded with CSS and combined to make a parallelogram. I’d never used CSS to make shapes other than circles or squares before, so it was interesting to find out just how much can be created with CSS. 

Animations

The client was obsessed with animations. There were as many as 17 animations requested at the start of the project.

To the right is a sequence of animations. At the start, note the tutor profiles that auto rotate, and will speed up or go in the opposite direction if you mouseover the left or right profile. Essentially this is just a slider, one of two on the page. Fortunately I code them from scratch rather than using plugins or this page would have slowed to a crawl!

After the tutor profiles are a series of lines that lead to the next line of text. The appearance of the line is controlled by code that detects that the user has scrolled down to a certain point in the page. The text follows after a delay equal to the length of time it takes to draw the line.

The main difficulty I had with this was making this work on all screen sizes. To do that, my code detects the size of the page on load. It then takes the value for the size of screen I created the animations on, and adjusts the value for the size of screen the end user has. That then determines the value for the point when the scroll effect kicks in.

The second GIF follows much the same logic. The traffic lights and the line graph are all controlled by the scroll position.

Circles within circles

Perhaps inspired by having created parallelograms above, I created these traffic light circles using only CSS.

For the red and green traffic lights, that’s not particularly difficult, but the amber light is actually three circles positioned on top of each other, with different levels of shading and opacity to create the effect.

Gravity Form Hooks

I used Gravity Forms to create the multi step form shown to the right.

The most challenging aspect of this was greeting the user by their name on step 2 of the form. Gravity Forms don’t have this as part of their backend user interface, so I had to use the gform_pre_render hook in order to take the data from the first page and use it in the second page. I’ve demonstrated this in the rather unnecessary GIF on the right.

I also had to use hooks to stop the form from jumping to the top on entry, and to give backend access to anyone with editor access. 

CSS Grid

The resources page was by far the easiest of the main pages, but it did give me the opportunity to use CSS Grid in a commercial project for the first time.

I think that in 2019, there is little reason to be concerned about backwards compatibility with CSS Grid anymore. With this client, the audience is almost exclusively young people, who are less likely to stick with old browsers than the population as a whole.

As this page requires a two dimensional grid, CSS Grid is the better option than Flexbox.

I find it intuitive to use, especially when the client changed the design of the A-Level to sort the exams by their subjects. Adapting the design was pretty easy with Grid.

Parallelograms

There were a number of challenging aspects to this website. The first most obvious one was on the 1-to-1 tutoring pages, which had a couple of parallelograms at the top of the comparison boxes.

These are actually done two different ways. The gold coloured parallelograms on the left are SVG files, while the average tutor box on the right is a square and a triangle coded with CSS and combined to make a parallelogram. I’d never used CSS to make shapes other than circles or squares before, so it was interesting to find out just how much can be created with CSS. 

Animations

The client was obsessed with animations. There were as many as 17 animations requested at the start of the project.

To the right is a sequence of animations. At the start, note the tutor profiles that auto rotate, and will speed up or go in the opposite direction if you mouseover the left or right profile. Essentially this is just a slider, one of two on the page. Fortunately I code them from scratch rather than using plugins or this page would have slowed to a crawl!

After the tutor profiles are a series of lines that lead to the next line of text. The appearance of the line is controlled by code that detects that the user has scrolled down to a certain point in the page. The text follows after a delay equal to the length of time it takes to draw the line.

The main difficulty I had with this was making this work on all screen sizes. To do that, my code detects the size of the page on load. It then takes the value for the size of screen I created the animations on, and adjusts the value for the size of screen the end user has. That then determines the value for the point when the scroll effect kicks in.

The second GIF follows much the same logic. The traffic lights and the line graph are all controlled by the scroll position.

Circles within circles

Perhaps inspired by having created parallelograms above, I created these traffic light circles using only CSS.

For the red and green traffic lights, that’s not particularly difficult, but the amber light is actually three circles positioned on top of each other, with different levels of shading and opacity to create the effect.

Gravity Form Hooks

I used Gravity Forms to create the multi step form shown to the right.

The most challenging aspect of this was greeting the user by their name on step 2 of the form. Gravity Forms don’t have this as part of their backend user interface, so I had to use the gform_pre_render hook in order to take the data from the first page and use it in the second page. I’ve demonstrated this in the rather unnecessary GIF on the right.

I also had to use hooks to stop the form from jumping to the top on entry, and to give backend access to anyone with editor access. 

CSS Grid

The resources page was by far the easiest of the main pages, but it did give me the opportunity to use CSS Grid in a commercial project for the first time.

I think that in 2019, there is little reason to be concerned about backwards compatibility with CSS Grid anymore. With this client, the audience is almost exclusively young people, who are less likely to stick with old browsers than the population as a whole.

As this page requires a two dimensional grid, CSS Grid is the better option than Flexbox.

I find it intuitive to use, especially when the client changed the design of the A-Level to sort the exams by their subjects. Adapting the design was pretty easy with Grid.

Page Load Speed

With all the animations, pictures and forms (three on the 1-to-1 Tutor page), this website was starting to lag significantly before I started optimising it.

The biggest difficulty with optimising this site is shown in the screen grab from GTMetrix – too many DOM elements. Basically, there’s too much on the page. Simply removing parts of the page wasn’t really an option however, so reducing the page load time would have to be done in other ways.

The second image shows the load time for the homepage before optimisation, while the third shows the load time after optimisation. Of particular note, is that the total file size loaded drops from 4MB to 469kb. The power of image optimisation and compression!

Pre-optimisation

Post-optimisation

Finally, the Google Lighthouse audit returns a pretty decent score.

Page Load Speed

With all the animations, pictures and forms (three on the 1-to-1 Tutor page), this website was starting to lag significantly before I started optimising it.

The biggest difficulty with optimising this site is shown in the screen grab from GTMetrix – too many DOM elements. Basically, there’s too much on the page. Simply removing parts of the page wasn’t really an option however, so reducing the page load time would have to be done in other ways.

 

The second image shows the load time for the homepage before optimisation, while the third shows the load time after optimisation. Of particular note, is that the total file size loaded drops from 4MB to 469kb. The power of image optimisation and compression!

Pre-optimisation

 

Post Optimisation

 

Finally, the Google Lighthouse audit returns a pretty decent score.

If you found my work interesting, please get in touch so we can discuss how my work can meet your needs.