1. Being Too Late

The post 7 Worst Fails in Email Marketing first appeared on Webdesigner Depot.

Actualités, Méthodes et organisation des process IT

23 février 2022/par Service comm.

Interview With Ivan Altsybieiev and Dima Shvets, Co-Founders of Reface

Yulia: Hi, guys! Thank you for agreeing to meet me today. Let’s start with a simple question. How would you describe Reface in a few words?

Ivan: Everything started with a face-swap. We created state-of-the-art technology and made it possible to provide it to more than 180 million people. Reface is an app that allows users to swap faces in images, GIFs, and videos in seconds and with high accuracy. Moreover, in 2021 we developed more AI tools for personalized content, which allow us to animate faces, place faces on objects, and voice over them), empowering users to generate completely new and viral content.

22 février 2022/par Service comm.

Myth-Busting NFTs: 7 Claims Fact-Checked

With all the marketing aplomb of basement-coders worldwide, NFTs were named with an acronym that does little to clarify their utility.

You probably know by now that NFT stands for Non-Fungible Token; what is perhaps less clear is what “Fungible” actually means; in this context, it means interchangeable.

Consider an ounce of platinum. That platinum is fungible, meaning it can be exchanged for any other ounce of platinum. Now consider a piece of jewelry made from one ounce of platinum. That jewelry is not interchangeable with any other ounce of platinum; it has the same core materials, but it has unique characteristics that may be artistically valuable, such as shape, or craft. The jewelry is non-fungible.

The letter that actually matters in NFT is T for Token. Tokens are little chunks of a blockchain that is a universally agreed dataset. You don’t need to know how it works any more than you need to understand how a computer processor works; you just need to know it’s in there.

Like any new technology, NFTs are surrounded by propaganda, counter-propaganda, skepticism, evangelism, and Facebook-confusion. In this post, we’ll look at some of the common misconceptions so you can develop an informed opinion.

1. NFTs Are Bad For The Environment

We’ll tackle this one first because it’s the classic argument leveled against anything in the crypto-space, whether Bitcoin or NFTs, and it’s nonsensical.

The root of this myth is that cryptocurrency transactions use vast amounts of electricity, the generation of which is terrible for the environment. The answer is threefold:

Firstly, electricity is used to run computers that maintain a blockchain, such as Ethereum. The blockchain is maintained whether NFTs are minted (registered) or not.

Secondly, NFTs tend to be minted on blockchains like Ethereum that are moving to less resource-intensive models, blockchains like Solana that already have less resource-intensive models, or blockchains like Algorand that are already carbon-neutral.

Lastly, the fact is that electricity is not inherently planet-killing. Renewables like solar and wind are perfectly capable of powering the grid; it’s just that power companies make higher profits by burning fossil fuels. That swanky new electric car you’ve bought so you can drive guilt-free is fuelled with fossil fuels on the power company’s end (and that’s before you consider the damage done getting those minerals out of the ground).

Until the computer you’re using is solar-powered, repairable, and upgradable, anything digital is terrible for the environment; NFTs are as bad, but no more so, than anything digital.

2. NFTs Are Just [Insert Patronizing Economic Metaphor Here]

NFTs, and crypto in general, are frequently referred to as a Ponzi Scheme. In the 1920s, Charles Ponzi duped investors into handing over cash. Returns were paid to early investors with the income from new investors. Early investors made a lot of money, and later investors lost everything.

One of the key characteristics of a Ponzi Scheme is that it’s a confidence trick that presents itself as low-risk. NFTs as an investment are widely understood to be high-risk. Calling NFTs a Ponzi Scheme is an excellent way of letting people know you don’t know what a Ponzi Scheme is.

In the 17th century, the price of tulip bulbs reached astronomical proportions. The Dutch tulip trade was a complex economic investment system that eventually collapsed, thanks in part to a global pandemic. Ever since, Tulpenmanie (Tulip Mania, in English) has been a byword for an economic bubble.

NFTs are frequently linked to Tulip Mania, thanks partly to the prices and the expectation (or hope) that the market will collapse. However, if you drive through the Netherlands today, you’ll see vast fields of tulips. They’re not being grown because they’re worthless.

While demand may fluctuate, it doesn’t fluctuate as much as media hysteria implies. And ultimately, tulips are nice.

3. You Can Buy And Sell NFTs

This is where pedantry plays a role. You cannot buy and sell NFTs; NFTs are the vehicle by which you conduct transactions for digital (or, in some cases, physical) goods and services.

If you have software installed on your computer, you probably have a license key. The license key identifies you as holding certain rights over that software, such as being allowed to use it to produce digital goods of your own. The license key is how the company identifies you as the individual to whom it has sold those rights.

NFTs are license keys for digital goods that are recorded on a blockchain instead of being held in a single database.

4. NFTs Can Be Easily Copied

When I was a kid in the 90s, I would record music off the radio with a tape player. I’d make mix-tapes and give them away. I was, in every literal sense, pirating music. And it wasn’t just me; home-taping kept the cassette industry going for decades past its use-by date. Despite this, the music industry did not collapse.

Art is even easier to copy than music because there’s no risk of a vapid DJ wittering over the intro to I Wanna Be Adored.

On my morning commute, I pass a shop that sells art prints. Around 80% are screen prints of Marilyn Monroe. They are original prints made by an artist and sold for not inconsiderable amounts. Not one of those pieces diminishes the quality, importance, or financial value of Andy Warhol’s Marilyn Monroe prints in New York’s MoMA.

