🏗 Engaging Ecommerce with the Visual Web

Everybody. Images, video and media are part of our everyday web experience. How can we take advantage of it from an e-commerce perspective and make sure that we're delivering the best experience that we can? So who am I? I'm Colby Fayock. I'm the one hugging Bebe and Kyle Renner over there. I work with the dev community as a developer experience engineer for Cloudinary. You can find me pretty much anywhere on the web by just googling my name as I'm the only one in the world. So we're going to start off with the king of e-commerce, Amazon. It's the first thing we see when we load this page. It's covered in media. It's a good way to showcase available products. So it makes a lot of sense. This is the landing page for their fashion store, which likely looks like the a lot of top level landing pages that you typically see. We have large images that's intended to showcase a bunch of the available products in the store. As we scroll down, we have the ability to shop specific categories with images that represent each and every one of those categories. Once we dive in, we start to see a grid of images like here on the product listing page. The easiest way to see a large amount of products is to put them in a list. So we put them in a grid so that we can scroll through all of them. Once we're on the product detail pages, we want to get a closer look and be able to choose the options for our product. Ideally, this means having several different photos with the different angles of those products. Now not to pick on Amazon here, but there's really nothing innovative going on here. Now I'm sure they AB test every minute detail of that page, but so that we're making sure that it doesn't hurt conversion, which we'll get to later. But it's not – it's very practical and functional. So how can we actually use media to take our ecommerce experiences up another level? Here we have Star Cadet, where I'm a big fan of their final space merch. They take advantage of gifs to display video like category and product images. It's a bit more of a creative approach, taking a typically very static medium and making it very exciting. Glasses USA allows potential customers to get a first hand look at what glasses would actually look like on somebody's face. Buying glasses is really hard and you want to make sure that you're feeling very confident in the glasses that you're going to buy. And traditionally you'll have to kind of hope for the best and see what the return policy looks like when you're trying to find a new pair. But this gets us a step closer to actually being able to see what it looks like instead of going to a store. Or better yet, Eyebuydirect actually gives you a real time feed with your virtual pair of glasses moving around on you as you're looking around in the camera so you can actually see what it's like. Like you're in a mirror inside of the store. As far as the product page goes, you still need to have the ability to showcase your product. People need to be able to buy something and it needs to be very clear what they're buying. So you don't want to be over creative, but like Nike here, we can embed video as part of that experience so that people have a better idea of what the fit of those products are going to look like. Now, as creative as some of that is, it's all fitting into that traditional medium. The Web is changing. So what does the future of ecommerce actually look like? Nike recently acquired Artifact Studios, a team who creates shoes and collectibles ready for the metaverse. It's similar to the collectible game that Nike has always been a part of, but it's now an investment into the digital world. Now, Nike also purchased or created a new store on Roblox called NikeLand, where it gives people the ability to actually be able to interact with Nike products. Like here, we can see that it's connecting to a digital version of Nike HQ, where they're going to have games and sports and other community oriented features. But they also have a showroom that lets you interact and check out special Nike products, giving you the ability to check out and deck out your Roblox with exclusive Nike gear. And while we have a lot of time before this kind of thing actually becomes super mainstream within our communities, we're already starting to see really creative solutions. There's a lot of change happening and it's happening really fast. So let's talk about some of the more practical ways that we can look at our media today. And while the metaverse is still coming at us really fast, we likely need to maintain an effective Web 2.0. So while for some of you this might seem like an easy one, it's super important to make sure that you're providing large, clear images and video to showcase your products. It's especially helpful to make sure that you have more than just a single wide shot of your product. People care deeply about the products that they're purchasing, so be able to have a clear up close look, helps them to be able to make sure they're getting the quality that they're getting. And we can't have e commerce reference shots without Apple. Apple does a really great job at showcasing detailed imagery very large within the in the web page. But that's not always enough to make sure that the features of that are actually very clear. So they make the extra point to highlight those features. Diagraming different points for the products, such as their potentially confusing use of three different lenses on an individual iPhone where they point out the difference differences between each and every one of those lenses. And while it's important to have those big clear images, which Wyze here does a really great job at doing, lifestyle photos are a way to place your product in people's everyday lives. Whether the potential customer knows it or not, this helps them to try to imagine how it's going to fit into their own life. So how could these Wyze headphones actually help you out? Well, you're enjoying some music in bed, or maybe they're so comfortable that you might even forget that you're wearing them. Like the title that they have on the screen here. I think the company that I used to work for who sold really cool stuff and sold things from all your favorite fandoms, took this a step further. Where not only did they show the products in real life, in a real life scenario, but they showed it with a fun twist. So you can fully imagine yourself as Darth Vader baking with your R2-D2 measuring cups, but it makes a difference going this extra step as you're helping to make a stronger connection to your audience. Upgrading media from static images, we have video, which can help drive more context between the more visuals in a short period of time, along with audio to help provide more verbal descriptions. But we can do better than a video that's embedded in a simple pop up like this. Like my examples earlier, we can use video in ways that add to the experience without actually taking away from the existing one. Under Armor instantly sets the tone with the video on their home page. Their audience is full of athletes, so this takes them right into the gym, so it gets people hyped up, ready to interact with their products. We can also make our video shoppable, whereas the video plays like anything else, we can make it interactive, allowing visitors to actually check out what that product is without having to scavenge through the site like we've all been there, where we go to the very last page and that's where we finally find the product that was in the video. So enough looking at a bunch of pictures, we can see how we can actually make this happen from a developer perspective. So in reality, some of these answers may not include technical solutions, like in order to show large, clear images, we first need to have those large, clear images, but make sure that you're actually showing those large, clear images and make sure that you're not over compressing them or showing really tiny thumbnails when you could be showing the huge pictures right inside of the page. People need to be able to have a clear look at what that product is. So take advantage of those big, beautiful images. But you can even take that a step further where you can allow people to zoom in on those images right as they're on the page, avoiding unnecessary steps to take them off that page. There are a lot of great zoom based libraries that we can do to achieve this, such as React Inner Image Zoom, which gives us a similar experience to what we saw on the unique page. Or there's a ton of other traditional modal zoom in libraries, but they don't always give us the experience that we would expect from E Commerce Store. You could also try to replicate this kind of thing on your own, where, for example, once you're actually zoomed in, when you have that enabled, we can dynamically grab the cursor position of the user's browser. So that way we can update the image position relative to its container. And while this is a really simple example and not completely the full solution, it shows us how we can start to achieve that basic UX. Providing point based details is both a little bit trickier and a little bit easier, where adding some text overlaid onto an image isn't that bad. But each of those lines are pointing precisely to the lens, exactly where they want it to. And while we can do that pretty easily for one viewport size. Realistically, most of us are trying to build responsive experiences. And again, this is a simple and incomplete example and representation, but we can start to see how we can make this work using the resize listener and setting the coordinates based on that original width and height, where then we can use percentages to figure out where that position is going to be no matter the browser size, and we can dynamically update the positions. Lifestyle images is also probably one of those things where unless you're also the photographer, you're going to need creative support in the actual imagery to achieve that. But we can still see how we can achieve a nice little banner experience like this without having to embed the image, the text right inside of the image itself by including the text on the page as opposed to inside of the image. We're helping both search engines read the text and accessibility. And also it's likely easier to make this responsive instead of trying to deal with images and changing the images out. We could instead make the text bigger and smaller, depending on the viewport size. Now, as far as video is concerned, I would imagine that you're probably thinking that we could probably just slap a gif in here and yeah, you could, but gifs are going to be huge, especially if you want them to be huge and high quality gifs. We can instead take advantage of actual video on the page, which, depending on the use case is going to yield a lot better results for file size. Using the HTML video element, we can set it up so that we can hide the player UI and the controls and that way we can set it to automatically and play and loop. And it kind of just looks like a gif when it's actually in practice just to make sure that you're testing your app and your media to make sure that it's yielding the best results for your app. Now, when you're leveling up your video and making it shoppable, that starts to get a little bit more complex, where you're likely using a custom player for this kind of thing. But again, we can start to think about how we could use this kind of thing, where maybe we are using a custom video player and we define our products and when we define them, we define each of the clickable aspects of it, such as where in that video it's going to occur and what that link is actually going to be and where in the timestamp it's going to be. But we can see how these pieces start to connect together. But ultimately, we're trying to create a more interactive and engaging experience for our customers with this media. Now we have a lot of awesome tools at our disposal, but it's not always as easy as dumping a bunch of images and video on a page without considering the impact of how these actually are deployed. We're going to be putting a lot of unnecessary bandwidth and load on people's devices where severely slowing down their page loads is going to hurt their experiences. Or worse, killing your store's conversion rate. Now, if you're not familiar, conversion rate is the percentage of your traffic that actually buys something. There are a ton of studies of how website speed directly correlates to conversion rate. Ebay, for instance, found that a half percent increase in their conversion rate with 100 millisecond low time improvement. Now, that might not sound like a lot, but eBay is worth over $10 Billion. So just as an example, 0.5% of 1 billion is 5 million. So that's going to add up really quickly. That means that while all of your video and imagery might be building a good user experience in terms of the visual aspects of it, that media is going to take up the vast majority of the size of the page. And if we don't pay attention to how we're delivering it, we're going to blow up pages and destroy our conversion rates. So what can we do to help optimize our delivery? Let's start to take a look at some of our examples of images. To start off, while JPEG is definitely a great option, there are more modern formats that can help us out to deliver high quality images at reduced sizes. WEBP and AVIF are two of those great options and depending on the image, can just drastically reduce the size of it. And we can also compress our images to the point where it's not going to be impacting the visual quality, what people can actually see. Maybe it won't matter for this tiny little thumbnail, but we've learned that we want to display these images really big and nice inside of our apps, right? So we want to make sure that we can let Tech actually decide how it's going to handle these optimizations and figure out what it can do without making that visual difference. We're not over optimizing, and we're also not wasting precious kilobytes in downloads. Now, if you're working with high quality imagery, your source files might be huge. If you resize them as is, your browser is going to just resize them down anyway. So you're also wasting bandwidth and the browser's resources. So instead we can resize the images to the sizes that we need. And we don't need to try to crunch a whole bunch of images to make them super small. You'll end up having super blurry or pixelated images. Instead, we can have modern image delivery where we can get the exact sizes that we need on the fly and we can take advantage of that to build that great experience. Now bringing this all together, we have some pretty amazing results, using modern formats and letting Tech handle and automatically optimize our images and serving up the image in sizes that make sense for our web app. We were able to slash this particular example down from 652 kilobytes to 76.6. Now, this was just an image that I grabbed from Unsplash as an example, but we can imagine how non-technical people are adding images like this directly in our CMS. So how can we do this and bring this all together like this and automatically optimize it all without sacrificing quality? Now these are all great options, but how can we make sure that we are doing everything we can inside of our web apps? Luckily, there's a lot of tools that we can use to help us out from inspecting our sites to helping us build our sites. You may have already heard of Web dot dev, but it's a site from Google with a ton of awesome educational resources for developers where on top of that they have a tool that we can use to help measure with things like SEO accessibility and what I'm talking about today, performance. While this might be a small sample of the results, we can start to see what they're inspecting the meeting on the page and seeing if we're conforming to the best practices. If they're not, they let us know what's wrong. Like here, we're not taking advantage of modern image formats and we're not. And we're serving them way too big. Then we actually need for the page. A similar tool that's specifically for media is Cloud Areas Website Image Analysis tool, where like web devs measure tool, it's going to review your site and check out how you're actually serving your media. It will show you exactly what media is costing your precious resources and what opportunities you actually have to fix it. Like here, we can see the benefits from using our images and our modern formats, just like some of my examples that we saw earlier. Now for actually trying to implement some of these tips. We have responsive breakpoint generator where this was a product that was created by media experts that was sponsored by Cloudinary. But not only does it generate code snippets that you can use in practice, it serves as an educational resource about how responsive images actually work. So enough looking at a bunch of pictures. See what I did there? I think I already made that joke, actually. But let's actually dive into some real code and see how we can actually make this work. Now we're going to check out some benefits of real world image optimization. It's pretty common for user content or media managed by non technical people, as I mentioned, to upload these full scale images of whatever they're trying to sell in their store or generally what they're trying to add in the page. Now we can safeguard this by automating all of our image optimization for our media and video images and videos. So how can we use Cloudinary as a WordPress plugin to take advantage of this? So I'm going to share change my screen share here. Okay. So we're going to start off with this application. It's a next class application and I'm going to spin it up to get my local development server. But all we're doing right here is we started off a project that I used from a starter where I have an ecommerce store. But really all we want to pay attention to are the images that are getting loaded. So if I open up my network requests and I go to the network tab and I look at the images and refresh the page, we can start to see all these images that I'm actually using on the page, and for now they're just a bunch of images of the products, and in this case, they're a bunch of fun trading cards. But we can see that we have all these images. They're all type jpeg. We can see the size of all of those images. We can also see the time that it takes to download each and every one of those images. And finally, we have 4.6 megabytes that's being transferred from all those images. Now to see what this looks like, I'm currently using next year to build this application where I used a starter that easily spins up a Nexus WordPress application where we can head over to my WordPress instance and see if we can kind of poke around and see what's in here. And the more important thing and more interesting thing is we have each and every one of these products as custom post types where if we start to look inside, we can see that once it loads we're going to be able to see where I actually load in that image on the page and we can see that that's just getting put into the WordPress instance where it's getting loaded and grabbing it, passing it into our GraphQL API, where I can ultimately take that and load that into the page. Now let's actually check out that GraphQL API where I can open up my IDE and we can start to use the query composer where let's find all of our products. And we can start to look at all the edges and the nodes. And what I want to look at are the featured images. So I find the featured image, the node, and ultimately I want to look at the source URL because what we're going to do is we're going to automatically optimize all these images and we're going to say instead of serving it from WordPress, which we're currently serving them from, we want to serve them from cloud areas so we can take advantage of our image optimization. So if I open this up in a new tab, we can see that it's just simply serving it from my WP engine source. Now to make this a little bit easier, I set up a few different instances of environments for WordPress where particularly I set up a staging environment where I already created and added this plugin. So once this blows, we're going to be able to open it up in a new WordPress instance. So we have my staging environment. I'm going to open that up in a new tab. Where we can see that we have our plug ins. On the plugins page and I already have this cloud plugin activated, so let's actually see what happens when we move over to this plugin. And once we go through that, I'll show you how we can actually make this happen ourselves. So inside of my env file I have my WordPress GraphQL on point, where the top one is going to be simply hyper browse that WP engine where my second one is that staging environment. So I'm going to go ahead and switch that unity. I'm going to cancel out my server and I'm going to restart it. And I'm going to actually take a screenshot of the network panel here. If I press the right keys so that we can actually see, well, it already reloaded because of next day is hot reload but we could see that now we're serving Ava for all of our files. And if you remember before, would you probably don't which I'll show you again in a second so we can see. The difference is we see that the file sizes are drastically reduced and where we used to have second loading times, we're now having millisecond loading times. Now I'm going to take a screenshot of this since we're going to go back and check out the version prior to the loop. That was the wrong link. But we can see we're going to be able to compare our staging environment that has that Cloudinary plug in to our original environment that does not. So I'm going to cancel that back out and go back. And I'm sure my NextJs hot reload is going to kick in here. I can already see it refreshing. We can already see our images starting to trickle in. Now I'm on hotel wi fi, so the results of the timing is probably not going to be the most consistent, consistent thing in the world. But let's take a screenshot once that fully loads in. Where now I'm going to set this up once it uploads. And I can start to see that this is the after results where we have the Cloudinary plugin enabled, where I'm getting all these images that are automatically being optimized by Cloudinary that are being returned as type AVIF. Now, if I go into my other tab, we can see where it was a JPEG. We can see there's a big difference in those file sizes. And the only thing I did, I literally just installed that plug in where the original was being served as the original file type of JPEG directly from WordPress, moving it over to Cloudinary. It's now being served as a modern format, drastically reducing, reducing that size and also reducing the time it takes to download that. So let's see how we can actually install this plug in in practice. Now to do that, I have yet another staging environment where I have this dev environment where once it loads I'm going to open up my WP admin. And this is going to be very similar to the prod environment where it's literally just a clone. So what I'm going to do is I'm going to create my other variable here and I'm going to grab the URL so we can see what this looks like as we're starting to load it. So I'm going to replace that URL for my GraphQL endpoint. And inside of the dashboard, we're going to head over to the plug ins and we can see that we don't have a cloud or any plug in. Now, it looks like I need to update a few of these, but importantly, we don't have Cloudinary. So when we load our application for NextJS and try to reload it, we're going to have those unoptimized images. But what we can do is head over to adnew. Where we're going to search for our plugin of Cloudinary. Where I can go ahead and install it. I can activate it. And we can see it immediately available as an active plug in. And we have our Cloudinary tab right in the sidebar. So now if I click that. We're going to be able to see that we have this sign up process where if I already have an account, which I do, I'm going to go ahead and click Next and we're going to be able to grab this API key, which I apparently just showed you there, so I'm just going to plop that in and I'm going to click next. So I'm going to leave all these as default where you can click the lock to make the changes here. But we're going to use the recommended settings from our Cloudinary for from the cloud and WordPress plugin as what it's going to do is it's going to automatically optimize all of our media, it's going to go through the themes and plug in and the core and do the same thing. And it's going to activate some additional features like lazy loading and responsive breakpoints that are just going to keep improving how we're serving the media on our pages. So I'm going to click next. And what it's going to do is in the background, it's going to start to set it up where we can see. Now we have it all set up. Now in the background. There's one more thing that Cloudinary needs to do and it's sync your data. So this is going to take a little bit, which is why I created those different environments to show how it works. But in the background and we can refresh the page to see that it's going to immediately start doing this where it's going to go through and it's going to take all of our existing media inside of our WordPress instance, and it's going to go through, upload each and every one of those media items to our cloud and our account is going to sync that down into our WordPress plugin so that we have an idea of what images are actually being served directly from Cloudinary. Now, as time goes by, we're going to see this 0% turn into 100% where we're going to be able to see that we are serving all of our media items from Cloudinary. Now, because this is going to take a little bit of time, I'm just going to go ahead and go back to that dev environment like we saw before, where we can see that in practice. We reload this application. And we see that we have that AVIF format. Now, a thing that's even more interesting than that is if you're familiar with Safari or generally image formats, what's going to happen is it's only going to serve these modern formats if the browser can support it. So AVIF, for instance, isn't supported with Safari. So if I go to this web page. My local NextJS application. And it's giving me an error. So that's not going to work. I don't know why. Oh, I can exit out of that. So if I inspect the page and I go to my network panel and go to my images and refresh the page, we can see that these are actually being served as WebP. The reason is, is because Cloudinary is able to detect that Safari isn't going to be able to support my data files. So instead, it supports the most modern format that it can or really it's going to serve whatever it thinks it's going to be the best bet for that particular browser and, in this case for Safari, is going to be WebP, but because Chrome supports those files and it knows that that's going to be the best bet for Chrome, it's going to serve the above files for that. But ultimately, because we were able to easily use that plug in, it was able to optimize all of our media automatically, and we were able to immediately see those performance benefits, not only in a WordPress environment by doing so headlessly where we're querying for those images with WP GraphQL inside of a NextJS application. All right. So I'm going to switch back to my slides. All right. So just to quickly recap, we saw how we were able to easily optimize all of our media and we were able to see how it is actually impacting our page load and where we can actually help deliver better experiences and faster experiences for our visitors. We pay more attention to our media. Not only are we going to be able to responsibly build great experiences for the Web, we'll be able to help ourselves by providing the best conversion opportunity we can. Now, speaking of e commerce, if you want to learn more about building your own online store, you can check out my course E-com Product Management and storefront over on egghead.io, where I'll walk you through building a new online store with NextJS, Snipcart and GraphCMS. I'll include the link on my talk notes, but you can also again head over to egghead.io to find that course. And that's it. If you want to learn more or chat about the talk. You can find me everywhere at Colby Fayock, and I'll tweet out some of the links you've seen here today. Thanks. You run a successful business through your e-commerce platform. Sales are at an all time high. Costs are going down and all your projection charts are moving up into the right. One morning you wake up and log into your science analytics platform to check on current sales and see that nothing is sold recently. You type in your URL only to find that it is unable to load. Unfortunately, your popularity may have made you a target of a DDoS or distributed denial of service attack, a malicious attempt to disrupt the normal functioning of your service. There are people out there with extensive computer knowledge whose intentions are to breach or bypass Internet security. They want nothing more than to disrupt the normal transactions of businesses like yours. They do this by infecting computers and other electronic hardware with malicious software or malware. Each infected device is called a bot. Each one of these infected bots works together with other bots in order to create a disruptive network called a botnet. Botnets are created for a lot of different reasons, but they all have the same objective. Taking web resources like your website offline in order to deny your customers access. Luckily, with Cloudflare, DDoS attacks can be mitigated and your site can stay online no matter the size, duration and complexity of the attack. When DDoS attacks are aimed at your Internet property, instead of your server becoming deluged with malicious traffic, Cloudflare stands in between you and any attack traffic like a buffer. Instead of allowing the attack to overwhelm your website, we filter and distribute the attack traffic across our global network of data centers using our ANYCAST network. No matter the size of the attack, Cloudflare Vance DDoS protection can guarantee that you stay up and run smoothly. Want to learn about DDoS attacks in more detail? Explore the Cloudflare Learning Center to learn more.