So often, those of us in the industry talk about what we need from our clients – and that makes sense. But, in order to really serve them, we must fulfill their needs as well. However, it seems like that subject tends to fall under the radar.

With that in mind, let’s explore some things that our web design clients need from us. Some of it may be common sense, while others are a little less obvious.

An Open Mind

Being open to new ideas is a two-way street. Sometimes, clients may approach their website with ideas that are at odds with what we may think.

Just like everyone else, we web designers are susceptible to being set in our ways. Our experiences can lead us to what we believe is the perfect formula for a website. It may be certain design characteristics, or it could be development tools and techniques.

When a client suggests something outside of our comfort zone, it’s natural to become, well, uncomfortable. However, this doesn’t necessarily mean their ideas are unworkable. It may be a case of getting past those initial thoughts and gaining a better understanding of what’s being said.

Of course, not every idea a client has is a winner. But it’s still important to come into each project with an open mind. You could be missing out on something great.

Beyond that, the fact that you truly listened can help to create a solid client-designer relationship as well.

Honest Advice

Listening is only part of the relationship-building process. Honesty is also a key factor.

That applies to client ideas and requests, but it also goes deeper. For instance, providing guidance as to the pros and cons of a feature or functionality. The same goes for pricing and the value received from a particular product or service.

Honesty builds trust and empowers our web design clients to make good decisions. Without that honest advice, project outcomes will likely suffer. Details can be overlooked and money might be spent in the wrong places.

Sometimes, the easiest thing to do is to simply go along with whatever a client says. It’s the path of least resistance, and the thinking goes that it’s also a way to finish off a project faster.

In reality, honesty pays off all the way around. When more informed decisions are made, projects are less likely to go awry. Theoretically, it also leads to faster and better results.

A Proactive Approach

Our clients are often experts in their own field. Whether they run a business or non-profit, they’re likely immersed in their jobs. That means they won’t have as much time to devote to their website.

Because of this, important items could slip through the cracks. WordPress core, themes and plugins may become outdated. Site errors may be wreaking havoc on performance and usability. In short, a website can fall into any number of bad situations without proper vigilance.

That’s where we can be of service. By staying on top of what’s happening in terms of software, security and industry trends, we can keep our clients’ sites running smoothly.

Be proactive by staying in touch with your clients. If you see an issue, or even the potential for an issue, reach out and let them know. They’ll appreciate the effort and any headaches you’ve saved them. In addition, this helps their organization maintain a good reputation with their audience as well.

A Helping Hand

Not everyone with a website is tech-savvy. For these folks, the learning curve for tasks like adding content can be relatively steep. But a helping hand from their web designer can make a big difference.

Using your knowledge to educate clients empowers them to take advantage of the amazing website you’ve built. That could mean anything from fresher content to fewer support requests coming your way.

Still, support requests go along with the territory – even if we hope they’ll be minimal. When they do come in, offering fast and friendly service is vital. It lets your clients know that you have their back and can be depended upon.

Overall, it’s about being there when clients need us (within reason, of course).

Keeping Client Needs in Mind

Web design projects can be full of challenges. Sometimes, that can lead us to simply focus on the task at hand without much thought of those we are working for. It’s an easy trap to fall into.

But client needs do matter – for a lot of reasons. The most important being that it forms the basis of a partnership. We need each other in order to reach a successful outcome.

Even after the site launches, being there to provide guidance ensures a better relationship – not to mention a well-maintained website. As a bonus, it could lead to repeat business and referrals.

While web design is a highly-technical field, there’s a human element that can easily be missed. But if you can master this aspect of the job, both you and your clients will be better for it.

Today, we’ll introduce you to the concept of WordPress maintenance mode as well as example scenarios for its use. Then, we’ll show you how easy it is to implement on your own website. Let’s get started!

What Is Maintenance Mode?

Changing a page or post within WordPress is a simple process. You can add, edit or delete content as needed. But there are cases when you need to do more – and it could have a negative impact on your site’s visitors.

Maintenance mode is built for these instances. Through the use of a plugin, it limits the general public’s access to the front end of your website. At the same time, it allows logged-in site administrators to view the website as usual.

This makes it extremely handy for implementing large or complex changes. Users who come to your website will see a customized screen, thus avoiding the possibility of experiencing a broken page or feature.

For developers, it provides peace of mind. You can complete your work without the fear of causing issues for users. When you’ve finished and tested the results, it’s easy to return to normal.

Potential Usage Scenarios

Routine changes, such as adding a new blog post or editing the contents of a page, won’t necessitate putting your website into maintenance mode. However, there are a number of scenarios where it may be appropriate:

eCommerce Websites

If you’re making significant changes to your WooCommerce shop, you probably won’t want customers browsing, adding items to their cart or completing orders. A customer caught in the middle of these updates could be charged incorrectly or encounter usability issues.

Online Courses

WordPress makes for a great learning management system, as you can use it to build interactive courses. But, just as with eCommerce, you won’t want to implement changes while students are in the middle of a course. This could hamper their progress – not to mention the potential for causing confusion.

Bug Fixes