The difference is that MoMA’s Warhols have provenance — they can be tracked to a time and place and authenticated as by Warhol. Precisely the same provenance that NFTs provide digital artists.

5. You Can Get Rich From NFTs

Earning money, potentially a vast amount of money, is one of the main driving factors behind the boom in NFTs.

But the truth is that while it is possible to make a lot of money — some NFTs sell for millions of dollars — most NFTs sell for a modest amount.

If you are an accomplished artist with original ideas, you may make money from selling your art as NFTs. If you are an accomplished trader capable of recognizing quality, you may make money from buying and selling NFTs. However, very few people get rich.

6. NFT Resale Rights Undermine Value

NFTs have many potential uses, but the earliest adoption has been in digital art. The main economic benefit to artists is not just an easy way to sell their art but a widely accepted royalty system in which the original artist receives a commission every time the artwork is resold. It represents the ongoing investment the artist is making by continuing to produce and promote their work.

It might seem a strange way to approach ownership, but resale rights are not new in the art world. In the EU and the UK, the resale rights of artists are legally recognized. In France, the legal rights of the artist or the artist’s descendants to be compensated from the sale of artwork have been established in law for over a century.

Despite high-profile artists like Robert Rauschenberg fighting for resale rights, and legislation in New York and California supporting the concept, resale rights are still not recognized in the US.

NFTs introduce a fairer system that grants the same rights to all artists, that Europeans already enjoy.

7. NFTs Are Worthless

Anything with value, whether physical currency, NFTs, or a block of wood, only has value because two or more people agree it has value.

The most expensive baseball card in the world is reportedly a mint-condition Honus Wagner, priced at $3m. It might be hard to understand why anyone would pay $3m for a piece of cardboard with an image of a 1950s sportsman on it, but apparently, someone would.

All goods, all the things we spend money on, are worth what we agree they are worth. To me, a tulip bulb is worth more than a baseball card, but who knows, perhaps you don’t like tulips.

There are plenty of flaws in the systems that use NFTs, and there are plenty of detractors, but if you want to create and sell artwork and someone wants to buy it from you, NFTs are an excellent way of facilitating that transaction.

Featured image via Pexels.

The post Myth-Busting NFTs: 7 Claims Fact-Checked first appeared on Webdesigner Depot.

21 février 2022/par Service comm.

What is the “Minimum” in Minimum Viable Product?

“Minimum Viable Product,” or “MVP,” is a concept of agile development and business growth. With a minimum viable product, you focus on creating the simplest, most basic version of your product, web application, or code possible.

Minimum viable products include just enough features to attract early adopters and validate your idea in the early stages of the development lifecycle. Choosing an MVP workflow can be particularly valuable in the software environment because it helps teams receive, learn from, and respond to feedback as quickly as possible.

The question is, how exactly do you define the “minimum” in MVP? How do you know if your MVP creation is basic enough while still being “viable”?

Defining the Minimum Viable Product: An Introduction

The concept of “Minimum Viable Product” comes from the Lean Start-up Methodology, introduced by Eric Ries. The purpose of MVP is to help companies quickly create versions of a product while collecting validated insights from customers for each iteration. Companies may choose to develop and release minimum viable products because they want to:

Introduce new products into the market as quickly as possible;
Test an idea with real users before committing a large budget to product development;
Create a competitive product with the use of frequent upgrades;
Learn what resonates with the target market of the company;
Explore different versions of the same product.

Aside from allowing your company to validate an idea for a product without building the entire concept from scratch, an MVP can also reduce the demand on a company’s time and resources. This is why so many smaller start-ups with limited budgets use the MVP and lean production strategy to keep costs as low as possible.

Defining an MVP: What your Minimum Viable Product Isn’t

When you’re building a Minimum Viable Product, you’re concentrating on developing only the most “essential” features that need to be in that product. For instance, you might be building a shopping app for a website. For the app to be “viable,” it would need to allow customers to search through products and add them to a basket or shopping cart. The app would also need a checkout feature and security components.

However, additional functionality, like the ability to send questions about an item to a customer service team or features that allow clients to add products to a “wish list,” may not be necessary straight away. Part of defining a minimum viable product is understanding what it isn’t. For instance, an MVP is not:

A prototype: Prototypes are often mentioned alongside MVPs because they can help with early-stage product validation. However, prototypes are generally not intended for customers to use. The “minimum” version of a viable product still needs to be developed enough for clients and users to put it to the test and provide feedback.
A minimum marketable product: An MVP is a learning vehicle that allows companies to create various iterations of an item over time. However, a minimum marketable product is a complete item, ready to sell, with features or “selling points” the company can highlight to differentiate the item from the competition.
Proof of concept: This is another similar but distinct idea from MVP. Proof of concept items test an idea you have to determine whether it’s attainable. There usually aren’t any customers involved in this process. Instead, companies create small projects to assess business solutions’ technical capabilities and feasibility. You can sometimes use a proof of concept before moving on to an MVP.

Finding the Minimum in your MVP

When finding the “minimum” in a minimum viable product, the primary challenge is ensuring the right balance. Ideally, you need your MVP to be as essential, cost-effective, and straightforward as possible so that you can create several iterations in a short space of time. The simpler the product, the easier it is to adapt it, roll it out to your customers, and learn from their feedback.

However, developers and business leaders shouldn’t get so caught up focusing on the “Minimum” part of Minimum Viable Product that they forget the central segment: “Viable”; your product still needs to achieve a specific purpose.

So, how do you find the minimum in your MVP?

1. Decide on Your Goal or Purpose

