Typically, a website is built with the idea that people will visit it, understand its purpose, read the content, and take some sort of action. It doesn’t make sense to build a website that only some people can find or one that is so painful to use that it infuriates a large percentage of the people trying to navigate it. Similar to how you wouldn’t build a brick-and-mortar store, turn on your “Come on in, we’re open!” sign, and then lock the front doors.

We are making accessibility a priority by making it an essential part of our website, design, content development, and SEO processes. People need to get information in different ways and we believe that everyone should have equitable access to that information. Everyone’s experience matters. It also makes ‘good business sense’ to make your website an easy place for people to do what you want them to do so you can make more money. Plus, it’s either already a legal issue or will be soon.

What makes a website accessible?

There are a lot of elements, from code to content, that all work together to make a website accessible. When everyone and everything works together, you will get a website with a purpose that is easy to understand, simple to navigate, and easy to perform actions on. For everyone!

Website accessibility is a huge topic. Describing all of the elements that go into optimizing for accessibility would require one very long blog post, so this post is an introduction to a series of posts we are working on as we learn more and more about accessibility. Everyone involved in developing a website, including designers, web developers, SEO specialists, and marketing folks, can contribute to optimizing for accessibility. Here’s a quick list of what a designer has to consider when designing for accessibility: colour contrast, font size, styles for interactive elements, grouping related content, different viewport sizes, and much more!

Another quick example of one element that contributes to website accessibility is the jump or anchor links at the top of this blog post. These are handy for a person to see what content is on the page right away, without having to scan and scroll. Jump links also help someone who uses a screen reader quickly navigate to the information they are looking for. Without jump links or anchor links, the visitor has to listen to the entire page being read out, or manually tab through the headings from the top to the bottom of the page to see if it contains the information they are looking for. Which sounds like a tedious exercise, and wouldn’t inspire warm feelings towards a website, particularly a content-heavy one.

For context, here’s a video of someone using a screen reader:

What makes a website inaccessible?

A website is inaccessible when it is designed and built without the experience of the user in mind. Or, maybe a website is built with the experience of a user in mind, but not all users.

Sometimes it can be hard to think outside of your own experience. For instance, if you watch a video without closed captioning, and you don’t need closed captioning, then you might not notice the absence. But for someone who depends on closed captioning to understand the content of a video, the absence would noticeably detract from the experience. Another important thing to note is that accessibility can be situational. Just because you don’t use captions on a video one day doesn’t mean that you might not need to use them another day, like if you had a baby or a grumpy cat napping on your chest.

If you’re looking for some more examples of inaccessibility, check out this article: 5 Most Annoying Website Features I Face as a Blind Person Every Single Day.

When accessibility is an afterthought, it can cause usability issues. Instead, we should think about accessibility as an essential part of website development and maintenance, until it’s a natural part of the process, like choosing a font.

Only you can prevent bad user experiences! As mentioned earlier in this post, accessibility can be optimized in every element of a website, from code to content. The best web designs happen when everyone who touches or thinks about a website is in the loop with accessibility.

Here is a list of people who can contribute to web accessibility:

• Web developer
• Designer
• SEO specialist
• Marketer
• Website owner
• Business owner
• YOU

You get the idea! If everyone is familiar with accessibility concerns within their area of expertise, then when everyone comes together to work on a website it means accessibility is baked into every plan and process.

For us right now, if we want to make the colours on a site as accessible as possible, we can call upon Sarah’s expertise (she absolutely loves when one of us sends her a brand colour palette that features pumpkin orange or lime green)! And we can flag Leanne if we have questions about accessible code. Liz approaches website work (and life) through an SEO lens, and as it turns out, web accessibility can have a positive impact on SEO because search engines benefit from the effort that goes into setting up websites to be read by screen readers as well.

If you have a website, are building a website, or you work on other people’s websites, now is the time to start learning about accessibility and how to implement it.

If you are about to build a website, start talking about accessibility from the very beginning. All of the different people involved in a website build can contribute to accessibility in their respective areas of expertise. Once you start including accessibility in your project planning, it will become an automatic part of your process.

If you already have a website and aren’t at the beginning of a new build, have no fear. While it’s probably easier to optimize for accessibility before your website is built, it’s also not something that is ever complete. You can’t set it and forget it — our understanding of accessibility is always growing and changing. What we thought was an accessible page a few months ago might not be anymore. As long as you are always learning, and paying attention, there will be room to optimize your website.

Here are some great tools and resources that will help you get started with actionable items:

• Checklist to test your Web Content Accessibility Guidelines (WCAG) compliance
• A free introduction to web accessibility course
• The ultimate guide to writing alt text
• A guide to designing accessible focus indicators
• How to design accessible forms
• An introduction to accessibility for developers

We use Monsido for accessibility scans and will do free scans for the first 3 people who get in touch with us to request them!

It can be difficult to advocate for accessibility to someone who hasn’t encountered issues with inaccessibility firsthand before. You may be in a position where you are dealing with a culture, board, or management that doesn’t understand the value of accessibility. Maybe they think it’s extra work that only benefits a few people, and therefore isn’t a priority for their organization. Or maybe they think that because it’s not legislated, they don’t have to worry about it.

Website accessibility benefits everyone

