Posted on

How to make Microsoft Edge go to sleep

I recently installed Windows ten in an older Toshiba Satellite P755=S5182 laptop. I have done this installation many times before and thought I had turned off most of the annoyances. I installed drivers and updates and a few programs ie, Chome , Acrobat Reader, etc. When I insert a USB flash drive and File Explorer opens, Up Pops Microsoft Edge with numerous tabs offering "help with using File Explorer". I have already set Chrome as the default browser but I must have missed something in the settings. Anyone have ideas about what to turn off?
Mahalo for your help.

Posted on

Video: Matt Mullenweg and Josepha Haden Chomphosy Join WordCamp India for Fireside Chat

If you are living in part of the world where the polar vortex has plunged the weather into record-cold temperatures, you might enjoy this fireside chat from WordCamp India 2021. The event was held online over the span of three weekends from Jan 30 to Feb 14. Matt Mullenweg and Josepha Haden Chomphosy joined organizers over the weekend for an invigorating conversation about India and the global WordPress community.

One of the opening questions from the audience was about the growth of newsletter services like Substack, which seem no different from a WordPress-powered blog with emailing features. The audience asked how WordPress can help people who want to start their own newsletter service.

Mullenweg said that although “pretty much everything is possible in WordPress,” some things require putting together many different plugins and might have a higher barrier to entry:

I think there’s two ways we can address that. One is by education. People can actually get through a lot steps if there is a good guide. A great guide around how to build something just like Substack on your WordPress blog where you own everything would be really valuable and popular. Second, when we make that guide we will probably see some steps that we could eliminate or smooth, friction points which we could make easier for people to get through. Whenever we see something like a Substack pop up on the market, I think it’s a great moment for reflection to see where can that educate us to where we can improve our own product, plugins, and educational material.

Mullenweg also shared that Automattic has just made “a pretty large investment” in Titan, a company based in India, which he said will be a big part of how WordPress.com offers email going forward.

Josepha Haden Chomphosy gave an update on what’s next for in-person events, which may resume later in 2021 if things go well:

In the short term, the future of WordCamps is very careful. There’s an ongoing conversation about how we can bring everybody back together in a way that keeps us connected and provides all of that normal WordPress feeling but also is incredibly safe. It’s hard. There’s a lot of unknown stuff, but the success with the vaccinations we have seen so far is really heartening. Fingers crossed we can start allowing quite small in-person events starting in Q3 of 2021.

Haden Chomphosy also indicated that hybrid events may be here to stay, streaming to an online audience with captioning and translation available when possible, to make in-person events more accessible:

We can, with a little bit of pre-planning and with a little bit of intention, make sure that our events, even if they are in person, have an online component that helps to make sure the education that we’re trying to provide there gets to as many people as possible without having that barrier to entry of having to physically go to a place and pay your time to get there and pay your money to get there. I’m hoping that we see a little more consistent planning about that in our in person events so we can keep offering a more global mindset to our events overall.

She touched on the topic of training and education, noting that WordPress’ 0-101 level content is somewhat lacking. This critical “make or break” onboarding stage could be improved for many users.

They also discussed the need for attracting a younger generation of contributors that WordPress veterans can mentor to infuse new life into the project. Check out the recording below.

Posted on

How Spammers Avoid the Gmail Spam Filter through Google Forms

Gmail is very effective at filtering spam emails but spammers seem to have figured out a new way to bypass the spam filters and send emails that land right in the user’s inbox. The emails are sent through Google Forms and because the messages originate from Google’s own email servers, they do not get caught in the spam filters.

Google Forms - Spam Emails

Here’s how spam emails are sent through Google Forms.

  1. A public form is created with Google Forms.
  2. The form creator uploads images for the various question fields and also adds links to spam websites in the form.
  3. Inside the Form settings, they turn on the option to “Collect Email Addresses” including the option to send “Response receipts” when a new form is submitted.

Google Form Email

Now the spammers can simply open the Google Form, fill in the recipient’s email address and hit the submit button.

Google Forms will automatically email a copy of the form response, including all the pictures and links contained in the original form, to the email address that was entered in the form.

Here’s a screenshot of one such email from Google Forms that easily tricked the spam filters.

Google Forms

How to Block Spam from Google Forms

If you would like to prevent spam emails from Google Forms from landing in your inbox, Gmail filters can help.

All pre-filled Google Forms emails have the sender’s email address as below:

forms-receipts-noreply@google.com

You can create a filter in Gmail that will automatically delete emails that have Google Forms as the sender.

Google Forms Filter

Alternatively, you may open the form link from the email and click the “Report Abuse” button to report the form to Google. That is not likely to be a very effective strategy though as spammers can always switch to a different Google account.

Posted on

Newspack Newsletters Now Live in the WordPress Plugin Directory

Automattic released its Newspack Newsletters project to the WordPress plugin directory earlier today. It is the first Newspack-related plugin the company has made available outside of GitHub or its custom platform.

Newspack is primarily a service geared toward small and medium-sized publications. Its goal is to work with news industry leaders to create a platform for bringing WordPress to more newsrooms worldwide. El Soberano, a Chilean news publication, became the first site to launch on the service in October 2019. Earlier this month, Newspack showcased 60 sites running on the platform.

The platform is more than one theme, plugin, or service. The code is open-source, available on GitHub, and free for anyone to use via self-hosted WordPress. Each plugin is built based on feedback between publishers and the Newspack development team to solve real-world problems for publications.

The downside? Until now, the various Newspack plugins have all been hosted on GitHub, which is a developer-centric platform.

