Madison Ave. Collective

est. 2008

Understanding accessibility

Designing a website that’s “accessible” means you’re providing an equivalent experience for all users, regardless of the physical ability an individual user may or may not have. The World Wide Web Consortium (W3C) puts it this way: “Accessibility means that people with disabilities can perceive, understand, navigate, and interact” with your website without barriers.

Who is the W3C? They’re an international non-governmental association that develops technical specifications for HTML and CSS, as well as recommendations and best practices for security, online payments, and accessibility. The W3C’s international gold standard for website accessibility rules is called the Web Content Accessibility Guidelines (WCAG).

What federal law says

Section 508 of The Rehabilitation Act, first adopted in 1973 and amended by Congress in 1998, requires federal agencies to make their electronic information accessible to people with disabilities. The rules were originally established in the fairly early days of the Internet, but Section 508 was modernized in 2017 to align with WCAG.

What this means in practical terms is, adhering to Section 508 for website development is synonymous with WCAG compliance. And while these standards are merely best-practice “recommendations” according to the W3C, for all U.S. government agencies — as well as for businesses and organizations that receive federal funding — these accessibility standards are requirements under Section 508.

What’s the difference between ADA and Section 508?

The Americans with Disabilities Act (ADA), which became law in 1990, requires state and local governments, businesses, nonprofit organizations, and labor unions make “reasonable accommodations” for employees with disabilities. ADA is a broad law against disability discrimination that applies to agencies and organizations with 15 or more employees. While it doesn’t go into technical details about website development, Section 508, on the other hand, essentially tells employers how to comply with ADA. How so? By following the WCAG.

In addition to ADA and Section 508, there are other federal laws that touch on the subjects of website development and access to electronic information. The Connected Government Act of 2018, for example, requires all new and redesigned federal agency websites to be accessible using mobile devices.

What state law says

Oregon’s Department of Administrative Services has developed a set of guidelines for usability and accessibility for state agency websites. Effective March 2017, all agency websites must:

WCAG accessibility checklist

The Web Content Accessibility Guidelines (WCAG) are separated into three levels of conformance. These roughly translate into “basic stuff” (level A), “essential stuff” (level AA), and “shootin’ for the moon stuff” (level AAA). The W3C acknowledges that AAA may be impossible to achieve, so for the most part we’ve only included rules from the first two levels here. Also, for the sake of brevity — and to prevent eyes from going crossed — we’ve omitted highly technical and fine point recommendations. (If you care to dig deeper into the geeky details, W3C has more than 1,100 technical specs.)

Here’s our quick reference checklist for developing a website that conforms to WCAG and Section 508 standards.

1. Provide text alternatives for non-text content

2. Make page layout and content adaptable

3. Use color appropriately

4. Make text readable

5. Provide keyboard and user controls

6. Avoid negative physical reactions (seizures)

7. Use page titles

8. Make the website easy to navigate

While accessible website design isn’t rocket surgery, it does require an approach to planning that starts at the very beginning. Done right, accessibility is woven into all phases and stages of website development: content strategy and information architecture, user experience and visual design, and programming.

Need help implementing these accessibility standards for your website? Contact Logan Hoffman at logan@madcollective.com or call 541.971.4113 ext. 711.

This article is also published on Medium.

Here at Madison Ave. Collective, we have a tested naming process for creating a memorable name that engages your most critical audiences and positions you for success.

It’s one thing to deliver an excellent student experience on campus; quite another to build an excellent website. Between us and one of our long-term clients, Colleges of Distinction, we’ve evaluated a countless number of college and university websites — the good, the bad, and everything in between.

In this article we’d like to share some of what we’ve learned, so that you can help your own higher ed website achieve excellence.

Got challenges? You’re not alone

Let’s start with some of the most common issues we’ve seen in higher ed websites. Does any of this sound familiar?

No message. Many university websites lack a strong brand story. Also, they’re not sending targeted messages to defined audiences, prompting them to take specific actions.

No differentiation. What makes you different from other institutions? Whether or not you can articulate it internally, we’ve noticed many schools aren’t communicating it clearly online.

Internal focus. It’s easy to get so absorbed in the internal workings of your administration, faculty, and staff that you lose sight of what new students or donors need from your website.

Lots of sub-brands. Do you have a different microsite for each department? The ensuing chaos makes brand consistency a far-off dream — and maintaining the various logos, page templates, and back-end technologies is hard work. More importantly, an inconsistent experience for prospective students, donors, and other users can be jarring and off-putting.

Content clutter. Is your website a recruitment tool? an enrollment driver? a resource for students and faculty? … or is it a repository of all the information you’ve ever used, most of it out of date?

Best practices, to the rescue!

For every challenge, there’s a best practice to resolve it. Let’s look at a few of the most helpful rules we’ve noted from our experience.

Think strategically. A strategy is four things: a problem, a goal, a plan, and a result. Where is your website falling short? Where do you want it to be? Answer that, and you can plan a path to action.

