But before we get too far into the weeds, it’s worth noting that block themes are fundamentally different than the classic WordPress themes you’re used to. They’re specifically built to work with FSE and the Gutenberg block editor. Think of them as an entirely separate category of theme.

Now that we have those details out of the way, it’s time to start looking at themes! Block themes are a growing segment, and therefore, it will take time for their numbers to approach the massive quantity of classic themes on the market.

Still, there are plenty of compelling options. And the fact that these themes are fairly simple to customize means that you have a lot of flexibility. If a particular design element doesn’t fit your needs, you can always start from scratch.

To help get you started on your journey, here are ten free WordPress block themes that are worthy of your consideration.

The post 10 Free WordPress Block Themes That Utilize Full Site Editing appeared first on Speckyboy Design Magazine.

It’s right there in the mission statement. That harkens back to its roots as a blogging platform. We install the software and push our content out into the world.

On the other hand, WordPress has become a tool to make money. Freelancers, agencies, and DIY users can build commercial websites with it. Developers create themes and plugins as part of an ecosystem.

Just so we’re clear: A corporation can use WordPress to bolster its billion-dollar portfolio. Just as a teenager can publish their thoughts.

Perhaps this sounds like two mutually exclusive ventures. However, they’ve coexisted for over 20 years.

That’s the juxtaposition of free, open-source software. So far, WordPress has handled it as well as anyone.

How has the project done it? And what potential risks could derail the balance? Let’s attempt to make sense of it all!

A Foundation for the Web

WordPress project co-founder Matt Mullenweg has said he wants the software to be the “operating system for the open web.” It’s one way to marry commercialization with democratization.

It makes sense for content creators and site builders. The software serves as a foundational piece. It’s free, widely supported, and extensible. Take it and build whatever you want.

This idea borrows from operating systems like Linux, MacOS, and Windows. They lay the foundation for a variety of use cases. An enterprise IT department depends on an OS. So does a student or small business.

Free software lowers the barrier to entry. Sure, there’s a cost associated with hosting a website. However, you’re not stuck with a particular host. WordPress is open-source. It can be hosted just about anywhere – even on a local machine.

This allows for a multitude of possibilities. One can publish, make money, or both. Those interested in web development can learn the software’s inner workings.

Expand it, change it, or use it as-is. That’s the flexibility of WordPress.

The Challenge of a Diverse User Base

As a project, WordPress has adeptly walked a tightrope. It has provided an opportunity for people around the world. It has also created an economy based on its ecosystem and custom development potential.

Maintaining balance is a challenge – and a great responsibility. The software must remain an attractive option for both camps.

Bloggers and small organizations depend on WordPress for low-or-no-cost flexibility. Developers, freelancers, and agencies want a powerful tool to fuel their growth.

That’s why some features spark debate. Take the Block Editor, for example.

Theme and plugin developers were concerned about this shift toward block-based content. How would it impact their products? Would they be rendered useless? Or require a complete overhaul?

Everyday users also had concerns. Would a new editing experience make it harder to publish blog posts? How large is the learning curve? Would it leave their existing website in the dust?

User perception also plays a role. Some may see a feature as favoring one side or the other. Sometimes, commercial and individual interests diverge.

That places project leadership in a tough spot. You can’t please everyone. But serving a diverse user base is part of the job.

Keeping the Coexistence for Years to Come

So, how can WordPress continue to provide the best solution for both worlds? It will take a concerted effort. And things seem to be off to a good start.

Recent years have seen a focus on ease of use. In addition, tools like the Site Editor aim to make a default WordPress install more powerful. Plans for a redesigned admin interface are also in the works.

These are all positive steps. A more user-friendly WordPress opens the door to attracting more users. Novices will be able to get started more quickly.

There are also opportunities for those with a commercial agenda. Commercial block themes have yet to take off. But block-based plugins have. There is plenty of space for growth in these areas.

What could go wrong? There are a few potential trouble spots.

A change in project leadership could push WordPress in a more commercial direction. A new regime could theoretically focus on features that primarily benefit corporate users.

The composition of WordPress project teams could also have an influence. Yes, some contributors are volunteers. However, sponsored contributors are only increasing their role in how things work.

One or more sponsor companies may gain an outsized say in the future. What if a future WordPress version integrated something akin to Google’s AMP? This nominally open-sourced technology caused a stir. This sort of move could harm the software’s reputation.

That’s just an example – however unlikely. The point is that maintaining balance requires stewardship. It’s an important part of the project’s future success.

It’s Possible to Do Good and Make Money

As a market leader, WordPress is in a unique position. It’s not a commercial product. However, we can use it for commercial purposes.

The software can also give an online voice to just about anyone. It’s a tool that facilitates free speech – even if a person’s circumstances can get in the way.

And, unlike large companies, the WordPress project isn’t beholden to anyone. For example, it doesn’t have to bend to the will of an oppressive regime to access its people. There’s no profit or shareholders to worry about.

Let’s hope it stays that way. We’re living in a world where costs are rising – as are barriers. WordPress bucks this trend as free software.

All you need is a copy of WordPress and an idea. What’s next is up to you.

The post How WordPress Democratizes Publishing & Fuels an Economy appeared first on Speckyboy Design Magazine.

The practice keeps those technical support requests to a minimum. Or at least it did.

