Webmasters Gallery

In this episode of The Smashing Podcast, we’re talking about The Transitional Web. What is it, and how does it describe the technologies we’re using? Drew McLellan talks to Chris Ferdinandi to find out.

Show Notes

• Connect with Chris Ferdinandi and read his posts on his website

Weekly Update

• What’s The Perfect Design Process? written by Vitaly Friedman
• Sustainable Design Toolkits And Frameworks written by Cosima Mielke & Geoff Graham
• The UX Of Flight Searches: How We Challenged Industry Standards written by Robert Goesch
• Shines, Perspective, And Rotations: Fancy CSS 3D Effects For Images written by Temani Afif
• How To Become A Better Speaker At Conferences written by Andy Budd

Transcript

Drew: He’s the author of the Vanilla JS Pocket Guide series, creator of the Vanilla JS Academy Training Program and host of the Vanilla JS Podcast. We last talked to him in late 2021 where we asked if the web is dead, and I know that because I looked it up on the web. So, we know he is still an expert in Vanilla JS but did you know he invented fish and chips? My smashing friends, please welcome back Chris Ferdinandi. Hi, Chris, how are you?

Chris: I’m smashing, thank you so much. How are you today, Drew?

Drew: I’m also smashing, thank you for asking. It’s always great to have you back on the podcast, the two of us like to chat about maybe some of the bigger picture issues surrounding the web. I think it’s easy to spend time thinking about the minutiae of techniques or day-to-day implementation or what type of CSS we should be using or these things but sometimes it is nice to take a bit of a step back and look at the wider landscape.
Late last year, you wrote an article on your Go Make Things website called The Transitional Web. What you were talking about there is the idea that the web is always changing and always in flux. After, I don’t know how long I’ve been doing this, 25 years or so working on the web, I guess change is pretty much the only constant, isn’t it?

Chris: It sure is. Although, to be fair, it feels like a lot of what we do is cyclical and so we’ll learn something and then we’ll unlearn it to learn something new and then we’ll relearn it again just in maybe a slightly different package which is, in many ways, I think the core thesis of the article that you just mentioned.

Drew: And is that just human nature? Is that particular to the web? I always think of, when I was a kid in the ’80s, the 1980s, okay, so we’re talking a long while back-

Chris: It was a wild time.

Drew: One of the pinnacles that, if you had a bit of spending power, one of the things you’d have in your living room was a hi-fi separates. So, you’d have a tape deck, maybe a CD deck, an amplifier and I always remember as a kid, they’d all be silver starting off and those were the really cool ones. And then after a while, a manufacturer would come out with one that wasn’t silver, it was black and suddenly black looked really cool and all the silver stuff looked really old. And so, then you’d have five years of everything being in black and then somebody would say, “Oh, black’s so boring. Here’s our new model, it’s silver,” and everyone would get really excited about that again.
I feel like somehow the web is slightly and, as I say, maybe it’s a human nature thing, perhaps we’re all just magpies and want to go to something that looks a bit different and a bit exciting and claim that’s the latest, greatest thing. Do you think there’s an element of that?

Chris: Yeah, I think that’s actually probably a really good analogy for what it’s like on what our industry has a tendency to do. I think it’s probably bigger than just that. I had a really, I don’t want to say a really good thought, that sounds arrogant. I had a thought, I don’t know if it was good or not, I forgot what it was.

Drew: Oh, it’ll come back.

Chris: So, I can’t tell you but it was related as you were talking.

Drew: I bamboozled you with talk of hi-fi separates.

Chris: Yeah, no, that’s great. It’s great.

Drew: We last talked about this concept of the lean web where we were seeing a bit of a swing back away from these big frameworks where everything is JavaScript and even our CSS was in JavaScript. And we were beginning to see at that time a launch of things like Petite Vue, Alpine.js, Preact, these smaller, more focused libraries that try and reduce the weight of JavaScript and be a little bit more targeted. Is that a trend that has continued?

Chris: Yeah, and it’s continued in a good way. So, you still see projects like that pop up, I’ve seen since then a few more tiny libraries. But I think one of the other big trends that I’m particularly both excited about and then maybe also a little bit disheartened about is the shift beyond smaller client side libraries into backend compiler tools. So, you have things like Svelte and SvelteKit and Astro which are designed to let people continue to author things with a state-based UI, JavaScripty approach but then compile all of that code that would normally have to exist in the browser and run at runtime into mostly HTML with just the sprinklings of JavaScript that you need to do the specific things you’re trying to do.

Chris: And so, the output looks a lot more traditional DOM manipulation but the input looks a lot more like something you might write in Reactor view. So, I think that’s pretty cool. It’s not without, in my opinion, maybe some holes that people can fall into and I’m starting to see some of those tools do the, hey, we solved this cool thing in an innovative way so let’s go and repeat some of the mistakes of our past but differently traps and we can talk about that, that didn’t make it into the article that you referenced. I recently wrote an update looking back on how things are changing that talks about where they’re headed.

Chris: But I think one of the big things in my article, The Transitional Web, was this musing about whether these tools are the future or just a transitional thing that gets us from where we are to where we’re headed. So, for example, if you’ve been on the web for a while, you may remember that there was a time where jQuery was the client side library.

Drew: It absolutely was, yeah.

Chris: If you were going to do JavaScript in the web, you were going to use jQuery.

Drew: jQuery was everywhere.

Chris: Yeah. And not that you couldn’t get by without it but doing something like getting all of the elements that have a class was incredibly difficult back in the, i.e., six through eight era. And jQuery made it a lot easier, it smoothed things out across browsers, it was great. But eventually browsers caught up, we got things like querySelector and querySelectorAll, the classList API, cool methods for moving elements around like a pen and before and after and removed. And suddenly, a lot of the stuff that was jQuery’s bread and butter, you could just do across any browser with minimal effort. But not everything, there were still some gaps or some areas where you might need polyfills.

Chris: And so, you started to see these smaller tools that were … jQuery, they did some of the things but they didn’t do everything so the ones that immediately come to mind for me are tools like Umbrella JS or Shoestring from the folks over at Filament Labs. And the thing with those tools is they were really popular for a hot minute, everyone’s like, “You don’t need jQuery, use these,” and then the browsers really caught up and they went away entirely. And actually, even before that fully happened, you started to see tools like React and Vue and Angular start to dominate and just, really, people either use jQuery or these other tools, they don’t touch Umbrella or Shoestring at all.

Chris: So, I think the thing I often wonder is are tools like Preact and Solid and Svelte and Astro, are those more like what reacted for the industry or more like Umbrella and Shoestring where they’re just getting us to whatever’s next. At the time that I wrote the article, I suspected that they were transitional. Now, I think my thoughts have shifted a little bit and I feel like tools like Preact and Solid are probably a little bit more and Petite Vue who are … You called it something weird because you’re British, I forget, Petty Vue or something but-

Drew: Petite Vue, yeah.

Chris: No, I’m just teasing, I’m sorry. I love you, Drew.

Drew: I was attempting to go for the French so …

Chris: Right? Sorry, I have the way you guys say herb stuck in my head now instead of herb and I just can’t. So, yeah, I feel like those tools are potentially transitional and the what’s next just as an industry is, in my opinion, and a lot could change in the next year or three, the way I’m feeling now, it seems like tools like Astro and Svelte are going to be that next big wave at least until browsers catch up a lot. So, in my opinion, the things that browsers really need to have to make a lot of these tools not particularly necessary is some native DOM diffing method that works as easily as inner HTML does for replacing the DOM but in a way that doesn’t just destroy everything.

Chris: I want to be able to pass in an HTML string and say make the stuff in this element look like this with as little messing up of things as possible. And so, until we have that, I think there’s always going to be some tooling. There’s a lot of other things that these tools do like you can animate transitions between pages like you would in SPA. We’ve got a new API that will hopefully be hitting the browser in the near future, it works in Chrome Canary now but nowhere else, your transitions API. There’s an API in the works for sanitizing HTML strings so that you don’t do terrible cross-site scripting stuff, hasn’t really shipped anywhere yet but it’s in the works.

Chris: So, there’s a lot of library-like things in the works but DOM diffing, I think, is really the big thing. So much of how we build for the web now is grab some data from an API or a database and then dynamically update the UI based on things the user does. And you can do that with DOM manipulation, I absolutely have but, man, it is so much harder to do. So, really, I get the appeal of state-based UI. The flip side is we also use state-based UI for a lot of stuff where it’s not appropriate and it ends up being harder to manage and maintain in the long run. So, I’m rambling, I’m sorry. Drew, stop me, ask [inaudible 00:09:57].

Drew: Yeah, I don’t want to gloss over the importance of jQuery as an example for this overall trend because, as you say, at the time, it was really difficult to just find things in the DOM to target something. You could give things an ID and then you had get element by ID and you could target it that way. But say you wanted to get everything with a certain class, that was incredibly difficult to do because there was no way of accessing the class list, you could just get the attribute value and then you would have to dissect that yourself. It’s incredibly inefficient to try and get something by class and what jQuery did was it took an API that we were already familiar with, the CSS selector API essentially, and implemented that in JavaScript.

Drew: And, all of a sudden, it was trivially easy to target things on the page which then made it … It very quickly just became the defacto way that any JavaScript library was allowing you to address elements in the DOM. And because of that trend, because that’s how everybody was wanting to do it with quite a heavy JavaScript implementation, let’s not forget this was not a cheap thing to do, that the web platform adapted and we got querySelector which does the same thing on querySelectorAll. And of course, then what jQuery did or I think its selector engine was called Sizzle, I think, under the hood. Sizzle then adopted querySelectorAll as part of its implementation.

Drew: So, if a selector could be resolved using the native one, it would. So, actually, the web platform was inspired by jQuery and then improved jQuery in this whole cycle. So, I think the way the web has always progressed is observing what people are doing, looking at the problems that they’re trying to solve and the messes of JavaScript that we’re using to try and do it and then to provide a native way to do that which just makes everything so much easier. Is that the ultimate trend? Is that what we’re looking at here?

Chris: Yeah, for sure. I often describe jQuery as paving the cow paths. So many of the methods that I love and use in the browser, I owe entirely to jQuery and I think recognizing that helped me get less angry at some of the damage that modern frameworks do or modern libraries because the reality is they are … I think the thing is a lot of them are experiments that show alternate ways to do things and then we have a tendency as an industry to be like, “If it’s good for this, it’s good for everything.” And so, React is very good at doing a specific set of things in a specific use case and, through some really good marketing from Facebook, it became the defacto library of the web.

Chris: I think tools like Astro and Svelte are similarly showing a different way we can approach things that involves authoring and adding a compiled step. And they are, by no means, original there, static site generators have existed for a while, they just layer in this. And we’ll also spit out some reactive interacting bits and you don’t have to figure out how to do that or write your own JavaScript for it, just write the stuff, we’ll figure out the rest. So, yeah, I do think that’s the nature of the web platform is libraries are experiments that extend what the platform can already do or abstract away some of the tough stuff so that people can focus on building and then, eventually, hopefully, the best stuff gets absorbed back into the platform.

Chris: The potential problem with that model is that, usually, by the time that happens, the tooling has both gotten incredibly heavy to the detriment of end users and has become really entrenched. So, even though the idea … Think of jQuery, we talk about it in the past tense but it’s still all over the web because these sites that were built with it aren’t just going to rip it out, it’s a lot of work to do that. And there’s a lot of developers even today who, when they start a new project, they reach for jQuery because that’s what they learned on and that’s what they know and it’s easiest for them.

Chris: So, these tools just really have persistence for better or for worse. It’s great if you invested a lot of time in learning them, it’s great job security, you’re not wasted time. But a lot of these tools are very heavy, very labor-intensive for the browser and ultimately result in a more fragile end user experience which is not always the best thing.

Drew: I remember, at one point, there was a movement calling for React to actually be shipped with the browser as a way of offsetting the penalty of downloading and pausing all that script. It is frustrating because it’s like, okay, you’re on the right path here, this functionality should be native to the browser but then, crucially, at the last moment, you swerve and miss and it’s like, no, we don’t want to embed React, what we want to do is look at the problems that React is helping people solve, look at the functionality that it’s providing and say, okay, how can we take the best version of that and work that into the web platform. Would you agree?

Chris: Yeah. Yeah, exactly. React will eventually be in the browser, just not the way everybody … I think a lot of people talk about it as in literally, the same way jQuery is in the browser now, too. We absorb the best bits, put some different names on them, arguably more verbose, clunky, difficult to use names in many cases and so I think that’s how it’ll eventually play out. The other thing that libraries do that I wish the web platform was better at, since we’re on this path, is just API consistency.

