Your Web Designer Toolbox

Unlimited Downloads: 500,000+ Web Templates, Icon Sets, Themes & Design Assets Starting at only $16.50/month!

DOWNLOAD NOW

Wappalyzer

Wappalyzer is an indispensable extension that identifies the technologies used on any website. With just a click, you can get detailed insights into the frameworks, libraries, content management systems, and more, providing valuable context when troubleshooting or researching new projects.

Lighthouse

Developed by Google, Lighthouse is a powerful tool for checking a website’s performance, accessibility, and SEO. With this extension, you can quickly generate reports that provide actionable recommendations to improve your site’s overall quality and user experience, ensuring that your project adheres to best practices.

Web Developer

The Web Developer extension equips your browser with a plethora of web design-related tools. It offers various features including DOM manipulation and CSS inspection to form control and responsive design testing. While it may seem more oriented towards developers, as a designer, understanding and using these features can facilitate a healthy collaboration with the development team.

CSSViewer

CSSViewer is a simple yet handy Chrome extension that allows you to inspect the CSS properties of any page element. By hovering over the desired element, you can instantly view its dimensions, fonts, colors, and other CSS properties, making it easier to debug and refine your designs.

Axe

The Axe extension assists in auditing your website for accessibility issues and offers practical guidance on addressing them. This tool is designed to eliminate false positive results, saving you time by focusing on genuine issues.

Bonus Pro Tip

For an additional productivity boost, consider using a Chrome extension like Tab Wrangler to automatically manage and close inactive tabs, reducing clutter and freeing up valuable system resources during your development sessions.

Once you’ve agreed that you need one, finding the right project management tool can be a daunting task. That’s why we’ve gathered some of the best options available right now to save you some of your valuable time. What follows are some of the best project management tools for freelancers we’ve found that you can start using right now, with either free or very affordable pricing.

Kosmo

Kosmo purports to be the best tool to manage clients, projects, invoicing, proposals, contracts, payments, and more, all in one place! It really sounds to good to be true, but based on our research, it actually is.

Features:

• Unlimited clients with contact information, related invoices, and projects
• Unlimited projects with goals, files, notes, and more
• Unlimited branded invoices
• Unlimited proposals and contracts that can be digitally signed
• Accept online payments via credit card, ACH transfer, Stripe, and PayPal, with payment tracking and reminders
• Time and task tracking that can be added to invoices easily
• Trackable income goals
• Recurring tasks
• Branded emails
• Reminders

For an overview of how it all works you can watch their excellent video.

Pricing

Here’s the best (and almost unbelievable) part: all of these features are absolutely free! We don’t know how they can offer this robust of a project management system for no cost to the user, but they do! The only way you will pay anything is if you want to remove the Kosmo branding and get priority support, which is also very affordable at a cost of $9 per month, and that plan is not even available yet. Still, you can utilize all of their features with your own branding and without limitations 100% free.

Conclusion

Honestly, we’ve never seen a free or even paid project management tool that incorporates all of these elements into a single system, much less do it so well. It’s seamless, intuitive, beautifully designed, and a huge time saver. To be clear, this is not a sponsored post, nor are we receiving any affiliate commissions or any other incentives to rave about Kosmo as much as we are – it’s simply too good to not share! The only caveat we can come up with is that it is a very new tool, so there will be more to come as it gets discovered and grows, but we can’t attest to its longevity at this point. That said, we’re already moving our projects into Kosmo as of this writing, so we can move away from using a variety of separate tools and apps that don’t necessarily integrate well together. In our opinion, Kosmo is the best project management tool for freelancers that is available right now.

ClickUp

ClickUp says it is “one app to replace them all”, and it doesn’t look like they are kidding! Projects and tasks, chat with clients and team members (if you have a team), goals, and customizable views are just a few of the features they offer yet another well-designed package. ClickUp is a much more complex system than Kosmo, which may or may not be suited to your needs, but if you want a vast amount of features and granular organization and control of every aspect of your work, then ClickUp may be a great tool for you.

Features and Pricing

Honestly, there are way too many features to list here, but you can check out their features page to view them all. here are some of the top level items available in the Free plan to give you an idea.

• 100MB Storage
• Unlimited Tasks
• Unlimited Members
• Two-Factor Authentication
• Collaborative Docs
• Whiteboards
• Real-Time Chat
• Email in ClickUp
• Kanban Boards
• Sprint Management
• Native Time Tracking
• In-App Video Recording
• 24/7 Support