These days, it seems like clients are eager to experiment with design. The more we lock down features, the more frustrated they get. It’s been a growing trend in my freelance business.

I often receive design queries from clients. They want to know how to create specific layouts. Or how to embed video or other third-party content.

It marks a change from how things used to be. So, why are clients suddenly interested in doing it themselves? I have a few theories! I also have thoughts on what we can do to meet this need.

There’s a Higher Standard for Web Design

Today’s clients are avid web consumers. Some have grown up alongside the internet. Therefore, they possess a different set of sensibilities.

The web used to be a novelty. The clients I served 10+ years ago weren’t as attuned to user experience (UX). If anything, they asked for features that went against the grain in this area.

Sure, I still get requests for such features. But they have decreased significantly.

I more often hear from people who want to replicate a specific look. They want a page layout similar to a big brand or competitor.

True, they may want these results on a much smaller budget. But they have an idea of how a website should look and work. And it’s miles away from the clunky designs of yesteryear.

Clients are surrounded by better design. And they want the same for themselves.

No-Code Tools Are Promising a Better Experience

We’ve witnessed an influx of browser-based design tools in recent years. Proprietary systems like Wix market themselves as do-it-all solutions. Even open-source apps like WordPress have gotten into the game with its Site and Block Editors.

The message is that anyone can build a website. Sure, the reality may be blurred (and there’s no mention of quality). But these tools have raised the bar of expectation.

For some website owners, having a site is no longer enough. They also want to create content and personalize the look. Empowered clients, yay!

However, this is a less-than-ideal situation for web designers. We want our clients to accomplish great things with their sites. But there’s a price to all of this newfound freedom.

These tools make building a custom layout easier. But things can get out of hand rather quickly.

I’ve seen this with the WordPress Block Editor. There’s a lot to love about it. However, it doesn’t guarantee success. Those unfamiliar with design can paint themselves into a corner.

For example, building layouts that are hard to maintain. Or accidentally dragging a block into the wrong space. All good for our job security. Not so much for our mental health.

Yes, anyone can build with a no-code tool. But it still takes careful thought and foresight to do it well. That’s why locking things down is still so attractive.

What Should Web Designers Do?

We want to keep our clients happy. Plus, there’s only so much lecturing we can do. So, how can we provide the flexibility clients want while also safeguarding their site?

There are a few ideas that come to mind:

Build with Flexibility in Mind

I’m a very purpose-driven designer. I like to build features that match a client’s stated needs. But sometimes, that leads to inflexibility.

A client will attempt to use a feature in a way that I didn’t intend. The result is often a frustration for both parties.

The lesson here is to build with flexibility in mind. Consider other ways a client may use a feature. Then, provide options for making it work.

Custom WordPress blocks are a good example. Instead of creating a block with a singular layout option, go the extra mile. Add column and row layouts. Allow for different types of content to be input.

These little steps can mitigate issues down the road. Clients won’t have to think outside the box – they’ll already have everything they need.

Invest in Client Education

Design tools are more powerful than ever. That’s a good thing. However, a well-intentioned client could use them to cause havoc.

When people know better, they do better. Thus, education can be just as powerful.

Sit down with clients and teach them the basics. Provide documentation that spells out best practices and things to avoid.

Granted, not everyone has time to do this. In that case, you might employ a third-party resource to help. Curate a list of videos and tutorials to put clients on the right path.

Again, prevention is the best medicine here.

Lock Down What You Can

None of this means we should stop locking things down. A client-proof website is still a noble goal. We might have to be more selective, though.

Tools like the WordPress Block Editor include a locking feature. You can use it to prevent those unintended consequences. Adding block patterns could also satisfy the need to create custom layouts.

You might also seek to limit user permissions. If there’s an area that a client should never touch – don’t give them easy access.

Think about the site’s most mission-critical aspects and act accordingly.

Web Designers Need to Meet Clients Where They Are

Today’s web design clients want to do more with their sites. Sure, they want us to build them something beautiful and functional. But they also want the ability to do it themselves.

There’s no going back on this. The cat’s already out of the bag. Thus, we need to adjust to match these expectations.

We can achieve this through a bit of foresight. Anticipate how clients will interact with their website. Build features that can withstand whatever they throw at it.

We’ll still make mistakes. Plus, some clients will be prone to mishaps. However, these experiences are learning opportunities. Take them and keep evolving. After all, our clients aren’t slowing down.

The post Why Clients Are Asking for More Creative Control in Web Design appeared first on Speckyboy Design Magazine.

Want to add a pricing table? Check. How about a custom photo gallery? Check. What if you’d like an entire About Us page? Check. We’re only scratching the surface here.

Block patterns are also undergoing constant improvement. They were once included only in themes and plugins, for instance. Then came the Block Pattern Directory, which publishes patterns for anyone’s use.

Well, hold onto your hats. Things have gotten even better. WordPress now has a way to create, manage, and share block patterns – all from within the Block Editor.

Want to see how it works? Check out our quick guide to creating and managing block patterns in WordPress.

Why Create a Block Pattern?

Before we dig into the tutorial, let’s define who this feature is for. Creating block patterns makes sense for those wanting to use the same group of blocks multiple times.

A call-to-action (CTA) interface is one example. Let’s say you want to place it in various areas of your website. A block pattern will help you maintain a consistent look across your site. Thus, there’s no need to reinvent the wheel for each use.