Chris: So, it’s one thing that jQuery got, really, is the API is very consistent in terms of how methods are authored and how they work. And just, as a counterpoint, in JavaScript proper, just native JavaScript, you could make a strong argument that querySelector and querySelectorAll shouldn’t be separate methods, it should just be one method that has a much shorter name that always returns … Hell, I’d even argue an array, not a node list because there are so many more methods that you can use to loop over arrays and manipulate them to nodes or node lists.

Chris: Why is the classList API a set of methods on a property instead of just a set of methods you call directly on the element? So, why is it classList add, classList remove instead of add class, remove class, toggle class, et cetera. It’s just lots of little things like that, this death by a thousand cuts, I think, exacerbates this problem that, even when native methods do the thing, you still get a lot of developers who reach for tooling just because it smooths over those rough edges, it often has good documentation. MDN fills the gap but it’s not perfect and, yeah.

Drew: Yes, using a well-designed framework, the methods tend to be guessable. If you’ve seen documentation that includes a remove method, you could probably guess that an add method is the opposite of that because that’s how anybody would logically name it. But it’s not always that way with native code, I guess, because of reasons, I don’t know, designed by committee, historical problems. I know that, at one point, there were, was it MooTools or prototype or some of these old frameworks that would add their own methods and basically meant that those names couldn’t be reused for compatibility reasons.

Chris: Yeah, I remember there was that whole SmooshGate thing that happened where they were trying to figure out how to … I think it was the flat method or whatever that originally was supposed to be called. MooTools had an array method of the same name attached to the array prototype. If the web standards committee implemented it the way they wanted to, it would break any website using MooTools, a whole thing.

Drew: In some ways, it seems laughable, any website using MooTools. If your website’s using MooTools, good luck at this point. But it is a fundamental attribute of the web that we try not to break things that, once it’s deployed, it should keep running and a browser update isn’t going to make your use of HTML or CSS or whatever invalid, we’re going to keep supporting it for as long as possible. Even if it’s been deprecated, the browsers will keep supporting it.

Chris: Yeah. I was just going to say, the marquee element was deprecated ages ago and it still works in every major browser just for legacy reasons. It’s that core ethos of the web which is the thing I love. I think it’s a good thing, yeah.

Drew: It is but, yes, it is not without its problems as we’ve seen. It’s, yeah, yeah, very difficult. You mentioned the View Transitions API which I think now may be more broadly supported. I don’t know if I saw from one of the web.dev posts that’s now, as of this month, has better support, which is transitional state but like an SPA style transition between one state and another but you can do it with multipage apps.

Chris: Yeah. A discord I’m in, just quick shout out to the Frontend Horse Discord, Adam Argyle was in there today talking about how, because he built this slide demo thing where every slide is its own HTML file and it uses U transitions to make it look like it’s just one single page app. He was saying that it still does require Chrome Canary with a flag turned on but things change quickly, very slowly and then all at once, that’s the-

Drew: Well, that’s pretty up to date and an authoritative statement there, yeah. But we saw, it was Google IO recently, we saw loads of announcements from them back to things they’re working on. Things like the popover API, which is really interesting, which make use of this top layer concept where you don’t have to futz around with Z index to make sure, if something needs to be on the top, it can be on the top. It’s these sorts of solutions that you get from the web platform that are always going to be a bit of a hack if they’re implemented by a library in JavaScript.

Drew: It’s the fact that you can have a popover that you can always guarantee is going to be on top of everything else and has baked into its behavior so that it can be accessibly dismissed to all those really important subtleties that it’s so easy to get wrong with a JavaScript implementation that the web platform just gets right. And I guess that means that the web platform is always going to move more slowly than a big framework like React or what have you but it does it for a reason because every change is considered for, I don’t know, robustness and performance and accessibility and backward compatibility. So, you end up with, ultimately, a better solution even if it has weird method names.

Chris: For sure. Yeah, no, that’s totally fair.

Drew: I think-

Chris: Yeah.

Drew: … we had-

Chris: Oh, sorry. Go ahead, Rich. Drew rather.

Drew: I was about to mention Rachel, we had Rachel Andrew on the show a few episodes ago talking about Google Baseline which is their initiative to say which features are supported to replace a browser support matrix idea. And if you look at the posts that Rachel writes what’s new on the web on web.dev every month, she does a roundup of what’s now stable, what you can use and there’s just a vast amount being added to the web platform all the time. It could be a change log from a major framework because it is a major framework, it’s the native web platform but there’s just things being added all the time.
Is there anything in particular that you’ve seen that you think would make a big difference or are you just hanging out for that DOM diffing after all those things that are yet to come?

Chris: Yeah. So, things like transitions between pages and stuff, I’m going to be honest, those don’t excite me as much as I think they excite a lot of other people. I know that’s a big part of the reason why a lot of developers that I know really like SPAs and, I don’t know, markers, get really excited about that thing, I’ve just never really understood that. I am really holding out for a DOM diff method. I think the API I’m honestly most excited for is the Temporal API which is still in, I think, stage three so it’s not coming anytime soon. But working with dates in JavaScript sucks and the Temporal API is hopefully going to fix a lot of those issues, probably introduce some new ones but fix most of them.

Drew: This is new to me. Give us a top level explanation of what’s going on with that one.

Chris: Oh, yeah, sure. So, one of the big things that’s tough to do with the date object in JavaScript … For me, there’s two big things that are really particularly painful. One of them is time zones. So, trying to specify a time in a particular time zone or get a time zone from a date object. So, based on when it was created or how it was created, no, this is the time zone. Figuring out the time zone the person is in is really difficult. And then the other aspect that’s difficult is relative time. So, if you’ve got two different dates and you want to just quickly figure out how much time is between them, you can do it but it involves doing a bunch of math and then making some assumptions especially once you get past days or, I guess, weeks.

Chris: So, I could easily look at two date objects, grab timestamps from them and be like, “Okay, this was two weeks ago or several days.” But then, once you start getting into months, the amount of days in a month varies. So, if I don’t want to say 37 weeks, I want to say, however many months that ends up being, it’s going to vary based on how long the months were. And so, the Temporal API addresses a lot of those issues. It’s going to have first class support for time zones, it’s going to have specific methods for getting relative time between two temporal objects and, in particular, one where you hopefully won’t have to …

Chris: It’s been a while since I’ve read the spec but I’m pretty sure it allows you to not have to worry about, if it’s more than seven days, show in weeks, if it’s more than four weeks, use months. You can just get a time string that says this was X amount of time ago or is happening N amount of time in the future or whatever. So, there’s certain things the Date API can do relatively or the date object can do relatively well but then there’s a couple of you’re trying to do appy stuff with it.

Chris: For example, I once tried to build a time zone calculator so I could quickly figure out when some of my colleagues in other parts of the world, when it was for them. And it was just really hard to account for things like, oh, most of Australia shifted daylight savings time this month but this one state there doesn’t, they actually do it a different month or not at all and so it was a huge pain.

Drew: Yeah, anything involving time zones is difficult.

Chris: Yeah. It’s one of the biggest problems in computer science. That and, obviously, naming things. But yeah, it will smooth over a lot of those issues with a nicer, more modern API. If you go over to tc39.es/proposaltemporal, they have the docs of the work in progress or the spec in progress. It’s authored a lot more nicely than what you might normally see on, say, the W3C website in terms of just human readability but you can tell they borrowed a lot of the way the API works from libraries like Moment.js and date-fns and things like that. Which again gets back to this idea that libraries really pave those cow paths and show what a good API might look like and then the best ones usually win out and eventually become part of the browser.

Drew: And again, back to my point about the web platform getting the important details right, if you’ve got native data objects, you’re going to be able to represent those as localized strings which is a whole other headache. I’ve used libraries that will tell you, “Oh, this blog post was posted two weeks ago,” but it’ll give you the string two weeks ago and there’s no way to translate that or, yeah. So, all those details, having it baked into the platform, that’s going to be super good [inaudible 00:27:24].

Chris: Smashing, one might even say.

Drew: Smashing, yeah. It raises a question because the standards process takes time and paving the cow paths, there has to be a cow path before you pave it. So, does that approach always leave us a step behind what can be done in big frameworks?

Chris: Yeah, theoretically. I think we can look at an example where this didn’t work with the Toast API that Google tried to make happen a few years back. That was done relatively quickly, it was done without consensus across browsers, I don’t think it really leaned heavily on … I think it was just doing what you described, the paving before the cow paths were there and so it was just met with a lot of resistance. But yeah, I think the platform will always be a bit behind, I think libraries are always going to be a part of the web. Even as the Vanilla JS guy, I use libraries all the time for certain things that are particularly difficult.

Chris: For me, that tends to be media stuff. So, if I need to display really nice photo galleries that expand and shrink back down and you can slide through them, I always grab a library for that, I’m not coding that myself. I probably could, I just don’t want to, it’s a lot of little details to manage.

Drew: It’s a lot of work, yeah.

Chris: Yeah. So, I do, I think the platform will always be behind, I don’t think that’s necessarily a bad thing. I think, for me, the big thing I’ve wished for years is that we run through this cycle as an industry where a little tool comes out, does a thing well, throws in more and more features, gets bigger and bigger, becomes a black hole and just sucks up the whole industry. I keep picking on React but React is the library right now. And then eventually people are like, “Oh, this is big, maybe we should not use something as big,” and then you start to see little alternatives pop up.
And I really wish that we stopped doing that whole bigger black hole thing and the tools just stayed little and people got okay with the idea that you would pull together a bunch of little tools instead of just always grabbing the behemoth that does all the things. I often liken it to people always go for the Swiss Army knife when they really just need a toothpick or a spoon or a pair of scissors. Just grab the tool you need, not the giant multi-tool that has all this stuff you don’t.

Drew: It almost comes back to the classic Unix philosophy of lots of small tools that do specific things that have a common interface between them so that you can change stuff together.

Chris: And that’s probably where … Now that you’re saying it, I hadn’t really considered this but that’s probably where the behavior or the tendency arises is, if you have a bunch of small libraries from the same author, they often play together very nicely. If you don’t, they don’t always, yeah, it’s tougher to chain them together or connect those dots. And I really wish there was some mechanism in place that incentivized that a little bit more, I don’t know. I got nothing but I hadn’t really considered that until you just said it.

Drew: Maybe it needs to be a web platform feature to be able to plug in functionality.

Chris: Yeah. Remember the jQuery, I think it was called the extend method or they had some hook that, if you were writing a plugin, basically you would attach to the jQuery prototype and add your own things in a non-destructive way. I wish there was some really lightweight core that we could bolt a bunch of stuff into, that would be nice.

Drew: Yes, and I think that would need to come from the platform rather than from any third party because done the interface would never be agreed upon.

Chris: Very true.

Drew: You talk a lot about Vanilla JavaScript as a concept, I think it helps to give things names. I feel like this approach that we’re talking about here is being web platform native. Do you think that describes it accurately?

Chris: Yes. Yeah, definitely.

Drew: Yeah. So, you’ve talked about still reaching for libraries and things where necessary. Would you say that, if it is our approach to pave the cow paths that, really, the ecosystem needs these frameworks to be innovating and pushing the boundaries and finding the requirements that are going to stick, are they just an essential part of the ecosystem and maybe not so [inaudible 00:32:08]-

Chris: Yeah, probably more than I-

Drew: … to paint.

Chris: Yeah. I think, more than I’d like to admit, they are an essential part of the ecosystem. And I think what it comes back to for me is I wish that they did the one thing well and stayed a relatively manageable size. Preact, for example, has done a really great job of adding more features and still keeping themselves around three kilobytes or so, minified [inaudible 00:32:33] which is pretty impressive considering how much like React the API is and they have fewer abstractions internally so a lot of the dynamic updates, you, user Drew, interact with the page, some state changes and a render happened, that ended up happening orders of magnitude faster than it does in React as well.
Now, to be fair, a lot of the reason why is Preact is newer and it benefits from a lot of modern JavaScript methods that didn’t exist when React was created. So, under the hood, there’s a lot more abstraction happening but it’d probably require a relatively big rewrite of React to fix that.

Drew: And we know those are always popular.

Chris: Yeah. They are dangerous, I understand why people don’t like to do them. I’ve done it multiple times, I always end up shooting myself on the foot, it’s not great.

Drew: So, say that I’m a React developer and I’m currently, day-to-day, building client side SPAs but I really like the sound of this more platform native approach and I want to give it a try for my next project. Where should I start? How do I dip a toe into this world?

