Split-screen of Kat White on left behind a podioum at WordCamp US, with an image from her slides on the right talking about user privacy.

Responsible Tracking: Learning from Your Users Without Being Creepy

Be transparent, responsible, and accessible.

In late October, I went with my colleague AmyJune Hineline to St Louis for WordCamp US, an amazing conference where the best and brightest in WordPress get together to learn and share knowledge. And I was thrilled to present this talk about Responsible Tracking. It’s one of my favorite talks since I believe it’s critical to find the balance between learning form your users without getting insidious with how the data is being collected. We all want to know more so we can make better websites that attract users, but we need to be responsible about it!

This talk exposes some touch points that you can leverage with WordPress (and other CMS as well) to help you learn about your users and how they interact with your site. I discuss tools that move beyond just your analytics platform to help you gain access to these insights, and walk through some core features of Google Analytics that you may not be aware of.

After this session, you’ll have a better understanding of the types of tracking tools, the information you can glean from them, and how to ensure your data tracking is responsible, transparent, and accessible.

A pile of silver forks, knives and spoons haphazardly dumped in a pile, demonstrating the messiness of a site not using custom post types..

Custom Post Types: Using WP for Content Management

Faye
Faye Polson

Confession: I don’t separate my cutlery.

I just grab a handful of forks and spoons and knives and shove them into the tray, ignoring the divisions made to help organize your utensils, and then just hope nobody ever looks in there to realize how ridiculously lazy I am.

Of course, separating my cutlery would make it easier to find what I’m looking for, especially considering I seem to have 6 million spoons and only 5 forks. It’s completely silly that I don’t.

WordPress has the same problem as my cutlery drawer

Out of the box, WordPress websites come with Posts and Pages. Pages are what we use to build a site’s homepage, contact page, about page, landing pages, etc. Pages almost always appear in the navigation menus of your site, otherwise users would have a hard time finding them.

Posts, on the other hand, are meant to show off content in an Archive. For example, a news feed, or a blog. They also auto publish; add a new post and it magically appears at the top of your blog page (which is actually not a Page). Posts also use Categories and Tags, which can be clicked on to view Archives of posts in those Categories or Tags.

Where this gets messy is when people use their Posts as sort of a catch all for content that doesn’t fit on a page. Press releases, resources, news, blogs, announcements, videos, links, etc. I’ve clicked on the “Posts” in the WordPress dashboard and cringed to see all that content jammed into one place, knowing it must be an absolute nightmare for the site owner to navigate and sort through.

Post Formats to the rescue?

Not exactly. WordPress has something called Post Formats which allows you to choose a format for your Post. You can choose if something is a video, or a link, or a gallery, a quote, etc.. But unless your theme has templates for each one of those types, they’re useless. And considering there are 9 post formats, that’s a pretty big budget consumer for something that still won’t solve the larger issue; there’s just too much cutlery in one place.

Custom Post Types to the rescue! For realz this time.

The truth is, WordPress is made up of posts. Users are posts, Categories and Tags are posts, files and images are considered posts, even Pages are posts! The entire infrastructure of WordPress revolves around this one method of data storage. As a result, it’s really easy to make more.

While there are Custom Post Types Plugins, a developer can literally add a custom post type through their own plugin, or to a theme’s functions, with just a few short lines of code. They can add Categories and Tags to it, tell it to behave like a Page or a Post, or give it it’s own custom taxonomies. This essentially means you can separate your content by purpose, and then present it back to the user accordingly.

Cleaning up the Cutlery Drawer: A Study in Books

Let’s get practical. I like cool used bookstores, so let’s imagine you have a used bookstore and need a website that works for the type of content you want to show.

The default Posts that come with WordPress, those will be your news / blog posts. Thanks to Gutenberg, you can really design your posts as you need them, without post formats and templates. 

You’ll want an Events section, so you can brag about the upcoming J.K. Rowing book signing, or the long awaited release of Book 3 from Patrick Rothfuss. With Advanced Custom Fields (ACF), Kanopi could make a robust Custom Post Type that has event dates and times, associated authors with their social media, promotional images. We could even display this in a calendar format with integrations for Google Calendar reminders.

Next, you’ll want a rare book section. Obviously your bookstore is amazing and has some serious stock that you’re not about to upkeep online, but there’s always those special books that could bring in the collectors. Our next Custom Post Type might be Rare Books, and with the magic of ACF, we could make bibliographies and a gallery of images of the book and some of its pages. Maybe a little history blurb about the book or what makes it such a hot ticket item for collectors.