From there, you can upgrade to the Unlimited plan for only $5 per month, which includes everything in the Free plan, plus the following:

• Unlimited Storage
• Unlimited Integrations
• Unlimited Dashboards
• Guests with Permissions
• Unlimited Gantt Charts
• Unlimited Custom Fields
• Teams (User Groups)
• Goals & Portfolios
• Form View
• Resource Management
• Agile Reporting

Conclusion

ClickUp is a massive, robust project management tool that rivals those used by large businesses, and, in fact, it has plans available to accommodate such use cases. For solo freelancers this may be too much, but if you are someone who really likes to dig deep into your project management, planning, and organization down to the finest details, then ClickUp could be your solution. We couldn’t find any invoicing or payment options, however, so if you’re looking to include invoicing in your project management tool, then ClickUp may not be right for you. Otherwise, for the highly detail-oriented freelancer, ClickUp offers just about everything you could possibly need at a very affordable (or even free) price!

Hectic

Hectic is another app that is similar to Kosmo, designed specifically for freelancers with a feature list to manage and grow your business in one place. Client management, proposals and contracts, accounting, invoicing, time tracking, a client portal, a mobile app, and more make Hectic an appealing project management solution.

Features and Pricing

The “Free forever” plan offers pretty much everything you need to get started, without any limits and the ability to upgrade as your business grows.

• Unlimited clients
• Client relationship management
• Project management
• Invoices & Subscriptions
• Accept online payments
• Proposals & Contracts
• Expenses & Accounting
• Forms
• Time tracking
• Calendar
• iOS & Android apps

If you want or need even more features, the next tier costs only $11.99 per month and includes everything in the free plan plus:

• Client portals
• Custom domain & emails
• Meeting scheduler
• Sales pipeline
• Collaborators
• Automated expense tracking

Conclusion

Hectic looks to be a freelancer’s project management dream. It is similar to Kosmo in what it has to offer, with additional features that may be more appealing to freelancers who need them. With all of this available for free or a low monthly price, it is easy to see why Hectic made our list.

Which project management tool is the best fit for you?

It’s pretty obvious in which direction we lean as our top pick, but each of these three offerings are great choices. It really depends on what your personal preference and use case is, and determining which one of these tools will best fit. Regardless of which one you choose, we know that utilizing one of these project management tools will help grow and significantly improve your freelance business, so be sure to try and pick one to start wrangling your projects, clients, and entire business under control.

One area that is particularly tough to manage is when it comes to our process for getting things done. If you deal with multiple clients, each one of them has their own distinct way of working. Some are night owls and feel the need to send email when the moon is out. Others expect a lot of in-person meetings – something difficult for a busy web designer to fit into their schedule.

Trying to accommodate each and every client’s way of working often leads to chaos. It makes getting things done more difficult and will leave you scrambling to find some level of consistency in your workflow.

Sound terrible? Sound familiar? If you’re banging your head against the wall, know that change is possible! Let’s take a look at some ideas for getting clients to work in a way that benefits you.

Create Processes That Work for You

During the early part of my career as a freelancer, I really had no process for getting things done. That is, unless you count waking up and walking over to the home office. There wasn’t any real organization to speak of and I haphazardly went back-and-forth between tasks. Sort of like a single-player game of table tennis.

Not only that, I was often running out to meetings and taking a seemingly endless number of phone calls. This led to a lot of stress, and a pile of work that I couldn’t seem to get through. Eventually, I realized that a change was needed.

So, I started putting some processes in place. Each one acts as a bit of a boundary for both my clients and myself. They’re not perfect, but have produced some positive results. Among them:

Limit Meetings

I now avoid going out to meetings when possible, and they are usually reserved for higher-revenue clients. As most of my clients are based at least a half hour from my office, I found that, when accounting for travel, even a short meeting tended to take up several hours of work time. Replacing meetings with phone calls or video chats (which I limit to specific hours) has saved a ton of time, while keeping the lines of communication open.

Reserve Time for Each Task

Understandably, clients tend to want things done “as soon as possible”. At the same time, it’s not always possible to drop everything you’re doing (something I tried and struggled with). So, for non-emergencies, I now carve out time to take care of each task on my to-do list. I let clients know an approximate time for completion, which provides both of us with some certainty. And this little bit of organization also serves as a pretty good stress reducer for the designer.

Remain Flexible, Within Reason

Maybe it sounds counterintuitive, but I still try to maintain some flexibility when working with clients. Why? Because, in a healthy relationship, nobody gets their own way all of the time. And I’ve found that people are generally more willing to work within my guidelines if they know that I’m willing to accommodate some of their requirements, as well. The key is not in abandoning your process, but in making reasonable compromise where possible.