This is also ideal for times when you’re performing actual maintenance. If, for example, a feature is broken and is rendering all or part of your site unusable, temporarily shutting it off from public view may be the best way to go.

Of course, there are a number of other scenarios where this tool could come in handy. Hopefully these examples provide some context as to when to implement it on your WordPress website.

Putting Your Website in Maintenance Mode

Now that we’ve covered what maintenance mode is and why you’d want to use it, let’s put it into action. Thankfully, it’s a fairly straightforward process.

1. Install the WP Maintenance Mode Plugin

There are a number of different WordPress plugins that enable the use of maintenance mode. They all have their own strengths, and it’s worth taking the time to find a good fit for your needs. But for our purposes, we’re going to use WP Maintenance Mode, a popular choice that offers all the basics.

To install it from the WordPress Dashboard, go to Plugins > Add New and search for “WP Maintenance Mode”. From there, install and activate the plugin.

2. Customize Your Maintenance Mode Screen

Next, it’s time to make sure that our maintenance mode screen looks good and provides the right information to users. To do so, let’s head over to Settings > WP Maintenance Mode.

Then, click on the Design tab to start customizing. WP Maintenance Mode lets us choose a heading, text, colors and a background for the screen. You can even upload a background image, if you like.

Once you’ve set things up the way you want, save the settings and then click on the Modules tab.

Among the available modules are a countdown timer, social media links and general contact info. Google Analytics may also be added here. There’s even a built-in method for users to input their email address and find out when the site is back online.

To keep things simple, we’ll just choose a countdown timer, add a couple social media links and contact info.

3. Testing It Out

Since we’re experimenting with a local install of WordPress, there’s no harm in checking out what our custom screen will look like.

We can turn on maintenance mode by visiting Settings > WP Maintenance Mode and making sure we’re within the General tab.

Here, we can choose to activate maintenance mode. In addition, there are options for defining which user roles can access the front and back ends (administrators always have access), how to handle search engines and more.

Remember, since administrators still have regular access to the website, you’ll need to log out in order to see things as a typical user would. Once we’ve done that, we can take a look at the results.

4. Return to Normal

Putting your website back to normal is quick and easy. Visit Settings > WP Maintenance Mode and make sure you’re within the General tab. Click the “Deactivated” radio button and save the settings. That’s all there is to it!

11,000+

Icons

20,000+

Illustrations

DOWNLOAD NOW

14,000+

UI & UX Kits

16,000+

Web Templates

A Helpful Tool for WordPress Maintenance

The great thing about utilizing a WordPress maintenance mode plugin is that it allows you to work on your website while keeping users out. This gives you room to make necessary changes while preventing any publicly viewable mishaps.

In addition, it’s incredibly easy to use. Set up a few options, activate maintenance mode and you’re good to go. Turning it off is just as quick.

Now that you have this handy addition to your toolbox, maintaining your WordPress website will be a little less stressful.

It’s something we do out of necessity. Most organizations don’t have web-savvy experts on hand. As such, there’s a learning curve for clients when it comes to design, functionality, content management, SEO, maintenance and a whole lot more.

To some designers, this may seem like an extra burden. After all, shouldn’t we just focus on building great things?

While there’s some merit to that argument, there are also a number of reasons why educating your web design clients is worthwhile. Let’s take a look!

Better (and Faster) Project Outcomes

The first benefit is purely practical. Sure, you probably enjoy your job. But no one enjoys a project that seemingly drags on forever. Helping your clients understand what’s involved in the design and build processes can get things moving forward.

Quite often, a project stalls because clients are unsure of how things work. What type of content is acceptable? Are there any technical limitations to what we want to do? There are a ton of potential questions they may have.

Building a website is not like shopping for clothes – clients don’t simply pick out everything they want, then head to the cash register to pay.

On the contrary, a lot of consideration has to go into how a website works, what it looks like and what features to include. Therefore, clients need to understand the basics, along with the pros and cons of these decisions. It affects everything from budget, marketing position to user experience.

Serving as a guide to your clients can make a positive impact, both in getting the project completed and in the quality of the final result.

It Builds Mutual Trust

Having a strong, trusting relationship with your clients is vital. This can create customer loyalty that keeps them with you year after year. And it may also result in some lucrative referrals as well.

But the biggest benefit here is the ability to work together. A relationship that’s strained or very one-sided may make you cringe every time the phone rings or an email arrives. That certainly doesn’t help you do your best work.

When there’s a mutual trust, however, the process can be much more productive. Designers know that, when a client asks for something, they likely won’t tear the whole thing up minutes after you finish it. Why? Because the details were discussed honestly.

Clients, on the other hand, realize that you have their best interests at heart. When you make a suggestion of how to approach a project, they’ll be more likely to listen.

Fewer Support Requests

Every website needs maintenance at some point. It could be a CMS software update or a new feature that needs to be added. They go along with the territory and designers can usually prepare for them.

But it’s those little support requests from clients that can throw off our schedules. The “how-to” questions or the “oops, it’s broken” pleas for help.

These things can happen to anybody. But a client who has a basic understanding of how to manage their website should be less likely to run into these issues. That will hopefully translate into fewer support requests coming your way.

