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.
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.
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)
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
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