First, you’ll need to determine what your product needs to do to be deemed viable. What goal or target do you hope to achieve with your new product? For instance, in the example we mentioned above, where you’re creating an ecommerce shopping app, the most basic thing the app needs to do is allow customers to shop for and purchase items on a smartphone.

Consider the overall selling point of your product or service and decide what the “nice to haves” are, compared to the essential features. For instance, your AR app needs to allow people to interact with augmented digital content on a smartphone, but it may not need to work with all versions of the latest AR smart glasses.

2. Make a List of Features

Once you know the goal or purpose of your product, the next step is to make a list of features or capabilities you can rank according to importance. You can base your knowledge of what’s “most important” for your customers by looking at things like:

Competitor analysis: What do your competitors already offer in this category, and where are the gaps in their service or product?
User research: Which features or functionalities are most important to your target audience? How can you make your solution stand out from the crowd?
Industry knowledge: As an expert in your industry, you should have some basic understanding of what it will take to make your product “usable.”

3. Create Your Iterations

Once you’ve defined your most important features, the next stage is simply building the simplest version of your product. Build the item according to what you consider to be its most essential features and ask yourself whether it’s serving its purpose.

If your solution seems to be “viable,” you can roll it out to your target audience or a small group of beta testers to get their feedback and validate the offering. Use focus groups and market interviews to collect as much information as possible about what people like or dislike.

Using your feedback, you can begin to implement changes to your “minimum” viable product to add more essential features or functionality.

Understanding the “Minimum Viable Product”

Minimum viable products are evident throughout multiple industries and markets today – particularly in the digitally transforming world. For instance, Amazon might be one of the world’s most popular online marketplaces today, but it didn’t start that way. Instead, Jeff Bezos began purchasing books from distributors and shipping them to customers every time his online store received an order to determine whether the book-selling landscape would work.

When Foursquare first began, it had only one feature. People could check-in at different locations and win badges. The gamification factor was what made people so excited about using the service. Other examples include:

Groupon: Groupon is a pretty huge discount and voucher platform today, operating in companies all around the world. However, it started life as a simple minimum viable product promoting the services of local businesses and offering exclusive deals for a short time. Now Groupon is constantly evolving and updating its offerings.
Airbnb: Beginning with the use of the founders’ own apartment, Airbnb became a unicorn company giving people the opportunity to list places for short-term rental worldwide. The founders rented out their own apartment to determine whether people would consider staying in someone else’s home before eventually expanding.
Facebook: Upon release, Facebook was a simple social media tool used for connecting with friends. Profiles were basic, and all members were students of Harvard University. The idea quickly grew and evolved into a global social network. Facebook continues to learn from the feedback of its users and implement new features today.

Creating Your Minimum Viable Product

Your definition of a “minimum viable product” may not be the same as the definition chosen by another developer or business leader. The key to success is finding the right balance between viability – and the purpose of your product, and simplicity – or minimizing your features.

Start by figuring out what your product simply can’t be without, and gradually add more features as you learn and gain feedback from your audience. While it can be challenging to produce something so “minimalistic” at first, you need to be willing to release those small and consistent iterations if you want to leverage all the benefits of an MVP.

Suppose you can successfully define the meaning of the words “Minimum” and “Viable” simultaneously with your new product creations. In that case, the result should be an agile business, lean workflows, and better development processes for your entire team.

Featured image via Pexels.

The post What is the “Minimum” in Minimum Viable Product? first appeared on Webdesigner Depot.

18 février 2022/par Service comm.

WordPress Website Analysis: Before & After ImageEngine

WordPress is by far the world’s most popular CMS. Not only does it dominate the CMS market with a 64% market share, but it also powers 39.6% of all websites. It has taken the internet by storm by democratizing the web for all. Now, anyone can build, manage, and host a successful website without needing a college degree or coding expertise.

However, while WordPress is great at managing many technical aspects, it still can’t do everything for you. Built mostly on PHP, there are often concerns regarding how performant WordPress is. And, with performance impacting everything from bounce rates to SEO rankings to conversions, it’s something that should be on your radar too.

If you don’t know it yet, images are one of the main causes of slow-loading websites. In recent years, WordPress has stepped up its efforts to try and help users with image optimization out-of-the-box.

Still, as we’ll show, it’s not a total solution, and there is still plenty you can do to deliver better experiences on your WordPress website through image optimization.

What is WordPress Image Optimization? Why is it Important?

Simply put, image optimization is anything you do to make images load faster on your website pages. Almost all websites that use images can benefit from some form of image optimization, even those using WordPress.

Why?

Well, performance is a hugely significant factor when it comes to the competitiveness of your website today.

Google has also made performance an increasingly important factor when it comes to SEO rankings. In fact, performance is a direct ranking signal that carries significant weight.

Google’s Page Experience Update that went live in 2021 has been the biggest move in that direction yet. Soon, Google might even use visual indicators in SERP results to distinguish high-performing websites from the rest.

In Google’s own words, “These signals measure how users perceive the experience of interacting with a web page and contribute to our ongoing work to ensure people get the most helpful and enjoyable experiences from the web.”

So, Why Should We Target Images For Performance Optimization?

According to Google, images are the largest contributor to page weight. Google has also singled out image optimization specifically as the factor with the most untapped potential for performance optimization.

This problem isn’t going away soon. According to data by the HTTP Archive, there are roughly 967.5 KB bytes of image data on desktop web pages and 866.3 KB of image data on mobile pages. This is an increase of 16.1% and 38.8%, respectively, over the last five years.

Thanks to popular e-commerce tools like Woocommerce, it’s estimated that up to 28% of all online sales happen on WordPress websites.