Plus, clients will feel empowered. Seeing someone who may have had initial nervousness around technology learn to help themselves is pretty great as well. They have a newfound confidence and you have the good feeling that comes along with helping.

Educating Your Web Design Clients Is an Investment

Educating clients – whether through formal training or friendly advice – takes time and patience. But it is very much worth the effort.

There are a number of long-term benefits. It helps to create stronger designer-client relationships, results in better project outcomes and may even save you a few panicked support requests.

In addition, the potential monetary benefits shouldn’t be ignored. Training clients is something you can build into your services and provide your business with another source of revenue. You can even use group educational events like webinars as a way to drum up new projects.

All told, by educating your web design clients you are making an investment in both them and yourself. It’s something that can benefit every web designer.

The good news is that the WordPress community has dealt with these issues too. That’s why a number of plugins have been developed to help you make quick work of even the most painful items on your to-do list.

Today, we’ll introduce you to a selection of plugins that you can use to rip through those tasks with ruthless efficiency. But don’t worry – you won’t have to tell your client how fast you did it. A developer needs a chance to kick back and relax, after all.

Enable Media Replace

We’ve all been there. An image or other downloadable file is uploaded to a WordPress site. Sometimes, that item is used in multiple places. When a change is required, it means hunting down every single instance. That’s exactly what Enable Media Replace intends to fix. It enables you to replace any file uploaded to the WordPress Media Library. In addition, it replaces each instance of it throughout your site. You can even rename the file.

Better Search Replace

There are times when a word, phrase or URL needs to be changed en masse throughout a website. It can take a whole lot of grunt work to find them all. That’s where Better Search Replace comes in to make quick work of the job. The plugin will search your database, even allowing you to select which tables to look in. From there, it will automatically replace each matching occurrence with the content of your choosing. Thankfully, the “Dry Run” mode lets you see changes before they are made.

Broadcast

Broadcast is a plugin built exclusively for sharing content within WordPress Multisite installations. Pages, posts, file attachments and more can be synced between websites. Update the “parent” content, and the changes will be automatically synced throughout the network. It even works with custom fields.

Simple History

If your website has multiple users making changes in the back end, it can be difficult to track down who made a particular change. Instead of asking everyone in a mass email, try installing Simple History. The plugin keeps track of all sorts of changes to content, plugins, menus and a whole lot more. It’s an easy way to keep tabs on what users are doing.

PW WooCommerce Bulk Edit

Running a WooCommerce shop can be a lot of work. And editing products is one of the most time-consuming tasks. PW WooCommerce Bulk Edit takes some of that pain away by enabling you to edit all of your products on a single screen. In-line editing means that you can click on a setting, like a product description or price, and make changes right then and there.

ACF Theme Code for Advanced Custom Fields

Advanced Custom Fields (ACF) is one of the most popular and powerful plugins for WordPress. You can use it to add all sorts of content and functionality to your website. But it does require writing code to get those fields to show up in your theme. ACF Theme Code can save you tons of time by generating that code for you. Copy and paste the generated code into your theme, then customize to meet your needs. Easy!

11,000+

Icons

20,000+

Illustrations

DOWNLOAD NOW

14,000+

UI & UX Kits

16,000+

Web Templates

Import and Export Users and Customers

Adding multiple users to your WordPress website can be time-consuming. Import and Export Users and Customers makes it easy, with the ability to import users via a CSV file. The plugin also works with WooCommerce, BuddyPress and a number of popular membership plugins. Need to export the entire list? That’s only a few clicks away as well.

TablePress

Talk about a tedious process. Creating HTML tables in WordPress the old-fashioned way means adding data cell-by-cell. TablePress has a better way. This free plugin allows you to import CSV or MS Excel files and turn them into tables. It also utilizes the DataTables JavaScript Library, allowing users to sort tables by column and a whole lot more.

Manage WordPress More Efficiently

The best WordPress plugins tend to make quick work of otherwise difficult tasks. That’s why the selections above are at the top of their class. They’re great at saving you time and eliminating that pesky grunt work. Plus, they may just save you from the sore wrists that accompany click after click of repetitive work.

The more you can streamline site management, the better. We hope these plugins will turbocharge your workflow.

Gutenberg breaks content down into “blocks”, or little sections that can be rearranged with ease. By default, WordPress comes with a nice selection of blocks. But it also allows developers to build their own custom blocks as well.

Custom Gutenberg blocks can be a game-changer for theme developers. Rather than relying on workarounds or rigid page templates, a custom block can place specialized content anywhere within a page. Elements such as testimonials, accordion menus and pricing tables are just a few examples of what can be achieved.

As great as custom Gutenberg blocks sound, there was some initial concern about the barrier to entry. Building blocks natively requires knowledge of React, which could leave out a lot of developers.

Thankfully, the WordPress developer community has stepped up with tools that get around the React/JavaScript requirement. They allow you to create your own custom blocks in a visual manner and implement them into your existing WordPress theme.

Today, we’ll introduce you to a few of these tools and show you how easy it is to get started.

Custom Gutenberg Blocks: Tools

