Diagram's Kevin Apgar shares key touchpoints when it comes to remembering your own quality assurance efforts.
Hi there! My name is Kevin Apgar and I will be taking you on a tour through the Wonderful World of Website Quality Assurance with a brief detour into the Hidden Realm of Backronyms! So please put on your masks, seat yourself six feet apart from your nearest neighbor, and buckle up!
“Wait,” you might be thinking to yourself right now. “Backronyms? Surely you mean Acronyms, right?”
“No,” I would say in retort. “I do, indeed, mean backronyms.”
According to Wikipedia...
A backronym, or bacronym, is an acronym that is assigned to a word that existed prior to the invention of the backronym. Unlike a typical acronym, in which a new word is constructed from a phrase, the phrase corresponding to the backronym is selected to fit an already existing word.
And if you read a little further down to the section about using backronyms as mnemonic devices, you may see a familiar name... Apgar (if it’s not familiar, please refer to my introductory paragraph above).
If you have kids of your own or took childhood development courses in college or just have a thirst for random knowledge, you may remember hearing about “The APGAR Score.” That’s right. Dr. Virginia Apgar turned her last name, er, our last name, into a mnemonic device to help baby doctors with remembering key checkpoints for newborns.
A = Appearance
P = Pulse
G = Grimace (reflexive reaction to external stimuli)
A = Activity
R = Respiration
Truth be told, when I came across this question during a midterm exam in my own child dev class in college, I bombed out on recalling the backronym. My instructor did not let me live that one down.
Well, guess what. It’s time for me to take back my last name! And how am I going to do that, you might ask? By turning it into a whole new backronym! In the service of website QA! I hope, by doing this, to give you an easy way to remember some key touchpoints when it comes to your own quality assurance efforts.
A is for “Accessibility”
One of the most important things you can do with your website – or the site you are designing for a paying client – is to make it as usable as possible for the masses. The best way to get started is to do some research on the different levels of WCAG (Web Content Accessibility Guidelines) and decide to what level of conformance you plan to have your projects reach. What are the levels of WCAG compliance? Currently, there are two versions of WCAG... 2.0 and 2.1, with version 3.0 expected sometime in 2021. Each of those versions has three levels contained therein... A, AA, and AAA. With each A you add to the compliance level, the more thorough the standards regarding accessibility compliance. Think of them like belts in martial arts. You may have earned your black belt, but there are levels -- or “degrees” -- that divide that belt up and further delineate the skill set of its wearer.
You should also remain consistent in your application of these guidelines from one project to the next. The easiest way to do this is to maintain an Accessibility Checklist and make sure Project Managers and Strategists within your company understand and endorse the importance of adhering to this checklist. Currently, my agency has an Accessibility Checklist that is revised every six months and kept in a Confluence document that is available to everyone for review prior to the start of a new project.
P is for “Performance”
As a visitor to a website, there are few things more frustrating than having to wait while elements of a webpage slowly load. For me personally, there is no quicker way to make me stop the load of the page and leave to go somewhere... anywhere... else.
Plus, Google actually factors in load time when ranking sites for the search engine results pages (SERP). So, the faster your page loads, the better a chance you have of receiving a higher search result placement.
This is where speed tests and site optimization come into play.
There are any number of speed testing applications and services that you can use, either free or paid. A quick Google search for “Common website speed tests” will return a variety of industry articles and blog posts highlighting some of the author’s or organization’s preferred services. Here’s a quick aggregation of some of the most commonly referred-to options:
You can also run the speed test available for free in Developer Tools in Google Chrome and other page inspector tools for the individual page at which you are currently looking.
If you’re able, make sure to look into site optimization options such as script minification (work with your devs on this one), speed testing based on user location (work with your marketing team or whoever manages your analytics), and inlining your critical CSS.
G is for “Graphics”
This is one of the big ones when it comes to site performance. I really shouldn’t have to still be hammering it home as this has been a sticking point with site load times since websites were first thrust upon the dial-up modem-using world (I pray you’re not still using dial up... are you?), but here I am.
High-resolution pictures are pretty and contain a lot of detail and print out very nicely but... they are wholly unnecessary on a website as a general rule. There may be one-off instances where you need a high-res image. Perhaps as a downloadable asset for a graphic designer or to be used in a media center to promote your organization. But those should be downloadable, not used inline with text on a webpage.
The moral of the story here is that you should minimize your graphics as much as possible. Work with your front-end developers and UX professionals to determine what is a good size and stick to it.
In addition to recognizing the need, you need to educate your clients who will be taking over the product from you once development is complete. If you’re able and the budget allows, train them in how to minimize their graphics. They may be completely ignorant to not just that it needs to be done, but also how. Recommend software solutions such as Photoshop or PhotoPea and help them figure it out or send them to some online resources to figure it out themselves.
A is for “Analytics”
Analytics are king! As a quality control engineer (assuming you are one), you can play a big part in making sure your client sites are as analytically optimized as possible.
Most Content Management Systems have Search Engine Optimization (SEO) fields that can be completed both on a per-page basis and as a whole for the entire site. Please make sure you look into filling out these fields and, as noted above regarding images, train your clients to do the same. Make sure to stress the importance of SEO when it comes to SERP ordering. Show them some examples if you’re able.
There are many other considerations you can make when it comes to SEO on your site. Simple tricks of the trade. And I’d detail them all here, but I’ve done it once already and I stand by that post about content accessibility mistakes to avoid. I know that post is about “accessibility mistakes,” but some of the sections work very well with regard to SEO. Focus on the subsections titled “Heading Structure” and “Avoid Generic Page Titles.”
R is for “Responsiveness”
We should all know by now that having a responsive website is the best way to maintain a single site that has full functionality at pretty much every imaginable breakpoint. Especially given that half of all website visits these days are done via a smartphone or tablet.
Why not just focus on a standalone app? Well, if you only want part of the functionality of your site to be available, sure, that might be the way to go. But if you want visitors to be able to access any and all of your site regardless of the device they’re using to browse your website, responsive design is the way to go.
Let’s not forget that optimization of a website for mobile devices also plays heavily into Google SERP rankings.
But if you need more convincing and a few tips, I’d like to refer you to some of Diagram’s experts, including:
- Nick Melville, Front-End Developer - “4 Rules Designers Should Follow to Create Great Responsive Web Design”
- Chris Osterhout, SVP of Strategy - “4 Ways to Create Seamless Responsive Content with Episerver”
What a Long Strange Trip it’s Been
I will admit my own shock at being able to recapture my last name as a backronym that relates to my job. I did not think I would be able to pull it off. I only hope I gave you a usable means by which to remember some key elements of quality assurance as they relate to your own website or the websites you create for clients.
Please promise me you won’t quiz me on the backronym a year from now. It might end up like that midterm exam in college. Ugh.
Diagram's Allison Casey spills all her insider SEO tips on migrating your content the right way.
We design creative digital solutions that grow your business, strengthen your brand and engage your audience. Our team blends creativity with insights, analytics and technology to deliver beauty, function, accessibility and most of all, ROI. Do you have a project you want to discuss?
Like what you read?
Subscribe to our blog "Diagram Views" for the latest trends in web design, inbound marketing and mobile strategy.