Small newsrooms may not have an onboard developer or IT team. The discoverability of necessary plugins will often happen through WordPress.org. With Newspack Newsletters landing in the plugin directory, it could be an indication of things to come.

The Newspack team should not stop with their first plugin. The entire suite of tools should be available through the plugin directory. The Newspack Blocks plugin could have uses outside of news sites. Many users might find value in its Post Carousel block or various patterns. The Newspack Content Converter bulk-converts classic WordPress posts to the block system. Even the Newspack theme and its child themes should have a home on the official WordPress theme directory.

I have reached out to the Newspack team for information on whether other plugins are coming to the directory but have not yet received official confirmation.

How the Plugin Works

Newspack Newsletters launched in July 2020. The plugin initially integrated with Mailchimp. However, the team has since added Constant Contact support. It also requires integration with Mailjet Markup Language (MJML) for transforming the HTML from WordPress into responsive markup for email clients.

After installing the plugin, users must set up the API keys from the third-party services they are using. Steve Beatty has a complete walkthrough of the process in the following YouTube video:

The plugin adds a new post type for managing newsletters. It works much the same way as any other post or page. When adding a newsletter, users are initially presented with four layout options:

  • Breaking News: Displays the latest blog post and a message afterward.
  • Daily/Weekly: Lists the latest posts from the blog and a section for sharing curated links from around the web.
  • Daily/Weekly (No Images): An alternate version of the Daily/Weekly layout without post featured images.
  • Support: A template for asking readers to support the publication.

Of course, these are only starting points. Users can begin from any of these four templates or wholly from scratch. The plugin also provides an option for saving newsletters as custom layouts.

Selecting a layout from the Newspack Newsletters add new screen.
Selecting a layout from the newsletter screen.

While the plugin works similarly to posts and pages, it does limit the available blocks to those more suitable for emails. This subset includes text-based blocks like Paragraph, Heading, Quote, and List. It also supports few design-type blocks, images, and the plugin’s Post Inserter block.

The user experience is straightforward. Newsletter-specific settings are in the sidebar panel. One of the simple-but-useful features is a “Styling” tab that allows users to make wholesale font and color changes for a single newsletter.

Editing a newsletter via the block editor while using the Newspack Newsletters plugin.
Creating and sending a test newsletter.

Users can even send a test email before publishing to make sure everything is in order. This feature also makes it easy to test on a local machine before deciding if the plugin is worth using in production.

Newspack Newsletter email as viewed through Gmail.
Newsletter viewed via Gmail.

Usage of the ads system was not immediately apparent. It was not until I ran a test email from the Edit Newsletter screen that I realized that the ad I had created was attached to the end of the email. Even after figuring this out, I still felt a disconnect between how ads worked for newsletters. There is a sidebar setting for disabling ads on the Edit Newsletter screen. Perhaps I am missing something, but ad placements should be a block the user can insert into the content canvas.

Despite feeling at odds with the ads system in the plugin, the overall experience was mostly smooth. The plugin is not overly complex, which can sometimes be the case when a developer attempts to add too many features. Newspack Newsletters has managed to hit that Goldilocks zone that should go over well with the average end-user.

Posted on

Using AbortController as an Alternative for Removing Event Listeners

The idea of an “abortable” fetch came to life in 2017 when AbortController was released. That gives us a way to bail on an API request initiated by fetch() — even multiple calls — whenever we want.

Here’s a super simple example using AbortController to cancel a fetch() request:

const controller = new AbortController();
const res = fetch('/', { signal: controller.signal });
controller.abort();
console.log(res); // => Promise(rejected): "DOMException: The user aborted a request"

You can really see its value when used for a modern interface of setTimeout. This way, making a fetch timeout after, say 10 seconds, is pretty straightforward:

function timeout(duration, signal) {
  return new Promise((resolve, reject) => {
    const handle = setTimeout(resolve, duration);
    signal?.addEventListener('abort', e => {
      clearTimeout(handle);
      reject(new Error('aborted'));
    });
  });
}

// Usage
const controller = new AbortController();
const promise = timeout(10000, controller.signal);
controller.abort();
console.log(promise); // => Promise(rejected): "Error: aborted"

But the big news is that addEventListener now accepts an Abort Signal as of Chrome 88. What’s cool about that? It can be used as an alternate of removeEventListener:

const controller = new AbortController();
eventTarget.addEventListener('event-type', handler, { signal: controller.signal });
controller.abort();

What’s even cooler than that? Well, because AbortController is capable of aborting multiple cancelable requests at once, it streamlines the process of removing multiple listeners in one fell swoop. I’ve already found it particularly useful for drag and drop.

Here’s how I would have written a drag and drop script without AbortController, relying two removeEventListener instances to wipe out two different events:

// With removeEventListener
el.addEventListener('mousedown', e => {
  if (e.buttons !== 1) return;

  const onMousemove = e => {
    if (e.buttons !== 1) return;
    /* work */
  }

  const onMouseup = e => {
    if (e.buttons & 1) return;
    window.removeEventListener('mousemove', onMousemove);
    window.removeEventListener('mouseup', onMouseup);
  }

  window.addEventListener('mousemove', onMousemove);
  window.addEventListener('mouseup', onMouseup); // Can’t use `once: true` here because we want to remove the event only when primary button is up
});

With the latest update, addEventListener accepts the signal property as its second argument, allowing us to call abort() once to stop all event listeners when they’re no longer needed:

// With AbortController
el.addEventListener('mousedown', e => {
  if (e.buttons !== 1) return;

  const controller = new AbortController();

  window.addEventListener('mousemove', e => {
    if (e.buttons !== 1) return;
    /* work */
  }, { signal: controller.signal });

  window.addEventListener('mouseup', e => {
    if (e.buttons & 1) return;
    controller.abort();
  }, { signal: controller.signal });
});