And don’t forget, images are both a key part of conveying information to the user and integral to the design of your website. If they take significantly longer to load than your text, for example, it will negatively impact the user experience in a variety of ways.

In summary, optimized images help your WordPress website by:

Improving user satisfaction.
Improving various traffic metrics, like bounce rates, time-on-page, etc.
Boosting your SEO rankings.
Contributing to higher conversions (and sales).

How Does Image Optimization in WordPress Work?

WordPress is so popular because it’s a CMS (content management system) that allows anyone to build, design, and manage a website without any coding or advanced technical experience. Advanced features can be installed with just a few clicks, thanks to plugins, and you rarely have to touch the code behind your website unless you want to make some unique modifications.

In short, using a CMS like WordPress shields you from many of the day-to-day technicalities of running a website.

WordPress Image Optimization: What It Can Do

As we mentioned, one of the main reasons WordPress is so popular is because it takes care of many of the technical aspects of running a website. With that in mind, many think that WordPress should also automatically take care of image optimization without them having to get involved at all.

Unfortunately, that’s not really the case.

True, WordPress does offer some built-in image optimization. Whenever you upload an image to WordPress, it currently compresses the quality to about 82% of the original (since v4.5).

In v4.4, WordPress also introduced responsive image syntax using the srcset attribute. This creates four breakpoints for each image you upload according to the default WordPress image sizes:

150px square for thumbnails
300px width for medium images
768px max-width for medium_large images
1024px max-width for large images.

Here you can see an example of the actual responsive syntax code generated by WordPress:

<img loading="lazy" src="https://bleedingcosmos.com/wp-content/uploads/2021/12/33-1024x683.jpg" alt="" class="wp-image-9" width="610" height="406" srcset="https://bleedingcosmos.com/wp-content/uploads/2021/12/33-1024x683.jpg 1024w, https://bleedingcosmos.com/wp-content/uploads/2021/12/33-300x200.jpg 300w, https://bleedingcosmos.com/wp-content/uploads/2021/12/33-768x512.jpg 768w, https://bleedingcosmos.com/wp-content/uploads/2021/12/33-1536x1024.jpg 1536w" sizes="(max-width: 610px) 100vw, 610px">

Depending on the screen size of the device from which a user visits your webpage, WordPress will let the browser pick the most appropriately sized image. For example, the smallest version for mobile displays or the largest for 4K Retina screens, like those of a Mac.

While this may seem impressive, it’s only a fraction of what can be achieved using a proper image optimization solution, as we’ll show later.

Lastly, WordPress implemented HTML native default lazy loading for all images starting with version 5.5.

So, in short, WordPress offers the following image optimization capabilities baked-in:

Quality compression (limited)
Responsive syntax (up to 4 breakpoints)
Lazy loading

WordPress Image Optimization: What it Cannot Do

There are other issues many have with both the implementation of image compression and responsive syntax as it’s used by WordPress. This leads to some users even purposefully deactivating WordPress’ built-in image optimization so they can fully take control of it themselves.

Here are some of the reasons why:

WordPress uses a very basic form of quality compression. It does not use advanced technologies like AI and machine learning algorithms to compress images while maintaining maximum visual quality. It’s also lossy compression, so the quality is lost for good. You can clearly see the difference between an original HD image and the compressed version created by WordPress.
WordPress only compresses most images by up to 20%, while advanced image optimization tools can reduce all image sizes intelligently by up to 80%.
Responsive syntax can provide significant performance improvements over simply uploading a single HD image to be served on all devices and screens. However, it’s still only limited to a set number of breakpoints (typically 3 or 4). Since it’s not dynamic, a whole spectrum of possible image sizes is not created or used.
Responsive syntax code is not scalable and can quickly lead to code that’s bloated, messy, and hard to read.
WordPress doesn’t accelerate image delivery by automatically caching and serving them via a global CDN, although this can be done using other tools.

Another important optimization feature that WordPress does not have is auto-conversion to next-gen image file formats. Different image formats offer different performance benefits on different devices. Some formats also enable higher levels of compression while maintaining visual fidelity.

Next-gen formats like WebP, AVIF, and JPEG-2000 are considered to be the most optimal formats on compatible devices. For example, until recently, WebP would be the optimal choice on Chrome browsers, while JPEG-4000 would be optimal on Safari browsers.

However, WordPress will simply serve images in the same formats in which they were originally uploaded to all visitors.

How to Measure the Image Performance of a WordPress Website?

As the undisputed king of search engines, we’ll base most of our performance metrics on guidelines established by Google.

Along with its various performance updates, Google has released a number of guidelines for developers as well as the tools to test and improve their websites according to said guidelines.

Google introduced Core Web Vitals as the primary metrics for measuring a web page’s performance and its effect on the user experience. Thus, Core Web Vitals are referred to as “user-centric performance metrics.” They are an attempt to give developers a testable and quantifiable way to measure an elusive and abstract concept such as “user experience.”

Combined with a number of other factors, Core Web Vitals constitute a major part of the overall page experience signal:

You can find a complete introduction to Core Web Vitals here. However, they currently consist of three main metrics:

LCP (Largest Contentful Paint): The time it takes the largest above-the-fold element on your page to load. This is typically a full-sized image or hero section.
FID (First Input Delay): The delay from the moment a user first interacts with an element on the page until it becomes responsive.
CLS (Cumulative Layout Shift): The visual stability with which the elements on a page load.

Here is an illustration of how these metrics are scored:

While these are the three most important metrics to optimize, they are not the only ones. Google still measures other metrics like the FCP (First Contentful Paint), SI (Speed Index), as well as the TTFB (Time to First Byte), TBT (Total Blocking Time), and TTI (Time to Interactive).

A number of these metrics are directly affected by the images used on your web pages. For example, LCP, FCP, and SI are direct indicators of how fast the content of your web page loads and depends on the overall byte size of the page. However, it can also indirectly affect FID by keeping the main thread busy with rendering large amounts of image content or the perceived CLS by delaying the time it takes large images to load.

These metrics apply to all websites, whether they are custom-made or built using a CMS like WordPress.

When using tools like Lighthouse or PageSpeed Insights, you’ll also get scored based on other flags Google deems important. Some of them are specific to images, such as properly sizing images and serving images in next-gen formats.

If you only use built-in WordPress image optimization, you’ll get flagged for the following opportunities for improvement:

Some of the audits it will pass, however, are deferring offscreen images (lazy loading) and efficiently coding images (due to compression):

A Better Way to Optimize WordPress Images: ImageEngine

Billions of websites are all vying for prime real estate on Google SERPs, as well as the attention of an increasingly fussy internet-using public. Every inch matters when it comes to giving your website a competitive advantage.

So, how can you eliminate those remaining performance flags and deliver highly optimized images that will keep both your visitors and Google happy?

Sure, you could manually optimize images using software like PhotoShop or GIMP. However, that will take you hours for each new batch of images. Plus, you still won’t benefit from any automated adaptive optimization.

A more reasonable solution in today’s fast-paced climate is to use a tool developed specifically for maximum image optimization: an image CDN like ImageEngine.

ImageEngine is an automated, cloud-based image optimization service using device detection as well as intelligent image compression using the power of AI and machine learning. It can reduce image payloads by up to 80% while maintaining visual quality and accelerating delivery around the world thanks to its CDN with geographically dispersed PoPs.

Why is ImageEngine Image Optimization Better Than WordPress?

When making a head-to-head comparison, here are the reasons why ImageEngine can deliver better performance:

Device Detection: ImageEngine features built-in device detection. This means it picks up what device a visitor to your website is using and tailors its optimization strategy to what’s best for that specific device.
Client hints: By supporting client hints, ImageEngine has access to even more information regarding the device and browser to make better optimization decisions.
Next-gen formats: Based on optimal settings, ImageEngine automatically converts and serves images in next-gen formats like WebP, AVIF, JPEG2000, and MP4 (for GIFs).
Save data header: When a Chrome user has save-data mode enabled, ImageEngine will automatically compress images more aggressively to save on data transfer.
CDN with dedicated edge servers: ImageEngine will automatically cache and serve your optimized image assets using its global CDN. Each edge server has device awareness built-in to bring down latency and accelerate delivery. You can also choose to prioritize specific regions.

So, the key differentiator is that ImageEngine can tailor optimizing images for what’s optimal for each of your visitors. ImageEngine is particularly good at serving mobile visitors thanks to WURFL device detection, which can dynamically resize images according to most devices and screen sizes in use today. As of now, this is a completely unique capability that none of its competitors offer.

It allows for far better and more fine-tuned optimization than WordPress’ across-the-board approach to compression and responsive syntax.

If you want, you could turn off WordPress responsive syntax and compression, and you would still experience a performance increase using ImageEngine. However, ImageEngine also plays nice with responsive syntax, so it’s not completely necessary unless you want to serve the highest-fidelity/low-byte-size images possible.

How Does ImageEngine Work with WordPress?

The process ImageEngine uses to integrate with WordPress can be broken down into a few easy steps:

Sign up for an ImageEngine account: ImageEngine offers three pricing plans depending on the scale and features you need as well as a no-commitment 30-day free trial.
Specify your image origin: This tells ImageEngine where to find the original versions of your images. For a WordPress website, you can just use your domain, e.g., https://mywordpresswebsite.com. ImageEngine will then automatically pull the images you’ve uploaded to your WordPress website.

Copy the Delivery Address: After you create an account and specify your image origin, ImageEngine will provide you with a Delivery Address. A Delivery Address is your own unique address that will be used in your <img> tags to point back to the ImageEngine service. Delivery Addresses may be on a shared domain (imgeng.in) or customized using a domain that you own. A Delivery Address typically looks something like {random_string}.cdn.imgeng.in. If your images are uploaded to the default WordPress folder /wp-content/uploads/, you can access your optimized images from ImageEngine simply by changing your website domain. For example, by typing {imageengine_domain}.cdn.imgeng.in/wp-content/uploads/myimage.jpg into your browser, you’ll see the optimized version of that image. Just press the copy button next to the Delivery Address and use it in the next step configuring the plugin.

Install the ImageEngine Optimizer CDN plugin: The plugin is completely free and can be installed just like any other plugin from the WordPress repository.
Configure and enable ImageEngine Plugin in WordPress: Just go to the plugin under “ImageEngine” in the main navigation menu. Then, copy and paste in your ImageEngine “Delivery Address,” tick the “Enabled” checkbox, and click “Save Changes” to enable ImageEngine:

Now, all ImageEngine basically does is replace your WordPress website domain in image URLs with your new ImageEngine Delivery Address. This makes it a simple, lightweight, and non-interfering plugin that works great with most other plugins and themes. It also doesn’t add unnecessary complexity or weight to your WordPress website pages.

ImageEngine vs Built-in WordPress Image Optimization

So, now let’s get down to business by testing the performance improvement you can expect from using ImageEngine to optimize your image assets.