Optimizing your website for accessibility doesn’t have to (and shouldn’t) be something that you only do when forced by legislation. Nor is it really an altruistic act, because website accessibility benefits everyone.

If we really boil down what accessibility is, it’s making a website as user-friendly and easy to use as possible. For example, maybe you don’t have an issue reading smaller font sizes. Making the font bigger so everyone has an easier time reading it won’t make it harder for you to read. It will probably make it easier and more accessible.

This is a good time to reiterate that accessibility can be temporary or situational. For someone recovering from cataract surgery, accessible colours on a website will be easier to read. Or maybe you are a) in a loud place and can’t hear a video on your phone, or b) in a quiet place and can’t have the sound on. Closed captions are handy for everyone in those situations.

We are not talking about just a small group of people who will benefit from accommodations that make browsing the web comfortable and easy. There are 6 million Canadians with permanent disabilities who deserve to be able to navigate a website with ease. Considering temporary and situational disabilities, and the fact that any optimizing you do only makes a website easier for everyone to use, there are no drawbacks to making accessibility a top priority for any business.

Accessibility promotes positive brand reputation

Optimizing for accessibility on your website, apps, and social media, means more people will have a positive interaction with your brand. If a large portion of visitors to your website can’t use it effectively, then the result is a lot of people who are annoyed and alienated. Why would you want the perception of your business to be anything but positive?

It’s important for brand reputation to consider all online services that your business engages with. If you make sure that you are following accessibility best practices on Twitter, like using image descriptions for pictures that you tweet, that can create positivity towards your brand. But if someone clicks on your website link from Twitter, and your images aren’t using alt text there, then any trust you’ve built can be lost. Accessibility should not be performative — it has to actually improve a user’s experience.

This is another reason why it helps if everyone in your organization is familiar with accessibility best practices, since you will likely have many different people involved with different areas of your online presence.

When you’re advocating for accessibility, explaining how overall brand perception can be affected by inaccessibility is a good way to show the value of accessibility and why it should be a priority.

How much is this going to cost me?

A frequent hurdle people encounter when advocating for accessibility (or anything really) at their organization is budget.

There will be costs associated with optimizing your website. If you’re at the beginning of a website build, then ensuring the final product is up to accessibility standards shouldn’t affect your budget in a big way. You are already choosing colours, fonts, writing content, developing code, etc. Just ensure when you are making those decisions that you are considering accessibility. There are a variety of tools and information available that can guide you with choosing the right colour contrast, font size, how to use accessible language, and how to write accessible code.

If you have a website and you need to improve its accessibility, then there will be expenses depending on what areas need optimizing and any outsourcing you need to do, like working with web developers and designers. Whether you are building or fixing up your website, you may want to invest in web accessibility software like Monsido, which is what we use.

It’s important to note despite some up-front costs, making your website accessible is an investment in your business. When you improve accessibility, you improve the user experience for everyone. A good user experience means happy website visitors. Happy web visitors have warm, satisfied thoughts about your organization. If you are looking for some more concrete facts, this article lays out the math about the ROI of web accessibility.

It could end up costing you a lot more if you don’t make your website accessible. While there isn’t currently web accessibility legislation in Alberta (where most of our team is located), it is becoming increasingly common. In Ontario, the Accessibility for Ontarians with Disabilities Act (AODA) requires that organizations ensure their web content is accessible or you can face a $100,000 fine.

It’s not unlikely that a similar regulation could come to your state or province (or country!), if something doesn’t exist already. And when that happens, you don’t want to be left scrambling trying to fix your website. Especially because making your website accessible isn’t a one-and-done task. There is nothing to stop someone, or multiple people, from suing your business for failing to comply with accessibility standards. Even if you’re in the middle of trying to make it accessible.

What does it look like when accessibility is part of your processes, and not something that is added later?

We knew that we wanted our website (and the websites we work on) to have a great user experience for everyone. While we have optimized our current website to meet accessibility standards, we are also working on a brand new web design, and accessibility is a key part of our website plan!

Let’s take a look at the website headings we developed for a clients’ websites to see one way in which we planned for accessibility. The question: How can our headings be accessible, be optimized for SEO, but also have room for our brand voice and compelling marketing messaging? This is where everyone having accessibility knowledge and communicating about it from the beginning pays off.

After a meeting with designers, developers, and writers (who love SEO), we landed here: what if the H1 on a website wasn’t the BIGGEST heading? It would still contain the clear information that tells visitors, screen readers, and Google exactly what the page is about. It would still be the most important of the headings. It just wouldn’t look like the most important message.

See the H1? It has clear information about what is on the web page. And then the larger bold text below is not a heading, it is a branded message. You don’t actually need the second, larger heading to understand what is on the page. The H1 satisfies our SEOs and is useful for screen readers to quickly understand the content of the page.

It can be easy to get used to things a certain way, and many of us are conditioned to thinking of H1s as the biggest, baddest text in town. It’s the main heading! It should look like the main heading. But it doesn’t have to.

Accessibility doesn’t need to be complicated or expensive. You can see that a whole team of designers, developers, SEOs, and brand strategists who are empowered to think about accessibility together will come up with solutions that make sense for accessibility and marketing harmoniously.

Five ways to optimize for website accessibility today