Again, Chrome 88 is currently the only place where addEventListener officially accepts an AbortSignal. While other major browsers, including Firefox and Safari, support AbortController, integrating its signal with addEventListener is a no go at the moment… and there are no signals (pun sorta intended) that they plan to work on it. That said, a polyfill is available.

The post Using AbortController as an Alternative for Removing Event Listeners appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.

Posted on

SQLAlchemy Basics

Today we released “SQLAlchemy Basics,” a new course from Treehouse instructor Megan Amendola. The 190 minute Python course will teach you how to: Create a database model, interact with a database using CRUD (create, read, update, and delete), and use...

The post SQLAlchemy Basics appeared first on Treehouse Blog.

Posted on

Transferito: Easy WordPress Transfers & Migrations

Transferito for Easy WordPress Transfers & MigrationsAre you looking to migrate your WordPress website? If so, you’ll love today’s review of a brilliant migration tool and plugin created by Transferito. There are countless reasons why you would want to migrate your website. Perhaps your current host sucks and you’ve had enough of their shenanigans. Perhaps you were developing your site locally […]

The post Transferito: Easy WordPress Transfers & Migrations appeared first on WPExplorer.

Posted on

Beautiful accessibility with Floating Focus

Imagine if your :focus styles animated from element to element as you tab through a site. Like the focus ring up and flew across the page to the next element. The spirit of it is similar to smooth scrolling: it’s easier to understand what is happening when movement accompanies the change¹. Rather than scrolling (or focus change) being an instant jump, movement guides you to the new location.

Guido Bouman thought this would be good for accessibility and looked at some options (e.g. Flying Focus) but ultimately created their own, Floating Focus:

After this exploration we had a good idea of what a good focus state needed. It needs to have a high contrast but not impair readability of the underlying components. It has to guide the user to the next focus target with a form of transition. And it only needs to show for users benefitting from the focus outline.

We’ve covered a similar thing before in 2019 when Maurice Mahan FocusOverlay.

Here’s what I wrote about it back then:

  • It’s a neat effect.
  • I can imagine it being an accessibility win since, while the page will scroll to make sure the next focused element is visible, it doesn’t otherwise help you see where that focus has gone. Movement that directs attention toward the next focused element may help make it more clear.
  • I can imagine it being harmful to accessibility in that it is motion that isn’t usually there and could be surprising and possibly offputting.
  • If it “just works” on all my focusable elements, that’s cool, but I see there are data attributes for controlling the behavior. If I find myself needing to sprinkle behavior control all over my templates to accommodate this specific library, I’d probably be less into it.

In that article, I covered a conditional loading idea for not loading this if prefers-reduced-motion was set to reduce. These days, you might do a conditional ES Modules import.

Don’t take any of this as advice that this movement-based focus stuff is 100% good for accessibility. I don’t feel qualified to make that determination. It is interesting though.

  1. This reminds me of “transitional interfaces” as well. Movement can really help make clear what is happening in a UI.

Direct Link to Article — Permalink

The post Beautiful accessibility with Floating Focus appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.

Posted on

Optimizing Video For Size And Quality

Over the last few years, more and more projects are using video as an integral part of the application. This is a great direction, as videos are more engaging than still photos (videos can double conversion rate and increase time spent on site), and as such, can really draw customers to explore details about products and services. However, it all goes sideways when there are issues related to the video playback.

Video playback issues are directly related to the size and bitrate of the video. A video with large dimensions or a high bitrate will take longer to download and will require a higher speed network to play back smoothly. This leads to longer startup times, and if the network cannot supply the video fast enough, the video will stall during video playback.

There is a solution though! By running basic optimizations of our videos before adding them to our websites, we can prevent these issues from occurring for good — well, most of them. All we really need to do is make the file smaller — in one way or another. So, now the trick is: how do we make the file smaller without reducing quality?

In this article, we’ll walk through the tools and some of the steps you can take to optimize your videos for playback — all of it to avoid stalls and impress your precious customers!

Real-World Data

It’s not uncommon to find websites with extremely large videos — for example, used used as hero background videos. In my research, I was looking into sites found in the December 2020 mobile HTTPArchive, and it wasn’t difficult to spot a good number of sites loading huge video files by default, both on mobile and on desktop.

It’s of course doubtful that you will be able to achieve the same savings that I’ll be showing here, but you will get some useful pointers and tips on things to keep in mind when dealing with videos. In fact, it is very easy to accidentally place extremely large videos on your website if you are not careful, resulting in them being almost unusable for most of your customers.

The Pumpkin Patch Story

Imagine that it’s mid-October, and you’re looking for a pumpkin patch and a corn maze to spend a weekend afternoon with your family. In the comfort of your desktop machine, you search the web for a nearby location and find the perfect one. The website looks lovely, with a beautiful drone 4K video of the fields playing at the top of the page. You pick the URL and send it to yourself and your loved ones so that you together can continue exploring this option on the go.

But when you open the page on your phone, you notice a glitch: the video is desperately trying to play on your phone, but unfortunately fails to do so. The video keeps stalling and restarting over and over, being much more disruptive and annoying than it was on your computer. Eventually you move on, bookmark the URL, and move on with your daily routine.

After a fun muddy day (well, I have recently lived in Seattle and the UK, so pumpkin patches are muddy), you’re back on your computer: perhaps you think yet again about that video and you wonder why it wasn’t playing well on your phone. Well, let’s diagnose what is going on.