A number of tools have hit the market that allow web designers to create custom Gutenberg blocks without JavaScript. Mind you, they still require at least some knowledge of code (HTML, CSS and PHP) – or at least how a WordPress theme works. That’s because each option requires you to create a PHP file of block code and optionally add some styling to match your website.

That said, each of the WordPress plugins below leverages custom fields in order to create content. Custom fields existed well before Gutenberg came along. In fact, it’s long been common practice to utilize them as a way to get around the limitations of the old Classic Editor.

The nice thing about this sort of configuration is that custom fields offer flexibility in the types of content you can create. Mix that in with the portability of a Gutenberg block and you have a powerful new tool.

Advanced Custom Fields PRO

Advanced Custom Fields has been around for years. It started out as a handy UI for building complex custom field sets and now boasts over 1 million active users of its free version.

The commercially-available PRO version of the plugin (pricing starts at $49 per year) has evolved to allow for custom Gutenberg block creation. The ACF Blocks feature lets developers create a field set and assign it to a custom block.

More than the other plugins in this category, you’ll need to know PHP to get the most out of ACF Pro. However, existing users of the plugin will find the process for block creation very familiar.

Lazy Blocks – Gutenberg Blocks Constructor

Lazy Blocks is a free WordPress plugin that offers a visual way to create custom blocks. Like ACF, the plugin includes a number of custom field types (referred to as “controls”) for your block. Text, image, file, Classic Editor, color picker and repeater fields are just some of what’s available. There’s also an API for creating your own custom controls.

Other handy features include the ability to restrict your blocks to specific posts types, import/export via JSON and custom templates.

Block Lab

With Block Lab, custom block creation is a 3-step process. First is adding a block within the admin – which is similar to adding any other page or post. Next, add in the desired mix of custom fields (text, image, radio buttons/checkboxes, URLs, etc.) and configure settings like a custom icon. Third, create a block template for your theme and style it to your liking. From there, your custom block is ready for use.

The plugin is well-documented and even offers tutorials for creating specific block types.

A Simple Custom Block Using Block Lab

For simplicity’s sake, we’ll take a test drive using Block Lab. However, don’t let that stop you from trying out the other options as they have plenty to offer.

Now, on to our example. We’ll assume you have a WordPress website with the Block Lab plugin installed and activated.

In our project, we’ll create a simple notification block that we can use to display important information to visitors. It won’t be much, just a colored background and some text. But it will hopefully provide a glimpse into what’s possible with a custom Gutenberg block.

1. Navigate to Block Lab > Add New to create our new block.

2. We’ll start by adding a title (Notification Bar) and three fields:

• Background Color – A Color field that will let us choose the background for our notification bar. We’ll assign it to display in the Inspector area of the block editor, which is in the right sidebar.
• Text Color – Another Color field, this time for our text. This one will also display in the Inspector.
• Message – A Text field that will display our custom message. This field will be housed in the main Editor area of Gutenberg.

Note the field names assigned to each block, as we’ll need those in just a bit.

We should also mention that the plugin allows us to choose a custom icon and categorize our block. This will help us find it when we want to add it to a page.

3. With our fields and settings in place, it’s time to click the Publish button to save our block. Doing so will trigger a notification message, telling us where to place our custom block template within our theme:

/wp-content/themes/YOURTHEME/blocks/block-notification-bar.php

4. Next, we’ll need to create a block template. So, fire up the code editor of your choice and create a new file called block-notification-bar.php and save it into a new /blocks/ folder within your theme.

Block templates have to be written from scratch. But don’t worry, it’s not too difficult! Block Lab has documented how to do this, with plenty of examples.

In our case, we have just two block types: Color (background-color; text-color) and Text (message). Using the documentation as our guide, we’ll add this code to our custom block template:

Make sure to save the file and upload to your web server when done.

5. Our custom block has now been created! That’s really all there is to it. Now, we can add it to a page.

6. On the front end, we have a basic notification bar that’s sure to grab the user’s attention.

Going Further

Even in this very simple use case, there is a real value in the notification bar we’ve created. It can be placed on any page or post within our website and can be customized each time.

If we wanted to expand upon what we’ve built, there are plenty of options. Adding things like icons, buttons and the ability to link to another page or post come to mind. These things are all possible within Block Lab, as well as the other plugins mentioned above. And, the use of CSS can greatly enhance the look as well.

Now that you’ve had a taste of the custom block creation process, it’s time to experiment! Install one of the plugins above and see how you can enhance your WordPress website.

Just carving out a space of your own can be tough. Then there are the struggles associated with scheduling, communication and trying not to alienate your household. It’s uncharted territory for sure.

But just because working from home is novel to you doesn’t mean you get a pass on productivity. There are still things that need to get done and bills to pay.

Today, we’ll share some tips to help you get the most out of that new home office.

Declare Your Space

The first part of the equation is in finding a place to work. This depends so much on your living situation.

Ideally, you’d already have an office setup or at least a spare room. Even a basement or an attic will do, provided they have the amenities you need.

In these cases, working from home becomes that much easier. A little bit of isolation can be a good thing as it helps you to focus on work without interruption. But this is not the case for everyone.

You might instead be stuck trying to write code at the kitchen table (complete with kids and pets running about). What then?

