Web Developer Case Study

I wasn’t disappointed, Tim put so many hours into creating the perfect site for me, that not only looks amazing but performs incredibly. He put in so much work behind the scenes to make sure everything loads as quickly as possible, and to make the site robust and user friendly.

Naomi Jenkin, Artist

1. The situation...

Naomi is a super-talented animal portrait artist. She has an enormous following on Instagram and Facebook. Social media platforms have the capacity to come and go. And so, Naomi wanted to build a new pipeline of enquiries into her business via Google. This would help spread her marketing risk, “not all her eggs in one basket” - so to say.

The pet portrait marketplace is a busy one. There are lots of players positioning their businesses to get a slice of the action. I spent time looking at the different competitor sites and found the usual mix. A lot of stack’em high and sell them cheap websites, including Wix and Wordpress. Some were content rich. Among them were some high performing sites too… but they were in the minority.

The non-performing and content-poor sites gave us a gap to compete.

2. The perfect website recipe

Naomi is great at creating rich-content. Given the following recipe, I was confident a new site could feature well in Google for top keywords.

• Fast: Static site generator, super fast content delivery network and minimal code.
• Rich content: A mixture of rich content showcased in well designed components. Components that use minimal code.
• Well structured: Structured so that Google could recognise silos of content.
• Accessible: Law abiding, Google favours websites that are accessible.

Let’s go through the above points:

Rich content. Let’s be serious… you’re not going to rank well with a simple bit of short text and an image!

Google prefers fast sites. It’s common sense, they don’t want to keep users waiting for a page to load. Static site generators pre-build your html pages… your website visitors asks for your /about page - and it gets returned. Wordpress sites need to initialise the software, piece together the layout and content. And only then does the /about page get returned. Yes, you can speed this up with a cache, but this adds extra complexity… and caches often get cleared.

Google measures speed in milliseconds, so this makes all the difference.

Read more about static site generators here. I love them!There’s also a time and place for WordPress, but that’s for another discussion.

Well structured… Google is looking for good quality sites. Again, common sense. Google wants users to have a good quality experience.Let’s make it easierfor Google to identify collections of quality content! It makes sense to put it all in a silo.

Accessible… Google doesn’t want to discriminate, so sites need to be accessible. It’s also the law here in the UK. And often the features of accessibility make a site easier to use for everyone. Another easy win! This often isn’t a priority for other website designers. And that’s a real shame!

With the above combination, Naomi has boosted awareness in Google. She feels more secure that not all her business pipelines are in one basket.

Read on if you’d like more detail about Naomi’s new site. And here’s some other thoughts on what makes the perfect recipe for a website.

3. Components for high converting landing pages

I wanted to give Naomi the best components to showcase her amazing work. I also didn’t want to slow the site down by forcing it to labour through reams of code. At the end of the day it’s a balancing act.

With a whopping (sarcasm included…) 45kb of javascript and 60kb of css (gzipped) I managed to build:

• Carousels
• Testimonial slider reviews
• Animated headings
• Animated pricing tables
• Filtering of images
• Lightbox for viewing images with filtering
• Social media sharing
• Dropdown menus
• Mobile responsive menu
• Skip to content
• Animated page menus
• Custom branded buttons

All images are lazy-loaded, responsive and include WEBP options. I maximized use of SVG images where I could.

The website components also follow the new branding Naomi had commissioned with another business.

Naomi can build custom landing pages using a mix of the components above.

4. Accessibility - a priority

I treat every website the same. I want it to be compliant with the law… and easy to navigate by visitors who have a disability.

Accessibility features include:

• Skip to content
• Navigate the site by keyboard only
• Suitable font sizes
• Aria tags used where necessary, e.g. dropdown menus and carousel buttons
• Semantic html elements, including main, nav, aside, section
• Outline on links
• Alt tags
• Descriptive links used where possible

It’s an important aspect and one that your web designer should hold high as a priority.

5. GDPR compliance

With the general data protection regulation rules, I needed to be certain that Naomi’s site is compliant. I used an external provider for that. Cookiebot does a great job of blocking unwanted cookies. I would recommend it.

6. Secure... no updates needed!

Unlike WordPress, the solution I have provided to Naomi does not need updating. Sure, we could upgrade the static site generator in a couple of years. But with our use of CloudCannon and a static site generator, we don’t need to worry about pesky updates. With WordPress, you need to keep on top of updates, otherwise, there is a risk to your site.

The site also has version control via Git versioning software. And backed-up to a remote repo on every edit.

7. Other nice features!

The site has some other nice features including:

• An easy-to-use content management system, courtesy of CloudCannon
• A categorised blog
• Integration with Shopify - converting the site into an e-commerce site.
• Artwork captions
• Custom branded buttons that adapt to label length
• Contact form with recaptcha
• Staging - allowing Naomi to make edits across the site, and then publish them all in one go.

8. Training included

And of course, Naomi received training and a short-cut guide for all the tasks. Naomi feels confident in managing her new website.

9. Read the 5/5 review

You can read Naomi’s full review for the site here.

Thank you Naomi for being a great customer throughout the process.