Making It Stick

While it’s one thing to dream up a list of processes that sound good, adhering to them is a whole other ball of wax. Frankly, this is the most difficult part of the journey – especially if you’re not accustomed to placing limits on others.

I certainly fall into that category. I hate conflict and I’m not one who likes to tell others what to do. But I found that implementing these changes wasn’t about controlling others, so much as it was about self-control. That’s where it all begins.

And one of the best ways to take charge of a situation is to put it in writing. This means letting new clients know how you work. Perhaps these policies are included in your contract or a welcome letter. This sets the standard from the very start and positions you for a productive path forward.

For existing clients, particularly those who are used to doing things the old way, it’s only natural to feel a bit of trepidation. After all, the goal here is not to upset clients or drive them away. This is where clear communication can be a big help.

One way to do it is to write a letter to your clients. Explain your new policies and what it means for them. Most importantly, let them know why you’re making changes. When they recognize the reasoning behind your policies, they’re more likely to accept and adhere to them. Most people are very understanding, you just need to give them a chance.

It’s also worth noting that the transition to a new way of working isn’t always smooth. Old habits will die hard for both you and your clients. But with consistent effort, things can indeed change for the better.

The Benefits Are Real

The hardest part about running a web design business is in actually learning how business works. Quite often, we start out as designers first. Therefore, we may not have the necessary tools to run things right from the start.

That can lead to a workflow that is chaotic and disjointed. And the more clients you book, the crazier it all becomes.

However, when you start to implement the right processes, you can bring some sanity to how your business runs. You’ll get things done more efficiently, avoid constant interruption and can better prepare yourself for your projects. All the while, you can still communicate effectively with clients – just in a more structured way.

The result is a more streamlined business that is better-positioned for future growth.

Over the past ten years, the web has made huge strides in making sites accessible. But it’s up to you, the designers and developers, to optimize your own websites. Not sure where to begin? These tools and guides for web accessibility will help you design a better web.

Introduction to Web Accessibility

What is web accessibility, why should you implement it, and – most importantly – how can you do so? This invaluable resource introduces you to the basics of accessibility and can help you get started in optimizing your site.

The A11Y Project

Accessibility isn’t an easy topic to broach. With dozens of standards and hours of reading material, some people just don’t bother. The Accessibility Project aims to make the topic much more approachable, with easy-to-read articles, bite-sized tips, and plenty of helpful guides.

Contrast

High contrast colors are very important for those with visual impairments. There are tools to check your site’s color contrast, but that disrupts your design flow. This macOS app scores colors instantly. No more guessing or spending minutes inputting hex codes.

Stark

What if there was a tool that let you design with accessibility in mind from the beginning? Stark is an Adobe XD and Sketch plugin that does just that. Check contrast, run colorblind simulations, and get quick color suggestions. Now you can create a site that’s beautiful and accessible even during the mockup phase.

tota11y

Tota11y is an extremely useful tool that activates from your browser bookmarks and notifies you of accessibility violations on a page. It’s open source and comes with many plugins that all detect a range of issues. Activate it on your site and see if you pass!

Accessible Color Matrix

Picking a palette? This tool shows you how your palette will work in action, and notes when it doesn’t meet the contrast requirements. Now no one will struggle to read text on your site.

WAVE Web Accessibility Tool

WAVE is a webpage checker that runs a page through a variety of standards, reporting back errors, alerts, and correctly implemented features in an interactive panel. While it’s no replacement for human testing, it can help set you on the right design path.

Web Accessibility Checker

This accessibility checker reports issues on a page in a simple list segmented by known, likely, and possible problems. This one also comes with extra features, like the ability to upload or paste an HTML file. You can also check against different standards!

HTML5 Accessibility

Wondering what accessibility features are supported by major browsers? This nifty resource details info about individual elements and how they test for support by browsers.

18F Accessibility Guide

This is a fantastic collection of resources, guides, and articles about web accessibility. If you need even more reading material, start here! It’s also a great source of testing tools for businesses.

AccessLint

GitHub user? This accessibility checker automatically detects and points out violations, simple as that. It also re-reviews code changes to let you know if you’ve really fixed the issue. For open source projects it’s totally free, but you’ll need a monthly subscription if you run a private project.

Lighthouse

Lighthouse is an advanced tool available right from Google Chrome’s developer tools. Along with performance issues it also checks for accessibility errors. You can run it from Chrome, the command line, or as a Node module.