It’s going to be tough, but you have to make the best of the situation. You’ll have to claim some space for work purposes – at least during working hours. Set some guidelines for others and (kindly) help them understand your needs.

The important thing to remember is that this isn’t going to be perfect. Adjusting to a new working space is a process and will take some time. Eventually, it will start to feel more comfortable.

Set a Schedule, Create a Routine

Because you’re now working in a completely different environment, your daily rituals are bound to be thrown into disarray. The more distractions at home, the more wayward your schedule becomes.

Still, you’ll want to dedicate blocks of time exclusively to getting things done. It may not be the same as what you were used to. You might even have to split your workday into multiple shifts to accommodate children. There’s absolutely no shame in it. Clients and colleagues alike are probably facing similar situations.

Flexibility is going to be key in this area. Staying rigid and expecting things to go exactly as they did in your old office is going to be stressful. Instead, focus on what works best for you and your family. If you have to take a couple of hours off in the middle of the day, so be it.

That being said, look to establish consistency where you can. That means doing the same things at the same time each day, when possible. This will at least get you into a daily rhythm – which is a huge help when you have a job that requires creativity.

Stock up on Supplies

Web design and development can be done from just about anywhere. Yet, transitioning to a home-based office may require some sacrifices when it comes to hardware and software.

If you work for an agency, they may provide you with a powerhouse desktop computer and all the high-end apps you need. Out of the office, you might well be on your own to some degree.

This is actually a pretty big deal. We often set up our workflows in very specific ways. A disruption here means using unfamiliar tools with less-powerful devices to run them. There’s a certain amount of frustration that goes along with the territory.

Therefore, workflow may be the one area where mimicking your physical office makes the most sense. Even if you don’t necessarily have access to the same level of hardware, grab as many of your go-to apps as possible.

The familiarity will help you accomplish tasks without having to search out completely new methods.

Let the Positives Inspire You

Well, maybe you are stuck working on your couch and it’s far from ideal. But what are the bright spots? Perhaps your pet is by your side. Or your little one is drawing you a picture. There are still reasons to smile.

Sometimes, it’s all too easy to dwell on how we think things should be. That doesn’t lend itself to productivity, though.

Instead, look for the good things about your situation – no matter what they are. Something as simple as getting to listen to the music you want can stir up creative energy. The same can be said for taking the laptop out into the backyard.

Working from home is actually a pretty great opportunity. It’s a way to look at things through a different lens. And you may just find out why so many web designers prefer it to a brick-and-mortar office. There’s a certain freedom that you can’t get anywhere else.

There can be some confusion when it comes to the terminology used to describe these techniques. As with so many aspects of design and development, we are inundated with buzzwords. Sometimes they become so mixed up that we (mistakenly) use them interchangeably. True, both adaptive and responsive design share a similar end goal: to ensure a great user experience on large screens, small screens and everything in-between. But they take very different approaches to get there.

Today, we’ll dig into those differences in an effort to help you choose the right solution for your projects.

What is Responsive Design?

The more commonly-used of the two techniques, responsive design rearranges content based on browser size.

CSS media queries are used to set one or more breakpoints – viewport resolutions at which selected elements of a website adjust accordingly. Breakpoints are often set to mimic the screen sizes of popular mobile devices, including phones and tablets.

One common example of this would be responsive navigation. Think of a full-width navigation bar displaying on larger screens (laptops and desktops). As the viewport shrinks, the menu could conceivably be set to adjust any number of ways to make use of the space available. Then, on the smallest of mobile screens, that same navigation is then hidden beneath a “hamburger” menu.

Responsive multi-column layouts are also quite popular. Designers often configure them to “stack” on top of each other on smaller screens. On mid-sized screens such as tablets, columns may remain in-tact or partially stack. The feature is actually built into CSS specifications such as Flexbox, which automatically adjusts columns according to screen real estate.

Advantages of Responsive Design

Perhaps the biggest advantage of using responsive design techniques is that users get essentially the same website on every device. That continuity allows frequent visitors to more easily find what they’re looking for.

In addition, adding responsive elements to CSS is relatively straightforward. It’s a matter of taking what’s on the big screen and adjusting accordingly for various breakpoints. Even older websites designed before the smartphone revolution can be retrofitted without too much trouble.

Lastly, since the content and URL of a given page is the same throughout the full spectrum of viewports, a responsive design is better for SEO. Thanks to that consistency, search engines tend to handle these websites a bit better.

Disadvantages

Going responsive is not all good news. Some website layouts may be fine on a big screen, but are more difficult to manage on smaller viewports.

Massive amounts of scrolling might be necessary – even if that isn’t quite as taboo as it used to be. Also, some interactive or code-heavy elements may simply be too slow and cumbersome to use on a phone.

What is Adaptive Design?

Adaptive design, also referred to as “progressive enhancement”, is the process of creating several fixed layouts for various screen sizes. In essence, a designer could create completely different experiences for phones, tablets and desktops.

The idea is that you start with something very basic and then “enhance” the experience for larger screens. The more screen real estate a user has, the more bells and whistles will become available.

One way to visualize the difference between adaptive and responsive design: observe how a given website reacts as you resize your web browser on a desktop device.

