Posted on

Ask the Bartender: What Happens to the Customizer When a Block Theme Is Active?

Something on my radar right now is third-party plugins that have settings in the Customizer. What I gather of friends who are the devs working on Customizer and front-end stuff within a few plugin companies, global styles and block styles are not yet on their radar. So what happens if someone installs Twenty Twenty-Two or another block-based theme? The left admin menu for Customizer isn’t there. The janky way to get there is via Appearance > Themes > Customizer. But the expectation is that third-party plugins and themes need to move settings over. In fact, this seems more like they need to duplicate settings in both places for a while.

Anonymous

For those out of the loop, let me provide a quick refresher on this topic. When WordPress 5.9 lands, we expect it to ship with the new site editor and global styles interface. However, most users will not see this screen unless they are running a block theme.

Given that the upcoming Twenty Twenty-Two is also shipping with WordPress 5.9 and judging the popularity of past default themes, we can expect many thousands of users will be transported into this whole new world. For some, this might be as shocking as the launch of the block editor in 5.0.

When a block theme is active, links to access the old and familiar customizer will disappear from the user interface. The widgets and nav menu screens won’t be around either. However, they will still be accessible if you know the URL for the screens.

We first learned this would be the case last year as part of the Gutenberg 9.3 release. There is also an open issue to ensure that the site editor has feature parity with some core WordPress settings.

It is OK that these features are being phased out for block theme users. They were all early, disparate attempts at creating individual pieces of what the site editor will allow. WordPress is bringing all of these concepts together into a more cohesive user experience. It is a standard that contributors can continually iterate on. It will not be perfect out of the gate, but this first version in the core platform should fuel the feedback needed to improve it as more users start installing block themes.

The problem presented here has more to do with the plugin market. The customizer was initially built as a theme-settings tool and has primarily been used for that purpose. But, many plugins have tied various settings to it over its nine-year history. A search for wp_customize in the plugin directory pulls up over 1,400 results. The customize_register hook shows over 1,900. These are not necessarily exact matches for how many plugins actually add panels, sections, settings, or controls. However, it is an indicator that many are relying on it to present options to end-users.

So, we are back to the question at hand. What happens when a user installs a block theme, such as the upcoming Twenty Twenty-Two, while using a plugin that relies on the customizer?

It depends.

Some plugins like WooCommerce have already conveniently placed a direct link to their customizer panel/section in the admin menu. This will be a non-issue for their users. However, for everyone else, the customizer will seem to disappear entirely.

WordPress customizer screen focused on the WooCommerce plugin panel, showing the shop page.
WooCommerce customizer options accessible with block theme.

In a matter of weeks after 5.9, depending on how quick the adoption of Twenty Twenty-Two occurs in particular, we could be looking at thousands of confused users. Of course, all of this could change in the time leading up to the release. However, this is a conversation that needs to happen now.

“The concern here is for end-users,” said the anonymous questioner. “They will be looking at knowledgebase articles, directions in plugin settings, and more indicating where to look for the settings.”

At least at the moment, the onus is on plugin authors to address this for their own users. However, there are multiple pathways they may want to go down.

The most straightforward method is to follow the lead of WooCommerce. The plugin checks the gutenberg_is_fse_theme() conditional (note that this function name may change). If it returns true, the plugin adds a link directly to its customizer panel.

Linking to a customizer panel, section, or control is simple. Plugin authors can find the URLs in the developer handbook. They can also just copy the technique the WooCommerce team employed.

This is a quick method to ensure users do not lose access to their options if plugin authors cannot make changes before WordPress 5.9 lands.

In the long term, it is not the ideal solution. The customizer will be around for a long while, but plugin authors will need to deal with two sets of users: those running both block and classic themes.

Because each plugin is different, solutions will need to be different. Many can simply use the Settings API to build a custom options screen. If that is a workable solution, it will not matter what theme the user is running.

However, the reality might be maintaining two systems for both sets of users. One that integrates with the customizer and another that pulls options into the site editor. If the plugin has design-related features, block theme users will expect to see settings in the new interface.

On the theming side of things, there should be fewer problems. A block theme does nothing with the customizer anyway. One outstanding issue would be converting starter content over, and there is an open ticket to bring that to Full Site Editing.

More than anything, keeping open lines of communication with users will help ease the transition. Some of that should come from core WordPress. However, many users will need to hear it from their plugin and theme developers. This might be blog posts, knowledgebase or tutorial updates, and keeping up with support.

Then, there is the final solution, one that WordPress itself could implement. It is also the path of least resistance.

WordPress should automatically detect filters or actions on customizer-related hooks. This should trigger a “customize supports” flag and maintain the admin menu and toolbar links to the customizer screen. This would give developers some time to catch up without confusing users in the process. There might be a few false flags or missed integrations, but it should be able to effectively catch the majority of use cases.

Posted on

Live From INTERACT: Microsoft’s Developer Velocity Research

This week we have another episode from the 2021 engineering leadership conference INTERACT. In this live conversation I interview Henrik Gütle, GM of Azure for Microsoft Canada.

Henrik joins the podcast to break down the results and key takeaways of Microsoft’s research into the impact of remote work on developer velocity - and what engineering leaders can learn from it.

Posted on