Making the Web More Accessible

Nearly 1 in 5 people in the US have a disability. 3.2 million Americans are visually impaired, while 8.2 million have vision problems, and that number is only growing. You should do your best to follow accessibility standards, so that everyone can browse your site without having to contend with garbled screen reader output, difficulty reading, and headaches.

Something as simple as adding alt text to images and increasing contrast can make a huge difference to your disabled users, but there’s always more you can do. Don’t make accessibility an afterthought.

Any new tool in your design arsenal must excel in areas where other programs are lacking. Bannersnack reduces your time investment when making animated and static banner ads or social media headers and other images.

Banner Ad Problems

Designers must address a range of issues when designing banner ads:

• Clients want everything done today
• Clients want multiple sizes of banners
• All banners must be responsive
• Clients require banners in numerous formats
• Animated banners are challenging to make
• Finding templates to base a design on
• Clients want you to use their fonts and photos
• You need analytics and heatmaps

Bannersnack addresses each of these problems and allows you to meet client expectations quickly and efficiently.

Check out Bannersnack for yourself to see everything it can do. (Hint: All of the above)

Short Deadlines

All things are possible if you use the right tools. Bannersnack lets you produce more designs in less time, meaning you earn more and clients are happy with your fast turnaround time.

Template-based design can save you hours on a project, while the results are of similar quality to designing from scratch. There are thousands of Bannersnack templates, and each has been created by professionals. You can search by user category to narrow the choice and quickly find a template you can adapt by using your own photo and font choice.

Bannersnack’s templates cover a wide variety of banner ads and social media posts.

When you examine the templates above, the quality of the designs leaps off the screen at you. These templates will work, and no client will know you haven’t done their project from scratch.

Sets of Banner Ads

A Pro-Bannersnack subscription includes the use of an ultra-simple banner generator tool that lets you produce sets of different-sized ads based on one design. Imagine the time this would save you. Imagine how happy your client will be when you send a link to preview your work in a seemingly impossible timeframe.

Check out this preview to watch a quick ad generator in action.

Responsive Ads

Everything you design in Bannersnack is responsive. This allows your users to see ads that are optimized for their device and screen size.

Straightforward Animations

Just as video is more effective than still images, animated ads work better than static ones in some situations. Clients will need to run split tests to determine whether static or animated ads have a higher click-through rate in their market. If you can produce animated ads quickly and cost-effectively, clients are more likely to test animated versus static ads.

The key is to be able to produce animated ads without breaking the budget. Bannersnack has three methods you can use to achieve this:

• Pre-set animations
• Custom variables
• Magic single-click text animations

Pre-set Effects

With 32 pre-set transitions including fades, blurs, and bounces, you’ll be able to produce ad animations very quickly.

Custom Effects

If none of Bannersnack’s built-in pre-set transitions meet your needs then use custom animations to find an animation that works perfectly.

Magic Single-Click Animations

The “Magic” animator is perfect for simple text transitions, with 12 pre-sets to choose from.

Customizations

Every client needs ads that are unique. Bannersnack lets you import clients’ images, or you can use photos from free photo sites in both banner ads and social media headers or posts.

Similarly, ads can be customized with any font you or your client own, or any web font not already included in the extensive library of Bannersnack fonts.

AMP HTML

Speed matters. If ads are slow to load then the user will close the page and go elsewhere. AMP HTML ads solve the speed issue, meaning more users see the ads and your client is happier. With our AMP-compatible ads, you can create them quickly and easily without touching any code.

Bannersnack Subscriptions

The table below shows the main features of each subscription level.

Bannersnack also has pricing plans for teams, if that is what you need.

Summary

Bannersnack is a productivity tool for professional designers. It does one thing and does it better than anyone else: banners.

Massive programs like Photoshop have their place on any graphic designer’s computer but single-purpose programs like Bannersnack often offer shorter production times in their specialty areas. This is the case here. Bannersnack excels at producing animated ads quickly, allowing you to run split tests quickly and without over-running your client’s budget.

You might even be surprised to learn that VS Code is also cross-platform. Not only does it work on Windows, but versions for both Linux and Mac are also available for download.

But perhaps the coolest feature of all is the massive extension marketplace. There are free extensions available to support new languages, debug your code or add a variety of other custom functionality. This enables you to customize the editing experience to better meet your needs.

Today, we’ll introduce you to some of the very best VS Code extensions out there. Let’s get started!

GitLens

