Day: November 29, 2021

Today, I want to talk about our favorite subject as designers: clients. Oh, clients. You can’t live with them, you can’t punch them! The primary thing to remember when dealing with clients is this: you can never – I repeat, never – make a bad client into a great client. Let me say that again: you can never make a bad client into a great client.

Sometimes you can make a bad client into a passable one, but, unless you’re getting compensated extremely well, it’s rarely worth the effort.

An unreasonable, demanding, emotionally disturbed client already has those qualities before you even meet them. It’s not personal – they’d most likely be that way with any designer.

If you want to have a challenging yet rewarding, insanity-free working relationship, you must start with a good client.

Fair enough, you say. But how am I supposed to tell which clients are good and which ones aren’t before I work with them?

In my experience, there’s an easy way to determine which clients are worth the trouble and which ones you should just skip over, and it has to do with their budget. Not the specific amount, per se, but their attitude towards budgeting in general.

There’s a profoundly important difference between a reasonable client who doesn’t have much of a budget, and a client who’s just, well, cheap.

The former you should, by all means, seek out and work with – the little guys need good design too! Clients who can’t pay you what you feel your standard rate should be can usually help you out in other ways that will lead to much more lucrative opportunities later. Let me explain what I mean.

Something For Nothing

When working for less than your standard rate (and again, there’s nothing wrong with that, especially in today’s economy), you should always negotiate for something else in exchange for your “discount.”

And you should treat it like a discount. Your client is receiving your services at a lower rate, and they need to be aware that, as such, there are certain deliverables that won’t be available to them.

If your client can’t pay the initial price you quote them for the work, the second price must carry a reduced amount of work. The initial price you quoted them has value in the client’s mind.

If you are willing to “bend” on that price – if you, say, do a job worth several thousand dollars for a few hundred – what happens is that you reduce your perceived value to the client. The client will know then that you weren’t serious about your standard rate, and they may try to take advantage of you and get more work for even less money.

Always be firm about how much you cost. When clients know that you value your work and don’t compromise your own worth by wavering on your prices, they will value your work as well. Just as you wouldn’t expect to get an oil change and new brakes for the price of a car wash, your potential clients must know that there is a limit to how much service you can provide on a budget.

If a client is worth working for, they’ll accept that your higher-priced services are out of their range, and will be willing to discuss other, non-monetary options as part of your compensation. What kind of options? Well, I’ll tell you.

If you’re dealing with a reasonable client, you’ll be able to negotiate for three main forms of non-monetary compensation. You can negotiate for just one, or all three, but using this technique will help you quickly weed out those clients who don’t value you or your work.

The three main elements that can be included in your compensation are:

1. Referrals

Not “exposure” – that’s a vague word which can mean almost anything. But actual, genuine referrals from your client personally to people who can and will hire you. A list of warm leads directly from a paying client is worth its weight in gold, and can sometimes be more valuable than a single paying job.

It’s not too much to ask, and if you’ve got a good client, they should be more than happy to provide at least a few. If not, run far away. That client is not worth the trouble because they aren’t going to get any more reasonable.

If someone can’t be bothered to come up with two or three referrals among their friends or colleagues, what makes you think they’re going to trust your design decisions or resist unnecessary scope creep?

2. Creative Freedom

You can and should use your lack of financial compensation as leverage to secure more creative freedom on a project than you would have otherwise.

This doesn’t mean go berserk with the composition or give them something completely inappropriate. But a client who’s receiving a discounted form of your services can absolutely be expected to hand you the reins and allow you the freedom to make the decisions you feel are best for the project.

3. A Guarantee of Future Paid Work

Whether it’s at your current rate or at a more standard one, your client can offer to provide you with more work in lieu of more money upfront.

Perhaps something more challenging that has a bigger budget, or something recurring that you can deliver on a regular basis. Be creative, and think of all the ways you can provide value to your client.

A good, satisfied client will be happy to give you first priority for future work, if you let them know that you would like it to be part of your compensation. Again, this is not too much to ask for, and any client who thinks it is is a bad client. Period. Runaway.

Never Slave Away for Peanuts

Always make sure to discuss these options with your clients to make sure you’re never just slaving away for peanuts. It goes without saying that, if you expect to receive these kinds of extras, you should do your very best work and provide as much value to your client as possible for the price they’re paying.

No client is going to refer a bad designer to their friends, nor should they be expected to. But if you’re awesome, and you do awesome work, there’s no reason why you shouldn’t expect to be fairly compensated, even if the client is on a budget.

I think that the most important thing a designer can learn is how to be discerning, and how exactly to go about negotiating extras.

There’s an art to it, which many designers, sadly, have not yet mastered. The key is to project confidence and subtly make your clients aware that you have other options without coming off as arrogant, rude, or condescending.

By gently but firmly negotiating extras in your compensation package, you’ll make even the most budget-conscious clients respect you and desire to work with someone of your performance level.

And the “cheap” clients who won’t budge? Leave ’em – they’re impossible conversions!

The post How to Work With Both Good & Bad Design Clients appeared first on Speckyboy Design Magazine.