To do this test, we set up a basic WordPress page containing a number of high-quality images. I then used PageSpeed Insights and the Lighthouse Performance Calculator to get the performance scores before and after using ImageEngine.

Importantly, we conducted this test from a mobile-first perspective. Not only has mobile internet traffic surpassed desktop traffic globally, but Google themselves have committed to mobile-first indexing as a result.

Here is a PageSpeed score using the Lighthouse calculator for WordPress with no image optimization:

As we can see, both Core Web Vitals and other important metrics were flagged as “needs improvement.” Specifically, the LCP, FCP, and TBT. In this case, both the LCP and FCP were a high-res featured image at the top of the page.

If we go to the opportunities for improvement highlighted by PageSpeed, we see where the issues come from. We could still save as much as 4.2s of loading time by properly resizing images and a further 2.7s by serving them in next-gen formats:

So, now let’s see how much ImageEngine can improve on that.

The same test run on my WordPress website using ImageEngine got the following results:

As you can see, we now have a 100 PageSpeed score. I saved roughly 2.5s on the SI (~86%) as well as roughly 1.7s on the LCP (~60%). There was also a slight improvement in the FCP.

Not only will you enjoy a stronger page experience signal from Google, but this represents a tangible difference to visitors regarding the speed with which your website loads. That difference will lead to lower bounce rates, increased user satisfaction, and more conversions.

There was also a 53% overall reduction in the total image payload. This is impressive, considering that it’s on top of WordPress’ built-in compression and responsive syntax.

Conclusion

So, as someone with a WordPress website, what can you take away from this?

Well, first of all, WordPress does feature some basic image optimization. And while not perfect, it should help you offer reasonable levels of performance, even if you use a lot of image content.

However, the caveat is that WordPress applies aggressive, across-the-board compression, which will lead to a noticeable reduction in visual quality. If you use WordPress for any type of website where premium quality images are important, this is a concern — for example, as a photography portfolio, exhibition, or image marketplace like Shutterstock.

By using ImageEngine, you can reduce image payloads and accelerate delivery even further without compromising too harshly on visual quality. What’s more, ImageEngine’s adaptive image optimization technology will provide greater improvements to more of your visitors, regardless of what device(s) they use to browse the web.

Whether or not you still want to use WordPress’ built-in optimizations, ImageEngine will deliver significant improvements to your user experience, traffic metrics, and even conversions.

Plus, true to the spirit of WordPress, it’s extremely simple to set up without any advanced configuration. Just sign up for ImageEngine in 3 easy steps, install the plugin, integrate ImageEngine by copy/pasting your image domain, and you’re good to go.

[ This is a sponsored post on behalf of ImageEngine ]

The post WordPress Website Analysis: Before & After ImageEngine first appeared on Webdesigner Depot.

8 février 2022/par Service comm.

How to Use Hand-Drawn Elements in Web Design

What stands out as an incredible web design project for you? Do you count your creation as a success if it’s modern, minimal, and accessible? Maybe you’re the kind of designer that’s constantly experimenting with the latest dynamic design tools or state-of-the-art technology. Perhaps your websites are vivid, animated, and brimming with unique components?

Sometimes, creating the ideal design means thinking carefully about what you want to accomplish for your client. The purpose of your web creation has a significant impact on the components that you need to consider. For instance, if you’re hoping for a highly emotive and human design, it may be worth combining some of your sleek lines and graphics with hand-drawn elements.

The Value of Hand-Drawn Graphics in Web Design

Hand-drawn elements are just like the other components of web design; that way may use to express individuality in a cluttered digital environment. In a world where everyone focuses on futuristic and virtual creations, hand-drawn elements can pull attention back to the importance of humanity in your content.

As web designers, we know that visual components often impact people more than text-based content. Illustrations are highly engaging functional elements that capture audience attention and convey relevant information.

The main difference between hand-drawn elements and graphics built with vectors and other digital components is that one appears to be more influenced by the human hand than the other. Even if your illustrations are created on a screen, just like any other web design component, it pushes an audience to see something more straightforward, more natural, and authentic.

For a brand trying to convey innocence and humanity in its personality, hand-drawn design can speak to the part of the human psyche that’s often unappreciated by web design. Perhaps more than any other visual, the content reminds your audience that there’s a human behind the web page.

The Value of Hand-Drawn Features in Web Design

Any image can have a massive impact on the quality of your web design. Visuals deliver complex information in an easy-to-absorb format. In today’s world of fast-paced browsing, where distractions are everywhere, visuals are a method of capturing attention and delivering value fast.

However, with hand-drawn elements, you go beyond the basic functionality of images to embrace the emotional side of the content. Benefits include:

A memorable experience: Web illustrations are becoming more popular among leading brands like Innocent Smoothies and Dropbox. However, the time that goes into these components means that they’re still scarce. If you want to stand out online, illustrations can help you do that.
Brand personality: One of the most significant benefits of hand-drawn web design is showcasing your brand personality. The blocky lines of imperfect content that go into illustrated images highlight the human nature of your company. So many businesses are keen to look “perfect” today to make the human touch much more inviting.
Differentiation: As mentioned above, hand illustrations are still rare in the digital design landscape. If you’re struggling to find a way to make your brand stand out, this could be it. Although there needs to be meaning behind your design, the result could be a more unique brand if you can convey that meaning properly.

Tips for Using Hand Drawn Elements in Web Design

Hand-drawn components, just like any other element of visual web design, demand careful strategy. You don’t want to overwhelm your websites with these sketches, or you could end up damaging the user experience in the process.

As you work on your web designs, pulling hand-drawn elements into the mix, think about how you can use every illustration to accomplish a crucial goal. For instance:

Create Separation

Hand-drawn design components can mix and match with other visual elements on your website. They work perfectly alongside videos and photos and help to highlight critical points.

On the Lunchbox website, the company uses hand-drawn elements. This helps make the site stand out, and it provides additional context for customers scanning the website for crucial details.

Engage Your Audience

Sometimes, hand-drawn elements are all about connecting with end-users on a deeper, more emotional level. One of the best ways to do this is to make your hand-drawn elements fun and interactive pieces in the design landscape.

One excellent example of this is in the Stained Glass music video here. This interactive game combines an exciting web design trend with creative interactive components so that users can transform the web experience into something unique to them.

Highlight Headers with Typography

Sometimes, the best hand-drawn elements aren’t full illustrations or images. Hand-drawn or doodle-like typography can also give depth to a brand image and website design.

Typography styles that mimic natural, genuine handwriting are excellent for capturing the audience’s attention. These captivating components remind the customer of the human being behind the brand while not detracting from the elegance of the website.

This example of hand-drawn typography from the Tradewinds hotel shows how designers can use script fonts to immediately capture customer attention. Notice that the font is still easy to read from a distance, so it’s not reducing clarity.

Set the Mood

Depending on the company that you’re designing for, your website creation choices can have a massive impact on the emotional resonance that the brand has with its audience. Hand-drawn elements allow websites to often take on a more playful tone. They can give any project a touch of innocence and friendliness that’s hard to accomplish elsewhere.

A child-like aesthetic with bright colors and bulky fonts combines with hand-drawn elements on the Le Puzz website. This is an excellent example of how web designers can use hand-drawn elements to convey a mood of creativity and fun.

Animated Elements

Finally, if you want to combine the unique nuances of hand-drawn design with the modern components of what’s possible in the digital world today, why not add some animation. Animated elements combined with illustrations can help to bring a website to life.

In the Kinetic.com website, the animated illustrated components help to highlight the punk-rock nature of the fanzine. It’s essential to ensure that you don’t go too over-the-top with your animations here. Remember that too many animations can quickly slow down a website and harm user-friendliness.

Finishing Thoughts on Hand-Drawn Elements

Hand-drawn elements have a lot to offer to the web-design world.

Even if you’re not the best artist yourself, you can still simulate hand-drawn components in your web design by using the right tools and capabilities online.

Although these features won’t fit well into every environment, they can be perfect for businesses that want to show their human side in today’s highly digitized world. Hand-drawn components, perhaps more than any other web design feature, showcase the innocence and creativity of the artists that often exist behind portfolio pages and startup brands.

Could you experiment with hand-drawn design in your next project?

The post How to Use Hand-Drawn Elements in Web Design first appeared on Webdesigner Depot.

Actualités, Méthodes et organisation des process IT

4 février 2022/par Service comm.

Introduction to Couchbase for Oracle Developers and Experts: Part 5: Statements and Features

SQL is the only 22nd century tool available in 21st century

Here are the previous articles comparing architecture, database objects, data types, and data modeling of Oracle with Couchbase. This will focus on SQL support.

Oracle was the first and staunch supporter of SQL. Oracle’s SQL implementation beat IBM to market by two years. That changed the fortune of one or two people. :-) All of the modern relational databases implement SQL. So much so, the relational databases are sometimes called SQL databases, much to the chagrin of C. J. Date. Nations are known by their languages… English, French, and American(!). It’s not a stretch for a class of database systems to be known by their languages as well. SQL has been so effective, many big data and non-relational systems have picked up SQL as the lingua franca. SQL is here to stay, even for NoSQL systems.

4 février 2022/par Service comm.

What’s the Difference Between Good UI and Good UX?

User Experience (UX) design and User Interface (UI) design are two terms people sometimes mistakenly use interchangeably. While aspects of each are interconnected, there are distinct differences between UI/UX design.

According to Internet Live Stats, there are over 1.9 billion websites, but not all are active at the same time. No matter how you slice it, there’s a lot of competition to grab and keep user attention. Good UX is just part of the equation. For a genuinely stellar site, you must also offer an excellent interface.

Learning the ins and outs of good UI and UX requires a bit of knowledge of how the two differ and what works. Although they weave in and out of the same design, they are different.

What Is the Biggest Difference Between Good UX and UI?

UI is the functionality of the design and what users see. How do they interact with various elements? UX is more the way things come together — both visual and interactive features — to create a feel for the user. You can certainly see why people confuse the two as they both apply to interacting with a website or app.

Top design firms often have team members specializing in each discipline. However, UX designers are also aware of UI, and UI designers are also mindful of UX. How can you ensure you’re offering excellent UI/UX design while covering the full spectrum of requirements for each?

Ensuring Effective UX Design

Good UX design increases conversion rates by 400% or more. The site visitor walks away feeling understood and not frustrated. What are some of the most important aspects of good UX design?

1. Create a Good Structure

What is the hierarchy of your site? What is the first thing the user sees when they pull it up? How do they navigate from one page to the next? A well-designed website classifies different aspects of the page, and new content naturally falls into the appropriate category as it grows.

When creating a structure for your site, think about how it might expand in the next five years. You want the hierarchy to work from day one, but you also want to think through significant shifts in the content you might see down the road.

Even your navigational hierarchy should accommodate new areas easily. Plan for the unexpected, so you know how to work it into the overall design when you must.

2. Choose Beautiful Aesthetics

You have a few seconds to make an excellent impression on your site visitors. Take the time to make sure your design functions and is visually appealing. Your color palette should work, images should be crisp and relevant, and typography should be readable and engaging.