While Git functionality is already built into VS Code, GitLens aims to “supercharge” the editor with even more version control goodies. It offers deeper insight into code, showing you when it was changed and who changed it. You can even compare different branches, tags and commits. Overall, this extension will make version control a more visual experience.

Beautify

Are you very particular about syntax highlighting? If so, Beautify is just the extension you need. It takes advantage of VS Code’s already existing use of Online JavaScript Beautifier, but allows you to easily make changes to its styles. This means you can set elements like indenting, line wrap and other minutiae to your heart’s content.

ESLint

JavaScript can be quite difficult to debug. But the ESLint extension for VS Code can make the process much easier. It helps by pointing out potential problems in your code before you even execute it. Better still, the extension lets you create your own linting rules.

Debugger for Chrome

For developers who’d rather troubleshoot code during runtime, Debugger for Chrome will help you get the job done. There are a number of handy features, including the ability to set breakpoints in your code, watches and a console. Plus, you can choose to run an instance of Chrome within VS Code or attach the debugger to a seperately running instance of the browser.

React Native Tools

React is among the most buzzworthy JS libraries out there – so much so that the new WordPress block editor (aka Gutenberg) is built on it. If you’re among the many who have jumped on the bandwagon, React Native Tools is a must-have extension. It adds the ability to run react-native commands and will help you debug code.

One Dark Pro

When dealing with code, it helps to have an editor that is both visually appealing and comfortable. After all, coding sessions can last for hours on end. One Dark Pro brings the popular “One Dark” theme from the Atom editor to VS Code. You get the familiarity of this iconic look with the other conveniences of Microsoft’s open source app.

Bracket Pair Colorizer 2

Bracket Pair Colorizer 2 is a simple extension, but one that can make code much easier to digest. It color codes matching brackets, allowing you to visually determine where functions begin and end. You can even pick which colors to use.

vscode-icons

Perhaps one of the most effective visual tweaks for VS Code comes from vscode-icons. It takes a rather bland file listing and adds colorful, language-specific icons to the mix. This makes it easy to tell your PHP files from HTML, for example. Plus, the added personality is a welcome addition to any workspace.

Write Code Your Way

The incredible number of available extensions for VS Code makes it a compelling choice for everyday use. You have the freedom to set things up to match the languages you use and the type of visual space you prefer.

Plus, it offers an interesting mix of both corporate and open source culture. Being backed by Microsoft would seem to ensure that VS Code will be actively developed in the future. And the open source community has created a thriving ecosystem around the software. The result for developers is getting the best of both worlds.

ActiveCollab is a project management software that serves as a central hub for team communication, collaboration, and project planning. It enables complete management of projects by breaking them down into more actionable tasks. When tasks are assigned to team members and a date with automatic reminders is set, it ensures that missed deadlines will be a thing of the past – since everyone knows exactly what they are working on and when it needs to be done. The option to track time is invaluable in dealing with clients – they will be able to see precisely how much time was spent working on their projects, and those tracked time reports can be used to issue custom invoices.

Their mission – to eliminate busywork and to help make Real Work happen.

New ActiveCollab is a product that immeasurable love and care have been poured into, with every change, tweak, upgrade, new feature and addition being the result of careful planning and communication with customers.

It is the collaborative success of dozens of people – developers, designers, marketers, customer care, etc. – each contributing their unique perspectives and special skills. Because of this, we can safely say that New ActiveCollab is not just the best-looking, most powerful version yet, but also – the most personal.

Apart from the fresh, sleek, redesigned look, there are many other substantial improvements and changes all across the board. Here is a list of the most significant ones:

A Brand New Look & Feel

In new ActiveCollab, dozens of refinements that fix and improve the design were added – making the software much smoother and more enjoyable to use. There are also several new themes to choose from.

This is much more than just a simple visual redesign – it is an evolution of ActiveCollab. A sleek, fluid tool that’s wonderful to behold and a joy to use.

Task Dependencies With Automatic Rescheduling

The biggest and most important – as well as most requested – New ActiveCollab feature. Using Task Dependencies, child tasks that are dependent on parent tasks can be set. This allows for greater control over tasks – in which order and when they will be completed, and it opens up a range of advanced management options in every step of the work process.

This addition will eliminate confusion over the exact turn in which tasks have to be finished, since they will no longer be done out of sequence. Everyone has had work experiences when the projects worked on would slow down because people couldn’t work on their own tasks until another segment was done. Automatic rescheduling means that when a parent task is moved around, their child tasks will automatically adjust their dates as well, and they also take weekends and days off into account.

Since Your Last Visit

