CT No.44: How should a website be?
Seven rules all websites should adhere to, plus a review of design tool Figma
Hello new readers! You’ve reached The Content Technologist, a weekly newsletter about how people and algorithms discover, create, publish, read and distribute digital content.
If you’re new here, you can
(In case you’re wondering, this newsletter is forever free to the first 1,000 subscribers and after that I’ll figure it out.)
This week:
What is the purpose of your website? Returning to essentials in the age of reconsideration, including some techniques for a light audit.
A review of Figma, a collaborative prototyping and design software
A smattering of links
Wherefore lives your website?
When you’re deep in the content mines, composing eloquent and optimized text to enliven field of your CMS, or just filling in the fucking blanks, you probably ask,
Why is this behemoth here? Why so much work for something that changes so infrequently, the digital equivalent of an aircraft carrier?
Why does every word matter when all the research tells me that only 28% of the words will be read?
Why do I spend so much time updating this thing?
Some websites are set-it-and-forget-it. Some are ugly and useful, others are beautiful and confounding. Creating a website used to be a close-to-solo solo effort, with one catch-all developer tooling away in Wordpress, emailing a request to the copywriter when a field needs to be filled.
In 2020 a website redesign and restructure is likely to cost many thousands of dollars, tens of thousands of dollars really.
So why a website? Why all the expense and headaches and constant breaks and changes and shifts? Is your website a brochure or a magazine? A lead machine, an advertisement, or a service hub?
A website is the full experience of your business, represented digitally.
How do you determine whether your website is a reflection of your business? Visit it. I recommend typing your brand’s name in Google once a quarter or so just to see how you show up, then click through from that search. What’s the first thing you experience?
The still-valid content strategy test remains: what do you perceive from your website in 30, 60, 90 seconds? After 5 minutes? What impressions do you get? (Did you immediately see a popup to subscribe to a newsletter with zero description why? A chat window that makes a sound?) Does that impression accurately reflect what it’s like to work with you or purchase your product or read your stories?
Websites are inbound. People who find them are actively looking for your business, whether idly clicking or deeply in need of your business. Remember that: visitors are there on their own. You didn’t trick them into being there. So keep the experience consistent.
Your audience members may not know exactly why they’re there. But they’ve stumbled upon your website.
So what are the tasks your website needs to accomplish?
1. Clearly communicate your products or services, using the language of your customers.
For a long time, branding meant inventing some new term or throwing some jargon around an established idea, meant to build mystique or something of the sort. That’s fine for branding. You can write “do things people love” on the wall of your advertising agency, and I’ll figure out that that means eventually, after the fiftieth time I’ve passed your agency in my car.
The kooky art kid approach doesn’t work as well on a website (there are so many other channels for it though!). On your website, somewhere, at least on the About Page, please use the phrase “advertising agency” if you are an ad agency. On my website, I call myself a consultant, because no one really knows what “content technologist” is. (I mean, no one knows what a consultant is, either, so… precision remains a challenge!)
Describe what you do specifically and precisely, using the words your audience might use to describe you. Being evasive is not being creative.
Find that data from two (or more!) sources:
Search data: Do some keyword research, even if it’s just comparing a few similar terms in Google Trends. Figure out the terms that your audience prefers that match your business.
A whole lotta SEOs fret over search volume and trying to rank for the keywords with the highest number of searches per month, without consideration of the intent or fit of the search query for your website.My advice, to join SEO and customer experience more happily: Pick a core query that reflects how you want customers to talk about your product most often — and aim for the highest search volume while considering that audience and match to your brand. That core query can be the foundation for your entire communications strategy, if you want it to.
Don’t choose a core query that doesn’t exactly describe your business just because it has a higher search volume. Make sure the query you choose accurately reflects what you’ll find on the website and your brand. The intent and connotation of the search queries you’re using are the beginning of a relationship with your audience. Be honest. You’re not going to hack your growth by using words with the wrong connotation.Audience surveys: literally ask how your users talk about your website— but corroborate those findings in tandem with your search volume. Your survey respondents are not necessarily representative of all your readers.
All that other fun linguistic research: Look at social communities, target hashtags, subreddits, traditional forums, even B2B media. When those words and phrases are checked against search data, you’ll develop a strong sense of how your website should describe your business.
Other tips:
Avoid pronouns, especially “it” and “this.”
Avoid language that could apply to literally any business. If you are going to use a generic term like “solutions,” couple it with both a descriptor of the target audience and the a description of the type of solution the product is for. “Solutions for curious antelopes who are frustrated by the lack of dikdik representation in cottagecore” works better than “Easy, more inclusive solutions for a better world.”
Discard the hubris and get more specific than “making the world a better place.”
You don’t always have to use words, either. Visuals, animations, flowcharts, etc., can all assist in the description.
But your mother or father have to be able to answer the question “What does this business do exactly?” after looking at the website for 5 minutes.
2.Explain all the information that you fundamentally need to use the business.
Whether it’s a sales contact, a business address and hours, or a description of how to sign up for your service, you need to tell people how to find you. That info doesn’t have to be on the homepage but it does need to be easy to find. (Footers can contain all this info pretty easily!)
If the business is the website — SaaS or ecommerce or digital publishing — make sure it’s clear what to do to access the service regularly.
If you’re sending someone to a sales rep, make sure the potential customer has opted in — that they’ve said yes, contact me. Ensure you’re not just going to send someone to a sales rep because they’re looking at a whitepaper that’s tangentially related to your core offering.
If you have updates for your customers — as many businesses have during the COVID-19 crisis — put those in the easiest to find place possible. Here, popups or ugly red bits are acceptable if they’re broadcasting changes in otherwise beautiful websites. The most important thing is that your customers know how to find you when they are seeking you.
3. Humanize.
Through tone, through bylines, through empathy, through original images, through clear language. Your website is made by humans; don’t try to fake that it’s a magic machine. (Note for the creative process: It’s super hard to represent your humanity if your writers have never spoken to the business stakeholders.)
4. Be logically organized.
You have two patterns to establish for your website’s audience: how a page works, and how the navigation works. If you’re not sure what that sentence means, hire a designer.
The navigation pattern needs to work consistently across devices, especially the most common devices that your audience favors. The patterns you create need to help the user find what they are looking for.
I recommend that you create this information architecture considering that on-site search doesn’t exist, because on-site search will never work as you think it will and very few use on-site search anyway.
And be sure that none of this most important direction lives in pop-ups. That’s like telling a filmmaker “we’ll just cover up that giant error in post.” Lipstick on a pig, that sort of thing. Avoid the pop up at all costs. (If a pop-up isn’t conveying the most important task at hand, what’s it doing there in the first place???)
You can do it.
5. Be accessible.
You don’t have to be for everybody, but everybody needs to determine whether or not you’re for them on their own. AA standards, y’all.
6. Collect only necessary, securely stored data.
Hard, but not that hard. Everyone working on the website, as well as executives and leadership, should know what data your website collects and why. Eliminate rogue floodlight tags and random tracking if you don’t know how it got there or what it does.
7. Load quickly on a phone.
Site speed is more important than pretty much everything else.
After all of those are established, experiment away! Design and surprise and delight and add intrigue. Optimize to your heart’s content. Find your people. “Scale,” if you must, but not beyond what’s necessary. If the content you want to publish represents your business while keeping in those seven guidelines, bring it to the website planning meeting.
Remember, if they’re on your website, they’re already looking for you. Keep them informed and interested.
Previously in this series:
Want to send this guide to the person who thinks your website’s new tagline should be “We build it and we change the world”? You can
Training wheels for better design systems: Figma review
It’s a challenge to learn a software outside your discipline. For me, I’m dynamite in a CMS or word processing software, but fizzle and whine when I have to navigate graphic design software.
But knowing something about design software is crucial to any collaborative content strategist. Content strategy, after all, is about far more than just the words. On one future project or other, I’m going to have to leave feedback on wireframes or contribute to collaboration, so it helps to learn the software.
I’m thankful to see Adobe competitors thriving. I drifted into the book publishing world in the weaning days of Quark, and watched as the Indesign evangelists slowly took over until it seemed that there would never be any choice but to shell out for Adobe Creative Cloud. But just as we’ve learned to see beyond Microsoft Office, better design programs are here: Figma and Sketch and Invision and a host of others and they are all good, relatively inexpensive digital design and prototyping programs.
Although I appreciate the glories of a good Adobe program (I’m particularly fond of Premiere), when one company makes all the art software, the whole digital world becomes significantly less artistic.
Figma is becoming the most popular collaborative digital protoyping and design tool, so I figured I’d set out and give it a shot.
Figma at a glance
Hallowed freemium wireframe/prototyping designer tool Figma is bright and cheery and comes equipped with plenty of free training. Like every professional design program, you need to devote time to learning its capabilities and system before you’re able to do much.
Honestly, Figma feels like punching above my weight. But just when I was about to quit after a particularly frustrating bout, I unchecked the Clip content box and unlocked a frame and literally everything fell into place. Suddenly I’d made a decent-looking wireframe.
I like Figma. I’m rooting for Figma. The collaborative features are hella dope, and I’m definitely more comfortable making my ragtag wireframes free in Figma rather than shelling out monthly to periodically learn and abandon XD.
Figma enables:
Construction of interactive wireframes through full design prototypes, with comments and feedback features enabled throughout, so you’re not always clicking back and forth
Creation of pattern libraries and design systems that can easily be transferred across documents
Collaborative for designers, with different permission levels, based on how you’re planning to collaborate
Export design systems directly for your front-end developer
Embed or integrate Figma designs in other documents to get feedback
Off-browser (offline?) designing available with desktop mirror program
Some interactive animation capability— which I did not explore, so would love your feedback
Figma does all these things, all the while being remarkably fast. I’m never waiting for my drags and drops to catch up with me. Considering the collaborative capabilities, its speed is impressive.
I’m still on Figma training wheels. I’m never going to be a full-on interactive designer, so I’ll likely keep my crutches at the ready for quite some time. But if you’re working in digital content, I’d recommend learning the ins and outs of Figma. You’re going to encounter it — or another similar system — soon in your career, if you haven’t already.
(Also! The free version is very useful, and the low-cost professional version is free to students and educators.)
Do you enjoy this newsletter?
Content tech links of the week
A very good agency blog post: The art of narrowing your offer, even if it hurts your soul from Velocity Partners
Facebook bought Giphy for $400 million and the sound of a giant whoopee cushion, via The Interface. It feels a little like when Yahoo bought Tumblr.
I tend to be pro-Spotify and I really really dislike Joe Rogan, but I’m intrigued by Matt Soller’s analysis of their deal.
Are you reading The Pudding? Their interactive features kick ass. Here’s an illustrated guide to masked wrestlers.
Visit The Content Technologist! About. Ethics. Features Legend. Pricing Legend.