Strengthen Your Digital Platform: Website updates

Share on facebook
Share on pinterest
Share on twitter
Share on linkedin
Share on email

Let’s talk about your website. With performing arts companies being closed for the business of actually performing, now would be a great time to refresh your website. There are a TON of ways you can do that and we’ll talk about a couple here.

This is the second in a multi-part series on some of the things you can do to strengthen your digital platform. If you haven’t yet, I’d suggest reading the first article on securing your accounts and password management.

Updating or upgrading a website can take many forms and do so along various timelines. We won’t talk about everything you could do, but here are a few we’ll talk about in this article that could make your site a bit better:

  • Content
  • Accessibility
  • Speed
  • Hosting

Also, a lot of our members companies use WordPress as their content management system, so in a later article, we’ll address all of these subjects in-depth as they relate specifically to WordPress.

 

REFRESH OR…REBUILD?

The biggest question is really whether your site needs just a refresh or an overhaul. I don’t say this lightly because depending on how it’s currently constructed, a full rewrite can take weeks or months, and the budget will match that.

 

Ask yourself: Was my site built years ago and I’m simply updating information every so often? Is it difficult to add/edit pages? Do I have to bring in someone else to add things to my site? If any of these are true…it’s probably time that you rebuild the site. That’s definitely true if your site doesn’t look too great on a phone or tablet.

If your site is not mobile-friendly, you really need to do more of an overhaul than we’ll talk about in this article. Why? Because over 50% of all web traffic is now through mobile accounts. In addition, since 2010, Google’s PageRank algorithm has reigned favor on mobile friendly sites and in 2018, they applied that same favor to mobile devices as well as desktops. So if your site isn’t mobile-friendly, you’re likely taking a hit in Google search results.

So let’s talk generally about some things you can do to refresh your site and make it work better before we talk about a full rebuild in a later article.

 

CONTENT

This is the one that needs to be done most often, but usually gets ignored the longest. You should clean out old, crufty content that no longer reflects you or your organization.

Your website is your best opportunity to tell your story to patrons, funders, possible collaborators, a whole host of people. Do you want to risk these interactions because you were either sloppy or dishonest in telling that story?

For instance, do you still list Staff members that are long gone or have transitioned to different jobs within your organization? Do you have Board members listed who rolled off recently? You should update those so that only current staff and Board members are listed. This is especially true if you’ve left them listed simply for “name recognition” purposes. It’s a matter of credibility for your organization that you’re on the level with who works with you and in what capacity. The arts world is small and people talk. They may know the people you have listed and reach out. How will it look if they left your company 3 years previous but are still listed as Staff or a Board member?

This is also true in your programming. Resist the urge to make a “program” of any event that you hold in an attempt to fatten up your offerings. In our recent tech chat Michaela Bulkley, our Director of Programming, said, “Focus on the programs you actually have. If you’ve done something once, it’s not a program. You wouldn’t want funders looking at your site thinking you do Children’s Outreach only to find you did one children’s theatre piece a few years ago.”

Even if you’re a new company, all of this applies. You still have a story to tell. And keep in mind that you shouldn’t try to beef up your site by simply duplicating content on various pages. Search engines recognize duplicate pages and while it may not necessarily lower your results ranking, it makes it harder to distinguish which page is more authoritative, and that could hurt your search results. So it’s better to just build organic content and try to reach a larger audience that will link back to you.

One last thing on your Staff/Board pages…always include a bio and contact info. Bios provide a simple way to help fill out your content and give visitors insight into who makes up your company. For a Board it’s helpful to show the breadth of experience that they have as advisors to your company. I don’t know about you, but I’m highly annoyed when I need to reach out to someone at a company and there’s only a single “info@” email address and no obvious way to reach particular individuals, or even who those individuals may be. We’ll talk about email specifically in an upcoming article, but they’re easy to setup and there are strategies you can employ to cut down on spam…if that’s your concern.

 

ACCESSIBILITY