• You can also choose whether to “sync” a block pattern. You’ll edit a synced pattern from a singular location. Those changes will take effect everywhere the pattern is being used. So, change the CTA’s background color once and see it reflected all over.
• An unsynced pattern provides a basic layout framework. You’ll edit each instance of the pattern – giving it unique content. In this case, our CTA might have the same layout – but with different text, colors, and imagery. The unsynced pattern serves as a starting point.

You might also want to create a block pattern of a full-page layout. Use it as the basis for future pages. Or use it as a backup. You know, in case someone breaks your carefully crafted page.

The bottom line? Create a block pattern for anything you might want to use again.

Example: A Product Profile Block Pattern

Let’s move on to a basic example. Our fictional website will have a “Products” page. We’ll use it to showcase each product our client sells.

Each product on the list will use the same layout. So, why not create an unsynced block pattern? It will provide a more efficient way to build our page.

Plus, adding products in the future will be easier – even if we decide to give each product a separate page down the road.

Step 1: Create a Layout

The first step is to create a layout in the WordPress Block Editor. Here, we’ve built an example of what each product should look like. And we’ve done so directly on the Products page.

Each product will feature a title, description, and image. From there, we’ll add buttons that point to related resources.

Note: We used the free version of GenerateBlocks to create some layout elements. However, you can create patterns using any blocks you like.

Step 2: Select the Blocks We Want in Our Pattern

Next, we’ll need to select blocks to include in our pattern. We’ll use the List View feature to make our selections.

Step 3: Create a Pattern

Now, it’s time to create our block pattern. We’ll click on the block options button to open a menu. Then, we’ll click on the Create pattern entry.

The dialog box asks us to give our pattern a name. Also, note the toggle for syncing the pattern. It’s also possible to assign your block pattern to a category.

We’ll call our pattern “Product Profile” and choose not to sync it.

That’s all there is to it! We now have an unsynced block pattern for adding products to our page.

Step 4: See It in Action

We have our first product set up. Now, let’s use our new block pattern to add another.

We’ll place our cursor below the first product. Then, we’ll add our pattern. We can search for it by name or select it from the My patterns category.

That was quick! Now, we’ll make the necessary edits. We changed the title, description, and image to match our new product. We also changed the button colors.

How to Edit Your Block Pattern

So, what if you want to make changes to your block pattern? WordPress provides an area to do so – but it’s somewhat hidden.

Here’s how to find it:

• Via the WordPress Block Editor: Click the Options menu on the upper right of the screen. Then, select Manage patterns.
• Via the WordPress Site Editor: Note that this will apply to those using a block theme. Access the Site Editor by going to Appearance > Editor in the WordPress dashboard.
• Click on Manage all of my patterns at the bottom of the menu sidebar.

The Patterns Screen

The Patterns screen houses your custom block patterns. It looks similar to other pages and post listings. However, there are a few items we wanted to note.

• First, it’s possible to export your block patterns. Hover over your pattern and click the Export as JSON link.
• As you might expect, you can also import these patterns. Use the Import from JSON button at the top of the screen. You’ll be able to upload the JSON file containing your pattern.

This function provides a path to share your patterns across multiple websites.

Making Changes

Let’s say we want to edit our Product Profile block pattern. We can do so within the same Block Editor interface.

Here, we’ve changed the text headings and made the image smaller.

As a reminder, this is an unsynced pattern. Therefore, our changes will only be visible when adding a new instance.

A synced pattern would immediately display the changes throughout the website. However, we wouldn’t be able to edit the content individually. The contents would be the same everywhere the pattern is used.

Despite this fact, we’re not stuck. We can create a new block pattern if we outgrow the current one. Still, it’s good to know the difference between synced and unsynced patterns.

Note: A new feature in WordPress 6.5, synced pattern overrides, will allow for changes for each instance. See this tutorial for details.

Use Custom Block Patterns to Increase Consistency & Efficiency

Block patterns keep getting better. And creating and managing them within WordPress adds another layer of convenience.

Having an archive of patterns on a per-site basis comes in handy. It can be a huge time saver. They can speed up the build process. Plus, they’ll make content updates easier.

If you want to share your work, that’s easy to do via the export and import features. You can install patterns on additional sites or submit them to the Patterns Directory.

Take some time to experiment with creating custom block patterns. You might be surprised at what you can accomplish!

The post How to Create & Manage Block Patterns in WordPress appeared first on Speckyboy Design Magazine.

The tool has empowered content creators and designers. You no longer need additional plugins to build a functional page layout. WordPress core includes just about all the basics. Need something more? There are plenty of ways to extend the editor, too.

None of this makes the Block Editor foolproof, however. It’s still easy to paint yourself into a virtual corner. A simple mistake can mean more difficult maintenance – particularly when clients are involved.

I’ve built quite a few sites with blocks. And not every decision was a good one. Yes, I’ve created a few messes. Cleaning them up can be time-consuming.

Today, I’m going to share a few things I’ve learned. May these lessons help you avoid a similar fate!

Do: Think about Future Maintenance Needs

Page layouts don’t last forever. They must adjust as our content needs evolve. The Block Editor can act as a trap in these situations.

Consider a company’s staff listing, for example. Let’s say our client wants to display each person’s name, title, and photo.