Now, you’ll also want to draw in average readers and book lovers who maybe don’t have the budget for rare books, so let’s make a Custom Post Type for Recommended Reading where you can put together a list of some highlighted books that are likely to appeal to a wider audience. It can be categorized and sortable too, so users can browse and filter. It’s going to be amazing.

Lastly, a Team Custom Post Type, because your book store has a staff of six, plus the store cat (because you’re really cool like that). Each post becomes a Team Member page, with a bio, job title, and — this is where it gets really neat — you can associate them with their favorite books from the Recommended Reading posts. In fact, let’s go one further, we can attach your staff to the blog / news posts they’ve written and show that alongside their bios. Kanopi actually does this for our own staff.

Where previously you might just jam all this content onto a single page, or into a mash up of Posts, we can take all this content and give it custom data entry and custom templating that allows for some neat cross connection and interactivity for users to better travel your site and find what’s relevant to them. Have a cat that lives at the store? You never know . . . the store cat’s blog posts might be a huge hit.

Structured Content is Mappable Content

What if simply by telling your cutlery drawer what you’re having for breakfast, it was able to select the necessary eating implements for you? Having cereal? Here’s a spoon. Pie and ice cream? No judgement, here’s a serving knife, ice cream scoop, and a fork.

The additional advantage of an intentional content structure using custom post types is that you can then apply what’s called schema data to essentially map your content. Our fictional bookstore could actually pass specific information to Google about those rare books and events to get them in front of the people most likely to be genuinely interested. Consistent data is also extremely useful for filters and searches, announcement bars, feeds, and more. It allows for a deeper level of content strategy and design to better achieve your online goals.

Are you convinced to use Custom Post Types in WordPress? Ready to start stacking your silverware? 

Get organized with Kanopi

Team meeting

Accelerating Projects with Staff Augmentation

Jessica Skewes, Director of Strategy
Jessica Skewes

The are times the adage “less is more” applies to web projects. It can make a project a joy. Aligned stakeholder priorities. A single decision maker. Structural consistency. Design consistency. Simple, easy to understand requirements. Fewer, clearer calls to action to maximize conversions. Sounds great doesn’t it?

But sometimes you need staff augmentation when, “less is more” doesn’t work to our advantage. Places like timelines, budget and resources. When these are scarce, it creates a challenging environment for project success.

If this strikes home for you, you may be a team lead for web projects. You may be an expert in one or two disciplines in the project life cycle. And you may be way too familiar with the pain of projects that have gaps. You may need to extend or enhance the skills of your team to meet a deadline or budget.

The good news is, if resource constraints are your challenge, there are options!

Staff augmentation can help.

Expanding your team with outside experts is a time-tested way to accelerate your project life cycle or build the skills of your internal team. You can get fresh perspectives on the latest industry trends. You can avoid groupthink by bringing more diverse and varied experience and skill sets to a web development project.

At Kanopi, we understand the stress created by aggressive timelines, resource constraints, and knowledge gaps. “Nimble” is a core value, and offering seamless staff augmentation is one of the many ways we bring it to life: we have successfully partnered with clients and other agencies in a variety of ways to help them achieve their goals. We love the challenge of blending our skills with client teams to help your internal staff perform heroic feats for your end clients.

Jumping in to lend a helping hand 

Here are a few recent examples that demonstrate our team’s nimble agility in helping to save the day on a variety of projects across varied industries. 

The Berkeley School of Information 

The Kanopi team helped Berkeley’s School of Information by building out their new website on Drupal 8, all while training their internal team along the way. The Berkeley team is now well versed in Drupal 8 and needs only minimal support to maintain their highly-customized site. Berkeley’s Senior Director of Information Technology was thrilled with the results of our partnership, sharing that “The Kanopi team’s expertise and enthusiasm were critical to the success of our project. We couldn’t have done it without them.” 

Benetech Bookshare

Kanopi partnered with Benetech’s team to establish a rapid and repeatable process to translate the organization’s Bookshare websites into any language, making thousands of books accessible for people with visual impairment or other print disabilities around the globe. The Benetech team built the API, working with the Kanopi team to build out the websites. 

BC Services 