Accessibility of your website is also of critical importance to provide equal access and equal opportunity to those with diverse abilities. Designs that are not accessible might leave those with visual, auditory, physical, speech, cognitive or other neurological disabilities unable to use your site fully or at all.

You can find many resources on the internet that discuss why accessibility is important, and one of the best is WebAIM, and their WAVE tool.

WebAIM is a non-profit based at the Center for Persons with Disabilities at Utah State University. In addition to promoting research and advocacy, they provide tools including their Web Accessibility Evaluation Tool (WAVE).

WAVE is a browser plug-in that you can activate on a website you visit to show you error or alert messages about what needs to be changed to make the page more accessible. This can include things such as; missing or empty labels, improper structural elements, or contrast errors to name a few. It will show these alerts right on the page so if you use this during your design process, you can go through and learn exactly what to update. You’ll find that often the guidelines will help screen readers and those with physical limitations better use the site. It’s a great tool and since the plug-in is free, you should start using it as soon as possible.

 

SPEED

The first thing to look at is the speed of your site. Everyone loves a speedy site. It’s no surprise that numerous studies over the years have found that faster sites not only lead to a better user experience, but also stand a much better chance of user retention. Google’s own research points to the need for a page to load within 3 seconds because as it gets longer, the more likely a user is to leave the page.

In recognition of that fact, way back in 2010, Google started adding speed site to its famous PageRank algorithm so that faster sites would get higher rankings. Google also tweaked PageRank a few times in the following years to give higher scores to those sites that are mobile-friendly and have mobile-first design… but we’ll talk about that later.

There are numerous free tools you can use on the internet to check the speed of your site. Two of my favorites are WebPageTest.org, and Google’s PageSpeed Insights.

Both sites ask you to enter a URL and then run a number of tests on the site, presenting the results in fairly easy-to-read formats. One of the nice things about WebPageTest is that you can groom the test a bit, choosing the browser to use and the test location of the server. For those of us with a more regional business, like live performance venues, this makes it much more likely that your test results will mirror what your actual users experience.

The results will typically return a letter or number grade and offer suggestions on how to make your site faster. I always test a site on both to see if their recommendations match up. You’ll see all sorts of steps you can take to speed up your site:

 

1. COMPRESSION

Everything that gets rendered to your browser has to be sent over the internet, so it makes sense that sending smaller files makes that process faster. There are a few things you can do the help this process using gzip and minification.

First, you should check with your web host and make sure they’re using gzip, a data compression utility for servers. This compresses the data sent over the wire making it faster. If your host uses something like cPanel you will generally find an option to Optimize Website where you can enable this feature.

 

2. MINIFYING

Second, you should also be minifying (also called ‘uglifying’) your CSS & JavaScript resources. By removing unused bits and white space that the computer ignores anyway, this cuts down even more on the data being sent between the server and your browser.

CSS (Cascading Style Sheets) is the technology used to give your pages their distinctive look and feel. If you used the internet back in its early days, you know what a page built in just HTML (the language of the internet) looks like in its basic form. Rabbit-hole alert: If you want to have some real fun…check out these examples of late 90s websites or these early designs of some well-known sites. JavaScript is the language that gives most of the interactivity to your page, things like counters, popup windows, images sliding in, and many other things.

There are a number of online resources to help minify CSS/JS if you’re hosting your own site: minifycode.com, minifier.org, or refresh-sf.com. If you’re using WordPress there are plugins to help with this and we’ll look at those in depth in our WordPress-specific article…coming soon.

 

3. IMAGES

Unfortunately neither gzip nor minification help with what studies show make up anywhere between 44% and 91% of the total resources of a web page: images. So the third thing you should do is both optimize and compress the images you use.

Remember, everything you have to send across the internet takes time and that time is often driven by how big a file is and the width of the pipe that it’s running through. Both you and the user are paying for the bandwidth use in some way so again, it makes sense to reduce the amount of bytes being sent.

