The trick is to throw the scroll position into localStorage right before the page is exited, and when loaded, grab that value and scroll to it. I’ll retype it from the tweet…
let sidebar = document.querySelector(".sidebar");
let top = localStorage.getItem("sidebar-scroll");
if (top !== null) {
sidebar.scrollTop = parseInt(top, 10);
}
window.addEventListener("beforeunload", () => {
localStorage.setItem("sidebar-scroll", sidebar.scrollTop);
});
What is surprising is that you don’t get a flash-of-wrong-scroll-position. I wonder why? Maybe it has to do with fancy paint holding stuff browsers are doing now? Not sure.
In this article, we will use Next.js to build a static blog framework with the design and structure inspired by Jekyll. I’ve always been a big fan of how Jekyll makes it easier for beginners to setup a blog and at the same time also provides a great degree of control over every aspect of the blog for the advanced users.
With the introduction of Next.js in recent years, combined with the popularity of React, there is a new avenue to explore for static blogs. Next.js makes it super easy to build static websites based on the file system itself with little to no configuration required.
The directory structure of a typical bare-bones Jekyll blog looks like this:
.
├─── _posts/ ...blog posts in markdown
├─── _layouts/ ...layouts for different pages
├─── _includes/ ...re-usable components
├─── index.md ...homepage
└─── config.yml ...blog config
The idea is to design our framework around this directory structure as much as possible so that it becomes easier to migrate a blog from Jekyll by simply reusing the posts and configs defined in the blog.
For those unfamiliar with Jekyll, it is a static site generator that can transform your plain text into static websites and blogs. Refer the quick start guide to get up and running with Jekyll.
This article also assumes that you have a basic knowledge of React. If not, React’s getting started page is a good place to start.
Installation
Next.js is powered by React and written in Node.js. So we need to install npm first, before adding next, react and react-dom to the project.
mkdir nextjs-blog && cd $_
npm init -y
npm install next react react-dom --save
To run Next.js scripts on the command line, we have to add the next command to the scripts section of our package.json.
"scripts": {
"dev": "next"
}
We can now run npm run dev on the command line for the first time. Let’s see what happens.
$ npm run dev
> nextjs-blog@1.0.0 dev /~user/nextjs-blog
> next
ready - started server on http://localhost:3000
Error: > Couldn't find a `pages` directory. Please create one under the project root
The compiler is complaining about a missing pages directory in the root of the project. We’ll learn about the concept of pages in the next section.
Concept of pages
Next.js is built around the concept of pages. Each page is a React component that can be of type .js or .jsx which is mapped to a route based on the filename. For example:
Let’s create the pages directory in the root of the project and populate our first page, index.js, with a basic React component.
// pages/index.js
export default function Blog() {
return <div>Welcome to the Next.js blog</div>
}
Run npm run dev once again to start the server and navigate to http://localhost:3000 in the browser to view your blog for the first time.
Out of the box, we get:
Hot reloading so we don’t have to refresh the browser for every code change.
Static generation of all pages inside the /pages/** directory.
Static file serving for assets living in the/public/** directory.
404 error page.
Navigate to a random path on localhost to see the 404 page in action. If you need a custom 404 page, the Next.js docs have great information.
Dynamic pages
Pages with static routes are useful to build the homepage, about page, etc. However, to dynamically build all our posts, we will use the dynamic route capability of Next.js. For example:
Any route, like /posts/1, /posts/abc, etc., will be matched by /posts/[slug].js and the slug parameter will be sent as a query parameter to the page. This is especially useful for our blog posts because we don’t want to create one file per post; instead we could dynamically pass the slug to render the corresponding post.
Anatomy of a blog
Now, since we understand the basic building blocks of Next.js, let’s define the anatomy of our blog.
.
├─ api
│ └─ index.js # fetch posts, load configs, parse .md files etc
├─ _includes
│ ├─ footer.js # footer component
│ └─ header.js # header component
├─ _layouts
│ ├─ default.js # default layout for static pages like index, about
│ └─ post.js # post layout inherts from the default layout
├─ pages
│ ├─ index.js # homepage
| └─ posts # posts will be available on the route /posts/
| └─ [slug].js # dynamic page to build posts
└─ _posts
├─ welcome-to-nextjs.md
└─ style-guide-101.md
Blog API
A basic blog framework needs two API functions:
A function to fetch the metadata of all the posts in _posts directory
A function to fetch a single post for a given slug with the complete HTML and metadata
Optionally, we would also like all the site’s configuration defined in config.yml to be available across all the components. So we need a function that will parse the YAML config into a native object.
Since, we would be dealing with a lot of non-JavaScript files, like Markdown (.md), YAML (.yml), etc, we’ll use the raw-loader library to load such files as strings to make it easier to process them.
npm install raw-loader --save-dev
Next we need to tell Next.js to use raw-loader when we import .md and .yml file formats by creating a next.config.js file in the root of the project (more info on that).
Next.js 9.4 introduced aliases for relative imports which helps clean up the import statement spaghetti caused by relative paths. To use aliases, create a jsconfig.json file in the project’s root directory specifying the base path and all the module aliases needed for the project.
For example, this allows us to import our layouts by just using:
import DefaultLayout from '@layouts/default'
Fetch all the posts
This function will read all the Markdown files in the _posts directory, parse the front matter defined at the beginning of the post using gray-matter and return the array of metadata for all the posts.
// api/index.js
import matter from 'gray-matter'
export async function getAllPosts() {
const context = require.context('../_posts', false, /.md$/)
const posts = []
for(const key of context.keys()){
const post = key.slice(2);
const content = await import(`../_posts/${post}`);
const meta = matter(content.default)
posts.push({
slug: post.replace('.md',''),
title: meta.data.title
})
}
return posts;
}
A typical Markdown post looks like this:
---
title: "Welcome to Next.js blog!"
---
**Hello world**, this is my first Next.js blog post and it is written in Markdown.
I hope you like it!
The section outlined by --- is called the front matter which holds the metadata of the post like, title, permalink, tags, etc. Here’s the output:
Make sure you install the gray-matter library from npm first using the command npm install gray-matter --save-dev.
Fetch a single post
For a given slug, this function will locate the file in the _posts directory, parse the Markdown with the marked library and return the output HTML with metadata.
// api/index.js
import matter from 'gray-matter'
import marked from 'marked'
export async function getPostBySlug(slug) {
const fileContent = await import(`../_posts/${slug}.md`)
const meta = matter(fileContent.default)
const content = marked(meta.content)
return {
title: meta.data.title,
content: content
}
}
Make sure you install the marked library from npm first using the command npm install marked --save-dev.
Config
In order to re-use the Jekyll config for our Next.js blog, we’ll parse the YAML file using the js-yaml library and export this config so that it can be used across components.
// config.yml
title: "Next.js blog"
description: "This blog is powered by Next.js"
// api/index.js
import yaml from 'js-yaml'
export async function getConfig() {
const config = await import(`../config.yml`)
return yaml.safeLoad(config.default)
}
Make sure you install js-yaml from npm first using the command npm install js-yaml --save-dev.
Includes
Our _includes directory contains two basic React components, and , which will be used in the different layout components defined in the _layouts directory.
We have two layout components in the _layouts directory. One is the <DefaultLayout> which is the base layout on top of which every other layout component will be built.
// _layouts/default.js
import Head from 'next/head'
import Header from '@includes/header'
import Footer from '@includes/footer'
export default function DefaultLayout(props) {
return (
<main>
<Head>
<title>{props.title}</title>
<meta name='description' content={props.description}/>
</Head>
<Header/>
{props.children}
<Footer/>
</main>
)
}
The second layout is the component that will override the title defined in the with the post title and render the HTML of the post. It also includes a link back to the homepage.
// _layouts/post.js
import DefaultLayout from '@layouts/default'
import Head from 'next/head'
import Link from 'next/link'
export default function PostLayout(props) {
return (
<DefaultLayout>
<Head>
<title>{props.title}</title>
</Head>
<article>
<h1>{props.title}</h1>
<div dangerouslySetInnerHTML={{__html:props.content}}/>
<div><Link href='/'><a>Home</a></Link></div>
</article>
</DefaultLayout>
)
}
next/head is a built-in component to append elements to the of the page. next/link is a built-in component that handles client-side transitions between the routes defined in the pages directory.
Homepage
As part of the index page, aka homepage, we will list all the posts inside the _posts directory. The list will contain the post title and the permalink to the individual post page. The index page will use the and we’ll import the config in the homepage to pass the title and description to the layout.
getStaticProps is called at the build time to pre-render pages by passing props to the default component of the page. We use this function to fetch the list of all posts at build time and render the posts archive on the homepage.
Post page
This page will render the title and contents of the post for the slug supplied as part of the context. The post page will use the component.
If a page has dynamic routes, Next.js needs to know all the possible paths at build time. getStaticPaths supplies the list of paths that has to be rendered to HTML at build time. The fallback property ensures that if you visit a route that does not exist in the list of paths, it will return a 404 page.
Production ready
Add the following commands for build and start in package.json, under the scripts section and then run npm run build followed by npm run start to build the static blog and start the production server.
The entire source code in this article is available on this GitHub repository. Feel free to clone it locally and play around with it. The repository also includes some basic placeholders to apply CSS to your blog.
Improvements
The blog, although functional, is perhaps too basic for most average cases. It would be nice to extend the framework or submit a patch to include some more features like:
Pagination
Syntax highlighting
Categories and Tags for posts
Styling
Overall, Next.js seems really very promising to build static websites, like a blog. Combined with its ability to export static HTML, we can built a truly standalone app without the need of a server!
Some developers just prefer working in React. I don’t blame them really, because I like React too. Maybe that’s what they learned first. I’ve been using it long enough there is just some comfort to it. But mostly it is the strong component model that I like. There is just something nice about a codebase where things are constructed from components with clear jobs and responsibilities.
It’s not terribly common to see WordPress sites built with React though. The standard way to use WordPress is through themes that are essentially styles and PHP files that handle the templating. Frontity is changing that though. Frontity is a React-powered framework that digests your WordPress site’s API and builds the entire front end in React with all the powerful tools you’ve come to expect from that type of environment.
OMG, Now That’s a Fast Setup
This is how I was able to get started. At the command line, I did:
npx frontity create my-app
Then I went into the folder it created and did:
npx frontity dev
That instantly spins up a site for you to start working with.
To make it feel more real for me, I did went into frontity.settings.js and changed the source API to point at CSS-Tricks:
That’s wild. For some projects, that’s straight up ready to deploy.
Check out their intro video which steps through this exact thing
Getting to Work
My first instinct with things like this is to get my hands into the styling right away. The theme that installs by default is the Mars theme and they have a nice guide to help wrap your mind around how it works. The theme uses Emotion for styling, so the components have styles you can mess with right in them. I found the component in index.js and immediately did the background: red change!
Is this one of those client-side only technologies?
That’s what I thought to myself. I mean, one of the advantages of using WordPress as-is is that you get the server rendering for free. That means no SEO worries (we know client-side rendered sites can take a week or more to be crawled for every change). That means resiliency and speed.
Frontity does do server side rendering! It uses Isomorphic rendering, meaning you need a Node server to render the pages, but that means the browser will get fully formed HTML for pages!
Similarly to how easy a new site is to scaffold and run in development, all you have to do to prep it for production is:
npx frontity build
Then run the Node server:
npx frontity serve
Cool.
I also really like that there is community around all this. If you need help, you’ll get it.
This is a best-of-all-worlds scenario.
I’m always very happy building sites with WordPress, and doubly so now that we have the block editor to use. I really like having an editor experience that helps me write and craft the kind of pages I want to create.
But I also like working with component-based architectures that have fast, easy-to-use, hot refreshing local development environments. Once you work in this kind of dev environment, it’s hard to use anything else! Beautiful DX.
And I also also want to make damn sure the sites I deploy to production are fast, robust, resilient, accessible, and SEO friendly.
I’d get all that with a Frontity site.
Another thing I like here is that Automattic themselves is on board with all this. Not just in spirit, but they are literally big investors. I think they are very smart to see this as an important part of the WordPress ecosystem. Building with WordPress doesn’t mean not building with React, especially with Frontity doing so much of the heavy lifting.
The simplest definition of workflow is how you get your work done. It’s the series of tasks you do to meet a repeatable business goal, like onboarding a new employee.
The “repeatable” part is particularly important for a workflow, because a workflow task isn’t a one-off event or a group of tasks for something that’s a one-off, such as a special client project. These tasks happen in a logical order and are done regularly.
For example, consider a simple workflow to approve employee expenses. First, the employee submits the expense report. The employee’s manager then reviews and approves it. The manager sends the expense report to payroll, and payroll adds the reimbursement to the employee’s paycheck. In the final step of the workflow, the employee receives their paycheck, including the reimbursed expenses.
Often, workflows are represented visually, in diagrams, which helps you plan for contingencies. For example, if the manager rejects the employee’s expenses because that employee exceeded the $50 per diem allowance for meals, the workflow diagram would point to a box that indicates the employee revises their expense report, then resubmits the expense report to their manager.
Workflows sound simple, and that’s because they generally are once you break down end goals into repeatable tasks. They work for repeatable projects, like web design, as well as for standard business procedures. The key to workflows is understanding their components, managing them, and possibly using automation for them.
This guide will cover what workflow is and how to get the most out of your workflows, including
The different components of a workflow, workflow-related terms, and how workflow differs from business process management and processes. You’ll also learn how to create a workflow in this chapter.
What workflow management is, including what happens when you fail to manage workflow processes. This chapter will also cover workflow management software and provide a brief overview of what to look for when you’re selecting software.
The basics of workflow automation, including how a manual workflow differs from an automated workflow, and the importance of using low-code workflows.
Well-known types of workflows, including sales invoicing, vacation approval, marketing campaigns, and content requests. You’ll learn how human resources and IT departments take advantage of workflows and get a brief overview of kanban, a Japanese workflow methodology.
Workflow diagrams and how they can help you visualize your workflows.
Workflow analysis and optimization so you can continually improve your workflows to get the best results.
How to use JotForm as part of your workflow, including how it integrates with other workflow tools to optimize things like approval workflows.
If you’re ready to learn more about workflow and how you can make the best of it to improve your business, this guide will help you get started.
Components of a workflow
Because workflows are a series of repeatable tasks that are performed to reach a repeatable goal, they have several different components. Workflow models vary, but every workflow component or step is described in one of three ways — input, transformation, or output:
The input components of a workflow are the materials and resources required to complete a step. If your workflow is for onboarding new employees, that includes the W-2 and other forms a new employee would fill out prior to being added to payroll.
Transformation components of a workflow are specific rules that state how the input is received and what happens to the input once it’s received. For example, the employee’s W-2 is submitted electronically to the payroll department, and the appropriate person adds the new employee to payroll, making sure the deductions specified by the employee are entered correctly.
The output workflow components are the materials and resources produced by the transformation step; they become input to the next step. The transformation step in the employee onboarding example produced the information for payroll, which becomes input to the next step, paying the employee during the next pay period.
Workflows also have four main components to describe who’s in charge of something or what happens in the workflow — actors, activities, results, and state:
The actors in a workflow are the people or machines responsible for doing the work. While the employee is the actor in the onboarding workflow responsible for submitting the W-2 form, the payroll software is the actor responsible for making sure the employee gets paid.
Activities are the tasks or business processes being performed, and they’re single, logical steps. Submitting the W-2 form is one activity; the payroll department verifying the information is another.
The results of the workflows are how you want them to turn out. In the employee onboarding example, you want the employee to start receiving paychecks on time.
The state happens when a project is between processes, like the time between when the employee submits their W-2 form and when the payroll manager verifies it. Flow control makes sure that the steps are followed in order based on how they’re defined in the workflow, so that the employee’s information is verified before the employee starts receiving a paycheck.
BPM vs workflow
One thing you may hear a lot about as you research workflow is business process management, or BPM. The two may seem very similar since they both deal with workflow.
However, the biggest difference in BPM vs workflow is that BPM is all about designing processes, executing those processes, managing tasks, and continually optimizing everything. Workflow is part of BPM, but it focuses more on managing the tasks and making sure they’re repeatable. BPM incorporates multiple workflows.
One example of how BPM relates to workflow is hiring a new employee. There are several workflows and departments involved in getting this new hire on board. One workflow is for posting a job description, another is for screening resumes, and a third is for scheduling interviews.
BPM works together to create an ideal end result — hiring a great employee — while workflows are the individual sets of tasks to get to that result.
Workflow vs process
Another area of workflow that may seem confusing is the distinction between workflow and process. They are very similar in nature, but while process is a series of tasks (like sending the W-2 form to the employee, the employee filling it out and sending it back), workflow is a way to be more efficient with processes.
Processes flow naturally, but workflows are modeled and automated with a purpose in mind. The resulting workflow is a consequence of the process. In other words, a workflow is a very streamlined process, and more and more often, it uses automation to complete the tasks and reach the desired outcome.
For example, to institute a workflow for the new employee, you’d create a packet of forms the employee could fill out from their computer, without downloading any files, and send quickly to HR for processing. An automation component would consist of emailing the employee a link to the forms as soon as they’re added to the system as a new employee. Then, when they click Submit to send the forms, the information would automatically be populated into payroll and other systems.
What is a workflow process?
We touched on workflow vs process above, but what is a workflow process? If you’re working with a workflow automation tool, a workflow process is the series of tasks that are completed based on rules that you set up.
In workflow process modeling, which is setting up the workflow process, you create a linear, logical flow for the tasks, identify which tasks are automated, and set up rules for when the process moves to the next step.
In the case of approving expense reports, you could set up a workflow process to automatically approve reports when employees submit them. However, you could also set up rules for the expense reports so that they’ll be routed to the employee’s manager if there’s a large amount that exceeds a certain threshold, or bounced back to the employee if they spent more than a preapproved amount on client gifts or entertainment.
A workflow process isn’t necessarily confined to one department. The expense report example spans the employee’s department and the department responsible for reimbursing employees for expenses.
How to create a workflow
If you already have processes in place, you have the foundation for creating a workflow. If not, here are the steps to create a workflow:
Identify the resources you already have.
Create a list of the tasks that must be completed.
Determine who (or what) is responsible for each task and assign these roles.
Craft a workflow diagram so that you can visualize the process. Chapter 5 will cover workflow diagrams in depth.
Test your new workflow. This will help you find things you might have missed when you listed tasks before you put the workflow into place.
Train your employees on the new workflow.
Implement the workflow as part of your business.
Once you’ve mapped out some workflows, you can get the most from them with workflow management. The next chapter will explain what workflow management is and how to implement it in your organization.
Workflow management
After you’ve created workflows, the best way to take advantage of them is to set up workflow management. When you use workflow management, you coordinate the tasks involved in the workflow to reach the desired end result more efficiently (or more cost-effectively).
You don’t need software for workflow management, but since the idea is to streamline and automate workflows, you may want to use software tools to keep track of workflows and automate them where possible. Workflow management includes the tasks performed by both people and software systems, and because it provides visibility into processes, it’s helpful if you’re looking to improve your workflows.
Workflow management isn’t the same as project management. They’re similar, but workflow management deals more with automation and applying repeatable processes to repeatable business goals, like paying invoices. Project management is a much larger process that deals with responding to the changes that crop up on individual projects.
Using a workflow management system
A workflow management system is software that helps track, control, and coordinate your workflows. This can include automation, such as routing tasks to the appropriate person or processing invoices for payment if they meet certain criteria. The workflow management system will include ways for you to define your workflows and set rules around them.
For example, if you use a workflow management system to process invoices, you could set up the system to automatically approve invoices from specific vendors that are under $50. If the invoice submitted is over $50, you could set up a rule to have the invoice routed to a manager for their approval.
A typical workflow management system will include these automation capabilities, as well as ways to integrate with existing systems so that it can route tasks appropriately. It can also combine multiple processes from multiple systems to streamline them, notify people when there’s a task they need to complete, and follow up with the person if they don’t complete the task.
The idea behind using workflow management systems is to make your workflows as much of a part of your office procedures as switching the phones from night mode and starting a pot of coffee when you come in.
Granted, you don’t have to use a workflow management system or manage your workflow processes. But this can lead to missed opportunities, unnecessary costs, and lost productivity.
Workflow management eliminates unnecessary steps and processes, and makes sure the right person is being assigned tasks. It provides a way to track progress, automate some decisions that would normally take up an employee’s time, and keep records of previous processes. Without it, an organization can succeed — but it will take a lot more time and resources.
There are still a lot of companies that don’t manage the invoice processing workflow. An employee will receive an invoice and scan it as a PDF, then email the invoice to accounts payable. Accounts payable will print the invoice, fill in relevant information like the vendor code, and then re-scan it as a PDF to save for record-keeping. Finally, payment is issued in the form of a paper check, and accounts payable enters the payment into the finance system. This isn’t a well-managed workflow.
On the other hand, a company that manages this workflow can speed along this process, saving valuable employee time and making sure the vendor gets paid much faster.
For example, the employee who receives the invoice scans it directly into the accounts payable system, which processes the invoice. If it’s an invoice that needs approval, an authorized employee is alerted to complete the task. After the invoice is approved, the payment is sent to the vendor (ideally using an electronic payment method), and the transaction record is automatically stored in the system.
Important workflow management system features
There are some critical things any workflow management system should have. These include integration with other systems, the ability to build forms or use an outside form system to collect information from employees and customers, a workflow engine to make decisions, reporting tools, and a self-service portal to create requests and manage tasks.
However, this should be a low-code system. This is one thing that’s often overlooked. A low-code system doesn’t require the user to know a programming language to create their own workflows; they can use a graphical user interface to pull in workflow elements, then test them on their own without having to find a programmer to set it up for them.
Workflows are used outside the IT department, and a lot of managers in other departments will want to set up workflow management for their processes, especially simpler ones.
These managers know where their processes need to be improved and how to use technology. But they don’t know programming languages fluently enough to hard code those workflows into the system. A workflow management system that lets them drag and drop workflow elements into place can not only make it easier to get other departments to adopt the software but also save valuable time for the IT department.
Cloud-based workflow management software has become more popular in recent years. As companies tend to have a more distributed workforce, either through multiple offices or with remote employees, this makes it easier for them to implement workflows across all locations, as well as access the software from any device, including smartphones. The very nature of cloud-based software, which is a pay-as-you-go model instead of a big, up-front capital investment, also makes sense for companies that use workflow management software to cut costs.
Most of the top workflow management systems available have, at the very least, a cloud-based version, and several are cloud-only. For example, Integrify, HighGear, and Nintex, three of the best workflow management systems, all have cloud and on-premises versions. On the other hand, products like Smartsheet, Workfront, Asana, and Wrike, all widely used workflow management systems, are only available in the cloud.
Ultimately, the best workflow management system for your organization will depend on the features you need and the workflows you plan to automate. In the next chapter, you’ll learn more about workflow automation and the importance of low-code workflow solutions to encourage adoption.
Workflow automation
We’ve already covered workflow management in previous chapters. However, workflow automation is a big part of workflow management. Workflow automation is how processes are designed, executed, and automated based on the rules you set up to route tasks, data, and files between people or systems.
Workflow management software is used for a lot of workflow automation. It can help companies save time and money, be more efficient, and minimize errors by removing the human element from some business processes.
Automation is ideal if you’re trying to streamline how you handle a lot of repetitive tasks in your business, from simple processes like expense approval to more complex ones like marketing campaign management. Basically, if you rely on the same series of tasks to get things done, workflow automation can make it easier.
Manual workflow vs automated workflow
Even the most streamlined manual workflows are still less efficient than automated workflows, especially in a complex process like getting a report approved for a client. Someone receives the data that needs to be compiled in a digestible format for clients. The writing is the easy part, but then comes the approvals process.
First, someone has to review the report to make sure there aren’t any trade secrets or proprietary information included in it. If the report needs to be revised, it’s sent back to the author via email. After the security review, an editor needs to read the report for grammar, style, and spelling issues. That may involve several rounds of revisions as well.
Once the writing is done and edited, you’ll want to include illustrations and charts. You have to get your art department to create the graphics, then get approval for them. Someone will need to go over the layout, even if the report is only being produced as a PDF. Finally, someone approves the final draft, and it’s uploaded to the client portal for download.
With an automated workflow, instead of downloading and sending the files back and forth, the document stays in one format and is sent automatically to the next person in line for review as soon as someone finishes with their part. A request for graphics is created automatically. And in the meantime, the automated workflow collects data regarding the status of tasks, so you can check to see if the security review is complete or confirm that the designer has started working on illustrations. If the editor is taking too long, the automated workflow can send them a reminder.
This example of putting together a report illustrates three big benefits of using workflow automation. For starters, it streamlines communication between those responsible for different tasks related to the report. No one has to tell someone that it’s their turn to do something; as soon as the editor submits the request for revisions, the author is notified and can begin work.
It also creates accountability because everyone knows what they’re responsible for completing. Employees can manage their own time; they know what they’re supposed to do and when they’re supposed to do it. Their managers don’t have to ask them for status updates; they can go directly into the system to check on the status, something that hands-on managers will appreciate.
In other areas of the business, workflow automation also helps reduce costs and errors because it prevents tasks from slipping through the cracks.
For example, without workflow automation, an invoice submitted for payment might get forgotten. In the best case scenario, the company is charged interest on the overdue balance. In the worst case scenario, like for an ongoing service, the service is stopped until payment is received.
Additionally, companies can assign responsibilities to someone else no matter what the current management hierarchy is, so if the person who usually approves invoices manually is out on leave, someone else can be assigned that role.
Why low-code workflow automation is important
While there are plenty of IT processes that can benefit from workflow automation, that’s just one department in a business. Sales, marketing, finance, human resources, procurement, legal, and other departments also have processes that can quickly get unwieldy, and they can be more productive by automating their workflows as well.
However, most employees aren’t fluent coders, so if they want to construct workflows and automate processes, they need a solution that doesn’t require them to hard code anything.
For example, a marketing department manager may want to create a content request workflow so that sales can request a marketing asset for a new product launch. Without a low-code product, the manager needs to put in a request to IT for a content request workflow. If the IT department is backed up with other projects, it could take a while for them to even get started on this workflow, much less test and deploy it.
Low-code workflow automation systems let line-of-business managers and users create their own workflows using a graphical user interface, which eliminates the need to get a programmer involved. If the product is easy enough to use, the marketing manager could create a simple content request workflow for the sales team to use and set up business rules to route it to the appropriate person in the department.
This not only speeds up the time to deploy a new workflow, but it also speeds up the content request process. In addition, this frees up IT to work on the larger automation projects or other strategic initiatives, instead of coding different workflows for other departments.
A low-code workflow system empowers these business units to streamline their processes. As they build a workflow, the accounts payable department may realize they can eliminate steps that involve printing invoices and scanning them back in after they’ve added notations, for example. They can also manage workflows, so as they discover new ways to improve them, they can make those tweaks, like removing paper checks as much as possible from the payment process.
This chapter has touched on a few different types of workflows that can be automated, but there are many more. In the next chapter, you’ll learn about some of the most common types of workflows that can benefit from workflow automation.
Well-known workflow types
As you’ve probably guessed from previous chapters, there are a lot of different workflows. The preceding chapters have used examples from HR, accounting, and marketing, but those just scratch the surface of what workflows can help you accomplish.
Most businesses have a lot of paperwork that well-known workflow types can manage. These are also known as document management workflows, which create, track, edit, store, and manage any document that’s associated with a business process, like expense reports, requests for new login credentials, or employee onboarding.
HR and IT departments tend to benefit a lot from workflows, but other departments can also take advantage of them to streamline their processes and boost efficiency. The most common types of workflows most people will encounter revolve around approvals: Someone submits a form to make a request, and the request is automatically approved or routed to a manager for approval.
Here are 12 well-known workflow types that you can use in your organization, along with examples of what they might look like.
New order workflow
You can create a new order workflow for customer orders, whether the customer submits the order or a salesperson puts in the order for them. This workflow collects all the information related to the order, then makes sure each step is completed before the order is shipped: invoicing, payment, shipping, and delivery.
Once the new order workflow is completed, the order is archived.
Sales invoice workflow
If a salesperson creates an order for a customer, a sales invoice workflow can ensure that the customer is invoiced, pays, and receives their product. The workflow matches the customer invoice to the customer payment and sends a reminder if the due date for payment is approaching. It automatically routes payments to the bank and credits the customer’s account.
Sale quotation workflow
A sale quotation workflow starts when a salesperson fills out a form that details what the customer wants. If this is something that can be easily populated with existing information in the system, a quote is generated automatically. If not, the sales quotation request is sent to the operations team to get information on how much it would cost to produce what the customer wants. The quote is routed to the sales manager to finalize the price, and then the quote is sent to the customer for approval.
Vacation approval workflow
Most companies have some sort of vacation approval process in place. A vacation approval workflow can speed up this process, especially if employees usually just email their managers.
In a vacation approval workflow, the employee submits a form, which is routed to their manager for approval. If the request is approved, both the employee and human resources are notified so they can mark it in their calendars. If the request is denied, the employee can modify dates and resubmit the request.
Employee onboarding workflow
These days, employee onboarding requires tax forms, direct deposit information for payroll, new computer logins, and sign-offs on procedures manuals. An employee onboarding workflow will already have the employee in the system and assign them a computer login before the employee even starts work.
The workflow also asks the new employee to complete their onboarding forms and routes the forms to the appropriate department. The workflow can then schedule the employee’s orientation and welcome lunch, order business cards, and assign a one-month check-in for the employee and their manager.
Employee performance appraisal workflow
Depending on how many employees there are at your organization, it can be easy to let a performance review slip through the cracks.
An employee performance appraisal workflow can trigger a reminder to the employee’s supervisor to schedule the review and send a self-assessment form to the employee. The supervisor reviews the self-assessment and sends a draft appraisal to the employee, then schedules a meeting to discuss it. Both the employee and supervisor sign the final appraisal, and a manager approves it before it’s added to the employee’s file.
Purchase order workflow
To keep track of purchases and create a document trail, you can set up a purchase order workflow. This workflow begins with the employee creating a request, which is then either automatically approved if it meets certain criteria or routed to a manager and/or the finance department for approval.
The supplier is then notified so they can review the purchase order and accept or decline it. If the supplier accepts the purchase order, the delivery date is confirmed and payment requested.
Marketing newsletter workflow
In a marketing newsletter workflow, the process begins when someone signs up for your newsletter. They’re tagged based on how they respond to questions (e.g., job title, geographic area) so that you can send them the right kind of content.
They receive a welcome email, and a couple of days later, get a message that includes a curated list of articles tailored to their preferences. You can customize this workflow based on how often you want to send email newsletters to a subscriber and the type of content you want them to receive.
Marketing campaign workflow
A marketing campaign workflow covers the entire campaign you’re running, from the time the creative brief is created to when it goes live.
A sample marketing campaign workflow starts with the creative brief: Once it’s approved, it goes to the copywriter so they can begin writing and to the graphic designer so they can start creating images. A subject matter expert reviews these drafts, and any necessary revisions are made.
Once the revisions are approved, they’re uploaded into the content management system and reviewed again. If necessary, they go through user testing (this is often required for assets like quizzes). After they pass user testing, the assets are published.
Content request workflow
A sales manager might need a specific asset to help sell a new product, like a sell sheet. A content request workflow starts when the sales manager submits a form requesting the new sell sheet. That request is routed to the marketing department, which assigns it to a writer. The editor approves the content and requests images, and the final product is sent to the sales manager for distribution.
Budget approval workflow
With a budget approval workflow, you can streamline the process of getting a company-wide budget in place. Each department head gets a reminder to create and submit their budget, which is then reviewed by the finance team and either approved or rejected before being compiled into a company-wide document. This ensures that every department has adequate funding.
Employee reimbursement workflow
As has been discussed in previous chapters, an employee reimbursement workflow can make it easier and faster for employees to get paid for their expenses. The employee submits a reimbursement request, and if it meets certain criteria, it’s automatically approved. Otherwise, it’s routed to a manager for manual approval, then sent to the finance team to reimburse the employee and generate a record of the expenses.
How JotForm can help
The above examples are all real workflow types used in many businesses. There are also more abstract types of workflows that can’t be fully automated, like a photography workflow.
However, there are ways to streamline these workflows by using forms, like those provided by JotForm. For example, a photographer could build a customizable online form for their clients to fill out requesting shot lists, or a baker could create a form for customers to order customized cakes.
While the process in between will require a lot of manual intervention, setting up these types of workflows can also trigger follow-up emails to remind clients of their photography sessions or to request feedback about their cakes.
A solution from Japan: Kanban workflow
Finally, one last useful workflow type is the kanban workflow, which is based on a Japanese productivity technique. Kanban is a fairly simple concept: It visually shows the steps in a process. You separate projects across a single board, then divide the board into columns to show what the status is. There’s a column for “to do,” “in progress,” and “completed,” for example.
You can use kanban with something as simple as sticky notes on a wall or as complex as a software program like Asana or Trello. Kanban can help you identify where the hang-ups are in your workflows and create more efficient processes.
These are just a few of the common workflow types used in organizations. Though every company will have specific needs, you can use these examples for inspiration when creating your own workflows.
However, workflows are best represented in pictures, not words. In the next chapter, you’ll learn more about how to visualize workflows, including how to create workflow charts and activity diagrams.
Workflow diagrams
A visual representation of your workflow will make that workflow easier to understand. This, in turn, can help you find ways to improve the process. It can also help employees better understand their roles and the order they need to complete tasks.
Once you’ve examined your business processes and are ready to create workflows, you’ll need an easy way to view them. Enter the workflow diagram. It creates a graphic overview of the business process you’re streamlining.
When you create a workflow diagram, also known as a workflow chart, you can see what the previous step was, what step you’re currently on, what’s coming next, and what might cause delays. You can also anticipate any decisions that need to be made and know who’s responsible for completing tasks. Having all this laid out in visual chunks makes it easier to move a step forward or back, eliminate a step, or just see the logical progression of your workflow.
For example, you might create a workflow diagram for a new customer order. The diagram would start with the event (the customer submitting the order), then progress to payment being confirmed, the item being sent to the fulfillment center, and the item being shipped to the customer. That’s a simple workflow.
The good news is, you don’t have to start building workflow diagrams from scratch, especially if you’re working with more complex workflows or activity diagrams. You can use a workflow chart template to help you visualize your workflows and add and remove steps as needed. These templates provide the different symbols and other elements necessary to build a workflow diagram, also known as a flowchart, that you can use and revise as you see fit.
What are activity diagrams?
An activity diagram is similar to a workflow diagram, but it supports different choices and processes occurring in parallel. While a workflow diagram may depict a process as a single series of actions, an activity diagram could branch off after the request is made and route tasks to two different departments. It could also require making a choice that determines how the workflow progresses.
For example, an activity diagram for the customer order could require a choice at the payment confirmation stage. If the payment is confirmed, the workflow proceeds to fulfillment and shipping. But if payment is rejected, the workflow moves in a different direction; it can terminate the process, or it can request a different payment method from the customer.
Some activities can be done in parallel. These can also be represented in an activity diagram. In the case of creating content for a marketing campaign, activities like graphic design and copywriting can be done at about the same time so that, when it’s time to lay out the different content assets, everything’s ready to go.
Workflow maps
Building a workflow map is the process of creating a diagram of your existing processes before you create workflows and workflow charts. The workflow map helps you find out where you can improve your process. This is usually something a department does as a team.
You don’t need to create workflow maps for every process. Workflows function best when they’re used to document and streamline processes that lead to a repeatable result. Instead, use workflow maps as a way to find bottlenecks in your processes and departments.
For example, as you map out the new vendor contract approval process, you may discover that no one is following up to make sure the other party is countersigning the contract, which creates delays in adding the new party as a vendor.
Workflow symbols and flowchart symbols
Workflow diagrams, workflow charts, and flowcharts all use a set of common symbols. The symbols used in different diagrams can vary. Depending on how complex the workflow gets, a lot of different symbols can be used in the workflow diagram. However, the four basic ones you need to know are
Rectangle. This represents a process or an action that’s carried out by an employee or a machine. For example, filling out a W-2 form would be represented by a rectangle in an employee onboarding workflow chart.
Oval. This is the start or endpoint of a process. In an employee onboarding workflow, this would be when the employee is hired, for example.
Diamond. This symbol is used when a decision needs to be made. For example, in an expense reimbursement workflow diagram, manager approval would be represented with a diamond.
Arrow. This connects the different steps of the workflow.
Workflow diagram software
Creating workflow diagrams can get a little complex, but there are a lot of different workflow diagram software packages to choose from. Making these diagrams from scratch can be difficult and time-consuming if you don’t have the right tools, especially if you’re trying to create workflow charts from a word processing program or presentation software.
The standard shapes and symbols to work with as listed above, as well as other shapes and the ability to add your own symbols and graphics to the workflow diagrams
Templates so that you have a starting point for a variety of workflow charts and don’t have to start from a blank screen
Tools that let you easily arrange your workflow charts, including drag-and-drop features, grids, and auto-snapping shapes
A way to export your workflow diagrams to different formats, including vector files that can be used to create posters
An intuitive user interface so that you don’t have to spend a lot of time training employees on the software
Workflow visualization will help you map out existing processes and streamline them into workflows that can improve efficiency in your organization. If you use workflow diagram software, you may find it simpler to create these visual representations, as long as you choose software that’s easy to use.
Since such a large part of creating workflows is optimizing them, the next chapter will cover workflow analysis and how to optimize your workflows.
Workflow analysis and optimization
Why is workflow software with drag-and-drop capabilities so popular? Because, as business needs change and teams identify inefficiencies in their workflows, the workflows themselves need to be modified. Workflows are a living way to document your business processes, and workflow analysis and workflow optimization ensure that the workflows you create improve efficiency and reduce costs.
When you conduct workflow analysis, you break down how well your workflow performs and look for places where you can improve on that workflow. By closely examining your workflow, you can start changing your processes to make them even more efficient.
For example, you might start a workflow analysis on your existing expense reimbursement process. Employees fill out an expense reimbursement form and email it to their managers for approval. This is often reimbursement for the same expenses, like their mobile phones or home internet services, as well as meals when they’re traveling for business.
The manager has to download the form and review each expense manually, then print the form, sign it, scan it to a PDF, and email it to the finance department. The finance department then has to enter the expenses, tag them appropriately in the system, and issue a check to the employee.
Workflow analysis would discover the inefficiencies in this process, as well as any gaps. The manager might be on vacation and forget about the expense report, or finance may accidentally delete the email from the manager. It is also time-consuming for the manager to print, sign, and scan documents, taking away time they could use to mentor employees or work on departmental strategies.
When you conduct workflow analysis, particularly after you implement automated workflows, look at how many times that workflow began over a period of time, as well as how many times it was completed. Examine how long it took for each task in the workflow to be completed and how many times a task was sent back or rejected.
Also look at where the hang-ups are; for example, you may discover that the manager takes a couple of days to approve expense reports because the employees don’t enter the correct expense codes. The manager then has to email the report back to the employee and attach the list of expense codes.
Workflow optimization
When you engage in workflow optimization, you use the results of your workflow analysis to improve your workflows. Examine all of the inefficiencies, gaps, and bottlenecks so you can remove them and keep your business processes moving toward completion. This may include introducing automation, removing steps from the workflow, or reassigning tasks to different employees to streamline the process.
In the expense reimbursement workflow, you might decide to improve the inefficiencies by implementing an automated approval system. You set up rules to automatically approve expenses up to a certain dollar amount in certain categories.
For example, if the employee is regularly reimbursed for their mobile phone and home internet service, and their expense report every month is usually just for those two amounts, you can set the amounts and have the expense report automatically sent to finance, skipping the manager approval process. Other expenses in the form would cause the expense report to be flagged and sent to the manager for approval.
You can also remove the step requiring the manager to print, sign, and scan the expense report by using a form that lets them approve expenses automatically. Ideally, the data would be preserved in the form and would populate the finance department’s system with the expense report information, as well as trigger reimbursement on the employee’s next paycheck.
As you continue to optimize your workflow, you might discover that you can simplify the codes your company uses for employee expenses, making it easier for them to use the correct codes and get reimbursed faster. You might also use a system that triggers alerts to the manager, the employee, or the finance department when action is needed, making it harder for the expense report to slip through the cracks.
Keep in mind, however, that automation may not solve all your workflow problems. The goal of workflow optimization is to make workflows more efficient. While automation can certainly do that, it can also just make bad processes run faster.
It’s possible to create too many workflows for the same situation. You might want to consider creating conditional workflows with parallel paths as part of your workflow optimization efforts.
For example, in a content request workflow, both a sales sheet and a blog post start and end the same way (with finalized content), but there are different steps in the middle — a sales sheet gets laid out and printed as hard copies, while the blog post is published online. You can create one workflow with tasks that happen only in certain situations, like layout or coding checks.
As part of workflow optimization, you can also separate lengthy workflows into multiple workflows. The sales process is a good one to look at.
One long sales workflow from lead capture to customer support is unwieldy and can make it difficult to optimize the entire workflow from start to finish. It makes more sense to break it up into chunks like lead nurturing, order and fulfillment, and customer support, and then set triggers so that when one workflow ends, a second begins.
Ultimately, workflow analysis and workflow optimization will be critical to ensuring you get the most from your workflows and keep them healthy. You don’t want your workflows to stay the same, particularly as your business processes change.
In this chapter, we’ve talked a lot about automating workflows, including adding forms. But what’s the best way to do that, including integrating forms with different software programs? In the next chapter, you’ll learn how you can integrate JotForm into your workflows and your workflow tools.
JotForm as part of your workflow
In previous chapters, you read about using forms as part of your workflows: forms to request content, submit expense reports, and onboard new employees. JotForm can help you create these forms and become an integral part of your workflow, not only because you can customize forms using JotForm, but because JotForm integrates with several workflow tools.
There’s also a tool that can help you create your own approval workflows. This makes it easy to create short, simple workflows, particularly if you’re just starting to use workflow optimization in your organization.
JotForm workflow integrations
One way JotForm fits seamlessly into your workflows is with its integrations. ProcessMaker, a low-code workflow platform, has a JotForm integration known as Approval Workflow for JotForm. This integration helps you simplify workflows and the approval process surrounding them to create an approval flow for things like purchase orders, expense reports, and content requests.
If you use Approval Workflow for JotForm, you can receive notifications via email or Slack when someone makes a request. You can also create multilevel approvals and threaded comments. This integration lets you set up an audit trail so you know who approved something and when.
Approval Workflow for JotForm is fairly simple to set up, and it’s a great choice if you’re just getting started with automated workflows. Even if you’ve been using workflows for awhile, this integration might help you simplify some of them.
For example, you could use the integration to set up an approval workflow for a content request. When a salesperson requests a new product data sheet through the form you’ve set up, you can execute the entire approval workflow via Slack or email.
You’re alerted to the request and you can comment on and assign tasks directly, as well as view the workflow history. Once you receive the request, you can easily assign the product data sheet to one of your in-house writers and keep track of their progress.
Setting up an approval workflow in Approval Workflow for JotForm is pretty straightforward. All you need is a free JotForm account. Once you’ve set up a form to collect data, you’ll go to www.workflowforjotform.com to add a workflow to your form. Click “Add workflow to my JotForms,” and the integration will walk you through a five-step process.
When setting up your approval workflow, connect the form you want to use, assuming you’ve already set up a form in JotForm. If not, you’ll need to do that. Approval Workflow for JotForm will automatically show you a list of the forms you’ve created in JotForm, so it’s easy to select the form for your approval workflow.
Select the variables from the form that you want show up in your request, and choose where to send the request, i.e., to the person responsible for approvals. Finally, set up approval and denial emails that will be triggered automatically depending on the action taken from the approval request.
Approval Workflow for JotForm takes you through everything you need to do to set up your first approval workflow. You can create it in just a few minutes.
JotForm also integrates with Integromat, a tool that connects your data to apps. This integration lets you collect data in forms created with JotForm, then populates your apps with that data.
Integromat uses a drag-and-drop interface, which makes it a good choice for those who want to automate their workflows. One of the apps you can connect to is Slack. Every time someone submits a form, you’ll get a message in Slack.
Finally, a third choice for integrating workflows with JotForm is JotForm PDF Editor. Not only does this tool let you collect data and turn it into polished-looking PDFs that can be distributed internally and externally, but it also lets you automate this process. You can drag and drop elements to build a PDF form, then collect data that’s automatically turned into a PDF.
For example, you might use JotForm PDF Editor to automate your contract creation workflow. When you need to create a contract with a new vendor, the vendor will fill out a form with their information. JotForm PDF Editor will automatically generate the contract from a template you’ve provided, and that PDF contract will either be routed to you for review or to the vendor to sign and return.
JotForm also integrates with a host of other workflow management software, including Zoho. The JotForm integration with Zoho can automatically create contacts and subscribers from JotForm entries, as well as trigger emails and Slack messages from JotForm submissions.
These are just a few of the ways JotForm can become part of your workflows and integrate with existing tools to improve your processes. JotForm has dozens of integrations that automatically send the data collected through your forms to different applications.
Because so much of workflow optimization is eliminating redundant steps, using JotForm to collect data and route it automatically to different programs eliminates the need for a human to do it — a step that also reduces the likelihood of error. It’s worth it to examine all the ways JotForm can help you with your workflows, even if you’re new to creating and optimizing workflows.
Conclusion
Workflow is a way to map out and streamline how you get work done. In some cases, that may mean automating tasks and using software to build custom workflows.
You’ve learned a lot about the basics of workflow, including how to create a workflow by examining your existing processes, and why you need to manage your workflows to be more efficient.
One of the ways that companies improve their workflows is through automation. It’s important to use a low-code workflow management software product so that business users can create their own workflows without involving IT.
This guide covered different types of workflows: sales invoicing, vacation approval, content requests, and expense reimbursements, to name a few. Workflow diagrams that model these workflows can help you visualize them.
Workflow analysis and workflow optimization can help make your workflows run even more smoothly. Integrations, like Approval Workflow for JotForm, can help you create workflows as well.
Now, you’re ready to start getting the most from your workflows. Use this guide as a reference as you revisit and refine your workflows, and your processes will run more efficiently.
It doesn’t take most web designers long to realize that the most critical objective you have when starting your freelance career is to find web design clients.
Why?
Because, without clients, you’re basically just playing “house” in business. It doesn’t matter how professional your logo is or how many business cards you’ve printed.
If you don’t have clients, you’re not in business.
There’s nothing better than getting your first client either. Getting someone to agree to pay you money for work you actually enjoy is one of the best feelings in the world.
With that in mind, I’d like to share how you can find your first web design client in 48 hours or less.
These techniques have worked for myself and thousands of other freelancers who I have coached and mentored for more than a decade through my blog and podcast.
They are tried and tested. And they work.
Here’s how to find your first web design client in 48 hours or less:
Start with quality freelance job boards
While some freelance job boards have a bad reputation for low-quality clients, the truth is lots of freelancers are making a good living through work exclusively found through freelance job sites.
Not every site will work perfectly for your business, but more and more freelance web design clients are hiring through sites like these and, if it’s a good match for your working style, you can find clients very quickly on them.
A word of warning, however: you can’t just phone in your success on these web design job sites.
You’ll be most successful as you take the time to stand out from other freelancers with a quality user profile, share examples, and even proactively reach out to potential clients on the platform instead of waiting for jobs to land in their lap.
Use your personal & professional network
Many freelancers searching for ways to get web design clients don’t realize there’s one asset sitting right under their nose and probably not being fully utilized.
That asset is your personal and professional network.
If you’ve been designing websites for long, you probably have some great connections from former jobs you’ve had. These connections often have friends or associates who need help with some sort of web design project.
If you’re new to web design, you’ll likely have friends in your personal network who know someone needing a beginner site done quickly.
These are golden opportunities for finding your first web design clients quickly.
But posting on Facebook or TikTok won’t be enough to get your first client within a 48-hour window.
Instead, consider calling, texting, or direct-messaging your closest connections—the people you know will take your request seriously—and asking them for help in finding new web design clients.
You’ll be surprised just how many people will come out of the shadows requesting web design work if you can just hustle to find them through your own networks. Once someone shows interest, send them a really high-quality proposal they won’t dare say “no” to.
Leverage the power of social media
Since this article is all about quick wins and short-term client acquisitions, there will be no advice in this section on how to get more likes on Instagram (although, we’ve got you covered here).
Instead, to get new clients in 48 hours or less, leverage the power of instantaneous social connection by using some under-utilized tools on social media.
For example, try searching Twitter for phrases like “hiring web designer” or “need a web designer” or “does anyone know a good web designer” to find people who are in need of an immediate solution. Send them a DM.
You can also use Linkedin to find employees at agencies that frequently subcontract with freelance web designers to complete client projects on-time. Combine that with a tool like Hunter.io, and you can reach out via email to just about anyone in the world.
Depending on how quickly you can spin something up, you may want to consider adding some real value to the world with a free download of some sort.
For example, offer to audit the speed and design of local business’s websites by setting up a lead generation form and then collecting website information and contact details.
Send a high-quality website audit along with a friendly pitch offering your freelance web design services.
If an audit isn’t quite your style, it could be something less labor-intensive like a simple checklist or ebook that helps small businesses with their own website.
From there, find online directories—like those posted by Chamber of Commerce or even Google—and send as many emails or make as many phone calls as you can in the next 24 hours featuring your offer.
Start straight-up cold calling and emailing strangers
Finally, if you’re serious about finding your first client(s) in 48 hours or less, you might just have to pick up the phone or open up your laptop and start contacting people out-of-the-blue.
Fair warning, this method is all about scale. You have to contact a LOT of people in order for this method to make sense (which is why it’s not terribly sustainable over time.
But for finding your first few clients, it can be rather effective—particularly if you don’t have many other resources.
Of course, there are ways to improve your chances of success. You can follow a proven cold calling script to improve your close rate or you can test various subject lines until you find the one that gets the highest response.
Tools like Reply.io can also help you quickly scale your email outreach while maintaining a personal feel.
Honestly, cold outreach is just good, old-fashioned hard work. And like most hard work, you can’t do it forever, but it almost always pays off.
Getting clients is just the beginning
Remember, getting your first web design client is just the beginning. So while it’s important (remember, you’re not in business until you actually have clients), it’s not the end of the world when someone says “no.”
Keep working hard, hustling to get your first few clients, and before you know it, you’ll find yourself swamped with new and exciting projects. Those projects will all turn into referrals and repeat business and, eventually, you’ll find yourself hustling less on outbound sales and fielding more inbound requests.
You’ve got this. Now get out there and get your first web design client!
When it comes to displaying shipping and inventory alerts on an e-commerce website, you have to be very careful about inciting panic in your shoppers.
“Item is out of stock.”
“Expect shipping delays.”
“Page does not exist.”
These words alone are enough to turn a pleasant shopping experience into a panicked and frustrating one.
You have to be very careful about how you design these notices on your site, too. You obviously want to inform visitors of changes that impact their shopping experience, but you don’t want panic to be the resulting emotion when your alert is seen.
Better Search UX
For large-scale and e-commerce sites, the search experience is an increasingly critical tool. You can vastly improve the experience for users with thoughtful microcopy and the right contextualization. Read a related article ?
When people panic, the natural response is to find a way to regain some control over the situation. The problem is, that regained control usually comes at the expense of the business’s profits, trust, and customer loyalty.
If you want to better control your shoppers’ responses and keep them on the path to conversion, keep reading.
Note:Because the following post was written during the coronavirus pandemic, many of the alerts you’re going to see are related to it. However, that doesn’t mean these tips aren’t valid for other panic-inducing situations — like when a storm destroys an area and it’s impossible to order anything in-store or online or like during the November shopping frenzy when out-of-stock inventory is commonplace.
She has a great analogy to help us understand why this happens:
Have you ever felt as if another driver stole your parking spot or were upset when someone else nabbed the last sweater that you had your eye on? If so, you experienced psychological ownership. You can feel psychological ownership over pretty much anything that doesn’t belong to you, from the last chocolate truffle in a display case to the dream home you found on Zillow and even intangible things like ideas.
When it comes to shopping in person, people exhibit territorial shopping traits by placing their items in a shopping cart. Or when they put a separator bar between their items on a conveyor belt and the person’s behind them.
We don’t really have that luxury on a website. The best we can do is enable shoppers to save their items to their cart or a wishlist, but that doesn’t keep the items from selling out before they have a chance to buy them.
This can lead to huge problems, especially when a shopper has gotten excited about that toy or shirt they “put aside”, only to discover a few hours later that the item is gone or no longer available.
The worst thing you could do is to remove out-of-stock product pages. You don’t want shoppers running into a 404 page and experiencing not just panic but also confusion and frustration.
While not as bad, I’d also recommend against displaying an inactive “Sold Out” or “Out of Stock” notice or button to shoppers as Olivela has done here:
The Olivela website displays an inactive ‘Sold Out’ button for its denim mask product. (Source: Olivela) (Large preview)
Seeing this kind of feels like Google Maps directing you to your destination, only for you to end up at the edge of a lake where there’s supposed to be a road.
“Why the heck did you even send me here?”, is what your shoppers are going to wonder. And then they’re going to have to turn around and try to find something comparable to buy instead.
There are better ways to handle this that will also reduce the chances of your shoppers panic-buying a second-rate substitute for the item they really wanted. And this plays into the idea of territorial shopping (but in a healthy way).
This is what Target does when an item is “temporarily out of stock”:
Target provides shoppers with the option to get notified when out-of-stock items become available. (Source: Target) (Large preview)
Rather than display an unclickable button and just completely shut down shoppers’ hopes of getting the item, a “Notify me when it’s back” button is presented. This is a more positive approach to handling out-of-stock inventory and, if customers really want the item, they’re more likely to use it rather than settle for something else or try another site altogether. (I’ll talk about the “Pick it up” option down below.)
Another way you can handle this is to do what Summersalt does and turn your “Sold Out” button into a “Pre-order” one:
Summersalt provides shoppers with ‘Pre-order’ button for out-of-stock items. (Source: Summersalt) (Large preview)
What’s nice about this button is that it not only empowers shoppers to secure the currently unavailable item they have their eyes on, but it tells them exactly when they will get it.
So, if you know when inventory will be restored, this is a better option than the “Notify” button as there’s more transparency about availability.
2. Don’t Over-Promise Or Give Your Shoppers False Hope
It’s a good idea to keep your shoppers informed about how external situations may impact their online shopping experience. And you can use key areas like the website’s sticky banner or a promotional banner on the homepage to do that.
Consumers know to look at these areas for things like promo codes and sales event details.
If you put anything else in there, you better make sure the notice is positive, useful and truthful.
Let’s take a look at what’s going on with the Gap website:
Gap’s ‘Taking Care Takes Time’ notice addresses shipping delays due to COVID-19. (Source: Gap) (Large preview)
Gap has three notices that appear in the header of its site:
In black: “Free shipping on $25+, free returns on all orders.”
In white: “Taking Care Takes Time. We’ve implemented special procedures as we work to keep our teams — and you — safe, so shipping of orders may be delayed.”
In blue: “Extra 50% off markdowns + more.”
It’s overwhelming. And it’s almost as if they wanted the alert in the middle to be ignored (or missed altogether) as it’s sandwiched between two very sharp-looking banners that promote attractive deals.
If your alert is related to something that’s going to affect the shoppers’ experience, don’t bury it and don’t try to massage it with overly optimistic messaging. Also, don’t contradict it with another alert that suggests the first one isn’t one to worry about.
Here’s why I say that:
Gap promotes ‘Our Masks are Back’ on the homepage of its website. (Source: Gap) (Large preview)
This message is problematic for a couple of reasons. For one, Gap’s masks aren’t really “back” if they’re only available for pre-order. Second, it runs contrary to the top banner’s message about shipping delays.
Unsurprisingly, shoppers did not react well to this hyped-up announcement:
Gap receives an extraordinary amount of backlash on Facebook over mismanagement of shipping and promotions. (Source: Gap) (Large preview)
When Facebook ran a promotion on Facebook about the masks, it received a huge amount of backlash from customers. Many customers didn’t want to hear about the masks because they’d been waiting over a month for existing orders to ship and couldn’t get a customer service rep to talk to them. There were also complaints about items being canceled from their orders, only for them to magically become “available” again in the store.
A website that’s handling similar circumstances well right now is Urban Outfitters:
Urban Outfitters, like a lot of non-essential retailers right now, has had to make some adjustments in order to stay alive. But rather than displaying a notice alerting online shoppers to shipping delays like many of its counterparts, Urban Outfitters has turned it into a positive.
The banner reads: “Your local UO is now offering curbside pickup!”
There’s no hidden message here that tries to explain away the brand’s bad behavior. There’s no greedy cash-grab, promising deep discounts for people who shop with them despite likely delays in shipping. There’s no overhyping of a promise they can’t possibly keep.
This is an actionable offer.
What I’d suggest for e-commerce businesses that want to keep customers on their side — even during a tumultuous time — is to keep their alerts simple, honest and useful. And if you’re going to promote multiple ones, make sure they tell the same story.
3. Soften The Blow By Promoting Multichannel Options
I recently signed a new lease on an apartment but was dismayed to discover that my move-in date and furniture delivery date wouldn’t line up because of shipping delays. I was well-aware of this when I made the purchase, but I wasn’t as prepared as I wanted to be. And because we were in the middle of a city-wide lockdown, I was unable to crash with friends who live over the state border.
I thought, “I’ll sleep on an air mattress. No biggie.” But then remembered I left mine behind in Delaware. So, I had to figure out a way to buy a cheap air mattress.
All of my go-to e-commerce websites had shipping delay alerts. And as I perused their available products (which there were very few), my panic only worsened. Until I discovered a website that offered BOPIS.
Buy-online-pickup-in-store is a shopping trend that’s proven very popular with consumers. According to data from Doddle and a report from Business Insider:
68% of U.S. shoppers have used BOPIS on numerous occasions.
50% have chosen where to shop based on BOPIS availability.
Shipping costs (avoiding them), speed and convenience are the primary reasons why customers prefer to buy online and shop in-store. It’s the best of both worlds.
If you’re building an e-commerce site for a company with retail locations that do this, then make sure you get customers thinking about it right away.
Barnes and Noble, for instance, enables shoppers to set their preferred local store:
Barnes & Noble allows shoppers to set their preferred retail store location. (Source: Barnes and Noble) (Large preview)
This is a great feature to have. The only thing I’d do differently is to place a button in the header of the site that immediately takes them to the “Change My Store” or “Find Store” pop-up or page. That way, shoppers don’t have to wait until they’ve found a product they like to discover whether or not it’s available at their store for pickup.
Once a user has set their store location, though, Barnes & Noble remembers it and uses it to enhance the remainder of the shopping experience:
Barnes & Noble uses shopper location information to enhance search listings. (Source: Barnes and Noble) (Large preview)
This is what search listings look like for “Magna Tiles” on the Barnes & Noble site when the user sets their search to “List” view. Pretty neat, right? While “Grid” view is standard, only showing the featured image, product name and price, this view provides extra detail about availability.
This can provide a ton of relief for shoppers who too-often encounter “out-of-stock” or “not available in store” notices on individual product pages. This way, they can spend their time looking at the items they can get the most quickly and conveniently. There are no surprises.
If cross-channel options are available — between website and mobile app, website and retail store, website and third-party delivery service — make sure you call attention to them early on so customers can take advantage of the streamlined shopping experience.
Wrapping Up
Panicked shopping can lead to serious issues for your e-commerce site. Rather than put your shoppers in a situation where they grow impatient, dissatisfied, and frustrated by the site that seems to put up barriers at every turn, design your alerts so that they turn a bad experience into a positive one.
You just read the title of this article and you didn’t even think twice about it.
When we read, we don’t even realize that we’re reading and doing something incredible.
Something so simple, so insignificant to us, is an entirely vital part of life.
Something we do all day long and don’t pay any attention to it.
Did you know that 18% percent of New Yorkers face the daily struggle of illiteracy?
Think about what life would be like if you couldn’t read.
How difficult day to day life would be.
Sans 18% is a broken typeface created specifically to show us what it’s like to not be able to read.
This new typeface was intentionally created to be unintelligible.
To show us the struggle of what it is like to not be able to read, and to put ourselves in the shoes of others.
Sans 18% was created by Literacy Partners with the intent to show us what life is like for roughly 18% of New Yorkers who can not read, and to give a solution to people who face this problem.
When you can’t read, you face problems you would never imagine.
Reading and understanding important documents is impossible.
Being independent becomes a million times harder.
This font shows you what it’s like to look a billboard, document, or even doctor’s prescription and not be able to understand what’s going on.
The video from up above, which is narrated by a person who learned how to read from the Literacy Partners association, shows just how important it is to be able to read.
I personally am all for Literacy Partners.
Literacy Partners provides free classes, books, workshops, and education to immigrants and caregivers in New York who want to learn how to read.
The PSA video was shared on Times Square for one day, and is running digitally with pro bono support from media agency m/SIX.
CEO of Literacy Partners, Anthony Tassi said, “We can’t afford for some members of our community not to be able to read basic public health information. Their inability to do so has potentially fatal consequences for not only their families but for everyone around them.”
They have also ensured that the literacy programs have been made available online for those who cannot attend in person, and they have made sure that the families who participate in these workshops and classes have all the technology they need in order to participate.
If you want to help teach New Yorkers how to read and come together as a community to support Literacy Partners, you can donate directly on their website.
Any donation helps.
You can also download the font by creating an account on their website.
Although no one knows exactly what factors search engines use to return entries in their SERPs (search engine results pages), we know that backlinks are incredibly important. Backlinks are any form of a link from another website that points to your website (or web pages).
Whilst there has been plenty of research to suggest there is a positive correlation between the number of backlinks and high-ranking pages, it’s a seriously tough cookie to crack. The main issues businesses face are time, money, and effort.
Many people don’t have enough time to write guest posts and reach out to other sites, and certainly not enough to regularly churn out lots of fresh and unique content.
It’s true that creating relevant and high-quality content can get you high-quality links. However, there are other strategies you can use to get ahead in this game. Don’t let an inability to create content stop you from earning links.
Here are 3 of the best ways to build backlinks without writing any content.
1. Broken Link Building
Broken links lower the value of a website. As a user, there’s nothing more frustrating than clicking on a link, only to find it doesn’t exist or it’s broken. However, broken links can serve a great purpose as a way to build backlinks without writing content.
How? Well, you can run any website you want through a broken link checker, then get in touch with the site owner to let them know. How does that help you? It’s simple. Ask them to replace the broken link with one of yours in return of your favour.
While it may seem a little sneaky, broken link building is an incredibly effective way of acquiring links. You don’t have to rely on writing content and you can pick and choose which websites you want linking to you. This offers a lot of control, allowing you to filter out sites with low authority or high spam scores.
Benefits of broken link building
By reaching out to website owners and pointing out their broken links, you’re actually doing them a favour. Not only are you outlining an issue, but you’re also giving them an opportunity to make their user experience better, which is often greatly appreciated by them.
Instead of webmasters having to fix their broken links and contact the existing links’ website owners, you’re offering a quick get out for them by giving them a relevant and working article to link to. It’s a great way of expanding your content reach too as you can include blog posts, articles, infographics, and videos.
How does broken link building work?
Before doing anything, you’ll want to consider your desired keyword to start finding relevant websites you can target. Once you have this in mind, you can use a tool to identify broken links:
Run your keyword through a Google search, looking for links, blogs, and useful sites
Select the top 20 results from your search filters
Move your chosen links into ahrefs to locate any broken outgoing links
Check domain authority, page authority, backlink profile, and spam score to identify your final list of websites
Reach out to webmasters, site owners, and editors by email to notify them of their broken links, as well as suggesting your own content to link to
2. Curate Infographics
72% of marketers report that visual content is more effective than text-based marketing. The beauty of using infographics to build backlinks is that you don’t have to create your own infographic content if you’re not able to.
There are plenty of websites you can use to hire designers to create infographics for you, or you may want to consider signing up for WordPress hosting so you can make use of WordPress’s infographic plugins. Alternatively, if you don’t want to spend a load of money on fresh infographics, you can curate them from elsewhere.
Ideally, the best way to build backlinks is by offering your audience a mix of content; written content, videos, and infographics.
Benefits of curating infographics
Infographics are shareable. This means you can generate high-quality authority links to your website. Not only are you able to increase your brand visibility, but you’re also able to boost your SEO whilst standing out from the crowd
The majority of existing infographics will display their embed code, making it easier than ever to share relevant infographics on your website (and vice versa).
There are a lot of opportunities out there for sharing infographics made by marketing teams who don’t know how to share them with the correct audience. You can be the middle man, helping them promote their infographics, while building up your link profile, and increasing your website’s authority.
How does curating infographics work?
I recommend finding around 5 relevant and high-value infographics to start with by following this simple process:
Use Google Images to locate relevant infographics, searching for your keyword, e.g. “how to boost SEO” with the addition of “+ infographics”.
Look through your search results and choose an infographic you would like to curate
Use a screen capture tool to snip the sections of the infographic you want (always remember to link to the original infographic) or copy and paste the embed code to your CMS
3. Reclaim Brand Mentions
Often when people research how to build backlinks, there’s plenty of information for new businesses, or for businesses who haven’t yet built much of a portfolio. However, there’s rarely relevant information for successful and established businesses.
If your business has been around for a while it probably already has many positive brand mentions across the internet. However, many of them won’t contain a backlink to your website. That’s where the issue lies. This method relies on turning that around.
Benefits of Brand Mentions
It’s easy to find and monitor brand mentions using a social listening tool, most of which offer free trials.
There is little effort required to reclaim brand mentions because you’ve done the hard work already. Having your brand mentioned on another website is the difficult part, so all that’s left is for you to reach out in order to claim the link
Brand mention reclaiming is cheap. In fact, you can do it without any paid tools at all… just a few simple and smart search queries
How does reclaiming brand mentions work?
Although there are tools out there that you can pay for, we recommend using a free trial at first or making use of Google. The best free method is to use advanced search operators like the ones below to find link acquisition opportunities:
In order to find mentions of your brand name, type the following into Google’s search engine: “Brand Name” -site:yoursite.com -press -release -site:facebook.com -site:twitter.com
To find mentions of your brand’s previous announcements – Google makes regular announcements, as do other companies – use the following: “brand name” “announced” -site:yourwebsite.com -press -release
Once you have a list of targets, reach out to those sites via email. We recommend you make your emails personalised and friendly. Mention where you found your brand mention, that you appreciate it, and that you’d like a link back to your website so readers could find more information
Conclusion
Google’s algorithm keeps us all on our toes, and earning high-quality backlinks without writing content is not something most site owners consider. However, there are certainly ways in which you can build authoritative backlinks without writing fresh content.
But, although you’ll see success with these methods, we recommend striking a balance between creating fresh content, reusing existing content, creating infographics and keeping up with brand mentions.
We doubt content will be stepping down off its throne any time soon. However, link building is just as important to promoting your brand, generating leads, increasing revenue and, ultimately, building a stronger brand.
I decided to implement almost all of the UI by just adding & removing CSS classes, and using CSS transitions if I want to animate a transition.
An awful lot of the JavaScript on sites (that aren’t otherwise entirely constructed from JavaScript) is click the thing, toggle the class — which is why jQuery was so good and libraries like Alpine.js are finding happy developer audiences.
Sometimes, to start a journey into learning something huge and complex, you need to learn something small and simple. JavaScript is huge and complex, but you can baby step into it by learning small and simple things. If you’re a web designer, I think there is one thing in particular that you can learn that is extremely empowering.
This is the thing I want you to learn: When you click on some element, change a class on some element.
The COVID 19 pandemic may have shut many doors for businesses. Still, there is a growing trend in online shopping—people feel more comfortable purchasing products online than risk going out to buy from physical stores. This is why SEO for e-commerce is becoming vital for e-commerce shops now more than ever.
You see, with more and more consumers preferring to buy from online stores since the pandemic, thousands of business owners are also setting up their e-commerce websites (or are now paying more attention to their online shops) to better sell their products that may be similar to yours. Therefore, you are gaining more competitors each day.
In order to keep your sweet spot or ranking on the search engines, gain more visibility, drive quality web traffic to your online store pages, and increase your shop’s conversion, you must bank on your e-commerce SEO efforts.
So, in this article, we will explain how SEO can help your e-commerce business thrive during a pandemic and beyond.
Let’s begin.
What is SEO Commerce?
Commerce SEO, also known as Search Engine Optimization, is the method of optimizing your online store so that it can rank better in the search engines, such as Google and Bing, drive more organic traffic to your site pages, gain more traction from your target market, provide a great experience to your buyers, and ultimately, help you boost your shop’s conversion.
Moreover, e-commerce SEO is an extensive method that requires time, patience, and some nitty-gritty work, and it has four main branches:
On-Page SEO
On-page optimization refers to the efforts done inside your online store, such as optimizing your product pages and category pages, publishing blog posts, and planning your internal links.
Off-Page SEO
Off-page optimization refers to the efforts done outside your online shop, such as link building, guest posting, and content marketing through email, social media, and forums.
Technical SEO
Technical optimization refers to the efforts done to optimize the technical aspects and experience of your users when navigating your website, such as fixing backend codes, improving your site structure, making sure you have no duplicate content on your web pages, ensuring that your site loads fast and is mobile-friendly.
Local SEO
Local optimization is highly recommended to online businesses that also have physical stores. It can help big time when you’re trying to drive more foot traffic to your location by appearing on top of local search.
Ecommerce SEO helps you get more visibility and site visitors by ranking on top of the search results.
Visibility is one of the crucial factors that will help your online store thrive in the e-commerce industry, which is growing competitively.
Did you know that 71% of consumers click on the first page of Google, the leading search engine globally?
Therefore, it’s safe to say that your potential buyers won’t even care to go to the second page, especially if the results on the first page, which typically includes 10 results, show them what they’re looking for or provide them what they need.
Now, when you look at the click-through rate (CTR), meaning the number of clicks that each result gets, the top-ranking positions also get the lion’s share. In May 2020 alone, the CTR of the #1 spot reaches up to 32% while the second spot gets a measly 16%, and the number dramatically declines from there.
So, ranking on top of the first page of the search engine results pages (SERPs) can really pay dividends.
How do I rank on the first page of the SERP? Glad you asked.
The short answer is to invest in your SEO commerce efforts.
You can start with the following:
Keyword Research
Keywords or terms are considered to be the foundation of every optimization—without knowing which key terms to target for your web pages; your SEO may be deemed futile.
So, it’s very important that you do data-driven term research, including long-tail keywords for your blog posts, category pages, and, most importantly, product pages.
You can mine keyword ideas from Amazon and other competitor ecommerce sites.
When you perform keyword research, especially long tail keywords, choose the terms with high volumes but relatively low competition and easy search difficulty.
Now, take note that the search volume depends on your niche—while some treat 110 volume as too low, other niches may find it desirable to target.
High-quality, Useful, and User-Intent Driven Site Content
Your site content is what attracts your target audience—from your catchy headline to your call-to-action (CTA). So, it is crucial to publish quality, helpful, and relevant content, even though it’s a “selling page,” such as a product page.
Other than doing data-driven research on keywords, the other thing that you can do to achieve high-quality content is to research or study the user intent.
Pro Tips on User Intent Research:
Make sure to specify the target region of the term you’re trying to target
Type your target keyword on Google
Take note of Google’s People Also Ask section.
Study the results on the first page of the SERPs:
Are they informational?
Navigational?
Transactional?
Informational means that the users intend to learn more about the specific subject.
Navigational means that your target audience intends to look for a product or service.
Transactional means that your potential customers intend to find a specific brand, website, or location.
SEO ecommerce helps you convert site visitors into buyers
Of course, ranking on top of the SERPS and being visible to your target market is not enough. At the end of the day, you will be looking at conversions, sales, cash flow.
Well, if you get the sweet spot on the SERPs, though, you are winning half of the battle. Thanks to SEO.
However, the other half of the battle happens inside your site—your online store visitors must become your raving fans, helping you cash despite these extra challenging times.
How do I do that? Glad you asked.
Besides writing useful content and compelling copies that sell, you also need to make sure that your visitors are having a pleasant time when they are navigating your e-commerce store.
Take note of the following factors:
Fast Load Speed
Did you know that 47% of your online store visitors expect your website to load within 2 seconds or less? And 40% of online shoppers will abandon your website if it takes more than 3 seconds to load.
And the longer it takes for your store to be up and running, the higher your bounce rate will become—the percentage of potential buyers abandoning your online shop for reasons, such as slow load speed, poor mobile responsiveness, and lousy navigation experience.
You can check the speed of your web pages by running a test on Google’s PageSpeed Insight. What’s more, you can heed the recommendations of this free tool to improve your site speed.
Mobile-Friendliness
Did you know that four out of five Americans are now fond of shopping online? Plus, more than half of these consumers use mobile devices when buying products online.
So, it is imperative that your online store is mobile-friendly, which means that the overall website design must look good and must be responsive when users are navigating your store using their mobile devices, such as laptops, tablets, and smartphones.
You can check if your online shop is mobile-friendly by running a test on Google’s Mobile-Friendly Test. Just like the PageSpeed Insight, the tool also gives recommendations to improve the responsiveness of your web pages.
Overall Great User Experience
Besides making sure that your online store loads fast, is mobile-responsive, has great and compelling content, there are other factors that you need to consider to make sure that your potential buyers are having such a great experience in your online shop.
These factors include:
The immediate answer to what the customers want—make sure to give them what you promised them on your headline, which they see on the SERPs.
Quick and easy navigation—do your best to limit the customer’s journey into 3 clicks from the home page or landing page to the product page (this has a lot to do in your site structure).
Keep the check out page easy and simple—give an option not to sign in such as a “one-time purchase option,” and provide plenty of payment methods for even better convenience.
Takeaway
E-commerce SEO is crucial if you want your online business to thrive—it is one of the single biggest actions you need to take in order to keep your authority in your niche (or become one) and set yourself apart from a growing sea of competitors. If you think that your online store is having a hard time staying afloat during these challenging pandemic times, feel free to ask the e-commerce and SEO experts for help so that you can get started with an even profitable business.
