Mackey

Lab Notes

by

5 Tips For Rewriting Content on a Major Website Redesign: How We Attacked 33,000 Pages of Content

When we started working on the redesign of the Pasadena City College (PCC) website we were presented with the daunting task of sorting through over 33,000 pages of content. Their current website had no site structure or organization. The majority of the pages had out-of-date, inaccurate information. Another hefty chunk were just duplicates of the same content, while another good portion were mysteries, with no idea of when or how they were created. On top of the massive amount of content in front of us, we were also faced with A LOT of content owners. Each area of the college owned different files of content — some they had created, some had been inherited, and some were orphans.

After kicking around a lot of methods on how to tackle this, we finally decided we had no choice but to purge. Say bye to 33,000 pages of content and pretend like we were starting from scratch. And so we set out on a quest with one goal in mind: what should be on the college’s new website?

The process required a lot of time, thought, and meetings — lots and lots of meetings. But, when the new website was launched it had a fresh look with up-to-date information (not to mention it was about 30,000 files lighter). Hindsight 20/20, we made some mistakes, prolonging an already arduous process. But, if we had to do it all again, I would still say, “purge, baby, purge”.

And, in case we do ever have to do it again, we came up with our big lessons, the 5 must-dos when beginning a website redesign project that includes a lot of content creation for a lot of content owners.

1. Develop a content strategy

Having a content plan from the start on how you will attack the content process will make the work you do more purposeful from the start. Create your own strategy, use an existing one or a little of both. For us, we found a lot of great content strategies and tips, but none that took into account the aspects unique to this project —  budget, timeline, and the institution itself. So, we developed the PCC Content Strategy, heavily based on the “Core Model Content Strategy” from information architect Are Halland. The Core Model focuses on the core tasks users need to accomplish and helps maintain focus on only necessary content. We used Halland’s theory, processes, and tips, and then created a process that would work for PCC.

