What inspired you to get into developing?
Steven: My Dad was a graphic designer and as part of his job he was involved at the very early stages of the web, so I was exposed to it at a very young age. I was instantly drawn to it and fascinated by the thought that anyone could self publish their own website, even though at the time in the late 90s the web was very primitive and slow. Through a friend my Dad was able to get me a week’s work experience at a graphic design agency in the summer of 2000. During that week I learnt a lot about photography, typography and graphic design, but the part that really stuck with me was a day I spent making a very basic web page. From the moment I was able to make a link change colour on hover I was hooked! I carried on learning and writing code in my spare time and came across a book called Dreamweaver Bible. This book was big (over 1,000 pages long), but I remember reading it cover to cover wanting to absorb and understand everything inside.
At the time the web was still a very new industry and the idea that you could make a career out of it hadn’t really occurred to me, it just seemed like a nerdy hobby. So I went to university and did a Business Studies and Marketing degree. I started at Serif in 2007 as an Online Marketing Assistant, then moved to a Web Developer role shortly after. In 2014 I moved across to join the SerifLabs team and began working with Rob on the new and exciting Affinity product range. I’ve worked as lead front end web developer ever since.
“Affinity was a blank slate so after joining Serif Labs we began the process of starting web development from scratch with a new team and a fresh perspective. ”
Rob: I’d always had a passion for computers and this goes right back to my childhood when my dad brought home an Amstrad CPC464. I was totally hooked, not only because you could play games on it (after waiting for what felt like an eternity for them to load from tape), but that you could write instructions and the computer would respond. In my early twenties, after trying lots of different careers I decided to return to university to study computing and at this time the focus had started to shift towards web development. I got that same sense of immediacy I had as a child, writing HTML and CSS and seeing it display in the browser in front of me.
I joined Serif in 2011 as a developer and took over responsibility for the existing development web projects. Affinity was a blank slate so after joining Serif Labs we began the process of starting web development from scratch with a new team and a fresh perspective. We worked towards developing a standard platform that maximised the best code available to us—while providing a friendly and productive environment for us to work in. It may not be obvious, but underneath Spotlight is the same platform that powers our main website, the Affinity store and other sites used by the software itself.
It must have been exciting to work on Affinity from the beginning and see it grow so quickly?
Steven: We knew we had amazing products and an amazing team but it was still a scary time. We had no idea what kind of reception the products would get. From our point of view we put a lot of pressure on ourselves, we knew the software devs had spent five years creating this incredible range of products, we just wanted to make sure all our websites did them justice and were the absolute best they could be.
Rob: The growth has been phenomenal, from day one when Affinity Designer launched in 2014, we are constantly surprised at how rapid it has been. As part of the web team we see this first hand, the website traffic spikes during major launches. When Ash Hewson our Managing Director was onstage at Apple’s WWDC event in 2017 announcing iPad Photo for iOS, the traffic went through the roof. Thankfully the site stayed up.
Steven: We were saying to each other recently that we never really took the time to stop and reflect on our successes, we were constantly moving onto the next challenge. I think now in hindsight looking back in a more reflective way, it’s incredible how much we achieved in such a small space of time and we are all really proud. It’s been an incredible journey and it’s still continuing, the roadmap for the next few years are just as exciting.
When did you first start working on Affinity Spotlight?
Steven: We first started talking about Affinity Spotlight late in 2016. Head of Serif Labs, Tony Brightman, came to us with the name and an idea for a site that placed content and community at the forefront. He had noticed that we were building a growing list of talented artists who were creating incredible pieces and using our products in innovative ways.
Rob: There were only the two of us involved at this point—myself working on the back-end development and Steven working on the front-end. As Affinity rapidly grew our focus shifted to other web related sites and service such as the Affinity Store and marketing site, so we were back and forth between projects for a while. Once Affinity Photo for iPad was launched we moved over to Spotlight full time.
What was the vision behind the site?
Steven: We had three main aims when we set out to work on Affinity Spotlight. The first was we wanted to create a great reading experience. To do that we wanted to remove all the clutter and make it very simple and refined. Second, seeing the great content that our users like Jonathan Ball and Agata Karelus were creating, we wanted to showcase their breath-taking artwork and images in the best way possible, making sure their artwork looked amazing on everything from mobile devices to 5k screens. We wanted it to really pop, and we have more ideas and plans in this area going forward. Finally and most importantly we wanted the site to be fast, whatever device you were reading on. That meant lazy loading (on demand loading) images and videos, optimising images and caching.
Rob: For me personally, it was a chance to develop and evolve the technology that powers other websites. To make something that would be fresh and provide a place where we could prove new technologies and approaches, with a view to feeding these back into our other projects. Behind Spotlight is a powerful CMS (Content Management System)—which we spent a long-time refining—to make sure the Spotlight team would be able to author content in a way that allowed them to focus on the content itself, and not worry about optimising it for the web.
How do you plan out and begin a huge project like this?
Rob: Lots of research, meetings, planning and walks. We’d spend our lunchtimes walking by the River Trent and talk about how we could make the best experience, not just for our audience, but for the internal teams using the site.
Steven: We began by spending some time just cementing in our heads the main purpose of the site, its aims, the technologies we wanted to use and sketching out a brief roadmap. We started with the CMS. Initially we started to write this in JavaScript using a framework that Rob had written, but having built the Affinity Store using Vue.js we felt confident we could provide a much slicker experience by moving over.
I had in my mind a vague idea of how I wanted articles to be laid out—in a single column with no distractions. The focus solely on the content, with extended images and quotes to catch your eye as you scroll down. I also knew that I wanted each article to have its own card when viewed on an index page. I did some very rough sketches but quickly moved into the browser. I’ve always designed in the browser as I know CSS and HTML so well that I can move around quicker in code than on paper. From there it was just iterations and refinements. It’s a continual process of trial and error and a lot of great code ends up on the cutting room floor, but you have to try not to get precious and keep your original aims in mind. I spent a long time on the typography, drawing on some of that knowledge from the summer of 2000, as well as asking my Dad, who began his career in printing and typesetting by hand, for advice.
I was very keen for Spotlight to have a consistent and clear brand style, to enforce this we created an internal style guide that we call Lotus. Everything is broken down into reusable components and fully documented.
Rob: We pushed ourselves extremely hard and set the bar very high. We’re a small team and very proud of everything we’ve accomplished so far. To get the experience right, I knew it was important that Steven had a high degree of artistic and creative freedom. I brought him into the team because of his obsession with the details and an unrelenting high standard of work but I’ve been completely blown away with the results.
“It’s a continual process of trial and error and a lot of great code ends up on the cutting room floor, but you have to try not to get precious and keep your original aims in mind.”
What has been the most challenging development task?
Steven: We built a brand new Vue-based CMS that we call Marling, named after Laura Marling a favourite singer of us both. Previously we had used WordPress to power the blog which worked fine but often our content authors felt like they were fighting against it, wasting time trying to align content and upload images. We desperately wanted to strip all that complexity away and let them just focus on the content.
This meant moving over to an entirely custom built CMS, all articles are written in markdown and we created a custom toolbar that allows content authors to quickly and easily add videos, images, tweets, links, buttons and quotes, etc. For example, if they wish to include an image in an article they simply select a position, add a caption and upload an image. We do all the image resizing and optimisations for them on the server, so our content authors can create fantastic looking articles with no knowledge of HTML at all. It took some time to perfect, but we’re really happy with the result.
What is your favourite feature of Affinity Spotlight?
Steven: There are lots, but I guess my favourite feature is the way we handle lazy loading of content. This means the page is light on load, and content just subtly fades in as you scroll down. We use intrinsic placeholders so there’s no jump, everything is smooth and seamless. We spent a long time perfecting this because we knew it was important to the reader’s experience.
Rob: There’s a lot of cool stuff we’ve put into the site to make things quick. Intrinsic placeholders coupled with a small Vue component I wrote to handle the lazy loading of images, along with optimising the image for the device means the pages are optimised, both in terms of page size and the work the browser has to do when rendering the page. We’ve been working with Vue.js for just over a year and any opportunity I get to write something in it quickly becomes my favourite feature!
Steven: Another favourite of mine is the way the hero banners display. These are CSS background images that use background-cover to ensure that they always fill the width and height of the hero section. We apply a subtle CSS gradient and text-shadow to ensure text overlaid is legible. We decided to lazy load the hero image and switch it out for different sized images at different viewports. It’s a large image so it seemed wasteful to load all those pixels on smaller devices. This worked fine and the mobile experience was greatly improved, however, the problem we now faced was that these hero images can often take a while to load, leaving the user with a less-than-ideal experience when the background suddenly changes from the gradient to an image. This is especially true on slow internet connections or mobile networks, which often leaves the user staring at an empty box as they wait for images to download.
“We’ve been working with Vue.js for just over a year and any opportunity I get to write something in it quickly becomes my favourite feature!”
We spent some time looking for a solution and eventually came upon a blog post by a couple of Facebook developers who explained how they solved a similar problem in their app. With that in mind we crafted a solution where we create a very small version of the hero image, that we call a placeholder image, which is the same aspect ratio as the hero image but is only about 36px wide. We base64 encode this and place it in the HTML markup, and by doing so we ensure that something loads instantly and there is no delay. These images are typically only a few kilobytes. We stretch this placeholder image out to cover the whole hero section and apply a CSS blur to smooth out the rough edges. In JavaScript we detect when the hero image has fully loaded, append this to the page and then slowly unblur the image, which gives the effect of the blurred placeholder image subtly becoming pixel sharp.
Are there any additional features you would like to develop in the future?
Steven: We have phases planned which stretch out over the next few years, articles is just the first phase. We can’t really reveal too much at present as we don’t want to ruin the surprise, but it’s ambitious and exciting. It’s certainly a challenging and fun project to be a part of. I guess some upcoming features that we can mention are search and filtering of articles as well suggested further reading. We’ve also started experimenting with CSS grid. We used it extensively on the CMS and we’re excited by the possibilities it creates, so we’ll be looking at making use of this. We’ve added some basic support for Service Workers and we’re keen to explore this further in the future. We also aim to continue our focus on speed and performance and plan to constantly make tweaks and optimisations in this area.
“We can’t really reveal too much at present as we don’t want to ruin the surprise, but it’s ambitious and exciting. It’s certainly a challenging and fun project to be a part of.”
Rob: We meet with Kate and her team regularly to get feedback on their experiences with the CMS and to discuss future features. We’ve discussed making the content even more engaging using different types of media and looking at expanding on the way we layout images in the articles.
What are the goals for Affinity Spotlight over the next couple of years?
Rob: We’ve got an ambitious roadmap and have lots of ideas about how the site should progress—but we want to maintain the freedom and flexibility that will allow us to respond to our audience and make sure we’re providing high quality content across a number of areas. Not only for users of Affinity software, but for the creative community as a whole.
Steven: We hope it becomes a place where designers and photographers come to be inspired and learn from the leading creatives in the industry. We plan to publish new articles consistently so the hope is that it becomes a site people add to their morning coffee time reading.
You can follow Rob and Steven on Twitter @robsugars and @stevenwoodhead.