How many times have your digital projects gone off the rails?

If you’ve organized digital projects for long, you’ve probably seen your fair share of projects that fly off the rails. However, most of them start well. Things move nicely, everyone’s communicating, and you’re meeting stakeholder expectations.

But somewhere along the line, roadblocks start to pop up.

Scope creep, late-in-the-game additions, and secret leaders who need approval power at the last minute.

Managing digital projects is hard work. And when they fly off the rails, it impacts every person involved, from stakeholders to the teams themselves. Without a predictable, repeatable process, team trust and morale head into the pits. Not to mention, it runs up your tab and impacts your ROI on what was supposed to be a money-making mission.

To us, mismanaged projects are the ninth circle of hell. They zap the energy from your people and burn out your developers fast. But it doesn’t have to be this way.

You can run projects with precision and efficiently launch your digital product when you make the right moves.

After hundreds of projects, we’ve found our bulletproof process, and we’re here to help you identify the top 3 reasons why most digital projects get derailed – so that yours doesn’t have to.

1. Not doing discovery

We get it: starting something new is exciting. But wishful thinking is the worst way to begin a digital project. Best way to avoid roadblocks? Being well-prepared. And a detailed project discovery will do just that for you.

No matter the complexity, there are always nuances and integrations that should be identified, researched, and thought through from the very start. Ideally, these nuances would be documented, along with mapped-out approaches.

If you’re facing a particularly complicated project, we highly recommend these points even be tested and prototyped before the project kickoff. Testing the potential roadblocks ensures you can more accurately assess the time and effort included in the overall scope, cost, and impact.

Take it from us. Don’t let your development team step on countless unnecessary landmines halfway through a project. Instead, make your developers happy by giving them all the information upfront, so they can know what to expect and do their best work.

2. A poor design handover

“This looks nothing like I expected.”

“How was I supposed to know the hover should perform that way?”

Designers and developers aren’t mind-readers. But how do you put an end to the disagreements and assumptions on either side? A well-documented design.

An excellent digital designer thinks through creating a cohesive look and feel throughout a website and considers the system as a whole. The best digital designers take it a step further by creating thorough documentation that demonstrates how they expect the features and content to work.

Going the extra mile ensures that everything looks and performs as expected when the staging link is handed over to the project stakeholders. Leaving anything up to assumptions in design will only lead to a disappointed design team and a frustrated development team.

Most modern design platforms like Figma and XD create a seamless language between designers and developers if used correctly.

Here’s our simple checklist to make sure your design handover goes off without a hitch:

• Sitemap
• Digital Style Guide
• Organized designs in a modern platform using digital measurements that stick to a consistent grid and document all required expectations, such as hovers and animations. Most modern design platforms like Figma and XD create a seamless language between designers and developers if used correctly!
• Content Management System (CMS) Requirements – map out all expected options/iterations of the design that should be available in the CMS.
• Naming guide in a modular design system so that all teams can align around a single nomenclature.

The art of digital design is in the details. When those details are documented and communicated, it will ensure your project will flow even more smoothly.

3. Not sticking to the plan

What’s worse than a last-minute addition to a digital project? Two. Or 10! Once you let one change through, it could open the floodgates – and lead to many more headaches for the whole team.

When you allow for more ideas to be introduced to a plan that’s already in motion, you’re potentially hopping onto a runaway train of iterations. All these unplanned changes in scope lead to an unhappy team, frustrated developers, and stakeholders that assume all of these changes are “no big deal.”

Let’s be clear: they are a very big deal.

Even if the changes are simple, sticking to the original plan is critical. By saying yes and introducing new things, you risk:

• A domino effect of issues that stem from the requested changes
• Impacted timeline and budget
• Burnt-out teams due to constantly moving milestones and goalposts

Iterations are normal for well-built websites. It’s how we improve upon them! If in the middle of a build or during Quality Assurance testing, new design or feature ideas come to the table, it’s ok to say, “not right now, but let’s start a future phase list!” That way, everyone involved can know what to expect for this project and create a priorities plan for the next iteration!

Launching big digital projects is exciting for you and your business, but it shouldn’t have you pulling out your hair. By implementing the right project management strategies from the start, you’ll be able to consistently meet and exceed your stakeholder’s expectations and launch bullet-proof projects.

Tired of managing this all by yourself? Ready to gain a straightforward process where you know what to expect?

At Good Work, we are web development experts who are obsessed with the process - not just the result. We specialize in Craft CMS development for agencies and brands with a project management team and process that won’t let you down.

Simply schedule a call with us. We’ll discuss your project and give you a realistic picture of the time and budget. With our team on the job, you’ll never have to worry about getting stuck in development limbo. Instead, imagine the relief you’ll feel when you have a trustworthy web partner who knows their craft and can bring your design to life.

How does someone with a master’s in journalism end up as the head of sales and client services at a web development agency? For Grant Abston, the path wasn’t exactly linear. But looking back on it, somehow it just makes sense.

Before it became a trend, he was letting the balance he desired shape his career. “What is the job that can foster the life that I want to live? Flexibility and freedom have been really important to me, and every job has reinforced that.”

His innate curiosity and desire to grow has kept him open to new opportunities and allowed him to carefully choose roles where he worked with the right people in the right environment.

All Roads Led to ACU

Grant never really thought too much about where he would go to college. His entire family went to Abilene Christian University (ACU), making the choice as easy as picking Charles Barkley for a game of pickup basketball.

It was a good choice. He met his wife there, and his roommate owns the company he now works for (more on that later). ACU was a formative time that he cherished, and he wanted to offer that same experience to others.

After finishing graduate school at The University of Texas, he was primed for an entry-level sports information position. But as he looked for a job, he started with his network – the people he would want to work alongside. It opened the door to a job in admissions at ACU.

As Grant describes it, “I wasn’t necessarily passionate about admissions. But I was passionate about ACU and I loved the thought of passing along my experience to others.”

The experience there was formative in shaping his view on work, and understanding just how important being in a positive, collaborative environment was to him.

After 3 years of “selling” prospective students on a college experience in Abilene, Grant took those skills to a formal sales role. He moved 2 hours west and spent a season at Industrial Outfitters selling oil and gas supplies.

Another opportunity arose, combining Grant’s experience in admissions with his athletics background and education. ACU had completed the transition to a Division I school, and they were looking to fill a newly created position of Assistant Director of Athletics for Recruiting. And just like that, he was back in Abilene.

His wife, Shealynn, also works at ACU as part of the clinical faculty team for speech pathology. With ties this strong, you’d think Grant would never leave. But sometimes, you don’t choose a career - it chooses you.

Finding More Good People

Grant and Garrett were college roommates, which meant that Grant had a front-row seat for every stage of the Good Work journey. He was going through the journalism program, seemingly unrelated to the computer science courses his good friend was taking.

In a sense, Grant has been invested in the company from day one. But not everyone can work with one of their closest friends. And even fewer people can work for one of their closest friends. Let’s be honest, the same things that bond people over spontaneous road trips or late-night pizza while “studying” don’t always translate to the workplace.

But then again, not everyone has the ease in their relationship that Grant and Garrett do. Garrett approached Grant to join the team and hit on all the things Grant wanted from a job. Work with people you enjoy. Be in a family-focused, laid-back atmosphere, but do really good work.

Sure the industry was very different from where he had been. But Grant leaned on the skills that would easily transfer. “I knew that I could form relationships and talk with people, and do it in an environment that I enjoy. It’s been 3 years and I haven’t looked back.”

Grant’s days are focused on business development at Good Work, which can mean a lot of things at a small business. Essentially, he is tasked with developing relationships with other agencies and maintaining relationships with current partners. He fields all incoming leads and helps to define each project as estimates are created.

“I’m very goal-oriented and am always looking for new ways to get Good Work in front of the right people. Whether it’s a process to improve or problem to solve, I love to see if I can figure it out. Sometimes the answer is yes, but sometimes the answer is no. Either way, my curiosity pushes me to dig.”

Living the Good Life

Grant’s curiosity and ability to dig deep serve him outside of work, as well. He and Shealynn have three kids ranging from 1st grade to celebrating a 1st birthday. In other words, they’re on the go a lot.

And with three little ones running around, a live-in DIY renovation isn’t something he would recommend, but is figuring out how to survive. Grant’s best advice if you find yourself in a situation like this? “Until you’re an expert on something, don’t make any promises on the timeline of projects. Every time I’ve told Shealynn ‘this will be done by June 1st’ or ‘I think I need about 2 more hours’ – I’m always wrong.”

Having played nearly every sport growing up, Grant still enjoys having a physical outlet. He’s working on his golf game when he can, but the more consistent activity starts at home. As of 2022, Grant is now part of the Peleton cult community. You can find him on a 90s country or alternative rock ride most days of the week.

“At this point, I couldn’t ask for much more. I’m working at a job that is fulfilling with people I both respect and enjoy. We have a great culture that encourages balance. My wife and I are raising our kids in a city that means a lot to us. There’s nothing flashy about it, but this is the good life.”

Since 2012 Craft CMS has continued to increase in popularity and has been adopted by an ever-growing list of brands like PBS, Tito’s and Netflix. Craft's modern approach to content management, and extreme design flexibility, has garnered high praise from both developers and website owners. It offers users an expanding roadmap of modern features and has a thriving community of developers.

Rapid growth in popularity also means rapid growth in product maturity. On May 4th, 2022 (May the 4th Be With You!) Craft launched version 4 and recently announced the end-of-life dates for Craft 3. It is important to update your Craft CMS website from 3 to 4 now rather than waiting, so much so that we decided to post about it!

What does Craft 3 end-of-life really mean?

Beginning in May 2023 Craft 3 will no longer be marketed, sold, or maintained by its creators. Craft 4 is already on the market, so continuing to maintain an old version doesn’t make sense. So, straight from the horse’s mouth:

• Craft 3 bug fixes will be supported through April 30, 2023. After April 30, 2023 Craft will no longer fix issues that creep into the software.
• Important Craft 3 security fixes will be supported through April 30, 2024. After April 30, 2024 Craft will no longer address security issues that creep into the software.

New features and benefits of Craft 4

Craft 4 is packed with new features and benefits that can be easily introduced into your website once the upgrade is complete. Outside of the increased security of being on the latest version of Craft, below are some of our favorite features that both content editors and website owners love.

Performance and Accessibility

Speed and accessibility are a top priority with every new release of Craft, and Craft 4 is no different. Saving entries and drafts are substantially faster, especially on pages with complex modules using Matrix and Neo.

Conditional Fields

In Craft 4 you can show and hide fields based on the contents of another field, making your entries smarter and easier to maintain.

Element Slideouts

The element slideout has been significantly upgraded in Craft 4 to allow you to fully edit related entries within entries.

Category Drafts

Category drafts now work the same as entry drafts, allowing more flexibility with content authoring on websites with more complex category fields and functionality.

Third-party Craft plugin updates

Craft has committed to supporting bug and security fixes through May 2023 and 2024, but third-party plugin developers will decide their own end-of-life policies. Most plugin developers have begun moving to Craft 4, although some will continue to provide minimal support for existing Craft 3 plugins. Our team of developers at Good Work believes this is the most important reason to upgrade to Craft 4 sooner than later, and have already updated our plugins to Craft 4.

How to update Craft CMS 3 to 4

Now that the end-of-life date for Craft 3 has been announced, and depending on the size and complexity of your website it’s good practice to start planning the upgrade process as soon as possible. Below are some helpful items to think through before you update Craft:

• Make sure your server meets the Craft 4 requirements, which are slightly different than Craft 3.
• Upgrade your website and plugins to Craft 3.7.40 or newer before moving to Craft 4. This adds the Craft 4 Plugin Utility to provide an overview of plugins’ readiness.
• Audit all third-party plugins to make sure they have a Craft 4 version available. If there is not a Craft 4 version available, contact the plugin developer to see if and when their plugins will be available for Craft 4. If the developer does not plan to upgrade their plugins, you'll need to decide on a different upgrade path for that particular feature of your website.
• Check to see if you have any custom plugin(s) created specifically for your website. If so you'll need to update those custom plugin(s) with either the team who built the plugin for you or another reliable development team.
• Review the instructions on Craft's website for performing the Craft 4 upgrade.
• Once you have a good idea of the time and effort it will take to upgrade your website be sure to schedule the upgrade as soon as possible now that the Craft 3 end-of-life date is only a few months away.

Further details can be found in the Upgrading from Craft 3 section of the Craft 4 Documentation. Reach out to Good Work if you would like to work with us on this process or have any questions with how to update Craft from 3 to 4.

Too often web development teams let you down. Good project management is the exception, not the rule. Clients have become conditioned to believe that sub-par systems and broken processes are the cost of doing business.

At Good Work, we’ve got your back. We are web development experts who are obsessed with the process - not just the end result. We have a bullet-proof web development process you can trust.

Project management is not just about beautiful – but unrealistic – spreadsheets, or nagging reminders of deadlines. We believe you should expect more from your project manager (PM). In fact, we think your PM should be exceptional in three key areas: Communication, Documentation, and Philosophy.

Communication: Project Status Updates on a Weekly Basis

One of the easiest things that PMs can do for clients is provide a weekly project status update. The goal is to provide a high-level overview of the project's health, an update on key milestones, and call out any issues or concerns that would prevent things from moving forward as expected.

An important element of this communication is that it is proactive, not reactive. This isn’t simply a report on what happened last week. This is also forecasting ahead. At Good Work, we share potential issues or concerns as soon as we see them. This gives our clients a head’s up even if now is not the time to react. This way they are not caught off-guard when a decision is needed.

Why is Poor Communication an Issue?

Projects are constantly evolving, and most PMs are working on anywhere from 5-20 projects at any given time. There are so many moving parts and things to do. Why take the time out to proactively communicate?

Consider this: it is the PM’s responsibility to communicate with the client, not the client’s responsibility to track down the PM. Without the communication, clients don't even know they are on the PM’s radar. Silence opens the door for assumptions. It erodes trust in the project.

With communication coming at least weekly, the client has confidence that the project is moving forward. They can trust that the PM isn’t just hiding things and hoping they will go away. They have assurance the process is transparent.

Documentation: Creating a Shared System for Project Details

Agencies have a way of documenting projects. And clients often have their own – very different – system for keeping track of things. By creating a shared system for all the project details, your PM is creating documentation around the shared relationship.

It’s too easy to get bogged down in which system to use. The more important details are who has access and what gets put into the system. (But if you’re curious, here are the tools we use for our project management process.)

At Good Work, the project plan is the most important piece of the puzzle. This includes all the assumptions, the moving parts, the timeline, and expectations. The scope and contract are also included.

Shared documentation provides a historical account of the project, and helps with people coming in and out. Whether employees leave the company or there is an internal reassignment, someone often needs to get caught up to speed mid-project. This shared documentation makes the onboarding process much smoother.

What are the Risks of NOT Having Shared Documentation?

The biggest risk of not having shared documentation is related to any shifts in the project. Consider big things like scope addendums or smaller things like deciding between A and B.

At Good Work, every decision made lives in a shared document, so that if there is a question about something, there is a quick reference. (Pro tip: pivot tables are especially good here.)

This all needs to be captured in the project plan, showing how these shifts impact time and cost. This way the client never feels like the agency pulled a fast one on them. Without this documentation, it’s all left up to memory and conjecture. Our goal is to leave zero room for ambiguity. Everything is written down – if it’s not in the shared documentation, it doesn’t exist.

Philosophy: Be the PROJECT’S Biggest Advocate (don’t choose sides)

Different PMs and companies tend to have a culture that leans one way or the other – either being internally focused (keep employees happy) or client-service oriented (the client is always right).

But the role of a good PM is to be Switzerland. Keep the 30-thousand-foot view. Manage everyone’s expectations. Don’t take sides.

This means they need to be willing and able to have hard conversations with their team or the client. As an objective third party, their role is to keep people accountable. Of course, being as diplomatic and human as possible.

Another way that our PMs work as a project advocate is to equip our clients with the verbiage or level of detail needed to bring the leadership along. At Good Work, we join calls to help sell an idea, or draft emails to communicate to the leadership team on behalf of our client.

What is the Goal of Having a “Project Advocate” Philosophy?

When the client knows that the project success is the whole point, we increase the trust factor. Our clients know that we aren’t just people pleasers, which means we’ll say yes when it’s right for the project, and no when it doesn’t. We’re looking out for both our team and for them.

It’s Time to Expect More from Your PM

You shouldn’t have to settle for a project management process that lets you down. It’s ok to expect more from your PM and your web development agency. You deserve to launch your projects on time, on budget, and with confidence.

Lesson 1: Don’t rush into specialization

As I reflect back on our very first year of business, we avoided niching down. Or, as I said when we celebrated 1 year of Good Work, “the focus was to have no focus.” I wanted our specialization to happen organically, as we discovered what projects were the most enjoyable and where we were doing our best work.

We said yes to anything with a reasonable budget, which gave us the ability to experiment and have a strong opinion about what type of work we were best suited for. This helped us be more confident when we did specialize.

Lesson 2: Don't be scared to take on money

Business growth isn’t always linear. There are certain times when growth would mean a very costly or unprofitable season. Not all businesses can afford to ride out that season without help.

We took advantage of a bridge loan early on to help with cash flow as we made investments for the future of the company. It was a bit scary to commit to a loan, but we ran the numbers (a few times!) to ensure the ROI was worth it.

Don’t feel like you always have to bootstrap the hard parts. A strategic loan can be a really great way to get to the next level of business.

Lesson 3: Stay flexible

There is always a tension in business between focus and flexibility. At Good Work, I have loved our ability to evolve quickly and efficiently without getting distracted by shiny objects. We have continued to learn from both our wins and failures, and adjust accordingly.

A one-time example of this was the decision to hire all developers as full-time employees. We used contractors early on to help meet the “less predictable” client needs. But it quickly became clear that to serve clients with the Good Work Way, we needed to have everyone in-house.

A more on-going example is how we approach goals. We set goals each year, but evaluate along the way. We flex with the twists and turns on the road that come along.

Lesson 4: Delegate early and often

As many founders know, just because you have the vision and leadership, doesn’t mean that you will be good at all the things in a business. The sooner you practice delegating, the better off you’ll be.

You can easily be busy all day without doing any of the right stuff. You only have so much time in a day, so make sure you’re prioritizing everything that you need to do. What are the things that only you can do for your business? If it’s not something you need to do, hand it off.

Lesson 5: Hire smart

Of course, to be able to delegate a task, you need people to delegate to. I see too many founders who falsely believe that they need to be the smartest person in the room. I hired for my areas of weakness, ensuring that I was not the smartest person in many areas. Everyone on the team is better at their jobs than I would be at them. And Good Work is better for that.

Lesson 6: Be generous with your trust

Once you have good people to delegate aspects of the business, make sure you actually trust them to do it. Letting go of control is a big deal, but it’s necessary for growth. And unless you enjoy working 80-100 hours a week, it’s necessary for your sanity.

Be generous with your trust. Let your team try things (and maybe even fail a few times). We have high standards for our work, and being excellent at our Craft is a must. But what we do and how we get there is not life or death. We let people experiment and grow.

Lesson 7: Document everything

In the early days, I knew that it would be faster to just do things myself than to teach others or document processes. I also knew that I couldn’t keep everything in my head. I knew that if I wanted to grow and scale, documentation was non-negotiable.

Before we could document our process, we had to actually learn what our process was. Now it’s almost effortless as it is maintained by our team. In fact, it saves us time and effort and prevents mistakes.

Bonus: it has become a major differentiator for us in the business, and does not rely on any one person to make happen.

Lesson 8: Embrace new skills

There are a lot of uncomfortable things about being “in charge.” I have to regularly practice developing skills that are not part of my personality for the good of the company.

For instance, I’m wired to run away in the face of conflict. But as the leader of a company, that’s just not an option. I don’t have the luxury of hiding from difficult situations or hard conversations. If I don’t address things head on, they won’t simply go away. They will fester.

Left to my own tendencies, my communication skills would be a hindrance to the company. At my core, I’m the opposite of the Good Work Way. But I’ve put in the work to become a better leader and communicator.

BONUS: Have fun on the ride

We’re serious about work but we’re also serious about keeping it light. Even with good boundaries, work is a large chunk of life. We spend a lot of time together as the Good Work team, and we think that time should be as enjoyable as possible.

One small example from our development team. After their weekly team meetings, they play one round of Bomberman on Zoom. They love it, and I think it’s great.

Of course not every day is a party, but I really believe that if you’re not having fun, you’re not doing it right.

(This article was originally posted on LinkedIn.)

If you’ve been around Good Work for any amount of time, odds are you know Chris and his work. He was the first employee that Garrett hired (more on that later), and has been instrumental in forming our team of web developers.

Being in the Right Place at the Right Time

Like many students, Chris worked retail during college uni. As a salesperson at IKEA, he was paid to help customers in the store. But his computer science classes brought value to the team, as well. He saw that they were spending too much time and energy doing things manually in spreadsheets, and ended up creating new systems for them (using Visual Basic and lots of macros) to improve efficiency.

This made it easy for him to go back after graduation and ask management for an opportunity. He was brought on to help develop the internal content management system (CMS). Spoiler alert: This isn’t the last time Chris will pitch himself and land a job.

IKEA was a great training ground, and the first time he got paid to actually do development work. But Chris saw himself as a small fish in a big sea, and eventually wanted to look for something different.

After IKEA he moved to Concept2, where he joined a manager who had lots of real-world experience but no formal training. Chris brought the cutting-edge tools and knowledge, and together they made a great team. He speaks of that time fondly, recognizing the sweet spot of growth and potential that existed when he started.

“What a time to be in web development. Twitter had just started, and website conferences were becoming a thing. The industry wasn’t simply kids working in their parent’s basement – it was becoming something that ‘real people’ did. I was doing cool stuff, and I was one of the few people out there doing it,” he reflects.

Next, Chris joined the Wattbike team, which was actually a side project of Concept2 that grew into its own (very successful) company. The fun of working with Wattbike was the blank slate – creating something out of nothing and choosing the tools along the way is a developer's dream. But once the site was in a good place and stable, he was hungry for new problems and new companies.

The Road to Good Work

That meant going to an agency where there would constantly be new projects and clients. Chris had tried a few times over the years to join a local agency Erskine, and as it turns out – the third time is the charm.

It was there at Erskine that Chris met Garrett. From the beginning, he saw something in Garrett worth following. “He hit the ground running when he joined, and really made a name for himself. I was intrigued.”

A few years later when Garrett left and started Good Work, Chris stayed in touch. When Garrett posted a job on Twitter for a web developer, he was ready. Chris jokes “I didn’t interview or even ask about the job. I just sort of took it. I replied on Twitter, ‘the job is mine, you can take down the post.’” He was right.

Fitting the Puzzle Pieces Together

“What we do [at Good Work] is not just websites. It’s about solving a problem – a puzzle. There’s usually only one good way to solve it, and I enjoy getting to figure it out. I love the variety of projects. We have a diverse range of clients that makes this work really fun.”

It’s this diversity of clients and problem solving that keeps Chris excited about Good Work. About 7 years in, and he still loves what he’s doing.

As he describes it, each web project is actually three distinct “puzzles” to solve:

• Meeting the client’s needs (and wants)
• Creating an excellent experience for the end user
• Finding the right tools for the job

Take e-commerce sites for example.

On the surface, they are a normal, everyday experience for customers (end users). They expect it to be very simple and intuitive.

Meeting the client’s needs – and wants – requires much more sophistication on the backend. There are so many factors that come into play to ensure their desires are met.

• How is inventory managed in the backend?
• What kind of payment options are available?
• Does the company collect taxes?
• How do sales, discounts, and promo codes work?
• What about shipping integrations, returns, reviews?

Choosing the right tech stack is important, and every client has slightly different requirements and order of operations so no two e-commerce clients are the same. There’s a lot going on and getting everything working correctly and elegantly is a challenging but rewarding task.

Beyond the Nine to Five

To say that Chris Rowe likes solving puzzles is like saying that the summer here in Texas is “warm.” Close, but lacking some intensity. He will eagerly suggest playing a board game with his wife after their son is asleep and “I would live in an escape room if I could,” he said.

The passion you hear from Chris about puzzles pales in comparison to the passion when he speaks about his family. Chris and his wife welcomed a son into their family during the pandemic. “Being a dad is the hardest and easiest and best thing ever. It changed me completely.”

Chris is also quick to tell you about his love for Back to the Future – or, as he calls it, “the best film ever made.” His passion goes far beyond repetitive viewings. Met Michael J Fox and Christopher LLoyd? Check. Driven a DeLorean? Check. Seen the musical? Check. Not to mention all the signed memorabilia that you’ll see in Chris’ Zoom background.

“I actually wanted to name our son Marty, but my wife vetoed that. Turns out now he goes to nursery with a boy named Emmett Brown. Can you imagine how cool that would have been?”

Talk about all the pieces coming together…

Chris is a sprightly chap with a hawk eye for the smallest of details, and keeps our team up-to-date with our development processes and workflows. Spending most of his time beavering away in semantic markup and super organized stylesheets - Chris likes to use every keyboard shortcut known to man. He’s a pro Craft CMS developer and will definitely buy a DeLorean someday. Chris lives in Nottingham, England - and the tree in his garden is a direct descendant of the Major Oak.

Forms! Nearly every website requires forms for something – whether it’s lead capture, feedback surveys, newsletter signups, or booking requests.

At Good Work, our go-to option for forms on Craft websites is Formie. It allows you to build pretty much any form you could need, without resorting to another third-party subscription service.

Why We ❤️ Formie