Web design is an ever-evolving field. It seems like a new tool or technique arrives every day. And there’s a lot of pressure for professionals to keep up with the times.

Maybe it’s a bit scary. But there’s a certain excitement that comes with it as well. You learn something new and apply it to your daily work. Most of the time, you’re all the better for it.

For example, consider a new CSS layout that makes multiple columns a breeze. Or a JavaScript library that enables you to build a stunning UI. These are the things that help to push us forward.

Yet, there’s also something that holds us back. A twist of fate so cruel that it laughs in the face of the great new thing you just mastered. We’re talking about legacy software.

This ragtag collection of old browsers, operating systems, and server configurations can be more than just a painful reminder of the past. They can also get in the way of true progress.

But don’t let it ruin your good time. Today, we’ll look at some reasons why you may not need to hold back on implementing the web’s latest and greatest.

Look at the Potential Risks and Benefits

It’s never a good idea to throw a new technology onto a website without careful consideration. Otherwise, you run the risk of negatively impacting both users and your bottom line.

Before you dive headfirst into that cool feature, take some time for analysis. Creating an old-fashioned list of pros and cons can provide you with a macro view of the situation. From there, you’ll have a better idea of whether or not to move forward.

Let’s take CSS Grid as an example. It’s all the rage these days. But is it right for your project? To find the answer, start by writing a list:

Pros

• Makes complex layouts easier;
• Code may be leaner, better performing than other layout methods;
• Lots of modern browser support;

Cons

• No or spotty support in legacy browsers;
• The same layouts may be possible with better-supported methods;

That’s just a partial list, but you get the idea. The mere act of writing (or typing) out your thoughts can lead you to go further in-depth. The deeper you go, the more thorough your analysis will be. The ultimate goal is to make the most informed decision possible.

Usage Statistics Matter

We know there are people out there still using legacy software. And while web designers tend to think in terms of browsers, that doesn’t tell the entire story. Operating systems also play a role. They not only make a difference in what features are available, but they are also likely limited by older hardware configurations as well.

For instance, looking at desktop devices, the version of macOS or Windows a user is running may restrict what browsers are available. On the surface, this might make you think twice about using a newer image format such as WebP.

Mac users who don’t have the Big Sur version of the OS or later or are stuck with a version of Safari that lacks WebP support (Chrome and Firefox support WebP, however). And someone using the aged Windows XP won’t have access to Microsoft Edge.

But that doesn’t necessarily mean that the visitors to your website are among the legacy crowd. By looking at your website’s analytics, you’ll have a better idea of which browsers, operating systems, and devices are being used.

If you find that these users make up a tiny percentage of your overall visits, that may be convincing enough to move ahead with the new technology.

Fallbacks May Be an Option

OK, perhaps you want the best of both worlds. You not only want to adopt the latest web technologies but also keep on supporting legacy users. “Leave no user behind!” is your motto.

This is very much possible with the use of fallbacks. What’s a fallback? It’s a method of switching out code that a specific browser can’t understand with something that it can.

Sticking with our CSS Grid example, we know older browsers aren’t going to do very well with it. But they do understand something like Flexbox or even old-fashioned CSS floats.

Using a tool such as Modernizr, we can detect which features a browser supports. If it supports CSS Grid, wonderful. If not, we can serve up an alternative layout.

The great thing is, you get to decide how it all works. Maybe someone using IE 11 doesn’t need a full-on replica of a fancy layout – just a reasonable facsimile. Either way, this brings some level of comfort in knowing that you’re covering as many users as possible.

Keep Moving Forward

Legacy software is still among us. Fortunately, apps that fail to support modern web technologies are increasingly dying out. As their usage numbers shrink, so do the reasons for holding back CSS Grid, WebP, and other goodies.

Even so, it’s still worth doing your homework with regards to any new technology that interests you. Think about the pros and cons of implementation and use analytics to determine the impact on users.

Fallbacks are also an effective way to mitigate any negative effects for users of outdated software. They’ll still be able to use your site. Meanwhile, everyone else gets the latest features.

The web has come a long way over the past few years. It’s time to start taking advantage of that progress.

The post Don’t Let Legacy Software Stop You from Adopting the Latest Web Technologies appeared first on Speckyboy Design Magazine.

Google has a way of creating a wave of panic among both web designers and website owners. When they make a change to their search algorithm, people start scrambling to catch up. It’s easy to understand why. No one wants their SEO rankings to suffer.

So, when the Core Web Vitals metrics were announced, the response was pretty predictable. As these changes are based on site performance, our attention has turned to ensuring load times are lightning-fast.

But it’s not always simple. Websites that run a content management system (CMS) such as WordPress can be especially challenging. There are a lot of factors at play. Therefore, improving performance requires a multi-pronged approach.

Where to start? Check out our guide to boosting the Core Web Vitals score of your WordPress website.

Implement Caching

One of the simplest ways to increase the speed of a WordPress website is to implement caching. In many cases, a previously sluggish site will become significantly faster with this single step. This holds true even on relatively cheap hosting.

