fbpx

Slides and more information from our talk at WordCamp Philadephia 2019, where Drew Poland is giving a lightning talk on Website Auditing.

WCPHILLY2019 - Website Auditing Process by Drew Poland

Audit Checklists

These are not meant to be exhaustive but rather a starting point to take and expand or remove from.

Client/Admin Audit Checklist:

  • Where is the site hosted?
  • Is DNS at the host, registrar, or elsewhere?
  • Are there any custom DNS settings? (mx records for email, subdomains/A records at other hosts)
  • What 3rd party tools are being used? (Email collection, analytics, a/b testing, heatmaps)
  • Are there content managers? Editorial calendars? What does the posting schedule look like?
  • Any back office tools or systems integrated with the website? (stock management, accounting, employee portals, etc)

Development Audit Checklist:

  • What updates need done? (plugins, themes, WordPress core)
  • Is active theme a custom or child theme?
  • Analyze and examine theme:
    • Does the template structure follow the proper hierarchy? (wphierarchy.com)
    • Overridden templates (any overridden templates for a plugin like WooCommerce or Events Cal Pro)
    • Functions are organized and make sense
    • Nothing alarming or stands out as a serious needs to be addressed asap issue
  • What plugins are running and can some be removed or replaced with custom functionality?
    • If there are a lot you can use get_plugins to spit out a list of all plugins (codex)

BigCommerce is a ecommerce platform that is growing rapidly and really starting to take control of the ecommerce platform market. We’re fully invested in BigCommerce as a solution for our clients ecommerce needs.

Especially when coupled with WordPress it opens a huge amount of flexibility and functionality for small to enterprise ecommerce sites to grow and scale.

I’m going to dive into what I think the future of CMS is, problems surrounding CMSs, what headless is, and how it can be used effectively.

The Future of CMS

It seems to be trending that the future of CMS is going headless for larger organizations and probably even smaller businesses as headless continues to take off in the right direction.

There’s a few big reasons for this.

Front-end Developers

There are simply more front-end developers that CMS specific developers, like those that only work on WordPress, Drupal, or BigCommerce.

“Responsive”

Responsive is more than just a screen, it’s potentially a variety of other devices too. Imagine you could feed data directly from a source to ANY or Multiples of devices like Alexa, screen readers, and game consoles.

Separation of Layers

By building a Headless architecture, your presentation layers (what the user sees, the front-end) lives standalone and can connect to as many objects as it needs to.

The Problems with using a CMS

Currently, when using a CMS a lot of times you feel like you’re locked into the CMS in terms of look, feel, and functionality. The CMS is leading the charge because you have to live within its boundaries.

If you use WordPress, you can’t do things like “hack core” - you can of course, extend it. Which is the suggested method to making large functionality changes to built in functions. This way you can successfully manage and update WordPress without breaking everything, which is critical.

Understanding Traditional, Decoupled, and Headless

Traditional

This is your typical CMS or website. All the content, look, feel, and functionality is build, managed, and maintained from one central system. Think a WordPress site where you have multiple plugins and a theme.

Decoupled

Decoupled is similar to the Traditional architecture except it separates the layers. So you typically have 3 layers:

  1. Front-end (look and feel where users visit and interact with the site)
  2. Back-end (where owners manage their content)
  3. Database (where all that content and data gets stored)

It might sound like traditional (and one could argue it KINDA is depending on what type of CMS/system you are using), but they are built independently of each other and just happen to very tightly interlinked so each piece is necessary for the other to function.

Headless

So how is headless different from decoupled?

It’s pretty similar except generally each piece in the architecture can run independently without having to be coupled together, unlike decoupled where they are separate but require the other piece to function like you would want.

Headless is more API centered so you can access the data you want through this API that lives as a layer between the management UI, the pieces you interact with it from, and what the end user sees.

Traditional CMS vs Decoupled vs Headless

Visualized through graphs

Traditional

traditional-cms

Decoupled

decoupled

Headless

headless

Images by Content Stack

A Deeper Dive on Headless

Another way of describing Headless, would be a bunch of systems that can live independently of each other (standalone) or grouped together in a manner that makes them work seamlessly with each other to a front facing user.

Imaging sockets in a surge protector.

The surge protector is actually plugged into the wall, and the items plugged into the surge protector are accessed (given power) via the surge protector. This also means you can unplug just one item if you no longer need it, need to plug it into a separate surge protector, or just directly into a wall in another room. It’s simply easier to unplug something and move it and have it just work.

I call this, lift and shift. We’ll talk about that later.

Why use this type of headless or decoupled architecture?

Well, ideally we couple it together in one place where we have all the control!

Here’s a common use case. Let’s say you have 3 websites:

  1. Your main business site
  2. A blog for your business
  3. A commerce site where you sell to wholesalers