There are many great tools and resources out there to get started on your accessibility journey, some of which we shared earlier in this post. However, if you are eager to get started and looking for some quick wins you can implement today, check out this post on our Instagram for five changes you can make right now to help your site be more accessible.

Intro to a series on website accessibility

We are all learning so much about accessibility and we plan to share our knowledge along the way. Stay tuned for more posts on a variety of accessibility topics including:

• How to write accessible code
• How to design an accessible brand kit
• How to make accessible designs that look good
• How accessibility and SEO work together
• Ten quick fixes to optimize your website for accessibility today
• How to build accessible forms
• Why you should use alt text on all non-text elements
• How to optimize your social accounts for accessibility

If you’re planning a new website project or curious about how your current site holds up to accessibility standards, please get in touch!

Making things as easy as possible to read isn’t a new concern — for years typographers have said 65 characters per line is the perfect line length (or “measure”) for print. However, it’s 2018, so let’s embrace our digital-first way of life. Here is the golden rule to keep in mind for web typography:

45 to 80 characters (per line) is the ideal line length for text on websites.

The final number of characters per line depends on the font, but so long as your content is falling within the above parameters, you’re making it as easy as possible for visitors to read your content.

For evidence of this line length in action, look at one of the most popular sites for publishing: Medium. With a maximum of around 80 characters per line (and a healthy font size of 21px on large screens), Medium ensures extreme readability and comfort.

Line length and font size work together to create an optimal reading experience — the font size must also be large enough to be easily read. What’s the point of using a proper line length of 60 characters if your body text is set to the same size used for side-effects on prescription drug packaging? (There’s a reason those side-effects are shown in such small print — it’s because they’re trying to discourage people from reading them.)

Your base font size (for large screens) should be somewhere in the range of 18px to 26px.

However, you can’t just increase the font size on your website, pat yourself on the back and be done with it. We have to consider endless screen sizes, large and small!

Larger font sizes typically look strange on smaller screens, because they take up too much real estate. This creates an uncomfortable reading experience because lines of text get cut off too quickly, forcing readers to slow down.

A smaller font size must be delivered on smaller screens.

To keep the line length of the text in that desired 45–80 character per line range, the font size needs to be reduced on the smallest screens (i.e. mobile devices). Using a smaller font size on small screens won’t shock visitors to your site, as people typically hold their phones and tablets closer to them when reading.

Enter: Fluid Type

The great thing is we can use fluid type to achieve this change in font size! Fluid typography resizes smoothly to match any device width, meaning we can present a larger font size on larger screens and a smaller font size on smaller screens — and adjust for all screen widths in between.

For example, our website displays the body copy at 21px on large screens and 16px on small screens. In between those two extremes, the font size will adjust proportionally to the size of the window or screen it is being viewed on — which is where the “fluid” part of the name comes in.

Example: Wikipedia

Wikipedia is a great resource, but unfortunately on large screens it typically provides a subpar reading experience. In the screenshot above, the line-length is as long as 104 characters, and the font size is only 14px!

Using “Skinny” — a Google Chrome extension which limits the width of any web page to improve website readability on large screens — we can see how much easier it is to read a Wikipedia article with a line length of 50 characters and a font size of 18px.

Line height (the vertical space between lines of text, also known as “leading” or “line spacing”) is important as well.

Much like line length and font size, line height also affects how people read. If it’s too tight, the lines of text become hard to scan. Too loose and the lines of text appear to be unrelated to each other, which is confusing for readers!

The perfect line height depends on the design and size of the font itself. There is no magic number that works for all text (although it’d be cool if there was!).

A line height of 1.5 times the font size is a good place to start from, and then you can adjust accordingly.

Don’t try to do this all alone. Have other members of your team take a look at different line heights to get their opinion on what is the most comfortable to read!

Keep in mind that smaller text typically needs more line height, not less. This is because people scan horizontally and vertically when reading and a line height that is too small (also called too tight) makes people jump over sections. For example, our body text has a line height of 1.6x the font size, but our larger header text has a line height of 1.3x.

Line length + font size + line height = comfortable reading

Although it might seem like a small thing to consider, paying attention to (and improving) the design of the text on your website is an impactful way to remove many of the obstacles people face when reading online content.

People don’t like to struggle: provide your customers and clients with a comfortable reading experience, and they’re more likely to give you more of their time.

There are many other things to consider when choosing the typography of your website (font choice, font colour, hierarchy, etc.) but creating the right balance between font size and line length will be a difference maker in getting your clients and customers to actually read your content.

People need to read what you have to say to understand why they should contact you. Remove as many barriers as you can! Make people as comfortable as they can possibly be. People like ‘easy’ and it’s up to you to give ‘easy’ to them.

______________

If you want to dive into even deeper typographic waters, be sure to check out Butterick’s Practical Typography Guide — the “Typography in Ten Minutes” section is a great place to start!

The open, collaborative environment at Fringe Theatre made it easy for our two teams to work together during the research and planning phase for this project. Fringe fielded all of our (very many) questions patiently and always kept us up-to-date about their plans, hopes, and dreams.

We had to migrate a temporary Squarespace site and a custom CMS site, along with redirecting three different URLs to the new Fringe Theatre WordPress website. The custom CMS was quite old (and still live), while the Squarespace site that was meant to replace that site only had small pieces of the content migrated over properly. In short, things were a mess and cleaning up the previous mishandling was time consuming.