A responsive website will continually adjust content as you reach specific breakpoints. Columns may stack, containers and typography may scale.

With an adaptive website, there is an absence of a constantly-shifting layout. Instead, new breakpoints may bring completely new layouts – and thus, even some potential differences in content. For example, some items deemed unnecessary on a phone may be removed altogether.

Advantages of Adaptive Design

Implementing an adaptive design means really putting users first. By crafting a separate experience for a specific screen size, designers can limit the pain points that often come with responsive sites.

Mobile users, for instance, will see only the design and content elements that are relevant to them. The website should, in theory, be easier to navigate and content easier to digest on that smaller, touch-enabled screen.

Then, as more screen size and computing power come into play, those extra features are added in. Adaptive design is understanding that the web is not one-size-fits-all.

Disadvantages

Because you’re creating separate experiences, implementing adaptive design techniques can be very time-consuming. This is especially of concern for projects that are on a tight budget, deadline or both.

Then there is also the potential for an inconsistent user experience. Attention to detail is incredibly important here, as a website will need to provide a separate-but-similar look, feel and functionality. Missing a detail or making a few poor decisions in the design process could hamper the ability to use the website on one or more devices.

Speaking of devices, new ones are being released all the time. Some have unique viewports and could conceivably be served the “wrong” layout. Therefore, it may require routine checks to ensure your site is working with the latest technology.

SEO is also a concern for sites that serve up mobile-only editions using “m.yoursite.com” and the like. That won’t come into play in every situation, but still worth considering if your project is affected.

Choosing the Right Design Technique

How do you know which technique is the best fit for your project? In many cases, it may be a matter of time and money. To that end, responsive designs are quicker and cheaper to implement.

If you’re using third-party products like WordPress themes – which often come with responsive styles –  that decision has already been made for you.

However, adaptive design still has its place. For larger websites that have the budget and time resources, designers can craft an outstanding experience for every device using adaptive techniques.

Either way, the bottom line is ensuring that your website works well for every user. Thankfully, there are two highly-proven methods to make it a reality: adaptive or responsive design.

This is one of the great freedoms of being a freelancer or part of a small agency. You get to forge your own path. But, how do you determine which way to go?

Some designers will be happy to dabble in a little bit of everything. That means working on different types of projects and perhaps a wide range of budgets.

But others will undoubtedly want to focus in on a particular niche. This can be a bit more difficult to determine – and it’s our subject for today.

Let’s look at some items to consider when deciding where you want your web design business to go.

Your Tools of Choice

Before you think about clientele, it’s important to consider the tools you want to use in your web design business. This decision is a pretty big one, as it can determine your project workflow and the types of functionality you can offer.

There are any number of established paths here. For example, you might be interested in working with self-hosted content management systems (CMS) such as WordPress or Drupal. Then there are also SaaS products like Shopify, Wix or Squarespace. Alternatively, maybe your sole focus is on progressive web applications that use React or some other popular framework.

Of course, choosing one doesn’t mean you have to push the rest aside. But it is worth mentioning that the more of these types of tools you work with, the more things you have to learn.

To become really well-versed in a platform means that you’ll have to spend time with it, discovering all the different intricacies. There are only so many hours in the day to do that, so finding focus here is vital.

If you have previous experience and happen to like a particular tool, maybe the decision has already been made?

Projects in the Right Price Range

Like it or not, money is a major consideration of any web design business. If you’re a full-time freelancer, you’ll at least want to make enough to cover the bills. Or, maybe you envision yourself with a beach house and a Ferrari. Either way, it requires careful thought and planning.

When first starting out, it’s tempting to take on projects in just about any price range. It makes sense, as you need both money and some beautiful websites to fill out your portfolio. However, it’s not a practice that will sustain your business for the long term.

Over time, you’ll start to see how each project helps or hinders your finances. Some low-end projects will undoubtedly end up costing you if you spend too much time on them.

The ultimate goal is to figure out how much time you can afford to spend on a project at a given price. Then, set a baseline.

For example, you might determine that $2,000 is a good starting point for pricing, provided you spend no more than 20 hours on the project. From there, the price would increase as the amount of estimated time goes up. As an aside, it’s never a bad idea to estimate more time than you think you’ll need – unexpected issues always pop up.

It’s also worth thinking about how many new projects per year you’ll need to book in order to reach your income goals. If you find that it would take 10 new clients a year, maybe that’s reasonable for you. If the answer is more like 20 new clients, well, you may want to rethink your pricing.

In the simplest terms: Is it better to have one $5,000 project or five $1,000 projects? Continually taking on smaller gigs means you have to hustle that much more to earn a living.

These numbers are just examples. In the end, you have to figure out what works best for your business.

Client and Project Types

The final consideration in our guide is figuring out the type of clients and projects you want to work with. These can be lumped together or not at all, depending on your personal preference.

Targeting by Industry or Size

If you’re a designer with inside knowledge of a specific industry, that may give you an edge over the competition. Having worked in the medical industry, for example, could lend itself to building websites exclusively for doctors and hospitals.

The advantage here is that you can become known within that industry and develop a great reputation. Word of mouth can be highly-effective when you have proven yourself and can boast a list of happy clients.