BC Services was racing toward the finish on a tight timeline to launch its Intranet. They needed help building out search and a complex custom homepage. In addition to jumping in to build out features, the Kanopi team was able to find ways to improve the site’s user experience while reducing technical complexity on the site. And the best part of all was that the project gained momentum and came in ahead of schedule with Kanopi’s extra help. Our main contact was so excited about this that he waited to tell his director that the project was ahead of schedule until the Kanopi team could be there to see the excitement on her face!

International Rescue Committee (IRC)

The Kanopi team is currently hard at work to help IRC meet website deadlines after their technical architect left the organization. Kanopi’s developers took the lead, writing user stories to ensure clarity, creating tickets, coaching and training development staff, and keeping all work on track. 

Need a hand? We can help.

Even with a fantastic internal team of seasoned experts, there are times when staff augmentation can assist with an extra hand or a niche skillset. Contact us if your latest project could use consulting services or helping hands within our full spectrum of web project services.

Kanopi’s Drupal development services focus on creating functional, sustainable Drupal websites.

How to Prevent Scope Creep

Managing the risks of scope creep will keep your website project running smoothly.

Your project is off to a good start; progress is being made, the timeline is being honored, and the budget is on track. Then one day you check your email and learn that a key stakeholder has left the project. You hear the suspenseful theme from Jaws in the back of your mind; this is the perfect scenario for that dreaded fiend scope creep to show up. 

I say fear not!  

Like a robocall in the middle of the night, scope creep is something nobody wants to encounter, especially during a project. That being said, it is also a natural part of any project and is bound to happen. The good news is that you can be proactive about heading it off at the pass, or preventing it from happening in the first place.     

Common Contributors to Scope Creep

Scope creep is the introduction of anything that can cause the focus or goals of a project to expand, and go beyond the original scope of the project. It’s not necessarily a bad thing when handled properly, but it can put the success of a project in jeopardy when handled poorly. 

Many factors can contribute to scope creep but most commonly it’s the humans that do the creeping. Any individual could knowingly or unknowingly contribute to creep; personal needs, internal politics, or the inability to make decisions are just some reasons that an individual or group can cause a project’s scope to expand. Other contributors to creep are:

  • A change in stakeholders
  • Revisions to the project goals
  • Introduction of new features or functionality
  • Additional rounds of revision to deliverables

With so many areas for creep to originate, how do you prevent it?

Preventing Scope Creep

The sad news is that you can’t prevent it from growing; humans are curious, and it’s natural that there will be questions and requests that will prod scope. So while you can make sure the team is educated in what the scope of the project is, there will always be some level of curiosity as to what additional is possible. 

You can, however, prevent it from affecting your project. I’ll go into greater detail as to specific approaches you can use for preventing creep, but it’s important to note that prevention starts with being engaged, and being a defender of the scope. 

It’s easy to be so caught up in the day to day running of a project that requests may be made or requirements added  that will push the boundaries. Consider yourself standing guard preventing those requests from making their way into the project. If you fall asleep at your post, you may find yourself clambering to remove the creep.     

Know What’s in Scope

Kind of a duh, I know, but this is so often overlooked. It’s not uncommon for project participants to come and go throughout the course of a project’s life cycle. Therefore every consideration should be given to making sure every person has reviewed the project scope; which should be provided in clear documentation that outlines the roadmap for the project. This may be in the form of a contract, proposal, or a project outline. If you don’t have one, define the scope before the project even begins.

The most effective documentation not only goes into detail as to what is IN scope, but also what is OUT of scope. This helps to clearly define where the focus will be for the project. Having participants review this documentation stops scope creep in the minds of those who might introduce it, and makes everyone a guardian of the scope.  

The project manager is the core individual monitoring the pulse of the project, and it is a big responsibility to act as the sole protector of scope. By imbuing this mission in others you build a team that can move together toward a single destination, rather than spending time keeping everyone on the same path. 

Establish an MLP

MLP stands for minimum loveable product; essentially the simplest version of your completed project that you can live with. An MLP can make a huge difference in ensuring that everyone on your project is rowing in the same direction. By clearly defining what makes up the MLP, you’ll have a goal in mind where the team can place their focus before working on lower priority, or scope creep items. This isn’t to say you can’t iterate and improve on the MLP once complete; by working on what’s most important you’ll at least have something that you’re happy with. Everything else is just icing on the cake.

Document the Changes