It sounds simple. We can use the Columns block to create a beautiful and responsive layout. The page looks perfect. But what happens when we need to make changes?

Staff members come and go. Yes, we could replace the departed staffers with the new ones. Then again, our client wants them to display in alphabetical order. The required changes don’t follow suit. What do we do now?

The options are less than ideal. We could edit the block’s code to rearrange each column. Or we could reconstruct the layout from scratch. Both possibilities are rife with peril. OK, perhaps I’m being a bit dramatic. But it’s not fun.

A custom block may be a better solution. Using Advanced Custom Fields PRO, you could create an interface that allows for easier maintenance. Adding, deleting, and rearranging the list would be built into the block. There’s no need to reinvent the wheel when making changes.

The lesson is to think about the future maintenance needs of your layout. Then, implement a strategy that will allow for changes. You’ll be glad when the time comes.

Don’t: Allow Users to Switch between the Block and Classic Editors

The WordPress Classic Editor is still alive and well. Millions of websites are using it. That’s OK. There’s nothing wrong with using a tool you’re comfortable with.

However, mixing the Block and Classic editors can be messy. The Classic Editor plugin has a setting that allows users to switch between editors. You might want to leave this feature turned off.

Let’s say you’ve built a complex layout using the Block Editor. But your client doesn’t like blocks. Or they aren’t familiar with them. They decided to edit this page using the Classic Editor. Hilarity (or tragedy) ensues.

Then, you edit the page and switch back to the Block Editor. You see numerous errors stating that blocks contain invalid content. The “Attempt Block Recovery” feature doesn’t work. It looks like you have a mess on your hands.

Too much can go wrong in this scenario. Thus, don’t allow users to switch between editors. It’s an accident waiting to happen.

Do: Choose Third-Party Block Plugins Carefully

There are a multitude of plugins for extending the Block Editor. Many of them offer a suite of custom blocks.

That’s a good thing. The core blocks included with WordPress aren’t always flexible. Thus, installing a custom block may be of help. But it’s worth scrutinizing them first.

Custom blocks are plugins, after all. They can vary in terms of features and quality. The same rules apply when choosing the right one.

Only install what you need. Study each plugin’s reviews and changelog. And remove any block plugins you aren’t using.

What’s the danger? The wrong plugin could cause bugs or performance issues. Plus, security is always a concern.

Third-party blocks require a commitment. Be sure that you’re ready to take that step.

Don’t: Edit Blocks as HTML

The Classic Editor made it easy to switch between visual and code editing. You might use this feature to add HTML or a CSS class. There were some hiccups, but it worked well enough.

The Block Editor has a similar feature. Blocks have an “Edit as HTML” interface. You can access it via each block’s options menu.

I never understood the purpose of this feature. That’s likely because I always end up breaking something. Adding a CSS class, for instance, triggers an error when switching to the Visual editor.

A "This block contains unexpected or invalid content" error is displayed. From there, I have to go back in and remove the class. The same issue happens when adding other types of content as well.

Therefore, it may be wise to consider editing block HTML as off-limits. There’s more risk than reward.

Plus, you can use the Custom HTML block for similar tasks. Add HTML, CSS, or even JavaScript into the field. You won’t break it!

By the way, you can add CSS classes to blocks via the Advanced tab in the settings panel.

Do: Use the Block Editor’s List View Feature

WordPress allows us to nest blocks inside each other. And blocks are portable. You can drag them anywhere on the screen. That can result in some undesired effects.

For instance, moving blocks to a new spot can be difficult. It’s easy to make a mistake. The wrong move could undo a lot of hard work.

The List View feature can save you a lot of headaches. It provides a visual outline of each block on your page. It even works with nested blocks.

Even better, you can easily reposition blocks directly within List View. Click on a block and drag it to the desired position. Need to move multiple blocks? That’s also possible.

The user experience is infinitely better than wrestling with the editor. You’ll have a better sense of where you are on the page. And it will likely make for easier edits.

Do: Keep Experimenting with the Block Editor

The Block Editor isn’t perfect. Like all editors, it has some quirks and annoyances. But it’s still worth testing the limits.

That’s often the best way to learn. So, create a local website and experiment. See what works and what doesn’t. But don’t limit yourself to a single test.

The user experience is evolving. Thus, a technique that didn’t work last time may now be possible. You might even install the Gutenberg plugin to get a taste of what’s coming in future releases.

Doing so will serve you well. You’ll be able to build layouts that stand the test of time. And you might be surprised at what you can accomplish using blocks.

The post A Guide to Effective Use of the WordPress Block Editor appeared first on Speckyboy Design Magazine.

Signs of that evolution are everywhere. The block editor means we no longer need a page builder plugin to craft custom layouts. And thanks to the site editor and block themes, an entire website can be built without writing a line of code.

Virtually every major component of building and maintaining a website has changed. And there’s every reason to believe that the innovation process will continue. What WordPress is today is only laying the foundation for tomorrow.

But how will WordPress change? While we don’t have a crystal ball, we can see plenty of areas that are ripe for improvement. Some may be solved by updates to WordPress core, while the plugin and theme ecosystem could tackle others.

With that, let’s try and predict the next opportunities for innovation in WordPress. They may not qualify as sexy, but they’re important nonetheless.

Making Website Data Easier to Access