When you are choosing a partner to design and develop your website, please choose one that knows what a migration plan involves!

Technologies

• WordPress
• PHP7
• WP Super Cache
• TablePress
• Advanced Custom Fields
• Gravity Forms
• Isotope/Masonry
• Featherlight
• FastClick
• Google Tag Manager

Key Components

Evergreen vs Festival Content

Most people think of Fringe Theatre as just the festival that happens every August, but the Fringe offers shows and venue rentals all year round. One challenge with the website design and development was providing two states for the website; “Evergreen” (content that is relevant year round) and Festival On (content that is only relevant during the Fringe Festival every August).

Having both Evergreen and Festival content input areas in the site editor makes it easy for content to transfer smoothly into Festival mode during the festival, and then right back to Evergreen mode when the festival ends.

When a visitor is viewing a page on the website, there’s a quick code check to see if the site is in Festival mode. If it is, the code then checks for festival content. If there is none available, the code serves up the Evergreen content. This way, there is no extra work or duplicate effort for pages that do not need specific festival content.

No — this page does not have Festival content

Yes — this page has Festival content

When it’s time for the festival, a single setting is changed in the admin area and the site effortlessly flips into Festival On mode. When the festival is finished, changing the setting again puts the site back the way it was. We made the process as simple as possible!

But it isn’t just the page content that changes in Festival On mode, the menu changes as well.

During the Festival, visitors are mostly interested in seeing content related to the Festival. When Festival On mode is activated, the menu order switches and the Festival link becomes prominently positioned. On mobile devices, the Festival tab is active when you open the menu, eliminating a click to find content.

The Edmonton Fringe Theatre relies heavily on volunteers which has its own set of challenges around knowledge transfer and a general knowledge of WordPress. We kept this in mind when developing the administration area of the website and made sure to provide:

• Lots of on-page explanations
• Content blocks that can be added and easily reordered to control page layout
• Custom templates for pages with extra functionality
• A living document user manual written to address the most common tasks first

The Right Amount of On-page Explanation for Fields

The best documentation is contextual. When you’re doing something, it is much easier to have instructions right in front of you, instead of having to refer to a separate document. Additionally, when information is easily accessible it is way more likely to actually be used.

We wrote very clear instructions and guidelines for fields so that people adding content to the site know exactly how to use the fields they see.

Content Blocks Are Easy to Add and Reorder

Each page has a ‘Layout’ area for adding content blocks. Content blocks can be expandable, basic text content, call-to-action buttons, galleries, and so on. Each content block can be drag and dropped to reorder the content on a page. We focussed on simplicity in the administrative and editor areas of the website so future volunteers could be trained quickly.

We also made it easy to develop new content blocks because each content block has a separate *.php template file, *.scss file, and *.js file. The same layout section is used on both the Evergreen and Festival tabs for consistency.

Custom Page Templates with Extra Functionality

We built a template just for venue pages that automatically displays the correct form for that page. This makes creating and editing venue pages simpler. For example, if the venue rental form ever needs to be updated, the change happens in just one place and be pushed automatically out to all venue pages.

Let’s be honest, user manuals are usually pretty generic, boring, and not the easiest content to digest. They’re often overwhelming until you use them enough to know where the information you need is actually located.

We avoided overwhelming the site editors and made it easy to train new volunteers by writing a user manual that addresses the most common tasks before diving into anything else. We say “living” user manual, because it is a shared Google Doc. Things change, and in the interest of always future-proofing the work we do, we need a way to easily update manuals for our clients.

We also included an appendix that goes into detail on the more technical aspects of the site, such as shortcodes. Most people won’t need to read that part, but the information is there for the extra keeners!

Edmonton Fringe Theatre uses a separate third-party ticketing website that is difficult for visitors to use. We wanted to make finding shows a better experience for fringers (and you know, for ourselves as well). We reached out to the third-party service that handles the ticketing site, which led to the following:

The API Plugin

The ticket provider has a SOAP API that we used to pull show and performance data into the website. As with many APIs, there was a limit to how many times an API can be queried within a given time frame — this prevented us from doing real-time show data pulls. We built our plugin to pull from the API at set intervals and then save the show data to both our database and to a JSON file.

The API plugin was responsible for pulling, storing, and cleaning show, venue, and show data, and also handled the random show picker functionality. Ticket sales were handled by a separate ticketing site.

Search and Filter

Edmonton’s Fringe Festival has over two hundred shows! That’s a lot of choices to pick through to find the ones you want to see. To make things easier, the Shows page has a search field as well as a slide-up ‘drawer’ with one touch filters that you can apply to the show listing.

Please note: unless the Festival is on, you will not be able to view this functionality live on the Fringe website.

The filter “drawer” had to accomplish an important job — it needed to work on all kinds of device, both in portrait and landscape mode, and be easy for people to understand its purpose and then use.

On mobile devices, the filter categories are closed when the drawer is opened. When a category is expanded, the website checks the height of the screen and then scales the size of the drawer to fit. If there are too options in a filter category to fit the screen size, the list of filter options becomes scrollable.

Each show also has filter links for genre listed above the show’s title providing a second way to filter shows.

After we thought about how our team had enjoyed fringing in the past, we knew we wanted to build the Random Show Picker! We developed a functional shortcode that uses AJAX to find a random show, then return the name of the show with a link to buy tickets.