All the projects and tasks we are involved in continue to make progress even in our absence. Which means that a lot of time catching up on everything that happened is required. This feature highlights all the comments that were made since the last time the software was visited.

Wasting time sorting new information from the old will no longer be an issue, and Project Managers will be able to devote their time to other more pressing concerns, instead of helping everyone catch up to speed.

Reactions

Communication is vital to collaboration, and a single thumbs up is often all you really need to do to get the conversation moving. We took a cue from to-the-point communication of social media, where you can express so much with an emoticon. So now, one of seven reactions can be used instead of typing out an entire lengthy reply. They are: thumbs up, thumbs down, smiley face, clapping hands, heart, party popper, and thinking face.

Live Comments

New ActiveCollab is now entirely in real time. Often, more than one user would comment a task at the same time, and they would have to refresh the page to see those other comments.

But now, all the comments – and the user(s) writing them – are visible in real time, meaning that confusion and the busywork of manually refreshing a page to see those new comments are a thing of the past.

Improved Attachment Navigation

A small change, but one that saves a lot of time, especially for designers, or those that have to deal with a lot of attachments. Before, the attachments would have to be navigated individually, one by one – by leaving and reentering the navigation window every time.

Now, all the attachments can be comfortably scrolled through with the left and right arrow keys, or by clicking the left and right icon buttons. The attachments are sorted according to the time they were added, so the newest file will be shown first.

Experience Real Work With New ActiveCollab

Regardless if you’re a project management pro, or are completely new to it, New ActiveCollab is the way to go. With so many new and exciting additions, ActiveCollab is now more powerful and versatile than ever before, and is so much more than just another Project Management Tool – it’s the proper way to do your Real Work.

Try out New ActiveCollab for a completely free 14-day trial to make Real Work happen.

But it’s no secret that plugins can sometimes outlive their usefulness. As both our needs and WordPress itself change, we can find ourselves looking for better options. That can mean moving on from a plugin that had previously served us well.

Still, it’s not always the easiest decision to make. Sort of like an athlete that’s past their prime, we can let plugins hang around long after their best days have come and gone.

So, how do you know when it’s time to ditch a plugin and start fresh with something new? The following are a few telltale signs to watch out for.

It Hasn’t Been Updated in a Long Time

Think of a WordPress plugin as a living thing. If it’s properly cared for, it will flourish. If not, the results won’t be nearly as good.

Those of us who build websites with WordPress would ideally like to see that a plugin is updated at least on a semi-regular basis. That shows that its author is still actively involved, adding new features and fixing bugs.

That’s never been more important, what with WordPress moving to the Gutenberg editor and PHP 5.x being phased out. If a plugin hasn’t been actively maintained, then it’s likely to fall short of being compatible with either of these major changes. Plus, there could be serious concerns regarding security as well.

Now, that doesn’t mean that a particular plugin has to be updated weekly or even monthly. Depending on its purpose, that may not be necessary. But you will want to look for, at the very least, a couple of updates per year. Anything less than that and you might as well give it one last hug goodbye.

Updates Routinely Break

On the opposite end of the spectrum are plugins that, while continuously maintained, have become functionally unreliable. Updates are released frequently, but it’s usually because the previous ones have wreaked havoc on a number of websites.

This is frustrating, as you have a plugin that (at one point) did what you needed it to do. However, an over-aggressive developer has managed to cause as many problems as they have solved (if not more).

Depending on your personality, you may be willing to show some patience in this situation. Sometimes it actually pays off, as even a quality plugin can go through a rough patch and eventually right the ship. But inevitably things have to get better in short order. Otherwise, it’s just not worth the trouble.

It Has Become Bloated

A plugin quite often starts out trying to solve a specific problem. If it accomplishes that goal, its author may decide to add some related features to make it even more useful. This can be a great thing, if the new additions are well-executed.

The downside is that, over time, some plugins morph from solving a single problem into something that tries to solve every problem. This once terrific piece of software now is more accurately described as bloatware.

This can have negative effects on your website. For one, more features mean more code. The chances of both annoying bugs and hits to performance rise with every new feature.

It can get to the point where a plugin is no longer a good fit. In that case, it’s time to look for one that’s more focused and efficient in its functionality.

There’s Something Better

When it comes to plugins, part of a web designer’s job is to provide clients with the best option available. But just because a plugin was once the best option doesn’t mean it will stay that way forever.

This is especially so when it comes to plugins that occupy overcrowded categories like SEO or photo galleries. It seems like someone always comes along and tops whatever the previous leaders have done.