Fantastic ML Pipelines and Tips for Building Them

A machine learning (ML) pipeline is an automated workflow that operates by enabling the transformation of data, funneling them through a model, and evaluating the outcome. In order to cater to these requirements, an ML pipeline consists of several steps such as training a model, model evaluation, visualization after post-processing, etc. Each step is crucial towards the success of the whole pipeline, not only for the short-term but also in the long run. In order to ensure the sustainability of a pipeline in the longer run, ML engineers and organizations need to account for several ML-specific risk factors in the system design. The authors from Google pinpoint risk factors such as boundary erosion, entanglement, hidden feedback loops, undeclared consumers, data dependencies, configuration issues, changes in the external world, and a variety of system-level anti-patterns [1]. In this article, we will be diving deep into the root causes of some of these risk factors.

Figure 1: Automated pipeline (source : 123.rf)

1. Boundary Erosion

If you are given an ML pipeline and if your data team approaches you with a change in the input feature such as increase/reduction in dimension, would you be able to ensure that it won't affect the entire pipeline? Mostly the answer would be no.

Posted on

WordPress 5.9 Go/No-Go Update: All Proposed Features Are Moving Forward

The go/no-go deadline for deciding on features for WordPress 5.9 was set for October 12 but the conversation was pushed back two days. Today, the core leadership for this release announced that everything in the previously-proposed scope for 5.9 will be moving forward.

Users can expect block themes, template and template part editing flows, the new default Twenty-Twenty Two block theme, the Styles interface, design tools, the Navigation Block, all manner of UI improvements, and pattern insertion directly from the Pattern Directory. Héctor Prieto, who is assisting with technical project management on the release, emphasized that many of these features are still in progress:

To note, not all of the above are currently ready, but there is some level of confidence that they can be by the time of 5.9.

A new WordPress 5.9 Must-Haves project board on GitHub shows a broad overview of the issues contributors are focusing on to get the release ready.

Prieto also published an exhaustive transcript of the meeting. There were no strong objections on specific features moving forward but there seemed to be a general acknowledgment that some features are still in a beta state. Those present at the meeting agreed that some kind of beta label might be advantageous where users could be directed to the Gutenberg plugin for faster updates to features that are still not fully polished.

One particularly challenging feature has been navigation. “I think from my perspective, the thing I was a bit worried about was the navigation menu flows, which I think we did a lot of progress over the last few weeks,” Gutenberg lead engineer Matías Ventura said. “And I think we need to set some good boundaries there.

“There has been a lot of work in also supporting sort of mega menus where you have in your sub-menus, you have images and paragraph any sort of block, which is cool. But there’s also like the 80% of cases where you just have a few links, and we need to ensure that that experience is as best as we can make it. I think we’re in a better place. And I think we’ll get there.”

Beta 1 is expected November 16, and the official release is scheduled for December 14. If you want to see an early demo of WordPress 5.9, check out the recording of the meeting below:

Posted on

Expandable Sections Within a CSS Grid

I love CSS Grid. I love how, with just a few lines of code, we can achieve fully responsive grid layouts, often without any media queries at all. I’m quite comfortable wrangling CSS Grid to produce interesting layouts, while keeping the HTML markup clean and simple.

But recently, I was presented with a unique UI conundrum to solve. Essentially, any given grid cell could have a button that would open up another, larger area that is also part of the grid. But this new larger grid cell needed to be:

  1. right below the cell that opened it, and
  2. full width.

Turns out there is a nice solution to it, and in the spirit of CSS Grid itself, it only involves a couple of lines of code. In this article, I’ll combine three one-line CSS Grid “tricks” to solve this. No JavaScript needed at all.

An explanation of the actual problem I need to solve

Here’s a minimalist UI example of what I needed to do:

This is our actual product card grid, as rendered in our Storybook component library:

A grid of product cards in a three by two layout. Each card has a placeholder gray image, product name, descriptions, price, and small text.

Each product card needed a new “quick view” button added such that, when clicked, it would:

  • dynamically “inject” a new full-width card (containing more detailed product information) immediately below the product card that was clicked,
  • without disrupting the existing card grid (i.e. retain the DOM source order and the visual order of the rendered cards in the browser), and
  • still be fully responsive.

Hmmm… was this even possible with our current CSS Grid implementation?

Surely I would need to resort to JavaScript to re-calculate the card positions, and move them around, especially on browser resize? Right?

Google was not my friend. I couldn’t find anything to help me. Even a search of “quick view” implementations only resulted in examples that used modals or overlays to render the injected card. After all, a modal is usually the only choice in situations like this, as it focuses the user on the new content, without needing to disrupt the rest of the page.

I slept on the problem, and ultimately came to a workable solution by combining some of CSS Grid’s most powerful and useful features.

CSS Grid Trick #1

I was already employing the first trick for our default grid system, and the product card grid is a specific instance of that approach. Here’s some (simplified) code:

.grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, 20rem);
}

The “secret sauce” in this code is the grid-template-columns: repeat(auto-fit, 20rem); which gives us a grid with columns (20rem wide in this example) that are arranged automatically in the available space, wrapping to the next row when there’s not enough room.