Chris: Oh, it depends. So, the easiest way, and I hate myself for saying this, but the easiest way, honestly, you got a few options. One of them, you rip out React, you drop in Preact, there’s a second smaller thing you need to smooth over some compatibility between the two but that’s going to give you just an instant performance boost, a reduce in file size and you can keep doing what you were doing. The way that I think is a little bit more future-proof and interesting, you grab a tool like Astro, which allows you to literally use React to author your code and then it’s going to compile that out … Excuse me, into mostly HTML, some JavaScript, it’s going to strip out React proper and just add the little interactivy bits that you need.

Chris: I saw a tweet a year or two ago from Jason Lengstorf from the Netlify developer relations team about how he took a next app that he had built, kept 90% of the code, he just made a few changes to make it fit into the way Astro hooks into things, ran the Astro compiler and he ended up having the same exact site with almost all of the same code but the shipped JavaScript was 90% smaller than what he had put in. And you get all the performance and resilience wins that come with that just automatically, just by slapping a compiler on top of what you already have.

Chris: So, I’m really excited about a tool like Astro for that reason. I’m also a little bit worried that a tool like Astro becomes a band-aid that stops us from addressing some of the real systemic issues of always reaching for these tools. Because you can just keep doing what you’re doing and not really make any meaningful changes and temporarily reduce the impact of them, I don’t know that it really puts us in a better place as an industry in the long run. Especially since tools like Svelte and Astro are now working towards this idea that, rather than shipping multi-page apps, they’re going to ship multi-page apps that just progressively enhance themselves into single page apps with hydration and now we’re right back to we’ve got an SPA.

Chris: So, I mentioned some stuff has changed, I recently saw a talk from Rich Harris, who’s the creator of Svelte and SvelteKit, about this very thing and he’s very strongly of the belief that SPAs are better for users because you’re not fetching and rerunning all of the JavaScript every time the page loads. And I get that argument and SvelteKit does it in a really cool way where, rather than having a link element like you might get in Next.js or something like that, a React router or whatever, they just intercept traditional hyperlinks and do some checking to see if they point to your current page or an external site and behave accordingly.

Chris: The thing that nobody ever talks about when they talk about SPAs are better is all of the accessibility stuff that they tend to break that you then need to bolt back in. So, even if you’re like, “Okay, this library is going to handle intercepting the links and finding the page and doing all the rendering and figuring out what needs to change and what stays the same,” there’s this often missed piece around how do you let someone who’s using a screen reader know that the UI has changed and how do you do it in a way that’s not absolutely obnoxious. You don’t want to read the entire contents of the page so you can’t just slap an ARIA live attribute on there.

Chris: Do you shift focus to the H1 element on the page? What happens if the user didn’t put an H1 element on the page? Do you have some visually hidden element that you drop some text in saying page loaded so that they know? Do you make sure you shift focus back to the top so they’re not stranded halfway down the page if they’re a keyboard user? It’s one of those things where how you handle is very it depends, contextual. And I think it’s really tough for a library to implement a solution that works for all use cases. I think it’s optimistic to assume the developers will always do the right thing.

Chris: I mentioned at the very start that I’m excited about these tools but I also see them doing that let’s repeat the same mistakes all over again and this feels like that to me. I absolutely understand why, on certain very heavy sites, you might want to shift to an SPA model but there are also just so many places you can really do real harm to yourself or your users when going down that path. And so, I worry that these tools came up to solve a bunch of UI or UX and performance related issues with state-based UI just to then re-implement them in a different way eventually. That’s my soapbox on that. If you have any questions or comments, I’m happy to hear them.

Drew: So, as often happens when we talk, we get all the way to the end and conclude that we’re doomed.

Chris: We’re not. I think it’s mostly we’re headed in a right direction, Drew. I’m a little less doom and gloom than I was a few years ago. And as much as I just ragged on tools like Astro and Svelte, I think they’re going to do a lot of good for the industry. I just love the move to mostly HTML, sprinkle in some JavaScript, progressively enhance some things, that’s a beautiful thing. And even though I was just ragging on the whole SPA thing that these tools are doing, one of the things they also do that’s great is, if that JavaScript to enhance it into an SPA doesn’t load or fails for some reason, Astro and SvelteKit fall back to a multi-page app with server side HTML.
So, I think that promise of, what was it, isomorphic apps they used to call them a while ago, it may be closer to that vision being realized than we’ve ever gotten before. I still personally think that just building multi-page apps is often better but I’m probably in the minority here, I often feel like I’m the old man shouting at the cloud.

Drew: And yes, as often happens, it all comes round to progressive enhancement being a really great solution to all of our problems. Maybe not all of our problems but some of them around the web.

Chris: It’s going to cure global hunger, you watch.

Drew: So, I’ve been learning all about being web platform native. What have you been learning about lately, Chris?

Chris: I’ve been trying to finally dig into ESBuild, the build tool/compiler I’ve been using, Rollup, and a separate NPM SaaS compiler thing and my own cobbled together build tool for years. And then Rollup V3 came out and broke a lot of my old stuff if I upgrade to it so I’m still on Rollup two and this was the motivation for me to finally start looking at ESBuild which also has the ability, I learned, to not just compile JavaScript but also CSS and will take nasty CSS imports and concatenate them all into one file for you just like ES modules would.

Chris: So, now I’m over here thinking like, “Oh, is it finally time to drop SaaS for native CSS?” and, “Oh, all these old SaaS variables I have, I should probably convert those over to CSS variables.” And so, it’s created this whole daisy chain of rabbit hole for me in a very good way because this is the kind of thing that keeps what we do professionally interesting is learning new things.

Drew: You’ll be the Vanilla CSS guy before we know it.

Chris: That’s Steph Eckles. She is much better at that than I am. I reach for her stuff all the time but, yeah, maybe a little bit.

Drew: If you, dear Listener, would like to hear more from Chris, you can find his social links, blog posts, developer tips newsletter and more at gomakethings.com. And you can check out his podcast at vanillajspodcast.com or wherever you’re listening to this. Thanks for joining us today, Chris. Did you have any parting words?

Chris: No, Drew, just thank you so much for having me. I always enjoy our chat so it was great to be here.

During my time curating the UX London and Leading Design events, I used to watch a few hundred presentations each year. I’d be looking at a range of things, including the speaker’s domain experience and credibility, their stage presence and ability to tell a good story, and whether their topic resonated with the current industry zeitgeist. When you watch that many a presentation, you start to notice patterns that can either contribute to an absolutely amazing talk or leave an audience feeling restless and disengaged. But before you even start worrying about a delivery, you need to secure yourself a spot on the stage. How? Follow me along, and let’s find out!

Choosing What To Speak About

I think one of the biggest misunderstandings people have about public speaking is the belief that you need to come up with a totally new and unique concept — one that nobody has spoken about before. As such, potentially amazing speakers will self-limit because they don’t have “something new to share.” While discovering a brand new concept at a conference is always great, I can literally count the number of times this has happened to me on the one hand. This isn’t because people aren’t constantly exploring new approaches.

However, in our heavily connected world, ideas tend to spread faster than a typical conference planning cycle, and the type of people who attend conferences are likely to be taped into the industry zeitgeist already. So even if the curator does find somebody with a groundbreaking new idea, by the time they finally get on stage, they’ve likely already tweeted about it, blogged about it, and potentially spoken about it at several other events.

I think the need to create something unique comes from an understandable sense of insecurity.

“Why would anybody want to listen to me unless I have something groundbreaking to share?”

The answer is actually more mundane than you might think. It’s the personal filter you bring to the topic that counts. Let’s say you want to do a talk about OKR’s (Objectives and Key Results) or Usability Testing — two topics which you might imagine have been “talked to death” over the years. However, people don’t know the specific way you tackled these subjects, the challenges you personally faced, and the roadblocks you overcame. There’s a good chance that people in your audience will already have some awareness of these techniques. Still, there’s also a good chance that they’ve been facing their own challenges and want nothing more than to hear how you navigate your way around them, hopefully in an interesting and engaging manner.

Also, let’s not forget that there are new people entering our industry every day. There are so many techniques I’ve made the mistake of taking for granted, only to realize that the people I’m talking to have not only never practiced them before but might not have even come across them; or if they have, they might have only the scantest knowledge about them, gleaned from social media and a couple of poorly written opinion pieces.

In fact, I think our industry is starting to atrophy as techniques we once thought were core ten years ago barely get a mention these days. So just because you think a subject is obvious doesn’t mean everybody feels the same, and there isn’t room for new voices or perspectives on the subject.

Another easy way to break into public speaking is to do some kind of case study. So think about an interesting project you did recently. What techniques did you use, what approach did you take, what problems did you encounter, and how did you go about solving them? The main benefit of a case study type talk is that you’ll know the subject extremely well, which also helps with the nerves (more on this later).

During the past few years, there were published many excellent, very detailed case studies on Smashing Magazine — take a look at this list for some inspiration.

Invest The Right Amount of Time Doing Prep

Another thing people get wrong about public speaking is feeling the need to write a new talk every time. This also comes from insecurity (and maybe a little bit of ego as well). We feel like once our talk is out in the world, everybody will have seen it. However, the sad reality is that the vast majority of people won’t be rushing to view your talk when the video comes online, and even if they do, there’s a good chance they’ll only have taken in a fraction of what you said if they remember any of it at all.

It’s also worth noting that talks are super context-sensitive. I remember watching a talk from former Adaptive Path founder Jeff Veen at least five times. I enjoyed every single outing because while the talk hadn’t changed, I had. I was in a different place in my career, having different conversations and struggling with different things. As such, the talk sparked whole new trains of thought, as well as reminded me of things I knew but had forgotten.

It should be mentioned that, like music or stand-up comedy, talks get better with practice. I generally find that it takes me three or four outings before the talk I’m giving really hits its stride. Only then have I learnt which parts resonate with the audience and which parts need more work; how to improve the structure and cadence, moving sections around for a better flow, and I’ve learnt the bits which people find funny (some international and some not), and how to use pacing and space to make the key ideas land. If you only give a talk once, you’ll be missing out on all this useful feedback and delivering something that’s, at best, 60% of what it could potentially be.

On a practical level, a 45-minute talk can take a surprisingly long time to put together. I reckon it takes me at least an hour of preparation for every minute of content. That’s at least a week’s worth of work, so throwing that away after a single outing is a huge waste. Of course, that’s not what people do. If the talk is largely disposable, they’ll put a lot less effort in, often writing their talk “the night before the event.” Unless you’re some sort of wunderkind, this will result in a mediocre talk, a mediocre performance, and a low chance of being asked to come back and speak again. Sadly this is one of the reasons we see a lot of the same faces on the speaker circuit. They’re the ones who put the effort in, deliver a good performance, and are rewarded with more invites. Fortunately, the quality bar at most conferences is so low that putting a little extra time into your prep can pay plenty of dividends.

Nailing The Delivery

As well as 45 minutes being a lot of content to create, it’s also a lot of content to sit through. No matter how interesting the subject is, a monotone delivery will make it very hard for your audience to stay engaged. As such, nailing the delivery is key. One way to do this is to see public speaking for what it is — a performance — and as the performer, you have a number of tools at your disposal. First of all, you can use your voice as an instrument and try varying things like speed, pitch, and volume. Want to get people excited? Use a fast and excitable tone. Want people to lean in and pay attention? Slow down and speak quietly. Varying the way you speak gives your talks texture and can help you hold people’s attention for longer.

Another thing you can use is the physical space. While most people (including myself) feel safe and comfortable behind the lectern, the best speakers use the entire stage to good effect, walking to the front of the stage to address the audience in a more human way or using different sides of the stage to indicate different timelines or parts of a conversation.

Storytelling is an art, so consider starting your talk in a way that grabs your audience’s attention.

This generally isn’t a 20-minute bio of who you are and why you deserve to be on the stage. One of the most interesting talks I ever saw started with one such lengthy bio causing a third of the audience to get up and walk out. I felt really bad for the speaker — who was visibly knocked — so I stuck with it, and I’m so glad I did! The talk turned out to be amazing once all the necessary cruft was removed.

“When presenting at work or [at a conference or] anywhere else, never assume the audience has pledged their undivided attention. They have pledged maybe 60 seconds and will divide their attention as they see fit after that. Open accordingly.”

— Mike Davidson

A little trick I like to use is to start my talk in the middle of the story: “So all of a sudden, my air cut out. I was in a cave, underwater, in the pitch black, and with less than 20 seconds of air in my lungs.” Suddenly the whole audience will stop looking at their phones. “Wait, what?” they’ll think. What’s happening? Who is this person? Where are they? How did he get there? And what the hell does this have to do with design? You’ve suddenly created a whole series of open questions which the audience desperately wants to be closed, and you’ve just bought yourself five minutes of their undivided attention where you can start delivery.