• Easy-to-use. The drag and drop form builder has 30+ fields to choose from. Fields range from basic (like name, email address, and checkbox) to fancy (like predictive address lookup and Stripe-powered payment details).
• Email notifications. You can configure multiple notifications per form, e.g. sending the submission to your email address and emailing the submitter to confirm receipt. It’s easy to include data from the form in the notifications, and you can also set up conditional rules to determine when and how notifications should be sent. (Note: This does require using an email delivery tool that's usually $10/mo. or less.)
• Totally bespoke styling. You aren’t tied to any awkward third-party styles. While Formie has great out-of-the-box, time-saving templates, forms can be customized to be cohesive with your brand.
• Integrations. Chances are Formie offers an integration for your email marketing or CRM tool. Mailchimp, Constant Contact, Klaviyo, Pipedrive, Zoho, and dozens more are all supported. Formie also offers webhooks, so you can easily integrate with Zapier.
• Solid spam protection.

Quick Guide to Creating a New Form in Formie

1. Create the form

Log in to Craft and click Formie in the sidebar, then New Form in the top right. Give your form a name. This is when you could also choose a stencil * but we’ll start with a blank form and click Next. Now you’ll see the form screen. There are tabs along the top which we’ll walk through below. The first tab, Fields, is where most of the action is.

*Note: Stencils are form templates with fields and behavior already set up. If you regularly create similar forms, your web team can set up stencils for you – which can be used exactly as they are or with some small changes made before publishing the form.

2. Add form fields

The Fields tab is where you’ll build out your form. Drag and drop a field from the list on the right into the “form area” on the left.

Once you drop the field into the form, a popup will appear with field options. All that’s required is a label, but most fields have other options, including making a field required. In the field options popup, click the Settings tab then switch on the Required field toggle. Click Apply to save changes to the field.

Field options can be very simple as above, but can also get complex. E.g. in the Conditions tab, you can set up logic to determine if/when this field should be shown.

If you need to access the field options popup again, hover over the field then click on the cog icon → Edit.

Repeat this process for all your fields. You can drag & drop fields within the form area on the left to rearrange them if needed. (For this example we’ve added fields for name, email address, and inquiry topic.)

3. Edit form appearance

Click on the Appearance tab. These fields are all self-explanatory, and we find you rarely need to make any changes here.

4. Configure form behavior

On the Behavior tab, you can control what happens when a user submits a form. This includes what happens on a successful submission – you can display a confirmation message, or redirect to another entry or URL. The latter can be very useful, e.g. you might create a “thank you” page that has additional information/calls to action (which you can also add to Google Analytics as a successful “conversion goal”).

You can also configure validation, including what error messages should say and where they should be displayed. Again, the defaults usually work well here – we definitely recommend keeping Validate Form on Submit enabled.

5. Set up email notifications

Let’s send a confirmation email to a user when they submit the form:

1. In the Email Notifications tab click New Notification.
2. Set Recipients to Email Addresses.
3. In this case, we want to send the email to the email address of whoever submitted the form. Formie makes this easy with variables. Click the plus icon in the right of the field. This lists all available fields from the form. Choose Email and you’ll see it appear in the field.
4. Enter the email content. We can use fields from the form submission by clicking the plus icon – in this case, Full Name is being used to personalize the email.
5. Click Apply to save the email notification.

Let’s also send a notification to someone within our company. We’ll use a conditional to make sure the notification is sent to the right person, in this case, billing@website.com if the inquiry relates to billing:

1. Back in the Email Notification tab click New Notification again.
2. This time, we know the email we want to send, so we type billing@website.com in the Recipient Emails field.
3. On the Conditions tab set up a condition that says “I want to send this notification if the value of the What can we help you with? field is Billing”
4. Click Apply to save.

You can click on either of these notifications to make further changes – Formie gives you a lot of power here, e.g. configuring who the email should be sent from, adding CC addresses, using custom branded email templates, and more.

Pro tip: to ensure email notifications get delivered and are not marked as spam, we highly recommend using a transactional email provider like Postmark, Elastic Email, or Sendgrid. For most use cases they’re free, and we can set this up for you.

6. Set up integrations

As above, Formie supports lots of integrations. Your web team will need to help you set up the integrations initially. Once this is done, you’ll see any available integrations listed in the Integrations tab and it’s easy for you to add them to your form. Just click on the integration name, turn on the Enabled toggle and fill out the relevant fields.

A common use case is adding users who submit a form to a Mailchimp list. Here we’ve selected which list to add them to and mapped which Mailchimp fields (on the left) should receive the data from which form fields (on the right).

7. Prevent spam

If you don’t have spam protection set up, you will get spam submissions that can clog up your inbox and make it hard to find legitimate submissions.

In the Integrations tab, you will see a “Captchas” heading. Any integrations available to you are listed here.* To enable one, just click on it and switch the Enabled light switch on.

*Note: Your web team will need to initially configure spam protection for you. Basic solutions like Honeypot and Javascript only take a few minutes to set up. More complex solutions like Google’s reCAPTCHA take a little more work but are more robust.

8. Last few settings

In the Settings tab, it’s good to change the Submission Title Format to something more readable than the default “Timestamp.” Again Formie lets you add variables such as the form title and submission date to make this easy.

9. Save and publish the form

Now you’ve finished setting up your form, click Save in the top right.

The final step is to actually display the form somewhere. Forms can appear anywhere, e.g. you might have a Global set up for your site footer which could contain a newsletter signup form.

Let’s assume that you want to add a contact form to your contact page. Open up the contact form entry. Your web team should have set up a Form field. Click on this and select the form you just created. Save the entry. Done!*

*Pro tip: It’s wise to save the entry as a draft first, preview it, and fill out the form to check it’s working as expected, including sending notifications.

It used to be that a website was a static repository of anything and everything a company wanted to say about itself and its products or services. There was a set it and forget it mentality, with most updates being simply copy additions. After a while it would become clear that a change was needed, leading to a complete overhaul.

But modern websites operate more like a living, breathing part of your sales and marketing ecosystem, which means they need to be given regular love and attention to ensure optimal performance and relevancy. The upside to this continuous nurturing is that you can make significant changes and improvements to your website – without starting over.

Tip #1: Continuous Improvements vs. Website Redesigns

Design with the Future in Mind

When you create a website with a future-proof design system and architecture, it will expand and grow with your business without falling apart every few years. By designing with the future in mind using a systematic approach, you are set up to win in the long term.

Build a Support Team

Once your site launches, you want to keep your design, development, and marketing teams in close contact. Your business is ever-changing. The way customers use your site evolves, as does how you stay relevant in a digital space. To get the most value out of your website and remain relevant, you need to continually nurture your site after it goes live. You can use your existing team(s), or look to a business like Good Work that specializes in post-launch aftercare and long-term partnerships.

Examples of Continuous Improvements

There are countless small updates that can be made through continuous improvements to your site. Some of the most common that we see (and recommend) include:

• Plugin updates

• Copy updates

• Landing pages for current initiatives

• Design updates based on usage

• Provide new value (e.g., blog, resources, newsletter sign-up)

At the end of the day, these updates should meet one of two goals. They should either make your site more relevant to the current state of your business, OR better support your marketing and sales efforts.

Tip #2: Keep Craft Updated

This might sound overly simple, but the importance of keeping your content management system (CMS) updated can’t be overstated.

Just because a new version is coming out doesn’t mean that you have to immediately make the switch. But remember that if you hold off through multiple versions, updating can become a major project.

Last year, we worked on updating a site for a client who had waited entirely too long to take action (think: months or years). Because of this, the scope of the project was much bigger than they anticipated and almost felt like starting over.

Updating to Craft 4

At the time of writing this, we are building sites on Craft 3. But after an initial beta launch, Craft 4 was released this year. This means we will be moving new builds to this platform and working with our maintenance clients to discuss upgrades over the next few months.

While many updates are relatively simple, the update from Craft 3 to Craft 4 is a big one. For example, all 3rd party plugins need to be updated first. Sounds simple at first, but remember that sometimes plugins get abandoned. This means that just clicking “update” isn’t possible and you need to figure out an alternative upgrade path.

Whether you DIY or enlist the help of a web development team like Good Work, keeping your CMS updated in a timely fashion is key.

Tip #3: Schedule Regular Website Audits

When your website continually evolves and you’re doing regular updates to your CMS, you have to check in and ensure that everything is working in the background as it’s supposed to. In the fast-paced environment that is digital, regularly scheduled website audits are required to have a seat at the table.

How Often Should Audits Occur?

At a minimum, standard marketing websites should have an audit every 4-6 months, while websites that have a constant stream of new content and updates might need audits every month.

What Are the Most Important Things to Audit?

There is no one-size fits all answer to this, but website audits come in a variety of shapes and sizes. The ones we find most useful are geared toward (1) Accessibility, (2) Technical SEO and Speed, and (3) Design.

Testing the right blend of infrastructure updates, website audits, and continuous improvements is viable in ensuring our website brings the most value to our business at any given time.

Accessibility

Evaluating accessibility is not just an optional, nice-to-have aspect of your website. It is important to ensure that all potential users – including those with disabilities – have a decent user experience. But when you implement these accessibility best practices and ensure easy access to your information, you improve the usability for all site users.

DIY Accessibility Online Checkers We Recommend:

• Accessibe
• WAVE
• Web Accessibility by Level Access

Maintenance

Site speed and SEO are two different things, but both play a significant role in how search engines like Google evaluate your site, and how they show up in search results.

Sometimes updates inadvertently slow down the site. Adding media is a common culprit to this.

Other times, it is inaction that can cause issues, in the case of things like broken links or meta information updates.

DIY Speed and SEO Tools We Recommend:

• Ahrefs
• Google Lighthouse
• SEMRUSH

Design

Finally, consider how design audits can play a role in improving your site. Your designer will often have suggestions on how to improve conversions without needing a total redo.

This is one area we recommend going straight to the professionals in the audit process. It is important to weigh the effort vs. outcomes in design work so that you don’t end up going down a rabbit trail that leaves your site pretty, but the update is neutral in terms of conversions.

You Don’t Have to Go it Alone

These three tips are a great way to implement continuous improvement to your website and can keep it fresh and relevant much longer without the need to start over.

But knowing what to do, and actually finding the time to do it are two different things. If you’re ready to hand the keys over to the experts, we’d love to help.

We offer maintenance plans that provide relief. Have confidence you’ve got the support you need and get back to doing what you do best for your company.

Schedule a call today.

“Too often web development teams let you down. With Good Work, you can launch websites that wow, with a bullet-proof web development process you can trust.”

When we share about the tools that help us with project management, we’re not just sharing productivity hacks. We’re taking you behind the scenes to share a piece of the Good Work Way. Our project management process is one of the key differentiating factors of our agency.

With that said, here are the project management tools that keep our bullet-proof process running smoothly.

Communication: Slack

Like many companies, we prefer to put communication in Slack instead of email. This is the main hub of interaction throughout the day. We’ve had a remote culture before it was mandated by social realities, and this has helped us keep everyone on the same page with team-wide communication.

We use Slack Channels for individual projects, and also use Shared Channels for our retainer clients and big, high-touch projects.

The Huddle feature is great for quick chats that don’t require a full meeting, and for times when screen sharing is needed. In the developer world, that is an important feature.

Good Work Favorite Use: We are diligent to use the Schedule feature within Slack to respect boundaries and working hours. We ensure messages only show up for team members during work hours (most often that means at the beginning of the work day), regardless of time zone.

Scheduling / Resource Management: Forecast

Forecast helps us understand how much capacity each person has, and when we can take on a new project as an agency. No tool is perfect, but it provides the most complete picture in a complicated system.

This provides the year-long roadmap for all of our projects, making it easy to plan our people and our finances.

Good Work Favorite Use: One of our favorite things about Forecast is the ability to shift projects if a client pivots. If deadlines aren’t met, we’re able to shift the entire timeline with the click of a button versus starting from scratch. This saves time on the front end, and reduces errors.

Project Management: Github Issues

We started with Trello, but made the switch to Github Issues because it is geared specifically for developers. Github is where the code already lives, and so issues are tied directly to the work itself. This streamlines our work and process. We also love that clients can see all the historical data around their codebase.

Users can take advantage of either table-style organization or boards. Since we were previously on Trello, we are partial to the Kanban-style boards.

Good Work Favorite Use: Integrations! These allow us to tie cards to actual code, meaning it can update the board as things are ready for review and deployment. Keeps everything organized and easily accessible.

The Good Work Way: Notion

The more Good Work grew, the more it became apparent that we needed a centralized “knowledge base” for both our process and our client's website details. We use Notion for all internal organization from process outlines to key details for every website and client we manage.

Basically, this is where all the secret sauce lives. We document everything so that if Ariel (or anyone on the team) was hit by a bus, someone else could step in and run things the Good Work Way.

Good Work Favorite Use: This has been a game-changer for onboarding new Good Workers. It’s a clean space to learn our process and reference our current clients while they get the lay of the land.

BONUS: Our People

The tools that we use are great, but it’s also the thought process and the consistency in how we use them that brings it all together. We’ve spent over 8 years honing our project management system, and it’s something we take pretty seriously.

The most important part of any tool is actually using it well. Our team continues to bring new ideas and help us refine the process.

Our latest tool is actually just a Project Plan document. It’s a robust 8-tab spreadsheet that pulls it all together. We’ve shared some screenshots of the tool below to help you spark ideas for what would work best for your team.

If you ask our clients about their experience with Ariel, you’ll get a flood of glowing reviews. As the one steering the ship for the client experience, she understands how pivotal her role is, and she always aims to over-deliver.

But this doesn’t necessarily mean extravagant measures. ​“I’ve learned that the power of a response is HUGE,” she says. ​“The simple act of being a responsive partner makes a big difference to our clients.”

This is part of ​“the Good Work Way” that has become the cornerstone of what makes Good Work such a unique web development company. A bulletproof project management process, with a personal connection at the center.

“It’s amazing how much people just want to be seen and heard. And if you can make just one thing easier in their day, it can change everything. We work with a variety of people who are responsible for things they are not experts in. And we get to make them look good in the process.”

Rooted in Non-Profit Marketing

Ariel came about that passion and vision for an exceptional client experience honestly. She started her career in nonprofit marketing, as the client. During this season, she worked for some of the best in the area when it comes to public-private partnerships. She got to see downtown Dallas come into its own and become a thriving economic center.

She thought she would be in nonprofit marketing forever, except that a friend saw a knack for organization and encouraged her to consider trying her hand at project management. She dabbled in agency life for about a year, but ultimately didn’t find the right fit. She went back to what she knew.

As much as she loved her new role, and being back in familiar territory, she also missed project management. ​“I loved the thought of waking up to different projects each day. And I was at the point in my career where I had to either take the leap, or let that door close.”

Lucky for us, she took the leap.

The power of networking and relationship-building paid off. As a client, Ariel had worked with Switch, who frequently partnered with Good Work on web development projects. Garrett got wind that Ariel was looking for project management work, and the rest – as they say – is history.

Defining ​“The Good Work Way”

Soon after Ariel joined Good Work, she had the opportunity to go through a Digital PM and Ops apprenticeship with Louder Than Ten. It was a relatively new program at the time, providing extensive hands-on training for digital project managers and agency owners.

“Garrett basically opened the conversation with, ​‘It’s going to be a lot of work, want to do it?’” she jokes. ​“But then he showed me he was serious about the investment by doing it with me. He said we could create a brain trust to implement something real and lasting.”

It was a crazy six months to hear her talk about it, filled with more coffee than she cares to admit. They were balancing online classes, client calls, and putting out the fires that inevitably pop up in this line of work. But thanks to some solid trial and error, they were able to implement the learnings in real-time, and within a year put together the foundational process that Good Work still uses today.

“We set the expectation for reasonable response times. Honestly, we are working with people who are in a vulnerable place [because they are not experts in what we do] and we make good on our promises. That is a big deal, and leads to deep trust.”

With that trust often comes long-term work, which is what gets Ariel most excited. These retainer clients are where the real relationships are built, and allow the strategic insights of the Good Work team to really shine.

Offline and Outdoors

While Ariel is quick to gush about the specifics of project management, she is quick to admit that talking about her personal life doesn’t come as easily. But a few pointed questions helped to uncover the passion and spark that keeps her going.

Like many Good Work-ers, Ariel spends her time away from the office outside. She and her husband Joe are outdoor enthusiasts. They can often be found walking around White Rock Lake or on a golf course. Sustaining outdoor spaces in Dallas is important to them, and Joe is even on the board of the White Rock Lake Foundation.

Joe and Ariel also own property in the French Quarter of New Orleans, and thanks in part to the culture of flexibility at Good Work, they spend as much time there as possible. They bring the same passion for preservation to The Big Easy, and love that they can help sustain a piece of the history and culture in the area.

With a job that is as dynamic and focused on others as client-forward project management, a robust stress management practice is not optional. In addition to pilates and golf, Ariel is a big believer in mindfulness, which she credits to keeping her from overreacting, and instead allows her to remain responsive and balanced.

After all, it is the responsiveness and personal connection built on trust that is the foundation of the bulletproof project management process. Good Work has people who are obsessed with the process, and believe that the process is just as important as the end result.

With over 15 years of experience in integrated marketing and project management for everything from tiny nonprofits to global agencies, Ariel understands our client’s needs because she has been in their shoes. She’s a graduate of the Louder Than Ten Project Management Apprenticeship, which basically makes her a black belt in project success. She oversees our project process from start to finish and ensures every client gets the Good Work experience they’re promised. Somehow she also finds time to write for our blog. Outside of work, you can find her sitting in a courtyard somewhere in New Orleans where she lives part-time, or working on her slice on the golf course.

Having team members scattered across the world is no longer an anomaly whether you’re a team of ten or ten thousand. Our small team of 11 spans three countries and four time zones, but we still feel connected - without feeling like we work around the clock. It isn’t easy, but it’s far from impossible.

This wouldn’t be possible without our communication tools:

• Slack for casual conversation and project discussion
• Github Issues for detailed project discussion
• Forecast for scheduling and milestone management

Together, these three tools allow our team to hit the ground running each morning with a full toolbox. Here’s how we do it:

• Ensure Forecast is up to date so everyone knows exactly what is on their plate.
• Create a scheduled Slack message to be sent at 9 am local time to outline priorities for the day, ask any questions and provide feedback. The scheduling tool in Slack is key to ensuring we aren’t pinging our overseas team during their evening and interrupting their downtime.
• Use Github Issues to outline scope, provide necessary files and documentation, and deliver client feedback.
• We have a daily standup that’s the start of our United States team morning and end of our overseas team day, allowing for comradery, handovers, and project updates while not interrupting flow time.

While this process works well for the daily flow, scheduling meetings with clients is a unique challenge. About a third of our team is 6+ hours ahead of the United States at any given time of the year. We encourage our development team to interact with our clients, whether it’s a project milestone meeting or retainer planning call, but aligning a Pacific Standard Time client with a Greenwich Mean Time developer is tricky.

We customize the solution to the situation, but we usually defer to one of these scenarios:

• We offer our developer a late start to their morning in exchange for them working later to accommodate the time difference.
• We schedule our meetings as early in advance as possible when we know there is a large time zone gap in hopes of finding a happy compromise between both teams.
• We outline “preferred time windows” for meetings involving our overseas team that are fair to both parties and ensure we aren’t encroaching on our developer’s evening.

One of our core values is proactive communication, and this is one of the ways we live that out. When both our developers and clients know what to expect, conversations around compromise are much easier.

We would be lying if we told you everyone worked a perfect 9-5 pm schedule every day across multiple time zones. That isn’t possible when you’re keeping as many projects a month afloat as we are. What is possible is ensuring open communication so the team can work together to make it as easy as possible for everyone involved.

Our project management team tends to start early (sometimes very early) to create as much overlap as possible with the overseas team for internal huddles, reviews, etc. Our development team sometimes has to work into their evening to accommodate a kickoff meeting or client meeting.

A key aspect of our culture is taking care of our people. So we make up for those accommodations people make by showing our appreciation - not only verbally but also through flexible schedules and additional vacation time. The goal is to show respect and appreciation for everyone - regardless of time zone - to make Good Work a place where people want to be.

(This article was originally posted on LinkedIn.)

Websites are a lot like cars - if you take them into the shop for routine maintenance, they will last you a long time. Sometimes your car, like my trusty Honda Civic, runs like a champ, and you end up driving it for 15,000 miles before realizing you’re due for an oil change. It’s easy to let your website fall into this category of “if it's not broke, don’t fix it.” While your website can’t get a flat tire, it can sometimes start to slow down or feel sluggish, so let’s take it into the shop and see what we can do to bring it back to peak performance.

Does your entire website feel slow, or is it just slow on certain pages? Answering this question can help diagnose the problem and point to potential solutions. If it only feels slow when going to specific pages on your site, there’s likely something on that page that’s causing it to bog down. Maybe it’s the homepage with a flashy background video or many high-resolution product photos. Perhaps it’s a resource page with lots of filters and sorting options. Whatever the case may be, identifying that the problem is localized to specific pages is valuable information before getting it fixed.

Only some of the pages on my site are slow

Here are some of the common causes and potential solutions when only some of the pages on your website are slow.

Images

Images are one of the first places we look when doing a performance audit on a website. This is because they violate two of the core tenants of web performance: reducing the number of requests your site makes and reducing the size of said requests. On most sites, images are plentiful (i.e. generate lots of network requests) and they are large in file size. Fortunately, there are a lot of ways to reduce the impact that images may be having on your website:

• Compress images to reduce file size. This can be done online with tools like Squoosh or TinyJPG.
• Use modern formats like WebP and AVIF. These modern formats are made specifically for the web and deliver your photos at near-lossless compression for significantly less bandwidth than a traditional JPG or PNG format.
• Serve responsive images. This optimization is particularly beneficial to mobile users who are often on a slower cellular network as it serves a smaller image intended specifically for mobile devices.
• Lazy load images where appropriate. Lazyloading waits until the image is about to be in view for the user before it makes the network request to download the image. This can make a big difference if your site has a lot of images.

Some all-in-one solutions to the suggestions above include platforms like Cloudinary and imgix, both of which have a generous free tier to get started with. If you’re using Craft CMS, plugins like ImageOptimize take a lot of the guesswork out of generating and serving more efficient images.

Background Videos

Background videos at the top of a web page are a common design element and can look really impressive, but they come at a cost. They slow down the initial page load, can distract users from your actual content, and can also have negative impacts on your site's accessibility. The general consensus is that they probably aren't worth it, so consider removing them entirely. If you’d prefer to keep one, consider these adjustments to keep its performance impact to a minimum:

• Compress the video as much as possible while maintaining reasonable quality (the smaller the file size, the better the performance)
• Use a static image on mobile devices and keep the videos just for desktop users. Even the smallest videos are much larger in file size than a properly sized image and that can really slow down your site for visitors on a mobile network

Complex Logic / Filters + Sort Options

When we get reports of individual pages being slower, it is commonly on those that include large collections of data along with options to sort and filter that data. This includes pages like a blog/news landing page, a product gallery page, and so on.

Typically it's not the sorting/filtering options themselves that slow things down but rather misconfigured or inefficient template logic handling all of the data. It might have worked great when the site first launched and there was less data to handle. Now that it's matured and there are hundreds or even thousands of records to sort/filter, the underlying queries and template logic probably need to be reworked.

If you're using Craft CMS, one of the first places to start in optimizing pages like this is to use eager-loading.

Embeds / iFrames

Embedded content exists in some form on just about every website. Typically it is used to add videos, maps, or content from other sites. While convenient, it also adds additional network requests that can slow a page down.

Most of the time these resources are not needed right away, so one solution to mitigate slow performance is to lazyload the embedded content. Lazyloading images works the same way it does for images as it simply waits until the embedded content is in view before downloading the resources required.

Another potential solution is to use facades. While facades are not practical in every circumstance, they can be a great option for the usual embed suspects like YouTube videos or Google Maps. Facades look just like a regular embed without the overhead. An example would be replacing a Google Maps embed with a static image of a map that when clicked, links to the Google Maps page itself with the appropriate coordinates. Tools like the official Maps Static API or this website make it accurate and easy. For YouTube or Vimeo video embeds, consider using the lite-youtube-embed or lite-vimeo-embed packages. They look and behave just like the regular embeds, but are significantly faster.

Nice try, but my whole site feels slow!

If it feels like your whole site is not performing as it should, we should examine what resources and other data are being loaded on each page. Let's take a look at some of the most common causes and potential solutions for site-wide slowness. Typically, every page will load some amount of JavaScript, CSS, and fonts. All of these resources are capable of causing significant slowdowns to your site, so it's worth doing an audit to see what resources are being loaded, how they're being used, and if any can be eliminated.

CSS

For CSS stylesheets, purging unused styles and minifying the stylesheet is a good place to start. Shipping critical CSS first and deferring the rest of the stylesheet can have big performance benefits, but can be tricky to set up.

JavaScript

Optimizing JavaScript (JS) is largely similar. The goal is to remove any unused or unnecessary JS, load only the JS that is absolutely necessary for your site to function when it first loads, and then load additional JS as needed. Front-end build tools like webpack, Parcel, Rollup, and Vite all have the ability to code-split or dynamically import the code that is not essential right away.

Fonts

The biggest trap to avoid is loading too many fonts. Limiting your site to 2 or 3 custom fonts is good practice. Next, adding rel="preload" attribute to the tag where your font is requested will help it load earlier in the cycle. The font-display: swap property in your stylesheets @font-face declaration will ensure that the text on your site is present even if your custom font has not loaded yet. Lastly, having an efficient caching policy for the font files can be a huge boon for performance.

Icon Fonts

Icon font libraries like Font Awesome are convenient but can be costly from a performance perspective. Consider replacing these libraries with individual SVG icons for both improved rendering and faster page load speeds.

Navigations / Other Global Site Elements

Another place to look in the quest for optimal performance is the areas of your site that are the same on each page. This includes the header, often containing your site's navigation, and your footer, which sometimes includes a sitemap or similar list of content. Multi-level meganavs are common, especially on enterprise sites. It is crucial that these are set up properly. Just like the pages that have complicated logic or filtering options, it is easy for navigations to grow larger over time, eventually resulting in slow load times everywhere on your site. Ensuring that the template logic and underlying database queries are optimized will minimize performance issues.

Caching

Areas of your templates like the header that get loaded on each page are often good candidates for caching. I have intentionally avoided the topic of caching until now because it is often used inappropriately to mask the issues described above. Instead, I like to think of caching as the cherry on top – it's nice to have and fun to eat, but the ice cream sundae underneath wouldn't be ruined without it. Caching comes with its own tradeoffs and should be used with the mindset that the cache could be cleared at any moment. All that being said, it can make a huge difference in the performance of your site, especially in areas or sections that do not change frequently.

Tracking Scripts

Tracking scripts like Google Analytics, Facebook Pixel, and Hotjar can be detrimental to your site's performance. That's not to say that you shouldn't use them – responsibly-collected data about your website's traffic and users is totally valid – but you should proceed with caution. Having too many tracking scripts is not only redundant, as many do essentially the same thing, but also costly for the end-user. It's good practice to do a regular audit to see what analytics tools your team is actually using and remove the ones that are no longer being used. New tools like Partytown and Zaraz can mitigate the performance impacts of third-party tracking scripts by using web workers to run the scripts in a different thread.

Managing long-running processes

If the backend of your website has any kind of long-running task such as a report generator or product import, make sure that these tasks are not inhibiting the experience for front-end users. A common way to do this is to run tasks like this in a queue – a background process that only runs when the system has available resources. Depending on your situation, you could even offload these resource-intensive tasks to a serverless function or web worker.

Web Server / Hosting

One last piece of the puzzle is the infrastructure that hosts your site. Small sites can often get away with small servers, but as your site grows in size and popularity, it might be time to consider upgrading the server. Larger servers can handle more resource-intensive scripts/functionality and can also handle larger amounts of traffic.

In Summary

When it comes to optimizing your website’s speed, there are a lot of factors and no single solution. Fortunately, almost all of these factors adhere to the principle of reducing the number and size of requests made by your website. Reduce the number and size of requests your website makes using the strategies above and you will be well on your way to a fast website.

“I believe if you do good, quality work, communicate well and invest in an environment that people want to be a part of, all the rest will fall into place.”

That’s the last sentence in “An introduction to Good Work”, a blog post I wrote about eight years ago, only a few months after making the jump to full-time self-employment.

At that point I was the sole web developer, and also admin, sales, project management, and accounting. I hadn’t seen it play out at all in the real world, it was just a visionary statement.

If I were given a second chance at that sentence, I think most of it is still true, but I’d simplify it even more:

“If you invest in an environment that people want to be a part of, all the rest will fall into place.”

Over the years as we’ve grown to two, to four, to eight, to ten and more full time employees we haven’t given an inch to our culture. We haven’t stopped making sure that Good Work is a place where our employees, clients, and partners all want to belong.

Jumping into the digital service business is easy. Doing it while keeping reasonable hours, a healthy profit, a happy team, and continual growth without being labeled as “just another web development company” is hard.

We’ve done this for eight years.

We have a happy team.
People rarely leave.
We close our laptops before dinner.
We continue to grow.
We approach conflict head on.
Our clients love us.
We charge for our time.
We launch projects when we say we will.
We’re funny!

Maybe I’m oversimplifying it, but I think that’s why it works so well. Advice doesn’t have to be complicated to change everything.

Here are ten examples of how we have intentionally invested in an environment that people want to be a part of and created a culture of balance:

1. Work-life balance. Family needs and emergencies always come first.
2. We couldn’t be (or do) Good Work without our team, so any chance we get to reward our people - we do it.
3. We’re serious about work but we’re also serious about keeping it light. We spend a lot of time together so it needs to be enjoyable.
4. We onboard clients with a clear understanding of our boundaries and schedule - and they all respect it.
5. We hire smart. We find people who not only don’t need to be micromanaged, but actually work better when given some autonomy.
6. Everyone on our team has cool hobbies outside of work. We work to live and we don’t work during living time.
7. Location flexibility. If you can figure out how to work from a van in the woods, you can (it’s been done… twice).
8. We don’t send messages outside of work hours. If we do, we schedule them (Both Google and Slack allow for this).
9. Bullet-proof processes. We can foresee bumpy patches and create a solution that smooths the path before we get there.
10. Loyalty. We will walk into a fire for our employees and always have their back.

It turns out that when you invest in an environment that people want to be part of, they work hard to maintain that culture with you. And that takes it from merely an optimistic vision to a lived out reality years down the road.

(This article was originally posted on LinkedIn.)

Content management systems (CMSs) allow you to create, edit and manage pages and content on your website with little need for ongoing development support. There are hundreds of CMSs available to you, but this article will focus on the two that we talk to clients the most about: WordPress and Craft.

WordPress was one of the first CMSs. Initially, pre built as a blogging platform, it has evolved into a more traditional content management system over the last 20 years. With the all-inclusive evolution, the open source interface is known to feel clunky. But it’s free!

Craft solves common content management pain points out of the box without requiring complex workarounds or too many third-party plugins. It’s built for modern websites to be what you need and nothing more. Craft costs $299 upfront and then $59 per year after that. Craft shines in its ability to power custom websites with unique content needs and relationships.

Good Work is a Craft shop. We've been working with Craft since day one, we're a verified partner, and it's the CMS platform we use to make 99.9% of our websites.

BUT... unless you’re coming to us with a preexisting Craft website or did your research and already want to build your website in Craft, nine times out of ten, you're probably much more familiar with WordPress. This is especially true for our design agency clients who may be hesitant to go all-in on a system that they've heard little to nothing about.

The questions I get about WordPress vs Craft CMS usually fall into the following four categories:

1. Ease of Use
2. Website Security
3. Search Engine Optimization
4. Development Community

Let’s get to it. For the purpose of this article, I’m going to assume you’re familiar with WordPress and are looking to learn more about Craft to decide if it’s suitable for you.

Craft vs. WordPress Ease of Use

As I mentioned earlier, WordPress tends to be bulkier because of how much is included, whereas Craft will feel more intuitive because it’s built to be just what you need and nothing more. To demonstrate, I set up fresh installations of both systems.

Along the left-hand navigation in Craft, there are seven choices: Entries, Globals, Categories, Assets, Users, Utilities, and Plugin Store. More often than not, a typical website by Good Work will only show four of these: Entries, Globals, Assets, and Users. (Compare that to 15 or so for WordPress.)

Entries

There are three different types of entries in Craft: Singles, Channels, and Structures.

Singles

Singles are for one-off pages like a homepage or about page, and while it's a minor feature, it's a crowd favorite. Historically, content managing one-off pages can be slightly awkward, but with Craft, it is intuitive.

Channels

Channels are for repeatable content like news, blog posts, or even an A-Z dictionary. It includes content ordered chronologically or alphabetically.

Structures

Structures are for repeatable content that you control the order. Think employees on a team page or a list of services on your service page. Once you wrap your head around this, it’s a huge selling point for Craft CMS.

Globals

Within Globals, you’ll find a place to store content used throughout the site, not just within a specific entry. Use Globals for content like phone numbers, company addresses, or social media links.

Assets

Assets are just that. A place where all the files (images, videos, PDFs, etc.), whether assigned to an entry or not, can be organized and easily located.

Users

Lastly, users. This is where you manage user permissions and settings for the different content editors on your website.

Finally, Craft’s Live Preview feature is second to none. Content editors need to see the effects of their content changes before going live, and live preview allows you to do just that, in real-time, directly from Craft’s control panel.

Website Security

Internet security issues are only increasing, and this is an area where Craft shines. WordPress websites are most often hacked due to vulnerabilities in plugins and themes. Since it’s the most widely used content management system, it is more known and targeted for hackers. WordPress accounts for 35% of the internet, but in 2018 it accounted for 90% of CMS hacks. No matter what CMS you choose, keeping the CMS and plugins updated is essential. This is true to Craft as well, though Craft is far less targeted (see: 90,000 sites vs. 30 million sites), and Craft does not have themes, one of the two main vulnerabilities in WordPress.

For more information on Craft’s Security, you can read the Security Guides on their websites: https://craftcms.com/knowledge-base/security.

Search Engine Optimization

While technical SEO mainly falls to the developer and is rarely CMS-related, Craft and WordPress both have good solutions for managing SEO content. If you’ve worked with WordPress before, then you’re familiar with Yoast. The Craft alternative to Yoast is called SEOmatic. Luckily for you, we’ve already written extensively on the subject in our How to set up an SEO-friendly Craft CMS website article.

Development Community

On the one hand, we have WordPress, the most widely used content management system on earth. There are over 30 million WordPress sites, and it powers over 35% of the internet. StackExchange, where developers ask other developers questions, has 165,000 WordPress members (developers). It's not hard to find WordPress development.

Roughly 90,000 websites use Craft, which is A LOT. It’s easy to find Craft developers, too. As of this writing, there are 9,700 StackExchange members (developers) and 225 verified Craft Partner Companies. Needless to say, if your Craft developer gets hit by a bus, your website will be okay.

Both Craft and WordPress are far from proprietary. They have a large enough user base that you’ll never need to worry about finding future development resources or getting stuck with a development company that you’re unhappy with.

Does Craft power 35% of the internet? No. But it has a large (and growing) development community and has been adopted by big names like PBS, Tito’s, Canon, and AP.

In Summary

If you’re trying to decide whether to go with Craft vs. WordPress, always consider your website goals. Both systems can handle Search Engine Optimization and have thriving development communities. But if you want a modern website that’s a joy to use and much less likely to get hacked, that’s Craft CMS every time.

In many ways, Garrett Winder is quite ordinary. He is humble and self-deprecating. At the end of the day, he’s just trying to do good work.

“We weren’t trying to do anything crazy,” he says about the company he and a buddy started while still in college, during the recession. “The timing was right, we were at a stage in life where we didn’t need much money. We simply got an office in downtown Abilene [Texas], and got to work.”

Are We Good Enough?

The company was doing fine, but there was a nagging sense that they didn’t really know what they were doing. So the pair decided to go out and get “real jobs.” For Garrett, that meant working with Erskine, a company based in England, where he worked on large content websites for entities like magazines, newspapers, and cities.

The role gave him a lot of autonomy to do what he needed to do to get the job done. He found himself able to dream of creative or new ways of doing things. And then his position quickly morphed into an operations role, where he got to flex his business muscles. He enjoyed learning new parts of the company and figuring out how to make things work.

This is where some of the big learnings happened.

Reflections from an Established Agency

“I thought I needed real-world experience, but it turns out we were doing the same things on our own as these big agencies. I also learned that it was ok if I didn’t do development all the time. I actually liked building and developing a company as much as I liked building and developing websites.”

Ultimately, Garrett learned that he wanted to try doing it on his own again.

His dad owned a business when Garrett and his siblings were growing up, and he always imprinted it on him that being a business owner was a feasible option. Garrett didn’t necessarily have big dreams of “disrupting the industry” that you hear so many entrepreneurs talk about. He wasn’t trying to start a new way of doing business. He just wanted to have something of his own.

Becoming Good Work

When a friend from college brought him a project that could last a couple of months, Garrett knew it was the right time. To help ease the transition for everyone, he stayed on with Erskine part-time to help with operations. What started as one man freelancing has grown into a full-blown company over time.

“First, I started outsourcing development projects. When that grew to more than I could do, I brought on Chris full-time. Then I realized I couldn’t handle the project management side of it and we brought on Ariel. When I couldn’t handle the sales side, we brought in Grant.

We have always been focused on having a good process and good communication. We know our dev work is exceptional, but that isn’t that unique in our business. What is unique is speaking human, leading with personality, and a partnership with clients built on honesty and transparency. Simply being a good person - and a whole person - is sometimes too rare.”

The Good Life

Garrett’s life takes on rhythms (and even a sense of monotony) that you might not associate with a man who founded a web development company right out of college.

Every day is the same breakfast. For those wondering, it’s 2 eggs, bacon, and a piece of toast. Along with a pot of coffee. The Chemex process is systematic and meticulous, and scratches an itch for order.

“Before kids, I was an avid runner. I might get 15 miles in before making it to the office. Now I’m lucky to get in a few 5-mile runs per week.”

As his family has grown, it’s the two little boys who do all the running, gently mocking the idea of order (as all kids do). But like most dads, Garrett’s face lights up when he talks about the boys. They are joy and inspiration and levity - and make his “retirement” from competitive running a little easier to handle.

The boys love going to parks or the Arboretum, but their favorite thing is when dad takes them to the family ranch outside of Fort Worth and they can see the cows. On the weekends you can often find them out there for a night or two, taking in nature.

Garrett actually spends one day each week at the ranch, acting as a ranch manager. He goes from running a website development business four days per week to going completely off the grid on a regular basis.

This time away from work and technology is some of what fuels him, and what makes him so passionate about having a culture of balance at Good Work.

“We have developers working around the globe, so it would be easy to have our developers working all hours of the day and night. But we really emphasize shutting down for the evening to be with friends or family. Get outside and experience nature. Let the work week be good enough. It’s important that we don’t take ourselves or our work too seriously.”

Garrett even joked about using the word “good” too much to describe what he does. But it is that continuation of doing the good work that makes him and this company so exceptional.

Garrett leads the day-to-day operations for our company and has a proven track record for leading high-quality, large-scale web projects for clients like PBS, Frito-Lay and DPR as well as Texas-based icons like Tito’s Handmade Vodka and Criquet Shirts. He has extensive experience in the digital client services environment but is also a successful entrepreneur, having co-founded a social analytics platform that was acquired in 2010. He received his Bachelors of Business Administration in Accounting from Abilene Christian University and lives in Dallas, Texas.

Overview

In this article we'll explore a practical example of using the Donkeytail plugin to display points of interest (pins) on an image of a lounge, highlighting the different pieces of furniture for sale and labelling the name of each item with a short description and price.

We'll use Tailwind to style each Donkeytail pin, and Alpine JS to provide some interactivity that will open and close each pin to reveal the name, description and price.

For the sake of brevity we'll assume you already have a preferred method of integrating both Tailwind and Alpine JS into your Craft project.

Here's what we are creating...

Installation

Let's begin by installing the Donkeytail plugin.

• Open your terminal and go to your Craft project:

    
      cd /path/to/project
    
  

• Then we'll use Composer and Craft to install the Donkeytail plugin:

    
      composer require simplygoodwork/craft-donkeytail
    
  

    
      php craft plugin/install craft-donkeytail
    
  

Create a new channel

Now that we've installed the Donkeytail plugin we can begin the initial Craft configuration.

As mentioned earlier, for each Donkeytail pin we'd like to display the following:

• furniture name
• short description
• price

We'll begin by setting up a new channel section, leaving both the Entry URI Format and Template empty.

For now we’ll assume that you’re using Donkeytail in a single site installation, so please ignore the French site.

We'll setup the Entry type as shown below:

• Short description is a plain text field
• Price is a number field

Set these up as desired using new fields, or reusing existing fields you have already defined.

Create a new field

Let's set up a new field that we'll use for dropping Donkeytail into our Craft templates. Since a picture is worth a thousand words we'll use the image below as a guide for setting up this field.

The Entry Sources field is of most interest, and we'd like to select from the channel we've just created which is named Donkey Tail Pins.

Add the Donkeytail field into any existing page.

We'll drop the newly created Donkeytail field into an existing page. In this example we'll add it to the homepage (which is a standard single section).

Add a canvas and your first pin.

Grab an image from Unsplash, or your preferred stock image library, and add it to the Donkeytail field in your homepage.

In Craft 3.7.x you can also add your first pin while editing the homepage, but in earlier versions you may need to add a Donkeytail pin entry first, and then add it to your homepage Donkeytail field.

As you add each pin you'll see the pin placed directly in the center of the canvas. Use your mouse to drag and drop to the desired position. We positioned our first pin bottom left on the sofa as indicated below.

And finally we can begin coding!

Now that we've wired everything up in Craft let's begin by dropping in the following code into the relevant template.

    
      {% extends '_layout' %}

{% set donkeytail = entry.donkeytail %}
{% set donkeyTailCanvas = donkeytail.canvas ?? false %}

{% block content %}

  <div class="container relative">
    {% if donkeyTailCanvas %}

      {% do donkeyTailCanvas.setTransform({ width: 1024 }) %}
      {{ tag('img', {
        src: donkeyTailCanvas.url,
        width: donkeyTailCanvas.width,
        height: donkeyTailCanvas.height,
        srcset: donkeyTailCanvas.getSrcset(['1.5x', '2x', '3x']),
        alt: 'Lounge',
        class: 'w-full'
      }) }}

      {% for pin in donkeytail.pins %}

        {% set pinTitle = pin.element.title %}
        {% set pinShortDescription = pin.element.shortDescription %}
        {% set pinPrice = pin.element.price %}

        <div class="absolute"
            style="transform:translate(-50%, -50%);
                   top:{{ pin.y }}%;
                   left:{{ pin.x }}%;">

          {# open svg #}
          <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
            <circle cx="20" cy="20" r="18.75" stroke="#ffffff" stroke-width="2.5"/>
            <path d="M20 10V30" stroke="#ffffff" stroke-width="2.5"/>
            <path d="M10 20H30" stroke="#ffffff" stroke-width="2.5"/>
          </svg>
        </div>
      {% endfor %}

    {% endif %}
  </div>

{% endblock %}
    
  

The above code will take care of the basics:

• placing the Donkeytail canvas on the page
• iterating each Donkeytail pin and placing an SVG in the appropriate position

The relative class on the container div, and the nested absolute class, are of particular importance here in the successful positioning of the pins.

The style attribute for each pin contains a transform to re-center the SVG so that its center sits on the pin position defined by top and left.

Directly after the absolutely positioned pin/svg, let's add what will become our popover containing the name, description and price of the item.

    
      <div class="absolute z-20 bg-white p-6 w-72 shadow"
      style="top:{{ pin.y }}%; left:{{ pin.x }}%;
            transform:translate(-50%, 60px);">

  {# rotate white square to add a triangle #}
  <div class="absolute bg-white z-10
              -top-5 h-10 w-10 transform rotate-45"
      style="left: 7.75rem;">
  </div>

  <div class="font-bold">{{ pinTitle }}, {{ pinPrice}}USD</div>
  <div class="mt-1">{{ pinShortDescription }}</div>

</div>
    
  

Alpine JS to the rescue

We don't want the popover displaying for all our pins, which could lead to a very cluttered image with a lot of the image hidden behind information.

Let's begin (amending the existing code) to add a little interactivity using a sprinkling of Alpine JS adding:

• x-data
• x-show
• x-on:click

Step 1

Everything in Alpine starts with the x-data directive.

    
      <div x-data="{ selected: '' }"
     class="container relative">
    {% if donkeyTailCanvas %}
    
  

Step 2

Set selected to the clicked pinId using x-on:click

    
      <div x-on:click="selected === '{{ pinId }}'
                 ? selected = ''
                 : selected = '{{ pinId }}'"
      class="absolute"
      style="transform:translate(-50%, -50%);
            top:{{ pin.y }}%;
            left:{{ pin.x }}%;">
    
  

Step 3

Inside the for loop, if the current pin has been selected show the close svg icon else show the open svg icon.

    
      {# open svg #}
<svg x-show="selected != '{{ pinId }}'" 
      width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
  <circle cx="20" cy="20" r="18.75" stroke="#ffffff" stroke-width="2.5"/>
  <path d="M20 10V30" stroke="#ffffff" stroke-width="2.5"/>
  <path d="M10 20H30" stroke="#ffffff" stroke-width="2.5"/>
</svg>
{# close svg #}
<svg x-show="selected === '{{ pinId }}'"
      width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
  <circle cx="20" cy="20" r="20" stroke="#ffffff" stroke-width="2.5" />
  <path d="M10 20H30" stroke="white" stroke-width="2.5"/>
</svg>
    
  

Finally

Only show the popover for the currently selected pin.

    
      {# popover #}
<div x-show="selected === '{{ pinId }}'"
     class="absolute z-20 bg-white p-6 w-72 shadow"
     style="top:{{ pin.y }}%; left:{{ pin.x }}%;
            transform:translate(-50%, 60px);">
    
  

That's it, we're done folks.

Below is a copy of the full source code created in this post.

    
      {% extends '_layout' %}

{% set donkeytail = entry.donkeytail %}
{% set donkeyTailCanvas = donkeytail.canvas ?? false %}

{% block content %}

  <div class="container relative"
       x-data="{ selected: '' }">
    {% if donkeyTailCanvas %}

      {% do donkeyTailCanvas.setTransform({ width: 1024 }) %}
      {{ tag('img', {
        src: donkeyTailCanvas.url,
        width: donkeyTailCanvas.width,
        height: donkeyTailCanvas.height,
        srcset: donkeyTailCanvas.getSrcset(['1.5x', '2x', '3x']),
        alt: 'Lounge',
        class: 'w-full'
      }) }}

      {% for pin in donkeytail.pins %}

        {% set pinId = pin.element.id %}
        {% set pinTitle = pin.element.title %}
        {% set pinShortDescription = pin.element.shortDescription %}
        {% set pinPrice = pin.element.price %}

      <div x-on:click="selected === '{{ pinId }}'
                        ? selected = ''
                        : selected = '{{ pinId }}'"
            class="absolute"
            style="transform:translate(-50%, -50%);
                  top:{{ pin.y }}%;
                  left:{{ pin.x }}%;">

        {# open svg #}
        <svg x-show="selected != '{{ pinId }}'" 
              width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
          <circle cx="20" cy="20" r="18.75" stroke="#ffffff" stroke-width="2.5"/>
          <path d="M20 10V30" stroke="#ffffff" stroke-width="2.5"/>
          <path d="M10 20H30" stroke="#ffffff" stroke-width="2.5"/>
        </svg>
        {# close svg #}
        <svg x-show="selected === '{{ pinId }}'"
              width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
          <circle cx="20" cy="20" r="20" stroke="#ffffff" stroke-width="2.5" />
          <path d="M10 20H30" stroke="white" stroke-width="2.5"/>
        </svg>

        {# popover #}
        <div x-show="selected === '{{ pinId }}'"
              class="absolute z-20 bg-white p-6 w-72 shadow"
              style="top:{{ pin.y }}%; left:{{ pin.x }}%;
                    transform:translate(-50%, 60px);">

          {# rotate white square to add a triangle #}
          <div class="absolute bg-white z-10
                      -top-5 h-10 w-10 transform rotate-45"
              style="left: 7.75rem;">
          </div>

          <div class="font-bold">{{ pinId }}, {{ pinTitle }}, {{ pinPrice}}</div>
          <div class="mt-1">{{ pinShortDescription }}</div>

        </div>
      </div>
      {% endfor %}

    {% endif %}
  </div>

{% endblock %}
    
  

We've lived and breathed Craft CMS at Good Work since day one, and once again have asked each member of our development team to select their top Craft CMS plugins. From Neo to Preparse to Donkeytail to SEOmatic, here they are in alphabetical order. Let the listicle begin!

Donkeytail

Being the authors of the Donkeytail plugin we are a little biased, but honestly, we use this gem a lot and our clients love it.

“Donkeytail lets you mark specific points on an image asset and relate those out to entries, categories, products - in fact all elements! This is great for highlighting office locations on an illustrated map, pointing out features on a physical product image or maybe highlighting products on a marketing photo of a room layout. These are just a few example of how we've used Donkeytail.”

— Chris Rowe

We brought Donkeytail to life a few years back in the good old Craft 2 days, but it’s since been updated for Craft 3 and even supports GraphQL; grab it today from the plugin store.

Learn more about the Donkeytail plugin »

FeedMe

“Whether it’s a one-time import to migrate content from an old system, or setting up a schedule to pull in entries from other sources like podcasts and social feeds, this super flexible and reliable first-party plugin is an essential piece of many projects. And for commerce projects it’s a breeze to update product details and stock levels, too.”

— Ant Cooper

Learn more about the FeedMe plugin »

Neo

“Most of our websites include a super-flexible ‘page builder’ feature which allows clients to create a range of different page layouts. Neo gives content editors a nicer user interface to handle this, and the developer experience is great too – Neo means we can re-use lots of common building block fields which speeds development up tremendously. We can’t wait to see something similar in the core of Craft 4!”

— Gavin Platt

Learn more about the Neo plugin »

Preparse

“Preparse is a plugin that you'll only appreciate once you've run into a problem that it solves beautifully, and then you'll never forget it.”

— Jake Dohm

This plugin allows you to run some Twig code and save the result as a field on an element. For example, if you had an entry where you could select multiple products, you could also have a Preparse field on that entry called "averagePrice" which automatically calculated the average price of the products, using Twig, and that value would get saved on the entry like a normal field!

Learn more about the Preparse Field plugin »

SEOmatic

“There are lots of SEO plugins for Craft, but SEOmatic takes the cake. It takes the guesswork out of creating sitemaps, meta tags, structured data and more.”

— Andrew Menich

By mapping to the fields you already use, SEOmatic builds meta tags and social previews from your existing content, without having to duplicate data or set up custom fields that lock you into the plugin. It also makes adding analytics and other social integrations a breeze. A must-have for every site!

Learn more about the SEOmatic plugin »

Sprout Reports

“The Sprout Report plugin is a fantastic addition to many of our client's websites, allowing them to gain valuable insights into their site visitors.”

— Robin Mannering

The plugin really comes into its own when finding out when registered users visit a site and what kind of actions they perform. Integrated with a commerce website, the client can perform complex marketing queries such as ’show me all the people that have bought product X last week but haven’t bought products Y or Z’. This allows our clients to use that valuable data to cross-market intelligently and increase their sales while also benefiting their customers.

Learn more about the Sprout Reports plugin »

Typed Link Field

“With over 16,000 installs, this free plugin is a must. We add it to every project we make. It covers every situation a client could or might want when creating a link on their page”

— Jeff Irwin

When a client needs a call-to-action button, this plugin handles it really well. Link to Entries, Assets, Categories, URLs or even custom links. Set custom link text, open links in new tabs and set aria labels and link attributes. You will find this plugin in every Good Work project.

Learn more about the Typed Link Field plugin »

Somehow I blinked and it’s time for the SEVENTH Good Work birthday message. I wrote last year’s message days before our company retreat in Austin, Texas, where we talked through our big plans for 2020 and beyond. Little did I know that a week or so later it’d be back to the drawing board!

Last year was one of those years where all you can do is get on the boat and hold on tight. It was a blur, we had to think on our feet quite a bit, but we’re much stronger for it. We had gone fully remote a few weeks before lockdown hit, and have always prioritized efficiencies over hands, so we were in as good of a place as we could have been to weather the storm.

In September we said goodbye to Chase Giunta, our resident Daily National Holiday Announcer. It was sad to see him go but luckily (or unluckily) for us he’s still actively trolling the Good Work Slack Channels.

In December we said hello to Robin Mannering, the latest addition to our web development team. He’s in France with Gavin, and has stolen the coveted first place position for Most Scenic Zoom Background.

We launched over a dozen new websites, crowd favorites being the relaunch of e-commerce brand Iconic Interiors in the UK, LMC and Digital Building Components.

On the content front, we continued our monthly email newsletter, Jake launched a Web Development Video Series covering a wide range of topics from Craft CMS to Vue.js and Tailwind, and gave the @simplygoodwork Instagram account a much-needed facelift.

And how could I forget the most cleverly named Craft CMS Plugin on this side of the Mississippi, Donkeytail? With over 150 active installs, Donkeytail is content managing points on images all over the internet.

This next year is an exciting one for Good Work. We’re doubling down on our role as a web development partner for design agencies, and are growing our project management and development teams to better support our clients' needs.

Read our previous birthday messages:

• 6 years of Good Work
• 5 years of Good Work
• 4 years of Good Work
• 3 years of Good Work
• 2 years of Good Work
• 1 year of Good Work

Last month we launched Donkeytail, a Craft CMS plugin that allows website administrators to easily place points on images. Below are a few examples of how Donkeytail could be useful for your next website project.

Selling multiple products within a single lifestyle image

One area where Donkeytail shines is when you want the ability to sell multiple products within an image (think Instagram). Pins in a Donkeytail Field are really just content types that reference entries, assets, users, categories, products and variants, so you inherently have access to all of the fields within those content types on the front end using Twig. So, with design + code on the front end you can easily make interactions (like pop-ups) for each pin that provide more information, "quick buy" links, etc.

In other words, if IKEA was a Craft website then they'd probably use Donkeytail for their Room Showcases.

Highlighting locations on a faux map

Another common use for Donkeytail is when you want to call out locations on a faux map, and something like Google Maps won't work. Maybe you're building a website for a new apartment complex that needs an interactive floor plan, or a new neighborhood development or an imaginary world like Hyrule. In this instance you'd use Donkeytail's background image as your "Map," and each pin could reference an entry from your "Locations" channel, or something similar.

Pointing out features on a physical product

Donkeytail can also be used to point out individual features of a physical product, or point out UI on a marketing website for a piece of software.

In other words, if the Tesla website was built in Craft they'd probably use Donkeytail to call out the safety features on their Vehicle Marketing Pages.

At the end of the day, Donkeytail is a great solution for people who want to easily content manage points on images, and want those points to reference content types in Craft CMS. Feel free to reach out if you have any questions, and you can learn more about Donkeytail in the Craft Plugin Store.

A few years back we created an internal plugin for our team to help content manage points on images in Craft CMS. After a lot of trial and error, we're excited to announce we've officially published the full and public version in the Craft CMS plugin store, and we’re calling it Donkeytail.

Donkeytail is a Craft CMS field type for Craft 3 & 4 that allows users to quickly and easily content manage points on images. You can use Donkeytail for locations on a faux map, showcasing multiple products within an image or even pinning the tail on a donkey. It’s GraphQL compatible, and works with all content types: entries, assets, users, categories, products and variants.

More specifically, maps come up a lot in our world. From maps for new development projects, to maps for hiking trails through the Scottish Highlands, most of the time it makes more sense to utilize our own system for design consistency rather than using a service like the Google Maps API. Reasoning for this varies from project to project — maybe what we’re mapping isn’t quite there yet (like a new neighborhood), or the design of the map and its interactions doesn’t quite fit a traditional mapping library. Donkeytail is now available to save the day.

You can download Donkeytail on the Craft CMS plugin store today. We hope you like it, and please contact us for any help.

Happy pinning!

In this video, we walk through how to use JavaScript’s Array.reduce() method to create a new value based on an array.

In this video, we walk through how to use JavaScript’s Array.filter() method to filter items out of an array.

In this video, we walk through how to use JavaScript’s Array.map() method to transform the data in an array.

In this lesson, we take a function and refactor it to make both the function definition, and the way we call the function more readable.

Video Transcript

In this video we're going to look at how to clean up our function definitions and the way that we call functions by using named parameters and setting defaults for our optional parameters.

For this example we have a function called renderlist which takes the list to render, whether that list should be ordered or unordered, the color that the item should be rendered in, and the background color for the list.

Inside of that function all we're doing is checking if some of these optional parameters like ordered color and background color are defined and if not we're giving them a value right here in the... but we're actually doing this in the body of the function.

So we're going to look at how to refactor some of this. The way that we would call this function is by passing an array as the first parameter, this is our list, and then true or false for this ordered, and then we could pass a hex code here for color and a hex code for background color.

The first thing that I noticed though is that we're passing in undefined, which seems weird because undefined is the base value for if you don't pass in a parameter, but the problem is that because we're passing in an ordered list of parameters instead of a named list because we want to pass in background color we have to pass something for color so that we can pass this last thing.

So let's go ahead and refactor this function to accept named parameters so that we don't have to pass in undefined for any optional parameters.

We're going to go ahead and come up here and we're going to refactor this to accept an object of parameters and we're actually going to destructure these values directly from that object. So we're gonna add some g-structuring right here and so we're gonna destructure list ordered color and background color and then when we call the function we will call it with list and then ordered set ordered to true. We don't need to pass undefined because this is not an ordered parameter, these are names, so it doesn't matter that if we don't pass in color it'll automatically be set to undefined and we'll pass in background color as that hex value.

Okay, perfect, so you can see this is already a little bit more readable even in the way we call the function because you can see what we're passing in. Before we were just passing in true as a value but you couldn't tell without looking at the function, going back to the function definition, or with some good dev tools that what exactly that boolean value of true or false was doing. You also couldn't tell what this value hex value was doing unless you looked at the function definition. But now this allows us to see directly from our function call exactly what's going to happen. You know you can tell from here you're going to get a list, it's going to be ordered, and it's going to have a background color which is whatever we pass in here.

We've done our first thing: we've named our parameters but now one problem is that if we want to call this in the most basic form, which should be something like this, you know renderlist and pass it an array, we can't do that anymore because we still need to pass in an object with a key of lists and a value of our list. This is a little bit more clunky than how we were previously able to do it which was like this... just calling renderlist directly. So, for the most basic usage of the function we've actually made it more complicated. Well, for a more complicated usage we've actually made it clearer.

But I don't really want to make that trade off. I really want the best of both worlds. So what we're going to do is we're going to make list a separate parameter so our first parameter will be the list and then the second parameter will be our options that are optional and you can pass these in when you're calling the function and you want to change something about the default way that it's called. So, if you just call it with the list it'll set order to true, it'll set these colors to their defaults, and you'll be good to go. So with that change we can now come down here and we can pass it just like this: we'll pass in our list, and then we'll pass an object with options, which is still very readable renderlist, and then you give it the list. That's very clear what's happening and then you can optionally pass an object full of options that will kind of change how that list is rendered.

Okay, so if you look in the browser you'll see that it says cannot destructure property ordered of undefined... so we have our order here and it's trying to destructure that but when we call renderlist like this what it really reads is, you know, passing in our function and then it passes undefined for the second parameter automatically because we didn't pass anything, and then what our function body is trying to do is pretty much this: const ordered and then the other things equals our second param which is undefined. So, it's trying to destructure something from undefined which doesn't work. So what we need to do is we need to set a default parameter for our second param up here so we could. It kind of makes sense to show it like this. You say options and then you set options to an empty object and then this down here would be like options.ordered but because we still want to do that destructuring what we can do is we can actually put that right back in where it was.

So we say destructure ordered color and background color from our second parameter and if the second parameter isn't defined, like when we call it right here with only one parameter and one argument then set it to an empty object. And this will allow it to because you can destructure from an empty object, you can't destructure from undefined, so if I refresh you'll see that we cleared up that error and we can call renderlist just like that and that works just fine even though we're not passing that second parameter.

Okay, so this gives us two really clean ways to call our function and this is pretty much as good as our function call is going to get. But one thing that we don't have yet is we still have this weird default setting in our function body which doesn't really make a lot of sense. It's kind of writing imperative code for something that should be declarative. You should be able to declare what the default for each parameter is. So we can actually move each of these things up into our destructuring. So we can say ordered equals true and what this will do is it'll set order to the value that's passed in, like here, true or it'll set it to fall back to whatever value we give it. So we'll set order to be false by default because we're passing true, and then we'll set the background color to be... or the color, to be this hex value and we'll set the background color to be transparent by default and then we can get rid of all of this checking, which is just checking if it's undefined, and this will do the exact same thing we were just doing, but it will do it in a declarative way. Kind of clean that up so you can kind of see. So we take our list and then we take an object of params which is ordered color and background color and we set fallbacks for each of those. And you can come back here and we can try to run this and you'll see that doesn't give us any errors, and it does if we kind of console.log, we'll just console.log list, ordered color, background color, every time this function is called.

When the console logs that out for the first renderlist we're only passing the list so we see the list is one, two, and then it uses all the defaults we have: transparent, our color, which is our default color and then order is false.

The second time that we call it we call it and we tell it order to be true and we give it a background color and you'll see that that's reflected and what's console logged out here.

That's pretty much it. that's all you need to know, um, Whenever I see a function call that looks kind of vague, something like our initial renderlist, where you're passing it maybe a list and maybe a true, if you see an undefined in there, to kind of get you to a third value, that's when you might want to reach for named parameters. You might want to reach for... anytime you're doing imperative checking of undefined in your function body you might want to reach for optional parameters and setting default for those parameters.

In this video, we walk through how you can use Craft’s built-in translation features to translate static content that is not translated in the CMS.

Video Transcript

Hey everyone,

In this video, we're going to talk about static translations with Craft CMS. So, what is a static translation? Well, Craft has a couple of ways for you to translate content when you're working with it. You can use the CMS and actually use different translations of the content in your fields when you're putting any content in the CMS, but it also allows you to translate static content that isn't managed in the CMS. Maybe something like a heading or a form.

The first thing we need to do to get static translations set up in Craft is actually get the translations. So if you look in my directory structure you'll see that I've added a translations folder and then inside of that there's a folder for each language that we're gonna add a translation for. Right now we have de for German and es for Spanish, and Spanish is what we'll be looking at today.

I can open up the site.php file that contains all those translations for any words that we want to translate. We have name which will translate to nombre, email, message, and we're gonna translate the word hello.

So, we have these translations here but our text isn't being translated. That's because we need to use the translate filter that Craft gives us in our Twig templates. So I'm going to wrap name in a string and we'll run the translate filter on it and then we'll do the same thing for email and message. Just wrap those as a string and we'll say Craft render the string but translate it.

You'll see nothing change but if I jump over to the Spanish version of the site all of these field names have been translated. Craft looks at the static text which are passing it, checks if it matches any of the keys that you've given it in the translation PHP file, and if it does then it goes ahead and translates it for you.

So let's try doing the same thing on this "Hello, Jake!" text. We'll just wrap it as a string and then we will translate it. Now you see here that nothing happens. This is because there's not an exact match on this string. So it sees the word "hello" but because we don't have "Hello, Jake!" in here it doesn't do substring translation it has to match the string exactly.

So for something like this where we want to match part of a string we know the format of this will always be "hello comma space something exclamation point", we can use a substring with a variable. So, what we'll do is we'll do Hello, {name}! will be our key and then we'll translate that to Hola, {name}! and then what we need to do when you use our translation is pass it some params. So, here we'll pass an object of params and we'll say the name should be Jake and here we'll say hello name and then it will translate that string for us.

So... this is a basic translation going from English to Spanish using static translations in Craft CMS!

Today we are going to take a quick peek at the new Space and Divide Utilities that were added to Tailwind in version 1.3.

Final code

    
      <div class="
  flex md:flex-row justify-center
  md:space-x-4 md:space-y-0
  flex-col space-y-4
">
  <div class="h-24 w-24 bg-blue-200"></div>
  <div class="h-24 w-24 bg-blue-200"></div>
  <div class="h-24 w-24 bg-blue-200"></div>
  <div class="h-24 w-24 bg-blue-200"></div>
  <div class="h-24 w-24 bg-blue-200"></div>
</div>

<div class="my-8"></div>

<div class="
  flex md:flex-row mx-auto w-3/5 justify-between
  md:divide-x-2 md:divide-y-0
  flex-col divide-y
">
  <div class="flex-grow text-center uppercase font-bold">Never</div>
  <div class="flex-grow text-center uppercase font-bold">Gonna</div>
  <div class="flex-grow text-center uppercase font-bold">Give</div>
  <div class="flex-grow text-center uppercase font-bold">You</div>
  <div class="flex-grow text-center uppercase font-bold">Up</div>
</div>
    
  

Video Transcript

What's up, everyone? In this video, we're going to look at how to set defaults for your props and also to validate props. So to do that I have three buttons here; give, you, and up, based on a popular song, and what we need to do is be able to set variants on these buttons... so we're going to use props for that.

We're going to look at the app component. You can just see I have three buttons here and here is the code for the actual component. It's just a simple button and we're applying a class of `button` and a class of `button teal`. Now, what if we wanted to have another variant of this button that wasn't teal but it was orange? Because we're working in Vue and using components we'd probably use a prop for that.

Let's come down here and we're going to add a prop and it's going to be called color and we're going to give that some information about what this prop should be. We're going to tell it the type should be a string, we're just going to accept a string telling us the color... and, let's go ahead and run with that for now.

Let's come out here and we're going to change this so that we can say color equals teal and the last one is gonna have the color orange. Those are gonna be our two colors; teal and orange. Let's come back into the component and try to implement that. What we can do is we can add a custom class here and we're gonna say that class should be button dash dash and then whatever the color they passed in is. We're going to remove this and we'll see that we now have a teal button and an orange button. But what if the teal button is our default and anytime we use it without the prop we want to go ahead and tell it that it should be teal?

I'm going to come back in and we're going to implement a default prop. We can say default and we're just going to give that a string of teal and when we save that you can see that when we don't pass any prop in like with this middle button it renders out this teal prop. So now we have a prop for our color and we have a default set for it. But one problem with using a string prop is that technically people can pass in a value that's not supported. If we come back and look here I could pass in for the second component color red and they would never know that that's not an accepted value. The color wouldn't show up on the front end but they wouldn't get any type of error either. Here's where prop validation comes in handy.

We can come within our prop definition and set up a validator and pass out a function which accepts one argument: value, which is the value of the prop. Then we want to check if the prop's value matches one of the specified values that are allowed. So we're going to say: if value equals equals equals, so if the value is equal to teal, or value is equal to orange then we'll return true that this is a valid prop value, otherwise, we'll return false... this is not a valid prop value.

Now if we come to look at our console here we'll see that we get an error when this is evaluated: invalid prop custom validator check failed for prop color. So it'll throw an error telling us that we passed in a color prop that is not accepted. This is useful for scenarios like this where you're allowing the users of your component to pass in string values as props but you need to make sure that they pass in allowed values only.

Here's the final code including all 5 tips, and one bonus tip!

    
      window.food = ['🌯', '', '🍔', '🍕']
window.todoList = [
  { task: 'Come up with examples', inProgress: false, done: true },
  { task: 'Record Video', inProgress: true, done: false },
  { task: 'Publish video', inProgress: false, done: false },
]

console.log(food)
console.log(todoList)

/* Tip #1: Named console.log */
console.log({ food })

/* Tip #2: console.table */
console.table(todoList)

/* Tip #3: console.warn && console.error */
console.warn('This may be unsafe')
console.error('There was an error processing something')

/* Tip #4: console.count */
for (const item of food) {
  console.count('Loop ran')
}

/* Tip #5: console.assert (🍕, 🌯) */
console.assert(food[0] === '🌯', 'First food item is burrito')
console.assert(food[0] === '🍕', 'First food item is pizza')

/* Tip #6: Styling console.log */
console.log(
  '%c Testing custom styles',
  'color:green; font-family: Comic Sans MS; font-size: 30px; line-height: 60px;'
)
    
  

It's not rare to be working with a rich text field in Craft CMS and want to style some elements of the output without creating classes. This is especially true when you're working with Utility CSS frameworks like Tailwind CSS so you're not writing custom classes very often.

Thanks to Retcon, this is easy! In this video we'll look at how to replace and style elements using the Retcon plugin for Craft CMS.

    
      <div class="content">
  {{ entry.body|retcon([
    ['change', 'h1', 'h2'],
    ['attr', 'h2', { class: 'text-3xl font-bold mb-4' }],
    ['attr', 'p + p', { class: 'mt-4' }],
    ['attr', 'code', { class: 'bg-gray-300 rounded text-red-500 text-sm' }],
    ['attr', 'p > a', { class: 'text-blue-700' }]
  ]) }}
</div>
    
  

Code

Here's the code for the finished prop definition, including a default and validator.

    
      export default {
  props: {
    color: {
      type: String,
      default: 'teal',
      validator: function(value) {
        if (value === 'teal' || value === 'orange') {
          return true
        } else {
          return false
        }
      },
    },
  },
}
    
  

Bonus tip

Another 🔥 tip for you: I find myself usually writing validators for string props, so one way to simplify the validator is to create an array of allowed values and use the "includes" array method to check if the passed in value matches an allowed value. Here's how that would look for this example:

    
      export default {
  props: {
    color: {
      type: String,
      default: 'teal',
      validator: function(value) {
        const validColors = ['teal', 'orange']
        return validColors.includes(value)
      },
    },
  },
}
    
  

If you have ever worked on a Vue application, a situation has most likely arose where you had some pieces of state that you use in multiple unrelated components. That forces you to decide: Do I put that (global) state in my root Vue instance and pass it all the way down through props, or do I pull in a state management library, like Vuex? Now, you have another option!

When the Vue maintainers released version 2.6, they exposed Vue's internal reactivity system, the same system used internally for a component's data. This allows for some pretty cool features, one of which is the ability to create a lightweight, reactive, global store. A big thing to note about that is the word "reactive". Because this state object will be reactive, if you update any piece of state in this store, your Vue app will know about that change and re-render any components that rely on that state, just like it does when you change something in your component's data.

Let's walk through how you can create a store and actions to update your state.

Creating a Store

Creating a reactive store is as easy as this:

const store = Vue.observable({ count: 1 })

I really wish there was more to say, but creating a store is so simple!

Creating Actions to Update your State

Let's talk about "actions": Actions are a way to centralize the way that components are allowed to update state in your store. The actions object is just that: an object containing functions. It doesn't have any fanciness or magic, it is purely a way for you to dictate how updates to state can be made*.

* There is nothing preventing you from directly mutating a piece of state in the store, the actions pattern is really only for clarity and consistency.

const actions = {
 incrementCount() {
 store.count += 1
 },
 decrementCount() {
 store.count -= 1
}}

Making Your Store and Actions Global

The way Vue creates components is practically const component = new Vue(options), which means that anything that you put on the Vue prototype will automatically be inherited by not only the root instance, but every Vue component. So, to make our store global, we can attach it to Vue's prototype.

Vue.prototype.$store = store
Vue.prototype.$actions = actions

Using Your Store and Actions

Because the store and actions are attached to the Vue prototype, they'll be automatically available in every component, so you can easily access them in your component.

<!-- Counter Component -->
<template>
 <div>Count: {{ count }}</div>
 <button @click="$actions.incrementCount">+ Add One</button> 
 <button @click="$actions.decrementCount">- Subtract One</button>
</template>

<script>
 export default {
 computed: {
 count() {
 return this.$store.count
 }
 }
 }
</script>

Complete Example

/* Create a reactive store */
const store = Vue.observable({ count: '' })

/* Create centralized actions for updating the store */
const actions = {
 incrementCount() {
 store.count += 1
 },
 decrementCount() {
 store.count -= 1
 }
}

/*
 Attach store and actions to the Vue prototype
 so they can be accessed from any component
*/
Vue.prototype.$store = store
Vue.prototype.$actions = actions

Conclusion

This might not be the perfect pattern for your application. Sometimes you don't need a global store. Sometimes you do need a full-fledged state management system like Vuex. But before you pull in a library, or pass props and events up and down through numerous components, it's worth thinking about whether a simple global store could save you a lot of headache.

We've all been there. You get a call that someone deleted content from their website, they don't know how to get it back and they're (understandably) upset. Before the 3.1 release of Craft CMS you might have been in a pinch. You could restore an old copy of the database, assuming you have backups, but then you risk overwriting newer content. It's not an impossible problem to fix, but you'd definitely be in for a bummer of an afternoon.

This is why the Craft team introduced Soft Deletes. Now, when you delete an entry, category, user or any type of element, it is automatically placed in a "Trashed" state, where it is recoverable, but won't appear in the dashboard or in any templates.

In this article, we'll be diving into the following topics:

• What types of content have a soft-delete
• How to soft-delete content
• How to find and recover soft-deleted content
• How to permanently remove soft-deleted content
• Configuring soft-delete
• What this means for plugin authors

What types of content will be soft-deleted?

Great question! The short answer: anything that is an "element" in Craft. The main types of content that you'll be working with soft-deletes in Craft are:

• Entries
• Categories
• Users
• Assets*

Other entities in Craft like sections, entry types and category groups are also soft-delete-enabled, but you can't restore them from the Control Panel (CP), and probably won't bump into many scenarios where you'd want to recover those elements manually, especially if you're using Project Config.

*Assets cannot be recovered from the CP, which we'll discuss below

How to soft delete content

Soft delete is automatically enabled if you're using Craft CMS 3.1+, so you can delete your content normally and it will automatically be soft-deleted.

How to find and recover soft-deleted content

Here's the fun part! The whole reason to have soft-delete is so that you can find and recover content that was mistakenly deleted.

Finding soft-deleted content

When you delete an entry (or another element) it's marked as "Trashed" and will no longer show up in the normal list of entries in the Control Panel.

To find and manage soft-deleted entries, you can click on the "status" indicator (to the right of the search bar) and select a new status option called "Trashed." This works for Entries, Categories, Users and Assets.

Within this view, you can see all of the content that has been soft-deleted, but has not yet been permanently removed (see the next section for how/when content is permanently removed).

As you can see, the Deleted Blog Post entry showing up under Trashed still has a status of "enabled" even though it has been deleted. Don't worry about this, it won't show up on the front end or in any searches.

Recovering soft-deleted content

To recover an item that's been soft-deleted, find the trashed element and select it. Once you've selected it, the filtering bar at the top will disappear and a "Restore" button will appear. Click "restore" to restore all selected entries.

Note: Entries, Users and Categories can all be restored from the Control Panel, but Assets cannot. This is because when you delete an asset, the file related to that asset is automatically removed from the server (either your server or a remote). This makes it difficult to "restore" an asset.

How to permanently remove soft-deleted content

From the Control Panel

Do you want the good news or the bad news first? The bad news? Okay. Currently, there's no way to permanently delete soft-deleted content from the CMS. But, the good news is that it's coming in Craft 3.5.

Once Craft 3.5 is released, you'll be able to permanently delete content that's been soft-deleted by navigating to the Trashed screen and clicking "Delete Permanently."

With a Console Command

You can, however, remove soft-deleted content using a Console Command that's built into Craft. I won't go into exactly how this works, but just know that soft-deleted entries are eventually garbage-collected automatically*, but you can run this command to remove them early.

    
      // remove all soft-deleted elements immediately (Entries, Users, etc.)
./craft gc --delete-all-trashed
    
  

*Unless you tell Craft never to remove soft-deleted content (see Configuration section below)

Configuring soft-delete

By default, soft-deleted content is kept for 30 days, and then will be automatically removed. But you can configure this to keep content for a shorter period, a longer period or forever.

Using the softDeleteDuration config:

    
      // general.php

return [
  'softDeleteDuration' => 0 // zero means that trashed content will be kept forever
]
    
  

What this means for plugin authors

Soft Delete doesn't just work for native Craft element types, any custom element that a plugin adds can also leverage the Soft Delete functionality.

Examples

Inventory

Lindsey DiLoreto recently updated his plugin Inventory, which helps you keep an inventory of where your fields are being used and track if fields were being used in a now-deleted section.

Campaign

Ben Croker also updated his plugin Campaign to leverage soft-deletes, and allow you to permanently delete Contacts for GDPR reasons.

How to implement soft-delete

Soft Delete will automatically work for any custom elements in Craft. But, if you want to allow users to be able to restore soft-deleted elements from the Control Panel, you need to implement a Restore Action on your element class. For more information, check out the documentation.

Further Reading

• Soft Deletes - CraftQuest Lesson - this is an awesome resource that covers very similar content to this article in an awesome easy-to-follow video!
• Soft Delete Plugin Documentation

We’re all having to come to grips with the massive changes COVID-19 has brought to our day-to-day lives, both from a health and economic perspective. There’s a lot of scary stuff happening, which has significantly impacted our families, friends, businesses, and everything in between.

Over the last few weeks I’ve been thinking about how we as digital service businesses, in general, can be the most useful, and what our role is during this period of unknown. In the end, I keep landing on a few simple things: continuing to do our jobs well with a heightened sensitivity to our customers, and offering our expertise in any way possible (even if it’s not on our list of services).

Right now people are leaning on technology with a heightened sense of urgency, and our roles within our agencies can be much more meaningful and impactful - and on a much larger scale - than ever before. Small businesses around the globe are spinning up entirely new concepts overnight to stay up and running, temporarily transforming their businesses from what they were yesterday, into something that works today, and into the future. As experts in this area, it is our job to provide as much guidance as possible, and facilitate these transformations to the best of our ability.

We should be helping restaurants quickly transition from traditional walk-in eateries to agile kitchens that offer take-out, delivery and e-gift cards.

We should be helping churches navigate their online service offerings, and how to properly build the infrastructure required to meet those needs so their digital doors remain open.

Since we already work in a remote-friendly industry, we should be providing tools and insights to our friends that are making that transition for the first time.

We should be helping brick and mortar retailers strategically scale their online businesses, and engage their customers in new ways, like bookings for digital consultations and curbside pick up.

You get the point.

While we’re always looking for clients that are the perfect fit, we must do what businesses across the globe are being required to do to simply survive. Change. Let’s all do our part, and look for opportunities to provide creative, digital ways to help humanity get through this together.

I look forward to this post every year where I get to go off-topic (for our blog, at least) and publicly reflect on what we’ve accomplished over the previous 365 days as a company.

One of the many things I like love about Good Work is our ability to continually evolve, both quickly and efficiently. We didn’t choose a certain way of doing things six years ago and stick to it, we learn from everything that comes our way and adjust accordingly. At the beginning of each year we set various themes and goals, and as the months go by we stick to them as much as possible, while also understanding the road isn’t straight, but incredibly windy.

About this time last year we were in the early stages of making an intentional effort to share our knowledge through a series of articles, newsletters and speaking engagements at conferences. Since that time we have committed to twice-monthly articles, a monthly newsletter and have spoken at conferences all over the map, including the official Craft CMS conference, DotAll and Vue.js Amsterdam, one of the largest Vue.js conferences in the world.

When it comes to Craft CMS, we upped our partnership with Craft and became one of only 16 verified partners in the United States. We also launched an official Craft CMS Maintenance Program out of necessity, as the demand for The Good Work Way (development rooted in reliability, communication, and of course, expertise) continues to grow.

We added 30 new clients to the Good Work family over the last year, roughly one-third of our total client list, and have worked on many exciting and challenging website projects.

To top it all off, we went fully remote back in February. We’ve always been remote-friendly with team members in different states and countries, so it only made sense. We’re now officially located in guest bedrooms and home offices throughout Texas, North Carolina, England and France!

As I write our remote team is descending upon Austin, Texas, for our annual company retreat so we can spend a few days in-person hanging out, eating BBQ, and talking through themes and goals for the next 12 months. Each year we grow stronger both as a team, and company, and I’m excited to see that tradition through to our next birthday post and beyond.

Read our previous birthday messages:

• 5 years of Good Work
• 4 years of Good Work
• 3 years of Good Work
• 2 years of Good Work
• 1 year of Good Work

I recently wrote 'How to use Google Analytics to improve your website,' an article about making strategic website planning decisions by prioritizing, tracking and analyzing your goals with Google Analytics.

I'd like to continue the theme of making informed website decisions by hopping over to another data-driven topic: website audits. Website audits come in a variety of shapes and sizes, but the ones I find most useful are geared towards Accessibility, Technical SEO, Speed and Design.

Continuously improving your website by performing these four types of website audits will not only keep your website more relevant between completing traditional website redesigns, but also improve the usability of your website for your customers and help with search engine optimization. Website audits are similar to vehicle checkups and oil changes, and should be completed every few thousand miles to better align your website for future relevancy.

What is an Accessibility Audit?

Website accessibility is the process of designing and developing your website in a way that allows easier use for people with disabilities. In some instances, website accessibility is a legal requirement, but even when it's not we should strive to have accessible websites. Last year Gavin, one of our developers, wrote an in-depth article about 'Website Accessibility & ADA Compliance' that provides a great introduction into the topic.

Since website accessibility is based heavily on content, you should complete regularly scheduled accessibility audits the more often you update your website. At a minimum, standard marketing websites should probably complete quarterly, or bi-yearly, audits, while websites that have a constant stream of new content and updates might need to schedule these audits on a monthly basis.

The quickest way to review your website's current accessibility standing is to utilize the WAVE web accessibility evaluation tool.

What is a Technical SEO Audit?

Technical SEO is the search engine optimization work that needs to be completed outside of link building and content creation, and is a major component of the ranking signals that search engines like Google use in their algorithms. Things like website speed, security, usability and code structure all fall under the Technical SEO category. While this is very important to consider in the website building phase, you need to keep an eye on the status of your Technical SEO issues fairly regularly.

There are a variety of available tools that make it easy to automatically complete Technical SEO audits, and we utilize SEMrush at Good Work.

What is a Website Speed Audit?

People expect websites to load quickly. The exact statistics change year over year, but in general you can expect to see a ~10% loss in page views, customer satisfaction and conversions from just one second of extra load time. Like Technical SEO, there is a lot of work that can be completed when building your website to address these issues, but it’s important to schedule regular speed audits as your website evolves. Things like image sizes, unoptimized template logic from new features and code snippets from your marketing tools can have a significant impact on post-launch website speed.

One way to stay ahead of this issue is incorporating a website performance budget into your digital plan. A website performance budget is a set of constraints you put on your website to help ensure your pages stay nice and performant. For instance, your website performance budget could include maximum image/video sizes per page, or more generally a page load time that you can never exceed. Mozilla provides a good overview of performance budgets if you’re interested in learning more. You can also use Google Lighthouse to test the speed of your website on desktop and mobile.

What is a Website Design Audit?

A website design audit is the act of combing through your website on a regular basis to find opportunities for improvement. This may include finding newer and better ways of doing something you've done in the past, considering new features based on real use cases and how to implement them, or just a general tightening of your design system to keep the details from falling apart over time.

So, how do you get started? Well, it’s pretty easy. You can get 80% of the way there with your Accessibility, Technical SEO and Speed audits by using the out-of-the-box tools I mentioned above. Auditing your website from a design perspective is as easy as setting up a prioritization meeting with your design team and scheduling in the work.

Completing a combination of each of the above audits on a regular basis will help ensure your website is doing its job in relation to your businesses goals, whether that's selling widgets or a service, or simply offering visitors a place to read the news.

Digging through Google Analytics to track your website’s performance can be an overwhelming and confusing process. It's easy to base decisions on general statistics like Bounce Rates and Website Visitors, but if we dig a little further there's loads of useful data that can help guide your website improvements.

I recently completed this process to help plan out requirements for the future of our website, and decided to document the process for future me (and future you, too).

P.S. If you don’t already have Google Analytics setup on your website, you’ll need to do that first. I also recommend that your website is in a good place from a Technical SEO standpoint before applying any of the learnings that you gain from this article.

P.S.S. If you're looking to get super analytical today, this article probably isn't for you. This is the 'Non-Marketers Marketing Overview to not using too much math but getting 80 percent of the way there.’

Let’s get to it, shall we?

1. Prioritize your website goals

The first step is deciding what hard actions you want your website visitors to take when they visit. The usual suspects for non-commerce websites are things like: fill out your contact form, subscribe to your newsletter, apply for a job or download a resource. As you go through this process it can be quite eye-opening, as your list and sitemap might not mesh. Unearthing these discrepancies is one of the primary reasons for this exercise.

To get your creative juices flowing, here's the list I created for our website:

1. Fill out the contact form
2. Subscribe to the newsletter
3. Email us
4. Call us

You also want people to learn more about you, what you do, and if you have a blog you want them to read your articles, but it's important to remember this is all just supporting content.

If your supporting content is right then more people complete the goals you've set for them. If your supporting content is wrong then less people complete the goals you've set for them.

2. Tracking your website goals in Google Analytics

Now that you've set your goals it's time to figure out how to track them appropriately in Google Analytics. There are a few ways to do this. You can use Goals (literally), Events, or Event Goals.

A Goal in Google Analytics tracks successful conversions, and usually can be measured as revenue earned per conversion. An Event in Google Analytics allows you to track actions on your website that aren't necessarily revenue related, but are still important to the overall health of your website. Lastly, Event Goals are a type of Goal that have a specific Event as the conversion.

Destination Goals

For goals like contact form submissions and newsletter signups, hopefully users are directed to a 'Thank You' page once they've successfully completed your form(s). If this is the case, the easiest way to set this up in Google Analytics is with a Destination Goal. You can learn more about this process by following the Create, edit, and share goals documentation on Google’s website. If you don't have a 'Thank You' page, you'll most likely need to use Event Tracking, which I'll explain in 3, 2, 1...

Event Tracking

For goals like tracking call-ins and emails (or forms that don't have a 'Thank You' page), the easiest way to set this up in Google Analytics is with Event Tracking. Events are slightly more technical in implementation than Goals, but if you have Google Tag Manager setup it will make your life quite a bit easier. You can learn more about this process by first Deploying Google Analytics with Tag Manager, and then following Tag Manager's Google Analytics events documentation.

3. Analyze and act on the data

Once you are officially tracking all of your goals in Google Analytics, it's time to analyze and act on the data. Let's start with your Destination Goals for things like contact form submissions and newsletter signups.

Log into Google Analytics and go to Conversions > Goals > Goal URLs. Click the URL you're interested in (in my case it's contact/thanks) and adjust the date range to the timeframe you're interested in viewing. Click the 'Secondary Dimension' dropdown above the table and choose either 'Goal Previous Step - 1’ or 'Goal Previous Step - 2', whichever is relevant.

In my example I know that people have to visit /contact before they visit contact/thanks, and I want to know what triggered them to contact us, so I want to use 'Goal Previous Step - 2' (the page before /contact).

Secondly, let's look at our Event Tracking. Log into Google Analytics and go to Behavior > Events > Overview, click into whichever depth of detail you're interested in viewing (either Category, Action or Label) and then choose the actual Event you want to analyze. Click the 'Secondary Dimension' dropdown above the table and choose the relevant dimension. 'Page' is a good one for events that are on multiple pages, while 'Landing Page' could also be helpful to show where people originally landed on your site that led them to complete an action.

As you're digging through all of this information it's important to ask questions like:

1. What supporting content (pages) is generating the most (and least) goal and event conversions?
2. On pages with lower conversions, are they useful in another way or could they be improved to be more useful?
3. If people are signing up for your newsletter from blog post pages, what type of posts are doing the best and what are doing the worst?
4. Are any specific types of content doing significantly better or worse than their siblings (e.g. of your six case studies, is one converting fantastically, is one doing horrible or are they all generally the same)?

Asking these sorts of questions, backed by real data, will help you to make better decisions when planning improvements to your website and writing content, whether it's completing a full redesign or simply making tweaks across the board.

You’ve spent months on the design of your new website. You’ve been there for every email thread and conference call, reviewing color choices, user experience and content management system (CMS) functionality. The last step is packaging up the design files for your development team to bring the website to life. It’s at this crucial step that a website project’s success is determined.

A successful design to developer handoff extends far beyond a Dropbox link to layered Photoshop (PSD) files. It’s time to take a step back and ensure that your development team is walking into this project with the information they need to create the website promised to your stakeholders. Don’t allow them to make assumptions. We all know the common monicker about what happens when you assume something. Instead, create clear documentation throughout the design process that sets you and your development team up for success. Also, if you’re creating this documentation the day before the handoff, it’s probably too late, and you’ll probably forget something important. Ongoing information gathering and documenting is key during the design process to ensure a smooth transition into development.

Below are six key checkpoints to ensure a successful website development execution after a design handoff. Each project is unique, but utilizing a combination of the tools below will ensure your team creates the desired website once you move into quality assurance and launch.

Design files

Depending on how exact you want your breakpoints to be, provide Desktop, Mobile and Tablet design files. It is also helpful to include all default HTML elements such as headings, bullet and numbered lists and block quotes to ensure the content on long-form pages is formatted correctly as real content gets entered.

Ensure web-friendly fonts are in order

Make sure chosen fonts are web-friendly and include pre-purchased license details and files if applicable. Also, convert font icons to outlines in your design files.

Export assets

Export assets such as graphics, icons and photography used in the design into a separate folder for the handoff to ensure they’re exported to your liking and to save time in development.

Document functionality requirements

Clarifying how flat designs are expected to come to life in development is a key communication piece during this handoff. As you and your stakeholders make decisions, or voice preferences for animations, hovers, links, forms, etc., keep a living document that records these decisions as they’re made throughout the design process. This can be done in a spreadsheet, Word document or whatever medium you prefer.

You can either present these notes to your development team during the handoff, or better yet, turn them into an annotated PDF of the designs to make it as clear as possible. This prevents any confusion about the expectations that have been set. Again, if you record these requirements as decisions are made it ensures nothing is forgotten, which can happen if you try to remember everything at the end of the design process.

Document CMS expectations

Similar to the Functionality Requirements, keep a log of the content management system (CMS) expectations as you work through the design process with your stakeholders. Your development team’s default will be to build the CMS specifically for the designs. This is done to ensure the website content editors don’t have so much freedom that they can break your design. The development team could also go down an hours-long rabbit hole guessing what possible options your content editors could want, so to save budget, the development team will usually stick to the hard facts. Do your stakeholders expect color options for the headers, or for a certain page to be built modularly so they can drag and drop content areas? All of these unique expectations need to be notated per template, as well as any options such as multiple colors, image sizes and text/image placements.

Organize 3rd-party logins

There is likely a selection of login details that your development team will need available to them at some stage of the project. The best time to provide that information is at the beginning, saving you from having to dig them up midway through the project. These logins typically include domain name server, hosting, third-party integrations and email subscription accounts. Hand over these sensitive details in whatever manner you are most comfortable with, and trust they’re in safe hands with your development team.

Implement these six steps in your design to developer handoff for your next web project, and please buy me a coffee if it does wonders. :)

Creating a plugin for Craft CMS can be intimidating, but if you’re comfortable developing with Craft, we believe you’re 100% ready to take the leap! The following guide is a step-by-step process for creating and installing a Craft 3 plugin in just minutes.

Creating Your Plugin

Step #1: Create a plugin skeleton

Plugin Factory is an amazing tool that allows users to create a basic plugin framework that you can build on, and we highly recommend using it as a starting point. If you'd rather build out your plugin from scratch, you can refer to the Craft docs to set up the basic plugin structure.

Step #2: Register your plugin with Composer

When developing a plugin you’ll want to work on it locally, without registering it with something like Packagist, so that you don't have to push releases every time you make a change. To install a local plugin as a package you'll need to make a few changes to your composer.json file. Add the following to your composer.json (replacing the "url" with the relative path to the plugin):

    
      {
  "minimum-stability": "dev",
  "prefer-stable": true,
  "repositories": [
    {
      "type": "path",
      "url": "./plugins/my-plugin-name"
    }
  ]
}
    
  

Step #3: Require your plugin

While Composer now knows where to find your plugin, it still hasn't been installed by Composer. We can "require" our plugin with Composer, just like we would a published package using the plugin's package name. To find the package name look at the composer.json file inside of your plugin folder. The name property is the package name. Once you've found the package name, run composer require package-name to add your plugin.

Tip: Your plugin's name should look something like this: simplygoodwork/my-plugin-name

Because of the configuration we added in the above step, Composer will create a symlink to your plugin instead of attempting to download it from the registry like it normally would.

Step #4: Install your plugin

Your plugin should now be successfully installed by Composer, but we still need to install it with Craft. Login to your Control Panel, navigate to Settings > Plugins, and install the plugin.

Tip: To test whether your plugin is working, place some "dump and die" code within your plugin's init method, like this:

    
      /* File: ./plugins/barracuda/src/Barracuda.php */

// ...

public function init() {
  print("Testing Plugin!");
  die();
}

// ...
    
  

If your plugin is properly installed it should show ​“Testing Plugin” on a blank page when you try to visit your website or Control Panel.

Step #5: Profit

You’re done! When you’re ready to publish your plugin to be publicly accessible, follow this guide in the Craft docs: https://​docs​.craftcms​.com/​v​3​/​e​x​t​e​n​d​/​p​l​u​g​i​n​-​s​t​o​r​e​.html

Plugins allow you to extend the core functionality of your Craft website, and there are hundreds already available through Craft’s plugin store (including some of our favorites). However, there are times when creating your own plugin can not only solve your own needs, but hopefully provide a valuable tool for other Craft websites. Hopefully this guide kickstarts that process!

‘Tis the season to reflect on the previous year and begin planning our future business goals and the projects we’ll need to tackle - both online and offline - to help us get there. I don’t know about you, but given the fact we’re entering not only a new year, but a new decade, this planning season feels especially important.

Over the last few weeks our team has been compiling survey results and creating bullet point after bullet point of things we want to accomplish to help us reach our goals. On the digital front, we have a few broad tasks we want to continually manage in order to stay ahead of the game and fend off the robots from taking over. We recently packaged this into a new partnership offering for our clients, but I wanted to share it here as well. I hope you find this as helpful for your business in the coming year as we have for ours.

Regularly scheduled website audits

As your website continues to expand and grow, it’s important to ensure it’s still in good standing from a technical SEO, accessibility, speed and design standpoint. Next year we will run monthly technical SEO audits on our website, and quarterly accessibility, speed and design audits.

When your website continually evolves like ours, it’s important to look under the hood every once in a while and schedule a tune-up. In the fast-paced environment that is digital, regularly scheduled website audits are required to have a seat at the table.

Holiday reading material:

• Regularly scheduled website audits
• Technical SEO Checklist
• Website Accessibility and ADA Compliance

Ongoing maintenance and continuous improvements

Over the last year we’ve made a concerted effort to continuously improve our website on a monthly basis, ensuring our website is always presenting the best version of itself. Through iterative changes over the last 12 months we’ve seen significant improvements in engagement, how clients perceive our brand, and overall value our website brings to our business. Next year we’ll continue to improve, build on and prune our website as we always have.

Testing the right blend of infrastructure updates, website audits and continuous improvements is viable in ensuring our website brings the most value to our business at any given time. The most important thing is making sure we never let it go stagnant.

Holiday reading material:

• How to use Google Analytics to improve your website
• Continuous improvements over website redesigns
• A successful website development process

Updating your websites to Craft CMS 3 (and beyond!)

Back in March I wrote an article about updating to Craft CMS 3 and the official end-of-life for Craft 2. Not only is Craft 3 packed with new features like speed improvements, better image editing and multi-site manager, but Craft 2 will no longer be supported after January 31, 2020.

But wait, there’s more! Craft 4 is also on the horizon, launching sometime next year. Making sure your website is on the latest version of Craft will ensure a much smoother transition to Craft’s newest version. Craft 4 development is still underway, but we know it will focus on important features like accessibility, collaboration (think Google Docs) and overall author experience.

Keeping Craft CMS (and any relevant website plugins) updated on a monthly basis gives us the peace of mind that our website is as secure as possible, and all of the latest features are available to our team.

Holiday reading material:

• Updating your website to Craft CMS 3
• Why we love Craft CMS
• Ongoing Craft CMS Maintenance Plans

While our team is no stranger to website design and development projects that begin at square one, we always recommend continually auditing and improving your website on a consistent basis so redesign projects are needed less frequently. It’s not only easier to budget, it ensures your website is always acting as the best version of itself and performs its best in relation to your internal goals. Following the above recommendations is a great start.

Hopefully this guide proves helpful in planning your digital checklist and goals in the new year. Cheers to a successful 2020!

Vue.js is an amazing library for building user interfaces, but it (purposefully) lacks some of the bells and whistles of a full framework. That’s where Gridsome comes in! Gridsome is a framework built on top of Vue that provides features like pre-rendering, a centralized GraphQL data store and a plethora of performance and developer experience improvements out of the box.

What is Gridsome?

The Gridsome team describes it in this way:

“Gridsome makes it easy for developers to build modern websites, apps and PWAs that are fast by default 🚀.”

Gridsome is also a JAMstack framework. If you're not familiar with JAMstack, here's a short description from their website:

“The JAMstack is a tech stack to help you create fast and secure sites and dynamic apps with JavaScript, APIs and pre-rendered markup served without web servers.”

Gridsome can do many things, but building static websites is one of its core tenets.

What is a "static website"?

To understand static websites it's helpful to understand the entire landscape. There are three primary ways to build Vue applications:

1. Client-side: Client-side applications are rendered completely in the browser. This comes with advantages, especially for highly dynamic applications, but it also has the occasional downside of being less performant and potentially SEO unfriendly.
2. Server-side: Rendering your Vue application on a Node server, instead of in the browser, addresses SEO problems and can help with performance. However, server-rendering makes scaling your application harder since you have to run Node servers to handle all of your requests.
3. Static (pre-rendered): Fully pre-rendering your Vue application into HTML/CSS comes with many benefits, like incredible performance, built-in SEO, increased security and easy scalability.

Why build static sites with Gridsome?

Gridsome really shines in three main ways: developer experience, user experience and business concerns.

#1: Developer Experience 👩‍💻

🔌 The Plugin Ecosystem: Gridsome allows developers to create and open-source plugins for Gridsome. Plugins can do anything from pulling in a feed of your tweets to automatically inlining critical CSS!

📄 Source Plugins: Source plugins allow you to seamlessly pull your content in from any source: APIs, markdown files, or even a CMS. Gridsome has official first-party plugins for many common CMS's, like WordPress, Contentful and Sanity to name a few.

#2: User Experience ⚡️

✨ Pre-rendered HTML: Gridsome takes your content, templates and interactivity and builds out HTML and CSS pages that work without JavaScript. This matters for three reasons:

1. Performance: The browser is best and fastest at rendering out HTML directly.
2. Search Engine Optimization: All the content and meta information (like tags) is already in the HTML of each page, so search engine's crawlers can quickly and easily crawl it.
3. Progressive Enhancement: If your application is client-side rendered, you're out of luck if someone has JS disabled, or JS hasn't yet runs on the page. When your HTML is pre-rendered, JS is not required.

🎩 Automatic code-splitting: Because Gridsome knows about your templates, data and routes it can intelligently build page-specific bundles of code so you're never loading unneeded code.

💜 PRPL pattern: PRPL is a pattern for structuring and serving Progressive Web Apps (PWAs), with an emphasis on the performance of app delivery and launch. Learn more here.

🧠 Smart link prefetching: Gridsome knows which pages link to other pages, so when a link to another page comes into view Gridsome automatically loads that page in the background making the page change almost instantaneous when the link is clicked.

🌄 Progressive image loading: Gridsome has a built-in component for automatic progressive image support. This component renders an ultra-compressed image before the image is ✨ magically ✨ lazy-loaded when in view.

🌍 CDN-based hosting for lightning speeds: The output of Gridsome build is completely static files that can be hosted anywhere, no LAMP stack required. This also means that your website can be hosted on the edge of a CDN so that it can be cached and quickly accessed from any location!

#3: Business Concerns 📈

🔒 Security: If your content lives in a CMS and it's publicly accessible, it can cause security issues. If you don't believe me, Google "WordPress hacked." When working with the JAMstack it's usually only necessary for your build process to query your backend for content. You can put your backend behind a strict firewall, or within your intranet, to decrease the surface area of possible attacks and vulnerabilities.

💸 Scalability: As mentioned earlier, Gridsome outputs fully static files that don't require servers. This makes scaling your website or application simpler and cheaper because you're not scaling up servers to handle the request load.

Further Reading

Gridsome is great for building static sites that are performant and secure, and it's easy and fun for development teams to work with. If you're interested in developing with Gridsome, below are some additional resources:

• Gridsome Documentation
• Getting Started with Gridsome
• Static Vue With Gridsome (video tutorial)
• Quick Start: Gridsome + Craft CMS GraphQL API

In today's world it's no longer viable to complete a website redesign process with the expectation that you're done upon launch. Modern websites are a living, breathing part of your sales and marketing ecosystem, and need to be continually nurtured to ensure optimal performance and relevancy for both internal and external visitors.

This requires us to throw the standard "redesign every X years" approach into the fire and take a modern, two-pronged approach.

Create a future-proof design system

Creating your website with a future-proof design system and architecture, that can expand and grow with your business without falling apart, provides a foundation that prevents the need to start fresh again every few years. By designing with the future in mind, and taking a systematic approach, you can build out your website

quicker and more consistently over time.

A few examples of great design systems are:

1. IBM
2. Polaris by Shopify.com
3. Orbit by Kiwi.com

Design thinking and systems design has been around forever, but it wasn't until the last decade, as the Wild West of the web matured like other industries, that it became a consideration in digital. As we near the end of 2019 the majority of design teams already take this approach, however, if they aren't (and for no good reason) it’s a red flag.

Smart systematic design doesn't have to constrain design liberties, either. Take our recent work with OC and POSH for example.

Continuously improve your website

After launching your new systematic, future-proof website it's important to facilitate ongoing partnerships with your design, development and marketing teams to focus on continual performance improvements, new features, and general development based on your ever-changing business needs. This can be done with your existing team(s), or a business like Good Work that specializes in post-launch aftercare and long-term partnerships.

While the design process involves in-depth research and discovery, the way in which it's digested by your consumers is mostly guesswork until the day your website launches and starts engaging users. Edge-cases start to reveal themselves, new features or user-journey ideas pop up based on usage, and the way your business stays relevant in a digital space continues to evolve. The list goes on. To stay relevant and ensure the most value out of your website you must continually nurture it post-launch.

Summary

Whether you deploy a redesign process every few years, or engage a partner on a continual maintenance improvement plan, the costs are fairly similar. However, the ROI on a maintenance plan is exponentially better. Redesigning every X years creates long stretches of irrelevancy and stagnant, sometimes broken, content that isn't good for anyone (including search engines).

The web is a faster-paced world than ever before, and while ensuring your website is always presenting the best version of itself may seem like a huge barrier to overcome, it actually presents opportunities to build stronger connections with your customers. By treating your website as a living, breathing thing rather than an off-the-shelf product, businesses can remain ahead of the curve and offer website visitors a superior user experience to their competitors. Launching your website is step one - now it's up to you to ensure your website remains relevant and continually meets your goals.

For many of us, Internet Explorer (IE) was our first web browser experience, providing a simple double click from accessing the wonders of the internet and connecting us to the world in an entirely new way. It replaced our encyclopedias, helped us write our high school papers and was likely preloaded on the computer at our first job. It dominated the market share upon its arrival and represented around 90 percent of browsers used.

Twenty years later IE has struggled to remain relevant, representing only about 3 percent of the browser market. Its existence is linked to Windows 10, the final version of Windows - ever - and will essentially survive until the end of time with minimal technical updates every six months. It’s slow, painful death has created a variety of issues for those who continue using it, with security risks being at the top of the list. In April, a security researcher discovered a security flaw that allows hackers to steal Windows user’s data thanks to IE. Users don’t even have to open the now-obsolete web browser for malicious actors to exploit their data, it just needs to exist on their computer. Just last September, Microsoft released a notice of serious security vulnerability.

Not only has IE fallen from grace amongst most consumers, Microsoft’s own security experts have published articles warning people from using it as their default browser. In his article titled, “The Perils of Using Internet Explorer as Your Default Browser,” Microsoft cybersecurity expert, Chris Jackson, urges people to stop using it, explaining that it is now more accurately a compatibility solution to help with older sites that should be updated for modern browsers. Because IE is no longer being developed to support current web standards, the process of developing modern websites for IE compatibility is a nightmare, if not impossible. In some best-case scenarios, development can be simplified down to its basic elements allowing it to function in IE, but doing so creates significant disadvantages for the user experience.

As a development agency we must approach the challenges related to IE through two lenses. As developers, IE is archaic, difficult to work with and potentially dangerous for our clients. Due to these reasons it is no longer included as a tested browser in our standard contracts. However, as a partner to our clients, we recognize that IE compatibility is sometimes a necessary evil. Many corporations continue to use it as a default browser (despite Microsoft’s own warnings), and preparing for a user to view a website in IE might take priority based on the industry.

The most cost-effective approach for corporations to circumvent website visitors from viewing their site in IE is applying a banner to any page visited when a website detects someone is viewing it in IE. The banner copy will recommend the site be viewed in the most recent version of Chrome, Firefox, Safari or Edge. If this isn’t a satisfactory solution for our clients, we typically work on a case-by-case basis to determine the best route to provide a functional site in IE. This typically involves removing most of the bells and whistles of the front-end experience, and potentially editing some core website functionalities. It’s worth noting that it has become an industry standard to charge a 20 percent (or more) tax for IE testing and implementation, as this process can add extensive time to a project’s scope. This may be a worthwhile investment for some clients, and if this route is chosen we work with them to map out expectations and adjust both the scope and timeline to accommodate IE testing.

Internet Explorer will continue to be an immortal ghost that haunts the halls of Microsoft and the corporations that continue utilizing it. Eventually it will become a thing of lore that developers use as jokes at conferences, and the snarky memes currently poking fun will become nostalgic. Until then, take this knowledge back to your marketing teams, IT groups and leadership and help us make this a better, Internet Explorer-free digital world.

Good Work was created around developing websites for design and marketing teams. Whether it be client-side teams at brands or corporations or creative studios that design websites for clients, our processes are centered around catering to this type of work.

Web developers can develop websites, that’s a given, but placing a heavy emphasis on the indirect — but very important — processes that ensure overall success is crucial: launching projects on time, clearly communicating to everyone involved, and being reliable from project kickoff to launch. However, replicating that process repeatedly with a high success rate is challenging.

Over the last 8+ years, we’ve created and refined processes that work well for us and our partners. Sometimes our process spans months; other times it’s in smaller iterations, but sticking to it ensures our projects rarely break down.

I hope this post helps both clarify and spark ideas for your own development processes, ensuring both short- and long-term success.

Pre-work, work

Before getting started, it’s useful to thoroughly understand your project. For straightforward websites, this can be as simple as a phone call or meeting to nail down a sitemap and understand template and feature needs. For more complex builds this may require an in-depth discovery phase where we brainstorm and prototype ideas to ensure we’re developing the right product, a road map to proceed, and a rough prototype to reference throughout the life of the project.

At this point we should have enough details to plug the information into our custom estimating tool and nail down development costs and timelines. The deliverable here is a proposal and/ or contract. Throughout the pre-development phases of the project we like to keep an eye on design progress and provide any necessary feedback along the way.

Design kick-off

Once the design is signed off and completed, we like to hold a kick-off meeting with both the design and development teams to talk through development expectations. Here is a sample kick-off agenda document. Since we’ve been involved with the design process from the start, we use this meeting to review everything with a fine-toothed comb. We can then nail down a specific timeline and expected launch date.

Things we look for in a good design handover:

• Full design files, including mobile
• Documented functionality requirements and CMS expectations
• Web-friendly font licenses and files
• Exported assets

Our ‘Six steps to a successful designer to developer handoff’ article is a must-read when creating a bulletproof checklist for your design handovers.

Development cycle

Following the design handover we move into development, which typically involves front-end development and content management system (CMS) integration. This phase usually becomes a silent period between agencies and clients, so we like to provide a weekly status update at a minimum, flagging anything unexpected as soon as possible through calls and emails. As development comes to an end we move into our quality assurance phase.

Quality assurance

Once development is finished and all content has been entered into the website, we begin our quality assurance process. After completing our own internal checklist we put the website on a special testing domain and walk our client through the site and how to use our quality assurance tool, BugHerd. We provide our clients with a minimum of two rounds of quality assurance feedback before scheduling a launch date.

Our ‘How to implement a bulletproof QA process’ article walks through the details of launching successful websites and web-based applications.

Launch and post-launch

Once all stakeholders have reviewed the website with a fine-toothed comb it’s time to schedule a launch date. After launch, nine times out of ten we book a follow-up project to implement any new features and ideas that might have come up in the quality assurance process. From there, the website moves into maintenance mode, where we make updates on an as-needed basis. For larger websites like Tito’s, we develop intentional maintenance plans to ensure the website is continually evolving.

I can count our failed projects over the years on one hand, which resulted from veering off our processes in one way or another. By documenting and sticking to our processes, we’re able to run a calmer company and ensure happier clients and partners.

Dot All 2019, the official Craft CMS conference, took place September 18-20 at the Phi Centre in Montreal, and Good Work was happy to be a part of it.

In case you don’t know, Craft is Good Work’s CMS of choice. We’ve been using it since its inception in 2012, and recently became a verified Craft partner. Representing Good Work were two of our awesome developers, Jake Dohm and Chase Giunta. Jake partnered with Andris Ševčenko of Pixel & Tonic (the creators of Craft), leading a workshop titled “Modern Web Development with Craft, Vue and GraphQL.” The workshop introduced the Craft community to new methods of tackling complex problems in development, utilizing our favorite javascript framework - Vue.js - and a new feature recently introduced into Craft, the GraphQL API (aimed to intelligently fetch data from Craft).

Not only was the workshop a huge success, allowing our team to share their knowledge with the larger Craft community is always a plus. In addition to the various workshops, Brandon Kelly, the founder and CEO of Pixel & Tonic, kicked off the conference with a “State of Craft 2019” presentation (in which he showcased Good Work!). Below are a few highlights:

• The official Craft CMS plugin store has 627 plugins and counting

• There are currently 28,000 known websites using Craft CMS, a massive usage growth over the past year

• Craft Cloud, a Craft CMS as a service offering, will be released in 2020, allowing authors to create and manage content with their favorite CMS, while simplifying developer's jobs by removing the need to create and manage servers

• Craft 4 will be released in 2020, with improvements focused on accessibility, collaboration, content modeling and author experience. A few additional highlights:
  • Full keyboard control in the control panel
  • Dark mode
  • Alerts for multiple users editing the same element
  • Improved field layout support
  • User-defined index views, with advanced control over what entries you see in the control panel, and how you see them

This year’s conference offered two tracks, one technically focused for developers, and one geared toward business philosophies, content author experience and client interactions. It was not only informative, it provided an excellent opportunity for our team to connect with the Craft community. We enjoyed putting names with faces and speaking with those who create and maintain many of the plugins our team uses on a daily basis. It reinforced our faith in the Craft product and the future of our industry.

We can't wait to be back, and with the 2020 Dot All Conference taking place in Amsterdam, we’re pretty sure our UK team members are just a tad bit excited.

Craft CMS is a fantastic CMS that just got a whole lot easier to use with Gridsome (or any static site generator). The Craft team appears to have noticed the trend of people starting (or hoping) to use Craft as a "Headless CMS." In Craft 3.3 they added an out-of-the-box GraphQL API which is perfect for pulling your content into a static site generator like Gridsome or Gatsby to make Craft CMS Headless.

Let's jump right into how to use the new GraphQL API to integrate with Gridsome.

5 Steps

1. Set up your Craft installation

To use the GraphQL API, you need to have a Craft installation running 3.3+ and licensed as Craft Pro*. If you have a current Craft installation and are running a lower version than 3.3, you can update by changing the craftcms/cms version in your composer.json to "^3.3.0" and then running composer update.

*In development you can use the Craft Pro trial

2. Create a schema

Schemas are the way you can access your Craft data through GraphQL. Each schema comes with an access token, that you provide to Craft with your GraphQL query to identify which schema to pull data from. Each schema has its own permissions set, so you can limit access to types of data based on which schema they're allowed querying.

For this step, head over to Control Panel > GraphQL > Schemas, then create a new schema, give it the proper data permissions and copy the access token.

3. Set up a route to your GraphQL API.

Add the following route to routes.php. This will allow you to send GraphQL queries to example.com/api.

// routes.php
return [ 'api' => 'graphql/api' ];

4. Set up your Craft API as a Gridsome data source

Assuming you have a working Gridsome installation up and running, the actual integration of your CMS data into the Gridsome GraphQL store is extremely simple!

First, you'll need to install the Gridsome source plugin for GraphQL:

npm install @gridsome/source-graphqlyarn add @gridsome/source-graphql

Then, add the following to your gridsome.config.js:

// gridsome.config.js
{ 
 use: '@gridsome/source-graphql',
 options: {
 url: process.env.CRAFT_API_URL,
 fieldName: 'craft',
 typeName: 'craft',
 headers: {
 Authorization: `Bearer $​{process.env.CRAFT_API_TOKEN​}`,
 }
 }
}

This gets us 90% of the way to a working integration, but it still won't work quite yet! You may have noticed the references to process.env variables for our API URL and token. This is what we'll set up in the next - and final - step.

5. Create a .env in your Gridsome project

If you're familiar with Craft, you've seen a .env file before. .env contains all of your "environmental variables": information specific to the environment in which you're working. Gridsome takes this same approach to environmental variables, so we're going to create (or add to) a .env file in our Gridsome project.

# .env - in Gridsome project

CRAFT_API_URL="http://example.test/api"

Now run gridsome develop and you're off to the races! You should be able to query your Craft data from anywhere within Gridsome now. To test everything head over to the GraphQL playground and try sending the following request:

query {
 craft { ping }
}

If everything's working properly, the ping field should return pong.

Congratulations! You have now activated headless mode. If you have any comments/questions don't hesitate to reach out. I also love hearing when my articles were helpful, so let me know if these steps worked for you!

The team at Good Work is no stranger to Craft CMS, and we love highlighting its great features, both from the development and user side of things. One of my favorite features is called Craft CMS Multi-Site, and allows users to run multiple sites from a single Craft installation. With Multi-Site you can share content (and content-types) across multiple websites, while also having site-specific content and content-types that aren't shared. All from a single Craft control panel.

Here are a few quick examples where Craft's Multi-Site feature can be incredibly useful.

Creating websites with the same content structure and different designs

We have a client who owns a few dozen hospitals and walk-in clinics across the Southwestern United States. The hospital websites share the same content structure and functionality, as do the walk-in clinics. However, each has its own logo, branding and color palette. Craft Multi-Site gives them the ability to manage all of that content from a single place, while giving our team the ability to spin up new websites in a matter of hours.

Of course, this isn't just for hospitals. I've seen Craft Multi-Site used for churches, non-profits with self-standing branches and a group of individually branded co-working spaces.

Creating entirely different websites for the same parent company

Large brands, or companies that offer a variety of products, such as a software company, typically have unique websites for each individual product. Managing all of that content from a single place is easy with Craft Multi-Site.

Wildbit, the creators of Beanstalk, Postmark and Conveyor, have done just that. Before switching to Craft CMS each of their websites had its own CMS, but now run seamlessly through Craft Multi-Site.

Multi-Site user management

Craft allows you to configure user permissions for entire user groups (e.g. content editors), as well as individual users, making it simple to allow certain team members to manage different aspects of your Multi-Site setup. A typical setup may have one group of people who can edit Site A, another group of people who can edit Site B, and then a handful of administrators with access to everything. Of course, you can get as complex and granular as needed, but this is a common example of user management setup on Craft Multi-Site.

Whether you run just a few websites - or dozens - Craft Multi-Site provides the features needed to smartly organize and manage all of your content from a single CMS.

You’ve probably heard of the Web Content Accessibility Guidelines (WCAG), a set of recommendations to help ensure your website’s content is accessible to people with disabilities.

Here we'll provide an overview of the WCAG guidelines, why they matter to you and how to best implement them moving forward. To see this in action head over to our OC case study. Meeting WCAG guidelines to make your website more accessible is easier than you think, and will benefit all your users.

WCAGADA508W3C

There’s a lot of acronyms out there, but let's tackle the ones that really matter:

WCAG 2.1

The current version of the Web Content Accessibility Guidelines. They’re published by W3C, the international body who creates web standards. They have three levels:

• A: the bare minimum. If your website is in good shape you’re likely already achieving this level.
• AA: the middle ground. Most companies concerned with accessibility work towards this level, one you should aim for too. In some countries it’s a legal requirement for certain organizations (e.g. government body websites).
• AAA: the most in-depth level. Generally only used for specialist websites that have complex requirements (e.g. sign language translations for audio content).

ADA

The Americans with Disabilities Act, a law prohibiting discrimination based on disability. While it doesn’t explicitly reference website accessibility, a legal precedent has been set that non-accessible websites could be considered discriminatory. There’s an equivalent in UK law called Section 20 of the Equality Act.

Section 508

Law in the U.S. which requires (amongst other things) government websites to be accessible to all, as defined by meeting WCAG Level AA. The European Accessibility Act within the EU is similar to this.

Why bother?

As referenced above, there is a legal case for making your website accessible, but hopefully that’s not your only motivation. In the U.S. alone 12% of the population reports having a disability – over 37 million people. While that number is large, not following WCAG guidelines may create unnecessary obstacles for people that fall outside that category as well. Our default should be ensuring our websites are inclusive for all, without needing further justification. However, there are tangible benefits for businesses who work to achieve WCAG guidelines: your website will be easier to find and use, increasing your audience; you’ll have a competitive edge over rivals who haven’t prioritized accessibility; and your visitors will have an easier path to achieving their goals when they arrive at your website.

But here’s the best part: building an accessible website benefits all users. Despite years of going to gigs – including the infamously loud Mogwai – my hearing is okay (for now). But I still prefer skim reading a transcript over listening to a podcast. You might have perfect eyesight but prefer listening to an audio book. And what if you’re on your phone in bright daylight? Or on holiday visiting a website that’s not in your primary language? You may have bad internet, feel overly tired or are in a rush? The WCAG guidelines make life better for all users in these situations.

So, how do you approach your next web project with an emphasis on achieving accessibility?

Decide early and get everyone on board

At the start of your project decide which accessibility level you’re aiming to achieve (most likely WCAG 2.1 – AA). Accessibility isn’t a line item to tack on at the end of a project, so communicate this goal to all stakeholders from the beginning. It affects all stages of the project, including content creation (using more descriptive link text than 'Click Here'), design (ensuring proper contrast between text and background color) and development (more on this below).

Audit your existing site

If you already have a website then completing an in-depth accessibility audit is a good start, which should include testing real users with ‘assistive technologies’ (like the JAWS screen reader). However, even a quick, simple audit using automated tools will help identify big issues. Wave, Pa11y and Google Lighthouse are good auditing tools, and will quickly scan your website and flag any issues.

Technical implementation details

While some WCAG requirements are tricky to implement (especially for complex components like multi-level dropdowns or carousels), you can make substantial progress relatively easily. Below are a few quick wins to make your site more accessible.

Get the fundamentals right

We wrote about this in 2015 and nothing has changed:

“The magic bullet to a successful digital project is readable content, usable forms and intelligent website structure. Nail these basics and you’ve nailed your digital project, whatever it is."

Use semantic markup and appropriate elements

We have many HTML elements at our disposal. Use them appropriately to give screen readers the best shot at understanding your page structure.

Many elements come with free, built-in accessibility features. Make use of these where possible instead of recreating them with Javascript. A native checkbox input is keyboard and screen reader accessible, offers keyboard events, communicates its state and behaves in a way that's universally understood. It’s now possible to style most native form inputs consistently using only CSS (see WTF, Forms? and Styling a Select Like it’s 2019).

Use just enough ARIA

Using good markup means you shouldn’t have to lean too heavily on ARIA very regularly. For example, using a nav element is better than div role=“navigation”.

A common mistake is using role=“menu” for a navigation list. This was intended for building application menus, not website navigation. Using role=“menu” will require adding a lot of complex keyboard navigation support. An appropriately marked navigation needs no ARIA and can be used with just the Tab key. More on that here.

There are still a few cases where ARIA is useful: we make frequent use of aria-hidden, aria-expanded, aria-haspopup and aria-labelledby.

Ensure headings are in the right sequence

Heading levels should descend in a logical sequence reflecting the depth of the content – one h1 element per page, no h4 before an h3 and no skipping levels.

One way we help enforce this is by ensuring the heading levels we make available to content editors (in Craft, our CMS of choice) take into account the rest of the page content. A common example is a blog post template where the h1 is populated by the post’s Title field, and the body of the post is populated by a Redactor WYSIWYG rich text field. In this case we’d use the redactor config code below to make only heading levels 2–6 available:

{ 
 "buttons": ["formatting", "bold", "italic", "unorderedlist", "orderedlist", "link" ],
 "formatting": ["p", "h2", "h3", "h4", "h5", "blockquote"],
 "toolbarFixed": true
}

Provide good labels to screen readers

A great example of this is a social network link, made up of that network's icon. Sighted users will see the icon and know to click; however, screen readers will only register an SVG icon with no description. To fix this, add a descriptive label and use CSS to hide this from everything except screen readers. Use aria-hidden to prevent the screen reader from getting bogged down on the SVG icon.

/* Html */
<a href="https://facebook.com">
 <span class="u-sr-only">Find us on Facebook</span>
 <svg class="icon icon-facebook" aria-hidden="true">...</svg>
</a>

/* Css */
.u-sr-only {
 position: absolute;
 width: 1px;
 height: 1px;
 padding: 0;
 margin: -1px;
 overflow: hidden;
 clip: rect(0, 0, 0, 0);
 border: 0;
}

Provide useful image alt text (or don’t)

All images should have an alt attribute. If the image is only used for decorative purposes then leave the alt attribute blank. Otherwise, provide a useful description of the image.

In Craft we usually use the asset’s title field for the alt content, and add a note to the field instructions to nudge content editors into making this useful: Recommended image size: 2500 x 975. Double-click on the image to set a title, which should be a short description of the image.

Provide a text version of non-text content

Audio content should have a transcript provided. Videos should include closed captions, have a transcript provided, or both. Wistia, Youtube and other video-hosting providers can offer automated captions, though they’re unlikely to be 100% accurate. Alternatively you can create your own, or pay a third-party service.

In Craft we handle this by assigning three fields to a video asset:

• Video Track: another asset field which accepts a subtitles/captions/description file in .vtt or .ttml format
• Video Track Kind: a dropdown field to choose between subtitles/captions/description
• Video Transcript: a rich text field to enter a transcript in

Our video component then looks something like the image below. If a video transcript has been provided we use the figcaption to link to a basic template which displays the video and its transcript.

<figure>
 <video controls="" playsinline="">
 <source src="{{ video.url }}" type="video/mp4">
 {% if video.videoTrack|length %}
 <track label="English" kind="{{ video.videoTrackKind }}" srclang="en" src="{{ video.videoTrack.one() }}" default="">
 {% endif %}
 <p>Your browser doesn't support HTML5 video. Here is a <a href="{{ video.url }}">link to the video</a> instead.</p>
 </video>
 {% if video.videoTranscript|length %}
 <figcaption>
 <a href="/video-transcript?video={{ video.id }}">Read a text description of the video</a>
 </figcaption>
 {% endif %}
</figure>

The best advice: cheat!

In the introduction we mentioned that some components are tricky to make accessible, like carousels and multi-level dropdown navigation. The quickest fix for this is not using them. For example, carousels have a many well-documented problems, and the best solution might be simply presenting that content in a different way. This is another good example of how ‘designing for accessibility’ is beneficial to all users.

Checklists & tools

• A11Y Project Checklist: a simple, easy-to-digest version of the full WCAG guidelines. This is an excellent starting point.
• W3C ‘How to Meet WCAG’ checklist: a filterable list of all the WCAG guidelines with in-depth descriptions for each, including suggested techniques and what classes as failure.
• Pa11y: a command-line interface which loads web pages and highlights any accessibility issues it finds.
• Wave: a browser extension from WebAIM, which gives quick feedback on a page’s accessibility.
• Google Lighthouse: a Chrome tool which audits performance and accessibility.

Further reading

• Gov.uk ‘Making your service accessible: an introduction’: the UK's government digital service publishes lots of great content about accessibility.
• Accessibility For Everyone by Laura Kalbag: a thorough guidebook that covers high-level background information, to specific, practical implementation details.
• Inclusive Components by Heydon Pickering: a website and book demonstrating accessible implementations of common patterns (carousels, tabbed content, etc.)

---

Hopefully by now you’re convinced of the benefits of having an accessible website. It’s surprisingly easy to achieve most accessibility guidelines, especially with the wealth of tools and resources available. Ultimately, following WCAG guidelines encourages us to make better decisions about usability and will results in all your users having a better experience.

The development phase of your website is complete and you’re ready for launch. However, before going live you need to engage in a thorough quality assurance (QA) process. This should be one of the most fun steps in the launch phase, allowing you to see the almost finished product and ensure it’s ready for liftoff

However, poor planning, or a lack of clarity around your team’s expectations, can lead to delays and budget overages. Entering a project’s kickoff meeting with a detailed timeline and clear communication strategies can solve most - if not all - future issues. Adding a tested QA process will both bolster alignment within your team, and ensure a seamless, painless launch. The following tips will provide you the knowledge to craft a QA process that ensures the successful launch of future web projects.

1. Understand what QA is and isn't.

QA is your opportunity to compare the nearly-finished product to the original goals, design, and functionality, ensuring no details have been overlooked. The two key terms in this phase are functionalities and requirements, which will guide your QA testing as you search for bugs (aka issues, breaks, dead ends). You will test forms, links, slideshows, third-party integrations and videos to ensure they’re working as expected. If your website has a content management system (CMS) you will explore the CMS to make sure all requested requirements and options are available. It’s also recommended to create test entries in the CMS to ensure everything is functioning as expected.

During the QA phase, it’s possible your team could decide on new design elements,functionalities or requirements. This is completely natural now that you’re interacting with the final product. However, this is not the time to make these changes if you have a fixed budget and/or timeline. These potential changes should be recorded during QA and addressed after launch as a follow-up project. Trying to shoehorn changes like this during QA creates unnecessary pressure on your development team and will inevitably create delays. Allowing the product to launch will also provide users the opportunity to provide feedback. Something you assumed would be helpful in QA might not be important once others interact with the product.

2. Pay attention to timeline expectations.

When creating the QA timeline you must be an active partner in setting turnaround expectations within your team. Check your team’s calendars against the timeline for holidays, vacations or busy work periods to make sure a deliverable date is possible, or a turnaround expectation is reasonable. Once the timeline is agreed upon, ensure these dates are placed on your team’s calendars well in advance so everyone can appropriately allot their time during QA periods.

3. Align your team before the QA phase.

QA is a team effort involving all stakeholders that have provided input or need final sign-off before launch. QA can be a tiered approach, assigning certain team members to dig through the product’s functionalities and testing, while others simply click around and review from a macro level. Make sure to designate who will be participating in QA, define their level of involvement and align their schedule with the project’s timeline well in advance of the QA phase.

4. Create clear documentation of bugs during QA.

Before beginning QA decide on a tool that will allow your team to easily record any found bugs throughout the process. This could be in the form of a third-party tool such as Bugherd or DebugMe, that automatically records your browser information, screenshots, and comments. Another option is a simple, internal spreadsheet where your team records bugs and phase-two recommendations.

Regardless of the tool, the key is ensuring your development team is provided a concise list of bugs they can address through collaborative, consistent feedback. Including details such as specific browser information (whatsmybrowser.org), device details (phone, tablet, computer size/type), and screenshots will create a clear picture of each issue and minimize the questions your development team may have. Before passing the information to the development team review the list and remove any redundancies, and make sure all listed issues are easy to decipher.

5. Use your rounds wisely.

Your QA process should include a fixed number of rounds for reviews and revisions. Utilize each round efficiently to ensure you stay on schedule and hit your ultimate launch deadline. The first round should be the most thorough review of the site, leaving no page unclicked and no form untested. Devote the majority of your team’s energy and time to this round. The next round(s) should be used to ensure prior bugs no longer exist and making a final pass at the entire product before approving its launch. Pushing extensive testing to later rounds places undue stress on your team and increases the chance of delays.

QA Checklist

Immediate

• Develop a QA process for your team
• Select QA collection tool

Project Kick-Off

• Set the project’s QA timeline
• Designate team members that will be involved with the project’s QA based on availability, define their level of involvement and add dates to calendars

Pre-Launch

• Make sure each team member is following their QA assignments as they begin testing all links, forms, third-party integrations, videos, CMS, etc.
• Ensure all QA bugs are recorded in your collection tool
• Ensure all phase-two recommendations are recorded in your collection tool
• Review QA list after round one is completed to remove any redundancies, and ensureall necessary details are recorded for the development team
• Begin final QA round(s) to test prior bugs before launch

Post-Launch

• Gather stakeholder feedback
• Plan and estimate phase two recommendations that were discovered during QA.

Outside of general ease-of-use and editing capabilities, it's important to choose a content management system that has the tools and features required for your content editors to maintain an SEO-friendly website.

Craft CMS is used by businesses large and small, from mom-and-pop shops to large brands like PBS, Sonos and Netflix. Its easy-to-use control panel for content editors and elegant templating for developers make it one of the most powerful - and praised - systems on the market.

It’s important your team follows some sort of SEO checklist when designing (or redesigning) your website, and in this article we'll discuss how easy Craft CMS makes that process. If you don't already have a checklist like the one above you can start by downloading the Technical SEO PDF we follow.

Let's get to it.

Title tags and meta descriptions

Using the SEOmatic plugin you can maintain title tags and meta descriptions from a global level down to the entry-level, and everything in between. This ensures you always have fallback content while having the ability to get as granular as needed with title tags and meta descriptions.

There's also a SERP (search engine results page) preview so you can see how your page will show up in search engines like Google.

XML sitemap and robots.txt files

SEOmatic will automatically generate a sitemap for each section of your website in Craft, and allows you to edit the change frequency, priority and more on a section-by-section basis. As an example, here's what the sitemap settings look like for the 'Articles' section on our website.

You also get an out-of-the-box robots.txt file that you can edit and configure to your liking.

Social media card settings

You can maintain social media cards for Twitter and Facebook in the same way you can manage titles and meta descriptions. You can configure them at the global level, but also get as granular as you'd like on an individual page/entry basis. This gives you full control over how your links look when you share them on social media.

Structured data for rich snippets

Structured data allows search engines to gain a better understanding of your content compared to standard HTML tags, so they can rank and present data on your website in unique ways. SEOmatic has dozens of preferences you can configure for your structured data strategy. To learn more about structured data, visit schema​.org.

Ability to easily verify your website

Before you can start using third-party tools like Google Search Console and Bing Webmaster Tools to track the performance of your website in search results, you'll need to verify your website. This is usually done in a more technical way by editing your DNS or uploading a file to your server, but SEOmatic allows you to verify from within the control panel.

Additional features

These are just a few highlights of the many features that come with using the SEOmatic plugin with Craft CMS. Other items worth noting are:

• Managing tracking scripts like Google Analytics and Facebook Pixel from within the CMS
• Controlling site name positioning in title tags
• Local business info for Google's Knowledge Panel like phone numbers, price range and opening hours
• Ability to manage Ads.txt and Humans.txt files

You can learn more about the SEOmatic plugin in the Craft Plugin Store.

1. Set your goals

Websites are rarely made to simply be a brochure anymore. Even marketing websites have multi-layer approaches to user experience to ensure people receive tailored information. With that in mind, setting project goals with your team is the first - and most important - thing you can do. These goals dictate the scope, design and development, ultimately deciding whether the project is successful or not.

Spend time with your team aligning your goals to ensure everything is covered. If you enter into the project with a singular goal (i.e. to sell more shirts) then you probably haven’t invested enough time into this step. Have you considered how important the content management system (CMS) is to your team, and how much time you do/don’t want to allocate to it? Is refreshing the voice or content on your site a priority? Are you wanting to increase blog views and create more blog posts or up your subscription rate? Time spent researching what’s really important within your project will create a positive trickle-down effect throughout the entire process from the start until you complete the project.

2. Understand required integrations

The third-party integrations you need to add to your website can sometimes be the elephant in the room. The worst thing you can ever say in relation to an integration is: “We’ll just figure it out.” If anyone on your team says this stop whatever you’re doing and address whatever "it" is, or set a plan to do so as soon as possible. Even the most straightforward integrations can have unexpected consequences to the timeline and scope.

Determine the required integrations during the discovery phase of the website design process. Explore each one to determine its compatibility with the overall process and seek out any red flags they may cause. It’s also important to consider what limitations or opportunities they add to the overall project in terms of design and expected functionalities. You don’t want to discover during development that the chatbot you signed a year-long contract for isn’t supported by the website's platform. Understanding the required integrations for your website upfront will help keep your project on track.

3. Set clear responsibilities

Website development requires many steps - and a variety of expertise - as you move from discovery to design to development. Once you’ve created your team of key stakeholders, designers, website developers and copywriters, schedule a kick-off meeting with everyone involved to begin the project on the right foot. It’s important the project begins with everyone aligned on their responsibilities, as well as when and where they will engage in the process. You can document this by creating a RACI chart, spreadsheet, or document outlining everyone’s name, roles and responsibilities. If doing the latter, include details like contact information and time zones that can be referenced along the way.

4. Create a hub for organizing everything

If you’re following even half of these tips you’re going to end up with lots of documentation, in addition to the many files that accompany these types of projects. Documentation is only useful if it's organized and easy to locate. Find a tool that allows subfolders and can house multiple kinds of assets (i.e. Google Drive or Dropbox). Visit this hub on a weekly basis to organize folders as new documentation is created, allowing easy navigation by any member of the team.

If you’re using Trello or JIRA utilize quick links to the documentation stored in this hub, or create a shared document with quick links to store things like wireframes, designs and notes. This allows for easy access throughout the entirety of the project. What is important to the design team may not be to the development team, so creating multiple versions of this might be necessary.

5. Set CMS and functionality expectations during discovery and design

A website is much more than a pretty, interactive picture. It has goals to meet and needs to work for your team - not against it. Setting CMS and functionality expectations well before the development phase will ensure the final product is everything you hoped for. Determine what options you need the CMS to provide you, such as having the ability to insert links in a text field, or having both right and left justification on that text overlay. For functionality, understanding how a design is to be interpreted is critical. Is a block supposed to animate or hover, or what is the default order for a blog listing page?

Both of these pieces will likely be in flux during the early part of your project, so it’s important to set a documentation method to record and tweak these during the process. If you wait until the end to try to capture these it becomes overwhelming, and things will inevitably get missed. It’s also important to share expectations with the entire team to ensure your goals are both attainable and being fulfilled along the way. These two pieces are key to making sure there aren’t any unwanted surprises during QA.

6. Transparency in communication

A website development project can have many cooks in the kitchen, and it’s easy for each micro team to become siloed. As a successful project manager, it’s imperative to keep communication flows open between the discovery, design and development teams throughout the process. Decisions made in discovery will have a significant impact on development and should be made with everyone’s input considered. As designers create ideas for functionalities or animations, include the front end developers to help brainstorm as they may offer solutions to bring their ideas to life. Open communication and problem-solving between the designers and developers will help ensure everything remains within scope, allowing each team to flag issues before it’s too late.

7. Clean design handovers

A thorough and well-prepared design handover is the best way to ensure that the site you see in QA is the site you envisioned in design. Our ‘How to provide a successful design handover’ resource is a must-read when creating a bulletproof checklist for your design handovers.

8. Stick to the plan

Successful website launches are carefully planned from the onset and executed exactly as planned in discovery. Website projects are fraught with opportunities to derail, and it’s your job as the project manager to ensure everyone stays focused and on course. Between the visions of your stakeholders, designers and developers it's easy to add additional features and functionalities and make continual design changes throughout the process. Be sure your teams stick to the agreed-upon number of revisions and always get revision approvals in writing.

For team members that find this too constricting there is another way to communicate this information that may feel more natural. A website by nature is evolutionary and meant to be iterated upon. Your initial website launch is getting your product out in the public eye. The second it launches it’s prime for iterations. As your team develops new ideas record these in a 'Phase II' document. This allows everyone to be heard and ensures no good idea gets ignored throughout the rush of the process. Once the site is launched the team can reconvene on these items to prioritize and plan their execution.

9. Plan for QA

When you begin a website project the Quality Assurance (QA) phase feels incredibly far away and becomes an easy afterthought. QA is one of the most important phases of the project and becomes easily derailed by a lack of planning. This phase should involve your key stakeholders and decision-makers, as well as anyone else vested in testing the site's expected functionalities. These people typically have very busy schedules and will need advanced notice to allocate an adequate amount of time in QA so no detail is missed.

When scheduling the timeline during discovery set benchmarks for QA, and alert your testers so they can schedule a time to participate in QA. Choose a QA tool that best fits your team’s work style. Some people prefer a web based QA project management tool - like Bugherd or Pastel - while others prefer a spreadsheet. Whatever the case, there is a lot of web project management software out there to choose from. We also recommend providing checklists to ensure they’re testing only what's needed so they don’t feel overwhelmed.

Our ‘How to launch high-quality web projects’ resource explores QA in-depth, setting you up to create a valuable checklist before entering this stage.

10. Speak human to everyone involved

Website projects are not easy, but it doesn’t mean they can’t be fun, creative and rewarding. Things will inevitably arise that create bumps along the way, such as personal issues and differences of opinion. Understand the team is made up of humans dealing with their own personal and professional stressors, and make it your mission to keep everyone positive and in communication. Remind everyone of the important partnerships created along the way, and keep the eye on the prize of collaborating to create something awesome.

The Problem

I have a contact form that when submitted emails the form's details and saves them to a database. I also need to add the submitted email address to a Mailchimp list.

The Idea

Create a hidden form that grabs the input from the form being completed. When the visible form is submitted, use jQuery to submit both forms.

Implementation

The HTML...

    
      <form id="contact" action="/some/action.php" method="POST">
  <input type="text" name="firstName" />
  <input type="text" name="lastName" />
  <input id="emailInput" type="email" name="email" />
</form>

<form id="mcForm" action="" method="POST">
  <input id="mcEmail" type="email" name="email" />
</form>
    
  

Always grab your DOM element

First, we're going to grab our form. There are different ways of doing this, but we gave the form an ID, so let's grab that. Once we have our form we need to write a function for when the form submits. The first thing our function should do is prevent the form's default action. We're then going to assign variables to the email input fields we need. To complete this function we'll assign the contact form email value to the Mailchimp form email input. Finally, create a callback function that will submit to Mailchimp.

Note: .val() is a jQuery method that will return the value of that element if it has one. .val( value ) is a jQuery method that will assign whatever value is.

    
      <script>
  $('#contact').submit(function(event) {
    event.preventDefault(); 

    // the value of the email input 
    contactEmail = $('#emailInput').val(); 

    // the DOM node of the Mailchimp input var
    $mcEmail = $('#mcEmail')
  
    // assign contactEmail to $mcEmail 
    $mcEmail.val(contactEmail); 

    // callback function where all the magic will happen 
    submitMC();
  }
</script>
    
  

Meat and Potatoes

Our callback function will submit the Mailchimp form. But like before, we need to assign some variables and prevent the form’s default action. Then we'll perform an asynchronous HTTP (Ajax) request using the jQuery method, .ajax(). The Ajax method will take several options/settings. After our successful AJAX request we'll submit our Mailchimp form, and create another callback function to submit our original contact form.

Note: To get the form's action URL we will use the jQuery method .attr(attributeName). This will return a string. .serialize() is a jQuery method that will encode form elements as a string for submission. The dataType: "jsonp" is specific for Mailchimp and has to do with the callback function at the end of the action URL.

    
      <script>
  function submitMC() {
    var that = this;
    var $mcForm = $('#mcForm');
    
    $mcForm.submit(function(event) {
      event.preventDefault();
      var $form = $(this);
      var url = $form.attr('action');

      $.ajax({
        type: "POST",
        url: url,
        data: $form.seralize(),
        dataType: "jsonp",
        success: function(data) {
          that.submitContact();
        }
      });
    });
    
    $mcForm.submit();
  }
</script>
    
  

Submit the Contact Form

Note: We're using .unbind( event ) to remove the previously attached event listener from our original function.

    
      <script>
  function submitContact() {
    $('#contact').unbind('submit').submit();
  }
</script>
    
  

Mailchimp Specifics

The forms action URL needs some specific parameters, and the final segment should be /post-json instead of simply /post. The specific parameters are the Mailchimp user ID and the list ID where the email address is being submitted. Also, add c=? to the end of the URL, which pertains to Mailchimp's callback function. The end of the action URL should look something like this:

/subscribe/post-json?u=XXXXXXXXXXX&id=XXXXXXXX&c=?

Follow Consent Rules

Finally, we need to add a checkbox confirming the user's consent to add their email address to our Mailchimp list, and adjust our contact form submission function to check whether that value is true or not.

    
      <form id="contact" action="/some/action.php" method="POST">
  ...
  <input type="checkbox" id="subConfirmation" name="subConfirmation" value="newsletter"/>
  ...
</form>
    
  

Now let's update the original contact submission function to check if the user consented.

    
      <script>
  $('#contact').submit(function(event) {
    event.preventDefault();
    var isChecked = document.getElementById('subConfirmation').checked;
    if (isChecked) {
      // if true, run our Mailchimp stuff
      var contactEmail = $('#emailInput').val();
      var $mcEmail = $('#mcEmail')
      $mcEmail.val(contactEmail);
      submitMC();
    } else {
      // the user hasn't given consent, just submit the contact form
      submitContact();
    }
  }
</script>
    
  

Now we have a contact form with a consent input, that when checked will also submit the user's email address to our Mailchimp list!

Creating an API can be tricky. You have to install the Element API plugin, configure it and set up your endpoints. Not to mention that if you're not as familiar with PHP it can be difficult to figure out how to query for what you need!

On the other hand Twig APIs are easy to create and built in a language you already know! This type of API doesn't work for every scenario, and it can feel a bit 'hacky' at times, but for simple APIs Twig is a great solution.

Basic API

So, how should you go about creating an API in Twig? Since Craft allows users to hit Twig templates directly by going to their file path, all you need to do is create a Twig file.

Basic Example

For a super simple example you can create a Twig file templates/api/entries.json with the following contents:

{# templates/api/entries.json #}

{% set entries = craft.entries.all() %}

{{ entries | json_encode | raw }}

In this example we're querying for all our entries and encoding the results of that query to be JSON, using raw to allow HTML characters.

This is probably an oversimplified example, because this method doesn't return all of the fields on each entry. Fields like 'assets' and 'entries' have to be queried for, and won't be returned from this basic API. But it's a great starting point, and can work for very basic scenarios.

Note: This is a JSON API, but it could be any type. You could manually build out XML or another data type (and I have), but since JSON is the most popular data type for APIs we'll be returning JSON.

API with Params

In our basic example the API grabs all entries, but that isn't a very common use-case. A much more common example is getting all entries from a certain section. In the following example we'll add the ability to query for entries in a certain section, and limit how many entries we return.

{# templates/api/entries.json #}

{% set request = craft.app.request %}

{% set section = request.getQueryParam('section') %}
{% set limit = request.getQueryParams('limit') %}

{% set entries = craft.entries.section(section).limit(limit).all() %}

{{ entries | json_encode | raw }}

Alright, let's look at what we did above:

• We're defining 'section' and 'limit' variables based on query params. This means that if someone visits example.com/api/entries.json?section=blog&limit=5 then 'section' will be set to 'blog' and 'limit' will be set to 5.
• We then pass those variables into our 'entries' query, and return the 'entries' query.

Note: When you call getQueryParam if a param with that name doesn't exist, it returns null. This is convenient because it means if you hit our endpoint without a 'section' or 'limit' param the API will still work and return all entries with no limit.

Adding Authentication

Sometimes the data you want to expose shouldn't be available to just anyone. In this case we want to add a level of authentication to make sure the user is logged in.

Since the request to our Twig endpoint will be made in the same session as our normal pages we can use the currentUser variable to determine whether the user making the request is logged in or not.

{% if currentUser %}
 {% set request = craft.app.request %}

 {% set section = request.getQueryParam('section') %}
 {% set limit = request.getQueryParam('limit') %}

 {% set entries = craft.entries.section(section).limit(limit).all() %}

 {{ entries | json_encode | raw }}
{% else %} 
 {% exit 401 %}
{% endif %}

In the above code we check to see if there is a currentUser. If so we return the entries like normal; if not we throw an error. You can customize this error response, but I'm throwing a '401 error' meaning the request was unauthorized.

Note: This is a very crude authorization system with very mediocre 'error' reporting (throwing a 401 template). For something robust I would lean on a more full-featured API system.

Real World Example (with SmartMap)

Finally, here's a slightly more realistic example I've previously implemented in production!

Below is a Twig API that takes two parameters: a search value and a limit. It will use SmartMap (todo: link) to search for locations nearest to the search string, order them by distance, and return them to us in JSON.

{# Get our paramater values #}
{% set search = craft.app.request.getQueryParam('search') %}
{% set limit = craft.app.request.getQueryParam('limit') %}

{# Build our query, based on parameters #}
{% set locations = craft.entries.mapAddress({ target: search }).orderBy('distance').limit(limit).all() %}

{# Create an empty array to fill with our data #}
{% set locationsArray = [] %}

{# Loop over our items and fill our empty array with the necessary data #}
{% for location in locations %}

 {# Choose the properties that we need from our API #}
 {% set locationsArray = locationsArray | merge([{
 title: location.title,
 url: location.url
 }]) %}

{% endfor %}

{# Output JSON encoded array of locations #}
{{ locationsArray | json_encode | raw }}

I like this example because it shows all the steps we generally need to build the necessary data:

1. Get our parameters (if any)
2. Build our query based on parameters
3. Create an empty object to fill
4. Loop over our items and fill our empty array with the necessary data
5. Output our data as JSON

Conclusion

Does this replace the Element API plugin, Craft QL, or creating your own API endpoints? No, definitely not. Those are all powerful tools that do more/better than this method. However, this method is great for a simple API, or when you've already figured out how to query for something in Twig and don't want to convert that code to PHP. Use it in good health at your discretion!

Heads up! This article was written in the Spring of 2019. Check out Part Deux for a more up-to-date list.

The Craft Plugin Store recently hit a major milestone, surpassing five hundred third-party plugins (over 600 as of September 2019) created by Craft's thriving community of developers. Plugins allow you to extend the core functionality of your Craft website, integrate with other platforms like Mailchimp, Salesforce and PayPal, or even get your own Happy Brad dashboard widget if you're into Craft community inside jokes.

As a fun exercise we asked each member of our development team to select their top Craft CMS plugins. Here's the list in alphabetical order.

Embedded Assets

"The Embedded Assets plugin lets the client add YouTube/Vimeo videos, Instagram photos, Twitter posts and more to Craft’s Asset Manager, treating them as first-class assets."

— Chase Giunta

The Embedded Assets plugin allows you to add videos, maps, social media content, etc. to your website as easily as uploading a photo. It's great for websites requiring integration with numerous embeddable platforms. As a bonus the plugin also adds the embeds to your Asset Library.

Learn more about the Embedded Assets plugin »

FeedMe

"FeedMe is an incredibly well-thought-out and battle-tested plugin for importing your data. Whether it's importing data from your old CMS, or sharing data across Craft installations, FeedMe gets it done."

— Jake Dohm

In addition to using FeedMe for initial data imports and sharing information across Craft installations, we also use it to sync websites with other web services like MLS for real estate projects, Shelby Arena for churches, and much more.

Learn more about the FeedMe plugin »

Linkit

"This plugin is a true gem for content editors and developers alike. It creates a field in the CMS for content editors to link to custom URLs, other entries on the site, images, PDFs and even social media. It gives content editors tons of flexibility without the risk of breaking anything. Developers can set it and forget it."

— Jeff Irwin

We recently used this plugin for a set of homepage call-to-action buttons, linking to a variety of entries, videos and files. The Linkit plugin allows the content editor to link to all of those entries using a simple, streamlined workflow in Craft's control panel.

Learn more about the Linkit plugin »

Retcon

"Retcon lets us modify HTML content - typically generated by rich text fields - from within Craft CMS. We can add classes to elements, extract nodes or include srcset parameters to inline images."

— Chris Rowe

We use this plugin all the time, especially when the design dictates specific words within a heading to be colored differently, or use a different artisanal font. For content editors we create a Rich Text field with a simple 'Bold' button, then in our template we can swap out the <strong> tag for something like <span class=“font-serif text-green italic”> when using Tailwind.

You can see this in action on the 'Locations' page on the DEC @ Redbird website, where the heading utilizes two colors.

Learn more about the Retcon plugin »

Super Table

"Not the most glamorous plugin, but a workhorse we use on every project. Ensuring Craft is a pleasure to use for content editors is super important to us, and Super Table allows us to achieve that."

— Gavin Platt

Super Table is a Craft CMS plugin that allows you to create powerful, tabular content on your website, while utilizing existing Craft field types like assets, categories and dropdowns, rather than a simple text field.

Learn more about the Super Table plugin »

Typogrify

"This plugin is great for web typography. It handles widow protection, forced internal wrapping of long URLs and email addresses, character replacement, truncating and so much more. A truly must-have plugin for any Craft CMS installation. Another gem from nystudio107."

— Steve Sharpe

This plugin makes your typography look good across all screen sizes and devices, ensuring typographic best practices like forcing smart curly quotes and apostrophes and correcting dreaded "widows."

Learn more about the Typogrify plugin »

Happy birthday, Good Work. The big 5!

I don't know how many times I've read our previous birthday messages in the last few months, but it's a lot. I love looking back and reading old birthday posts to see the progress we've made. This year isn't just a birthday, but a giant milestone, and we couldn't have done it without the amazing team, clients and partners we've built over the years.

We're now a team of nine web developers, designers and project managers scattered across the U.S., England, and France, with our home office located in Dallas, Texas. We added a few new faces this year, too. Jake Dohm joins us from North Carolina, and Grant Abston became our newest team member out of Abilene, Texas.

Some of you might know Jake from DotAll, the official Craft CMS Conference, and TriangleJS, a 2,600+ member monthly JavaScript meetup in the Raleigh-Durham area that he co-organized. He's a talented developer and has been a great addition to the team.

Grant joins us as our Client Services Manager and will head up our new office in Abilene, Texas. This is where I started my first web agency in 2007 while at ACU, and I've been itching to open an office there ever since. Small Town Revival is real in Texas, and towns like Abilene need local access to the high-quality web services found in big cities like Dallas.

While we've experienced new changes, some things have stayed the same. We've continued to hone in on our focus and streamline our process around it.

As we have since 2014, we've continued to grow our strategic partnerships with design and creative agencies around the world, helping with everything from web development maintenance of existing websites to developing websites and other digital products for their clients. This year we added quite a few to that list, including 214 in NYC and Canales & Co. in Austin.

We're also working directly with more brands across the U.S., like Applause, DPR Construction, and Heartwork, that use Craft CMS, our preferred content management system.

Since 2012 Craft CMS has rapidly increased in popularity and adoption. Craft's modern approach to content management, and extreme design flexibility has garnered high praise from both developers and content editors. It offers users an expanding roadmap of modern features and has a thriving community of developers.

We've been using Craft CMS since day one, and in the last year have started to fly the Craft flag more publicly than ever. In November we were selected as one of the first official Craft CMS Development Partners. We dusted off the blog and are writing about Craft on the 1st and 15th of every month, and have introduced a once-per-month email with helpful articles and resources for people who manage and make websites in Craft CMS. We're excited about the future of Craft and are doing our part to grow the platform through our agency partners and direct brands.

We've continued to develop and tweak our internal processes to better serve our clients, resulting in an ever-growing "Playbook" for our team. Our Director of Strategy, Ariel, completed the LT10 Digital Project Management Apprenticeship in the Fall, and I'm getting notes like this from clients more often than not:

"The day we briefed with Ariel I told our team, 'we need to be buttoned up like that in our process!' Since then I’ve been digging through resources trying to find ways to get more legit."

It's been an amazing five years, to say the least, and I'm looking forward to continuing to slow down, simplify, and get better at what we do every day. A huge thanks to our entire team, clients and partners, we couldn't have done it without you.

Read our previous birthday messages:

• 4 years of Good Work
• 3 years of Good Work
• 2 years of Good Work
• 1 year of Good Work

This article is about update your website to Craft 3. If you're looking to upgrade to Craft 4 you should read Update Craft CMS 3 to 4.

Since 2012 Craft CMS has rapidly increased in popularity and been adopted by an ever-growing list of household brands. Craft's modern approach to content management, and extreme design flexibility, has garnered high praise from both developers and content editors. It offers users an expanding roadmap of modern features and has a thriving community of developers.

Rapid growth in popularity also means rapid growth in product maturity. In April 2018 Craft launched version 3 and announced the end-of-life dates for Craft 2 in early 2019. Now that the Craft 2 end-of-life date has come and gone, it is important to upgrade your Craft CMS website now rather than waiting.

What does Craft 2 end-of-life really mean?

As of January 2020, Craft 2 is no longer marketed, sold or maintained by its creators. Craft 3 is already on the market and Craft 4 is in the works, so continuing to maintain an old version doesn’t make sense. So, straight from the horse’s mouth:

• Craft 2 bug fixes were supported through January 31, 2020. As of January 31, 2020 Craft is no longer fixing issues that creep into the software.
• Important Craft 2 security fixes will be supported through January 31, 2021. After January 31, 2021 Craft will no longer address security issues and vulnerabilities that creep into the software.

New features and benefits of Craft 3

Craft 3 is packed with new features and benefits that can be easily introduced into your website once the upgrade is complete. Outside of its increased security, below are some of our favorite features that both content editors and website owners love.

Speed and performance

The new version is three times faster than its old self, a big win on the front-end for search engines like Google who analyze website speeds for page rankings. It also means the Control Panel will respond much quicker for content editors and website owners.

Image editing

You can now edit images in Craft and set focal points from within the Control Panel, eliminating the need for external image editing tools or software to crop, flip or rotate images.

Multi-Site Manager

The new Multi-Site Manager allows you to manage multiple websites through a single Craft 3 install, eliminating the need for numerous site logins for content edits. Your websites can share both channels and content types, or even have their own settings within the same Craft install.

Craft has also introduced a new plugin store, a soft delete feature that allows you to move items into the trash rather than permanently erasing them, and many other new and improved features in Craft 3.

Third-party Craft plugin updates

Craft has committed to supporting bug and security fixes through January 2020 and 2021, but third-party plugin developers will decide their own end-of-life policies. Most plugin developers have begun moving to Craft 3, although some will continue to provide minimal support for existing Craft 2 plugins. Our team of developers at Good Work believe this is the most important reason to upgrade to Craft 3 sooner than later.

While plugins were previously managed and installed through code, Craft has released a new Plugin Store, rich with new integrations and tools to make your website run as smooth as possible; all managed through the Control Panel.

Scope and schedule your Craft 3 upgrade

Now that the end-of-life date for Craft 2 has passed, and depending on the size and complexity of your website it’s good practice to start planning the upgrade process as soon as possible. Below are some helpful items to think through when estimating the time it will take to upgrade to Craft 3:

• Make sure your server meets the Craft 3 requirements, which are slightly different than Craft 2.
  
• Upgrade your website and plugins to Craft 2.6.2788 or newer before moving to Craft 3.
• Audit all third-party plugins to make sure they have a Craft 3 version available. If they don't, contact the plugin developer to see if and when their plugins will be available for Craft 3. If they don't plan to upgrade their plugins, you'll need a different upgrade path for that particular feature of your website.
• Check to see if you have any custom plugin(s) created specifically for your website. If so you'll need to update those custom plugin(s).
• Review the instructions on Craft's website for performing the Craft 3 upgrade.
• Once you have a good idea of the time and effort it will take to upgrade your website be sure to schedule the upgrade as soon as possible now that the Craft 2 end-of-life date has passed.

Further details can be found in the Upgrading from Craft 2 section of the Craft 3 Documentation. Feel free to reach out if you have any questions.

One of the unique challenges of using Vue JS with Craft CMS is how you get your data from Craft into Vue. Vue's whole model of reactive UI is based on having your data in Vue, and your markup reacting to changes in that data automatically. That means Vue must "own" the data required for your templates and components. But, if your data lives in Craft, how do you get that data into Vue?

There are multiple ways to tackle this problem, and choosing the best way depends on how your project is structured. If your project is a Single Page Application (SPA) you'll (most likely) need to create an API, and make HTTP requests to your API to get your data. But, if your project is a "traditional" server-side rendered website, then creating an API and delaying the render of your markup by waiting for an HTTP request to finish is usually not the best idea.

In this article, we'll cover two ways you can pass your data into Vue using just Twig templates and Vue components.

Method #1: Passing your data into a component using props

Vue components have the ability to receive external data using props, which is convenient when using Vue components on your Craft site. Using this pattern allows you to pass your data from Twig into a component, whether it's an object, array, string, or anything else. Here's an example:

<!-- page.twig -->
{% set fruits = ['apple', 'banana'] %}
{% set fruitEmoji = { 'apple': '🍎', 'banana': '🍌' } %}

<emoji-fruit-component 
 :fruits="{{ fruits | json_encode | raw }}"
 :fruitemoji="{{ fruitEmoji | json_encode | raw }}">
</emoji-fruit-component>

/* page.js */
// create a component, and accept our data with props

Vue.component('emoji-fruit-component', {
 props: ['fruits', 'fruitEmoji'],
 template: '...'
})

In the example above, we create two sets of data within our Twig templates: fruits (an array), and fruitEmoji (an object). Then we pass that data into our Vue component using props. Then in our JS, when we define our Vue component, we accept fruit and fruitEmoji both as props. Now the fruit and fruitEmoji data will be accessible within our Vue component.

Tip: Use the json_encode filter to escape your data and make it JS-readable, then use the raw filter to allow HTML entities so characters like quotes are printed correctly.

Method #2: Attaching data to the window, then loading it into Vue

Another way to pass your data into Vue from Craft is to assign it as a global variable in JavaScript, then load that data into your Vue component or instance. Consider the following example.

<!-- page.twig -->
{% set fruits = ['apple', 'banana'] %}
{% set fruitEmoji = { 'apple': '🍎', 'banana': '🍌' } %}

<script>
 window.craftData = {
 fruits: {{ fruits | json_encode | raw }},
 fruitEmoji: {{ fruitEmoji | json_encode | raw }},
 }
</script>

/* fruit-page.js */
// load the data into your root Vue instance
new Vue({
 el: '#vue-app',
 data: window.craftData
})
// load the data into a single Vue component
Vue.component('emoji-fruit-component',{
 template: '...',
 data() { return window.craftData }
})

Let me explain what I'm doing in the examples above:

• First we create an object (craftData) that is attached to the global window object (which is globally available to all scripts).
• The craftData object contains any data that we need access to in Vue (or a specific component).
• Then when we instantiate our Vue instance (most likely in a JS file), or component, we tell it to pull the craftData object into our Vue instance as local data.

How to choose which method to use

Now you know two methods to accomplish passing your data into Vue, but which one should you use? Well, it depends.

Here are a few thoughts to help you decide which method to use:

• If you need your data in the root Vue instance (not a component), you'll need Method #2, because the root Vue instance cannot accept props.
• If you're not including the Vue template renderer in your bundle, you'll need to use Method #2. If you're unclear on what this means, check out this article on Avoiding DOM Templates: https://vuejsdevelopers.com/2017/09/17/vue-js-avoid-dom-templates
• For any other scenario, I'd generally reach for Method #1, because to me it seems simpler and cleaner.

Real world examples

The examples that we looked at above are using hard-coded data, but on your website you'll generally be pulling data from Craft so I wanted to provide some more relevant examples.

Slider (Method #1)

{% set images = [] %}
{% for image in entry.images %}
 {% set images = images|merge([{
 url: image.one.url,
 alt: image.title
 }]) %}
{% endfor %}

<vue-slider :images="{{ images | json_encode | raw }}"></vue-slider>

Testimonials (Method #1)

{% set testimonials = [] %}
{% for block in entry.testimonials %}
 {% set testimonials = testimonials|merge([{
 quote: block.quote,
 name: block.name 
 }]) %}
{% endfor %}

<testimonial-slider
 :testimonials="{{ testimonials| json_encode | raw }}"
 title="{{ entry.title }}">
</testimonial-slider>

Blog post (Method #2)

{% set entries = craft.entries.section('blog').all() %}
{% set posts = [] %}
{% for post in entries %}
 {% set posts = posts|merge([{
 url: post.url,
 title: post.title,
 content: post.content
 }]) %}
{% endfor %}

<script>
 window.craftData = {
 posts: {{ posts | json_encode | raw }}
 }
</script>

We were recently scoping out a website redesign project in Craft CMS with one of our design agency partners. By no means was it a large website, but after going down the traditional route of defining the different templates that would need to be designed and developed we realized we needed to go back to the drawing board to stay within the client's timeline and budget.

Here are the templates we initially defined:

Page	Template	Craft section type
Homepage	Unique	Single
About	Unique	Single
Team bio	Unique	Structure
Capabilities	Grid	Structure
Capabilities detail	Unique	(Generated by Capabilities channel)
Process	Grid	Structure
Process detail	Unique	(Generated by Process channel)
Clients	Grid	Structure
Contact	Unique	Single

As you can see above, taking a traditional approach to scope out a project like this one would require 7 to 9 unique templates to build out the website. This particular client did not have the time or budget for this approach though, so we needed to try something else.

After a quick brainstorming session with our design agency partner, we landed on a modular approach that would be incredibly straight forward to develop in Craft CMS and would allow the content editor a lot of flexibility.

The idea was that we audit the content for the website to come up with a set number of modules to help build out a Master Template in Craft CMS, rather than a bunch of different unique templates for each page like in the table above. We'd make use of Craft's Matrix Field to allow the client full control of which modules they use on each page and in what order. This would all be done in one single Structure section type that we would call Pages.

With this approach, the client could easily build out pages in a unique way based on the content and the modules available to them as well as drag and drop their own taxonomy using the out of the box functionality that comes with Craft's Structure section type.

Lastly, they could build out and manage their own primary navigation with the Navigation Plugin.

How snazzy!

After the content audit, we came up with 14 different modules to build out the Master Template. We whittled this down even further by building out module configuration fields in Craft, but here's the full list for documentation's sake:

• Hero Module
• 3-Column Listing
• Centered Text
• 2-Column Text
• Client Testimonials
• 1/3 Image + Text
• 1/2 Image + Text
• Client Logo Grid
• Full-Width Image
• Full-Width Video
• 5-Column Listing
• Subdivision Toggle
• 1/2-Width Graphic + Text
• Contact

Using the Master Template approach, a content editor is able to create pages using any or all of the above modules in any order they'd like.

The end result was a single Structure section type powered by one Master Template with 14 optional modules for all types of content. Here's our updated table:

Page	Template	Craft section type
All pages	Master Template	Structure

Of course the flexibility you provide the content editor can vary. In this case we gave full flexibility to build out any page with any module, but you could still save time and money with a version of this approach while still having multiple section types and perhaps only allowing certain modules per sections, etc, to help put constraints on the content entry.

Over the years we’ve developed and maintained dozens of Craft CMS websites. Sometimes we’re brought into the initial development phase and are able to create them from scratch, but more regularly we’re brought in post-launch as a company outgrows its existing development partner or their needs change. This happens for a number of reasons, but the most common scenarios are:

1. Your Craft CMS site was created by a smaller, sometimes 1-person shop and your growing online initiatives outgrow the preferred working style or available capacity.
2. The company that built your Craft CMS site specializes in start-to-finish website design projects and strategically chooses to stay away from support and maintenance work.

In both scenarios, it’s difficult to maintain websites after launch while juggling larger design and development projects if you don’t have an intentional plan in place. We’ve experienced this firsthand and it wasn’t until we developed our maintenance plans a few years ago that we figured out how to manage ongoing support and maintenance projects successfully.

In this blog post, I'll explain the issues to solve in order to develop a website maintenance plan that scales and works for the long haul.

The first issue is the ability to fit small support projects and regular updates into your work schedule without derailing larger start-to-finish projects. At Good Work, at any given time each member of our development team could be on a 4, 6, or 8-week development project while tackling a handful of support projects (typically 1-8 hours) in parallel. This works alright until you get to the end of a larger project and realize you’re quite a bit behind from the context-switching required for the smaller projects. We tried a few things here: one person on website maintenance for set hours per month, week, etc., neither of which seemed to fully solve the problem. In the summer of 2017, we made the decision to start building a full-time maintenance team for the ability to handle support in parallel to larger projects without the issue of context switching and project derailment.

The second issue is that support and maintenance projects have the same overhead needs, just in smaller intervals, and should be treated the same as larger projects. They still need to be estimated, they still need kick-off calls and timelines, and so they should be split out into their own projects rather than all falling into a generic “Website X Support” in your project management and time-tracking tools. This problem was easier to solve, and more of a mindset change than anything else. All projects, whether 30 minutes or 12 weeks, go through our project onboarding process to ensure they’re clearly defined, estimated, and have a set timeline.

Another requirement to creating a good plan is that whether you’re a team of one or a team of one hundred, you should have a shared code and deployment convention so that anyone can hop in and understand how to set up and maintain the website with as little hassle as possible. At Good Work, we have a starter system as our baseline Craft CMS installation that we use for all websites that we create. For the websites we take on in a maintenance capacity we transition what we can into our convention and document anything out of the ordinary to streamline future development.

Lastly, your maintenance plan requires a significant amount of ongoing communication with the client. There are always bug fixes, new features, and CMS updates being prioritized and re-prioritized on a regular basis depending on the volume of work. What’s worked well for us is a combination of quick weekly status calls (sometimes even daily depending on the volume of work), monthly prioritization meetings, and a shared Trello board for progress transparency and project management.

In summary, developing a good support and maintenance plan is an important part of the web as a whole and can be done successfully with a good process in place. For our team that means:

• A full-time team to manage all website maintenance services
• Treating maintenance projects the same as larger projects
• A shared code and deployment convention across all projects
• Regular communication and transparency of work-in-process

By creating an intentional process around your maintenance plan you can maintain existing Craft CMS projects with the same quality, efficiency, and care as new builds in the long term.

You can learn more about our maintenance plans at: simplygoodwork.com/maintenance

It’s hard to believe this is the 4^th Good Work birthday message. This time last year we went all in on being the development team for design agencies, and over the last few days, I've reflected on how we've done that as well as a few other highlights from the past 52 weeks.

Spring

We started off the year launching quite a few websites, and at the end of March, we launched The Good Bracket, a fun little March Madness bracket we created for our clients and other friends in the digital community. I spoke at the ACU CEO Series for their School of Business, followed by a two-week retreat to England. It's bad luck to go a year without a pint from The Kean’s Head, so I went ahead and took care of that early. In May we began work with Mizzen+Main, an online men’s clothing brand that we now manage and maintain on an ongoing basis.

Summer

Leading into summer Chris and Steve began working with Bestow, a startup down the street from us in Dallas turning life insurance on its head. We worked alongside their design team developing the front-end of their React applications and their marketing website. In June we did an ATX tour, chatting to potential clients and telling our story. Things continued to get busier and busier and in late July we hired Ariel, our first full-time Studio Manager, and to help with the growth we made an over the top internal book called The Playbook to streamline how we operate, manage clients and fill our pipeline.

We closed out the summer by having the whole team out to Durango, Colorado where we ate, drank, tubed, and talked strategy.

Fall

In September Chase and Jeff joined as the 7th and 8th members of our team. Ariel continued to step up our client services game and our development team spent the majority of the Fall deep in client projects. Steve launched our first iOS application and we began ideating on productizing websites for smaller markets. We partnered with ACU to help launch their Startup Madness event, and The Community Foundation of Abilene to create a website for their Open Road Series, an event we're proud to have joined the ranks of our growing list of sponsorships.

Winter

Leading into the holiday break we launched Hatch, a new productized web design service for smaller markets that feels more like a fully custom website than Wix or Squarespace. For more information, you can read the Hatch write-up in Dallas Innovates.

The new year started off more exciting than ever. Boots and Gavin launched Criquet Shirts and we started new relationships with companies like Freeman, Frito-Lay North America and Mi Golondrina.

---

Here's to another year of partnering with design teams to bring new and exciting digital projects to life. Thank you to all of our clients and partners for another year of doing Good Work.

Read our previous birthday messages:

1. An introduction to Good Work
2. 1 year of Good Work
3. 2 years of Good Work
4. 3 years of Good Work

Our Technical SEO Checklist is updated regularly to ensure it’s as accurate as possible.

As the web grows in complexity, Technical SEO becomes more and more relevant. Everything from site speed to security, to overall website usability across a multitude of platforms, is relevant in modern-day SEO.

Technical SEO is the optimization work that needs to be done outside of content, link building and outreach. It's the strong foundation that gives you the ability to rank well in today's search engine landscape. Lastly, Technical SEO helps to check the boxes next to Google’s development-related ranking factors and plants the seed for search engine success.

Here's the Technical SEO Checklist we go through at Good Work with every website we launch for our clients. The list is broken down by usability items, on-page items, and third-party software integrations.

Usability items

First off, we have the usability-related items on the checklist. Google not only wants to return the best results, but also the fastest, most secure and user-friendly results. Here are the usability-related items on our checklist.

Website speed and page load time

Website speed is an important factor in user experience, and your website's users expect your website to load quickly.

We can check website speed and load times with Google PageSpeed Insights. PageSpeed Insights will spit out personalized recommendations for both mobile and desktop to speed up our website for an overall better user experience. Some examples of things PageSpeed Insights will recommend if we haven't already done so are:

• Leverage browser caching
• Eliminate render-blocking JavaScript and CSS
• Reduce server response time
• Avoid landing page redirects
• Enable compression on the web server
• Minify HTML, CSS and Javascript
• Optimize images

These items can be taken care of either in the website codebase or the web server the website lives on. Most of this is done in the .htaccess file and a good Vite process.

Website hosting

Not all website hosting providers are created equal. Rather than using lower-end shared hosting on platforms like GoDaddy and MediaTemple, consider using a more modern hosting platform.

Use a content delivery network (CDN)

To help optimize your website for high-speed delivery and faster load page times, use a CDN — like Amazon S3 — for static website assets and uploads, like images, PDFs and videos.

Content management system (CMS) implementation

CMS implementation is often an overlooked component when optimizing your website for speed and performance, but usually provides a better return than the usual suspects.

Consider configuring template caching where you can, and find ways to adjust your template logic to make fewer calls to the database.

SSL certificate

An SSL certificate is what secures your website and gives it that little green padlock you're used to seeing in your browser's URL bar. There are a lot of reasons to secure your website, but from a simple SEO standpoint, Google wants you to.

Back in September 2016, Google announced their plan for a more secure web, with a hint at their eventual "Not secure!" messages next to all websites that do not have SSL certificates. This was implemented in July 2018 with the release of Google Chrome 68.

Google has created documentation on enabling HTTPS on your web server to help you add an SSL certificate to your website. This can also be done fairly quickly by magic development fingers.

Mobile friendly

People will be accessing your website from a wide range of devices, and Google expects your website to be optimized for those devices for a better user experience.

Google has also introduced mobile-first indexing, meaning their search results are based on the mobile version of your website.

Long story short, your website needs to be responsive and mobile-friendly.

On page items

Now that we've covered speed, security and mobile friendliness, we can jump to the portion of technical SEO directly related to your website's codebase.

The majority of the items below can be automated and/or managed through your website if your content management system is configured correctly. For instance, we regularly use Craft CMS which has a great SEO plugin called SEOmatic.

Title tags

Make sure every page on your website has a unique title tag that describes the page in about 50-60 characters. Title tags are displayed on search engine result pages (SERPs) and should be simple and written as "Ad copy" for humans.

Title tags are not a factor in Google rankings but a well-thought-out title tag can lead to more organic traffic to your website.

Meta descriptions

Make sure every page on your website has a unique meta description that describes the page in about 160 characters. Just like title tags, meta descriptions are used as "Ad copy" in SERPS and are not a Google ranking factor.

It's worth noting that because Google highlights search words in search results, having the right keywords here in a human-readable way will help you stand out.

Social meta tags

Social meta tags allow you to have unique information show up when your content is shared on social media websites like Facebook and Twitter.

For example, here's what happens when you share a link on Twitter that has social meta tags in place: a Twitter summary card with a large image.

Image alt tags

Image alt tags help describe images for search engine bots as well as the visually impaired. Adding good, descriptive alt tags to your images ensures everyone can understand the images on your website.

Structured data

Structured data helps search engine bots better understand the content on your pages, and give you access to enhanced search results called rich snippets. Rich snippets in search results can significantly increase the number of people who visit your website.

Structured data can be used to markup things like articles, restaurant menus, events, and company information. To learn more about structured data, visit schema.org.

Proper use of HTML elements

We need to make sure we're using proper HTML elements to mark up our pages. H1s for page headings, unordered lists for lists, strong for bold, etc. This gives the content on our website a deeper meaning to search engines.

There are a lot of HTML elements, and we need to make sure we're always using the most useful ones on our web pages.

Internal linking strategy

Internal links are links that go from one page on your website to another page on your website. A proper internal linking strategy with well-written anchor text establishes site architecture, spreads link equity, and aids in the flow of Google PageRank throughout your website.

Robots.txt

Make sure your website has a robots.txt file. A robot.txt file tells search engines what pages to, and not to, include in search results.

You can learn more about robots.txt at robotstxt.org.

Sitemap

Make sure your website has a sitemap.xml file. A sitemap is an XML file that lists all of the pages on your website, along with when they were last updated and the priority and frequency you'd like search engines to crawl them.

Good URL structure

Any modern content management system will be able to handle this out of the box, but we need to make sure we're using URLs like website.com/products/furry-red-hat instead of website.com/product_id=873hfdn29o. Cleaner URLs are easier to remember, help explain the content on the page and are a factor in search engine rankings.

3rd party software integrations

Lastly, we need to make sure we've added essential third-party integrations like Google Analytics and Google Search Console. These allow us to begin tracking usage data and help flag errors as they arise.

You're probably used to adding Google Analytics to your websites, but if you're not familiar with Google Search Console, here's what makes it shine:

1. It’s the only place Google will give you direct feedback about specific things you need to do to improve your website. They do this through the "Messages" section and it's incredibly valuable.
2. It'll keep a list of crawl errors so you know what pages are causing trouble, and can fix them accordingly. For instance, pages on your site may have broken links that need to be fixed, or you may have 404 pages that need 301 redirects.
3. You can submit your sitemap regularly, and check to see the status of pages that are (and aren't) crawled by Google yet.

It also has loads of other valuable tools, like how you're ranking for different search queries, etc.

---

After going through the Technical SEO Checklist above, it's good practice to do one final technical site audit for errors before launch. You can do this with a tool called Raven Site Auditor. Raven is an SEO audit tool that will crawl your website and flag up anything we missed above.

Here are a few examples of warnings Raven can flag up for you:

• Mobile and desktop speed performance
• Duplicate title elements and meta descriptions
• On-page duplicate content
• Low word count on pages
• Images missing alt text
• Pages missing structured data

After crawling your website, Raven gives you a grade between 0 and 100, and marks all issues as "critical", "warning" or "needs attention" to help you prioritize.

Using the 80/20 rule you can typically get your grade up to 90-95, at which point your website is ready for liftoff!

Submit your sitemap to Google using the Google Search Console and vualá. Pat yourself on the back for a job well done.

Earlier this month we created our first annual Good Bracket  —  a March Madness starter kit for facilitating your design agency’s office pool. We sent the kit out to about 50 design agencies around the nation; a handful of current clients along with a very select group of agencies we could see ourselves working with in the future.

The idea came about over a cup of coffee the Monday morning before the 2017 March Madness schedule was announced. We were looking for ways to get our name out there as a web and mobile development partner for design agencies without using the standard car salesman tactics...vualá.

We were on a tight schedule so just like any project, we came up with a game plan, setup some milestones and hit the ground running.

• Monday: Order tubes to send the 24” × 36” master brackets in
• Tuesday: Design the brackets and come up with a game plan for printing
• Wednesday: Create content for, and design, instructions
• Thursday: Create custom labels for the tubes and create a website to feed everything through
• Friday: Package it all up and send it off!

It was fun getting our hands dirty in a physical project for once, and we're looking forward to doing it again next year. We'll be able to do a lot more, too, since we’ll have more than 5 days to think it all through this time.

Hip hip hooray to our friends at Clampitt Paper for donating the PosterColor X 180 matte paper we printed the Master Brackets on this year.

Here are some pictures of how it all turned out.

Happy birthday Good Work, you’re 3.

You survived your terrible twos, you can walk, talk, and more food is ending up in your mouth than on the floor. You’re not quite running yet, but that’ll be here before you know it.

I spent the last few days thinking about where we came from, where we’re at, and where we’re going.

Year one was all about validating the idea that people will pay us enough money to keep the lights on and finding our broad focus. Making it to year two confirmed that idea, so we started to transition from project-to-project contractors to taking on a few full time employees. We tightened our focus a little more. This past year was all about getting things organized, delegated and really narrowing our focus. Year 1. Validate, 2. Commit, 3. Narrow. 4. Not sure yet.

Jaime took over scheduling and “air traffic control” in March. When a project comes in, she onboards it into Accounting, Trello, Harvest, Forecast, etc. We wrote more about our project onboarding process back in March 2016 in our first attempt to automate it.

In April our dear Covington went out and bought himself a coffee shop, so we spent a few months as a team of three again. We took 3 long months to find his replacement, but instead, we found two that were well worth the wait.

In May we started our “monthly” Hackdays.

Steve joined the team at the beginning of August and Gavin started at the end. And then we were a team of five. We were now a full team encompassing design (Gavin), front-end development (everyone, especially Boots!) and back-end development (Steve) — yeehaw.

Shortly after Steve and Gavin joined, Chris took on the role of Development Director. This was inevitable, and behind the scenes already true, but we made it official.

We launched our first Craft CMS plugin, Donkeytail — a product of Chris’s brain. This was a huge feat. Launching internal projects as a client services agency is hard, and we did it. Big pats on the back ensued.

Over the last few years, our work with design agencies has steadily grown to the point that it’s now the majority of our business. We work with about a dozen design agencies here in Dallas, and a handful more across the US and UK. So, in the Fall we put our foot in the sand and said that’s all we’re going to do. We’re a development partner for agencies. It’s funny, once we said that out loud, what needed to be done became a lot more clear.

If you’ve ever read The Win Without Pitching Manifesto, Blair Enns speaks about this exactly. Narrow your focus and it all becomes more clear. Easier said than done, especially in the beginning, but as soon as we decided that what we do is simply “help design agencies build things for web and mobile”, it finally made sense. Narrowing in year one would have felt like a giant cut in opportunity. Now it feels like a giant leap in opportunity.

Once this was all said and done, I couldn’t get an updated Good Work website launched fast enough. Team Good Work was head down in client work for months, so I brought (best) friends Phil Swan and Christoph Rauscher in. I wrote the copy and attempted to communicate a vision, and voila: a new simplygoodwork.com. The new us.

Year three ended with a trip over the pond to England. We spent a week with the UK team (Chris, Gavin and Steve), and got to re-remember where this whole thing started, the Lace Market in Nottingham, UK. I love that town and everything about it. We’re headquartered in Dallas, but I’m 95% certain the idea of Good Work happened at The Kean’s Head over a pint of Harvest Pale with Phil.

This year I’m looking forward to where our newfound focus takes us. To serving our current partners better, bringing on new ones, and continuing to make Good Work a better place than it was the year before.

Read our previous birthday messages:

1. An introduction to Good Work
   
2. 1 year of Good Work
3. 2 years of Good Work

Yesterday we hosted the inaugural #CraftCMS Dallas meetup by our friends at Busy Noggin — complete with lots of pizza, Twig and general website chatter. A good time was had and we're looking forward to being a part of the growing Craft CMS community here in Dallas.

If you missed it but are into Craft, don't fret - there'll be plenty more to come.

If you’ve not used Craft but are curious about it’s benefits over other CMS platforms, by all means, you come too. We’ll fill you in.

Watch this space for future meetups.

A hearty welcome to the latest additions to our growing family, Steve Sharpe and Gavin Platt. Steve’s in Nottingham with Chris, and Gavin’s from wherever he’s calling home this week (though his mailing address is in Leeds).

Steve’s our new in-house engineer — building anything from complex enterprise applications to native apps for iOS and Android. Gavin joins us after 10 years as a self employed web designer and is heading up our visual design efforts as well as assisting our front-end world domination initiatives.

And as they say, the rest is history.

Year 2 was a big one for us. We matured from an international team of contractors to a full time staff of 4. We went all in on Craft CMS and even got to throw in a ski trip at the end to close it all out. :birthday:

---

I'm going to start out on a low, honest note but then we'll go right back up to happy town, so bear with me.

Part of the reason for these yearly posts is so I can go back and look at them -- so I don't want to leave anything out. Year two started pretty grim, and it stayed that way for a few months. Ding, ding. Round 1 of growing pains, etc. Come to find out that's a pretty normal checkpoint in the services business and eventually the sun started shining again. Phew!

In early spring we closed the book with the Erskine Design brand and put up a landing page that we'll hopefully leave up forever. Shortly thereafter Good Work was shortlisted in the 2015 Net Awards for new agency of the year alongside quite the company. It was an honor! We also moved into 2701 Fairmount street, our cozy hoffice in the Uptown neighborhood in Dallas that we share with our friends at Switch Creative.

We spent the summer working on a few bigger projects. One was with Pentagram on the new Hazen and Sawyer website, and the other was a 50th anniversary campaign for Endsleigh Insurance. Toward the end of the summer Phil got to come to Dallas via Nottingham for a quick week of launching cool stuff and kicking off a new project with CareNow.

By late summer / early fall (at about month 18), things really started picking up and with no end in sight. Throughout the year we'd been partnering with design agencies all over the city to help out with front-end development and Craft CMS integration, and a few of them had started to lean 100% on us for their development needs. Chris and Covington joined the team in October, and Boots came on board in November.

It wasn't long after adding all these cool dudes that we had a folder full of shell scripts to do basically anything you can imagine. It was a good move. :nerd:

The winter was a blur of building websites, learning to work as a team and fully committing to the Craft content management system. We closed out year two in Durango, Colorado on a 4 day company ski trip. We skied, snowmobiled, tubed, ate, drank and just about everything else that doesn't involve the internet. It was fantastic.

All in all, it's been a great year for Good Work, and we really started to hit our stride. We've got a fantastic team and some great clients and partners. This year I see us growing a little slower, introducing a few pet projects and maybe even updating this blog every once in a while.

Happy Anniversary, Good Work.

Read last year’s birthday message:

1. An introduction to Good Work
2. 1 year of Good Work

The magic bullet to a successful digital project is readable content, usable forms and intelligent website structure. Nail these basics and you’ve nailed your digital project, whatever it is.

---

People won't be able to put their finger on what they love about the site or app, but they’ll love it. They’ll love it because they can quickly consume content, find what they’re looking for and do what they came to do.

Every two years or so I dust off my copy of REWORK and spend an afternoon blazing through it. For those of you who aren’t familiar with REWORK, it’s a book that goes against what every other business book says about businessing. Some of it is a bit extreme, but for the most part it’s a good refresher to bring you back to Cool Town™.

There’s one chapter in the book called “Starting at the epicenter” that I think about all the time when starting a new digital project.

There’s the stuff you could do, the stuff you want to do, and the stuff you have to do. The stuff you have to do is where you should begin.
REWORK

And not only "where you should begin", but more importantly, the part you absolutely must get right. People use websites and web applications to consume content and fill out forms. That’s a website’s epicenter.

Sweat over the details of typography, headings and vertical rhythm so people can consume content quicker and more naturally. Spend time really thinking through complex forms and how they should be laid out so people can fill them out without having to think. Build a website structure that makes sense for the long run so it doesn’t break the first time you have to change something.

Once you get this stuff right you can pat yourself on the back. You’re now in the top 5% of the website building industry.

1 year ago today I sat down at my home office in Houston, Texas for day 1 of Good Work. The few months before were spent hunting down digital projects outside of a full-time job, with the first to start on March 3rd, the first Monday of March in 2014.

---

It's been a wild ride, to say the least. 18 new project launches, 10 others improved, a move to Dallas, a new office and we even brought the Erskine Design brand into the family.

I took yesterday afternoon to sit back and document a quick summary of the first 12 months.

For the first 4 or so months, the focus was to have no focus. I wanted the specialization to naturally happen based on what projects were the most enjoyable and that we did the best work on. Taking on anything and everything as long as there was a reasonable budget for digital services. This isn't a very traditional route, but I do recommend it. It's an easy way to quickly figure out what projects you are and are not suited for, while still bringing home the bacon.

It's worth noting that at this point, aside from a few ideas in the form of WhatsApp messages between Phil and me, the company was still nameless. It wasn't until somewhere around month 4 that we got a name (and a website!).

About halfway through the year, the work started to naturally fall pretty evenly into two primary buckets: custom software projects like registration systems and intranets, and production work like content management system integrations and front-end development. At any given time one side of the business could be working on a custom internal communications hub for an enterprise client while the other is doing front-end development for a few marketing websites where we were handed over design files.

This is where we've been for the last 6 months or so, and it's obvious that there's a future in modern software design and development for Good Work, so we're gonna stick to it. This year I'd like to get serious about the software side of the business, both for clients as well as creating products of our own. On the production side, I'll be a lot pickier about the projects we take on, but I'd like to keep it around -- it's a nice change of pace from the stresses that come with building business-critical software.

So, that's where we are.

There's a sales pipeline, there are projects on the table, most clients pay on time and there have been more green months than red. I can't complain.

Happy Anniversary, Good Work. Here's to another year of keeping this ship afloat.

Read our first post in this yearly series, an introduction to Good Work.

Hiring a web design company to assist your organization in an upcoming website design, app or other digital project can be a daunting task, but if you fully understand the process and how to find the right company beforehand, it's not so bad.

---

This article aims to answer your questions about hiring a third party for your next digital project. From getting all your ducks in a row before you start the search, to finding the right agency for your organization and what to expect during the project process. By the end of this article, you should have a much better understanding of what to expect while working with a web design company.

Let’s discuss what all you need to get in order before seeking out a design partner of your own.

Everything you need to know before you hire a web design company

Before you start searching for the best web design company for your organization, you need to get a few things in order. You should understand your project in the form of business goals rather than features, you should have plenty of time set aside to assist during the project and you need to have a realistic budget.

Understanding your business goals

You need to have a good understanding of the goals you wish to achieve and the problems you're trying to solve with your upcoming digital project. Being able to articulate your needs and expectations clearly is something that professional web design companies expect. You can do this with a simple project summary.

Your project summary doesn't need to be super detailed, and can be achieved with a page or so of a few well written paragraphs. If at all possible, steer clear of the long winded RFP that states exactly what you need and how it should work. A key component of a successful digital project is that your the web design company you choose is involved from the very beginning. As soon as you understand your needs and goals and can articulate them in a few paragraphs, it's time to bring in outside help.

Web design companies solve business problems with digital solutions on a day-to-day basis, and including them as soon as you understand your needs will result in a better project in the long run.

Digital projects require your time, too

There are quite a few things that you'll be in charge of during a digital project, and depending on the scope of work, the amount of time you'll need to make yourself readily available can vary.

For instance, if you haven't hired a content creator, you'll most likely be in charge of content. And if your site includes things like blogs, news and case studies this can add up to quite the pile of work. There's also all the other digital assets your website feeds into, like email newsletters and social media accounts, that need to be setup and working prior to launch.

Lastly, you need to get used to answering lots of questions, giving feedback on mockups and making all kinds of other decisions related to the digital project in a timely manor. For small projects you can probably set aside as little as a day per week and be fine, but bigger projects can require anywhere from one to ∞ full time client side (your) staff.

Your digital presence is a big commitment, but it's worth it. As long as you can set aside enough of your own time and be readily available when needed you'll be fine.

Setting a realistic budget

You'll want to be completely transparent about your budget from the first conversation you have with your potential design partner. A web design company's job is to make the best use of your budget, and if they know it up front they can offer solutions that will work for you.

If you're not sure how much a digital project typically costs, you can start by asking a few potential web design companies about their typical project budgets. Size and scope of digital projects can obviously vary wildly, but this way you can get a better idea of what you'll need.

A digital project is not a product. You're not buying a widget off of a shelf. The pricing for a digital project is essentially the cost of a highly experienced team of designers, developers, and digital project managers for a set amount of time. The size of team you'll need depends on the scope and timeline of your project. This may sound expensive, but the value an experienced web design company brings to the table compared to recruiting, hiring and training your own internal team is damn near limitless. Not to mention less risky for your organization in the long run.

To summarize

Here's a quick recap on everything you need to know before you start the search for a web design partner.

• Understand your high level business goals for the project, write them down, and wait until you find the right design partner to flesh out the details.
• Be sure you have enough internal time and resources to commit to a digital project and can be readily available to answer questions and provide feedback in a timely manor.
• Set aside a realistic budget for your digital project. Remember, you're paying for a team of experienced designers, developers and strategists to work full time for your organization for a set period of time.

We live in a world where digital has completely changed the way we interact with just about every major industry. From booking our travel, airfare and hotels online to calling a cab and ordering pizza from an app on our phone.

And design and usability are at the heart of it.

---

We could go on for days on how digital has transformed consumer facing products and services, but what's more interesting is what can be done with the less shiny, behind the scenes business platforms that seem to be mostly ignored by the design driven world mentality.

Last month we published an article on the value of design in custom enterprise software. The moral of the story was that well designed, easy-to-use internal software leads to a better employee experience, which in turn leads to a better culture, higher employee retention rates and a happier workplace. That's a lot of positives.

Why is enterprise software so bad?

So why is it that I can still peek over at my local cashier's computer screen only to see what looks to be an early prototype of Pong?

Good question. Here are a few possible answers:

1. It's enterprise, it's supposed to be difficult.

The first and hopefully most likely answer is that companies have no idea this is an issue. Enterprise software has never been known for its ease-of-use, and until we educate otherwise businesses and organizations won't know any better. Luckily for us, modern technology has made the design and development of custom business platforms much more feasible and cost-effective than it was ten years ago.

2. We didn't realize the potential of well designed internal software.

The second possible answer is that companies don't realize they should spend an equal amount of effort on internal digital products and services as external ones. It's really obvious that spending money on well designed and easy to use outward-facing websites is a positive for any business. It's not as obvious that spending money on internal business platforms will create a better workplace experience and save time and money in the long run.

3. We understand, but we don't care!

Lastly, some businesses might completely understand the value in good internal software, but don't care enough about the people doing the work to act on it. I like to think this isn't ever the answer, but it is. The problem with these companies is that the time and money saved by cutting corners on internal software is lost 10x in productivity and morale over the long-term.

To summarize

What all three of these possible answers have in common is that the businesses and organizations behind them are missing out on a great investment for their workforce. We should take some of the time and effort we're putting towards marketing websites and email campaigns, and put it towards our less shiny, internal software as well.

Before jumping into a long-term relationship with a new client, I like to start with a small week or two long onboarding consultancy to test the waters. It's a low-risk way to introduce our potential client to user-centered design and really see the value in working with us.

It's also a great way for both parties to ensure the relationship is a good fit.

A quick lesson on user-centered design

At Good Work we practice a design methodology called user-centered design, which is really just a fancy way of saying that all decisions we make during the project process are on behalf of the project's target audience -- which doesn't always turn out to be the same as our client's initial requirements. That's a good thing though, as it ensures we're making the right thing, not just a thing. And it ensures we're building something of value for our target audience!

Taking a user-centered design approach means we typically have a chunk of research, early prototyping and validation to do at the start of every project. Yes, our potential client probably already came to us with a specific set of wants and needs, but we have to validate them for ourselves before we can move forward.

While it is common practice in the creative professions to prescribe solutions without fully and accurately diagnosing the problem, in almost every other profession such a sequence would render the professional liable for malpractice.
Blair Enns, The Win Without Pitching Manifesto

The onboarding consultancy process

This whole process of up-front research, validation and using our expertise to figure out the right way forward works as a great, low-risk onboarding project with our potential clients.

Our onboarding consultancy process is a one week project to advise, validate and scope the needs and goals of the potential engagement. We focus on the humans that the project is for -- figure out who they are, their experience levels and what they potentially expect to get out of the finished product. We brainstorm and prototype ideas, and come up with a solid plan to make the right thing, a road map to move forward and a prototype to reference for the future of the project, whether that's with Good Work or another digital agency.

To summarize

Taking a user-centered approach to our work ensures we're creating the right digital product or service for our clients. The work involved in our onboarding consultancy needs to be done regardless in order to create a successful digital project, whether during its own project or as the first phase of a larger one, but by unbundling it from our potential primary engagement we can make the purchasing process a lot less daunting for potential clients, and ensure our relationship is a good fit.

It's no secret that investing in your workplace proves just as valuable, if not more valuable, than investing in outward-facing marketing projects. Take enterprise software, for instance.

---

Aside from websites and email campaigns, another really valuable use of digital is in its ability to transform long-winded business processes into easy to use workflows that we can carry around in our pockets.

In the book A Brandful Workforce, Julia Gometz talks about how being a brandful company doesn't just mean investing in your consumer-facing brand, but more importantly, your workforce.

Where the value of our primary marketing website might be to increase brand awareness and save capacity on business development and sales, the obvious value of enterprise software is in its ability to decrease training time, human error and time spent on every day operational tasks at the office like project management. Simply put, digitalizing our business processes can open up wasted capacity to work on the outward-facing things that really matter, like the quality of our products and services. This is huge in itself but doesn't take into account the not so obvious by-products of well-designed enterprise software with good user experience.

Designed well, digitalizing our operational workflows into custom software does more than just save time and money, it leads to a better employee experience, too.

The quality of experience employees have with their employer’s operations is key to their ability to feel trust and comfort at work, and in turn, the desire to stick around.
Good HR Tech Always Makes For A Happy Employee

Good operations are the foundation of a good company culture, and investing in a high-quality custom enterprise application for that foundation is a great place to start. People don't want to sit around all day working inside of legacy software or in a windowless room filing paperwork in an actual filing cabinet. That's not a job people want to do and it's definitely not a job they'll naturally advertise to the world.

With today's technology we can modernize our businesses in ways that focus on the employee experience and make us more productive.