We made sure a future performance was scheduled for the randomly selected show so that a person couldn’t get a recommendation for a show that had finished its run.

The Random Show Picker was used 14,379 times during the Festival. How do we know? We used Google Tag Manager to not only record when the Random Show Picker was used but to also record the name of the show that was picked.

Website Performance

You likely know that website performance is a big deal. Google is favouring faster, lighter websites. The Fringe website traffic increases by over 4000% during the festival, so it is very important to keep performance top of mind.

Performance Testing Throughout Development

One of the first plugins we installed in our development environment was Query Monitor. As our developer built the site, she watched how many queries were needed and how fast pages were rendering to find efficiencies that she could build into the website.

Only Load Needed Resources

WordPress themes are typically built to include scripts on every page, regardless of whether or not the script is needed on that page. That can slow down the site, so we built the Fringe theme to make sure that only the necessary scripts load on each page. For example, if a page doesn’t include a gallery, the gallery script won’t load.

The Web Server

Unfortunately we weren’t able to move the Fringe site to a specialized WordPress host this year, so we had to make do with the existing web hosting setup. We switched over to PHP7, used gzip compression, mode_deflate and mod_expires — basically did everything that we could do to improve site performance.

We also reached out to the hosting company to discuss the huge spike in visitors during the Festival. We wanted to know:

• How would they handle the additional traffic? Would they shut the site down if we went over on the bandwidth, or would there be an additional charge?
• Did they have any advice for handling sudden spikes in traffic like this?

When we know that there will be a traffic spike, it is valuable to talk to the hosting company in advance about anticipated server loads. Obviously this isn’t possible in all cases — but we knew in advance what was coming so we were prepared. Even with our advanced planning and preparedness, Fringe visitor numbers blew past our wildest estimations! This was great for Fringe but not so great for their hosting — which was strained for resources. We will be moving their site to a dedicated WordPress host before the 2018 Festival.

Caching

Aside from the server-side changes we made to help with caching, we also installed a caching plugin. Now pages can be served as static HTML, refreshed on a regular basis unless changes are made to a page, in which case a new static HTML page is generated when the changes are saved.

Static HTML renders faster, which means that there is less load on the web server and the web server has more resources to handle traffic spikes.

The 2017 Festival

2017 was a record breaking year for the Fringe Festival! An increase of 8,000 tickets sold from the previous year meant that there were 400 sold out performances and Fringe artists earned more than $1.15 million from ticket sales.

“I’ve never worked with a consulting company that had such incredible attention to detail. I’ve lead four organizational website redevelopments in my career and this is the most sustainable, turn-key product I’ve seen delivered.

They truly considered our organization needs, constraints, and goals, then delivered a phenomenal product that not only solved our problems, but also bridged gaps we didn’t even realized we had. Everything from the back-end system to supporting documentation and training tools were constructed with our team in mind – tailored to meet today’s needs, while also providing a structure from which we can grow and expand.”

— Bobbie O’Connor, Fringe Theatre

The Future

We’re excited to continue working with the Fringe Theatre team to continually improve the site’s performance and increase ticket sales. We’re now armed with detailed analytics from many months of Evergreen mode and two full weeks of Festival mode. We’ve made recommendations for changes and new content pieces to make things even better for ticket buyers during the 2018 Festival!

Did this blog post make you think of an upgrade your organization needs to make? Get in touch with us to plan an investment in your website!

Perhaps you’re wondering how a process that’s supposed to boost your site’s rankings could possibly send them plummeting instead.

Let’s start with what it looks like from the web development side of things. Here is the kind of things we’ve seen, sometimes all on the same site:

• No sitemap URL given to Google Search Console, or the one in the account redirects or produces an error
• Crawling the site reveals numerous 404s and 301s
• Not all internal links have been updated to use https
• The SSL certificate doesn’t cover off all domain variants
• The non-www version of the web address doesn’t redirect to the www version (or vice versa, if the site’s canonical URL isn’t www)
• The http versions of the URL don’t redirect to https
• There is no sitemap address in the robots.txt file, or the sitemap address hasn’t been updated to use the https version
• The site files haven’t been updated to link to secure versions of resources (such as a Google Fonts link, a stylesheet link, or a jQuery link)
• Pages or posts have insecure content inside them (such as a YouTube embed using the http version of the video address)

Not good.

But what does that actually mean, from an SEO perspective?

To start with, a good number of the scary things we have seen make it harder for Google to figure out what do with your website, and how to interpret it.

For example, if you don’t have a readily accessible sitemap, Google has to figure out for itself where that might be, and what the most important pages of your website are. So unless you give Google a sitemap, there’s ample room for important pages to get missed entirely. And a page needs to be indexed to rank. Ignoring your sitemap is a big risk, and such a small thing to correct.