That doesn’t necessarily mean that we should immediately jump off the bandwagon when something new comes out. But it does suggest that it’s worth keeping an eye on what else is out there. You may find that another plugin offers something that you just can’t pass up.

Change Can Be Difficult, but Necessary

Let’s face it. It can be a real pain to swap one plugin for another. The process often involves refactoring or even recreating content that was being used by the old plugin so that it plays nicely with the new one. Therefore, it’s not a decision to take lightly.

Then, there’s always the unknown of how that new plugin will work out. Will there be any unintended consequences from using it? How can you be sure that it will still be around in a few years? Testing helps, but there’s still a leap of faith required when making a switch.

In the end, this is all part of a website’s lifecycle. The good news is that, with so many choices out there, making those changes to a WordPress website will just about always lead you to a better path forward.

What’s especially important to note is that it’s not just web professionals who will bear the burden of a changed workflow. Everyday users will also have their own learning curve to deal with. The simple act of writing a blog post, for example, will look much differently with Gutenberg than with the Classic Editor.

That’s not to paint any of these changes as either positive or negative. Regardless of how you feel about them, they are changes nonetheless.

So, what’s changing? Let’s have a look at some areas that WordPress 5.0 will have its greatest impact.

Writing with Gutenberg

The most visible change with WordPress 5.0 is the block-based Gutenberg editor. Gone are the days of a single rectangular field to type away at your next blog post. Instead, virtually everything is contained with portable blocks – including text paragraphs.

The positive side of this change is that it’s easy to rearrange content – something that could be frustrating with the Classic editor. A user can, for instance, edit one block without fear of impacting any of the surrounding content.

Still, it’s going to take some getting used to – especially for longtime users. The UI is fairly intuitive, but a different experience altogether from what a standard WordPress install has been.

Oh, and one tip worth mentioning about those paragraph blocks: Hitting the Enter key at the end of one paragraph will automatically create another new block. So, you can continue writing in the editor without having to manually add blocks via the UI. Alternatively, you can use the “Classic” block, that allows for the more traditional style of content writing.

Customizing the Edit Screen

Among the biggest changes with WordPress 5.0 and Gutenberg are how customizations to the edit screen both look and are built.

For example, if you use a plugin such as Advanced Custom Fields to create custom field UI setups, it will still work just fine. But Gutenberg forces these fields down to the very bottom of the screen. Therefore, any elaborate custom layouts you’ve built for the back end are going to be stuck below the fold – unless you opt to remain with the Classic editor.

Beyond that, adding custom features to the editor itself is a completely different process in the post 5.0 world. Since the Classic editor’s TinyMCE-based setup is being pushed aside, you’ll need to create a custom block for Gutenberg in order to integrate with the editor. That will require some serious knowledge of React and JavaScript in general.

Thankfully, the aforementioned Advanced Custom Fields and the new Block Lab plugin both provide easier methods for creating custom blocks. This will enable more developers to build in custom capabilities for the new editor without diving too deeply into the weeds with JS. The process will be more familiar, yet still requires some effort to learn.

All told, customizing the edit screen will require a very different approach in order to achieve the same level of integration with the WordPress editor’s UI.

Building a Custom WordPress Theme

It seems fairly unlikely that Gutenberg will “break” any themes. Instead, existing themes just may not be setup to take full advantage of some of the fancy new features, such as cover images.

By default, some “baseline” styles for all Gutenberg blocks will be included. However, you can also add custom styles to your theme in order to better control how blocks look on the front end of your site.

Want to see how your theme will handle each Gutenberg block? The Block Unit Test for Gutenberg plugin can help.

It’s also possible to include (or withhold) support for specific features, such as full-width images, via some code in your theme’s functions.php file. This provides you with some measure of oversight regarding what your theme can or can’t do with Gutenberg.

Lastly, one of the main selling points of Gutenberg is an experience that is much closer to being truly WYSIWYG. To get as close as possible, adding editor styles to your theme can provide a more accurate reflection in the editor of how content will look on the front end. WordPress has a built in a handy .editor-styles-wrapper class to get you going.

Rolling with the Changes

In some ways, this may all sound a bit overwhelming. But while change isn’t easy, it’s also inevitable. Therefore, all we can do is make the best of it.

A positive aspect of all of this is that, even though WordPress 5.0 is out there, we can still opt for the Classic editor if we so choose. This empowers us to make the final decision on whether these changes are a good fit for our own particular situation.