Think like a user. Is the hierarchy of info logical? Are pages organized to meet the user’s most pressing needs first? Have you mapped the paths that users take and built a coherent journey?

Make action easy. Every call to action should be clear and convincing, and the conversion points — the places where users take those actions —should be easy to find and respond to.

Cross all those Ts. Every area of your website should be an extension of your brand. The design should be mobile-responsive, accessible from any device. It also needs to be ADA-compliant.

Establish metrics. Without a way to measure success, who’s to say if your efforts are paying off? We know it can be tricky to identify objective markers — but it can be done, and it’s essential.

Move forward the smart way

When it comes to choosing an agency, there are two options: the conventional route, and the streamlined route.

  1. The conventional route goes like this. You write a lengthy, time-consuming RFP, and post it publicly to invite responses from all corners of the country. The RFP (request for proposal) may or may not provide candidates with the type or quality of information they need to write a meaningful proposal, resulting in hundreds of written pages based on their best guesswork, which your selection committee takes weeks to carefully comb through. After holding a series of interviews, you make a choice, and at last your new creative partner starts work. The process was costly, imprecise, and effort-intensive — and hey, it only took six months to get to the starting line.
  2. The streamlined route works through relationship-building, and as such, it’s much more targeted and timely. You develop a list of parameters you want your partner agency to match (specific areas of expertise, years of experience, etc.), seek referrals, and do some research on your own. You then put out an RFQ (request for quotation), which is shorter and easier to evaluate than RFPs to a limited pool of pre-qualified or pre-selected firms. Once you have narrowed your list of candidates based on the RFQ responses, you pick up the phone or meet in person to discuss what you hope to achieve. The information and insights that emerge from these conversations are more likely to fit your needs and propel you forward. At the end of the day, you’re launching your new website much sooner — and spending less money and energy—than with the traditional RFP process.

How to choose the right partner?

Scan for strategy. Many creative professionals make beautiful work — but the point isn’t just to look pretty. It’s to accomplish the goals of your organization and meet the needs of your stakeholders. How do your candidates propose to do so? Do they have a proven process for delivering results?

Invest in discovery. Your partner should talk to internal and external stakeholders, perform a brand audit and competitive analysis, and research your history, values, goals, and competitors. Up-front research is the necessary foundation for getting started and will guide decision-making throughout the project.

Avoid death by committee. When collecting initial input, ask everyone. Make sure key stakeholders and representatives from every target audience have an opportunity to be heard. But when making decisions, establish a small, tight-knit team with the judgement to weigh conflicting perspectives and make the call.

Be bold. Today’s degree-seekers aren’t looking for the same old / same old. Don’t be afraid to look and sound different. We know standing out can be scary — but when you do, great things can happen.

The tips above may seem simple, but make no mistake: they’re game changers. After researching and auditing countless higher ed websites, we’ve seen these principles bear out over long and close observation. We hope they help you achieve excellence in your website, too.

This article is also published on Medium.

All branding and marketing projects start with questions. Lots of questions. In order to uncover unknowns and proceed with confidence, we recommend starting with a Discovery phase. Learn all about Discovery for your next branding project in this free, 8-page illustrated guide.

All website development projects start with questions. Lots of questions. In order to uncover unknowns and proceed with confidence, we recommend starting with a Discovery phase. Learn all about Discovery in this free, 8-page illustrated guide.

From positioning statements to elevator pitches to taglines, here are eight messaging elements you can use to define and promote your business or nonprofit.

This handy infographic will take you step-by-step through our branding process.

It happens all the time. In just about every meeting with every client there’s a point when words stop working as expected. You say one thing; your client hears another.

Miscommunication with clients is particularly frustrating because as branding designers we are in the business of communication. We pride ourselves in our ability to simplify the complex. We leap at the challenge to transform a mess of disjointed inputs into an elegant output. We labor long hours, fine-tuning our client’s communications in order to ensure their message is easy to understand and easy to act upon.

But then, inevitably, it happens. While you’re pitching that all-important big idea to a new client—or even just trying to describe the thing on your screen to someone over the phone — the understanding of a word gets in the way.

It happened the other day at our office. A couple members of our design team were meeting with an important client who works in the online security space. Our work for this client includes the development of a branding toolkit that includes about thirty icons for them to use in presentations and on their website. In addition to this expansive set of simple icons, we’re also developing a handful of more detailed illustrations for their website. These larger illustrations are being used to support paragraphs of written content about our client’s services and target industries. Together, the icons and illustrations come together to form an infographic we’re designing to communicate the various methods and tools our client uses to keep the Internet safer for everyone.

Problem was, several words kept getting mixed up as our conversation with the client bounced around between different pages of the website and other branding elements we were discussing. When one of our designers began talking about adding texture to the illustrations, it took a minute to realize the client was actually talking about the iconography. And when someone on the client side mentioned the logo could be bigger, we suggested increasing the logotype but keeping the size of the logo’s icon unchanged, given the space restraints. Now wait, which icon are we talking about again?