Even if branded and designed to look and function exactly the same, these are still 3 separate websites probably built on 3 different systems or content management systems (CMSs).

So if you add, say, a portal to your business site for clients to access marketing documents and resources, you’re likely going to want to protect that with each client having accounts to access only their resources.

So that’s one place a client has a login.

If that same client buys as a wholesaler (likely) from your commerce site, that’s a second login.

We could stretch this and say the client has a login to comment on blog posts (not likely but not exactly unlikely either, but I’m trying to paint a picture for you), which means a 3rd possible login.

How annoying, especially if you need to do something globally for that client across all 3 sites. It has to happen at 3 different places, and you have to remember how to do it 3 different ways.

1. Content

This is your main website about your business.

2. Blog

A separate blog built on WordPress or another CMS.

3. Store

A commerce site where you sell to wholesalers

Headless solves core problems

Here’s where tying it all together makes a lot of sense and brings about the beauty of building a headless system, and just a few ways that headless solves a lot of problems.

  1. You have a central place where you can manage your data
  2. No need to learn multiple systems
  3. Able to hire and contract front-end developers to work on pieces in the architecture rather than a highly specialized person that works on only 1 piece of the puzzle
  4. Syndicate your products to multiple channels with little effort
  5. Able to Lift and Shift

Lift and Shift

One of my favorite things about a headless architecture is the ability to “lift and shift.” It’s not the big overarching point of headless but its a bit of a bonus feature for large systems that need a very deep level of redundancy.

Imagine absolute nightmare scenario. Your hosting provider goes down and you are losing tons of sales, you need some type of redundancy right now.

Since you are running a headless architecture, you can have a server provisioned and systems in place to lift your site up and shift it over to another platform in minutes.

Need help with BigCommerce?

You're in luck, a Certified BigCommerce Partner is right at your fingertips.

Need Help with WordPress?

Great! That's our speciality and we would be happy to talk about your project with you.

Why the combo of WP/BC?

Why do we think BigCommerce and WordPress is a killer combo and very likely the future of commerce? A whole bunch of reasons!

Bring your own Design

You’re not married to the very common look of most ecommerce sites. You can design products and related pages to look and feel however you want with no boundaries.

Ease of Management

If you’re familiar with the WordPress dashboard, then the BigCommerce store dashboard won’t be too intimidating. It has a very modern UI and makes everything clearly labeled and easy to access.

Adding and managing products, running sales reports, and managing orders are all incredibly easy and well documented.

Omni-Channel

BigCommerce makes selling via outside channels (omni-channel) like Amazon or eBay easy to get up and running and manage.

You’ll be able to have a single hub where you can sell and manage your inventory from social media, marketplaces, and even in-person.

Open SAAS and REST API

WordPress has the REST API and BigCommerce IS an Open SAAS (software as a service), so at both points in the stack there’s possibility to interact with either platform at an API level.

Technically, you could run both of those headless into something else all together or completely decoupled.

Support & Community

The support is top notch. Both as a Customer and a Partner, BigCommerce goes the extra mile.

There’s also a large community on the WordPress side, and the BigCommerce community is growing rapidly with more presence at conferences and events.

Integration

There are multiple ways to integration BigCommerce into WordPress. You can use the BigCommerce plugin, or if you have some really specific you are trying to do, directly interact with the BigCommerce API.

The BigCommerce API will even let you build your own checkout. While not recommended, it’s certainly possible to have complete control from top to bottom.

What is needed to add this to an existing WP site?

BigCommerce has worked extensively with to develop a WordPress plugin that has tons of functionality and features packed into it.

It’s almost as simple as installing and activating the plugin. There’s some styling and setup to be taken care of, but a lot of the big functionality will come right out of the box. So no need to build custom connections too BigCommerce from WordPress.

What is the process of creating a new site with this architecture?

Well, the first thing is to run a discovery phase and start creating the architecture on paper. Once we know all the systems involved, we can start planning how to implement, identify hurdles, and even start a mock build.

A lot of this can be done in parallel to other phases like design and content creation.

Otherwise the higher end part of the process is fairly typical for a web build.

  • Discovery
  • Design
  • Development (each item in the architecture would be sub phases that could be run in parallel, like WordPress, BigCommerce, etc)
  • Testing (progressive)
  • Launch
  • Maintain

Let's talk about how Spotfin can help.

Lionfish is our WordPress starter theme. It's what every project is started with when we reach CMS development. Our normal process sees responsive UI development happen first, then that is built into a WordPress theme. So this is meant to start from a point where static is already completed, but you could certainly start using this in pretty much any workflow because it's built to be fairly opinion-less.

Purposefully Lean

Lionfish is built to be lean, no-frills, just basic get up and go WordPress starter theme.

Things you wont find in Lionfish:

  • Comments Template
  • Search & Results Templates
  • Archive & Category Templates