Curious about auto-fit vs auto-fill? Sara Soueidan has written a wonderful explanation of how this works. Sara also explains how you can incorporate minmax() to enable the column widths to “flex” but, for the purposes of this article, I wanted to define fixed column widths for simplicity.

CSS Grid Trick #2

Next, I had to accommodate a new full-width card into the grid:

.fullwidth {
  grid-column: 1 / -1;
}

This code works because grid-template-columns in trick #1 creates an “explicit” grid, so it’s possible to define start and end columns for the .fullwidth card, where 1 / -1 means “start in column 1, and span every column up to the very last one.”

Great. A full-width card injected into the grid. But… now we have gaps above the full-width card.

Two rows of four rectangles. All of the rectangles are light gray and numbered, except one that has a wheat-colored background and another box beneath it containing text, and taking up the full container width.

CSS Grid Trick #3

Filling the gaps — I’ve done this before with a faux-masonry approach:

.grid {
  grid-auto-flow: dense;
}

That’s it! Required layout achieved.

The grid-auto-flow property controls how the CSS Grid auto-placement algorithm works. In this case, the dense packing algorithm tries to fills in holes earlier in the grid.

  • All our grid columns are the same width. Dense packing also works if the column widths are flexible, for example, by using minmax(20rem, 1f).
  • All our grid “cells” are the same height in each row. This is the default CSS Grid behavior. The grid container implicitly has align-items: stretch causing cells to occupy 100% of the available row height.

The result of all this is that the holes in our grid are filled — and the beautiful part is that the original source order is preserved in the rendered output. This is important from an accessibility perspective.

See MDN for a complete explanation of how CSS Grid auto-placement works.

The complete solution

These three combined tricks provide a simple layout solution that requires very little CSS. No media queries, and no JavaScript needed.

But… we do still need JavaScript?

Yes, we do. But not for any layout calculations. It is purely functional for managing the click events, focus state, injected card display, etc.

For demo purposes in the prototype, the full-width cards have been hard-coded in the HTML in their correct locations in the DOM, and the JavaScript simply toggles their display properties.

In a production environment, however, the injected card would probably be fetched with JavaScript and placed in the correct location. Grid layouts for something like products on an eCommerce site tend to have very heavy DOMs, and we want to avoid unnecessarily bloating the page weight further with lots of additional “hidden” content.

Quick views should be considered as a progressive enhancement, so if JavaScript fails to load, the user is simply taken to the appropriate product details page.

Accessibility considerations

I’m passionate about using correct semantic HTML markup, adding aria- properties when absolutely necessary, and ensuring the UI works with just a keyboard as well as in a screen reader.

So, here’s a rundown of the considerations that went into making this pattern as accessible as possible:

  • The product card grid uses a <ul><li> construct because we’re displaying a list of products. Assistive technologies (e.g. screen readers) will therefore understand that there’s a relationship between the cards, and users will be informed how many items are in the list.
  • The product cards themselves are <article> elements, with proper headings, etc.
  • The HTML source order is preserved for the cards when the .fullwidth card is injected, providing a good natural tab order into the injected content, and out again to the next card.
  • The whole card grid is wrapped in an aria-live region so that DOM changes are announced to screen readers.
  • Focus management ensures that the injected card receives keyboard focus, and on closing the card, keyboard focus is returned to the button that originally triggered the card’s visibility.

Although it isn’t demonstrated in the prototype, these additional enhancements could be added to any production implementation:

  • Ensure the injected card, when focused, has an appropriate label. This could be as simple as having a heading as the first element inside the content.
  • Bind the ESC key to close the injected card.
  • Scroll the browser window so that the injected card is fully visible inside the viewport.

Wrapping up

So, what do you think?

This could be a nice alternative to modals for when we want to reveal additional content, but without hijacking the entire viewport in the process. This might be interesting in other situations as well — think photo captions in an image grid, helper text, etc. It might even be an alternative to some cases where we’d normally reach for <details>/<summary> (as we know those are only best used in certain contexts).

Anyway, I’m interested in how you might use this, or even how you might approach it differently. Let me know in the comments!

The post Expandable Sections Within a CSS Grid appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

Posted on

Tips And Tricks For Evaluating UX/UI Designers

When a company’s digital representation lacks a dedicated UX/UI design team, it can be hard to produce something that stands out from the crowd. The best designers and agencies have a touch of magic about them, transforming your company’s goals, customers’ demands, user specifications, and design instruments into a beneficial experience for both users and businesses. It may seem enchanting how well-designed apps or websites can boost your sales, but it takes far more than a handful of fairy dust to make users enjoy their interactions.

The reason we pay so much attention to design (as we do to any other detail in the process of project completion) is that it plays one of the crucial roles in your business success. To get decent ROI in the digital sphere, you need both a great product and a great design. The two are interdependent. If your design is flawless but your service lacks essential features, don’t expect design to cover for them. And vice versa.

Yet, providing your customers with a well-designed digital solution gives them a chance to appreciate your product to its fullest. That happens when your app/website/system is efficient. And memorable. And easy to understand. And reliable. And carefully arranged. And elaborate. And forms an immediate emotional connection with the users. And urges them to come back again. That’s why you need a good UI/UX designer. Or, better yet, a team.