Taking too long to get to the meat of the talk is a common problem. In fact, I regularly see speakers who have spent so long on the preamble that they end up rushing the truly helpful bits. One of the reasons folks get stuck like this is that they feel the need to bring everybody up to the same base level of knowledge before they jump into the good stuff. Instead, it’s much better to assume a base level of knowledge. If the talk stretches your audience’s knowledge, that’s fine. If it goes over some people’s heads, it might encourage them to look stuff up after the event. However, if you find yourself teaching people the absolute basics, there’s a good chance the more experienced members of the audience will zone out, and capturing their interest will become that much harder later on.

When speakers don’t give themselves enough time to prepare a good narrative, it’s easy to fall back on tried and tested patterns. One of these is the “listicle talk” where the speaker explains, “Here are twelve things I think are important, and I’m going to go through them one by one.” It’s a handy formula, but it makes people super-conscious of the time. (“Crikey, they’re still only at number five! I‘m not sure I’m going to make it through another seven of these points.”)

In a similar vein are the talks, which are little more than a series of bullet points that the speaker reads through. The problem is that the audience is likely to read through them much quicker than the speaker, so people basically know what you’re going to say in advance. As such, keep these sorts of lists in your speaker notes and pick some sort of title or image that illustrates the points you’re about to make instead.

Tame The Nerves

Public speaking is unnatural for us, so everybody feels some level of stress. I have one friend who is an absolutely amazing speaker on stage — funny, charming, and confident — but an absolute wreck moments before. In fact, it’s fairly common before going on stage to think, “Why the hell am I doing this to myself?” only to come off the stage 45 or 60 minutes later thinking, “That was great. When can I do it again!”.

One way to minimize these nerves is to memorize the first five minutes of your talk. If you can go on the stage with the first five minutes in the bag, the nerves will quickly subside, and you’ll be able to ease into your presentation some more. This is another reason why starting with a story can be helpful, as they’re easy to remember and will give you a reasonable amount of creative license.

A sure way to tame the nerves is to feel super-prepared and practiced; as such, it’s worth reading your talk out loud a bunch of times before you deliver it to an audience. It’s amazing how often something sounds logical when you say it in your head, but it doesn’t quite flow properly when said out loud. Practicing in front of people is very helpful, so consider asking friends or colleagues if you could practice on them. Also, consider doing a few dry runs with a local group before getting on a bigger stage. The more you know your material, the less nervous you’ll feel.

While some speakers like to brag about how little prep they’ve done or how little sleep they’ve got the night before, don’t get tricked into thinking that this is the standard approach. Often these folks are actually very nervous and are saying things like this in an attempt to preempt or excuse potential poor performance. It reminds me of the kids at school who used to claim they didn’t study and revise the material and ended up getting a B-. They almost certainly did some revision, albeit probably not enough. But this posturing was actually a way for them to manage their own shortcomings. “I bet I could have gotten an A if I’d put some extra work in.” Instead, make sure you’re well prepared, well rested, and set yourself up for success.

It’s worth mentioning that most people get nervous during public speaking, even if they like to tell you otherwise. As such, nerves are something you just need to get better at managing. One way to do this is to re-frame “nerves” (which have negative connotations) to something more positive like “excitement.” That feeling of excitement you get before giving a talk can actually be a positive thing if you don’t let it get out of hand. It’s basically your body’s way of getting you ready to perform.

However, this excess energy can bleed out in some less helpful ways, such as the “speaker square dance.” This is where speakers either shift their weight from one foot to the other or take a step forwards, a step to the side, and a step back, like some sort of a caged zoo animal. Unfortunately, this constant shifting can feel very unsettling and distracting for the audience, so if you can, try to plant your feet firmly and just move with deliberate intent when you want to make a point.

It’s also great if you can try to minimize the “ums” and “ahs.” People generally do this to give themselves pause while they’re thinking about the next thing they want to say. However, it can come across as if you are a little unprepared. Instead, do take actual breaks between concepts and sentences. At first, it can feel a bit weird doing this on stage, but think of it as an aural whitespace, making it easier for your audience to take in one concept before transitioning on to the next.

Note: I feel comfortable calling these behaviors out as they’re both things I personally do, and I’m working on fixing them — with mixed results so far.

Avoid The Clichés

At least once during every conference I attend, a speaker will say something jokingly along the lines of “I’m the only one standing between you and tea/lunch/beer.” It’s meant as a wry apology, and the first time I heard it, I gave a gentle chuckle. However, I’ve been at some conferences where three speakers in a row had made the same joke. Apart from a lack of originality, this also shows that the speakers haven’t actually been listening to the other talks, probably because they’ve been in their room or backstage, tweaking their slides. Sometimes this is necessary, but I always appreciate speakers who have been engaged with the content, make references to earlier talks, and don’t trot out the same old clichés as the previous speakers.

Note: I should also add that personally, I find the joke (“the only thing between you and beer”) by the last speaker of the day somewhat problematic, as it implies that people are here for the drink rather than the conference content, and because it also somewhat normalizes overconsumption.

One thing some speakers do in order to calm their nerves (and also to increase people’s engagement, as a side-effect) is through audience participation. If you get people from the audience interacting with each other for five minutes, it takes some of the pressure and focus off of you. It’s also five fewer minutes of content you need to prepare.

However, I see audience participation go wrong far more often than it goes right. This happens especially in front of Brits and Northern Europeans who would rather curl up into a ball and die rather than risk the social awkwardness of talking to their neighbors.

I remember seeing one American speaker walk up the aisle at a European conference encouraging the audience to whoop and cheer while they high-fived everybody or at least attempted to high-five everybody. Although this sort of hype-building might have worked well in Vegas, the assembled audience of Northern Europeans found the whole episode deeply embarrassing, and the speaker never truly recovered for the rest of the talk.

And, on the opposite side of things, if you do get your audience interacting, it can be quite hard to get them to stop a few minutes later! I have seen far too many speakers asking people to introduce themselves to their neighbors, only to cut them off 30 or so seconds later. So if you have such an activity planned, make sure you leave enough time for it to become a meaningful connection, and have a strategy on how you’re going to bring people’s focus back to you.

Another (negative) thing I see a lot of speakers do is make jokes about how they didn’t write their talk till last night or didn’t get to bed till late because they were out drinking. While it’s good to appear to be vulnerable and human, if played wrong, the message you might actually be sending is that you don’t really care about the audience, so be careful.

How To Get Invited Back?

Organizing conferences can be stressful work. You’re trying to coordinate with a bunch of different people with widely different workloads, communication styles, and response times. People are super quick to say “Yes!” to a speaking gig, but then they might go dark for months on end. This is really difficult if you’re trying to get enough information to launch your event site and start selling tickets. It’s even harder if you’re trying to organize things like travel and accommodation and you are seeing the price of everything going up.

As such, you can make conference organizers’ lives a lot easier by responding to their emails in a timely manner, sending them your talk descriptions, bio information, and headshots when asked, and confirming or booking your travel details enough time in advance so that the prices don’t double in size.

Speakers who are a pleasure to work with get recommended and invited back. Speakers who don’t respond to emails, send in overly-short descriptions or leave booking travel to the last minute often don’t. In fact, I’m a member of several conference organiser Slack groups where this sort of behaviour is regularly talked about, causing invites for certain speakers to dry up quickly. This is, sadly, another reason why you see the same speakers talking at events time and again. Not necessarily because they’re the best speakers, but because they’re reliable and don’t give the organizers a heart attack.

Conclusion

I know this article has covered a lot of public speaking do’s and don’t’s. But before wrapping things up, it’s worth mentioning that speaking is also a lot of fun. It’s a great way to attend conferences you might not have otherwise been able to afford; you get to meet speakers whose work you might have been following for years and learn a ton of new things. It also provides a great sense of personal accomplishment, being able to share what you’ve learnt with others and “pay it forward.”

While it’s easy to assume that all speakers are extroverts, (the art of) speaking is actually surprisingly good for introverts, too. A lot of people find it quite awkward to navigate conferences, go up to strangers, and make small talk. Speaking pretty much solves that problem as people immediately have something they can talk to you about, so it’s super fun walking around after your talk and chatting with people.

All that being said, please don’t feel pressured into becoming a speaker. I think a lot of people think that they need to add a “conference speaker” to their LinkedIn bio in order to advance their careers. However, some of the best, most successful people I know in our industry don’t speak at public events at all, so it’s definitely not an impediment.

But if you do want to start sharing your experience with others, now is a good time. Sure, the number of in-person conferences has dropped since the start of the pandemic, but the ones that are still around are desperate to find new, interesting voices from a diverse set of backgrounds. So if it’s something you’re keen to explore, why not put yourself out there? You’ll have nothing to lose but potentially a lot to gain as a result.

Further Reading

Here are a few additional resources on the topic of speaking at conferences. I hope you will find something useful there, too.

• “Breaking into the speaker circuit,” by Andy Budd
  Here are some more thoughts on breaking into public speaking by yours truly. As somebody who both organizes and often speaks at events, I’ve got a good insight into the workings of the conference circuit. This is probably why I regularly get emails from people looking for advice on breaking into the speaking circuit. So rather than repeating the same advice via email, I thought I’d write a quick article I could point people to.
• “Confessions of a Public Speaker,” by Scott Berkun
  In this highly practical book, author and professional speaker Scott Berkun reveals the techniques behind what great communicators do and shows how anyone can learn to use them well. For managers and teachers — and anyone else who talks and expects someone to listen — the Confessions of a Public Speaker provides an insider’s perspective on how to effectively present ideas to anyone. It’s a unique and instructional romp through the embarrassments and triumphs Scott has experienced over fifteen years of speaking to audiences of all sizes.
• “Demystifying Public Speaking,” by Lara Hogan (A Book Apart), with foreword by Eric Meyer
  Whether you’re bracing for a conference talk or a team meeting, Lara Hogan helps you identify your fears and face them so that you can make your way to the stage, big or small.
• “Slide:ology: The Art and Science of Presentation Design,” by Nancy Duarte
  No matter where you are on the organizational ladder, the odds are high that you’ve delivered a high-stakes presentation to your peers, your boss, your customers, or the general public. Presentation software is one of the few tools that requires professionals to think visually on an almost daily basis. But unlike verbal skills, effective visual expression is not easy, natural, or actively taught in schools or business training programs. This book fills that void.
• “Presentation Zen: Simple Ideas on Presentation Design and Delivery,” by Garr Reynolds
  A best-selling author and popular speaker, Garr Reynolds, is back in this newly revised edition of his classic, best-selling book in which he showed readers there is a better way to reach the audience through simplicity and storytelling and gave them the tools to confidently design and deliver successful presentations.
• “How To — Public Speaking,” a video talk by Ze Frank
  You may benefit a lot from this video that Ze Frank made several years ago.
• “Getting Started In Public Speaking: Global Diversity CFP Day,” by Rachel Andrew (Smashing Magazine)
  The Global Diversity CFP Day (Call For Proposals, sometimes also known as a Call For Papers) is aimed to help more people submit their ideas to conferences and get into public speaking. In this article, Rachel Andrew rounds up some of the best takeaways along with other useful resources for new speakers.
• “Getting The Most Out Of Your Web Conference Experience,” by Jeremy Girard (Smashing Magazine)
  To be a web professional is to be a lifelong learner, and the ever-changing landscape of our industry requires us to continually update and expand our knowledge so that our skills do not become outdated. One of the ways we can continue learning is by attending professional web conferences. But with so many seemingly excellent events to choose from, how do you decide which is right for you?
• “Don’t Pay To Speak At Commercial Events,” by Vitaly Friedman (Smashing Magazine)
  The state of commercial web conferences is utterly broken. What lurks behind the scenes of such events is a widely spread, toxic culture despite the hefty ticket price. And more often than not, speakers bear the burden of all of their conference-related expenses, flights, and accommodation from their own pockets. This isn’t right and shouldn’t be acceptable in our industry.
• “How to make meaningful connections at in-person conferences,” by Grace Ling (Figma Config)
  This is an excellent Twitter post about how to make meaningful connections at in-person conferences — a few concise, valuable, and practical tips.

We love hunting down inspiring new sites to give you ideas, so we put together this roundup of the best new websites we’ve seen each month.

Psychology is the fascinating study of human behavior. It holds incredible potential for eCommerce seeking to boost their sales and thrive online.

By simply understanding the psychology behind consumer decision-making, ecommerce can unleash a powerful arsenal of techniques to drive conversions and cultivate customer loyalty.

This article delves into 14 proven psychological tricks for eCommerce sales and strategies.