You might start by opening DevTools in your browser. Once the page is loaded, we can move to the Network tab, and filter by “media” to see all the video files:

We see that an MP4 file is being downloaded. The file doesn’t come through the network as a standalone file; rather, the streaming service must be breaking up the file into a few segments, so you might see several 206 (partial content) requests for the same file.

Looking at the response headers for this file, we can spot some details:

accept-ranges: bytes
access-control-allow-headers: x-test-header, Origin, X-Requested-With, Content-Type, Accept
access-control-allow-methods: GET, POST, PUT, DELETE, OPTIONS
Content-Length: 87690242
Content-Range: bytes 70025216-157715457/157715458
content-type: video/mp4
date: Fri, 22 Jan 2021 15:27:26 GMT
last-modified: Mon, 24 Jun 2019 05:13:04 GMT
server: Apache

Now, some of these numbers are slightly scare as they are slightly large. In fact, they are often so large that I’ve found myself getting into the habit of adding commas, so I can get an idea of how large the files actually are. In this case, the partial download is 87 MB, and the entire file is 157,715,457 bytes. Yes, that’s right, this video is 157MB, and it (tried) to load on my phone earlier today! No wonder it didn’t succeed.

So What’s Up With This Video?

Let’s dive a little bit deeper. Apparently, the video is way too large to play smoothly on a mobile phone with a lower memory and a slower network. But what do we need to fix it? To figure out what exactly is the problem, we can use FFMPEG, which is open source and free, and proves to be one of the most reliable tools to optimize videos. We could endlessly tweak the configuration in FFMPEG, but let’s just touch on a few important ones in this article.

So, let’s start with the diagnosis tool called FFprobe. FFprobe gathers information from multimedia streams, and provides you with the details about how the video is encoded and how it will play. It’s a part of the FFMPEG package, and actually quite easy to use.

Even better: if your video is online already, there is an online version of ffprobe that we can jump to right away. So, let’s just enter the URL into the form, and get the details about the video in return (e.g. video dimensions, bitrate, and quite a bit of metadata).

When I add the MP4 URL from the pumpkin farm, we immediately see one of the issues. The show_format response from ffprobe returns a summary: apparently, there are 2 streams, and it’s 62s long (which all sounds normal enough to not raise any suspicions). But when we get to the size and bitrate, we immediately see where the video is failing.

As mentioned above, it might be a good idea to get used to adding commas to these large numbers. As it turns out, indeed the drone footage flying over the field is 157MB, and has a bitrate of 20 MB per second! It means that for the video to play seamlessly, the network must be able to stream the video at a rate faster than 20 MBPS, which is exactly why it was stalling on the phone.

What is the ideal playback bitrate?

To avoid stall, we need to stream the video at an appropriate rate. That’s where bitrate becomes important. Bitrate is the playback speed of the video. For the browser to play the video smoothly, the video has to be downloading faster than it plays back — meaning that the video will only play back smoothly if the network speed is over 20 MBPS. When I think of network speeds, I tend to rely on WebPageTest’s traffic profiles:

As we can tell from the overview abouve, the video might play well on the “Native Connection”, and on the ultra-fast optic cable FIOS connection (20 MBPS is exactly the speed required, so hopefully nothing else needs to be downloaded in the background). However, all the other connections have a downlink speed that’s significantly lower than 20 MBPS. If the video is loading at these speeds, the player will attempt to consume the video faster than it can be downloaded, and the video will permanently stall.

The bitrate of your video sets the minimum network speed that your customers can use. In general, the bitrate of your video should be about 80% of the available throughput on the network. So a 20 MBPS video really needs 24 MBPS network throughput to play the video seamlessly. Everyone on a slower connection will have a quite poor experience and is likely to not be able to watch the video at all. More specifically, this means that for us to play smoothly and silky on 4G, the bitrate has to stay below 7.2 MBPS.

Can We Lower This Video’s Bitrate?

Yes! Let’s look at some of the configurations we can use to reduce this video’s bitrate. But first, let’s look at the data we get from FFprobe. One thing that is quite noticeable is the r_frame_rate value, which is the number of frames per second in the video. Its value is 60000/1001. It means that the frame rate for the video is 60 frames per second. However, typical frame rates on the web are 25–30, so the first thing we can do is to re-encode the video with a lower bitrate.

Another thing to keep in mind is Constant Rate Factor. In FFMPEG, the principal quality/size benchmark is the Constant Rate Factor (CRF) compression, with values ranging from 0 (no compression) to 50 (high compression). The default value for CRF in FFMPEG is 23 (if you leave out the CRF parameter, your video is with that value). In my personal experience, values from 23-28 still produce high-quality videos, looking good on the web and greatly reduced in file size.

So let’s start at 30fps and a CRF of 23. The Terminal command will look like this:

ffmpeg -i input.mp4 -vcodec h264 -acodec aac -crf 23 -strict -2 :v fps=fps=30 output.mp4

Voilà! This results in an 81.5 MB video — already a 48% improvement. But the video is still very large, with a 10 MBPS bitrate. If we set CRF to 28, the file drops to 35.4MB, with a bitrate of 4.5 MBPS which is much more likely to play well on a 4G connection.

This is a five-time improvement over the original video. To make this video even more accessible, we can resize the video to make it smaller. That’s something we’ll discuss in the streaming section below.

The Hungry For Pizza Story

Imagine that you’re in Los Angeles, perhaps visiting from abroad and roaming on your phone, and of course thinking about grabbing a slice of pizza. You find a remarkable pizza place on your phone, and decide to head there. You may have noticed a few videos and hero images on the page, but really, every pizza place kind of looks the same, so you didn’t bother to watch the video. You head and grab a slice or two before heading back to your hotel.