This article is about the essentials of evaluating potential designers and design agencies you wish to hire. Getting this right is more important than ever, for a couple of reasons:

  1. The global pandemic situation has reshaped the way business is conducted, especially online.
  2. Even once COVID-driven economic conditions cease to exist in the (hopefully) near future, outsourcing will remain a better option for many companies, both in terms of financial resources and worldwide talent engagement.

Every selection process starts with understanding how important it is to have an expert who “gets” your end-users, who can collect all the needs, don’ts, wants, shoulds, and must-haves to ensure you communicate with customers fluently. Then, you start wondering HOW to find out if you have chosen the right person for the job.

NB: Following your gut may be helpful in making some business decisions, BUT this is not the case here.

The ultimate goal is to ensure your app/website can provide its users with the most value possible as seamlessly as possible. So, you expect your designer/design agency to be equally as efficient, cutting, and customer-centered in terms of design and UX.

When it comes to the decision-making process, many businesses make the same mistake over and over again. They apply the same methods used to hire entirely different roles, or allow themselves to trust their instincts.

This article exists to prevent those things from happening. Intuition is not the best adviser when selecting or outsourcing a UX/UI designer. The key to successful hiring requires a different strategy: a list of strict requirements and versatile aspects to assess. The latter would help you pass a more objective and qualified verdict on the candidate’s ability to help your company thrive.

Know What YOU Want Before Evaluating A Designer

I don’t want to give you a set of “designer evaluation criteria” straight away, and the reason is this: it’s not the best place to start. Stage one is about identifying what your company needs from a certain digital product. Before selecting a UX/UI designer/design agency, you have to sit down and list all the requirements and deliverables. This will help you understand what qualities you are actually looking for in your future employee.

Where deliverables are concerned, include the ones you may have in both the research and the production phase of your collaboration. The former may require user experience research, user behavior analysis, brand positioning, and market niche analysis. The latter will include prototyping, usability, and interaction design testing, as well as building wireframes and exploring user journeys.

Using such tools is financially effective, helping to reduce your costs of service by 15-20%. Mapping out user journeys in detail helps to track both minor and global issues inherent in your company, as well as analyze your target audience preferences, attitudes, dislikes, and fads. This creates a whole new pool of production and marketing opportunities for your business.

At present, customer satisfaction is certainly a priority. In 2021, it’s not just advisable, but compulsory to invest in customer experience as with high-quality software development available literally anywhere and at different costs, successful interaction with your customer is the real game-changer.

To be more precise in terms of software requirements, try to define:

  • the type of the software itself and the environments where it will be applied;
  • tasks, features, and functions your software should be able to perform;
  • similar apps/websites/platforms that might prompt what you like and what you would or wouldn’t expect to get.

In addition, keep in mind usability and affordability reconciliation as well as checking if you meet both standards. Finally, highlight the project’s scope, define timelines, and prepare all the legal papers to be fully armed before you move on.

Once the actual cooperation begins, you and your designer/design agency will have to adjust, revise, and re-define these deliverables and requirements in a more precise manner. So, why bother now? If this seems either too strenuous or irrelevant at this point, remember this: the more specifications you provide to your potential designing partner, the easier the selection process will appear. And the fewer obstacles you will encounter when you work together.

Skill Sets For Evaluation

The next step is finalizing a list of hard and soft skills you wish your designer to have. This step, if carefully planned, is essential to the success of your project. The main obstacle at this stage is the variety of skills and their importance in the course of project implementation. Thus, we have made a downloadable cheatsheet for you to use in the course of the transparent assessment of:

How or where can you use them efficiently? Through analyzing the designers’ previous projects, asking questions at the interviews, or analyzing test tasks and preliminary proposals. The key focus should be on the level of the necessary skills a potential candidate has. By rating them you can make a data-driven decision and base it on the factual representation of the desired qualities.

UX Processes

To start with, here’s a set of the universal UX processes crucial to the successful completion of any design-based project whether or not it is carried out by a remote-work team.

To make your evaluation more accurate, here’s a brief explanation of the processes themselves, reasons why they are necessary, and tips on how to check them. You can use this table to mark the level of their excellence in your potential candidate/agency.

Process What to evaluate Why is it important How to assess
User research Understanding the needs, emotions, perception, and experience of the end-users. Examine target audiences in detail (their age, background, qualifications, interests, possible disability issues etc.) Minimizes the risk of designing the wrong product for the wrong people. Ask what research methods they use and how they affect the final outcome.
Information architecture Presenting information efficiently for users, anticipating their future actions to make navigation through apps and websites easy. This makes users’ interactions with your digital product easy and enjoyable. Check the designer’s previous works to see how the parts fit together. Examine how relevant or compatible they are.
Visual design Using visual elements (fonts, color, background, size, etc) through contrast, proximity, or repetition to convey the functionality of a particular page. Allows you to accentuate and prioritize tasks and messages. Opt for designers you admire, respect, trust, and feel they take into consideration your thoughts on the visual design as well as guide you since it is not a rare occasion that what you want as a client does not always work best for the end-customer.
Prototyping Creating a concept to make adjustments and receive feedback from experts involved. Testing the elements of a digital product before it is finalized is essential, giving you examples of how the app/website will work and look. Ask the designers if their clients have access to a clickable prototype.
Usability evaluation Testing the product to make sure the maximum level of understanding has been reached. Allows you to identify any failures or shortcomings and improve them. Ask designers for examples of how they test their products to check they fit the end-users.
Interaction design Designing how the end-product may feel, look, and interact with the customer. Creates a feedback loop for how beneficial or wanted different features may be to the end-user. Examine previous works and see if the design makes sense and behaves in the expected way.