From leveraging cognitive biases to mastering the art of persuasion, these tactics are designed to resonate with your target audience and empower them to make purchase decisions confidently.

So, fasten your seatbelts as we embark on the most critical journey of growing an eCommerce.

1. Price anchoring

Price anchoring is a common psychological trick influencing people’s perception of a product’s value. It is a trick that can help you establish a base and a discounted price to showcase the offer customers are getting.

And we see examples of this trick all the time.

It presents the product as expensive at first and then discounts it.

Because customers know the base price, the lower price is always perceived as a good deal.

Williams Sonoma, a home furnishings retailer, is known for using a price anchoring trick. By listing original high prices next to discounted prices, Williams Sonoma makes the discounted prices seem more attractive.

Price anchoring can be a very effective way to increase sales.

However, it is essential to use this trick carefully. If you anchor people with a price that is too high—unreasonable pricing to keep it short—they might not even be willing to buy your product at any cost.

2. Scarcity principle

The scarcity principle is another common eCommerce psychological trick to influence purchasing decisions.

This trick works by showcasing a product’s scarcity and making it more desirable. This trick is used in various ways, so let’s go through them.

One way is to limit the availability of a product. A typical example of this is “limited edition” products.

While most brands can easily replicate the production of the product, they only sell/create a limited number of products. This exclusivity creates lower supply, high demand, and hence high pricing.

Another way to create a sense of scarcity is to make people feel like they are competing for a product.

We most commonly see it on Amazon. The eCommerce giant often uses the scarcity principle by displaying messages like “Only 3 items left in stock“. This surely creates a sense of urgency and encourages immediate purchases.

The scarcity principle is a very effective way to increase sales. But it’s essential to be aware that excessive use of this trick might immunize your customers of it over a long time.

3. High manufacture cost portrayal and presentation

High manufacturing cost portrayal is a psychological trick that can inflate the cost of products and increase the perceived value.

This trick works by making people think that a product is more expensive than it is. Prominent brands use ecommerce photo editing services to make their products look more expensive and luxurious.

This includes clean background, product alignment, color consistency, lint removal, spot removal, retouching, and more.

Next is the line is the branding and the story behind the brand. Tiffany & Co is a luxury jewelry brand that emphasizes the craftsmanship and high-quality materials used in their products.

Through marketing campaigns, high-quality presentation, and creating the perception of exclusivity, Tiffany & Co justify its luxury prices and present itself as a premium brand.

4. Fear of missing out (FOMO)

FOMO, or Fear of missing out, is among the most famous psychological phenomena—thanks to social media and Genz lingo.

FOMO is the Fear that one might miss out on something others have. This could be a trend, a product, an experience, and everything a social group is involved in.

This Fear can be compelling and lead people to buy products they don’t need.

There are a few different ways to create FOMO. One way is to make people feel like they are missing out on a trend.

Supreme is one of the most popular brands that use FOMO as their bait for sale. While the products range from Tees to crossbars and brick—Supreme follows a drop strategy.

They release limited products for a limited time, and once the products are sold out—they are never restocked.

This scarcity creates a rush. People who have it flaunt it widely on Social media and on the street.

This creates a viral effect where hence people in the target group feel like they are missing out. Hence the next drop is even more successful and viral.

5. Social validation

Social validation is a psychological phenomenon embedded within the human psyche. Being accepted by the tribe and valued by the tribe is highly valuable to each individual.

And this factor can be used to influence purchasing decisions of the customers. This trick makes people feel like they are making the right decision by buying what others already trust.

Reviews, recommendations, and user-generated content are some common social validation signals.

There are several ways to create social validation for an eCommerce brand. And the most common method is through positive reviews of your product.

Another way is to show people that other people are buying your product. Motivating customers to use your product and creating social media content can create social validation for your customers.

Travel website TripAdvisor uses social validation by prominently displaying user reviews and ratings for their travel experience, helping new potential customers make informed decisions. And this is based on the experiences of others.

6. Loss aversion

Unlike other eCommerce psychological tricks that tell a customer what to do, loss aversion influences what not to do or, more commonly, what a customer can avoid.

Loss aversion is a psychological bias that makes people more likely to avoid losses than achieve gains. A typical example of a Loss aversion trick in practice is using a Countdown timer or flash sales.

If someone is participating in a flash sale or an offer with a timer—they are aware of the risk—the risk of losing the opportunity to get a product at the best price.

And this has proven to be highly effective as well. SaleCycle shared that adding a countdown can increase the click-through rate by 30% and conversion by 200%.

7. Micropayments

Micropayments are the small payments that customers can make over a more extended time after buying a product. The most common term for the same is Buy Now Pay Later schemes.

These are like financial aids that allow customers to buy a product now and pay for the product in small installments in upcoming weeks.

Result? Increase in sales. Top fashion brands like ASOS, H&M, & Nike saw an average of 15% increase in their sales. Additionally, these modes of payment reduced cart abandonment by 30%.

And all this is due to the lower barrier and stakes on the line. Rather than making a $100 purchase, people can opt for a $25 weekly payment and quickly get the product.

Micropayments are effective because they make it easy for people to make small purchases. This is important because people are more likely to purchase if they don’t have to think about it too much.

8. Bundling

Bundling is an eCommerce and psychological marketing trick mainly used to increase sales and cart value. Here, rather than telling customers to buy more/different types of products together as a package.

Bundling is practical because it seems like you are getting a good deal. Firstly, giving a bulk discount is easier for eCommerce. Order handling becomes much easier, and all sales KPIs are positively impacted.

For customers, it gives them the best deal, helps them pick the best combination of products, and saves time on shipping costs.

Dollar Shave Club uses one of the best examples of bundling psychological tricks.

It is a subscription service offering razors, shaving cream, and other shaving products. They have increased the average order value and kept customers subscribed for a more extended time.

On the other hand, customers receive their self-care package every month without friction to place an order each month.

9. Decoy effect

The Decoy effect is a gray psychological trick that must be used wisely. To use this strategy, eCommerce presents multiple options for the customers to choose from.

And while it might seem like a customer has multiple options, eCommerce puts a decoy that influences the customer’s buying decision.

Let’s understand this better with an example here. The Economist is a popular magazine that is available both online and offline. They experimented with three subscription options:

• $59 for Online only
• $125 for Print only
• $125 for Print & Online

Adding the second option of Print only is an excellent example of the decoy effect. Why would someone get only one when they can get both at the price of both online and offline subscriptions? Right?

Well, here’s something we must note. We have already neglected the first while discussing the best deal between the second and third options.

That’s how a decoy influences the buying decision. While many customers would go for the Print & Online option—because of the decoy—they might simply ignore the first one.

10. The Gruen Transfer

The Gruen Transfer is a psychological phenomenon in that transfers create a sense of excitement and urgency in shoppers. As you might know, the most common name of this phenomenon is the IKEA effect.

IKEA is a home furnishing store chain where people can buy disassembled, DIY furniture rather than ready-made furniture at the best price.

The Gruen transfer comes into play when customers build the furniture by themselves. They are more involved with the product and brand and are hooked on the experience.

This often reflects in word-of-mouth marketing and returning customers, which helps a brand grow.

11. Periodic Equivalent Pricing

Periodic Equivalent Pricing is a psychological pricing trick for eCommerce with the subscription. This trick suggests showcasing the cost per unit rather than telling customers about the total subscription price.

Unlike regular online retailing, subscription retail has to convince customers to sign up for a monthly payout. And while the overall value of the subscription might be the same, breaking it down to each unit makes it appear more accessible to a broader audience.

Let’s understand this with a suitable example of Blue Apron, a meal kit delivery service that delivers pre-portioned ingredients and recipes to customers’ doorsteps.

A customer can choose the number of servings and meals per week. Look at their product page to understand how Periodic Equivalent Pricing is used.

Instead of presenting the total price of the plan, Blue Apron tells us the cost per meal we are paying. It makes a convincing case for many and helps eCommerce boost its subscription rate.

12. Parasite placements

Just like the Decoy effect we discussed, Parasite placement is a psychological trick that relies on the placement of the product. But here’s a difference.

While using the Decoy effect, eCommerce puts up an offer that isn’t worth it since customers are getting the same value at a lower price.

In Parasite placement, on the other hand, eCommerce places its high-end products near affordable options.

This is to make their high-end product look like a better deal or premium set of products. Let’s take the example of Apple. The tech giant often positions its higher-priced products next to lower-priced alternatives in retail stores.

While for some brands, this might put them at a disadvantage, for Apple, it makes their products appear more premium and desirable by comparison.

13. Simple pricing strategy

A simple pricing strategy is a psychological trick at almost every retail store. Instead of pricing as a whole, eCommerce reduces the pricing just a little.

Ecommerce will price their products at $19.99 instead of $20. The change is tiny and might barely make a difference for a customer, but in terms of conversion, it draws attention. 

Entrepreneur.com has shared pricing a product just a penny or two below the dollar can increase conversion by 21-34%.

For a penny less, this is a great bargain for any eCommerce.

14. Baader-Meinhof phenomenon

The Baader-Meinhof phenomenon, also known as the Frequency illusion, is a psychological phenomenon that can be used to increase sales. This phenomenon makes people think they see something more often than they are.

Brands like Nike effectively utilize the Frequency illusion by collaborating with athletes, celebrities, and influencers and launching limited-edition collections. 

This creates a sense of ubiquity, making their products more noticeable and driving consumer interest.

Retailers can use this phenomenon to increase sales. One can use this phenomenon and create social media campaigns and specific product placements to gain desirable attention.

Conclusion

These are just a few of the many psychological tricks that can be used to increase ecommerce sales. By understanding these tricks, ecommerce businesses can use them to increase sales.

However, it is essential to use these tricks carefully. If you use these tricks too often, or if you use them in an unethical way, you could alienate your customers.

Testing different psychological tricks to see what works best for your business is also essential. What works for one business might not work for another company.

By understanding and using psychological tricks, ecommerce businesses can increase their sales and grow their businesses.

Featured image by Pixabay on Pexels

The post 14 Psychological Tricks To Grow Your Ecommerce Sales appeared first on noupe.

Are you trying to find the best WooCommerce plugins to increase your sales?

WooCommerce is a popular platform for building small to large-scale online businesses with the aid of WordPress plugins. But you need to choose the right plugin to maximize your business potential. There are a lot of plugins available to offer the greatest customer experience and boost conversion in your store. 

We have shortlisted some of the top plugins to skyrocket sales in your WooCommerce store. 

Let’s get started. 

1. WooCommerce Product Recommendations

Product Recommendations for WooCommerce is a smart plugin to create multiple product recommendation campaigns on your website. You can generate up-sell, cross-sell, top-rated, frequently bought together, or create custom recommendations in your WooCommerce store. You can build these campaigns strategically and increase sales in your online store. 

This plugin comes with built-in recommendation templates that aid you in creating your campaign instantly. You can choose different conditions to display your products. Consider, for the out-of-stock product, you can showcase similar products that customers are interested in. This will increase the chances of purchase instead of leaving the cart empty. 

Highlights:

• Create custom product recommendations on your site. 
• Customize the slider that suits your store layout.
• Display product recommendations on different pages.
• Run multiple recommendation campaigns at a time.

Price:

The premium plugin price starts from $89/year. 

2. Live sales notification for WooCommerce

Live sales notification for WooCommerce lets you showcase the customer’s purchase notification to visitors. This will create fear of missing out among the visitors and encourage them to purchase more products from your online store. The visitor will gain confidence in buying products from your site. 

The plugin will let you display unlimited product purchase notifications in your store. If your store doesn’t have many products to feature, then you can go for virtual orders notification. This notification can be generated from visitors’ recently viewed products. You can also create custom messages for this notification. 

Highlights:

• Show original orders placed as live sales notifications. 
• Features unlimited product purchase notifications.
• Use shortcodes to customize the messages.
• Set the how much old order to extract for notifications.

Price: 

The premium plugin price starts from 

3. CartFlows

CartFlows plugin simplifies the checkout process in the WooCommerce store. This plugin helps customers to complete the purchase without any distractions. It allows you to build a modern checkout experience that outshines the default WooCommerce checkout. You can easily optimize the checkout funnel with this plugin. 

The plugin enables you to build a multi-step funnel with a single click or build a custom funnel based on your store requirements. You can use real-time data to manage the funnel and get insight to improve the funnel to grow your revenue. With this plugin, you can set a strategy to keep your customer engaged. 

Highlights:

• Edit, remove, or reorder fields on the checkout page.
• Ready-to-use checkout templates are available.
• Control the coupon box to display or not.
• Enable autocomplete Google address.