By default, WordPress pages and posts must retrieve content and settings from the site’s database. This takes time. Cache, on the other hand, will serve up content as static HTML files – cutting out the need for a database call. With the middleman (i.e., database) out of the way, snappier load times will follow.

Some hosting packages, particularly managed WordPress hosting, will include server-based cache. This is often the best option, as it requires very little from web designers and performs quite well. It may need to be cleared out every so often. Otherwise, it’s a hands-off experience. And it can be effectively combined with a plugin to further enhance speed.

Even if your host doesn’t provide caching on the server level, you can still optimize performance via a plugin. Caching plugins vary in scope, complexity and pricing. But they do provide tangible results when it comes to improving load times. That, in turn, is a positive boost for Core Web Vitals as well.

Defer Loading of Render Blocking Scripts and Styles

When testing your website’s performance in Google PageSpeed Insights, the subject of render-blocking resources seems to come up a lot. These are the scripts and styles that aren’t considered “critical” – meaning they’re not required to render the “above-the-fold” page content.

These resources can get in the way of faster load times. Specifically, they impact the “Largest Contentful Paint (LCP)” score in Core Web Vitals. This is the time it takes for the main content area of a page to load. Reducing LCP is, well, vital.

One way to improve the situation is to delay (or defer) when various content elements (images, videos, block-level text) load. This ensures that only the needed scripts and styles load first, while everything else comes in afterward.

Along with minification, many WordPress caching/optimization plugins also happen to include this type of functionality. It can take a bit of experimentation, however, as deferring the wrong resource can be problematic.

Be sure to test out any changes you’ve made and check the browser console for errors. Once you find the right configuration, the number of render-blocking resources on your page should be significantly reduced.

Optimize Images

The widespread use of large hero images and complex sliders only adds to the challenge of performance optimization. These assets may look nice, but can easily add up to megabytes worth of data. That’s not going to get you a passing grade for Core Web Vitals – particularly on mobile.

Thankfully, there are a couple of ways to lighten the load. First and foremost, get rid of any images you deem unnecessary. The removal of even one large image can make a difference.

The rest of your images can be optimized. This will reduce their file size and lessen the impact they have on load time.

How you go about image optimization is up to you. You could download a copy of your worst offenders and compress them using your favorite image editor, then upload them back onto your website. Or, you can automate the process with a helpful WordPress media plugin.

Responsive Images

For mobile users, WordPress includes the ability to serve up responsive images via srcset. In fact, it will automatically do the dirty work for you on images placed within your content. This is incredibly valuable, as it prevents massive desktop-sized media from slowing down the mobile user experience. For images outside of the main content area, you may need to do some custom work to implement this feature.

Modern Image Formats

It’s also worth looking at the file formats you’re using. For example, Google’s WebP format can often reduce file size while maintaining image quality. Note that some newfangled formats aren’t supported in legacy browsers (ahem, IE), so fallback versions may be necessary. Plugins can help with that as well.

Lazy Load All the Things

Lazy load functionality only loads items once they are in the browser’s viewport. By delaying the loading of images, iframes, and other third-party content (such as social media widgets), you can focus resources on the elements users will see first.

WordPress already implements native, browser-based lazy loading to images. When you add an image to a page or post, the loading="lazy" attribute is placed within the <img> tag. That is, provided the image includes height and width attributes.

This is great – but what about other elements, such as videos or iframes? These items can also weigh down a page when loaded right from the get-go.

Iframes are now lazy-loaded by default – so no worries there. Some more complex elements may require custom code or a plugin to implement this functionality.

Clear Out the Clutter

Over time, even a well-maintained WordPress site can become cluttered. A clogged database, unused plugins that are still active, a bloated theme with features you’re not using – it happens. And it can also drag down your Core Web Vitals.

That’s why it’s important to tidy up now and again. Your site’s database can be optimized manually or set to do so regularly. Unused plugins can be deactivated and trashed. Themes can be made leaner or replaced with something better.

Study up on what’s slowing down your website, find the culprits and deal with them. You might be surprised at how much of a difference this can make.

Improve Your Website’s Core Web Vitals

Core Web Vitals complicates the already tricky process of optimizing WordPress website performance. Even a website that scores well in other performance metrics may still fall short in this area. This shines through in mobile testing most of all.

The good news is that there are plenty of little things designers can do to catch up. Implementing cache sets a great foundation and provides an immediate boost. From there, it’s a matter of reducing file sizes and loading up styles and scripts in order of importance.

Taking things even further, it also makes sense to adjust your site’s CSS with Core Web Vitals in mind. This can help with the dreaded Cumulative Layout Shift (CLS) score and cut down on bloat.

In general, the things that are good for performance are also good for Core Web Vitals. Scores can improve rather quickly. Just know that it’s going to take some trial-and-error to sort out some of those individual shortcomings.

The overarching goal is to ensure that only the essentials are loaded when a user visits your website. Doing so will make both visitors and Google quite happy.

The post Tips for Improving the Core Web Vitals of Your WordPress Website appeared first on Speckyboy Design Magazine.