There will always be changes during the course of a project, it’s unavoidable and that’s fine. What’s important is how those changes are adapted to the existing scope. “Change Requests” turn new requirements or requests into official scope. They’re crucial especially when additional work is going to push the boundaries of a budget, and additional funding is needed. And if additional funding isn’t possible? A change request can clearly outline how existing scope items may change or be removed to make room. Without a change request, scope is not only going to creep but expectations are going to be misaligned.

Document the Risks  

We’ve talked about making everyone a guardian of scope, but because the team can’t be on alert 24/7, how do you focus everyone’s efforts so you know what to guard against?  Documenting risks is another way to reinforce the team’s focus. Risks are those items that you know could potentially impact the success of the project or cause the scope to balloon. You may already know what they are, or they could arise organically throughout the course of the project. Regardless, what is important is to document the risks and make sure the team has transparency into those items. Include a detailed description of the item, if known, a plan to address it, and better yet; assign someone to keep an eye on it.  

Scope creep also provides opportunities!

Hopefully I haven’t made scope creep out to be the villain; as much as it is something to be on the lookout for, it’s also an important opportunity to start planning for the future. Document, and track them; those items that may be scope creep now could also be the next positive expansion for your project. 

Image of AmyJune Hineline for her Accessible Media webinar. She has a blue scarf and her arms are folded.

Join us October 8th for a Free Webinar on Accessible Media

AmyJune
AmyJune Hineline

If you’re in charge of your website, you have a lot of things to cover between keeping it up to date, entering and managing content, and making sure it’s all accessible. As part of an inclusive content strategy, how accessible is your media?

Join us for a webinar led by Kanopi’s own AmyJune Hineline where we’ll do a deep dive on making your media more accessible. We’ll cover definitions, standards, guidelines, as well as images, videos, captions, transcripts, and more. Don’t worry about which CMS you’re using: creating accessible content is achievable regardless of which content management system you use!

DATE: Tuesday October 8th
TIME: 2:00 ET
COST: Free!

UPDATED POST-EVENT: below is video of the webinar.

All Hands Meeting

Goodbye Classic Editor, Hello Gutenberg

Faye
Faye Polson

Making movable type a reality on the web.

Anyone who’s used Microsoft Word, Pages, Google Docs, or your average email composer knows how to use TinyMCE, the Classic Editor that has been bundled with WordPress since 3.1. But with WordPress 5, TinyMCE has been replaced with the powerful block style builder known as Gutenberg. Instead of editing content in one large WYSIWYG field, your content is broken up into smaller ‘blocks’ made from a variety of field types.

Are Blocks Really Better?

Heck, yes! The advantage of blocks is that each chunk of content is contained in its own block, whether it’s a paragraph, a button, a gallery, or a video. Since you can move blocks, you can then reorder your content without needing to copy and paste. Just click and drag and suddenly that video sits above your closing paragraph instead of below. Some blocks are even interchangeable: should that paragraph actually be a list? Convert its block type in one click. 

And while it makes content entry so much simpler, developers also love it. It’s much lighter than other block building editors that are often included in themes or added by developers who aren’t familiar with powerful content management tools like Advanced Custom Fields (ACF). Instead of bloating your page with excess divs and classes, you’ll only see those elements when absolutely needed to maintain the block function and style.

Adding onto Gutenberg

Gutenberg has a fantastic variety of block types like headings, separators, blockquotes, galleries, tables, columns, widgets, videos, and more. And if you create a block you want to reuse elsewhere, you can save it as a reusable block and it will become available to you in the same way in the rest of your WordPress site.

But it can also be extended. Developers can create their own blocks and insert them into Gutenberg’s builder. So if you need a specific layout for say an event teaser, or product information, an agency like Kanopi can create those custom templates and add them to the available blocks. Even ACF integrates nicely with Gutenberg, and many other plugins do as well.

Gutenberg is now WordPress Core

That is, WordPress 5 ships with Gutenberg. New sites use it, and older sites will install it when updated from 4 to 5. But don’t panic! If your pages and posts were originally made with TinyMCE, they will still work as a Classic Editor block type within Gutenberg until you’re ready to convert them. Within each page / post you can click the ‘convert to blocks’ option and watch as your classic content gets automatically shuffled into headings, paragraphs, images, videos, etc. It should go without saying, we recommend you perform a backup before you do this. 

But don’t worry if your site isn’t ready for Gutenberg, there’s a plugin to maintain the Classic Editor. You’ll be able to continue updating WordPress without losing TinyMCE, that is until 2022 when support is expected to fully switch over to Gutenberg. Make sure you’re ready!