Optimizing images can get complicated because hi-def screens radically increase the number of pixels needed to keep those images looking good. Since we want to decrease the amount of data being sent to the user, you can do a couple of things; decrease the bit-depth (the number of colors used), and use multiple image sizes so that only the size necessary is sent to the browser. Image editing programs like Photoshop or Affinity can optimize your images for bit depth, usually when you save them for the web. You’ll be given multiple options and can usually preview the image with your selected choices to see the results.

 

You should also only use images in the sizes that will be necessary for the device you’re targeting. For instance, if you upload a 2000 x 4000 pixel image, your user will have to download that same image and wait for their device to resize it to a size it can actually use. That wastes their bandwidth and if they have a spotty connection at the time, they may grow old waiting for it to download. Don’t give them a reason to hate your site. A better strategy is to use multiple images sizes based on the device, often through media-queries, so that smaller images can be downloaded for mobile devices and larger images for larger devices.

An additional strategy the speed tests will suggest is to compress your images. Compressing an image is basically the same thing as compressing your data and CSS/JS files.  However, because you’re doing it to an image, you need to use tools like imageOptim (Mac), Caesium (PC), or an online version like Compressor.io. Each of these will work with various image file formats and offer both lossy and lossless compression, so you can tweak the output to your tastes.

 

4. CONTENT DELIVERY NETWORKS

You’ll often see a suggestion to use a Content Delivery Network (CDN). Generally speaking, this is a different server to which you are uploading frequently used assets, like videos, images, logos, font files and Javascript files, which then get sent to the users browser from that server rather than yours. I’ll spare you the technical details of why this is good…but let me just say that in addition to optimizing the content, a typical CDN has many more servers setup around the world so that what they’re sending to the browser is closer and travels less. Again…we’re trying to make things faster for the user so anything we can do in that pursuit, is a good thing.

A couple CDNs I would look at are: CloudFlare and Hostry. CloudFlare has a free tier which will work for most sites. They don’t include image optimization in that tier, so be sure you’re doing that before you upload your images. Hostry also has a free tier that include 10Gb of data transfer/month. For most small company sites, this should be fine.

 

HOSTING

I’ve mentioned your web host a number of times throughout this article and this can make a huge difference in the speed of your site.

Review the services your host provides, especially if you’ve been with the same host for a number of years without changing your service. Whether you’re on a shared host at a company like GoDaddy or a Virtual Private Server at Linode, you want to make sure that your ‘hardware’ is using SSD drives rather than disk drives. Just like in your machine, as SSD is far faster than a hard drive. Most hosts now offer them exclusively, but some of the bargain-basement hosting companies may have taken their sweet time to switch you over, so check.

Also check to see what administrative options your host provides. They may provide a CDN as part of their service, or some of the optimization tools that I mentioned earlier. If they do, utilize those to help speed up your site.

That’s a lot…and like I said…we’re not doing too deep a dive in any of these. Just start by running your site through one of the speed test pages and see what they say. Hopefully it won’t be too bad and you can get back to watching cat videos online.

Next time we’ll look at all of this through the lens of a WordPress site.

Mark Doerr

Mark Doerr

Mark is an actor, entrepreneur, foodie and golfer. In that order. Mark came to Los Angeles in 1994 when he co-founded the Oasis Theater Company where he worked as an actor, writer, director and producer. He is a member of The Antaeus Company and Theatre Movement Bazaar while working extensively as an actor throughout Los Angeles. Originally from Detroit, Mark is a graduate of The Juilliard School and has studied Shakespeare in Oxford, Chekov in Moscow, and musical theatre in Ann Arbor (#GoBlue). To keep a roof over his head, Mark has worked as a technology consultant to numerous startup businesses for more than two decades. In various roles he has been responsible for designing and creating CRM databases, building out network infrastructure and providing ongoing operational support, among other things. In 1998 he co-founded Marksmen, a private investigations firm, in a bedroom in Pasadena with two friends. With a hand in everything from technology and HR, to operations and sales, Mark helped steer the company to its present position as a worldwide leader in IP investigations, acquisitions, and brand monitoring.