That night, you get a text from your carrier that you used a lot more data than you imagined (and definitely way more than you originally planned!). A couple of cabs, and the pizza website — how expensive was the pizza website again?

You pop the pizza website into WebPageTest and check it on a mobile connection:

44 MB of video. Where is it coming from? Even beyond that, when we examine the source and the waterfall in a bit more detail, we can see that there are actually two videos! Fortunately (or unfortunately?), neither managed to be downloaded entirely:

Video 1 downloaded 11.8 MB (of 121 MB total)
Video 2 downloaded 31.1MB (of 139 MB total)

This raises a few concerns and a few questions.

First, why was so much video downloaded when it wasn’t autoplaying? We haven’t managed to click anything just yet, but already used almost 40 MB of data. The answer, as always, lies in the source. Well, “view source”, that is.

<video
  id="u457537-video"
  class="video-js vjs-big-play-centered"
  controls
  preload="auto"
  width="1050"
  height="591"
  poster="assets/home_poster.jpg"
  data-setup='{"fluid": true}'>
  <source src="assets/home_1.mp4" type='video/mp4'>
  <source src="assets/home.webm" type='video/webm'>
  <p class="vjs-no-js">To view this video please enable JavaScript, and consider
    upgrading to a web browser that <a href="http://videojs.com/html5-video-support/"
    target="_blank">supports HTML5 video</a></p>
</video>

Off the bat, we see at least two issues:

  • preload="auto" When we set preload="auto", we are overriding the browser’s default setting, enforcing video download — whether or not your customer has pressed “Play”. The default preload attribute is metadata, and would have resulted in a few 100KB downloaded. Admittedly, it is a much better outcome for site visitors who will never watch this video.
  • Video Order If you have multiple versions of the video (in this case: h264 .mp4 and VP8 .webm encoded videos), the browser will choose the first video it knows how to play. Now, every modern browser supports mp4, while most modern browsers also support webm (95.4% global support, according to CanIUse).

One trick that I like to use is to insert the appropriate video source line with Javascript. That way, if you so choose to not serve video on certain screens, you just have an empty <video> tag — and no video can be downloaded.


    window.onload = addAutoplay();
    var videoLocation  = document.getElementById("hero-video");

    function addAutoplay() {
        if(window.innerWidth > 992){
            videoLocation.setAttribute("autoplay","");
      };
    }

If we now run an ffprobe on these two videos, we’ll discover significant differences in sizes:

Mp4 121.2 MB
Webm 11.8 MB

The webm is 90% smaller, and yet has 0 views, since every browser supports the mp4. These two videos are both 640×360, and 140s long. Running the ffmpeg command from above on the mp4 results in a 12.4 MB video, so it’s likely that developers followed a similar process to compress and encode the .webm variant as well. Perhaps having preload="auto" for 12.5 MB would not be so bad after all.

The second video (drone footage inside the restaurant) is filmed in Full HD (1080p), but similarly gets compressed from 140MB to 35 MB. So, 120s with FFMPEG could reduce the video weight on this page from 160 MB to 57 MB. Flipping the webm/mp4 order would save an additional few MB for 95% of the browsers that can support that format.

What if we wanted to do even better, perhaps make the videos responsive to various sized screens? Well, let’s get even smaller videos — with responsive videos!

The <video> tag doesn’t support media queries to serve different video files to different screens, so we need a different way to provide videos sized for the device screen. The easiest way to achieve that is by using video streaming. This will add some Javascript and other assets for the video player that will be required, but the video savings will definitely make up for this extra data.

We can create video streams with FFMPEG (I have used bash scripts like this in the past), but this requires us to know all the sizes and settings we’d like to use (and as mentioned before, FFMPEG has a lot of settings!).

To make it easier to stream video, there are APIs (e.g. api.video and Mux) where you upload your video, and the tools create video streams and host your video for you. For full disclouse, I do work at the former one, so to simplify my video processing pipeline, I’ll use api.video, to transcode and host my videos. With the upload API, I can upload any video, and the tool will create a streaming version at many different dimensions and bitrates (currently 240p, 360p, 480p, 720p, 1080p and 4K).

The bitrates for the smaller videos are greatly reduced, as the dimensions of the video decrease. This means that the video will require less network capacity on smaller screens and will play on slower networks.

For brevity, we’ll test only the Pumpkin patch video. I’ve received similar results with the drone video (the other pizza video is just 360p, so it does not greatly benefit from smaller sizes).

Note: Please recall that this video is currently a 1080p mp4 video at 60fps, and weighs 157 MB for all visitors.

With some optimizations (CRF 28 and reducing the framerate to 30fps), the video was reduced to 35.7 MB. Using DevTools, we can emulate devices to see how much data is used for video playback of streaming video on different sized screens.

The table below is showing the total amount of traffic used. With HLS video, there is a JavaScript player, CSS, fonts, etc. that add about 1 MB of additional overhead. This is included in the totals below:

Device Video Size (Pixels) Video Size (MB) Bitrate (MBPS)
Moto G4 (Portrait) 240p 3.1 MB 0.35
Moto G4 (Landscape) 360p 7.5 MB 0.800
Iphone 7/7/8 (Landscape) 480p 12.1 MB 1.40
Ipad (Landscape) 720p 21.2 MB 2.6
Ipad Pro (Landscape) 1080p 39.4 MB 4.4