Step back from your computer and look at your design from a distance. Does anything stand out that isn’t pleasing to the eye? Get feedback from visitors about what they like and dislike. Since the focus is on user experience, your best source of constructive criticism is from your target audience. Listen to their concerns and ideas.

3. Communicate With Site Visitors

Most experts agree that users want an element of interactivity on sites and apps. People want to know you hear them and get a response. Some ideas include adding a live chat option to your site or engaging in SMS customer support.

Put yourself in their shoes. A customer may visit your site for the first time, having never heard of your brand. They have no reason to trust you or that you’ll follow through on your promises. Potential leads may have a few questions before parting with their hard-earned dollars.

Adding various ways to communicate shows them you’ll be there should they have a problem. It’s much easier to trust a company when you know you can phone, engage in live chat or shoot off an email and get an almost immediate response.

4. Add Clear Direction

Excellent UX is intuitive. You should add calls to action (CTAs) and images pointing the user where they should go next. You can use graphics of arrows, people looking or pointing toward the next step, words, or CTA buttons.

Get feedback on how clear the directions are and tweak them as needed. The user should never have to stop and ponder what to do next. Everything on the page should guide them toward the ultimate goal.

5. Break Down Complex Data

Every industry has complicated data that is difficult for non-experts to understand. Part of good UX is breaking down complex information and sharing it in a simplified way.

One example might be the registration process. Instead of just showing text, a good UX designer would number the steps. Visualizations help add to understanding.

Embracing Effective UI Design

User Interface impacts UX and involves how the design works. The UI designer thinks through visitor expectations and then creates an interface that isn’t frustrating. UI works within the framework of a website to develop functional features. User experience isn’t the complete focus of UI, but it does tie into the planning phases. What are some elements of good UI design?

1. Set Standards

For a design to have good UI, it must perform as expected. Have you ever clicked on a button, and nothing happened? Determine how you want things to work and the minimum acceptable standards for your site.

For example, what happens when someone clicks on a link or button? How does the user know their action created the expected result? Consistency is crucial to how a site performs.

2. Choose the Right Colors

While UX designers look at the emotional impact of various colors, UI designers look at whether the shades match branding and how well the different ones contrast for readability and usability. UI/UX design often bridges a single designer’s work, so the employee ensures everything works as intended, both emotionally and functionally.

You may work with another designer to make the site aesthetically pleasing while also tapping into the emotions driving users. For example, some people love blue, so a blue button can have positive results.

UX and UI designers utilize split testing to see which users respond best to. Then, make adjustments as indicated by how site visitors respond.

3. Focus on Cognitive Matters

According to the Interaction Design Foundation, people can only retain around five things in their short-term memory. Designers should work with recognition instead, as users tend to rely on cues to find what they need.

UI designers may develop an intuitive navigation system and then use the same cues on every page, such as placement, color, and language. Users can then recognize the system without having to memorize it.

4. Prevent Errors

Your job is to ensure errors are kept to a minimum when designing a website or app. One of the most significant parts of a designer’s job is testing and retesting.

Think about all the potential problems a user might run into, such as broken links, images not showing, or incomplete actions. How can you keep those problems from occurring in the first place?

Error prevention is particularly vital when designing software as a service (SaaS) or apps. Users grow frustrated quickly and will find another solution rather than troubleshooting an issue. You’re much better off avoiding the error in the first place.

How Do UX and UI Work Together?

You’ve likely already figured out how closely UX and UI entwine to create a usable experience. The UX designer pays attention to function and interactivity, and the UI designer thinks through how the interface looks.

UX pays attention to the flow of the website and where users start, go next and end up. On the other end, UI figures out how the elements look to the viewer and where everything is placed.

The UX team may decide to add an extra button to the page. The UI team must determine where to place it, if any sizing needs must occur, and how it impacts usability on desktop and mobile devices.

Although each has a different function, user experience and user interface must work together to create a usable site the target audience responds to. You can’t have excellent UX without excellent UI, and vice versa. The best designers consider both and implement them to their fullest potential.

Featured image via Pexels.

The post What’s the Difference Between Good UI and Good UX? first appeared on Webdesigner Depot.

Actualités, Méthodes et organisation des process IT

2 février 2022/par Service comm.

3 Things Every Engineer Should Know About Inclusive Design

Fact: Over 26% of adults in the United States have some sort of disability. To ignore such a massive part of the population would be ill-advised for any company, legally, financially, and above all, ethically. How can you stay ahead of the curve when it comes to maintaining a progressive and responsive organization?

We reached out to two experts – Alwar Pillai and Perry Trinier of Fable – on the topic of designing products that have inclusivity for people with disabilities at their core. Here are the 3 things they think every engineer, developer and product designer needs to know about inclusive design and how it will inevitably affect the future of their companies.

Actualités, Méthodes et organisation des process IT

28 janvier 2022/par Service comm.

The One Timeless Benefit of Design Patterns

There’s not much buzz about design patterns these days. They appear to have joined the hall of fame of accepted wisdom, alongside the Silver Bullet, SOLID and DRY. Lately, I had the opportunity to share some thoughts on the importance of good old design patterns with Koen Aerts, CTO of Team Rockstars IT. Here’s the gist of that talk in a more digestible format.

Before I start, let me set some boundaries, as people can get doctrinaire about definitions. I refer to the good old bridge, builder, decorator, and factory patterns. Architectural patterns like MVC do not fall into the same category, much fewer paradigms like serverless and microservices (aka SOA the next generation).