Data storage and retrieval have long been a challenge for WordPress developers. Sure, everything is stored in a singular database. But things can get exceedingly complicated in a hurry.

Standard posts and pages are easy enough to import or export. But when you move into the realm of data generated by plugins, it’s a different story.

That’s because plugin authors have numerous options for writing to the database. On the surface, this freedom seems like a positive. It allows developers to store and retrieve data in a way that makes the most sense for their needs.

But for the rest of us, it can be a nightmare. Each plugin we install manages data in its own way. Thus, piecing together a coherent report is nearly impossible – unless you’re proficient with PHP.

For example, let’s imagine an eCommerce website that also has members-only content. We might install WooCommerce to power the online store, while a separate membership plugin restricts access to content.

If we just want to export data related to one of these site functions, it’s easy enough. But what if we combine each aspect into a single report? Not so easy. Data can be stored in different database tables and different formats. Even with the help of plugins designed to export data, it often takes custom code to make this work.

The obstacles to accessing data are large and complex. But there’s an opportunity for either WordPress core or a brilliant plugin developer to put it within reach of site owners.

Creating a Must-Have Block Theme

The idea behind the WordPress Site Editor (aka Full Site Editing) is simple: to empower anyone to build a custom website within a code-free environment.

The feature officially became a part of WordPress core in version 5.9. Since then, a steady stream of newfangled block themes has been released. Meanwhile, the feature’s functionality and user experience continue to be refined.

Progress aside, we’ve yet to see a rush of users migrate to this new way of building websites. The theme market continues to be saturated with Classic Themes. Plus, developers may still be wary of allowing key layout elements open to editing.

What’s missing is a compelling reason to switch. Part of that may be a matter of increasing what the Site Editor is capable of. But perhaps a transformative product (or 100) is also needed to attract user interest.

Imagine a block theme that is both powerful and versatile. One that offers a wide range of style variations to fit a multitude of use cases. And its author will hopefully have learned from the past mistakes of the third-party theme market.

A theme that is lean, performant, and easy to customize could be just the thing to entice users. Luckily, the market is wide open. That means there is plenty of room for competition in this space.

Bringing Top-Notch Performance to WordPress

Website performance is complicated. It starts with a high-powered server that is optimized for speed. Then there’s the website, where code and assets must be used efficiently. Add databases and calls to third-party APIs into the mix, and there are plenty of potential bottlenecks.

The WordPress Core Performance team has been established to help bring the CMS up to speed. And they’ve already made significant progress in the area of query caching.

Still, the WordPress ecosystem further complicates the process. Themes and plugins can vary greatly in terms of resource requirements. Some make multiple database calls, while others make extensive use of scripts and styles. And even items that perform well enough on small sites could struggle at scale.

There are a variety of caching plugins available to get the most performance out of a website. But neither they nor WordPress core can account for a bloated theme or plugin.

With that, some developers have decided to (mostly) bypass the ecosystem by running headless installations. With a WordPress back-end that handles content creation, a static front-end removes database calls from the equation. This can result in blazing-fast page loads, with the caveat that some plugin functionality won’t carry over.

Tools that simplify the process of building headless WordPress websites would be welcomed. And bonus points for those that can keep plugin functionality (shopping carts, forms, etc.) going on the static side or via a hybrid approach. Much progress is being made, and it will be exciting to see what breakthroughs come next.

That doesn’t mean WordPress core shouldn’t focus on speed, though. For most users, keeping a traditional install that uses a database is still the reality. Every step towards higher performance counts.

Looking for the Next Big Thing in WordPress

The predictions above represent opportunities that already exist. One or more people can take on these challenges and create a solution that makes WordPress better/easier/faster. But they’re far from the only ones out there.

The great thing about an open-source CMS is that developers are only limited by their imaginations. Thus, we could see innovations that haven’t even been considered yet.

As WordPress matures, the need to create a powerful and seamless experience increases. A community full of creative minds is hard at work, plotting the next big thing. We can’t wait to see what they come up with.

The post Predicting the Next Opportunities for WordPress Innovation appeared first on Speckyboy Design Magazine.

Take, for example, the COVID-19 pandemic. Chaotic as it has been, it’s led to some important realizations. Perhaps the biggest one is that we are indeed essential workers.

Not on the front line, mind you. But our expertise has played a vital role in helping our clients adjust to a new “normal”. We have also served as liaisons, spreading important information to the masses.

One could argue that web designers are as relevant as ever. Still, that doesn’t mean that individual freelancers are immune to the ever-shifting landscape. Long-term survival in this industry is not a guarantee.

As someone who has spent over two decades freelancing, I do see some potential threats ahead. That said, I also believe designers can prepare for them. Here are a few items to watch out for, along with ways you can mitigate their effects.

The Growing Complexity of Building Websites

Building a custom website is becoming more difficult. The development techniques behind the latest functionality trends are vast. In addition, the expectations from clients have also grown.

But, aren’t things supposed to be easier as technology improves? Well, yes and no.

WordPress is a prime example of this. The Gutenberg block editor has evolved to the point where crafting a custom page layout is relatively simple. Thankfully, extra plugins and hard-coding theme templates are no longer 100% necessary.

Yet, if you want to natively develop custom blocks, it’s not necessarily a straightforward experience. There is a steep learning curve for those who are not already proficient with JavaScript and the React library.