Price: 

The premium plugin price starts from $79/year

4. Smart Coupons for WooCommerce

WooCommerce Smart Coupons is an advanced coupon generator plugin that allows store owners to create numerous discounts, like BOGO, conditional-based coupons, store credit, free shipping, storewide discounts, bulk discounts, cart abandonment coupons, and more. You can configure the auto-apply option for those coupons. 

If your store has an abundance of coupons, there’s no need to worry. This plugin makes it easy to manage them all in one convenient location and sort them into different categories. You can easily manage your discount campaign in your WooCommerce store. You can also view the existing, used, or expired coupons on the “My Coupon” page under the My Account section in your store. 

Highlights:

• Email coupons based on different order statuses.
• Personalize the coupon layout that matches your site.
• Generate bulk coupons and export them as CSV with ease.
• Create a count-down coupon banner on your WooCommerce store.

Price: 

The premium plugin price starts from $69/year. 

5. TI WooCommerce Wishlist

TI WooCommerce Wishlist is the best plugin to create and manage the wishlist page on your website. This plugin allows customers to add their desired products to the wishlist with a click. When the customer revisits your online store, they can purchase the desired products directly from the wishlist in the WooCommerce store. 

This plugin lets you create a separate wishlist page on the website. You can view the bundle of wishful products in a place. You can select multiple products from the wishlist and add them to the cart right away. The plugin also enables customers to share their wishlists. This will attract more new customers & increase website visibility. 

Highlights:

• Determine the placement of add to wishlist button.
• Update the wishlist to edit the number of products.
• Purchase directly from the wishlist page to the cart. 
• Drag and drop to shift products on the wishlist page.

Price: 

The premium plugin price starts from $79/year.

6. Sumo

Sumo plugin enables you to create timely popups across your WooCommerce website. The plugin lets you build a beautiful popup for your visitors that convinces them to subscribe to your website. You can easily follow up with subscribers and convert them into potential customers. You can track the ROI and sales that you make throughout the campaign. 

The plugin allows you to create an automated drip campaign for subscribers. It will help you grow your email list and increase conversion with ease. This plugin has a perfect solution for website visibility; it will let you add a share button on your site. It allows visitors to share any content or products on social media.  

Highlights:

• Create highly converting opt-in forms for visitors.
• Add social media sharing button on your site effortlessly.
• Build an automated drip campaign to follow up with guest users.
• Make unique discounts for popups to increase average order value. 

Price: 

The premium plugin price starts from $39/month. 

7. Tidio

Tidio is the best plugin to configure live chat on your WooCommerce website. It provides an exceptional customer experience solution and converts visitors into valuable customers. The plugin comes with a pre-built chatbot that’s ready to launch on your site with a click. With this plugin, you can offer 24/7 support to solve visitors’ queries. 

This live chat option enables you to troubleshoot any issues for visitors. A simple ticketing system to resolve and manage any request from guest users or customers. The plugin also lets you set a route to the point of reaching the right department. It helps to divert chat to the respective person and solves any queries instantly.

Highlights:

• Check order history or recommend products directly in the chat.
• Compatible with third-party plugins like Mailchimp, Omnisend & more.
• Solve any query immediately with the pre-build chatbot.
• Enable automated or talk to your visitor on the live chat.

Price:

The premium plugin price starts from $29/month (Get the chatbot & communicator separately at $19/month).

8. WebToffee WooCommerce Gift Cards

WooCommerce Gift Cards plugin allows you to create unlimited gift cards for your online store. You can use the multiple existing templates or use the custom template to create a gift card. The plugin lets you determine what to display on the gift card. You can enable users to schedule the gift card to send via email. 

You can generate gift cards based on the order status. This plugin allows the customer to purchase a gift card using store credit. You can enable the option to use gift cards with other coupons from your store. You can also set an expiration period for the gift card. The plugin lets the customer email or print gift cards from your store. 

Highlights:

• 20+ pre-defined gift card templates are available. 
• Manage all user credits in a single dashboard.
• Decide when to calculate the tax for store credit.
• Edit the gift card amount as required.

Price:

The premium plugin price starts from $99/year. 

9. Popup box

Popup box plugin is powerful for creating any type of popup on your WooCommerce website. The plugin comes with an amazing popup design to create conventional popups on your site. It allows you to build 15 types of popups. You can use those popups strategically to increase your email list, average order value, and sales. 

The plugin lets you trigger the popup based on the click or page load in your WooCommerce store. You can choose a specific page to display a popup for your visitors. You can customize the popup’s title, descriptions, layout size, and more. The plugin also lets you determine the autoclose timing of popups on your WooCommerce site. 

Highlights:

• Create a custom popup type using the shortcode or HTML.  
• Build a responsive popup design on your website.
• Display popup on the specific post or page.
• Decide the session time-out for the popup.

Price:

The premium plugin starts from $39 (one-time payment).

10. Pretty Links

Pretty Links is a great plugin to generate a plethora of unique links for your website. The plugin helps you to optimize the link, track, manage, and share URLs from your website. This plugin is handy when it comes to creating an affiliate program in your WooCommerce store. You can create custom links with random characters or make your own slug. 

The plugin can turn your long-form URL into a short one in seconds. The plugin supports and creates 301, 302, and 307 redirect links. You can make a one-click shareable link with this plugin. The plugin also lets you track the performance of each link, and you can get a report filter by specific clicked links, date ranges, and more. 

Highlights:

• Fix broken links with multiple redirection links easily.
• Track the number of clicks per day and optimize your links.
• Generate random characters for slug or create your own slug.
• Configure autopilot mode to share your content on social media.

Price: 

The premium plugin price starts from $99.50/year. 

11. WooCommerce Best Sellers

WooCommerce Best Sellers is the best plugin to promote your products by highlighting the top items in your eCommerce store. The plugin lets you create a slider to display the products with custom badges. You can showcase the slider on different pages, like the category page, shop page, and product page. You can determine strategic placement and elevate your sales. 

The plugin comes with a separate best-seller page where you can view all created sliders in a place. For selecting products for the slider, you can display products based on the sales done. You can set a limit to feature the number of products on these sliders. The plugin lets you customize the appearance of the product slider. 

Highlights:

• Highlights top-selling products based on categories.
• Supports both variable and simple products.
• Add best seller or custom label to the slider.
• Swiper and bxslider are available.

Price: 

The premium plugin price starts from $49/year. 

12. FunnelKit

Funnelkit is the best automation marketing plugin that allows you to create multiple email campaigns for your WooCommerce store. This plugin helps to visualize the workflow of your marketing funnel. You can use the drag-and-drop builder to create beautiful emails and engage with your leads via campaigns. It simplifies the marketing automation process. 

Using this plugin, you can create multiple campaigns for cart abandonment, post-purchase follow-up sequences, customer win-back emails, and much more. You can customize these emails that resonate with your brand. You can also track the email click-through rate and optimize your campaign to increase conversion. 

Highlights:

• Add delays to trigger your email sequence for customers.
• Multiple pre-built email marketing campaigns are available.
• Create a segmented automated email campaign for cart abandonment.
• Set auto-end for marketing campaign when a customer completes the purchase.

Price:

The premium plugin price starts from $99.50/year. 

13. Product Feed PRO for WooCommerce

Product Feed PRO for WooCommerce enables you to create product feeds for various marketing channels, like Facebook, Google Shopping, Pricerunner, Remarketing, and more. There are 100+ pre-defined templates to create product feeds for multiple search engines, comparison shopping engines, and marketplaces. 

With this plugin, you can create custom product feeds for your online store. You can use unlimited products for the feed. You can use advanced filters to sort products based on certain conditions. It will help you to display effective feeds or run ads for the right products to customers. You can create a campaign based on highly sold products and boost your profits. 

Highlights:

• Create unlimited numbers of product feeds.
• Determine attributes to insert or exclude from feeds.
• Add custom fields for your product feeds.
• Configure Google Analytics UTM tracking codes for feeds.

Price:

The premium plugin price starts from $96/year (ex VAT).

Conclusion

To build a profitable online store, you can use multiple plugins to create additional features to sell your products. Keep in mind that you should create a campaign that doesn’t impact the quality of your WooCommerce site. This will help you to earn a long-run loyal customer base for your store. 

In this post, we have compiled a list of the best WooCommerce plugins that are preferred by most store owners. These plugins will help you launch high-converting campaigns and upscale your sales of the online store. 

Featured Image by Davide Baraldi

The post 13 Best WooCommerce Plugins to Increase Sales in 2023  appeared first on noupe.

We all agree that 3D effects are cool, right? I think so, especially when they are combined with subtle animations. In this article, we will explore a few CSS tricks to create stunning 3D effects!

“Why do we need another article about CSS 3D effects… aren’t there already a million of those?” Yes, but this one is a bit special because we are going to work with the smallest amount of HTML possible. In fact, this is the only markup we will use to craft some pretty amazing CSS effects for images:

<img src="" alt="">

That’s it! All we need is an tag. Everything else will be done in CSS.

Here’s how it’s going to work. We are going to explore three different effects that are not linked to each other but might borrow a little from one another. You don’t need to read the entire article in one sitting. Actually, I suggest reading one section at a time, taking time to understand the concepts and what the underlying code is doing before moving on to another effect.

Table Of Contents

• CSS 3D Shine
• CSS 3D Parallax
• CSS 3D Rotation

CSS 3D Shine

For the first effect, we are going to add a shine animation to the image, as well as a slight rotation when hovered.

The green box illustrates the gradient where the blue lines define the color stops we used. Initially, it’s placed at 100% 100%, and on hover, we slide it to 0 0. The slide effect will move the diagonal part of the gradient (the opaque part) along the image to create the shine effect.

Here is the full demo again. I’m even including a second variation for you to tear apart and investigate how it works.

The clip-path defines the clipped area, and we need that area to remain fixed. That’s why we added a translation on hover to move the image in the opposite direction of the clip-path.

Here’s how that works. First, we add some padding to the top and the bottom of the image and apply an outline that is semi-transparent black.

Second, we apply a negative outline-offset so that the outline covers the image on the left and right sides but leaves the top and bottom alone:

img {
  --d: 18px;  /* depth */

  padding-block: var(--d);
  outline: var(--d) solid #0008;
  outline-offset: calc(-1 * var(--d));
}

Notice that I have created a variable, --d, that controls the thickness of the outline. This is what gives the image depth.

The last step is to add the clip-path. We need a polygon with eight points for that.

The red points are fixed, and the green points are ones that we will animate to reveal the depth. I know it’s far from a 3D box, but this next visual, where we add the rotation, gives a better illustration.

Initially, the image is rotated with some perspective. The green points on the right are aligned with the red ones. Thus, we hide the outline on that side to keep it visible only on the left side. We have our 3D box with the depth on the left.

On hover, we move the green points on the left while rotating the image. Halfway through the animation, all the green points are aligned with the red ones, and the rotation angle is equal to 0deg, hiding the outline and giving the image a flat appearance.

Then, we continue the rotation, and the green points on the right move while the left ones remain in place. We get the same 3D effect but with the depth on the right side.

Bear with me because the next block of code is going to look really confusing at first. That’s due to a few new variables and the eight-point polygon we’re drawing on the clip-path property.

@property --_l {
  syntax: "<flength>";
  initial-value: 0px;
  inherits: true;
}
@property --_r {
  syntax: "<length>";
  initial-value: 0px;
  inherits: true;
}

img {
  --d: 18px;  /* depth */
  --a: 20deg; /* angle */
  --x: 10px;

  --_d: calc(100% - var(--d));
  --_l: 0px;
  --_r: 0px;

  clip-path: polygon(
    /* The two green points on the left */
    var(--_l) calc(var(--_d) - var(--x)),
    var(--_l) calc(var(--d)  + var(--x)),

    /* The two red points on the top */
    var(--d) var(--d),var(--_d) var(--d),

    /* The two green points on the right */
    calc(var(--_d) + var(--_r)) calc(var(--d)  + var(--x)),
    calc(var(--_d) + var(--_r)) calc(var(--_d) - var(--x)),

    /* The two red points on the bottom */
    var(--_d) var(--_d),var(--d) var(--_d)

    );
  transition: transform .3s, --_r .15s, --_l .15s .15s;
}

/* Update the points of the polygon on hover */
img:hover{
  --_l: var(--d);
  --_r: var(--d);
  --_i: -1;
  transition-delay: 0s, .15s, 0s;
}

I’ve used comments to help explain what the code is doing. Notice I am using the variables --_l and --_r to define the position of the green points. I animate those variables from 0 to the depth (--d) value. The @property declarations at the top allow us to animate the variables by specifying the type of values they are ().