Bear in mind that although it seems rather optional for the UX/UI designer to master development skills, they appear to be quite handy when it comes to a holistic approach. It is advisable for your designer team to have at least basic knowledge of HTML/CSS and understand how front-end/code/styles work, as well as to be able to use the console and make any adjustments if necessary. All this helps ensure the designing process runs smoothly without rough interruptions, missing significant points, or misunderstanding between the development and the design teams.

These skills may seem purely technical. In fact, they are first and foremost focused on creating a user-oriented digital solution driven by understanding. In terms of its value for your company, according to recent statistics, the top 10 most empathetic companies managed to increase their value more than twice. Surprisingly, in the goal-oriented and pragmatic world of the 21st century, empathy appears to be in high demand. No wonder involving emotional impact into your business activities contributes to enhanced employee relations, higher productivity, and, finally, more revenue. Creating an emphatic environment in which company culture and values, leadership, ethical issues, and brand representation in the public eye matter means investing in your future as a viable and prospective manager.

To sum up, first, you study the processes mentioned above and examine how they are represented in the designer’s works and vision. Next, you check if their qualities correspond to the project requirements you have previously defined. If so, you will reach the highest degree of understanding. What we see as the background for successful cooperation with your designer/agency is clearly defined by one of our clients in the following feedback.

Project Skills

The second list examines project management. They turn out to be even more influential when you think of outsourcing services. That is because the efficient functioning of a remote team demands a higher degree of understanding of the following issues.

Skill What to evaluate Why it is important How to assess
Problem setting and strategic thinking If the designer/design agency can identify and prioritize problems. You can’t fix problems that haven’t been spotted. An eye for them allows you to be proactive in finding solutions. Ask if certain “must-do” issues are valid or not. The experiences they have will show how versatile their vision is.
Systematic approach Whether the candidate understands how products should both meet a need and fit into the user’s life. All the pieces need to fit together for a product to excel. Having a front-to-back outlook helps make that possible. Evaluate their attention to details as well as the bigger picture. Do they connect smoothly?
Innovation, idea generation, and creativity What the designer/design agency considers creative or innovative in their previous works and how they see your project implementation. Processes are important, but so too is lateral thinking. You need to know they can think outside the box while still incorporating your vision. Designers should explain their ideas and solutions in a “why-what for-so what” mode to help you understand the validity of our design decisions.
Proactivity How the designer (or a team leader) initiates ideas, motivates workers, coordinates the remote team, and interacts with your in-house employees. A healthy working culture leads to better work (and happier people). You want those who collaborate, motivate, and inspire. Keep a close eye on whether your approaches towards work management are compatible enough. Otherwise you may get an opponent rather than a partner.
Experience If the designer/design agency has enough experience both in UX/UI design and the area of your interest. As in any line of work, you want people who know what they’re doing, who you trust to bring something to the table you can’t. The indicators for this skill are not the number of years or projects completed but the actual digital solutions produced. Think quality, not quantity. A talented, inexperienced team can still offer great solutions.

Good UX/UI designers look for a special approach towards every client and audience, as well as the solution to the task. They never explore just one path but study a number of options that may make your users’ lives easier.

In order to make your judgment as objective as possible, do not forget that you may engage your team for versatile opinions. Also, try assessing the skill sets during interviews by inquiring, discussing, and comparing your visions of the issues.

Personal Qualities

To make outsourcing cooperation both efficient and effective, never underestimate personal qualities. If anything, they could be the decision triggers in the final stage of your evaluation. The following points will help you understand if you wish to work with a certain remote designer/team and if they can bring value to your company.

How or where can you evaluate these criteria efficiently? Through online interviews, team presentations, back-and-forth messaging, and work sessions.

For those who doubt the value of personal qualities, here are some numbers. Forbes points out that companies excelling at user experience have 1.5 times more engaged employees than those who are less customer-focused. Certainly, it is difficult to analyze such requirements as these are not easily translated into revenue numbers. Yet, to stand out from hundreds of competitors, you need to get out of the so-called “commodity trap” with dozens of similar (if not the same) products and services available here and now. Here, customer experience seems to be the only option to the rescue.

So, what customer-oriented skills need to be assessed are as follows.

Skill What to evaluate Why it is important How to assess
Communication The ability to present and explain ideas clearly and concisely, listening to and following conversations. In short, to work in an agile environment. These qualities indicate whether your team will be easy to reach, understand, and exchange feedback with. It is important to adjust to ever-changing requirements, and in a timely manner. If the designer/team can articulate their ideas to you, they can “talk” to your customers and translate your needs into a digital solution.
Collaboration and empathy How they cooperate with other team members; how they deal with conflicts and resolve disagreements; how flexible and open to feedback they are. If they have these traits, they will be able work with all the people involved in the work process, promote their decisions, support users, and make the product correspond to their needs. Empathy is the core ingredient in creating a successful UX design. Remember it is the end-user who will interact and enjoy (or not) the outcome of their work. Will candidates meet those needs?
Cultural contribution They understand, respect, and represent your company’s values. They are passionate about working with you. A good team is capable of inspiring people they work with. If their vision of values is too different from yours, the product will be far from what you expect. As a sign of respect towards a new client, we show our interest by studying the company and its brand values in advance.