Then there is the whole concept of the “headless” website, where a content management system (CMS) feeds into a static HTML front end. Both the setup and maintenance processes are a whole new ballgame for many web designers.

You can still achieve quite a lot using visual, no-code tools. But going fully custom means digging deep into code. Understandably, that’s not everyone’s strong point.

How to Prepare
Experiment with different technologies and find ones that will benefit your business. That will be the key to providing your clients with cutting-edge service.

Another benefit: the more you know, the more you can charge! The ability to take on complex projects is a great way to boost your bottom line.

One-Stop Agencies

Web design is an ultra-competitive marketplace. Yet, it seems like there has always been enough work to go around. That’s a comforting thought.

But it ultimately depends on the types of clients you want to work with. For a certain level of clientele, a niche freelancer is becoming a less attractive option. Why? Because we don’t do “everything”.

Some organizations see a benefit to having all of their needs taken care of by a single provider. That means their web, print, and social media are in the hands of a one-stop agency.

The appeal is understandable. Instead of having a web designer over here, a graphic artist over there, and an SEO expert somewhere else, one company handles it all. Ideally, an agency will have a single point of contact and a more cohesive strategy.

When, for example, it’s time for a rebrand, the agency is there every step of the way. Even if the cost is higher, the ease of management may be worth the premium.

How to Prepare
Short of expanding your offerings and hiring additional people (thus, becoming an agency), competing in this area is difficult. However, there are some things you can do to stay in the game.

The first is to focus on clients who don’t require an all-encompassing level of service. There are plenty of organizations out there that will see the value in what you do.

You might also find an opportunity to work with an agency, as some utilize freelancers quite a bit. Coming on board means playing a key role in their projects. Plus, these types of gigs can become a source of recurring revenue.

Poor Business Habits

While outside threats get all the publicity, nothing can sink a freelance design career faster than poor business habits. They can lead you to lose money and, ultimately, your business.

There are several things here that can spell trouble, including:

• Spending too much money;
• Reliance on a single, large client;
• Charging too little;
• Failure to be thorough when creating project estimates;
• Providing poor customer service;
• Leaving yourself open to legal liability;

Quite often, it’s not a lack of talent or even a saturated market that kills a web design business. Rather, carelessness can be the biggest culprit. The seemingly small details of running a business mean a lot.

How to Prepare
Running a freelance web design business requires a lot of discipline. Therefore, it pays to be organized and develop processes for every aspect of the job.

In practice, this means accurately keeping track of finances, staying on top of ongoing projects, effectively communicating with clients, and general awareness of where your business stands. This will keep you vigilant and less likely to be taken by surprise.

Control What You Can

Some threats to freelance web designers are beyond our control. Market trends and the whims of clients are chief among them. Add to that the ever-growing complexity that defines what a website is and should be. Here, all we can do is try and keep pace.

However, there are many things we can control. We can choose to learn new skills that keep us on par with industry standards. This ensures that we won’t fall behind the curve when it comes to top-notch design and functionality.

In addition, we can run our businesses like a well-oiled machine. Doing so will allow us to stay organized and make the most of the opportunities that come our way. We may even recognize new ones that we wouldn’t have before.

Most importantly, we can choose the direction we want our business to go. This means further developing a niche and recruiting clients who fit our vision. The idea is to find clients who will benefit from our expertise and help them grow.

Yes, there are some existential threats to freelancers lurking out there. But with the right approach, they’ll end up as little more than bumps in the road.

The post What Are the Biggest Threats to Freelance Web Designers? appeared first on Speckyboy Design Magazine.

That leaves WordPress to compete with commercial offerings. Platforms such as Shopify and Wix come to mind.

Again, these systems can’t match WordPress’ market share. But they do have an advantage in marketing muscle. They have the resources to create a seamless campaign. They can speak to their targeted audience with clarity.

WordPress tends to struggle with messaging. You can see it at both the macro and micro levels. It covers big things like defining what the platform does and who it’s for. And it also happens with individual features.

The result is confusion – even among seasoned users. It also makes things harder for those who teach others. There’s a lack of consistency. Not to mention frequent changes to the terminology we use.

How much does this impact WordPress? Could it harm the software’s long-term future? And what can be done to create a more user-friendly vocabulary? Let’s take a deeper look at the words that define WordPress.

Who Are We Speaking To?

WordPress is an incredibly flexible platform. We can use it in a variety of ways. Thus, it appeals to both technical and non-technical users.

This appeal is both a blessing and a curse. On the bright side, WordPress continues to thrive in part because it offers so many possibilities.

But the words we use to describe WordPress don’t apply universally. A conversation among developers is bound to be more technical. Some terms are likely to confuse everyday users.

Yet it seems like developer speak is the dominant language in WordPress. We use exclusionary terms that are difficult for others to understand. You see it in the core software and third-party themes and plugins.

Perhaps this stems from where WordPress and its ecosystem come from. Many developers are responsible for both building and promoting products. Most aren’t marketers by trade.

Product descriptions and documentation tend to be written by developers. As such, developer speak is likely to be used. The content isn’t as user-friendly as it could be.

An Ever-Changing WordPress Core

The past decade has brought significant change to WordPress. The advent of the Block and Site editors has impacted content creation and website design.

