Jessica's previous website had been built using the GoDaddy site builder tool, and upon inspection we found that the code output was less than satisfactory (we'll cover this a bit later). The site wasn't great from an accessibility point of view, was not very quick to load and had layout issues on smaller screen devices.
The site had almost all the necessary content, but it took a while to get to the really important stuff - especially for visitors navigating via keyboard. I noticed that there were no considerations for Facebook Open Graph sharing data, nor Twitter Cards.
- Re-prioritise and re-organise the content
- Improve smaller screen experience
- Improve site performance overall
- Update the look and feel of the site
- Add missing social sharing metadata
- Add the missing content pages for legal bits and pieces
The previous website didn't have a navigation menu where you'd expect, and what did exist took up too much space and didn't really help visitors get to the important content quickly.
The first thing we did was introduce a navigation bar as the very first thing on the page, including Jessica's logo where most would expect it to be placed. For keyboard and screen reader users we added a 'visually hidden' additional navigation menu containing a link to skip the menu and jump straight to the main content of the site.
This immediately brings the content much higher up, and allows the site to get to the point quickly. This massively improved the mobile experience of the site too, because you didn't have to scroll several screens to get to the real content of the page.
Whether you can see it or not, what's behind the scenes is really, really important. Imagine you hire a plumber to fix some pipes and they install 500 metres of piping between two points only a couple of metres apart.
Sure, the water will get there, but it's going to take longer than it should. It's the same with websites. Keeping your code behind the scenes as clean and uncomplicated as possible means you're using as close to those 2 metres of piping as you can possibly get!
Not only will the site render quicker (less energy used by your web browser to paint your site onto the screen), but it'll likely also be more accessible (more people can use it on a broader range of devices and screen sizes!), more semantic (it's done properly, and to the correct standards) and generally easier for other web developers to understand too!
We ran a few Page Speed Insights (This link opens in a new window or tab) tests on the new site, and found that page performance increased by at least double on desktop, and by more than 25% mobile/tablet.
The previous site was slow to 'get going' and scored low on these tests. Our much improved results, in part, are because we'd slimmed down things behind the scenes, making sure only the things we know we'd need were there.
Think about how often you leave a website because it's taking too long to load - this is so important to remember. If your site performs that badly, will anybody stay long enough to see if your content is even worth reading?
There are other technical considerations here too though, such as:
- Compress images sensibly; smaller filesizes mean quicker load times!
- 'Minify' code where possible; removing all whitespace means it's less readable to humans, but just as easy to web browsers and results in smaller filesizes
- Removing any requirement for a database; If you don't have to query a database, you don't have to wait as long for the page to load!
I think it's fair to say that the results speak for themselves!
We're pretty chuffed with how this first version of Jessica's site has turned out. Not only that, but Jessica is also super happy (This link opens in a new window or tab) with it too! It's faster, sleeker, works better on mobile and is far more accessible to visitors.
I wanted a website that would stand out against my competitors and Shffld did just that! I love how my company image is continued throughout making it professional and easy to use.Jessica Parker
There's always more to be done, and we'll be working closely with Jessica to work out where we go from here and how we can continue to improve the site and help potential new customers get what they want quickly.
- Jessica Parker Vet Physiotherapy (This link opens in a new window or tab)
- Jessica's Facebook page (This link opens in a new window or tab)
Are you still here?
You've got staying power, that's for sure! Does your website say the same about you? Do you want a website that shows people you really mean business? Of course you do! I can help.