Kanopi can help you with that

Need more convincing?

WordPress has put up a Gutenberg demo where you can rearrange and edit a page exactly as you would inside a page or post. Play with the block types, shuffle content, mess around! Try to click every button at least once and see how powerful block builders can really be.

Gutenberg Demo

Hands on a keyboard

ACF Pro: One Plugin to Rule Them All

Faye
Faye Polson

Advanced Custom Fields has changed the way we use WordPress.

Like Drupal, Joomla!, and other content management systems, WordPress is a powerful platform for building beautiful, custom websites to suit most any need. And like other platforms, it comes with a host of extensions known as plugins that can extend the functionality of your site. There are plugins for SEO, performance, event calendars, contact forms, content organization, user profiles, carousels and sliders, in fact you can find a plugin for pretty much almost anything you can think of!

Of course, the drawback of using a multitude of plugins to get the perfect website experience is something developers often call ‘bloat’. Every plugin comes with a package of code, and the more code your website has to process to deliver, the slower it is. Not to mention the time involved to keep all of those plugins up-to-date and avoid security risks!

So then why use plugins at all?

Because most of them have hours of development and a team of support behind them to help keep them up-to-date with WordPress Core. Plugins can save development time, allowing developers to focus their attention on custom features and beautiful theming. For anyone with a WordPress site, it’s incredibly valuable to hit that sweet spot between bloat and extended functionality.

The most valuable plugin on the market is Advanced Custom Fields Pro (ACF), which comes with a lifetime license and is extremely affordable at $25 per website. A good agency knows that ACF can be leveraged to turn any set of data into reusable, fully customized templates throughout WordPress, saving your site from plugin bloat while still keeping production costs reasonable. Instead of having an event plugin with a location add on, a user profile extension, a media plugin for a video gallery, and a resource directory, a developer can make all of these things using ACF.

How Advanced Custom Fields Pro works.

ACF allows a developer to attach a set of custom fields to almost anything within the WordPress Core. Users, posts, pages, even settings. It can even be used to make Gutenberg blocks for sites already using the latest and greatest editor from WordPress. In turn, this makes it extremely easy for someone who is not a developer to fill in that data exactly as you would fill out a form. Then developers like ours can dynamically manipulate that data to create beautiful, consistent layouts using all of the programming tools in their arsenal without the need for additional plugins.

Seeing is Believing.

Kanopi uses ACF to create stunning features for our WordPress sites. Here’s a few of our favorites to show off how versatile the plugin is. You really can make anything with ACF! 

Certent (visit)

  • Video Hero (shown to first time visitor).
  • Hero Sliders (shown to return visitors). Uses ACF to populate individual slides with content, that are then pulled together into a carousel by a custom template.
  • Accordions & Pill Tabs. Allows the display of services and links in a variety of ways for easy, digestible viewing that can be utilized in other areas of the site.
  • Customizable CTAs (calls to action). These CTAs have toggleable options for style and layout, and can be created anywhere within the page layout.
  • Logo Wall. Each partner has additional fields for logo and content to create “card” teasers when clicked.
  • Testimonials. Using ACF, it provides the ability to hook into the TechValidate API to fetch specific customer testimonials.
  • Page Layout. Each component on this page is made as ACF, but they all sit together in a flexible page template that allows for easy organization. Should the client choose to display testimonials first, or second, it’s as simple as click and drag the component to the desired location.

PHR (visit)

  • Stats Counter. Stats can be updated easily, with full control of the background media for each section.
  • Graphs & Charts. Data entered in ACF is transformed into beautiful graphs and charts with Javascript.
  • History Timeline. An easily adjustable timeline component with images, videos, descriptions, and links.

McEvoy Foundation for the Arts (visit)

  • Announcement Bar. A single field allows for important announcements to be applied to the entire site in the top right. Meanwhile the top left always shows today’s hours, also generated through ACF content.
  • Feature Slider. Slides for showing off exhibits and events can be customized from the content to the buttons without any additional development.
  • Customizable CTAs. A different style than Certent, but similar in concept.
  • Upcoming Events. With extra information added to the events through ACF, these post types can be displayed with content like dates and times.
  • Global Contact Information. No more changing the phone number in 6 different places! One field, used globally, makes it simple and easy to keep content up-to-date.
  • Social Media Icons. Add and take away global icons with a click. No developer hours needed.
  • Hours of Operation. A great addition that will show the hours globally, but also indicate in the top left hand bar what today’s hours are.