[button url=”http:/https://alistapart.com/article/the-core-model-designing-inside-out-for-better-results” color=”black” size=”small” type=”square” icon=”” target=”_blank”] Read More About the Core Model [/button]

 

2. Gather tools to make your life easier

The one thing we knew from the very beginning was that there were going to be a lot of people involved, a lot of stuff to keep track of and a lot of time was going to pass from start to completion. Our tip? Don’t do what we did, which was not have clear tools selected beforehand. Instead, find the tools and set up a process for using them before you begin. Here are the tools and resources that ended up helping us the most:

  • Writing Style Guide: We developed our own based on the AP style guide. Whether you do that, or just adopt an existing one, have it set before you begin. This will make sure that what you write at the beginning and what you write at the end is consistent (i.e. fewer revisions in the end. yay!)
  • Trello: We didn’t use Trello at the beginning, but how I wish we had! Trello is a free project management tool that allows you to organize and collaborate in a very flexible way. It kept us sane and I highly recommend it – FOR EVERYTHING! Learn More About Trello.
  • Google Drive: Every time we worked on a new area, they got a folder in Google Drive. Everything — meeting notes, site outlines, resources sent from the area themselves— went in there. The project took a long time to complete, so having everything in one place (and knowing where that place was) to refer back to was key.
  • GatherContent: This is where we actually wrote the content. It allows for writing, collaborating and organizing. Plus, it has workflows that help you manage the project. It’s a bit of an investment, but if budget allows, get it. Learn More About GatherContent

3. Find out about everything that exists at the institution

“Everything” may sound a little dramatic, but it’s true. There is a lot that goes on at a college, resulting in a lot that will go on the website. Some of it should be there, some of it has to be there. So, start investigating — what programs exist? How is the school organized? What are the items that legally must be on the website?

To start answering these questions, we used the college’s current website (ok, so we didn’t completely purge) as a starting point— just to help identify the programs and areas of the school, knowing some may no longer exist. This was followed up with fact finding from key stakeholders to gather more information and fill in holes. From there, we put them in a long list, with notes about what each program/area was. We didn’t focus too much on the organization for the list. Our goal was simply to capture everything that was going on, so we knew where to go next.

4. Meet and Listen to Everyone

It takes time, but it’s crucial. Before we wrote a single sentence, we met and listened to a lot of people. We met with key stakeholders to get a better understand of the college. Then, using our list of “everything happening at the school”, we held content workshops with each area and program. Together with the staff of each area, we dissected their programs, services, and users’ needs to help us understand what needed to be included on their area’s website as well as how what they were going to fit into what the rest of the campus was doing.

It took time, but meeting with each area of the college was probably one of our biggest successes. We learned a ton about the college. But, even more importantly, we got buy-in from the campus. The people we talked to felt part of the project, creating a greater set of ownership and appreciation for the process that was unfolding.

5. Understand the Big Picture

Pasadena City College is a big place with a lot going on. But sometimes with so much going on, it’s hard for people on the inside to know about all of it. Each area were experts in their area, but to pull this off we needed an expert on all areas. Having the same team meet and communicate with every area, allowed us to see the big picture. Our team made connections, spotted duplicate information across areas and knew who to talk to when we had questions. Understanding the big picture led to a solid content organization that built meaningful pathways for users to better navigate the new website.

These five tips just scratch the surface of all we learned about how to approach content in a major website redesign. We are working on putting it all on paper (aka the blog) to share. But, in the meantime, reach out with questions. We like to talk.

by

Scrolling: Do users scroll? Is scrolling bad web design? Does “above the fold” even matter?

Often when working with clients we are asked if “scrolling is bad user experience” (or, actually, sometimes told “it’s bad user experience“). It’s a great question and definitely something to consider. For us, most often it’s a simple answer: “NO, scrolling is NOT bad user experience.”  But, it’s also a bit more complicated than that, of course (#simpleiscomplicated).

The Background

The notion that scrolling is bad seems to be rooted in print. As a newspaper, you wanted to grab the readers attention by getting your most important content above the fold.

For those of you that have never seen a newspaper before, they are first folded in half vertically and then in half again horizontally. The end result is a square. The final front of the square or final fold, is considered above the fold. It is the first thing a reader sees, whether that be on a shelf, on the driveway or sitting on a park bench.

The idea of above the fold translated well to computers in the early- and mid-nineties, as scrolling was much more of a pain in the ass. You had to click on the scroll bar on the right side, drag it down or keep clicking the arrows to scroll down the page. So obviously, this was bad user experience, and, you better have some really good content down there for me to start clicking and dragging — especially with a mid-nineties mouse (we’re talking about the AOL days here).

Devices changed. Browsers changed. Welcome the mobile era. Welcome more standards based browsers. But for some reason, the belief of “above the fold” and “scrolling is bad” stuck.

Above the Fold?

I ask you, “what is above the fold in web design?”

Is it above the fold on a mobile device? Is it above the fold on a 32″ TV? Is it when a user has their browser landscape, vertical, square?

You see my point. We cannot always clearly determine how a user views and interacts with a website. There are just too many variables. Yes, we can try via various methods to determine the size of their browser, but this takes additional time and testing, which in turn costs more money and then the question becomes, does all that time and money give you any return on investment?

Better. Spend that time and money creating content and a visual hierarchy that will give the user a reason to read beyond “their fold.” Create a clear message, good headlines, and sub-headlines. “Above the fold” is crucial to users deciding whether your page is worth reading. So, focusing on clear messaging and priority content is key. And then let them scroll, scroll, scroll!

The Research

There is plenty of research and data all leading to the fact that scrolling is actually good user experience. A few highlights that help prove my point (you can see plenty more at UXMyths as they have thoroughly covered the subject)…

  • Chartbeat, a data analytics provider, analyzed data from 2B visits and found that “66% of attention on a normal media page is spent below the fold.” – What You Think You Know About the Web Is Wrong
  • “Engaged time peaks just above the fold,” according to research by Luke Wroblewski based on 25M sessions.
  • Mobile: half of users start scrolling after 10 seconds, 90% after 14 seconds (how about them apples).
  • The design agency Huge measured scrolling in a series of usability tests and found “that participants almost always scrolled, regardless of how they are cued to do so – and that’s liberating.” – Everybody Scrolls

See more at UXMyths.

The Reality

[quote]”Scrolling is a continuation. Clicking is a decision.”[/quote]

Give the user a reason to scroll, and they will scroll. So in theory, yes, above the fold is important, actually critical, but that does not mean everything needs to be above the fold. Users scroll. It’s how we have learned to interact with our devices.

Scrolling is conventional.

Think for a moment, what if all stop signs at intersections we’re different shapes? Probably would make for some pretty messy roadways.

Users need conventions. It helps them interact with websites and not be left in a state of confusion. Of course, there are cases and instances when you may want to break conventions depending on your goals. And, just because you use conventions, does not mean that your site is not unique or you can’t stay true to your brand — the familiarity of conventions, helps users quickly connect with your site and understand how to navigate your site. Steve Krug, author of Don’t Make Me Think: A Common Sense Approach to Web Design writes, “[a]s a rule, conventions only become conventions if they work” — it might be good to think twice before reinventing the wheel.

Scrolling is Pretty Cool Nowadays

As web developers and designers we can do very cool things as the user scrolls throughout a page and a site — more interactive than when making them click from page to page. Little easter eggs throughout the page as the user scrolls create visual interest, allow for introducing new topics, call attention to particular content and help focus attention on calls to action (business goals).

So don’t be afraid of the scroll! Users want it, they need it and they love it!

by

Wrangling Content Through Collaborative Content Workshops

Preparing content for a website is challenging. Doing so with multiple stakeholders is even more challenging. And doing it with hundreds of stakeholders can seem near impossible. The larger the company or institution, typically means more content that exists and even more opinions on which content reigns supreme. Everyone thinks their content is the most important and should reside on the homepage and, if left open to discussion, lengthy debates are sure to ensue.

That’s where the Core Model comes in. The Core Model is a content strategy developed by Are Halland that focuses on content that meets users’ needs rather than on content we think we need. For every website we build and develop content for — whether big or small— we use this content strategy to design the site from the inside out. When working with larger institutions, companies or organizations, we use this same strategy, but conduct “Content Workshops” to introduce core model thinking to stakeholders and work together to determine what needs to be on the site. These workshops take time, but in the end, deliver a well-thought-out website as well as greater buy-in from stakeholders.

Who Should Be At Content Workshops

Who attends the workshop is going to depend on the size of the organization. Ideally, there would be 6 – 10 stakeholders that represent at a variety of areas of the organization. These should be people who deal with content and/or have strong opinions on the website. For larger organizations, you may end up having multiple content workshops. For example, when working with Pasadena City College, we conducted content workshops for every major department of the school.

The 6 Parts of the Content Workshop

You’ve got everyone in a room, ready to prepare content, now what? Here are the 6 basic parts of a Content Workshop.

[alert style=”alert”]

Download the Core Model Worksheets and Presentation materials.

[/alert]

1. Introduce Goals and What Makes Content Good

The people at your workshop will come in with varying opinions, backgrounds and levels of content experience. Start out by setting the stage with the goals of the workshop and a clear definition of what constitutes good content. Doing so will help keep people on the same page as well as provide a launchpad of where you’re going. And if things start to veer off course (which tends to happen in group settings) you have a place to bring them all back to — your workshop goals and definition of good content.

Content Workshop Goals: 

  1. Brainstorm what information needs to be included in your section of the website
  2. Identify the “core pages” in your section
  3. Create an outline of the information to be included on the core pages of your website

What good content looks like:

  1. Appropriate: it’s right for the user and for you
  2. Useful: Define a clear, specific purpose for each piece of content; evaluate content against this purpose
  3. User-centered: adopt the cognitive frameworks of your users
  4. Concise: Omit needless content

2. Identify Your Cores

Your core pages are where your website goals and the users’ tasks overlap. In step 2, it’s time to figure out what those cores are. To do so you need to first figure out the following:

  • Users: Who’s coming to your website?
  • Business Objectives: What are the organization’s end goals? What do they want to accomplish?
  • User Tasks: What do users come to the site to accomplish?

The user tasks can be the most difficult thing for people to identify. Keep people from answering “what they think users want to accomplish” by diverting to fact. Use analytics from the current site, conduct task surveys or focus groups with real users, look at the market research of what users do on competitors’ sites — each of these methods can all be used to help identify the actual goals of users visiting your site.

Once your users, business objectives, and user tasks are defined, you can find your cores. The core pages are those where business objectives and user tasks overlap. These “Core Pages” will be the main pages of your site and the guide for what content the group needs to develop.

3. Identify Your Inward Paths

Once your core pages are identified, it’s easy to just want to start creating. But before you do, we need to plan your Inward Paths. How will the user get to each core page? There will most likely be several inward paths — googling specific terms, a link on the homepage or another area of the site, referrals from print collateral. Thinking about where users are coming from is another step in putting yourself in the shoes of the users and then planning content from their perspective.

4. Brainstorm the Content for Each Core Page

This is where you answer the question, what content elements do we need to make sure the user solves their task (while respecting our goals)? Using the user tasks, inward paths and business objectives as a guide, work as a group to brainstorm the most important things that need to go on each of the core pages. Don’t get bogged down in the details — just focus on a list of the main items of information a user is going to need.

5.  Prioritize Content

Most likely, over half of your website visitors will be visiting your site on mobile. The next step is to take the content elements you have brainstormed for each core page and prioritize them with a mobile-first mindset. Ask workshop participants to think about a tiny phone screen. If that’s all a user has, which content items would need to be first? For each core page, reorder the content elements to prioritize content for a mobile screen.

6. Identify Forward Paths

The end is near! At this point, you have figured out why users are here, how they arrived, and what information you’ve given them. The key to the Core Model is figuring out where we want them to go next. These are called the Forward Paths. To figure this out, think about:

  • After the user has solved their tasks, where do we want to send them next?
  • Send them to places the user may not be coming to the site to visit, but are still important and will help you meet business goals.
  • Forward paths could be other parts of the site or a call to action for users to complete a task.

Most importantly, when determining these forward paths, stay in the mind of the user. Why are they here and how can we frame the forward path so that they are compelled to follow the path you’ve set for them.

At the end of your workshop, you will have content outlines for each core page of the site and defined paths for how users will navigate through the site. From here, the writing can begin, developing content for each page based on the core elements identified during the workshop.

But perhaps the most valuable part of the content workshops is that they replace the debates of what should be on the site with a group of stakeholders who are enthusiastic about the content of the site. Participants leave the workshop accomplished — full of ideas and a clear plan of what content needs to be developed the site. Taking the time to collaborate and plan the site from the users’ perspective, unites your stakeholders and sets you up for a website that is clear, focused, and allows both you and users to accomplish your goals.
[alert style=”alert”]

Download Core Model Resources

Download the Core Model Worksheets and Presentation we use on every project.

[button url=”https://mackeycreativelab.com/core-model-work-sheets-presentation/” color=”red” size=”medium” type=”square” icon=”” target=”_self”]Download Now[/button]

[/alert]

by

Website Accessibility – It’s the law, it’s moral and it’ll make your site better!

Honestly, we never thought we would become accessibility experts (well, maybe not experts, but at least well schooled). We didn’t pay much attention to accessibility. Of course, we were cognisant of the SEO benefits of making sure your headings are in order and that you have alt tags on all your images — but if it didn’t increase the bottom line, we weren’t worried about it.

Oh, were we wrong.

Looking back at our ignorance, I can’t help but feel ashamed — it doesn’t take much extra effort to make a website accessible, but it can make a world of difference to someone with disabilities.

When we started working with education, accessibility was (and is) the buzzword. Everyone is getting sued or in fear of being sued over accessibility. And tt’s even started to go beyond government-funded organizations — lawyers are advising businesses that they could be next!  Now, I don’t think the legal attention is necessarily because the suing lawyers want to create a better internet for disabled people, but nonetheless, it has brought a topic to the forefront that we as designers, developers, and content creators should all be aware of and helping to make a difference.

So, regardless of motive, we began to focus on making a website accessible, but only from the standpoint of passing the WAVE Accessibility Tool (and of course SEO).  During the development of the Pasadena City College website we were lucky enough to 1. have the legal spotlight upon higher education, 2. have direct access to students and staff with disabilities, 3. have a team that believed in accessibility (yes, that’s you Michael Ihrig) and 4. the support of executives to spend the time and resources to get accessibility right — testing with actual disabled students and staff, hearing their feedback, making adjustments and retesting (passing WAVE was just a bonus!).

For me it hit home the first day we did user testing. I can remember sitting in the office, watching a blind employee trying to navigate what we thought was an accessible site (what WAVE thought was an accessible site too!). It wasn’t the headings, it wasn’t the navigation — it was the things that you can’t test with an automated tool…

  • The alt tag that reads “this is a picture of a student” — that’s worst than putting no alt tag!
  • A button with “Click here” with no clear text of where they will go if they “Click Here.”
  • Not being able to find the main navigation, the section navigation, etc.

It was the small things, the things we take for granted. For the first time, I was able to l experience the web the same way as someone who can’t see. From that, we have learned some valuable lessons and some simple things you can do to make life on the web a little better for people with disabilities.

ARIA

With HTML5 came ARIA or Accessible Rich Internet Applications. ARIA gives you the ability to add tags directly in your markup that speak directly to people using assistive technology — allowing you to cater and customize the experience for people using screen readers and other assistive technology. You can read the full W3C Recommendation here. We can’t possibly cover every ARIA feature (60+, see all), but here are few keys aspects that we found really helped.

Roles

Roles helps identify aspects of the page for users using screen readers. Users that cannot see the visual layout of the page, need roles to help them understand and navigate to aspects of the page. There are a lot of role categories, but they are broken down into four major buckets:

  1. Abstract Roles
  2. Widget Roles
  3. Document Roles
  4. Landmark Roles

Roles can be thought of like categories. Labels (see below) help define and identify the role. You can role and label everything, but we found through testing that the most important roles to pay attention to were Landmark Roles and Widget Roles (the others are important as well, but with limited resources, we needed to focus on the greatest ROI).

Landmark Roles

Landmark Roles are a bucket of roles used for navigational structures. We usually have more than one navigation menu on a site and using Landmark Roles in conjunction with labels allows you to indicate to someone using a screen reader which navigation is which and allows the user to quickly jump to navigation.

In it’s simplest form, you would add a role=”navigation” and aria-label=”Main Navigation”  to the wrapper of your navigational element.

<div role="navigation" aria-label="Sticky Utility Navigation">...</div>

Widget Roles

Widget Roles are things like tabs, scrollbars, tooltips, buttons, etc. — they help give context to the user about the element they are interacting with.

<div id="accordion-d11e519" role="tablist" aria-multiselectable="true">

    <a role="button" data-toggle="collapse" data-parent="accordion-d11e519" href="#d11e519-collapse-1" aria-expanded="false" aria-controls="d11e519-collapse-1">General Questions</a>

</div>

You can view all roles at https://www.w3.org/TR/wai-aria/roles#abstract_roles.

Labels

ARIA labels help identify elements that are invisible to a screen reader. Use labels to provide an invisible label (visible to screen readers) when a visible label cannot be used. This can be for buttons, input fields, text areas, etc.

For example, you might have a modal that is closeable via an image or a Font Awesome icon. To a screen reader, this means nothing. By adding the aria-label attribute you can tell a screen reader that the button is a button to close the modal.

<button aria-label="Close" class="close-button">X</button>

Additionally, if you have multiple labels that need to be grouped, you can use aria-labeled-by attribute on the parent element. For example:

<div role="group" aria-labelledby="groupLabel">
  <span id="groupLabel>Work Phone</span>
  +<input type="number" aria-label="country code">
  <input type="number" aria-label="area code">
  <input type="number" aria-label="subscriber number">
</div>

Visit https://www.w3.org/TR/WCAG20-TECHS/ARIA14.html for more information about ARIA labels.

Hidden

When you add aria-hidden=”true” to an element, it and all its descendants will be hidden from screen readers. This is really helpful if you need to hide content from screen readers, but want to display the content to users NOT using screen readers without having to change visibility.

<div aria-hidden="true">Screen reader will not read this.</div>

Screen Reader Only Classes

In many instances you want an element on the page to only be visible to screen readers. For instance, if you’re using a magnifying glass icon as your search navigational element, you will want to spell that out for screen readers — Search. Most CSS frameworks will come with a screen reader only class.

We used Bootstrap and their screen reader only class is sr-only. When added to an element, the element will only be visible to screen readers.

<a class="magnifying-glass" href="#open-search-modal"><span class="sr-only">Open Search</span></a>

If you want to create your own class, you can do so and then add the following to your stylesheet (CSS):

.screen-reader-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

Modals with Forms

Building off the idea of opening a search modal and including text only visible to a screen reader, when the user clicks to open the modal, the cursor should focus on the input field. Again, using Bootstrap, this can be done via adding a data-target attribute with the id of the input field that should be focused when opening the modal. For instance, data-target=”#search-field.”

<button class="site-search" data-toggle="modal" data-target="#searchModal">
<span class="sr-only">Search PCC</span><span class="fa fa-search"></span>
</button>

Alt Tags

Yes, include them, but if they have no relevant context to someone using assistive technology, then add aria-hidden=”true.” In the example above, we have a photo of a student. There is no added value unless you can see the image, so in this case include aria-hidden=”true.”  If you don’t have the option of adding aria-hidden=”true”  to your images via your CMS, then leave the alt tag value blank, ie alt=”” — this will make screen readers ignore the image without throwing an error (your SEO expert might say this is bad, but for a person using a screen reader, this is just flat out rude.)

<img src="student-image.jpg" alt="A photo of a student at school" aria-hidden="true" />

Nested Headings

Hopefully, this is obvious to you, but all your heading tags should be nested, starting with H1, then H2, H3, etc. There should only be one H1 as it is your page title. Think of it similarly to an outline for an essay or chapters for a book — heading tags tell the user what is in the outline of the webpage as well as allows someone using a screen reader to jump from section to section.

Side note: Be sure to make your headings relevant and make sense. They should indicate the major topics discussed on the page.

Don’t Use All Caps

If you type HELLO WORLD in all caps, screen readers will read that as H-E-L-L-O W-O-R-L-D — each letter, one at a time. If you need to make text uppercase, create a class for uppercase text, ie uppercase and add it to the block of text you want to be uppercase.

.uppercase { text-transform: uppercase; }

Bonus: Making PDFs Accessible

We focused on onsite content, but in higher education, we ran into a large (2000+) amount of PDFs that needed to be accessible. We did not have vast resources to make PDFs accessible, so we needed the participation and buy-in of the school. We took the approach:

  1. Can the PDF be a live page on the site and not be a PDF? If yes, then problem solved. If no…
  2. Educate the user on the need for PDFs to be accessible, then we refer them to the tools to help them make their PDF accessible (and yes sometimes, in simple cases, we did this for them)

PDF Accessibility Boilerplate and Tools:

“Any document posted to the public website must be section 508 compliant. In other words, it needs to be screen-reader accessible. To make PDF documents accessible/ 508 compliant and ready to post to the web, you just need Adobe Acrobat Professional and the attached instructions.

For a single column text-based document it typically takes less than 5 minutes to make that document accessible using the Acrobat Pro Accessibility Checker. For documents with more complex layouts, a lot of images, graphs, and data tables, it can take much longer at first as the learning curve is steeper. But once you’ve learned how to mark an image as “Decorative,” for example, or correct improperly nested headings that had been used incorrectly for styling in a converted Word document, the process becomes fairly straightforward. “

PDF Accessibility Resources:

 

Accessibility is where design, content, and development all come together. You need everyone to be on the same page and need all to help make any site accessible. I encourage you to also read our post, Wrangling Content Through Collaborative Content Workshops to learn how to get buy-in, create useful content, focus on user needs and find success when creating content for large organizations and higher education.

by

Simple Maintenance HTML 5 Splash Page — Free Download

Just a simple HTML5 maintenance splash page we utilize for various instances.  Here is the code below or download the file (updated April 2018).

<!DOCTYPE html>
<!-- saved from url=(0067)https://mackeycreativelab.com/wp-content/uploads/2014/09/index.html -->
<html class="gr__mackeycreativelab_com"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width">

<title>Performing Maintenance</title>
<meta name="description" content="Performing maintenance...">
<link rel="shortcut icon" href="favicon.ico" type="image/vnd.microsoft.icon" />
    
<style type="text/css">
    /* Reset */
  html, body, div, span, applet, object, iframe,
  h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  a, abbr, acronym, address, big, cite, code,
  del, dfn, em, img, ins, kbd, q, s, samp,
  small, strike, strong, sub, sup, tt, var,
  b, u, i, center,
  dl, dt, dd, ol, ul, li,
  fieldset, form, label, legend,
  table, caption, tbody, tfoot, thead, tr, th, td,
  article, aside, canvas, details, embed, 
  figure, figcaption, footer, header, hgroup, 
  menu, nav, output, ruby, section, summary,
  time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
  }
  /* HTML5 display-role reset for older browsers */
  article, aside, details, figcaption, figure, 
  footer, header, hgroup, menu, nav, section {
    display: block;
  }
  body {
    line-height: 1;
  }
  ol, ul {
    list-style: none;
  }
  blockquote, q {
    quotes: none;
  }
  blockquote:before, blockquote:after,
  q:before, q:after {
    content: '';
    content: none;
  }
  table {
    border-collapse: collapse;
    border-spacing: 0;
  }
      
      html {font-size: 16px;}
      body { text-align: center; padding: 150px; }
      h1 { font-size: 40px; font-weight: bold; margin-bottom: 1rem;}
      p {font-size: 1.5rem; margin-bottom: 1rem;}
      body { font: 20px Helvetica, sans-serif; color: #333; }
      #article { display: block; text-align: left; width: 650px; margin: 0 auto; }
      a { color: #dc8100; text-decoration: none; }
      a:hover { color: #333; text-decoration: none; }
    </style>
</head>
<body data-gr-c-s-loaded="true">
<div id="article">
<h1>Our site is getting a little tune up and some love.</h1>
<div>
<p>We apologize for the inconvenience, but we're performing some maintenance. You can still contact us at <a href="mailto:">email@domain.com</a>. We'll be back up soon!</p>
<p>— Business Name</p>
</div>
</div>
<script data-cfasync="false" src="./Performing Maintenance_files/email-decode.min.js"></script>
</body></html>

 

 

by

Do Pop-Up boxes work?

It’s a simple answer, yes Pop-up Boxes work. As annoying as we may think Pop-ups are to us as end users, they do work — and actually, they don’t need to be annoying. With good timing, thought, and creativity, Pop-up Boxes can work and can actually not annoy the end-user, in fact quite the opposite.

Pop-up Boxes help isolate a call to action, a form, or information, and often require the user to take action, usually to opt in or out depending on your campaign and goals. User’s attention spans are short, there’s any number of things distracting them while online — Pop-up Boxes help focus their attention.

Case studies have shown a 1000% increase in email subscribers by using Pop-ups, so let’s get into the nitty gritty of what they are and how to add one (or 100) to your site.

What is a Pop-up Box?

Pop-up Boxes might be referred to by a number of names — modal, slide-in box, fade-in box, notification, overlay, scroll box, smart bar, pop-up window, etc. — but for our purposes, we will refer to them as Pop-up Boxes. Our definition of a Pop-up Box is a small window that suddenly appears (“pops up”) in the foreground of the visual interface based on a trigger isolating content or a call to action.

Popups can be triggered by a number of events:

  • Immediately on-site load.
  • Delay a number of seconds.
  • When someone reaches a certain percentage from the top of the screen.
  • On particular pages, posts, articles, etc.
  • On a user action, ie a button or link click.
  • Upon exit, i.e. when they attempt to leave the site or abandon their shopping cart.

Types of Popups

Below are the most common types of popups, but really with a little imagination and creativity, there are endless ideas and options.

Welcome Mat

Or as we call it, “shove it down their throats.” This is when a new user lands on a page and is presented with an offer that is a Pop-up Box, but essentially takes over the entire window. More than often, this would be an opt-in / out call to action with an offer they can’t refuse. For example, upon page load, the Pop-up Box opens and reads “Do you like puppies? Sign up for our puppy of the day mailing list.” with a cute photo of a puppy. The buttons say “No, Puppies are the Worst” and “Yes, I love Puppies! Sign Me Up.” Essentially, the user is being given an option they can’t refuse or at least, in this case, would feel terribly bad about agreeing to anything but “Yes, I Love Puppies.”

Scroll Box

This might be the most common Pop-up Box we see these days. As you scroll down a page, hit a particular piece of content or stay on the site for “X” number of seconds, a box slides in with an offer or call to action. Again, as with any of these, there are options, options, options.

The Bar

A bar either at the top or bottom of the website that has a clear call to action. This could be something that is permanent or fades in on scroll or sticks to the bottom or top. There are a lot of options here, but the idea is that it’s not quite as intrusive as a Welcome Mat, but because it sits below or above your site, it captures the user’s attention.

List Builder (2 Step Opt-in)

This is similar to the above, but instead of asking for the goods up front, you get the user to click to receive an offer then ask for the goods (email address). It’s been shown that if you can get a user to say yes to a smaller action, they’ll be more likely to say yes to a larger action—in this case, giving their email address.

This might go a little something like this:

  1. A Pop-up box appears after 2 seconds on the page. The popup reads, “Click here to download The Best Thing Since Sliced Bread.”
  2. The user clicks and lands on a page that asks for their email address to download “The Best Thing Since Sliced Bread.”

Because they already clicked on the link they are already half way in and what’s entering an email if you already have one foot in the door?

Share Buttons

We all want people to share our content more, right? Well, why not put it front and center — Share Buttons at the top or bottom of the article or page may capture some conversions. We, first off, if they haven’t read the article yet, why would they share it? And secondly, if they never finish reading the article then they’ll never see the option to share it even though they loved the first 65% of the article. So, why not present the Share Buttons to the user after they’ve started the article and think it’s now worthy of sharing? Anchor the Share Buttons along the left, right, bottom or top of the article so it’s ever present in their mind to share, share, share.

Implementation

This is where the rubber hits the road. Timing, location, actions, etc. are just as critical as the content or message you create for your Pop-up. Often Pop-up Boxes are blamed for cheapening the brand or being annoying to customers, but they don’t need to be. Well timed and placed Pop-up Boxes not only convert, but they also can help the user focus in on what they are looking for.

For instance, if you are offering a download of an E-Book and it is featured in a blog post, the reader might see it in the first paragraph, but not be willing to click as they are wanting to read the rest of the article. After reading the article, as they traverse the article they may get sidetracked and forget completely about the E-Book offer. In this case, we would do two things:

  1. Add a call-out link to the E-Book toward the end of article.
  2. Add a Pop-up box that slides in from the bottom highlighting the E-Book with a call to action.

We’re not shoving it down their throat, but rather reminding them, “hey, don’t forget there’s this cool E-Book and it’s free and you should download it!”

There are a million different ways to implement Pop-ups and no two sites will be the same nor even two pages. How and where id particular to each site and the goals of the campaign.

Tools

So how do you implement Pop-ups? There are a number of sites that offer various capabilities of Pop-up integration depending on your needs. If you’re just looking to implement Pop-up Boxes and you’re using WordPress, there is a great plugin called Boxzilla that offers basics that will get you up and running and easily choose location, timing, design, content, etc. They also offer a premium option for $6 per month that will give you a few more options:

  • Exit Intent
  • Stats
  • Time on Site
  • Page Views
  • Themes
  • Google Analytics integration

Since Pop-up Boxes are as much about implementation as they are about content, we usually use the free edition as a starting point, customizing to our needs rather than the monthly premium option.

For more robust (and more costly) options there are a number of options. For the most part, the benefit of these is they offer a simpler user interface as well as more robust testing and A/B testing. Like we said there are a lot of options, but two that integrate well with WordPress are https://thrivethemes.com/ and https://sumome.com/.

 

We’re by no means telling you to use Pop-ups just to use Pop-ups. But Pop-up Boxes that have a clear value proposition and are implemented correctly, convert.

No matter how you slice it, pop-up boxes work. If you’re using WordPress there are options that will allow you to create, manage and edit these boxes all from within your WordPress backend. Reach out to us and we can help you set it up or if you have more questions, let us know and we can talk through how it could help your conversion rates on your site.