Each of these items has undergone a descriptive overhaul. The Block Editor was initially referred to as “Gutenberg,” for example. The name was derived from the Gutenberg project, which oversees this and other features.

As for the Site Editor, it’s also a part of the Gutenberg project. But the feature was initially called “Full Site Editing.”

The names were eventually changed. They now more accurately reflect what each feature does. These are positive and well-intentioned moves. But the cat was already out of the bag, so to speak.

We now see these terms used interchangeably. This may not impact veteran WordPress developers very much. But what about new users? Do they understand that the Site Editor is the same as Full Site Editing? And what to make of the differences between block themes and classic themes?

We’ve created an unnecessarily confusing situation. And there is plenty of blame to go around. For instance, writers like myself have added fuel to the fire.

How Do We Fix the WordPress Word Scramble?

Here comes the difficult part. How do we use terminology that everyone can understand?

I think it starts with the WordPress project. Feature names should be reflective of what they do. But they should be named and described in the simplest of terms.

Perhaps this sounds like no big deal. But WordPress contributors have a lot on their plates. There’s only so much time to argue about names.

We did see a lot of thought put into this recently, however. The Command Pallete feature that shipped with WordPress 6.3 underwent a name change. Project contributors debated the merits of the original name (Command Center). They realized that it might be taken out of context and addressed the issue.

The creation of user-friendly terms will trickle down to the community. Writers will use it in their tutorials. And product makers will use it in their marketing efforts.

The community also has a responsibility. We must speak to WordPress users in plain language. We must limit the use of developer terms.

A little guidance would also help. WordPress has a developer-focused glossary of terms and a user-focused Semantics page. We should study them.

But perhaps we can educate product makers on methods for creating user-friendly marketing and documentation materials. That’s not necessarily a responsibility of the WordPress project.

Still, it could help to make the platform easier to understand. And it’s a part of keeping WordPress on top for the long term.

A User-Friendly Experience Starts with Words

The words we use matter. They can be the difference between friendly advice and an insult. People use them to form opinions.

What people read about WordPress will impact their decision to use it. If the software sounds confusing, they may head elsewhere. They may never fire up a demo to see for themselves.

It behooves all of us to think about how we talk about WordPress. Are we keeping new users in mind? Or are we losing them with technical jargon?

The impact may not be immediate. But by simplifying our language, we can attract more users than we lose. That’s highly important for the future of the project and its ecosystem.

The post Understanding Essential WordPress Terms and Concepts appeared first on Speckyboy Design Magazine.

For me, it starts with opening my favorite design tools. From there, I experiment with color and typography. Complimentary images are chosen to enhance the look. Layouts are built and refined. The result is (hopefully) good enough to share with clients. After a few revisions, it’s time to build.

However, technology is starting to blur the lines between designing and building. No-code tools like the WordPress Site Editor are throwing a wrench into the process. It’s now possible to handle design while building a website.

This method may be a boon for efficiency. But it may also lead to reduced originality in design. It might even discourage us from trying to level up our skills.

So, what does this mean for the future of web design? And where should we draw the line between convenience and originality? Let’s take a deeper look at how no-code tools are disrupting the design process.

The Good Parts of Browser-based Design

Designing a layout in a web browser isn’t new. Tools like Figma have brought this functionality into the mainstream. But there was still a separation between design and code.

No-code site builders have broken that barrier. And they offer some potential benefits.

Web design has often been theoretical. For example, you can create a beautiful mockup in Photoshop. But you won’t necessarily know how it will translate to a fully-functioning website.

Manipulating HTML and CSS to match the mockup isn’t always easy. Plus, adapting the design to mobile devices is a whole other process. The ability to accurately test while we design is a game changer.

Thus, a browser-based design eliminates some of the common issues we face. It’s a more direct way to work. That could mean launching a project faster. Revisions could also be easier to manage.

It’s Easy To Settle For ‘Good Enough’

The downside may be in how these tools change our mentality. For some, efficiency might become the primary focus. That could send the practice of detail-oriented design to the wayside.

We may be more inclined to stick with the default options. On the one hand, this makes perfect sense. It’s never a bad idea to go with components that work. But there’s also an argument that the finished product won’t reach its full potential.

To be fair, similar points have been raised about frameworks like Bootstrap. Because much of the hard work is done for us, it’s easy to settle for something good enough.

This is great for non-designers. They can create without investing in expensive tools. Nor do they need to understand code. At the same time, some finer touches may be missed. And that’s what tends to make a website stand out.

It’s not necessarily the tool’s fault, however. Ultimately, the decision to go all-in with great design is ours.

Combining Convenience and Great Design

The challenge, it seems, is in taking advantage of no-code tools without relying too heavily on their default styles. Maybe that requires us to keep those old-school techniques in the mix.

In practice, that means employing traditional design tools. After all, no one is forcing us to start from scratch in a web browser. It’s merely an option.

Thus, building prototypes with Figma, Photoshop, or whatever you’re comfortable with is still valid. This allows you to focus solely on the design. Plus, you won’t be limited by the constraints of most no-code tools.

That provides a solid launching point. When you enter your preferred no-code builder, you’ll already have a plan. This can guide you through the build process.

Working this way may require a period of adjustment. It can be difficult to create certain features with these tools. But in time, you can learn to adapt your prototypes to better fit the development environment.

Tools May Change, but They Don’t Have To Change You

