Make it Sexy, Fast and SEO Compliant
--
At Klove & Sitch, one of our core principles is based on the famous Louis Sullivan quote “…form follows function”. Although initially used as a guide for architects its meaning has had a profound impact on many industries. We also believe that the purpose or function for which a particular piece of software is built should inform every decision about its design. Over the years we’ve noticed that some trends in website design have gone in the opposite direction to this philosophy. There’s always more than meets the eye when you’re looking for reasons as to why trends take off in an industry that is in constant flux but we’ve come up with some reasons as to the why as well as some solutions of our own.
The Problem
When developers started making websites flashy we had software like Macromedia Flash for animated graphic content and our only solid option for static graphics were JPEG and later on PNG images. Both of these technologies have more or less fallen out of favour with today’s web, and for good reasons and well. Flash is no longer supported by modern browsers nor its parent company Adobe (R.I.P) and there are more performant options like WebP to replace JPEG and PNG. Knowledge of this history is important to understanding why the web as we know it now has been oversimplified, at least from a design perspective.
Fifteen years later, these primitive graphic options left such a bad taste in our mouths that long after the technologies that replaced them evolved to the point of creating wickedly fast web content, many developers stay clear of heavy graphics to this day.
This is a controversial argument among developers that may never end. On one hand the purists believe that websites should be functional even at the expense of great design and on the other end you have creatives pushing the limits of new technologies to ensure their end products stand out because at the very core of marketing are the visual aesthetics making regular things sexy. We’re with the creatives on this one.
The Why
So why is it that even with all the technology advancements in mobile data speeds and performant graphical options that we don’t build a lot more aesthetically pleasing websites and applications? Well, there isn’t one clear answer to that question but we’d say it’s based on at least three factors. Firstly, the expansion of the mobile market meant everyone was building mobile first designs and websites just became less fancy to accommodate the slower speeds of mobile devices. We agree that this was a reasonable response to a problem we didn’t have a better solution for. Secondly, the way in which any type of graphic content was traditionally added to a website meant increased load times and this is still a shadow which hangs over development today, even though technologies have improved to allow graphics to be added with minimal impact on page performance. Finally, usability and accessibility played a huge role in us stripping the web of excess design elements. This is another good reason that the industry trended in this direction but we now have a lot more options to ensure we don’t negatively impact either of those metrics while we make our projects look good.
The Browser (technical)
To understand how to make a website performant it’s important to understand the environment in which websites load, this is none other than, the Browser. The metric that tells us how long it takes for a website to be rendered in your browser is called Time to First Contentful Paint, which is quite a mouthful but we’ll break it down. In short, after the browser has connected with the server serving up your website, it begins parsing the HTML, CSS and JavaScript that the server returns. This is used to create two tree models known as the Document Object Model or DOM and the CSS Object Model known as CSSOM. We wouldn’t go into the technical details too much but these two models basically form a tree hierarchy of HTML (the language of the web) that are interpreted by the browser to create what you see. What’s important to understand here is that every time the browser has to go out and get another asset, whether it’s a CSS file, a JavaScript file or an image or graphic, the Time to First Contentful Paint metric increases, meaning your website would take that much longer to load. It’s also important to note that because JavaScript files actually manipulate the DOM, these files by default cause the entire operation to pause before they’re loaded in and executed. This is what is known as render blocking and too much of it means your pretty website doesn’t load quickly at all. So with some insight into what actually happens on page load let’s go through how we build sexy, fast and SEO compliant websites.
The Solutions
We’re big on performance with every product we design so we select technologies that allow us to push the limits on what’s possible every step of the way while ensuring backward compatibility for older browsers. Our techniques aren’t new but they’re a combination of solutions with our own implementation strategies baked in and they definitely are the future of web development.
SVG (Scalable Vector Graphics)
The key to creating eye catching content online without taking hits in performance or SEO compliance is using Scalable Vector Graphics. Unlike JPEG or PNG images, these aren’t based on pixels but math. They’re pure vectors wrapped in XML and this makes them perfect for use in animation and even better for fast loading. SVG images are in a category of their own, building websites with them automatically means you start from a performant base. Not only can they be pulled into the website like regular image assets but they are XML based and can also be placed directly into the HTML markup. While doing this in a haphazard way can make your code less readable we implement strategies like Overlapping Grid to ensure our codebase remains uncluttered.
Overlapping Grid (SEO Compliant)
We are sticklers for semantic markup and SEO compliance. With that said, the CSS Grid Layout is a beauty of a thing. Now well supported by all modern browsers, CSS Grid Layout allows us to overlap content or place one grid over another. Using Grid Overlapping we can place all graphical content that doesn’t add to the semantic markup of the HTML, on its own CSS Grid and in a section that is loaded after all HTML relating to the content is loaded. The added advantage of creating this graphic grid is that it can be completely disabled or removed for mobile altogether. An example of this is the Matrix effect on our website. It sits on its own grid that is placed behind the content using CSS Grid Layout. Even though the Matrix grid naturally flows to the base of the HTML the grid it’s on is placed directly behind the content layer. Techniques like this, together with semantic coding practices allow us to achieve 100% SEO compliance and rank higher on search engines even with a lot of graphical content.
Static Site Generators
Without a doubt, this is the future of the web. Static site generators decouple your CMS or backend from the frontend to create end products that are blazing fast. Tools like Gatsby combine learnings that we as developers have acquired over 20 years in a way that makes perfect sense for the web’s future. Static Site generators solve a problem that goes well beyond the issue of images, they move the processing that happens at runtime into processing that happens during build or compile time. This creates a significant performance improvement over websites built only with traditional CMS platforms that process the HTML output at runtime. Static Site generators coupled with SVG images are the perfect union for improving performance and SEO ranking.
Async/Defer and UseEffect
Animated elements happen with JavaScript these days and while vanilla JavaScript is still an excellent choice, heavy animation should be done using libraries like GSAP unless a specific use case requires otherwise. The problem with JavaScript prior to ES6 was that loading these files into the browser caused render blocking (all parsing of the page to pause) until the file was completely loaded and executed. This definitely wasn’t good for performance and heavy animations were frowned upon by the development community in favour of simple animations that didn’t do much harm. This was another reasonable response to a problem that didn’t have a real solution. Fast forward to today and we now have the async and defer keywords that can be used when loading JavaScript files. The benefits are significant as using either async or defer means that the browsers continue to parse other files while reading the JavaScript file being imported. Using defer has the same result as loading the JavaScript file at the base of the body tag but without the entire page being loaded first. Both performance wins and we make full use of them when necessary. For the React users among us UseEffect and UseLayoutEffect are also non-render blocking hooks that offer tremendous benefits for animated components. Using them makes loading JavaScript and cleaning up any listeners a breeze.
These are some of the most common ways we deal with performance and SEO compliance with designs that are heavier on the aesthetics. Our research team is always on the lookout for new technologies and best practices that we can integrate into our projects and we’re always up for a good challenge. The web is and has always been a dynamic place and we keep adapting and updating our toolkit as necessary to ensure our practices remain relevant and we keep offering our clients the bleeding edge.
The 404 A-Team
