Skip to content

I’m always learning new ways to make better websites that load faster, which as regular readers of my blog will know is very important to the success of any website.

When you’re running a small business, it can be difficult to find the time for training. However, earlier this year I chose to make a conscious effort to sometimes step back from the constant juggling and review how I write code.

It’s been quite a journey since then. It has reinvigorated how I write HTML, CSS and Javascript, and means I’m writing cleaner, more efficient code than ever before and making better websites as a result.

Learning more efficient ways of writing CSS

I’ve been using SASS (Syntactically awesome style sheets) to write CSS for maybe eight years, and I love it. It’s organised, fast to write, and easy to read, and compiles all your individual files into a single compressed file which loads super quickly.

On reflection, I discovered some bad habits I’d fallen into, such as over-nesting my CSS selectors. What this means is that while nesting is really easy to read within the source SASS file, the compiled CSS file can get bloated and can result in clashes between selectors. Which is not a massive issue on small websites (even for a perfectionist like me), however for larger scale projects I wanted to look at new ways of writing CSS which could scale more easily.

So this year I’ve moved towards using the BEM (Block Element Modifier) methodology. This works around individual elements having a descriptive class rather than inheriting styles from their parent block.

When I follow these rules, CSS selectors stay at one or two layers deep, which reduces the risk of style clashes. This is closer to writing CSS without SASS, although I do still write it in SASS for the variables, mixins and compression. It feels more structured and does make me focus more on how I write both my HTML and CSS in a more methodical way.

I’ve rolled out this way of writing CSS on several sites this year and have subsequently noticed a reduction in the size of my master stylesheets.

For example, applying this to PaulJardine.co.uk cut the size of the master style.css file to a mere 19kb when compressed which means my website loads faster than ever!

To add context to why this matters, I also had a look at demo page of the Divi WordPress theme which totaled over 3.7mb worth of CSS files and a considerable addition to the page load time.

To learn more check out BEM 101 on CSS Tricks.

Facing my Javascript fears

I’m a firm believer in keeping website simple (my web design pet hate is those sites where everything flies in and animates as you scroll down the page). However, I do enjoy adding a little subtle extra level of interaction with Javascript, whether it’s a header that shrinks as you scroll or a collapsible mobile navigation.

Spongebob Squarepants biting his nails in horror.

Javascript training (not as scary as I expected)

Admittedly in the past Javascript has brought me out in a cold sweat. In my old job, JS was generally handled by our programmers and I’d do more subtle stuff using jQuery (generally referred to as the shorthand way of writing Javascript).

Whilst jQuery is moderately easy to write, this comes at the cost of having to load in the additional jQuery library files which ultimately risk bloating your web page.

Jeremy Keith’s talk at New Adventures 2019 inspired me, and after reading his related blog ‘Split’ about only using a technology if benefits the user (rather than the developer), I was motivated to face my fear and learn to write Javascript ES6 so I could stop relying on jQuery.

I signed up to the excellent Javascript for Designers course on Superhi and I’ve been delighted with my progress throughout the year.

All the theme functionality on PaulJardine.co.uk is now running without jQuery. Annoyingly the Contact Form 7 plugin does use it, so it still needs to be loaded in! The plus side is that the main scripts I have written in vanilla Javascript will load and execute faster than their old jQuery equivalents.

Going forward I’m considering building my own more efficient contact form plugin that will run on vanilla Javascript alone.

Building Shopify eCommerce websites

eCommerce website for BeerStork built using WooCommerce.

I’ve built a lot of eCommerce websites over the past five years. As I tend to build websites using WordPress, I’ve always used its brilliant extension WooCommerce when developing online shops.

Recently I’ve had a few enquiries for Shopify websites, so I’ve begun learning how to build Shopify themes from scratch. Again, I found a great Shopify Theme Development course on Superhi and I’m enjoying working with Shopify’s themekit and its programming language Liquid.

Working with WooCommerce has the benefit of accessing all of the other WordPress features, as most of the eCommerce sites I’ve built also have additional functionality such as appointment booking systems or events listings. However, for flatout shops, Shopify looks like a decent option and I look forward to using it for client work in the future.

Learning new skills over the past few months has been rewarding in a number of ways.

It has been fun to apply myself in this way, taking in new information, making sense of it and then applying it practically. It’s given me the tools to improve my own site, the performance of which I’m mildly obsessive about. And, most importantly, it has expanded the options I can offer clients: more platforms, different solutions, and – as always – more speed!

Related Blogs

Unexpected lessons from 5 years of running a small business

19th June 2019

To celebrate 5 years of Paul Jardine Web Design, I wanted to share some of my experiences with anyone thinking about running their own small business.

Read more

Four big shifts in web development over the last 5 years

29th May 2019

It’s been an interesting five years since I set up Paul Jardine Web Design and so much has changed! Here I share some of my thoughts on the big industry changes that have unfolded since 2014.

Read more
View all blogs