The Classic editor will be supported at least through the end of 2021, meaning we have some time to adjust before taking the plunge into Gutenberg. So, while our workflows are indeed going to change eventually, we get to do so at our own pace.

Yes, it’s a lot to take in. But at least we have the necessary tools and knowledge to handle these changes successfully.

As the new editor prepares for full release, we should note that the “Classic” Editor will remain available as a plugin. Activating it will enable site owners to use it in conjunction with Gutenberg or bypass it completely.

Because the Classic Editor affords us a second path, it’s worth considering whether or not to take it. Gutenberg represents a big shift in how WordPress operates. The question becomes, is it really worth utilizing the new editor on an existing site, or is it better to stick with the tried-and-true Classic version?

To answer that question, there are several factors to consider. So, before you take the plunge and switch to Gutenberg, here are a few items you’ll want to think about.

The Past and Future of Your Content

The content on your existing website, along with the way you manage it, has already been established. Odds are that your pages and blog posts follow a specific format that was created long before Gutenberg came onto the scene.

With that in mind, consider whether or not you want to change things to reflect the new capabilities Gutenberg brings. For instance, you might have interest in refactoring your existing content to utilize features like full-width images or multi-column layouts.

However, sites that are heavy in content may require a lot of work to bring up to speed. It might consist of going through every piece of content and laying it out in the new block-based format. Gutenberg can automatically convert legacy posts to blocks, though you’re ultimately the one who will need integrate any customizations.

The other option would be to perhaps refactor some existing content, while focusing more on using Gutenberg for new items. In this case, maybe a few key pages could be formatted with the new editor. Then, all future blog posts would also be block-based.

Gutenberg shouldn’t harm or break any existing content, so you can use it in conjunction with the Classic Editor to format just the content you choose.

Is Your Site Customized?

When you built your website, you may very well have set things up to take advantage of the Classic Editor. Or, perhaps you used custom fields or a page builder plugin to allow for more complex layouts, etc.

If your site already sports custom methods for creating content, switching to Gutenberg could lead to some issues. Turning off a page builder, for example, may break custom layouts that were created with it. That again means refactoring everything to use the new editor.

Some page builder plugins are pledging Gutenberg compatibility and custom fields will still work as they always have. Even so, it may make sense to just stick with your current setup.

If you do decide to go with Gutenberg, make sure to test everything in a staging environment beforehand. You won’t want to encounter any unpleasant surprises on a production site.

Workflow and Client Education

Gutenberg is a fairly intuitive tool, but it still has a learning curve. Think of a busy news site that has multiple authors. They probably have an existing content creation and editorial process. Throwing a completely different type of editor into mix could hurt efficiency in the short term.

Likewise, even a small brochure-style website can run into some detours. If your client is typically the one who manages content, they may also struggle to adapt to a different workflow. Blog posts that previously took just a few minutes could take significantly longer to create.

This is where web designers need to step in and provide a crash course on using Gutenberg. It can help to ensure that everyone is on the same page and has a basic understanding of how things work. The other potential bright side (for you) is that educating clients can result in some extra revenue.

Still, the adaptation content creators will need to make isn’t going to be seamless – even with education. Thus, you’ll need to weigh the benefits of using Gutenberg against those of keeping things as-is.

Time for a Redesign?

Because Gutenberg presents such a fundamental change to using WordPress, you may lean towards holding off on implementing it on your existing site. However, if your site is also due for a redesign, it might offer the perfect opportunity to knock both items off of your to-do list.

Since this new tool is the future of the platform, optimizing your redesign to utilize it makes plenty of sense. It provides you with the chance to refactor content and educate clients. Even better is that you can implement these changes on a staging environment. This allows you to experiment and identify any pain points.

When the new site launches, you can be confident that everything is working as it should. Clients will have an understanding of their new workflow and the website will be better prepared for the future.

Making the Right Decision

Deciding whether or not to enable Gutenberg on your existing website takes some serious thought. In the end, it’s about whether or not the switch is going to benefit your particular site. If you’re really keen on the flexibility the editor offers, then it may be worth your while to use it right from the get-go.

However, there are situations where rolling with the changes may not be ideal. If content creation on your site is highly-customized or a change to your workflow isn’t in your plans, using the Classic Editor for the time being could be your best bet.

The Classic Editor plugin should be supported for “years to come”, meaning that you don’t have to rush into anything when it comes to Gutenberg. Knowing this, you may consider a plan to start fresh and utilize Gutenberg on both new and newly redesigned websites.

Regardless, it all comes down to making the right choice for your specific situation. Thankfully, WordPress enables us to easily go in either direction.