Changing the Way We Care (visit)

  • Story Slider. A visual slider experience for sharing meaningful content.

Kanopi’s Website uses Advanced Custom Fields Pro.

That’s right, we practice what we preach! Every single page of this website is utilizing Advanced Custom Fields Pro in some manner, right down to the schema data behind the scenes. We can’t give away all our secrets, but if you’re looking for a website that is plugin smart instead of plugin heavy, you’ll want a developer who knows the ins and outs of Advanced Custom Fields Pro (wink wink, nudge nudge).

Let us know you’re interested

Examples of a pattern library, showing typography, button designs, grid, and iconography.

What is a Pattern Library?

Jessica Skewes, Director of Strategy
Jessica Skewes

One of the keys to a great user experience is consistency. Your users should be able to understand what an element on your website is for and how to interact with it, no matter where it appears on your site. 

Identifying those reused elements (also referred to as “modules” or “components”) is a hugely important piece of the wireframing and designing process.

So the question becomes, once these elements are created, why would you design them more than once? That would be a waste of time! How can we best make use of elements that already exist?

So what is a Pattern Library?

Pattern libraries are the set of components upon which your site is built. Your site is essentially made up of pieces that act as a vocabulary upon which you can build your pages. These include forms, buttons, blocks of text, calls to action (CTAs), photo captions, etc. Good designers will ensure that within those components are consistent and reflect the brand properly in regards to typography, color usage, and other design treatments.

The designer will start from the smallest pieces of a component, and build from there. Using Brad Frost’s atomic design principles, which mimics the building blocks used in chemistry, the progression is atoms, molecules, organisms, templates, then pages. These look like this (definitions from Brad Frost):

  • Atoms: include basic HTML elements like form labels, inputs, buttons, and others that can’t be broken down any further without ceasing to be functional.
  • Molecules: relatively simple groups of UI elements functioning together as a unit. For example, a form label, search input, and button can join together to create a search form molecule.
  • Organisms: relatively complex UI components composed of groups of molecules and/or atoms and/or other organisms. These organisms form distinct sections of an interface.
  • Templates: page-level objects that place components into a layout and articulate the design’s underlying content structure.
  • Pages: specific instances of templates that show what a UI looks like with real representative content in place. 

These building blocks allow site builders and designers to create a site in a modular way, building pages with reusable elements. 

Why is a Pattern Library valuable?

With a focused approach, designing in a pattern library can save everyone a lot of time and ensure your users have a consistent interaction with your brand online. Here are a few reasons why:

Easier Change Management 

Once the pattern library is created, and the full pages are assembled, adjustments may need to be made to improve the flow. But with the implementation of a pattern library, it’s a much simpler process since each element can be adjusted slightly on its own, updating the page easily and quickly.

Scalability

Now, let’s say you need to rebrand and tweak colors, or add a new piece of functionality. These types of updates are not only much more effortless to implement in a library, but will be cohesive with the already defined patterns. And if you need to add pages to a site, you can simply reuse existing elements from the library to create those pages, and scale from there.

Consistency

Because the components in a pattern library are created with the brand in mind, and consistently used across pages of a site, it results in a better user experience for end users. Users will be able to navigate faster and understand what the design and layouts for each interaction mean.

How do I create a Pattern Library?

While several tools can be utilized to create pattern libraries, our favorite right now for design is Sketch. Here is an example of a pattern library Kanopi created for Results 4 Development using Sketch (LNCT.global):

Pattern Library

What can be really powerful and magical is a coded design system, which is when the library is built with code as opposed to as design files (like Sketch) The benefits of a coded design system is the visual design elements can then be connected to your website. That then allows even faster changes to be made by designers and to your site. Kanopi coded a pattern library for https://www.hjf.org/ to make it even easier to change elements in the future. Here’s an example using a tool called Pattern Lab:

Pattern Library Sample

Here are some other trusted examples of good pattern libraries:

Is a Style Guide the same thing as a Pattern Library?

“Style guides” and “Design systems” are often used as interchangeable with the term Pattern Library. In reality, they all work together.

Your style guide will contain elements of brand voice and tone, typography, colors, logo usage, etc, to create standards which guide the consistency of your brand mandatories. Those design signals are used to create brand consistency in your pattern library. Your pattern library and style guide are a subset of your entire Design System.