If it's not something we use 99% of the time, then you wont find it here.

Coming Soon

  • Gulp

Recommendations?

See something you think should be added or would be beneficial and fits into the idea of "lean & no-frills" - let us know!

Check it out on Github:

If you have an older outdated website for your business, you could be leaving money on the table and driving customers away.

Here are 4 things to consider or evaluate that might be triggers that you need to redesign your website.

4 Reasons To Redesign Your Website

  1. It feels old, outdate, or difficult to use - A great user experience will help communicate what you do and help the user navigate the site.
  2. It’s not mobile-friendly - This is critically important, so many visitors come to your site via mobile devices and make decisions there.
  3. Visitors aren’t converting - A non performing website is useless, a redesign can gear in on fixing that .
  4. Your systems or tools have changed - Your site no longer integrates with business workflow.

First Impressions Matter!

Sometimes I come across sites that I actually wonder if they are still in business, or if the site is just an old remnant left behind that nobody bothered to shutdown.

That’s not a good impression, is it?

An old outdated feeling website doesn’t really instill confidence for a visitor. Why buy or engage with a business if you’re literally unsure about their presence?

Creating a Better User Experience

Bringing your site up to date will give your brand a fresh modern feeling, communicating to potential leads or buyers that you care about the users experience (UX).

Focus on making the site have a better experience for users by thinking deeply about the following:

Navigation

Make it easy for visitors to find the content that matters. Have a clear navigation in both the header and footer of the site that makes sense.

Prominent Calls To Action

Having obvious CTAs in various prominent parts of the site is critical to converting users to clients or buyers.

Selling a product? Showcase the product near the top and provide a way to quickly funnel the user into the purchasing process.

Offer a service? Explain it clearly in a sentence or two and give the user a way to learn more.

Clean Design

The less distracting or confusing something is, the easier it’s going to be to use.

It’s OK to utilize a lot of white space, it helps users focus on the important parts of the site.

Let’s take a look at Dropbox.com for example:

  • Simple illustrations
  • Very readable font treatment and large font sizes
  • Short description text with an option to expand a section to learn more

Mobile Friendly (Responsive & Adaptive Design)

The majority of web traffic (over 50%!) originates from mobile devices like smartphones and tablets, so it makes sense to design an experience that lends itself to that traffic effectively.

Graph from an article on BGR about Mobile vs. Desktop usage.

Even Google is now putting a priority on ranking sites that are responsive and mobile friendly.

If you’re site is outright not mobile friendly, or doesn’t have a great experience for mobile users, you are going to lose customers.

SmartInsights wrote a great in-depth post on Mobile Marketing Statistics if you would like to read more evidence about why this is so important.

Responsive or Adaptive?

This is highly contextual to what your market looks like and the type of product or service you have, but at a minimum the site needs to be responsive.

Responsive means the site works on all devices from handheld smartphones to large wide screen desktops.

Adaptive means the users get different content or experiences based on the device they access the site on. So for desktop we may show more interactive features, which we trim back for mobile users to not cloud their view.

Your site doesn’t perform well

The whole point of most websites is to convert visitors into customers. There are a slew of reasons a site may not perform well in converting visitors, but some things to consider and re-evaluate during a redesign include:

  • Content - does your messaging clearly communicate what you do?
  • Funnels - are you using funnels to convert visitors based on content that appeals to them?
  • Organization - this goes back to having a clear navigation, can users find what they are looking for easily?
  • Adding CTAs - are your forms and compelling offers prominently visible?
  • Actual performance - does the site load fast? This is critical for mobile users. You can get an idea of how your site performance is rated by using the website speed tool at Pingdom.

Introduce New Tools & Workflows

A big advantage to a redesign is this is your chance to bring in new tools & workflows that can save you time.

Maybe your old site doesn’t connect to your new CRM? Maybe it doesn’t send incoming leads to the right destination?

Is everything going to a general inbox and then manually being sorted? That’s time consuming, and your site should work for you, not against you.

Some simple form routing based on user selections can tackle a lot of this.

We also recommend using tools like HubSpot to manage incoming leads, which will also give you insight to what your users are doing like what pages they visit, along with re-marketing tools to send out offers to segmented groups of users.

To Summarize

These are just a few things to consider and implement changes for during a re-design or even a full site overhaul. Most of this is pretty surface level but can have HUGE impact if done properly.

The most important from this list in my opinion is ensuring the site works well on mobile devices. That should hands down be your #1 priority on any new sites being built.

We spend a lot of time on mobile experience for our clients because it can make or break the effectiveness of a site, so consider that above any other reasons in this post.

Need help with BigCommerce?

You're in luck, a Certified BigCommerce Partner is right at your fingertips.

Need Help with WordPress?

Great! That's our speciality and we would be happy to talk about your project with you.