Note: Not all browsers currently support @property. So, I’ve added a fallback in the demo with a slightly different animation.

After the polygon is drawn on the clip-path property, the next thing the code does is apply a transition that handles the rotation. The full rotation lasts .3s, so the green points need to transition at half that duration (.15s). On hover, the polygon points on the left move immediately (0s) while the right points move at half the duration (courtesy of a .15s delay). When we leave the hovered state, we use different delays because we need the right points to move immediately (0s) while the left points move at half the duration.

What’s up with that --x variable, right? If you check the first image that I provided to illustrate the clip-path points, you will notice that the green points are slightly shifted from the top and bottom edges, which is logical to simulate the 3D effect. The --x variable controls how much shifting takes place, but the math behind it is a bit complex and not easy to express in CSS. So, we update it manually based on each case until we get a value that feels right.

That gives us our final result!

See the Pen 3D images with hover effect by Temani Afif.

Wrapping Up

I hope you enjoyed — and perhaps were even challenged by — this exploration of CSS 3D image effects. We worked with a whole bunch of advanced CSS features, including masks, clipping, gradients, transitions, and calculations, to make some pretty incredible hover effects for images that you certainly don’t see every day.

And we did it in a way that only needed one line of HTML. No divs. No classes or IDs. No pseudo-elements. Just a single tag is all we need. Yes, it’s true that more markup may have made the CSS less complex, but the fact that it relies on a plain HTML element means the CSS can be used more broadly. CSS is powerful enough to do all of this on a single element!

I’ve written extensively about advanced CSS styles for images. If you’re looking for more ideas and inspiration, I encourage you to check out the following articles I’ve published:

• “CSS Effects For Stunning Images” (Verpex)
• “Fancy Image Decorations: Single Element Magic” (CSS-Tricks)
• “Fancy Image Decorations: Masks and Advanced Hover Effects” (CSS-Tricks)
• “Fancy Image Decorations: Outlines and Complex Animations” (CSS-Tricks)
• “How to Add a CSS Reveal Animation to Your Images” (SitePoint)

I also run a site called CSS Tip that explores even more fancy effects — subscribe to the RSS feed to keep up with the experiments I do over there!

Further Reading On SmashingMag

• “How To Create Advanced Animations With CSS,” Yosra Emad
• “3D CSS Flippy Snaps With React And GreenSock,” Jhey Tompkins
• “Understanding Easing Functions For CSS Animations And Transitions,” Adrian Bece
• “Create Responsive Image Effects With CSS Gradients And aspect-ratio,” Stephanie Eckles

Social media has come a long way since its inception, and it’s not slowing down anytime soon. In the year 2022, the number of active social media users increased by 190 million, indicating 4.2% annual growth, with 6 new users joining every second.

With new platforms and features popping up all the time, it can be hard to keep up. But it’s essential to stay informed about the latest trends and platforms, as they can provide new opportunities for businesses and individuals to connect with their audiences and build their online presence. 

In this blog post, we’ll look at some of the most promising social media platforms and trends that are gaining popularity and how they can be leveraged to grow your business. 

So, let’s dive in and explore the future of social media together.

5 Social Media Platforms Marketers Should Watch in 2023

As we all know, social media platforms are constantly changing and evolving. What was popular last year may not be popular this year. That’s why it’s important to always be on the lookout for new and upcoming platforms that could potentially take off. 

TikTok

Source:

This short-form video platform has taken the world by storm, with users spending an average of 52 minutes per day on the app. This is significantly higher than other social media platforms such as Facebook (24 minutes) and Instagram (32 minutes). 

The platform is known for its short-form, user-generated videos and its algorithm-driven feed. TikTok is a great way to reach a younger demographic and build brand awareness through creative and engaging content.

Instagram Reels

Since launching in July 2020, Instagram Reels has been a hit with users and creators alike. Not only is Reels a great way to engage with your audience, but it’s also a powerful marketing tool. Reels are a great way to connect with your followers personally and show them the real you.

Source: 

Reels offer a variety of content types, from quick fixes like tips and tricks videos to longer-form content like behind-the-scenes footage and interviews. There’s something for everyone on Reels, making it the perfect platform for both personal and professional use. 

Clubhouses 

Clubhouse is a newer social media platform that is based on audio-only conversations. The platform has grown in popularity in recent months, and it is a great way for brands to connect with their audience in a more intimate and authentic way. Clubhouse is still in its early stages, but it has the potential to become a dominant tool for marketers in the coming year.

Source: 

Clubhouses allow users to join ‘rooms’ on topics they’re interested in, similar to how one would join a chatroom on other platforms. However, what sets Clubhouses apart is that these rooms are populated by experts on the topic at hand. This makes it a great place to go if you’re looking for a thoughtful and insightful discussion on a variety of topics. 

Twitch

Twitch is a live streaming platform primarily used for gaming content, but it has also been used for other types of content, such as music and art. Twitch has a large and engaged audience, and it is a great way for brands to reach gamers and other niche audiences in real-time. 

Additionally, Twitch has also added new features like watch parties, which further enhance the social experience of the platform. 

Pinterest

Pinterest is a visual discovery platform often used for inspiration and planning. In 2021, the platform reported 459 million monthly active users. 

Source: 

The platform has a large and engaged audience, and it is a great way for brands to showcase their products and services in a visually appealing way. Pinterest is also a great tool for driving traffic to a brand’s website.

6 Social Media Trends for 2023 and Beyond

Here are the top social media trends for 2023 and beyond that are sure to give your brand a leg up over the competition:

User-Generated Content Tops The Chart

Users are becoming more savvy about what they share online and are increasingly likely to trust the content that comes from their peers.

UGC is often seen as more authentic and trustworthy than content created by brands. As a result, it can be highly effective in building brand loyalty and trust. UGC can also be repurposed and shared by brands to increase their reach and engagement. 

For instance, GoPro, the action camera brand, is well-known for its user-generated content campaigns, which feature stunning photos and videos captured by customers using GoPro cameras. 

Source: 

The brand regularly shares this content on its social media channels and website, which helps to showcase the capabilities of its products and inspire others to capture their own adventures.

Social media platforms are also likely to continue to invest in tools and features that make it easier for brands to find, curate, and share UGC.

Youtube Shorts Is On Rise 

Youtube Shorts is a new feature that allows users to create and share short, vertical videos on YouTube. YouTube Shorts crossed 30 billion views per day in 2022. The feature is similar to TikTok, and it is designed to make it easy for users to create and share videos on the platform without needing expensive equipment or editing software.

Source: 

This feature will likely appeal to a wide range of users, from individuals and influencers to brands and publishers. It is expected to be a great way for businesses and creators to create engaging and shareable content that can help to increase reach and engagement. 

Artificial Intelligence Is Ruling

AI is drastically changing how we interact with technology, and it will only become more prevalent in the years to come. Social media platforms are using AI to provide personalized recommendations, improve the overall user experience, and automate various tasks. Some of the ways that AI is being used in social media include the following:

Content curation and personalization: AI algorithms can be used to curate content based on a user’s preferences and behavior and can also be used to personalize the news feed, search results, and other content on a platform.

Image and video recognition: AI can be used to automatically tag and organize images and videos, as well as identify and remove inappropriate content.

Chatbots and virtual assistants: Social media platforms are increasingly using chatbots and virtual assistants such as Microsoft’s Cortana and Amazon’s Alexa powered by AI to provide customer support and answer user questions.

Sentiment analysis: AI can be used to analyze social media posts and comments to identify patterns in user sentiment, which can be used to inform marketing and customer service strategies.

Instagram Creators Are Everywhere 

Instagram creators can be found everywhere, from niche communities to mainstream culture. They create a wide range of content, from fashion, beauty, food, travel, and lifestyle to education, entertainment, and activism. 

https://www.instagram.com/p/CQTgu7sDo5A/?utm_source=ig_web_copy_link

Many creators like Jameela Jamil are also using Instagram for social causes and advocacy. They are using their reach and influence to raise awareness and advocate for issues they care about. 

Jameela Jamil, an actress and advocate for body positivity, uses her Instagram account to promote self-acceptance and to challenge societal beauty standards. She also advocates for mental health awareness and has been vocal about her own experiences with anxiety and depression.

Instagram creators are also likely to use a variety of monetization strategies to monetize their content and audience. This can include sponsored posts, affiliate marketing, merchandise sales, and more.

Go Shopping on Social Media

54% of people on social media use it to research products. Social media platforms are increasingly adding e-commerce features, such as shoppable posts and in-app checkout, making it easier for users to purchase products directly from social media. This allows brands and businesses to drive sales and revenue directly from their social media presence.

Source: 

Glossier, the skincare and cosmetics brand, has effectively used Instagram to promote its products and allow users to purchase directly from their social media feed. They use shoppable posts and Instagram stories to showcase their latest collections and drive sales.

Some of the ways that social commerce is being used on social media include:

Shoppable posts: Brands and businesses can now tag products in their posts and stories, allowing users to purchase products directly from their social media feed.

Live streaming: Social media platforms like Instagram and Facebook Live have been used by brands and businesses to showcase their products and take orders in real time.

Social marketplaces: Social media platforms like Instagram, Facebook, and TikTok have started to develop their own marketplaces where users can purchase products directly from the platform.

Virtual Reality and Augmented Reality: Social media platforms are starting to incorporate VR and AR technology to allow users to virtually try on clothes or see how furniture would look in their homes before making a purchase.

Also Read: The benefits of shopping in an ecommerce marketplace

Customer Support Is A Priority On Social Media 

Social media platforms, such as Facebook, Twitter, Instagram and TikTok, are being used increasingly as a primary means of customer support. Businesses are expected to use social media to provide customer service to 70% of customers so that they can receive support in real time, 24/7.

Hootsuite is a perfect example of a brand that uses social media as a primary channel for offering customer support to its users. 

Source: 

Hootsuite, the social media management platform, has an active presence on Twitter and uses the platform to provide real-time customer support. They have a dedicated customer support handle (@Hootsuite_Help) and are known for their quick response time and detailed assistance.

Final Words 

Social media is constantly evolving, and new platforms and trends are always emerging. TikTok, Clubhouse, and short-form video content are some of the most exciting new platforms and trends to watch, while social e-commerce and interactive and immersive experiences are also on the rise. 

As social media continues to play an increasingly important role in our daily lives, it will be interesting to see how these new platforms and trends develop in the future.

Featured Image by Alexander Shatov on Unsplash

The post Emerging Social Media Platforms and Trends to Watch in the Future appeared first on noupe.

Logistics and transportation industries form the backbone of global commerce, driving the interconnectedness of markets and industries. While the backbone is sturdy, it’s not immune to challenges. Congestion, transparency, efficiency, security, and scalability pose significant difficulties that often hamper smooth operations. Amid these obstacles, one term that has surfaced as a potential game-changer is the transportation management system (TMS). These platforms offer promising transport management solutions to the complex puzzle of the industry.

Before we delve into solutions, it’s crucial to dissect the problems that the industry faces. At the heart of most issues in transportation management are based on inefficiency and lack of transparency. Goods being transported might get delayed due to various unforeseen circumstances such as weather, traffic, or mechanical failure. Simultaneously, the lack of real-time tracking can leave transportation businesses and consumers in the dark about the whereabouts of their goods. These problems, along with numerous others, result in financial losses, wasted time, and reduced customer satisfaction.

The Role of Information Technology in Transportation Management

In this evolving digital era, IT management solutions have been steadily permeating various sectors, including the transportation industry. Already, a shift is visible, where traditional practices are being replaced or complemented by IT-driven methods.

One notable success story in this realm is the shipping giant, Maersk. In 2017, a massive cyberattack severely impacted Maersk’s operations. However, rather than succumbing to the setbacks, the company decided to revamp its digital strategy, investing heavily in IT infrastructure and cybersecurity. Today, Maersk is known for its robust digital platform that enhances logistics efficiency and security.

Exploring Tech Trends in Transport Management

Currently, there are numerous technologies used to solve transportation management problems. Here are some of the most promising:

• IoT and Real-Time Tracking: IoT devices, such as GPS and RFID tags, enable real-time tracking of goods, providing businesses and customers with updated information about the progress of their shipments.
• AI and Machine Learning for Predictive Analytics: These technologies analyze vast amounts of data to predict potential delays and optimize routes, improving efficiency and reducing costs.
• Blockchain for Secure, Transparent Transactions: Blockchain technology can offer a secure, immutable record of transactions, increasing transparency and reducing the possibility of fraud or dispute.
• Autonomous Vehicles and Drones in Delivery Systems: Self-driving trucks, delivery drones, and other autonomous vehicles could revolutionize delivery systems, enabling faster and more efficient transportation of goods.