The same applies if you haven’t set up your site to bump visitors over to a consistent domain (such as https://www.yoursite.com) no matter what. For this one, it’s worthwhile to remember that computers are incredibly literal-minded. A search engine will treat the following as distinct pages:

http://yoursite.com
https://yoursite.com
http://www.yoursite.com
https://www.yoursite.com

You need to help search engines figure out which one it actually needs to pay attention to, so it can stop splitting its focus. This is also why you need to be consistent about how you write your internal links, and make sure your redirects are directing to the right place!

Similarly, your sitemap must accurately represent your website. Tell Google Search Console (GSC) where your sitemap is located — this also helps Google crawl your site! And, when you submit your sitemap for crawling, it’s important that you update your GSC account if the location changes. Your robots.txt, which is the file that tells search engines what on the site they’re allowed to look at, should also have a line for your sitemap. This needs to be current and accurate too.

As far as 404s and 301s go, 404s are an obvious problem. Search engines can’t index what they can’t find, so if you have a page that resolves in a 404 when it shouldn’t be, you’re missing out. What’s worse, 404s are a signal that your site is lacking quality content, and Google is actively watching for quality when figuring out rankings.

301s are a bit more insidious — they’re generally fine right up until one leads to the next and the next before the user is given a page address that actually loads (this is commonly called a ‘daisy chain’). The more times a user gets redirected before a page load, the more you water down any authority the page may have.

How about that SSL certificate? If you’re going to redirect visitors to one version of the URL anyway, why does it matter if a bunch of versions people are never going to see don’t have a security certificate?

Simple. If someone types the https version of one of those other URLs in their browser, or clicks on a link that directs to it, they’re NOT going to get redirected like they’re supposed to. Instead, that visitor’s browser is going to detect that the SSL certificate doesn’t cover that address, and it will stop everything to display a scary-looking error instead. So now you’ve got a visitor looking at a page with a security alert, instead of the website you’ve spent so much time polishing.

Search engine spiders don’t like seeing that any more than humans do.

Finally, there can be links trying to load insecure content into your website. This prevents the page from fully securing, and is why you’ll sometimes see a page with an https address, but without that reassuring green lock in the address bar. The error happens when your content comes from source that doesn’t use https itself, and can be anything from a Javascript library the site relies on, to a video embed inside a page from a service like YouTube or Vimeo. The end result is a page that’s not as secure as it should be, and search engines will treat it accordingly.

That’s a lot to keep in mind! But, working to avoid these kinds of problems is how you’ll avoid that worse case scenario: a big drop your search rankings and site traffic.

Now that we’ve covered what a bad migration looks like, let’s talk about what you can do to prevent this whole situation from hurting your company.

Or, if you already suspect you’ve got a bad https migration on your hands, what can you check your site against to figure out what you can improve?

As with so many things, there’s no real trick to this aside from having a plan and being methodical about it. We use a checklist to keep the whole process as systematic and manageable as possible, whether we’re starting a fresh migration or fixing up one that’s already gone live.

We have put together an overview of what we look for in a solid https migration. If you’ve already committed to https but aren’t getting the results you expected, comparing this to your own site can help you figure out where you have room for improvement.

Are you in panic mode already? You know something went wrong, and you just plain want it fixed. Or you’re looking at a long list of items to address, and you’re overwhelmed at the thought of it all. Not everyone has the time or resources to make these kinds of fixes in house, and that’s okay too!

If this is your situation, get in touch — we will get you back on track, and set you up with strategies for the future too.

This part is the most intensive, and hands down the most important. Before you commit to that SSL certificate, addressing these items will make sure your site is in great shape.

• Consider a staging site. If you don’t use a managed hosting service like WP Engine (and even if you do), this should be the first thing you put into place. Why? Because any time you’re making a significant change on a site, things can go wrong. A staging site gives you room to try out your changes in a safe environment before you commit to them live. It’s half due diligence and half peace of mind.
• Make a backup. Whether you’re using a staging site or not, do not be tempted to forgo this step. It’s not possible to take too many backups — you never know when you’ll need to roll back a change in a hurry. You should have a current copy of all your key site files (for example, the whole wp-content directory if you’re using WordPress), and a full export of your database. You can do this manually, use a backup service, or use your hosting service’s backup feature; just make sure you know how to do a restore with your chosen method! We love the plugin WP Migrate DB for database backups, and it’s got another great feature we’ll use later on in this process too.
• Crawl those links. You’ll need to take a good look at your site’s internal links with a program like Screaming Frog. This will tell you whether you’ve got broken links (404s) that need fixing. It will also show you links that redirect (301s), such as links to internal pages using a version of your URL that they shouldn’t be (for example, if your canonical address is http://www.example.com, check for links using http://example.com instead). Fix everything you can now, before you commit to that SSL certificate.
• Take the Before picture. Use Google Analytics and Google Search Console to generate your organic traffic reports. If you’re not already using these tools, now is a great time to start! In Google Analytics, export a copy of your organic traffic landing pages. In Google Search Console, do the same thing, but for the keywords people are using to find your site. Set the reports to cover your most recent three months.
• Check your site files for absolute (hard-coded) links. As soon as you update your site to https, these are going to turn into unnecessary redirects to be a problem, so make sure you know what to watch for and fix as much as you can now. If you’re linking to resources like Google Fonts or jQuery, make sure the URLs use the https form now. If you’re linking to pages on your own site, make a list of what needs to be changed to https at launch, or if you’re using a CMS like WordPress, consider rewriting those links to include a function like home_url() so your site will automatically fill in the correct version.
• Check your pages and posts for content from external resources. This information will be in the crawl you did earlier. If the links don’t use https in the address, update that now. This might be a form you’ve embedded from a third-party service, a YouTube iframe embed, or an image file that’s hosted on another website. If the service doesn’t use https, find an alternative service that does.
• Check your redirects. If your site has any 301 redirects set up, this is the time to prepare them for the change. Depending on your website, they may have been set up directly in your .htaccess file, or with a plugin like Redirection. If the redirects are in your .htaccess, prepare a copy updating your 301s to use https addresses for the destination. If it’s in a plugin like Redirection, confirm you’re not using absolute URLs for your redirects if you don’t have to, or prepare the updates as directed by the plugin’s documentation so it’s ready to go as soon as you need it.
• Check your canonical URLs. These show up in a <meta> tag in your site’s header. If you’re using a CMS like WordPress, check if these will update automatically when you change to https, or ensure you know how to update these if it doesn’t. If you’re not using a CMS, prepare a copy of your site files that will use https.
• Check your robots.txt. Make sure it’s not disallowing anything important, and prepare a copy linking to your sitemap with an https address.
• Check your sitemap. Depending on your setup, you’ll either have to prepare a copy that uses https yourself, or you’ll be using a plugin like Yoast that auto-generates the sitemap for you. Make sure you know which category you fall into and prepare accordingly!
• Check your Google Search Console settings and verify your https domains. You should have a Google Search Console property set up for every version of your site’s domain (both www and non-www, plus now http and https). If you can, make sure they’re all verified now, and that the settings from the http versions are also set up on the https versions.This will help with tracking once you’ve completed your migration.

You’ve made it through the preparation stage, and you’re ready to order that SSL certificate — excellent!

• Take a FULL backup of your site. This means a copy of your database plus all your site files (such as the entire wp-content directory, for a WordPress site). The idea is to capture all your pages, media files, themes, plugins, settings, and anything else unique to your site. Don’t be tempted to skip this step, and take as many as you need throughout the process!
• Request and install your SSL certificate. What this involves will vary based on your hosting situation (for example, whether you’re using a managed hosting service like WP Engine, basic hosting with a cPanel install, or any one of a number of other hosting options). Whatever your situation, follow the directions in their documentation, and don’t be shy about contacting their support. You’ll need a certificate (or certificates) that covers all applicable variants of your site’s url. In many cases, certificates from the free service Let’s Encrypt will do the trick, but it’s worth your while to shop around and make sure your specific needs are covered off by whatever certificate authority you choose.
• Apply your site changes live. Remember those updates you made to your site files? Now is the time to apply any updates you made to your theme files, robots.txt and any other files to your live site. This is also the time to update and verify your 301 redirects.
• Set up your https redirect. This is what will make sure visitors to your site are given the https version of your site no matter what. It can be done with some rules written into your .htaccess file, but if you’re using a managed hosting service, or if you have a security plugin like iThemes Security installed, they may have settings to help you put this in place without touching the .htaccess file directly. Again, when in doubt, contact your hosting service’s support for help.
• Test those https redirects. Try out all the versions of your URL (non-www, www, with https, without https, with a / at the end, without a / at the end) and make sure they’re all directing to the same canonical version of the URL. For example, on Full Stacks, the canonical would be https://www.fullstacks.pro — no matter what version of that address a person arrives from, they should see that one in their address bar.
• Rewrite your internal URLs. You’ll need to make sure none of the internal links on your site are using anything other than https:// in the URL. This ensures consistency when people browse your site, and prevents unnecessary 301 redirects along the way. If you’re using WordPress, this is where WP Migrate DB really shines. It includes a find and replace function you can use to search your entire database for the non-secure version of your URL and replace it with the secure one. Whatever you use, make sure you backup your database first!
• Crawl, crawl, crawl. Just updated your theme file to get rid of non-https links? Crawl the site. Added in redirects? Crawl. Rewrote links in your pages and posts to use https internal links? You guessed it, crawl. Just like with backups, when in doubt, crawl those links. This will tell you right away if you have any links that aren’t updated, or if you’ve suddenly got a 404 error, or if you’ve introduced a 301 you didn’t mean to. By the time you’re done, none of the internal links on your site should be using http:// in the address.
• Check the status of your SSL certificate. This is as simple as plugging your site’s address into a service like SSL Test. You’re looking for the test to come back Trusted, and ideally with an A rating.
• Annotate your migration in Google Analytics. Google Analytics has a handy little feature that lets you make note of key events right on the report graphs. We use it any time we make a change to a site, like routine maintenance, or — you guessed it — migrating to https. If you get in the annotation habit, you’ll have one more tool at your disposal if you notice any strange changes to your site visits.

You’re done the hard part, but there are a few things left to take care of.

• Make sure all of your pages show that little green lock icon next to the address bar. Remember how we checked for content from external resources in the pre-launch? This is because pulling any external content (like images, or video embeds, or stylesheets, or fonts) that aren’t secure into a secure site causes a conflict. In order to make sure your site is fully secure, you’ll need to hunt down every last one of these and fix them. Fortunately, there are services out there, such as SSL Check, that will crawl a website and find the problem spots for you.
• Make one more crawl. Verify there are no more insecure internal links, and you don’t have any fun new 301s or 404s.
• Update Google Search Console. Make sure the https versions of your URL are verified, their settings match the http versions, and the robots.txt is showing correctly. Submit your sitemap.
• Update Google Tag Manager. If you’re using tags or triggers, you might have some set up with full URLs instead of a Google Tag Manager label. Make sure to update all of those to https, or better still, change them over to a label like {{Click URL}} instead.
• Update your ads, affiliates, and any third-party extensions you’re using. These will all need to point to your shiny new https address going forward.
• Monitor your site traffic. You’ll want to watch for big traffic drops. Google Analytics’ custom alerts can help you stay on top of any traffic changes, or you can set up a rank drop alert in a platform like STAT. Keep an eye on these over the next several weeks.
• Monitor the crawl status of your https URL. Keep an eye on its indexation status, visibility, and watch for any errors that crop up on both the http and https site versions. Like with your rankings, you’ll need to check back on this one regularly.

Great, you’ve migrated! But, what about all the places you’re linking to your website? Take this time to check any other resources you have that direct to your site, and decide whether you need to update the web address on them as well.

Depending on your situation, this could include:

• Social media links
• Web ads, such as AdWords, Facebook Ads, LinkedIn ads, or any other ad networks you may have submitted to
• Non-network web ads
• Other third-party traffic like linkbacks
• Print materials, such as brochures, business cards, or anywhere else you may be printing out the full site address

Websites are a Work in Progress

Whether you’re preparing for https, or have already migrated over, these guidelines will help keep your site on track. But, they represent just one part of the larger picture.

Committing to https is important. For many sites, https is about to be non-negotiable. The thing is, while https will help you out, it’s no substitute for a strong content strategy, or solid link building. It won’t help your user experience either.

Just as missing out on one of these steps in an https migration can make the difference between improved rankings and a rankings drop, adding https can fill in a blank spot in the canvas of your overall web strategy.

At the same time, it’s only one piece of the whole. If you’ve committed to https, why not also take the opportunity to step back and see if there are other spots you could improve on by visiting Our Process page?

Nine years ago, Yellow Pages reps were still trying to talk people into print ads—for the past several years they’ve switched to pushing them towards what we view as terrible online advertising options and even more terrible Yellow Pages websites.

The Yellow Pages reps continue to tell people the same old BS stories, but they’re getting more insistent as they become more and more desperate. Their FUD runs along these lines:

1. We are the only authorized Google Ads reseller in Canada.

There are two parts to this. First, it implies that being a Google Ads reseller is better than a Google Ads Partner. That’s absolutely not true. You do not receive better rates by working with a reseller — if anything, it costs more and they provide you with less reporting. Secondly, they are not the only authorized Google Ads reseller in Canada.

2. Having a paid listing on the Yellow Pages will improve your rank on Google.

No, not true. But a lie the reps seem to tell a lot, based on what we hear. Check out a Yellow Pages listing. You’ll see that the link to the website is actually something like http://www.yellowpages.ca/gourl/http://www.yourcompany.com— that means that the link actually is a redirect from the Yellow Pages site, not a true link to your site. It may pass along some link value, but it’s of very low quality.

Having a free listing provides you with a small boost for local SEO, but the paid packages at Yellow Pages won’t impact your visibility on Google.

3. The Yellow Pages website gets more traffic than Google!

Absolutely not. The below chart of monthly visitors in Canada will paint the real picture. This data is provided by Amazon’s Alexa Internet, a well-regarded provider of competitive website statistics.

4. We have special ways of making your site show up on Google — no one else can do that.

They’re talking about pay-per-click advertising here. They’re just using the local business options available to any Google Ads advertiser. Nothing secret there, just knowing what boxes to click.

And the worst one of all…

5. If you cancel your ad with us, your ranking will go down on Google.

An absolute lie. Ask them for proof — how will this happen? Ask for specific examples. In our experience, we have not seen any detrimental ranking effects when a client has canceled or downgraded their Yellow Pages listing. If anything, they can improve their reach because of the money they saved and reallocated on better advertising options!

We discussed this issue on Twitter back in 2010, and if the folks at Yellow Pages even noticed, they never said anything. If Yellow Pages was as web-savvy as they claim, they would have picked up on the Twitter mentions by now and gotten in touch.

Updated 2019:

1) Check your contract

We were able to get our hands on a recent Yellow Pages contract, and the terms and conditions mirrored the comments we’ve received here. They put in an auto-renew clause that states that you need to give 3 months notice before your annual contract ends.

2) Call this number: 1-877-909-9356

In many of the comments we’ve received, people have struggled with actually getting a hold of someone to submit their cancellation.

Thanks to Mel for sharing this phone number where she had some success.

3) File a complaint with the Better Business Bureau

If you’re being charged for something you never agreed to, can’t get in touch with anyone at Yellow Pages in order to cancel, or are being hounded by credit collectors, file a complaint with the Better Business Bureau. It looks like Yellow Pages is actually responding to most of these complaints, but it’s not clear if they’re truly rectifying each issue.

Help stop Yellow Pages

Frustrated by the FUD business practices of Yellow Pages? Here are some suggestions we’ve received from users on how you can draw attention to their tactics:

• Share your story with CBC Marketplace.
• Report an incident with the Canadian Anti-Fraud Centre.
• Warn your friends, family, and business colleagues.
• Post about your experience on social media and tag Yellow Pages.

Updated May 16, 2019.