Backtracking to untangle the word jumbles cost everyone in the meeting extra time and resulted in a wee bit of frustration on my part. But the problem wasn’t a lack of listening. The problem was a lack of agreement about what these words meant by those sitting around the table.

So I asked myself: What could we have done better, in advance of this client review meeting, to make sure everyone was in agreement on the basic definition of terms?

One way could have been through the development of a more comprehensive brand book. In fact, whenever a client hires us to develop a branding system we always recommend including an identity guide or brand book as part of our deliverables. Whether it’s just a few short pages (we call this an identity guide) or something longer and more elaborate (we call this a brand book), the document is a valuable tool that can — when done correctly — improve communication between our firm and the various stakeholders on the client side.

The brand book we initially created for the client described above included some information about the various types of artwork we developed. Unfortunately, we missed an opportunity to clearly define the difference between “icon” and “illustration.” These are illustrations. Those are icons. This is how we use the illustrations. That is how we use icons.

An early draft of the brand book didn’t do this, but we’re now updating the document to make sure everyone is on the same page.

Top nine offenders

Another way to get in sync with a new client is to give them a list of branding terms, with definitions, that you anticipate will be used during your time of working together. Best to do this early in the process — well before you start designing anything.

Below is a list of nine words, with definitions, that in my experience get used (and misused) most often when branding designers and their clients attempt to communicate.

1 | Brand: A brand is a noun. It’s a thing. More specifically, a brand is how someone might describe your organization’s reputation. It’s what your customers think or feel when they think of you. Example: Apple’s brand is about style, while Dell’s brand is about … meh.

2| Branding: The ing tells us that branding is an action. Developing your organization’s logo is an act of branding design. Likewise, the act of applying your brand identity elements (your logo, color palette, fonts, etc.) to say, a brochure or a website, is an act of branding application.

3 | Logo: Unless we’re specifically talking about the mark a branding iron burns into the hide of cattle, your logo is not your brand. Conversely, your brand is not your logo. These two words shouldn’t be swapped around willy nilly. A logo is a distinctive visual mark that represents a brand. It visually identifies the brand in a similar way that a name, when spoken, audibly identifies the brand. Most logos include two elements: 1) typographic letterforms called a logotype; and 2) an illustrated component called an icon.

4 | Logotype: The letterforms of a logo, especially when distinctly designed to represent your brand, are called a logotype. Examples of stand-alone logotypes are Coca-Cola, FedEx, and Samsung. Another word for logotype is wordmark.

5 | Icon: If your logo has an illustrated component that is separate from its letterforms, this part of the logo is often called an icon. It generally will communicate a singular idea, although designers often enjoy packing multiple (sometimes hidden) meanings within a single icon. Synonymous terms are symbol and mark. My advice: whatever word you choose, pick one and stick to it. Big brands with household names like Nike, Apple, and McDonald’s can get away with using an icon alone as a recognizable substitute for their full logo. In these instances, the icon may be referred to as a brandmark.

6 | Iconography: A collection of icons — separate from the logo— used within a brand’s visual identity system can be referred to as iconography. A defining characteristic of the individual icons is that they’re simple. Iconography, therefore, is a set of simple illustrated icons.

7 | Tagline: This is a descriptive statement. It’s a short, useful phrase that’s tagged onto your logo. Its purpose is to describe what your organization does, how people can benefit from your services, or something else that differentiates your organization from others. Below is a logo and tagline developed by the MAC for a company that produces heirloom-quality furniture with a lifetime warranty.

8 | Slogan: This is a marketing statement. There are significant differences between a slogan and a tagline, which I’ve written about in more detail here. Slogans are catchy phrases you could lead marketing campaigns with, and when at their best will make you feel something. Many big brands will change their slogans often (remember Food, Folks, and Fun?), but others (e.g. Just Do It) stick around for years.

9 | Lockup: When a logotype, icon, and tagline (or marketing slogan) come together as a single piece of artwork — and delivered say, as a single JPEG or EPS file —you’ve got yourself a lockup. This word can also be used to describe multiple logos, such as a parent company logo and a sub-brand logo, that are used together.

Well, those are the big ones. Did I miss something from your list of misunderstood design terms? Feel free to copy/paste the definitions above and drop them onto your own company letterhead. Then, pass it around the table at the beginning of your next design review meeting.

This article is also published on Medium.

Branding touches on every aspect of your organization, including who you are and who you strive to be. Use this brand strategy framework to help you begin to articulate who you are as an organization (your brand identity) and identify where you may face gaps or inconsistencies.

We start all new development projects with an extensive research and strategy phase called Discovery, which can save you from unexpected delays and costs by identifying challenges early, so they can be addressed. This worksheet is no replacement for a thorough Discovery, but it will streamline the start of your custom website or mobile app project by helping you organize your thoughts and needs.