Assessing the Benefits and Challenges of Implementing Management Solutions in Transportation

It cannot be denied that IT solutions have transformative potential in transportation management. It can enhance operational efficiency, reduce costs, improve customer satisfaction, and offer numerous other benefits.

However, implementing a transport management software isn’t without its hurdles. These include the high initial investment, the need for skilled personnel, potential privacy and security issues, and resistance to change from employees or stakeholders. Therefore, transportation businesses must weigh these challenges against the potential benefits before embarking on a digital adoption journey.

How to Implement Digital Management Solutions in Transportation

The first step towards implementing management solutions in transportation is to identify the specific needs of a business. Are the current challenges more related to efficiency, transparency, or security? Or perhaps a combination of these? Identifying these needs can help in setting clear goals for what you hope to achieve with the transport management software.

Research and Selection of Suitable Management Software in Transportation

Once the needs and goals are set, the next step is researching available solutions. The market is full of a variety of tools and technologies, each with its own set of features, benefits, and challenges. It’s crucial to select a solution that aligns well with your business needs and goals.

Implementation and Training

After selecting a transportation management software, the focus shifts to its implementation. This involves integrating the solution into the existing operations, making necessary adjustments, and training the staff. While implementing, it’s also essential to have contingency plans in case of any hiccups or issues.

Evaluation and Adjustment

Post-implementation, it’s vital to continuously monitor and evaluate the effectiveness of the IT solution. Are the goals being met? If not, what adjustments can be made to improve the outcomes? This process of evaluation and adjustment is ongoing and integral for the successful utilization of transportation management solutions.

Future Outlook

Looking ahead, the integration of digital technologies in transportation management is likely to deepen. As technology continues to evolve, more advanced, efficient, and secure solutions will emerge. Businesses that adapt to these changes and invest in a robust transportation management system (TMS) will likely find themselves better equipped to handle the ever-evolving logistics landscape.

In conclusion, the puzzle of optimizing transportation management may not be easy, but with the right IT solutions, the pieces can fall into place. The road may be long, and the journey challenging, but the potential rewards – increased efficiency, customer satisfaction, and business growth – make it a journey worth embarking on.

Featured image by Quintin Gellar on Pexels

The post Solving the Puzzle: The Role of IT Solutions in Optimizing Transportation Management Processes appeared first on noupe.

According to Statista’s research on big data, 181 zettabytes of data are expected to be created by 2025. One zettabyte equals 1 trillion gigabytes. That’s 1,953,125,000 iPhone 14 pros. Multiply that by 181 and you get a clear visual of just how much data this is. 

As huge as this amount is, it’s good news for marketers. Data is central to successful marketing strategies. It provides insight into customers, marketing practices, and team productivity that you can use to make decisions that drive consistent marketing results. 

However, processing and analyzing huge datasets can be challenging without individuals who specialize in data analytics on your team. In addition, before you get to the analysis part, you must collect the right kind of data. And that starts with understanding the different types available. 

There are various types of data that marketers should leverage to make better marketing decisions and fuel consistent results. We’ll cover five of them below. But first, more on the importance of data in marketing. 

The Importance of Data in Marketing 

Data-driven marketing uses data to help create marketing strategies. You use the insights you pull from the data about customers, content, trends, patterns, and results to inform the decisions you make about your marketing direction. 

It’s one of the most popular approaches to marketing for good reason. Instead of relying on a hunch or what you and your team think is best for the marketing strategy, you can count on accurate data that tells you for certain what’s happening with your customers and marketing tactics. 

For example, let’s say you want to start a presence on social media. You think your target audience frequents Instagram, Facebook, and Twitter. After looking at the customer data you’ve collected thus far, you see that your target audience is actually on TikTok, YouTube, and Pinterest the most. 

If you would’ve gone with what you thought, you would’ve wasted valuable time and marketing resources on channels that your target audience isn’t on. But with the help of customer data, you were able to pinpoint the channels your audience is actually on and can spend your time and resources where results are likely to happen. 

Marketing that leans on insights from data is the smartest approach. That said, you must know which types of data are worth collecting and analyzing first. 

Five Different Data Types Marketers Should Prioritize 

Before we share five different data types that are most significant to marketers, there are a few things to consider to ensure proper use of data. 

First, there’s a risk of bias in data collection and analysis. The individuals who program your data collection tools and analyze the information gathered may exhibit biases like: 

• Confirmation bias: you use customer responses to confirm a belief you already have 
• Expectancy bias: you subconsciously impact participants’ perspectives and responses in your market research 
• Implicit bias: an attitude you possess about a specific group that you aren’t all the way aware of
• Recall bias: how you recall information is different than others 

You can overcome these biases through competitor and SWOT analyses. Gather information from diverse sources and study market trends research to ensure accurate and fair data collection and analysis. 

Second, data security is essential. The last thing you want is to collect all of this private, important data and it fall into the hands of a cybercriminal. Keeping your data safe in a highly secure cloud storage system is a must. 

Lastly, you need a system for collecting data. There are many data collection methods available, including automated data collection software, interviews, focus groups, and surveys. Choose the methods most appropriate for your team and goals, and create a workflow that allows you to constantly collect data and filter it into a central system. 

Now, on to five different data types marketers should collect and take advantage of for insightful decision-making. 

Internal and external data

Most of the data you collect will fall into one of these two categories: internal or external data. Internal data is specific to your company and comes directly from your business’s systems. Sales data, financial data, and human resources data are good examples of internal data. 

External data is available to the public and comes from sources outside of your company. Examples of external data include government data, social media data, and information gathered from search engines. 

Collecting both kinds of data is important because it gives you a well-rounded view of your marketing. You can see it from your team’s perspective as well as the public’s perspective.  

Qualitative data

Qualitative data is data on the qualities or characteristics people possess. If you think about it in terms of customers, it’s essentially the “why” behind what they’re doing. You can gain insight into how your customers think and behave. 

With this data, you can create marketing content and calls-to-action (CTAs) that align with customers emotionally and psychologically, improving the chances of them engaging with your marketing the way you want them to. 

Quantitative data

Quantitative datasets are comprised of hard facts, statistics, and numbers. Quantitative data can show you what your customers are doing, the content they’re viewing the most, how often they’re opening your emails, or which links are getting the most clicks. 

Pair quantitative data with qualitative data, and you can get a 360 view of who your customers are, what they’re doing, and why. 

Demographic data 

Demographic data is one of the most common types of data marketers collect and analyze. It’s the personal and geographic information of your customers. You learn data like your customer’s age, marital status, where they live, employment status, and skill sets. 

Although you won’t get a ton of in-depth information, you get a base for who your customers are. You can use this data to make ideal customer profiles that you reference whenever you create marketing materials to ensure they’ll appeal to the customer base you’re targeting. 

Psychographic data 

Psychographic data gives you insight into things about your customers that are beyond basic demographic information. You can learn the following with psychographic data: 

• Opinions
• Pain points
• Core values 
• Life experiences
• Spending habits 
• Hobbies and interests 
• Lifestyle behaviors 

Psychographic data will help you create an emotional connection with your customers that inspires them to make purchases and further interact with your marketing. 

Conclusion

Data is one of the most important tools to have in your marketing toolkit. Without it, you rely solely on your and your team’s perspectives to create marketing materials that generate consistent results. And doing this almost guarantees you miss the mark with your audience. 

Instead, you should rely on information that tells you exactly what your customers are doing and why and what marketing tactics are working. Collecting the data types we mentioned above through various data collection methods gets you on this path. 

Featured image by Lukas on Pexels

The post Data Mastery: What Marketers Need to Know appeared first on noupe.

The ADA is the Americans with Disabilities Act. It protects people with disabilities from discrimination in their daily lives. It covers the workplace, education, transport, and any space that’s open to the public.

But the act also extends to electronic and information technology, including websites.

In short, having an ADA-compliant website is a legal requirement, but it also makes commercial sense.

The digital transformation of our lives means that businesses and organizations can’t afford to leave anyone behind. Access to the online world is a necessity rather than a choice, and putting up barriers to disabled citizens is not only morally and legally wrong but it’s also bad business.

So, what challenges do disabled people face when interacting with a website?

Challenges for disabled users

If you think of your website as a physical space, like a shop, you would never give your customers a door that was difficult to open. The virtual doorway to your business needs to swing freely open for everyone. From the landing page to your order management system software, you need to think about every aspect of your website from the point of view of disabled users.

You might want to carry out a full IT compliance audit checklist to see how your site rates and identify areas for improvement. It will give you a starting point from which to measure your progress as you make your site more accessible.

There are four basic areas of disability that can impact a website user: physical, cognitive, auditory (including speech), and visual. Let’s look at them one by one.

Physical

Suppose your website has complex click interactions or doesn’t have full keyboard support. In that case, you could be making life difficult for people with various physical disabilities, ranging from paralysis and chronic diseases like arthritis to a person with missing limbs.

People with these types of physical disabilities often interact with technology using head pointers, mouth sticks, joysticks, on-screen keyboards, or hands-free software, like voice recognition.

Cognitive

Cognitive disabilities are behavioral and neurological conditions including ADHD, autism, MS, and epilepsy, as well as learning difficulties, such as dyslexia.

People who have cognitive disabilities can find websites that have flashing, blinking content and sound that can’t be turned off particularly challenging. They need clear, uncluttered navigation and text that can be easily enlarged. Text-to-speech software can also be a great help.

Auditory

Hearing loss or deafness means that, although a site’s visuals might be fully accessible, any audio or video content needs to be carefully considered.

If videos or audio elements can’t be paused and don’t have adjustable volume, this can be a real obstacle. Likewise, videos that don’t have clear and legible subtitles and captions, background music, and unnecessary sound effects are also a barrier.

Speech

Speech impairment also needs to be considered. Many businesses only have a phone number as a contact or use some element of speech recognition. This is where machine intelligence solutions could really make a difference.

Visual

This disability probably represents the biggest challenge when it comes to using a website. It can mean a person is blind or, to some degree, partially sighted. People with visual disabilities need to zoom in and enlarge text. They also use braille readers or screen readers that say content aloud. Websites that don’t work with these functions or lack keyboard support can completely shut the visually impaired out.

Design is key

So, how can website design help people with disabilities? Some fixes can be simple or inexpensive, like making sure your website layout is clear, but there are other possibilities, such as a quality risk assessment matrix to better assess compliance or looking at your training strategy when it comes to your IT department. Here are some practical tips for making your website ADA compliant.

1. Layout: present information in a clear and logical order. Avoid too many choices or confusing choices. Make sure the same information isn’t repeated or hidden in different locations. Make sure the menu is easily visible or audible.

2. Text and font: choose a clear and suitable text size and font.

3. Color: use color well. Don’t have the website too monochrome, but avoid too many colors or combinations that colorblind people have difficulty with.                          

4. Actions: make all actions definite and precise. Use phrases such as “Book Here” rather than “Click Here” without specifying what will happen when the client presses click. Avoid users having to hover over buttons or elements to make them work.

5. Errors: have a clear and helpful error message if something goes wrong. Make sure the message offers advice on addressing the issue, and make sure these are audible and easy to read.

6. Headings: format headings properly. This can really help users, as screen readers recognize the various levels of headings.

7. Alt tags: these will allow users to read and hear descriptions of video and audio content. This function also helps with SEO, but make sure descriptions are clear and accurate.

8. Keyboard: ensure the site is accessible to users who can only interact through a keyboard. Try this out yourself. Make sure the tab order is logical and intuitive.

9. Transcriptions: make sure you have transcriptions of videos and audio content. Make these separate and in addition to captions and subtitles. Some users like to read through or listen again to content without images or sound to interfere with their concentration. 

10. Test: last of all, walk through the whole website yourself, try it out in different modes, and put yourself in a disabled user’s shoes. Don’t be afraid to get feedback from disabled users themselves. There’s no point in making changes if you don’t get them right.

The benefits

Having an accessible website that’s ADA-compliant means you’re open for business to the entire population. You’ll bring in customers and clients from every section of society, building a brand image that’s inclusive and welcoming. As part of your IT business continuity plan making sure you’re keeping up with your legal and customer care-based duties is a must.

But you’re not only making sure you avoid costly legal issues and fines and gaining customers, but you’re also empowering people to live full, independent lives and make their own choices without assistance. This alone is surely enough of a reason to make simple changes and get your website ADA-compliant.

Photo by Marcus Aurelius on Pexels

The post What Is an ADA-Compliant Website and How Can You Build One? appeared first on noupe.