Now you are fully equipped with the refined lists of skills and qualities you should pay attention to in your evaluation. Once you study or even edit them to suit your needs and ideas, you are ready for the next stage.

Navigating Interviews

Once you have the game plan for precise evaluation, your next step is the actual face-to-face (or, rather, camera-to-camera) discussion. In order to filter the talent pool efficiently, start the interview prepared. Remote hiring goes far beyond random inquiries about the candidate’s qualities and experience. It requires a structured list of questions, issues, and topics to discuss.

Beware also of possible technical failures like poor internet connection or not preparing relevant data in advance. Assign times and meeting links to all candidates. Be there on time. Such details will help keep the whole process smooth.

What concerns the list of questions you may ask, always think of their content as well as:

  • The number of questions.
    Have enough to allow for substantive discussions while still keeping to the interview window.
  • Giving the proper chance for the candidates to talk themselves.
    This way they wouldn’t feel like they are being interrogated.

The latter is crucial. In our company, we like to provide candidates with the opportunity to give as much input as possible. Examine your potential designer’s speech to see how good they are at explaining their tasks or technical specifications. Our experience shows that the better designers present their vision orally, the more usability they will bring to the product.

Here are several more points that are much more tricky in their essence.

  • Many articles on this topic tell you to ask about the tools and workflow of the designer/agency. However, do not expect to get a clear checklist to validate the right candidate. On the contrary, you should just make sure the tools match the ones your team prefers. While the workflow is examined to see if your approaches are compatible.
  • Ask the designer/team to present a project or product they really enjoyed. This will show how passionate they are about the design in general and working on your project in particular. Your potential employee would be thrilled to give very specific details. Even better, if they explain how this experience might relate to your cooperation.
  • Never underestimate the designer’s questions about your company/project in return. If they are truly interested, they want to know detailed and relevant(!) information on the target audience, main KPIs, business models, testing methods you apply, and much more.
Mistakes To Avoid

Our experience of providing outsourcing services before, during, and hopefully after the COVID-19 era has provided us with a number of insights. Here are some ideas on what to steer clear of in your evaluation.

  • If your budget is big enough, opt for an agency.
    When compared to freelancers, the former will definitely offer more expertise. Once you vote for an all-in-one option, this person should be either in charge of every stage and process or you may get a limited amount of functions performed.
  • Questions you ask are valuable.
    Sensible re-defining or re-stating may be the key to getting the clarity we need. Sometimes, even the source of new discoveries.
  • Look for initiative as well humility.
    The latter is usually presented as one of the most valuable qualities of a UX/UI designer. However, its significance could be exaggerated. In some cases, it is vital for the designer/team to take the initiative in introducing ideas or justifying important decisions.
  • Prioritizing skills is a dead-end approach.
    You need to evaluate all the necessary skills. Yet, a comprehensive vision is the key to success. Rather than focus on many specific traits, evaluate their combination and compatibility as a whole set.
  • Overestimating portfolios is risky.
    The number of projects does not correspond to the level of expertise. At LinkUp Studio, we offer our clients an overview of the cases related to their project and urge them to look at qualitative achievements. The problems we have solved, the insights and solutions we have offered, and how the latter altered one’s business. Such presentations help future work partners see our holistic approach and the value we bring to their ideas.
  • Do not confuse the initial proposal with the in-depth research which comes after you sign up with the agency.
    Some clients wish to get a preliminary analysis of their project. And that makes sense. A commercial offer presents rough project scope and cost estimation. That is justified for both parties in the process of negotiations. However, further analysis (a.k.a. discovery stage) involves a range of experts like business analysts, designers, developers. So, it should not be expected free of charge as a part of your ballpark estimate.

We hope our experience and useful tips uncovered will fully equip you for a conscious designer evaluation. All in all, the keys to making a successful hire are strict criteria to follow a holistic approach towards the assessment process which includes the following stages:

  1. Identify your company’s precise requirements and deliverables.
  2. Make the lists of hard and soft skills your designers should possess as well as rate their importance for a particular project in mind.
  3. Prepare for and conduct interviews to make the right choice.
  4. Enjoy your cooperation.

Choosing the proper UI/UX designer is the key to providing your customers with an excellent user experience through incorporating your company’s aims and your client's needs into the design process. The latter being efficient, understandable, reliable, emotionally appealing, and properly devised is the very task of a UI/UX designer you are about to start evaluating.

To help you make this process pain- and stress-free, we have developed a cheat sheet to come in handy during the selection and assessment process. You can download it here.

Posted on

7 Best WordPress Image Compression Plugins Compared (2021)

Are you looking for the best WordPress image compression plugin for your website?

Image compression plugins allow you to easily optimize images in WordPress for better speed and performance automatically.

In this article, we have compared the best image compression plugins for WordPress.

7 best WordPress image compression plugins compared

When Do You Need a WordPress Image Compression Plugin?

Images are larger in size than plain text which means they take longer to load and can slow down your website.