At 1080p, there is about 4MB additional assets downloaded for the stream, but for every other size, there are significant data savings with no loss in video quality. Not only will the video be sized properly for the devices, but it is much less likely to stall, as the bitrate is reduced for the devices most likely to be on slower mobile connections.

Video streaming takes care of framerate, video size and quality concerns — ensuring fast playback on any size screen, and any speed network.

Another advantage to video streaming: if the network is slow (or suddenly becomes slower), the player can adjust the video being shown, and play a lower quality version of the video — ensuring playback on the device — even in poor network conditions. (You can test the different videos with StreamOrNot, a little open source project that I've released a while back.

Now, isn’t it a little bit too much overhead? Couldn’t we do the same (just much faster) with YouTube or Vimeo? We surely could, but then we wouldn’t be able to completely remove the branding or advertising from the video, not to mention the overhead of scripts loaded within the video player iframe. Plus, sometimes you might want to use the video as a background video on your product page, and avoid any kind of external branding at all.

Conclusion

We do not deploy images from our camera directly to the web, but we compress and resize them to balance quality and web performance. The same should be done for video files as well. Smaller videos start playing faster and stall less often, improving the user experience of the website.

In this article, we’ve walked through a few simple steps to optimize our videos, e.g. by lowering the quality and its framerate. We also looked at how video streaming can allow us to build a more responsive video experience for the web — automatically serving videos that are properly sized for the screen of the device.

Thanks for reading, and if you’d like to learn more, you may want to read more on video best practices here, on Smashing Magazine, and on my blog:

Posted on

Improve your Campaign with Gift Card Emails: Best Practices and Examples

This post is originally published on Designmodo: Improve your Campaign with Gift Card Emails: Best Practices and Examples

Gift card emails are one of the most underused marketing avenues. People like discounts, special offers, and presents. Reciprocity goes a long way; even the smallest bonus can easily win over clients and compel them to visit your website. This …

For more information please contact Designmodo

Posted on

How to Send Confirmation Emails after WordPress Form Submission

Are you looking to send confirmation emails after a user submits a form on your website?

Confirmation emails can be a great way to let users know that you received their message, and that you’ll be in touch soon.

In this tutorial, we’ll show you how to send confirmation emails to your users after a WordPress form submission (step by step).

How to send confirmation emails after WordPress form submission

Why Set Up Automated Confirmation Emails in WordPress?

Confirmation emails are sent when a user fills out a contact form or another form on your WordPress site.

Sending an automated confirmation email is a nice gesture. Plus, it lets your users know you’ve received their information. This also lets your users double-check their entries to see if any errors were made.

There are a lot of good reasons to set up WordPress form confirmation emails:

  • Allows you to open a line of communication with your subscribers
  • Can provide valuable follow-up information, like links and tutorials
  • Let’s you confirm the email is a real email
  • Can confirm email newsletter subscription and start an autoresponder sequence
  • If you’re selling something, this gives you a chance to offer an upsell or cross-sell
  • It’s great for your email deliverability

The best part is that setting up a WordPress form submit email is easy to do.

Setting Up Confirmation Emails after WordPress Form Submission

For this tutorial, we’ll be using the WPForms plugin to send a WordPress confirmation email. It is the best contact form plugin for WordPress used by over 4 million websites.

If you’re on a budget, you can use the free version called WPForms Lite, which allows you to set up email confirmations.

However, the Pro version will give you access to even more features like conditional logic forms, additional templates, order forms, integration with email marketing tools, and much more.

The first thing you’ll need to do is install and activate the WPForms plugin. For more details on installing a plugin, see our step by step guide on how to install a WordPress plugin.

Once you’ve installed and activated the form builder plugin, you’ll have a new WPForms tab on the left-hand side of your WordPress dashboard.

WPForms plugin install menu

If you don’t already have a form on your site, then you’ll need to create one. We have a detailed tutorial on how to create a WordPress contact form that you can use as a guide to get started.

Next, it’s time to set up a WordPress confirmation email. This email will send out automatically and lets your users know their form submission was successfully received.

To do this, head over to WPForms » Settings » Notifications.

You’ll notice that email notifications are already on.

If you don’t want to turn on notifications, then you can toggle this option off.

Leave notifications toggle on

If you want to send an automated confirmation email, then you’ll need to leave this setting turned on.

Next, we’re going to choose who we want our emails to send to by customizing the form fields.

The default setting will use the admin email Smart Tag {admin_email}. This is the email you used to set up up your WordPress blog. This will deliver all form submissions directly to your inbox.

To make sure that form responses also get delivered to your users, you’ll need to add new email address to the email field. This is similar to how blind carbon copy (BCC) works in standard emails.

To do this, simply click on the ‘Show Smart Tags’ option that’s directly to the right of the ‘Send to Email Address’ field.

Send to email address field

You need to select ‘Email’ from the drop-down menu.

This tags your user’s email address that they enter into your WordPress form. The plugin will use this email address to send the confirmation email.

Note, that you’ll need a comma between the two Smart Tags.

Send to user and admin email address

Next, it’s time to change the subject line of your email.

The default email subject line is “New Entry”. You’ll want to change this to something that makes sense for your user.

Default email subject line

For example, if you have a simple contact form, you can change the subject line to something like, “Thanks for Reaching Out!”. Or, if it’s an order confirmation email, “Thank You for Your Order!”.

To change it, delete the existing text that’s in the box beneath ‘Email Subject’ and add your new subject line.

Change email subject line

Now, you’re ready to change the email from name.

It makes sense to use your company or website name here.

To do this simply change the text in the ‘From Name’ box.

Change email from name

Next, you have the ‘From Email’ field.

You can leave this as is, and the email will be the same as your admin email.

Admin from email

After that, you’ll want to change the ‘Reply-To’ field, so your users can respond to your automated email.

If you leave this blank, then the email will be the same as the default admin email.

Reply to email

It’s not necessary to change it, but there are some situations where you’ll want the Reply-To email to be different than your standard email address.

For example, if you have a photography website, and you have a form for new clients to request a quote, then you may want these emails to go to a different email address.

The final step is customizing your email message.

In the ‘Message’ box you can write out the email that will send to everyone who submits the form. You can also change the appearance of your plain text emails by adding HTML.

Custom email message

You can also include the {all_fields} Smart Tag which will add on the user-submitted information to the email.

Custom email message with all fields

Congratulations, you’ve successfully installed and set up WPForms, added a form to your site, and set up an automated email confirmation message.

Troubleshooting WordPress not Sending Email Issue

One big issue that a lot of WordPress users experience is where your website will stop sending your WordPress emails.

WordPress uses PHP to send emails, which can be falsely flagged as spam. If this happens to your emails, then they will never reach your user’s inbox, or they’ll end up in the spam folder.

This is why we recommend everyone use SMTP for sending emails in WordPress. An SMTP plugin adds another level of verification and sends emails via an official mail server.

We recommend using WP Mail SMTP. It perfectly integrates with WPForms and is the best SMTP WordPress plugin.

We hoped this article helped you learn how to send confirmation emails after a WordPress form submission. You may also want to see our guide on creating a contact form with multiple recipients, and our expert pick on 24 must-have WordPress plugins for business websites.

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 How to Send Confirmation Emails after WordPress Form Submission appeared first on WPBeginner.

Posted on

Things To Expect From A Smashing Workshop: Form Design Masterclass

It took me around six months on and off to write the content for the workshop. After a lot of deliberation, I decided to structure it like I do in my book, Form Design Patterns.

It was a 4-day workshop split into two 45-minute segments, with 15-minute breaks followed by a 30-minute Q&A with optional homework between days. Each day we set out to solve one big problem. This provided a way to approach the problem like we do in real life: by analyzing and discussing the options before arriving at a good solution.

Overall, it was a fun experience. I learned a lot and had a great time teaching and chatting with everyone. I’m already looking forward to the next one which is tentatively planned for late 2021.

Some Of The Highlights Of Each Day

Here’s a quick rundown of each day including some of the highlights.

Day 1: Nailing The Basics Of Form Design

On the first day, we designed a simple registration form from scratch. This provided a perfect way to nail the basics of form design. It covered things like label positioning, form styling and input types. At the end of day 1, we had ourselves a registration form that covered the basics and made the form as simple as possible for users.

My highlight of this session was the question protocol exercise. Instead of focusing on how to artificially save space on forms (by using things like float labels, tooltips, left-aligned labels and placeholder text), we used a spreadsheet to help know why every question is being asked and the best way to elicit the answer.

For our registration form, this meant a thorough analysis of asking for someone’s name, email address and password. And by the end of the exercise we had halved the number of form fields and had clear justification for the ones that remained.

Day 2: Form Validation And Writing Good Error Messages

On the second day, we took our well-designed registration form and looked at how to help users recover from errors in two ways:

  1. We decided when to validate forms and how to display error messages;
  2. We learnt how to write clear, concise, consistent and specific error messages that help users get back on track quickly.

My highlight of this session was the exercise to redesign the error messages on Smashing Magazine’s very own membership sign up form.

Sophy Colbert, a content designer who attended the workshop, volunteered to share her new error messages explaining her rationale for each one.

Both the messages and the rationale were superb, and I think the group got a lot out of it as they could get an insight into Sophy’s content designer mindset.

Day 3: Redesigning A Real World Checkout Form

On day 3, we redesigned the ASOS checkout flow from scratch. This included guest checkout (first time experience) and checking out as someone with an account (repeat-use experience). We covered a lot of ground such as whether to use tabs, accordions or radio buttons. And we also looked at single page checkouts versus multi-page checkouts.

My highlight of this session was that the process of redesigning several interactions, exposed new content design and service design challenges. For example, we converted the tabs that ask the user to specify whether they have an account or not:

And we redesigned them into a form with radio buttons:

And this exposed the problem that in real life, choices are rarely binary. So I asked the group what the missing option was and they rightly said: ‘What if the user can’t remember?’

So even though we originally looked at this primarily as an interaction design problem, it became an issue of content and service design.

All of these problems nicely encapsulated one of the form UX rules: ‘Make friends with other departments’. As designers, we have to work effectively with stakeholders across the organisation to make sure we avoid as much complexity as possible. And this again is where the question protocol really shines.

Day 4: Using Shorthand Syntax And Designing Long And Complex Forms

Day 4 was split into two parts which I’ll discuss in reverse order.

In the second part, we looked at various patterns that help users fill out long and complex forms — the kind of forms that take days, weeks or even months to complete. I was really looking forward to running this because the design challenges around this are interesting and not well trodden.

In the first part, we redesigned Smashing Magazine’s registration form using shorthand syntax.

My highlight of this session was that Vitaly, Mr. Smashing Magazine himself, came along to be our business stakeholder. The group asked him questions to work out why the form was designed the way it was and asking why certain questions were asked.

Here are a few examples:

  • Sophy O asked why the country field is being asked for. Vitaly said that it depends on what the user is doing. If the user is buying a book, we need to know where it’s going. And the taxes on the book are based on the destination country. This resulted in either removing the field and asking for this information when someone buys the book — or just being clearer in hint text about why we’re asking for this information.
  • Milos Lazarevic questioned the need for the ‘Do you like cats?’ checkbox. And Dana Cottreau and Jaclyn Ziegler enjoyed the playfulness of the checkbox. But I would weigh up the joy it brings some people against the risk of alienating people who are, for example, less digitally savvy or are simply in a rush to access the content.
  • Emma Stotz questioned the use of live validation given all the usability issues that pop up around that. And Vitaly was keen to explore instantly validating the fields on submit instead.

My Overall Impression

For me, the workshop went very well overall and I was chuffed with the way things went and the feedback I received from the attendees. Everyone was so friendly, and tolerant of a couple of technical difficulties I had on the first day (thanks again, everyone!). Running the workshop remotely over Zoom has its problems (we won’t talk about how I accidentally left the meeting in a panic by accident on day 1), but actually I found the remote aspect useful on the whole.

For example, all being connected to Zoom, meant it was seamless for attendees to ask questions while sharing their screen to bring the problems to life.

I also really enjoyed meeting people across the world, something that would have been difficult with in-person workshops I think. Also, during the break, I got to quickly dash to put my kids to bed, so I imagine that also worked well for the attendees, too.

But there’s one thing I wish I knew earlier. I was worried, that with such a large group of people (81 to be exact), letting people talk freely would end up in a chaos. As a result, on day 1, I read out and answered group's questions from the shared Google Doc during the Q&A. This meant that other people’s voices weren’t heard and there was more of a barrier between me and the group.

This is something I rectified for day 2 and it really made a difference. It was nice to hear people’s voices and thoughts in their own words and it created more of an open dialogue where other people started to answer other people’s questions which I loved.

I remember Alex Price jumping in once to talk about his experience in dealing with a complicated form that needed to be completed by different people.

What I’ll Change For Next Time

While my overall impression of the workshop was very positive, there were some things I’d look to improve for next time.

1. Show The Basics, Not Learn The Basics

Day 1 covered a lot of the basics before going into greater detail on the following days, but it bothered me a bit to teach some of these things as I thought many attendees knew a lot of this stuff already. So next time I'd like to acknowledge that some people have come with a lot of knowledge and set the scene as ‘this is how I teach the basics’ as opposed to ‘this is how to learn the basics’ — thanks to Caroline Jarrett for this tip.

Also, I’ll probably ask the group if there’s any form design approach that they’ve struggled to convince teammates about as that’s certainly something I’ve struggled with before.

2. Split People Up In Bigger Groups

One of the exercises involved people splitting up into groups of 2 using the Zoom breakout rooms, but because people came to this workshop from all over the world, some of the people listening were not able to take part in the exercises.

For example, some people really needed to take a lunch break because their time zone was ahead of mine. This meant one or two people who did want to participate found themselves in a group on their own. Next time, I’d put people into groups of say 4 and make sure the exercises still work.

3. Add More Group Exercises

Despite the issue I just mentioned, the group exercises worked well. People enjoyed them, and it sparked some really interesting ideas from the participants. Some people messaged me after saying that they wished there were more group exercises, so I’ll aim to do just that.

A Poster Of All The Rules

As we moved through the workshop, we ticked off over 40 rules and principles of form design which brought a nice additional structure to the sessions.

A few of the attendees asked me if I had a poster of all the rules and I didn’t — so now I’ve made one.

Form Design Masterclass Poster (Plain Text Version)

For your convience, here’s a simple text version of the poster — feel free to adjust it and customize it to your needs.

Day 1: Nailing The Basics Of Form Design

  1. Make forms work well for everyone
  2. Every form control needs a label
  3. Only add hint text if it adds value
  4. Don’t use placeholder text
  5. Put hint text between the label and the input
  6. Put labels above the input
  7. Don’t use tooltips for hint text
  8. Know why you’re asking every question*
  9. Give text boxes a distinct border
  10. Position labels to be associated with the input
  11. Give inputs a clear focus state
  12. Use the right input type for the job
  13. Align the button to the left edge of the inputs
  14. Label the button with exactly what it does
  15. Make sure your form is actually necessary
  16. Avoid putting two forms on one page
  17. Use multiple inputs as a last resort
  18. Don’t use input masks

Day 2: Validating Forms And Writing Good Error Messages

  1. Don’t disable the submit button
  2. Don’t trigger errors when the user is answering
  3. Only validate when the user submits
  4. Put errors above the input
  5. Forgive trivial mistakes
  6. Track your errors
  7. Give users clear, concise and specific errors

Day 3: Redesigning A Real Checkout Flow

  1. Postpone questions you could ask later
  2. Use form controls inside forms
  3. Start without a progress bar*
  4. Begin prototyping with one thing per page
  5. Ask questions in a sensible order
  6. Use select boxes as a last resort
  7. Use sensible defaults
  8. Provide help in context of the question
  9. Avoid optional fields wherever possible
  10. Don’t hide the submit button
  11. Make the field width match the expected value
  12. Let users check their answers
  13. Put the back link at the top left of the form
  14. Make friends with other departments

Day 4: Using Shorthand And Designing Long And Complex Forms

  1. Break down huge forms into small tasks
  2. Tell users what they need before they start
  3. Help users check their eligibility

* This principle is from the GOV.UK Service Manual
** This principle is from the NHS Service Manual.

Thanks again to everyone who came for all their contributions. I’m looking forward to the next one.

Thanks to Caroline Jarrett for not only reviewing every detail of my workshop but for also editing this article.

Editor’s Note: You can also check a detailed overview of How We Run Smashing Online Workshops, and if you are interested in attending one, we have plenty of online workshops on front-end & UX coming up soon. We’d love to see you there!