On the other hand, not every designer wants their focus to be quite that narrow. In that case, you may look more towards businesses that can spend within your pricing range. This offers up a variety of different types of clients, which can save you from the boredom associated with doing the same projects over and over.

Targeting by Functionality

Then there are the types of projects you’re looking to book. Again, this can be as broad or narrow as you like. It also ties in with the tools you’ve chosen to work with. If, for example, you know that you want to use WordPress, maybe your preference is to work solely on WooCommerce shops.

Much like targeting an industry, this strategy helps to position your business as an expert in whatever project type you specialize in. Building up your portfolio with successful eCommerce projects, for example, can be a huge advantage in gaining lucrative new clients.

You might also find that working within a specific industry points you in this direction. These clients may have similar needs in terms of functionality – something you can use to bolster the types of services you have to offer.

Defining Your Ideal Client

Understanding the tools, budget range and type of clients/projects you want to work with will provide a great foundation for knowing your market. From there, you can learn to spot the ideal clients who can help your business thrive.

Still, knowing how you want to work and who you want to work with is only half the battle. It still takes patience and effort to get your name out there. But persistence pays off.

Here’s hoping that your journey leads you to where you want to go.

Need to create a contact form? There are plenty of plugins to do the job, all taking different approaches to the same challenge. And that’s only one common illustration.

Plugins, themes and the custom code you write yourself can take you in any number of directions. There are advantages to this.

For one, you can take whatever approach makes the most sense for you. If it doesn’t work out, you can always switch gears. There is plenty of room to form a strategy and see it through.

However, there are situations where you can think a little too much. Times when you develop a complex plan, only to have overlooked a much simpler solution. It happens to every developer at some point.

So, how can you avoid this virtual minefield? By simplifying! Here are some tips for doing so.

List Your Project Requirements

The first step in decluttering your approach is to make a list. Think about what you ultimately want to accomplish. From there, think about the steps it will take to make it happen.

Perhaps this sounds a bit obvious – but that’s the point. In development, it’s easy to get caught up in just that desired outcome. When that happens, you may well ignore the details of how you’ll get there.

In my own experience, I’ve found that skipping the details leads to a seemingly-endless search. I’ll look through support forums, trying every answer I can find – regardless of whether or not it’s accurate. More often than not, it requires a trip back to the drawing board to think and plan.

As mentioned earlier, there’s more than one way to get where you want to go. So, think about the most likely steps that will put you on the right path.

You might find that the solution was easier than you initially thought.

Look for Existing Solutions

There’s no need to reinvent the wheel. Once you’ve figured out what you need and how to get there, you’ll want to look for existing solutions that follow suit.

The solutions themselves can range from a code snippet you found on GitHub to a niche plugin. And, since the WordPress development community is massive, the odds are you’ll find more than one potential option.

Not all options are created equal, however. Therefore, it takes a little research to determine which is the best fit for your project.

This isn’t necessarily going to be easy. Plugins can be difficult to judge until you dive in and start using them. And, if it’s a commercial plugin, it may take a financial commitment to fully test the software out.

Code you find from tutorials or support sites are also a challenge. Once in a while you’ll get lucky and find something that does exactly what you want. More often, there will be bits and pieces that will get you only part of the way to your goal. Be prepared to experiment.

Need Something Custom? Start Small.

There are situations where there just isn’t an existing solution that fits your needs. That’s when custom code comes into play.

Writing code is a challenge, even for seasoned developers. But it seems like half the work is in figuring out exactly what needs done. Because, without a clear vision of its scope, you may find yourself doing much more than is necessary.

Thinking about the requirements list we mentioned earlier, this same method can be applied to code. Go into the process with eye towards determining the bare minimum your script needs to accomplish. Once you have that figured out, look at ways you can improve upon it.

Those of us who started out utilizing WordPress plugins for all of our site’s functionality may find this difficult. Why? Because, generally speaking, plugins are fully-formed products. As such, it can distort your thinking a bit when trying to build something from scratch.

Writing code often means building from the ground up. Plugins, on the contrary, are like dropping a pre-fabricated skyscraper into a city. The expectations, especially as you start the development process, should be different.

Remember, there’s nothing wrong with starting small and expanding later on.

Ignore the Noise

We often associate trends with design – but they do show up in development as well. Therefore, you’re likely to be inundated with buzzwords as you research how to build or implement a particular feature. The WordPress development community isn’t immune to such hyperbole.

You’ll undoubtedly run into articles telling you to dump one language for another or go all-in on a JavaScript framework. There are plenty of opinions on which tools you should use and how you should use them. It requires a keen eye to figure out what is legitimate and what is noise.

The problem is that, if we took everyone’s advice, we’d spend our entire life shifting gears instead of getting things done. So, pick and choose the methods and techniques that make the most sense for you.

Maybe it turns out that a new technology is the best option. If not, it’s never a bad idea to stick with what you know.

Keep it Slow and Simple

The web moves quickly, and developers are often compelled to do the same. Yet, all of that rushing around can lead to a lack of critical thinking. In my own journey, that may be the top reason for the struggles I’ve had in WordPress development.