However you’ve probably heard the saying: “a picture is worth a thousand words”. Images make your content more engaging and interactive.

To improve your WordPress website speed, you need to optimize your images for the web.

Since optimizing your images can make your site load faster, it will improve your WordPress SEO, and help you get more traffic.

The best way to do this is by using Photoshop or another image editing software before you upload the image to WordPress. This gives you a lot more control on the quality of images on your website.

However, not all users are comfortable working with an image editing program. For some people, optimizing every single image they upload sounds like a lot of work.

Luckily, there are several WordPress image compression plugins that can help you with that. These plugins optimize your images by automatically compressing them and using the smaller sized version on your website.

That being said, let’s take a look at the best WordPress image compression plugins, and how they stack up in terms of image optimization, performance, and quality.

1. EWWW Image Optimizer

EWWW Image Optimizer

EWWW Image Optimizer is the best WordPress image compression plugin. It is easy to use and can automatically optimize images you upload on the fly.

It can also compress and optimize your previously uploaded images in bulk.

Even though your images are being compressed, it’ll be very hard to tell the difference between compressed and uncompressed in terms of quality.

Plus, the entire process of compressing and optimizing is automated. This includes image scaling to fit the right size page and device, lazy loading, and even conversion into the next-gen WebP image format.

It can also optimize images generated by other WordPress plugins and stored outside your media library folders. This plugin support JPG, PNG, GIF, and even PDF optimization.

There is also a free version of the plugin available, which lets you perform image optimizations on your own server. This can be great for WordPress website owners concerned about privacy.

However, sites with a lot of images or sites that get a lot of traffic will want to opt for the paid plan, since it includes an image optimizing CDN, which will automatically compress and convert images as they are viewed.

Best of all, EWWW Image Optimizer is very affordable. Plans start at $7 per month and support unlimited images. If you have more than one site, then you’ll need a higher priced plan.

Included in your plan is a caching engine, CSS/JS optimization, and Google Font optimization to help your site load even faster.

2. Optimole

Optimole

Optimole is another excellent option for a WordPress image compression plugin.

Using this plugin requires a quick account creation and API key setup. After that, it’s straightforward to use and gives you complete control over your image optimization.

Optimole is powered by an image CDN, so your images will load quickly no matter where your visitors are coming from. With a CDN, your images are optimized in real-time and delivered to your website visitors in the perfect size.

You can view all of your optimized images in a single dashboard, making it easy to customize compression settings for individual images.

It lets you adjust things like the compression quality, large image resizing, lazy loading, and more.

There’s even a unique setting that will automatically watermark your images for you. This is great for photographers who are trying to protect their work.

Pricing is based on the number of visitors you have per month. The free plugin allows for up to 5,000 visitors per month. While the paid plans start at $19.08 per month when billed yearly and support up to 25,000 visitors per month.

3. ShortPixel Image Optimizer

ShortPixel

ShortPixel Image Optimizer is another great WordPress image compression plugin.

It’s packed with advanced features and gives you the ability to choose compression formats. It starts compressing images as soon you as activate plugin and stores your original images in a separate folder.

If you’re using the free plugin, then it requires you to get an API key by providing your email address.

The basic free account allows you to compress up to 100 images per month, and you will need to upgrade to their paid plans to increase this limit.

You can even simply convert PNG to JPEG and vice versa with the click of a button.

It’s also compatible with WooCommerce, NextGEN Gallery, and the WPML translation plugins.

If you’re using Cloudflare as your WordPress CDN, then you can integrate the service, so your images will be automatically updated with the new version.

ShortPixel is also very affordable. Plans are based on the number of images and start at $4.99 per month for up to 5,000 images per month.

4. reSmush.it

ReSmush.it

reSmush.it is another great choice for a WordPress image compression plugin. It allows you to automatically optimize images on upload as well as offer a bulk optimization option for older images.

You have full control over the image quality and compression with an easy to use slider.

It uses the reSmush API to optimize images and allows you to choose the optimization level for your uploads.

The downside is that it doesn’t have different compression levels. It also limits optimization to uploads lower than 5MB in size. You can exclude individual images from compression in case you need to add an image in full size.

5. Compress JPEG & PNG images

Compress JPEG & PNG images

Compress JPEG & PNG is created by the team behind TinyPNG, and you will need to create an account to use the plugin. You can only optimize 500 images each month with the free account.

It can automatically compress images upon upload, and you can also bulk optimize older images.

The plugin settings allow you to choose which image sizes you want to optimize. You can also set a maximum size for your original uploads. Images larger than that size will be automatically resized by the plugin.

You can also choose to save image data like time and date, copyright information, and GPS location on JPEG files.

6. WP Rocket

WP Rocket

WP Rocket is the best WordPress caching plugin in the market. It’s very beginner friendly and will help to make your site blazing fast.

There are image optimization features within WP Rocket, like lazy loading, which will only load images when they are viewed.

They also developed a plugin called Imagify. This plugin lets you optimize all of your images with a single click. It will also resize your images on the fly and lets you restore your images to their original size.

You also have full control over your image optimization and compression settings. All of your images will be optimized to your preferences.

7. Jetpack

Jetpack