Let’s scale together!

Pattern libraries are just another tool that allows Kanopi’s designers to create superior user experiences and visual design patterns for our clients. We always build with the future in mind, because we not only create new or redesigned sites, but we also we have an amazing support department that helps sites evolve. With scalability and ease of change in mind, we can help our clients and our support team to maintain and improve the site for you over the long term. Contact us if you’re interested in working with us on your next project. 

Jess and Kim making plans

The top six website metrics to track

Jessica Skewes, Director of Strategy
Jessica Skewes

If your website is the hub for your audience to interact with your brand, then presumably you are doing all sorts of marketing tactics to get them there.

Once they are there, how are you tracking them? How do you know your efforts are effective?

There are a few key website metrics to track in order to help you to optimize your marketing efforts, understand how the site is doing, continuously improve your website, and to allow you to report to others in your company about where the focus of marketing needs to lie.

First off, you need to determine what your goals are per marketing activity. How are you performing on these goals now? What are doing to affect those goals? How will you measure it? Identify not only your main conversions, like a form completion or a purchase, but soft conversions like a newsletter sign-up or a PDF download.

Next, either review your metrics based on these items or put in these metrics to track moving forward. 

Here are some commonly reviewed and important items to track. Most of these will be familiar to you, but #6 can be a game changer!

1. Time on Site

This metric allows you to see an aggregate of how long your audience spends on your site. If your site is centered around exploration and information, you will want this number to increase over time.

2. Bounce Rate

Your bounce rate is the percentage of users who visit your site, but only visit one page and then leave. Google Analytics defines it as the user only visiting the site for 0 seconds, then they exit. This means they see one page of your site, but the analytics does not have enough time to trigger a duration of their session. 

Several reports lean towards an “Acceptable” bounce rate can range between 26 to 70%. But this is a large range across multiple industries. Look deeper to learn what is considered “acceptable” in your industry, because a high bounce rate absolutely depends on your industry and the goals of your site. For example, if you are a restaurant and the visitor simply visits to grab your phone number, then you have reached your goal!

This should be looked at in combination with the other analytics in this article, since looking at the bounce rate alone will not tell you an accurate story. Researching a good bounce rate for your website type and industry is fantastic, but also look to see where you are today and then focus on reducing it (if appropriate).

3. Number of Pages visited

Again, if your site is more informational and built to provide a “next step” for exploration with your users, than you will want this metric to increase. If the number is closer to 1, but you focus all your traffic to a single page, than you should look deeper into that single page’s analytics, before you are concerned with this number.

4. New vs Returning Visitors

In Google Analytics, there is an overlap in these numbers. “New Visitor” is a unique visitor visiting your site for the first time, on a specific device. If you visit a site once on your phone, then again on your desktop, you will be counted as 2 new visitors.

Once the visitor visits your site again, on a device they already used, they will be counted as a, “Returning Visitor” for the next two years (then the clock starts over again).

This could be a great metric to use when you are running a campaign in different areas or industries, for example. If you pay close attention, you can see which campaigns garnered more new traffic.

5. Traffic Sources

Analytics programs will report to you where your traffic is coming from, which illuminates the more and less popular sources. It will also provide you referral sites, which helps you to see your ROI if you partner with others to send traffic to your site.

Seeing how each traffic source performs for you will continue you on the path of honing what works well for you (and what does not).

6. Search

The most crucial advice we provide our clients is to track your in-site search.

This is done as an admin in your “view settings” for Google Analytics. The reason this is so very powerful is it provides you exactly what your visitors want from your site.

A behavioral studies from the Nielsen Group and other research findings show that more than 50% of people visiting a start page on a website go straight to the internal search box in order to navigate. Those figures prove that search box becomes essential navigation tool on every website.

From this data, you can organize, adjust or create your content plan. You can revamp your navigation or the order at which content is laid out on your site. You can write relevant FAQs or shift your focus from one audience group to another. The reason this can be so compelling for your business is because you are directly answering the needs of your audience. 

These will get you started!

Many more metrics exist which can help you to analyze your effectiveness in your marketing tools and traffic sources, but these six are the best ones with which to start. Once you have defined what is important for you, continue to review your analytics over the course of time so you can continually optimize your site’s effectiveness.

Your website is a living and breathing entity that needs nurture and care to continue its growth and work harder for your business. If you need help with a strategy to define and determine which website metrics to track, contact us. We’d be glad to help.