Autosport
Mar 2019 - Feb 2021
Frontend developer
I was initially contracted for three months at Autosport to help integrate and style the new Piano digital business platform. Admittedly, it was a challenging first few weeks getting to grips with Piano but that made it all the more enjoyable and I hit the ground running. Let’s just say, the Piano documentation reads like War & Peace 2 (very long). As I loved working here and Autosport had piles of outstanding work, the contract was extended multiple times. Sadly, due to the Covid-19 crisis affecting most racing events and budgets, my contract wasn’t extended.
Visit website
Key Responsibilities
Setup and integrated new components to use the new digital experience platform, Piano content experience platform
Converted main components to run in AMP (Accelerated Mobile Pages)
Restyled existing components and global navigation
Created three new microsites: Autosport Powerlist of 50 Most Influential People in Motorsport, Autosport Top 50 Drivers of 2019, Autosport Awards 2019
Key Achievements
Learning the Piano content experience platform and implementing styling and layout changes within Piano for the content team
Also learning AMP (Accellerated Mobile Pages) for optimising mobile content
Setup and integrate new components to use Piano (digital business platform)
As Autosport wanted to set up a new Subscription platform, using Piano, it was my task for 3-4 months to style the new components and templates within the Piano environment.
The Challenge
Styling and tweaking the OOTB templates was quite a challenge for me as the backend logic Piano used was Angular, and I’d never worked with it before. But I picked up on the logic and navigating the Piano environment fairly quickly. Also, some components were shared, so slight changes for one would break others. I learned this the hard way, but soon fixed it. Testing and double testing each change regularly was a must.
Proudest Of
Learning new skills. Getting it all working and live for the launch date. Working within a new code system. The outcome was some very well designed, logical and easily editable templates.
Convert main components to AMP (Accelerated Mobile Pages)
Autosport wanted to convert the main news items and articles to AMP (Accelerated Mobile Pages) so they would rank higher in Google searches and results. All the components had to match the live ones in styling.
The Challenge
It was all fairly straightforward but the Google guidelines are quite strict and the first few rounds threw quite a few broweser errors. These were easily fixed with a few tweaks and code re-writes. Using includes, variables and the main code in one file was quite odd at first, but actually made a lot of sense.
Proudest Of
Learning a new tool and getting it all up and running within the deadline. I was also very pleased the AMP pages matched the original pages in styling. No visible difference.
Re-style existing components and global navigation
Using the provided Zeplin files, I coded the new global top nav bar for both desktop and mobile. The main reasons for the redesign was to move content higher above the fold, make it more user-friendly and to encourage more subscriptions.
The Challenge
The main challenge was making the nav responsive for all viewports. I injected Foundation’s new XY grid framework (base only), so I could make use of its awesome flex capabilities. Especially the vertical and horizontal flexing. Also, fitting as many nav items as possible for a minimum mobile viewport width of 320px was challenging.
Proudest Of
I was proudest of the responsiveness of the whole navigation bar. It turned out perfect for all viewports. There was also a big increase in subscriptions and site usage after the new navigation went live. Always good if navigation is clearer and more logical to use.
Microsite: Code and style the annual Autosport Powerlist of 50 Most Influential People in Motorsport
I was tasked with creating the pages based on flat Photoshop designs. Autosport already used Zurb Foundation 5 on the live site and the layout wasn't overly complex, so I just kept using this version.
The Challenge
Probably the most challenging part of this project was the logic to show/ hide content based on the user being subscribed/ registered or anonymous. Only certain sections could be visible for different users. I had some help from the in-house PHP developer, as my PHP knowledge was pretty basic.
Proudest Of
I really liked the navigation of the pages and the nominees headers. It all worked out to be very logical to use and read with the usage of very large header fonts and high contrast background and text. I was also quite pleased I’d developed some new skills working with PHP and Twig.
Microsite: Code and style the annual Autosport Top 50 Drivers of 2019
Again, for this project, I was given the flat Photoshop and Zeplin files, which I converted to code within the Foundation framework. As the homepage used a full page horizontal and vertical grid, I injected Foundation’s XY Grid into the existing framework. I did this for the Flexbox options like vertical and horizontal alignment and automatic sizing.
The Challenge
Again, I found the PHP logic quite challenging and getting the homepage grid just right. Space for copy was very limited, so the grid items had to be just right. Also, as some of the motorsport seasons hadn’t finished until the day before go-live, there was a frantic 36 hours of the editors providing new content and changing existing content.
Proudest Of
The navigation worked out really well for me, including the layout and way of showing the top 50 in a slide-in list format. The homepage grid also came out pretty solid responsively. And the layout of the grid items was just right.
Microsite: Code and style the annual Autosport Awards 2019
Another annual event, to celebrate motorsport riders and drivers. Using the provided Zeplin files, I styled this one page site. I used Foundation 5 standard grid layout for this one, as the grid wasn’t too complex and relied more on rows of content.
The Challenge
The biggest challenge really was hi-lighting the selected nominee’s card and mono-chroming the non-active cards as the user clicked their selection. Also, it was tricky positioning the card background images, as the provided image sizes and subject focus all differed.
Proudest Of
The card layout and card select functionality worked out really well in the end. Nice effect selecting the chosen card, and mono chroming the non-selected items.