Jetpack is a powerful WordPress plugin suite that combines essential WordPress features into a single plugin. The primary focus is security, performance, and marketing.

The image optimization features fall under the performance category. To enable image compression, all you have to do is turn on a single setting. There are no additional settings for you to set up.

What it does is automatically optimize your image and serve images to your visitors using a CDN. This reduces your server load and provides faster image loading for your visitors.

To access the image optimization, you can use the free version of the plugin as well.

If you like the idea of Jetpack, but are looking for plugins to replace all of Jetpack’s features, then see our guide on the best alternatives to the WordPress Jetpack plugin.

Comparison Test Scores for Image Compression Plugins

Now that you know about the different WordPress image compression options, let’s take a look at how they compare against each other in terms of performance.

To measure this, we ran test by uploading the same image using each of these plugins.

Testing JPEG Image Compression

We used the following JPEG image for our tests, it is 118.3 KB in file size.

JPEG test image

We didn’t touch any of the plugin settings and tested the compression with out of the box settings. Here are our test results:

PluginCompressed SizeSaved (%)Method
EWWW Image Optimizer64 KB54.24%Lossless
Optimole64 KB54.24%Lossless
ShortPixel Image Optimizer72 KB39.30%Lossless
reSmush.it78 KB20.81%Lossless
Compress JPEG & PNG images118.1 KB2 %Lossy

Testing PNG Image Compression

Next we wanted to test a PNG image to see how our contenders optimize it.

We used the following PNG image for the test, and it is 99.4 KB in file size.

PNG test image

Here are our test results:

PluginCompressed SizeSaved (%)Method
EWWW Image Optimizer97 KB1.9%Lossless
Optimole41 KB64%Lossless
ShortPixel Image Optimizer36 KB56%Lossy
reSmush.it36 KB56%Lossless
Compress JPEG & PNG images34.3 KB54%Lossy

Which is The Best Image Compression Plugin for WordPress?

If you are looking for the best image compression plugin, then EWWW Image Optimizer is the best choice.

It offers high levels of compression that don’t sacrifice image quality, plus it’s equipped with an image CDN and other features that will optimize your website for speed.

Another great option for sites that get less traffic is Optimole. It operates entirely in the background and takes care of image optimization for you, plus it’s free up to 5,000 visitors per month.

If you’re looking for an affordable plugin that offers high levels of compression and image conversion, then ShortPixel is worth checking out.

We hope you found this comparison of best WordPress image compression plugins useful. You may also want to see our beginner’s guide to image SEO to optimize images for search engines, and our expert picks of the best email marketing services for businesses.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post 7 Best WordPress Image Compression Plugins Compared (2021) appeared first on WPBeginner.

Posted on

The world’s least popular programming language

A software engineer looking to learn something new will typically first check how many available jobs there are related to the subject at hand, simply to make sure he or she is valuable for future employers - And we all know that the most popular programming languages includes JavaScript, Java, C#, Python and TypeScript. However, what is the least popular programming language, still in actual use, and why should you even care?

Ignoring the funny prototype OOP parts of JavaScript, all of the above programming languages are more or less copies of each other, without much difference semantically. Sure, there are a few noteworthy exceptions, such as SQL and F#, but almost all programming languages at the top of the popularity index are more or less rip offs, copying and pasting features from each other. This creates a problem for you individually, and also for the world at large, which I refer to as local evolutionary optimums. The problem is best explained as follows ...

Posted on

Of Low-Code, Digital Trust, and Staying Ahead of the Risk Curve

It's easy to throw shade on risk like it’s a bad thing. But all innovation involves risk. Which isn’t necessarily bad. Not if the consequences of being wrong about it don’t pose an existential threat. But businesses everywhere are struggling to cope with doomsday scenarios such as climate change, cyber smash-and-grabs, the global COVID-19 crisis, and more.

Looking ahead, risk trends will continue to evolve as digital transformation accelerates, as the remote work trend mainstreams, and as enterprise spending on the internet of things tops $1 trillion by 2023. For context, overall IT spending is expected to surpass the $4 trillion mark in 2021, up 8.6% from 2020 according to analyst firm Gartner. But here’s the kicker: just 22% of CEOs believe they have a risk-management playbook to sustain the resiliency and long-term success of their business.

Posted on

Building Our E-Commerce Platform With Serverless FaaS

With so many 'something-as-a-service' options at our disposal for infrastructure, in 2017 we opted for function-as-a-service (FaaS) to build our platform of e-commerce services. Our mission was, and remains, to build for e-commerce services what AWS built for web services, or what we call the commerce fabric of the internet.

Building with FaaS and only paying for function execution time rather than constantly running servers (i.e. serverless) allowed us to serve customers early on without incurring high infrastructure costs. These customers were large, household names and referrals from our founding team who had transformed digital at Staples. Part of this transformation involved moving from the monolithic e-commerce platform IBM Websphere to a service-oriented architecture with open-source and custom-built software.

Posted on

The Pros and Cons of Cloud Computing

Learning about the pros and cons of cloud computing will better your company’s understanding of this concept. Cloud computing is considered a promising technology for organizational entities to deal with computing issues, especially data storage, in the future.

What Is Cloud Computing?

Cloud computing is the on-demand management of all computer system services (e.g. software, networking, or big data analytics) in virtual portals.