The tools and techniques we use exist to help us achieve our goals. For web designers, it’s about building sites better and faster.

It’s easy to fall into a trap, though. You might, for instance, feel like you have to dive head-first into no-code tools. Or that you’ll need to abandon your previous workflow. That’s not the case.

These apps don’t have to completely change the way you design a website. Instead, they can be used to improve the process and create efficiencies.

For better or worse, these tools are disrupting the industry. But we can choose how much they disrupt us.

The post How No-Code Tools Disrupt the Design Process appeared first on Speckyboy Design Magazine.

WordPress 6.1 has brought about one of these hidden gems: the ability to use block template parts within a classic theme.

It takes the capabilities of block themes and ports them over to their classic counterparts. Classic themes still make up the overwhelming majority of the market. Therefore, it makes sense to bring them up to speed on the latest tools.

Let’s explore what this feature does and why you might want to use it. Then, we’ll demonstrate how you can implement it on your website.

What’s a Block Template Part?

WordPress 5.9 introduced Full Site Editing capabilities. When combined with a block theme, the feature allows users to edit various templates within the back end.

Block template parts represent any area of a website you’d like to manage within the WordPress Site Editor. Examples include the site’s header and footer. But they could also include niche areas as well.

Theoretically, a block template part can be as broad or narrow as you like. This allows web designers to define only the theme elements they want to make editable. At best, this offers convenience for site owners while protecting the layout from any major mishaps.

Unlike the custom templates that have long been used in classic themes, block template parts are saved as HTML files. They also consist of block markup, rather than PHP.

Classic themes have traditionally used the WordPress Customizer to make specific areas editable. The feature works well enough but lacks the advanced capabilities of the Site Editor. Now, there’s a way for these themes to move past those limitations.

Adding a Block Template Part to a Classic Theme

Adding a block template part to a classic WordPress theme is a relatively simple 4-step process. Here’s an example of how to set things up.

Step 1: Allow Block Template Parts in Your Theme

The first step involves allowing your theme to use block template parts. This can be accomplished by adding a code snippet to your theme’s functions.php file:

Code snippet courtesy of Learn WordPress.

Note that if your theme’s functions.php file already has a function that adds theme support for other items, you’d only need to paste add_theme_support( 'block-template-parts' ); within the existing function.

Step 2: Design Your Template in the Block Editor

Next, it’s time to fire up the WordPress Block Editor. The easiest way to go about this step is to create a new page – we’ll call ours “Test Block Part”. It can be deleted once we have our block template part up and running.

Within this page, we’ve created a simple two-column layout. It includes our fictional client’s contact information and links to their social media profiles. Everything here uses standard blocks included with WordPress core.

The idea is to allow our client to make edits to this information as needed – but without having to touch the rest of the site’s layout.

Step 3: Copy and Paste Block Markup into an HTML File

Now that we have our layout built, it’s time to copy and paste the block markup into an HTML file.

There are a couple of options for copying the block markup:

1. Select the blocks you’d like to copy within the Block Editor and enter CTRL + C (or COMMAND + C on a Mac) to copy the markup, OR;
2. Enter the WordPress Code Editor for your page by clicking on the Options button within the Block Editor, then copy the relevant markup;

Next, open the code or text editing app of your choice and paste the block markup into a new file. Our markup looks like this:

Save the file as an HTML document into the /parts directory of your theme (create the folder if it doesn’t already exist). Note that you don’t need anything else in the file besides the block markup.

For our example, we’ll call our file footer-contact-info.html. Make note of the file’s name, as we’ll need it in the final step.

Step 4: Add the Block Part Template to Your Theme

Now that we have our block part template created, we’ll need to add it to a PHP template in our classic theme.

WordPress has a built-in function called block_template_part() that we can use to call our block template part into the theme. It uses the HTML file’s name (minus the “.html” extension) to locate the template. Here’s what our code looks like:

We can add this function wherever we’d like the block template part to display. In this case, we’ll add it to our footer.php template.

All that’s left is to upload our updated theme files to the server. Once that’s complete, we’ll refresh the page and find our block template part proudly displaying at the bottom of the site.

Edit Your Block Template Part Anytime

Whenever we need to make a change, our custom block template part is only a few clicks away. To find the template, visit Appearance > Template Parts, then click on the template’s name (footer-contact-info).

Edits can be made via the Block Editor – just like any WordPress page or post. Save your changes and they’ll appear on the front end of the website.

*Note: Some early implementations of this feature contained a bug that caused a block template part to be uneditable within WordPress. Adding a theme.json file to the theme temporarily fixes the issue.

Bringing Classic WordPress Themes into the Block Era

The ability to use block template parts in a classic WordPress theme is a step forward. Theme developers can stick with the power and flexibility offered by PHP-based themes while adding block template support where needed.

It’s also a way to open specific elements up to back-end editing without having to switch to a block theme. The process is easy to implement and much less labor-intensive than starting from scratch. The result is savings in both time and money.

In addition, it offers us a way to move beyond the Customizer. That feature will likely be phased out over time, so the ability to switch to block template parts helps us get a head start on migration.

Best of all, there are tons of potential use cases for this functionality. It may be just the thing you need to add a layer of convenience to your next WordPress project.

The post How to Use Block Template Parts in a Classic WordPress Theme appeared first on Speckyboy Design Magazine.