So, instead of jumping from place to place looking for answers, take a little time to think about your options. This, as much as anything, will help you both simplify the process and achieve better results.

Now, whether you’re a newbie or a veteran of the industry, the skills you need to succeed are always evolving. Yet, there are still some foundational things that everyone should know – regardless of specialty.

Today, we’ll train our focus on a bit of both the new and traditional. Let’s take a look at the five essential skills for web developers in the present day.

HTML and CSS

Surprised to see these two on the list? That’s understandable to some degree, as there are certainly more “exciting” technologies out there. But that doesn’t mean we should dismiss them.

To the contrary, both HTML and CSS continue to be the building blocks of the web. HTML is as important as ever, even if you’re using more robust languages such as PHP or JavaScript. Its role has evolved from something we used to style or lay out a page (though it was never intended for that purpose) to helping us build a semantic and accessible web.

CSS has also seen quite the evolution in its own right. The rise of CSS Grid and Flexbox have transformed how we create layouts. And it has also become a staple of animation, along with responsive design and advanced styling techniques. In some cases, it even serves as a solid replacement for JavaScript.

So, just like a house needs a solid foundation, web developers need to understand HTML and CSS inside-out. It would be difficult to accomplish other advanced functionalities without them.

JavaScript

JavaScript has also seen its own evolution. It started as a language that was often used to manipulate DOM elements and add a bit of functionality to websites. And it’s still quite adept for this purpose.

However, we’re now seeing entire interfaces being built with JavaScript as the main ingredient. This has a lot to do with some powerful frameworks that have come along in recent years. React and Vue, in particular, have led the way in this area.

While we haven’t seen these UIs take over the web just yet, it’s a segment that should continue to grow. That alone makes it worth digging into a framework or two.

Another area of growth is coming from WordPress and its Gutenberg block editor. It makes heavy use of React, which also happens to be a requirement for creating custom blocks natively.

Put it all together and you have lots of valid reasons for focusing on your JavaScript skills.

The Command Line

Everyone loves a good GUI. It just seems more comforting to point-and-click or drag-and-drop your way to accomplishing your goals. Still, the command line remains very relevant.

The funny thing is that even the latest buzzworthy technologies rely on the command line, or at least recommend its use. Take GatsbyJS, for example. The static site generator is all the rage these days and requires the command line to both build and maintain websites.

WordPress is the world’s most popular CMS and also has a wonderful CLI tool. It’s not required, but can perform the same functions as the visually-oriented Dashboard. And it also does some things the Dashboard can’t do, like large-scale search and replace, which makes it perfect for multisite installations and enterprise-level usage.

If you’re getting into version control, Git is another tool where the command line is recommended. There are some visual tools as well, but commands generally allow for more advanced usage.

Even if you don’t feel giddy at the sight of a terminal window, it’s still important that you know your way around one. Otherwise, you may not be able to accomplish everything your projects require.

How to Work with APIs

These days, websites don’t just depend on local files or databases. They often pull data from a number of outside sources. Providers such as social media platforms, cloud services and content delivery networks (CDNs) are powering a lot of essential functionality.

In many cases, websites interface with these outside sources via an API (Application Programming Interface). This allows for accessing a service or application’s data and features through a specific set of procedures – usually via code.

APIs are not one-size-fits-all, however. They can be proprietary – so what works for one service probably won’t work for others. Tapping into one usually requires digging into a particular API’s documentation.

Therefore, it’s important to learn the details behind whichever APIs you want to work with. Whether that’s Twitter, Amazon AWS or Google Maps, you’ll have to study up to get the most out of them.

Sometimes we can get lucky and the API functionality we need is already there for us. Often, you’ll find it in something like a WordPress plugin. But there will be times when you have to work directly with a provider to accomplish what you need.

The Ability to Adapt

It seems like there is always some new tool, technique or code breakthrough looking for our attention. So, our last essential skill in this roundup is all about adapting to an ever-changing web.

One of the biggest fears in web design and development is that of falling behind. You don’t want to be left holding the bag while others seize on the latest and greatest trends.

That’s why it’s vitally important to adapt to new ways of doing things and seeing how they fit into your workflow. This will enable you to stay relevant in the marketplace and potentially book some exciting projects.

There’s a catch, though. Not every new thing is going to be worth your time. The challenge is in finding skills to add to your repertoire that fit the types of projects you want to work on.

Perhaps the best thing to do is keep an eye on industry trends. If you see something that can benefit your career (or looks interesting), take time to learn more about it. Once you determine it’s a good fit, you can dig deeper.

Learn the Basics, Then Move Forward

There is a lot of pressure on developers to absorb libraries worth of knowledge. But the truth is that you don’t need to know every detail.

Each one of the skills mentioned here are vast. And it’s unlikely that any living soul knows everything there is to know about them. The key is in learning the foundational aspects first and foremost.

By familiarizing yourself with the basics, you will have the opportunity to add depth to your knowledge over time. Quite often, we learn how to do x, y and z because we’re working on a project that requires it. That’s a natural benefit of experience.

So, if there are some areas on this list you don’t know much about – don’t worry. Start small and work your way up. Eventually, you’ll have the skills necessary to succeed.