Skip to content

There is a cruel irony to digital marketing. You spend so much time helping your clients, that you often forget to take care of your own digital well-being. As a digital marketer, this can also be embarrassing as a potential client’s initial impression of us is what they see on our website. Until recently, our site was outdated and full of stock videos that we had acquired to fill the void — until we were able to devote the time to create proper content.

The Old Website

The initial idea behind the old site design was to see what we could build using Twenty Seventeen, the default WordPress theme at the time. Other than some CSS tweaks, and some plug-ins added for functionality, the site was pretty much the stock theme. It got the job done but did not really allow us the freedom or control that our normal framework allows. We desperately needed an update.

Practice What You Preach

We never shut up about how the website is the digital foundation of a business’s online presence. In fact, if you search the word “foundation” on our website, you get multiple pages of results. Basically, we have an obligation to lead by example — our own website MUST be the foundation of OUR online presence.

The NEED for SPEED

Kulture Digital Website Google Pagespeed Grade From Pingdom Tools
Our Google PageSpeed grade from Pingdom Tools

For the redesign, the main goal for the Kulture Digital Website was to make it fast. When it comes to speed and performance, you always have to compromise. For instance, if you don’t use JavaScript, images, and videos, you can have the fastest site ever made. The problem with that is that it will also be extremely boring and no one will like it. We love WordPress and, like most of the internet, we use it for every site we build.

Unfortunately, WordPress requires additional resources because it is built with PHP and uses MySQL databases to store data. It also relies on JavaScript for a lot of it’s functionality. Because of this, you are already fighting an uphill speed battle when you decide to use it to build a site. When we do technical SEO for our clients, our goal is to score at least an 80 for performance — so getting a 95 for our redesign is fantastic.

Compromises…

Kulture Digital Website Content Size By Type From Pingdom Tools
Content Size by Type from Pingdom Tools

Photos and images make up a large part of a webpage’s size. Our new home page is 1.78 MB and of that, almost 30% of it is from images. We decided to use black and white photos on the site for both aesthetic reasons and because they make for smaller file sizes. Even so, you can only optimize a large photo so much before you start dealing with pixelation and noise. We aimed for a happy medium between size and quality and still end up with over half a megabyte in images on the home page.

As for the scripts, another compromise that we had to make was that we wanted to have various call-to-action options on the site. We wanted to have a contact form, Facebook chat, and social sharing available on every page. Unfortunately, each tool requires it’s own script (or scripts) to run.

The Mobile Problem

Google has made it clear that page speed is, and will continue to be, a factor in mobile search ranking. Because of this, it is imperative to find every way possible to shrink the size of a web page on mobile without sacrificing too much. Since we still want the scripts to run on mobile devices, we decided to focus on reducing the image sizes to cut the size. There’s not currently a clean solution to this issue but there is a CSS tweak that does the job.

The Mobile Tweak

Kulture Digital Website Image Tweak

The trick is that the images MUST be background images. There are ways to substitute regular images using JavaScript, but we prefer using the background image tweak when possible. The first step is to create a smaller version of every image. For our new site, the main image size is 1025 pixels by 400 pixels. The mobile image size is 600 pixels by 234 pixels. Maintaining the aspect ratio makes it a lot easier to deal with the extra workflow.

The second step is to add CSS code to change each background image based on the screen size. Luckily, media queries makes it incredibly easy. For our site, we set the breakpoint at a width of 767 pixels, so anyone who views our website on a device that displays less than 767 pixels will see the smaller image.

The Mobile Result

Kulture Digital Website Mobile Page Size
Mobile Page Size

As you can see from the test, the overall page size drops from 1.78 MB to 1.1 MB. The load time is still a little over 3 seconds so we’ll need to continue to work on it to hit the goal of under 3.

The New Website

Kulture Digital Website Redesign

We are super excited by the end result. The new site looks great (hopefully you agree) and is extremely functional. It loads quickly and is full of content that captures who we are and what we do.

Ready to Update Your Website?

Your Name*
This field is for validation purposes and should be left unchanged.

Kulture Digital, located in Austin, offers a complete branding and digital marketing solution to businesses of all sizes. We offer cross-functional integration of web design, SEO, digital advertising, social media marketing, photography and video production.

Back To Top